/* ============================================================
   LEICHT IN BEWEGUNG · Zentrale Bottom-Sheet-Komponente
   assets/sheet.css · Stand 2026

   Einheitliches Kontaktauswahl-Sheet für alle acht Seiten (vier
   Landingpages + vier Haupttemplate-Seiten). Ersetzt auf den
   Haupttemplate-Seiten (index/einzelunterricht/workshops/ueber-uns)
   das bisherige Anker-Dropdown (.nav-cta-wrap/.nav-cta-menu/
   .nav-cta-opt). Werte 1:1 aus den bisherigen Landingpage-Sheets
   übernommen (verbindung.css/muehelos-singen.css/koerpersprechstunde.css/
   therapeuten-workshop.css waren hier bereits wortgleich).

   Eigene, lokal benannte Custom Properties (--sheet-*) statt der
   Marken-Tokens der jeweiligen Seite: --ink/--bg (Landingpages) und
   --dunkel/--offwhite (Haupttemplate) heißen unterschiedlich und sind
   nicht überall gleich definiert. So sieht das Sheet auf allen acht
   Seiten garantiert identisch aus, unabhängig vom Token-Namensschema
   der jeweiligen Seite. Schriftfamilien kommen bewusst aus dem
   gemeinsamen assets/tokens.css (--font-serif/--font-sans), das beide
   Seitenfamilien bereits laden.

   Barrierefreiheit (Fokus-Falle/-Rückgabe, Scroll-Sperre, Escape) wird
   von assets/sheet.js übernommen – hier nur die Optik. */

.sheet-backdrop{
  --sheet-bg:#fefefc;--sheet-ink:#232629;--sheet-ink-soft:#3b3f43;
  --sheet-muted:#a9a9a9;--sheet-line:#e7e3d8;--sheet-bg-warm:#f6f3ec;
  --sheet-radius:14px;--sheet-focus:#90ca4d;
  position:fixed;inset:0;
  background:rgba(35,38,41,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:100;opacity:0;pointer-events:none;
  transition:opacity 280ms ease;
}
.sheet-backdrop.is-open{opacity:1;pointer-events:auto;}

.sheet{
  --sheet-bg:#fefefc;--sheet-ink:#232629;--sheet-ink-soft:#3b3f43;
  --sheet-muted:#a9a9a9;--sheet-line:#e7e3d8;--sheet-bg-warm:#f6f3ec;
  --sheet-radius:14px;--sheet-focus:#90ca4d;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--sheet-bg);
  border-radius:28px 28px 0 0;
  padding:28px 24px 32px;
  z-index:101;
  transform:translateY(100%);
  transition:transform 360ms cubic-bezier(.2,.8,.2,1);
  max-width:520px;margin:0 auto;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.3);
}
.sheet.is-open{transform:translateY(0);}
.sheet:focus{outline:none;}
.sheet__grip{width:40px;height:4px;background:var(--sheet-muted);border-radius:2px;margin:0 auto 22px;opacity:.4;}
.sheet h3{margin:0 0 8px;font-family:var(--font-serif);font-weight:500;font-size:22px;color:var(--sheet-ink);}
.sheet p{margin:0 0 24px;font-family:var(--font-sans);color:var(--sheet-ink-soft);font-size:14px;}
.sheet__options{display:flex;flex-direction:column;gap:12px;}
.sheet__option{
  display:flex;align-items:center;
  padding:18px 20px;
  border:1px solid var(--sheet-line);
  border-radius:var(--sheet-radius);
  cursor:pointer;background:var(--sheet-bg);
  text-decoration:none;
  transition:border-color 200ms ease,background 200ms ease;
}
.sheet__option:hover{border-color:var(--sheet-ink);background:var(--sheet-bg-warm);}
.sheet__option:focus-visible{outline:2px solid var(--sheet-focus);outline-offset:2px;}
.sheet__option strong{display:block;font-family:var(--font-serif);font-weight:400;font-size:18px;color:var(--sheet-ink);}
.sheet__option span{display:block;margin-top:2px;font-family:var(--font-sans);font-size:13px;color:var(--sheet-muted);}

@media(prefers-reduced-motion:reduce){
  .sheet,.sheet-backdrop{transition:none;}
}