/* RhythmDiktat Cookies — v5 (vollständig, kompatibel mit alter & neuer Markup-Variante) */

/* Sichtbarkeit/Overlay */
.rdc-hidden{ display:none !important; }
.rdc * { box-sizing: border-box; font-family: inherit; }
.rdc { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 9999;
       display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
.rdc .rdc-panel { background: var(--theme-lightest, #fff); color: var(--theme-darker, #222);
       width: min(980px, 100%); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow: hidden; }
.rdc .rdc-header { display:flex; align-items:center; justify-content: space-between; gap:.5rem;
       padding:.75rem 1rem; border-bottom: 1px solid var(--theme-lighter, #eee); }
.rdc .rdc-title { font-weight:700; }
.rdc .rdc-body { padding: 1rem; }
.rdc .rdc-intro { margin: 0 0 .75rem 0; text-align:center; }

/* ---------- 4-Spalten-Mapping ---------- */
.rdc-grid4{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; align-items:start; }
@media (max-width: 960px){ .rdc-grid4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 540px){ .rdc-grid4{ grid-template-columns: 1fr; } }

.rdc-col4{ border:1px solid var(--theme-lighter, #eee); border-radius:12px; padding:.7rem; display:grid; gap:.5rem; }
.rdc-beat--label{ display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.rdc-beat-caption{ font-size:.92rem; opacity:.9; }

/* NEUES Beat-Element (Button 1–4) */
.rdc .rdc-beat-btn{
  width: 48px; height: 48px; border-radius: 12px; border:1px solid var(--theme-dark, #ccc);
  background: var(--theme-light, #fafafa); cursor:pointer; font-weight:700;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.rdc .rdc-beat-btn.rdc-on{ background: var(--theme-special, #f04d37); color:#fff; border-color: var(--theme-special, #f04d37); }
.rdc .rdc-beat-btn.rdc-active{ outline: 3px solid rgba(240,77,55,.35); transform: scale(1.05); }

/* ALTES Beat-Element (Fallback) */
.rdc .rdc-beat{ width: 44px; height: 44px; display:flex; align-items:center; justify-content:center;
  border-radius: 8px; border: 1px dashed var(--theme-dark, #ccc); opacity: .6; }
.rdc .rdc-beat.rdc-on { background: var(--theme-special, #f04d37); color:#fff; opacity:1; border-style: solid; }
.rdc .rdc-beat.rdc-active { outline: 3px solid rgba(240,77,55,.35); transform: scale(1.05); }

/* Texte in jeder Spalte */
.rdc-col4-text small{ opacity:.9; display:block; text-align:center; }

/* ---------- Toggle-Switches ---------- */
.rdc-switch { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.rdc-switch input { position: absolute; opacity: 0; }
.rdc-slider { width: 46px; height: 26px; border-radius: 999px; background: var(--theme-dark, #bbb);
  display: inline-block; position: relative; transition: background .2s ease; }
.rdc-slider::after { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 50%;
  position: absolute; top: 3px; left: 3px; transition: transform .2s ease; }
.rdc-switch input:checked + .rdc-slider { background: var(--theme-special, #f04d37); }
.rdc-switch input:checked + .rdc-slider::after { transform: translateX(20px); }
.rdc-switch-label { font-size:.95rem; }

.rdc-pill { display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.85rem; background: var(--theme-dark, #ddd); }

/* ---------- Playbar & Buttons ---------- */
.rdc-playbar{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:.75rem 0; }
.rdc-play{ border: 1px solid var(--theme-special, #f04d37); background: var(--theme-light, #f7f7f7);
  border-radius: 999px; padding: .45rem .8rem; cursor:pointer; }
.rdc-play[aria-pressed="true"]{ background: var(--theme-special, #f04d37); color:#fff; border-color: var(--theme-special, #f04d37); }
.rdc-play-hint{ font-size:.95rem; opacity:.9; }

.rdc-form{ display:grid; gap:.6rem; }
.rdc-legal small{ opacity:.9; display:block; text-align:center; }

.rdc-actions { display:flex; flex-wrap: wrap; gap:.6rem; justify-content:center; margin-top:.25rem; }
.rdc-btn { border: 1px solid var(--theme-darker, #333); background: var(--theme-light, #f7f7f7);
  color: var(--theme-darker, #333); padding:.55rem .95rem; border-radius: 8px; cursor:pointer; }
.rdc-btn--ok { background: var(--theme-special, #f04d37); color:#fff; border-color: var(--theme-special, #f04d37); }
.rdc-btn--ghost { background: transparent; }

/* ---------- Reopen-Button ---------- */
.rdc-reopen { position: fixed; right: 14px; bottom: 14px; border-radius: 999px;
  border: 1px solid var(--theme-special, #f04d37); background: var(--theme-lightest, #fff);
  width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  z-index: 9998; box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Head row inside each category card: beat button left, name right */
.rdc-col4-head { display:flex; align-items:center; gap:.6rem; }
.rdc-cat { font-weight: 600; opacity: .9; }

/* Optional: soften card look a bit */
.rdc-col4 { background: var(--theme-lightest, #fff); border-radius: 12px; }

/* ===== Mobile-safe modal sizing ===== */
.rdc { align-items: center; } /* statt nur bottom: zentriert und scrollbar */

.rdc .rdc-panel {
  /* Höhe auf Viewport begrenzen und scrollen lassen */
  max-height: calc(100dvh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Fallbacks für Browser ohne dvh/svh Support */
@supports not (height: 100dvh) {
  .rdc .rdc-panel { max-height: calc(100vh - 24px); }
}
@supports (height: 100svh) {
  .rdc .rdc-panel { max-height: calc(92svh); } /* etwas Luft für Browser-Chrome */
}

/* etwas kompakter innen auf kleinen Screens */
@media (max-width: 540px) {
  .rdc .rdc-body { padding: .75rem; }
  .rdc .rdc-title { font-size: 1rem; }
  .rdc .rdc-col4 { padding: .6rem; }
  .rdc .rdc-beat-btn { width: 40px; height: 40px; border-radius: 10px; }

  /* kompakterer Switch */
  .rdc .rdc-slider { width: 40px; height: 22px; }
  .rdc .rdc-slider::after { width: 16px; height: 16px; top: 3px; left: 3px; }
  .rdc .rdc-switch input:checked + .rdc-slider::after { transform: translateX(18px); }

  /* große Buttons: volle Breite, leichter Stack */
  .rdc .rdc-actions { gap: .5rem; }
  .rdc .rdc-btn { width: 100%; }
}

/* Optional: Action-Leiste sticky am unteren Rand des Panels
   – so sind „Nur notwendige / Alle erlauben / Auswahl speichern“ immer erreichbar */
.rdc .rdc-actions {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--theme-lightest, #fff) 70%, rgba(255,255,255,0));
  padding-top: .5rem;
  margin-top: .25rem;
}

/* --- Slim bottom banner (max 1/3 height, minimal UI) --- */
.rdc {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; /* attach at bottom */
  padding: 0;
  background: transparent;          /* remove dark fullscreen overlay */
  z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
}

/* full-width on mobile; nice rounded top; internal scroll if content grows */
.rdc .rdc-panel {
  width: 100%;
  max-width: 100%;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
  max-height: 33dvh;
  overflow: auto;
}
@supports not (height: 100dvh) { .rdc .rdc-panel { max-height: 33vh; } }

.rdc .rdc-header { padding: .5rem .75rem; }
.rdc .rdc-title  { font-size: 1rem; }
.rdc .rdc-body   { padding: .5rem .75rem; }
.rdc .rdc-intro  { margin: 0; font-size: .95rem; }

/* Hide non-essential UI (4/4 grid + metronome + fine-grained switches) */
.rdc .rdc-grid4,
.rdc .rdc-playbar {
  display: none !important;
}

/* Compact action row */
.rdc .rdc-actions {
  position: static;
  background: none;
  padding-top: .25rem;
  margin-top: .25rem;
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
}
.rdc .rdc-btn { padding: .5rem .85rem; }

/* If you want to trim further: hide “Auswahl speichern” */
.rdc .rdc-actions .rdc-btn[data-rdc="save"] { display: none !important; }

/* Desktop: keep it a bottom strip as well (cap at 1/3 height) */
@media (min-width: 960px) {
  .rdc .rdc-panel { max-width: 980px; margin: 0 auto; }
}

/* uncomment any you want */
.rdc .rdc-header { display:none; }
.rdc .rdc-intro  { display:none; }