/* ============================================================
   Komponente: sheet (Bottom Sheet)
   ------------------------------------------------------------
   Quelle: Figma „Design System" → Dialogs & Modals → sheet,
   node 11616:1669, ausgelesen am 28.08.2026.

   SETZT dialog.css VORAUS. Der Innenaufbau `.overlay__*` ist in
   Figma für dialog und sheet derselbe Frame-Baum und liegt
   deshalb nur einmal, in dialog.css.

     <link rel="stylesheet" href="components/dialog.css">
     <link rel="stylesheet" href="components/sheet.css">

   Eine Achse: aktionen = untereinander | einzeln | keine.
   **Kein `nebeneinander`** — bei 393 px werden zwei Buttons
   nebeneinander zu breit, §13.4 gilt hier ohne Ausnahme (§22.3).

   ES GIBT KEINE SHEET-GRÖSSEN (§19.4). Kein S/M/L. Die Höhe
   folgt dem Inhalt. Die einzige Unterscheidung ist ein
   Verhalten: scrollt der Inhalt, klebt die Kopfleiste →
   .sheet--scroll.

   Sheets sind IMMER neutral (§21.3), wie Dialoge.

   Nachgezogen am 31.08.2026: Aussenmaße (§22.3), 1-px-Rand
   (§22.1), Verlaufsband und Scroll-Polster (§22.6).

   DIE MASSE SIND NICHT SYMMETRISCH — nicht nach Augenmaß
   nachbauen. Aussen 12/4/36/4. Die Titelzeile trägt zusätzlich
   16 LINKS, alle anderen Blöcke 16 auf beiden Seiten. Daraus:
   Text bei 20, ✕-Glyph bei 21,5. Wer stattdessen 20 seitliches
   Padding setzt, bekommt ein ✕, das 14 px zu weit innen sitzt —
   die Klickfläche ist 45 breit, das Glyph nur 10 (§22.3).
   Unten sind es 36 statt 24: Platz für die Home-Indicator-Zone.

   ZWEI EBENEN VON ABSTÄNDEN, beide gültig: aussen 24 zwischen
   Grabber, Kopf und Aktionen — innen 8/16/8 in der Staffelung aus
   §22.2b. Das ist kein Widerspruch, die 24 liegen eine Ebene
   höher.

   DAS ✕ SITZT IM SHEET, oben rechts in der Titelzeile — nicht
   darüber auf dem Scrim. Der Grabber ist rein visuell, die Geste
   liegt auf dem ganzen Sheet (§22.3).

   VERWENDUNG
     <div class="scrim"></div>
     <div class="sheet" role="dialog" aria-modal="true"
          aria-labelledby="s1-titel">
       <div class="sheet__grabber" aria-hidden="true"></div>
       <div class="overlay__kopf">
         <div class="overlay__texte">
           <div class="overlay__titelzeile">
             <h2 class="overlay__titel" id="s1-titel">Titel</h2>
             <button class="sheet__schliessen touch-target"
                     aria-label="Regionalausgaben schließen">…</button>
           </div>
           <div class="overlay__inhalt">
             <p class="overlay__text">Erklärung</p>
             <div class="overlay__unterblock">…</div>
           </div>
         </div>
       </div>
       <div class="overlay__aktionen overlay__aktionen--untereinander">
         <button class="btn btn--primary btn--md btn--full">Jetzt lesen</button>
       </div>
     </div>
   ============================================================ */

.sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);                      /* 24 */

  /* Figma: 12/4/36/4 — bewusst asymmetrisch. Die 16 nach innen
     sitzen an .overlay__titelzeile (nur links) und an
     .overlay__inhalt / .overlay__aktionen (beidseitig); daraus
     Text bei 20. NICHT 20 hier setzen (§22.3). Oben sitzt der
     Grabber, unten trägt der größere Abstand die Aktionen von
     der Screen-Unterkante weg. */
  /* Seitenrand als Variable — die Kopf-Trennlinie hebt ihn auf,
     um randlos zu laufen (§26.5). */
  --overlay-rand: var(--space-2xs);          /*  4 */
  padding-top: var(--space-sm);              /* 12 */
  padding-inline: var(--overlay-rand);       /*  4 */
  padding-bottom: var(--space-xl);           /* 36 */

  /* Volle Screenbreite, sitzt an der Unterkante. */
  width: 100%;

  background-color: var(--surface-card);
  /* 1 px label-outline wie Dialog und dialog meldung (§22.1),
     als inset box-shadow und nicht als border — der Hinweis dazu
     steht in dialog.css. Der Schatten folgt dem Radius, also auch
     den beiden gerundeten oberen Ecken.
     Unten läuft die Linie mit, ist aber nie zu sehen: das Sheet
     sitzt an der Screen-Unterkante. */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  /* Nur oben gerundet — unten schließt es mit dem Screen ab. */
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ------------------------------------------------------------
   Grabber
   ------------------------------------------------------------
   Bleibt, ersetzt das ✕ aber nicht — die Wischgeste ist bei 50+
   nicht vorauszusetzen (§19.4). Drei Wege raus: ✕,
   Runterwischen, Scrim antippen.
   ------------------------------------------------------------ */

.sheet__grabber {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.sheet__grabber::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--text-description);
}

/* ------------------------------------------------------------
   Scrollender Inhalt
   ------------------------------------------------------------
   Sobald der Inhalt scrollt, scrollt der Titel weg und mit ihm
   der Ausgang. Deshalb klebt die Kopfleiste und nur der Inhalt
   darunter bewegt sich (§19.4).

   Nicht aus Figma — dort gibt es keine Scroll-Variante. Gebaut
   nach der Regel in §19.4.
   ------------------------------------------------------------ */

.sheet--scroll {
  max-height: 90vh;
  overflow: hidden;
}

/* Die Trennlinie bleibt hier, obwohl §22.6 „Verlauf oder
   Trennlinie, nie beides" sagt: das gilt für EINE Kante. Oben und
   unten sind zwei, und sie tragen Verschiedenes — oben eine
   deckende Leiste, die als fixierter Balken gelesen wird und eine
   Kante braucht; unten ein Button, der über dem Inhalt schwebt
   und deshalb ausfaden muss. Zwei Verläufe wären zu viel, zwei
   Linien zu hart.

   Die Linie selbst liegt als ::after in dialog.css, damit Dialog
   und Sheet dieselbe haben — 16 eingezogen wie der Inhalt. */
.sheet--scroll .overlay__kopf {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--surface-card);
}

/* Der scrollende Bereich. Die Aktionen liegen als Geschwister
   darunter und bleiben damit unten fixiert — eine Hauptaktion
   bleibt sichtbar, sekundäre Aktionen stehen am Ende des
   scrollenden Inhalts (§19.4).

   DAS SCROLL-POLSTER unten kommt aus dialog.css (§22.6): 40 px,
   damit die letzte Zeile über das Verlaufsband hinausscrollen
   kann. Ohne das Polster bleibt sie unerreichbar — genau der
   Fall, der im Filter-Sheet auffiel, wo „Titelsprache" halb unter
   dem Button stand. */
.sheet__inhalt {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
}

/* ------------------------------------------------------------
   Web (§19.5)
   ------------------------------------------------------------
   Im Web gibt es keine Bottom Sheets — jedes wird ein
   zentriertes Overlay, der Grabber entfällt. Zeichen und Seiten
   bleiben identisch.
   ------------------------------------------------------------ */

.sheet--web {
  max-width: 393px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  /* Rand auf allen vier Seiten — den bringt der inset box-shadow
     ohnehin mit, hier ist nichts nachzulegen.
     Kein Home-Indicator unter einem zentrierten Overlay. */
  padding-bottom: var(--space-lg);           /* 24 */
}

.sheet--web .sheet__grabber {
  display: none;
}

.sheet--web.sheet--scroll {
  max-height: 80vh;
}