@layer form {
/*
 * DB (D-265, gdb/PLAN_DB.md): Form, Tiefe, Flaeche -- was ein Design
 * ueber die Regler „Ecken“, „Kante der Karten“, „Material“, „Kopf der
 * Heute-Karten“ und „Licht“ waehlt und sich nicht als blosser Token-Wert
 * ausdruecken laesst.
 *
 * Regeln dieses Blatts:
 *  - Ebene form liegt nach alt und vor knoepfe (stil.css, Zeile 1): sie
 *    schlaegt jede Seitenregel unabhaengig von der Spezifitaet, das
 *    Knopf-System bleibt oben.
 *  - JEDE Deklaration steht unter @container style(--schalter: wert). Die
 *    Schalter tragen in stil.css :root ihre Vorgabe; dann greift hier
 *    nichts, und jedes Design ohne eigene Wahl bleibt, wie es ist
 *    (tests/test_db_form.py prueft das samt Gegenprobe). Ein Browser ohne
 *    Stilabfragen ueberspringt die Bloecke ganz und zeigt die Grundform.
 *  - Zustaende gehen vor Material (Auflage B): Papier, Leinen, Karton,
 *    Samt, Metall und Pergament liegen als halbdurchsichtige Bildebene
 *    UEBER der Kartenfarbe -- gewaehlt, aktiv, Hover behalten ihre Farbe
 *    darunter. Glas setzt gar keinen Hintergrund, es definiert an der
 *    Karte nur die Flaechen-Token neu; die Regeln der Karte (auch ihre
 *    Zustaende) rechnen damit weiter. (Die Tafel ist zurueckgestellt:
 *    VISION.md, nach DF.)
 *  - Karten mit eigener Verlaufsflaeche (.naechster-schritt,
 *    .lernkarten-tagesstand, .fokus-kartenliste > li) bekommen keine
 *    Tonoberflaeche: die Bildebene ersetzte ihren Verlauf, „Als Naechstes“
 *    wurde hell unter heller Schrift (Messung 05.10.). Der Waechter haelt
 *    die Liste vollstaendig.
 *  - Die Goldkante ist eine eigene Ebene (::after mit Maske), nie
 *    background oder border-image -- so vertraegt sie sich mit jedem
 *    Material (Vorbehalt der Pruefsitzung, 03.10.).
 *
 * Das <main> der Seiten mit eigenem Kopf traegt .bearbeiten-formular als
 * Layout-Huelle (.anmelden-rahmen) und ist keine Karte: ausgenommen per
 * :not(:where(...)), damit die Spezifitaet der Liste gleich bleibt (DE 07.10.:
 * sonst eckige Goldkante um die Anmeldekarte).
 *
 * Die Kartenliste (Stufe 2, DESIGN_SYSTEM §3) steht nur hier; der
 * Waechter tests/test_db_form.py verlangt, dass jede Klasse einer Regel
 * mit --dv-tiefe-karte darin steht oder begruendet ausgenommen ist.
 */
:is(
  .karte, .naechster-schritt, .einstieg-karte, .anmelden-karte, .wiederfinden-karte,
  .system-rueckmeldung, .aufnahme-katalog-karte, .aufnahme-neu-einstieg, .austausch-beitrag, .austausch-komponist,
  .austausch-leerzustand, .austausch-nur-lesen, .mitglied-profil-kopf, .parkett-leerzustand, .auswertung-block,
  .auswertungen-dashboardkarte, .auswertungen-kennzahl, .auswertungs-perspektiven > section, .bearbeiten-formular:not(:where(.anmelden-rahmen)), .bpm-kasten,
  .design-galerie-inhalt, .eingangskorb-erfassen, .eingangskorb-warteschlange, .faq-einstieg, .faq-gruppe,
  .faq-leer, .feedback-inhalt, .versionen-inhalt, .verwaltung-inhalt, .struktur-abschnitte,
  .fokus-kartenliste > li, .heute-einstellungen-karte, .heute-empfehlung, .heute-seitenkopf, .heute-suchtreffer,
  .schnellzugriff-leiste, .kopf-pflegestand-blatt, .lerncenter-modul, .lernkarte, .lernkarten-abschluss,
  .lernkarten-ausblick, .lernkarten-kandidaten, .lernkarten-sitzungswahl, .lernkarten-tagesstand, .abschnitte > details,
  .offene-teilnahmen, .master-liste, .move-eigenschaften > details, .move-kernfeld, .move-medien-einstieg,
  .move-uebungsaktionen, .move-verknuepfungen-rahmen, .musik-bereich, .musik-medien, .musik-metadaten-einstieg,
  .musik-verwaltung, .person-bereich, .quelle-lernzone, .quelle-medien-start, .quelle-recap-oeffner,
  .quelle-stunden, .quelle-verwaltung, .ressource-bereich, .ressource-medien, .ressource-verwaltung,
  .technik-bereich, .technik-verwaltung, .steckbrief-ablauf, .steckbrief-beschreibung, .steckbrief-bezugskarte,
  .steckbrief-handlungen, .steckbrief-kern, .steckbrief-medium, .steckbrief-notizen, .steckbrief-ueberblick,
  .steckbrief-zusammenhaenge, .tanzreise-kein-treffer, .trainer-auswahl-details, .trainer-einstellungen-details, .trainer-fokuskarte,
  .trainer-schrittleiste, .trainer-startformular, .uebungskarte, .uebungsmodus-fortschritt, .uebungsmodus-geteilt,
  .uebungsmodus-karte, .uebungsmodus-schnelleintrag, .upload-schritt, .ziele-anlegen, .ziele-filter,
  .ziele-fokusbuehne, .ziele-listenbereich, .zone--handeln, .zone--medien
) {
  /* Ecken -------------------------------------------------------------- */
  @container style(--ecken-form: fase) {
    border-radius: 0;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px),
      calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
    /* Der Ausschnitt schnitte einen Fokusrahmen aussen ab -- innen bleibt er sichtbar. */
    &:focus-visible { outline-offset: calc(-1 * var(--dv-fokus-breite, 2px) - 2px); }
  }
  @container style(--ecken-form: ticket) {
    -webkit-mask:
      radial-gradient(circle 9px at 0 50%, transparent 97%, black 100%) left / 51% 100% no-repeat,
      radial-gradient(circle 9px at 100% 50%, transparent 97%, black 100%) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 9px at 0 50%, transparent 97%, black 100%) left / 51% 100% no-repeat,
      radial-gradient(circle 9px at 100% 50%, transparent 97%, black 100%) right / 51% 100% no-repeat;
    &:focus-visible { outline-offset: calc(-1 * var(--dv-fokus-breite, 2px) - 2px); }
  }
  @container style(--ecken-form: blatt) {
    border-radius: var(--radius-flaeche) var(--radius-klein);
  }
  @container style(--ecken-form: squircle) {
    /* WebKit kann corner-shape (Stand 10/2026) nicht: dort bleibt die Rundung. */
    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: calc(var(--radius-flaeche) * 1.6);
    }
  }

  /* Kante -------------------------------------------------------------- */
  @container style(--karten-kante: gestrichelt) {
    border: 2px dashed color-mix(in srgb, var(--fg) 35%, transparent);
  }
  @container style(--karten-kante: doppelt) {
    border: 4px double color-mix(in srgb, var(--fg) 45%, transparent);
  }
  @container style(--karten-kante: streifen) {
    border-top: 6px solid var(--kachel-aktiv-bg);
  }
  @container style(--karten-kante: gold) {
    border-color: transparent;
    /* Bezugsrahmen fuer die Ebene -- nicht bei Karten, die schon selbst
       positioniert sind (sticky, absolute, fixed): form schluege sonst
       ihr „sticky“. Positioniert tragen sie das ::after ohnehin. */
    &:not(:is(.heute-seitenkopf, .heute-suchtreffer, .kopf-pflegestand-blatt, .master-liste,
              .steckbrief-medium, .tanzreise-kein-treffer, .anmelden-karte, .einstieg-karte,
              .person-bereich, .steckbrief-ablauf, .trainer-auswahl-details,
              .trainer-einstellungen-details)) {
      position: relative;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: 2px; /* abstand-ausnahme: Staerke der Goldkante (Maske schneidet den Inhalt aus), kein Rhythmusschritt */
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, var(--gold-mitte), var(--gold-hell) 45%,
        var(--gold-dunkel) 70%, var(--gold-hell));
      -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
    }
  }

  /* Material ------------------------------------------------------------ */
  @container style(--karten-material: papier) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image:
        radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--material-schatten) 4%, transparent) 0.6px, transparent 1px),
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--material-schatten) 4%, transparent) 0.6px, transparent 1px),
        radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--material-licht) 30%, transparent) 0.6px, transparent 1px);
      background-size: 5px 7px, 7px 11px, 11px 13px;
    }
  }
  @container style(--karten-material: leinen) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--material-schatten) 4%, transparent) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--material-schatten) 4%, transparent) 0 1px, transparent 1px 3px);
      background-size: auto;
    }
  }
  @container style(--karten-material: karton) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image:
        radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--material-schatten) 9%, transparent) 0.7px, transparent 1.1px),
        radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--material-schatten) 7%, transparent) 0.7px, transparent 1.1px),
        linear-gradient(color-mix(in srgb, var(--material-karton) 22%, transparent),
          color-mix(in srgb, var(--material-karton) 22%, transparent));
      background-size: 5px 7px, 7px 11px, auto;
    }
  }
  @container style(--karten-material: samt) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image: radial-gradient(120% 90% at 20% 0%,
        color-mix(in srgb, var(--material-licht) 13%, transparent),
        transparent 55%,
        color-mix(in srgb, var(--material-schatten) 12%, transparent) 100%);
      background-size: auto;
    }
  }
  @container style(--karten-material: metall) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image:
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--material-licht) 6%, transparent) 0 1px,
          color-mix(in srgb, var(--material-schatten) 3%, transparent) 1px 2px, transparent 2px 4px),
        linear-gradient(180deg, color-mix(in srgb, var(--material-licht) 12%, transparent),
          color-mix(in srgb, var(--material-schatten) 8%, transparent));
      background-size: auto;
    }
  }
  @container style(--karten-material: pergament) {
    /* Karten mit eigener Verlaufsflaeche behalten sie (Kopfkommentar). */
    &:not(:is(.naechster-schritt, .lernkarten-tagesstand, .fokus-kartenliste > li)) {
      /* Nebentext rueckt auf getoenter Flaeche zur Textfarbe: der Ton nimmt
         ihm sonst die 4,5 : 1 (pruefe_kontraste, design_regler.MESSPAARE). */
      --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
      --text-sekundaer: var(--gedaempft);
      background-image: radial-gradient(ellipse at center,
        color-mix(in srgb, var(--material-pergament) 12%, transparent) 55%,
        color-mix(in srgb, var(--material-karton) 22%, transparent) 100%);
      background-size: auto;
    }
  }
  @container style(--karten-material: glas) {
    /* Nur Karten, nie ganze Seiten: der Weichzeichner kostet auf aelteren
       Geraeten Rechenzeit. */
    --kachel-bg: color-mix(in srgb, var(--kachel-bg-grund) 62%, transparent);
    --dv-flaeche: var(--kachel-bg);
    --dv-flaeche-stark: var(--kachel-bg);
    -webkit-backdrop-filter: blur(8px) saturate(1.2);
    backdrop-filter: blur(8px) saturate(1.2);
  }
}

/* Kopf der Heute-Karten ---------------------------------------------------- */
.heute-kartenkopf:not(.heute-hero-schild) {
  @container style(--kartenkopf: reiter) {
    background: transparent;
    & > .karten-schild {
      flex: 0 1 auto;
      padding: var(--abstand-2) var(--abstand-4);
      border-radius: 0 0 var(--radius-klein) var(--radius-klein);
      background: var(--heute-kartenkopf-bg);
    }
  }
  @container style(--kartenkopf: linie) {
    background: transparent;
    border-bottom: var(--rahmen-fein) solid var(--rand);
  }
}

/* Licht: eine feste Ebene ueber dem Design-Bild (html::before), unter
   Muster und Karten. Text und Kontrast bleiben unberuehrt. -------------- */
html::after {
  @container style(--licht: buehne) {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 48% at 50% 0%,
      color-mix(in srgb, var(--gold-hell) 45%, transparent), transparent 72%);
  }
  @container style(--licht: vignette) {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%,
      color-mix(in srgb, var(--material-schatten) 24%, transparent));
  }
}

/* Kachelproben der Werkstatt: die Stufe traegt ihren Schalter als
   Inline-Variable an .regler-probe, die Probe darin zeigt die Wirkung. -- */
.regler-probe--ecken > .regler-probe-form {
  @container style(--ecken-form: fase) {
    border-radius: 0;
    clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px),
      calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
  }
  @container style(--ecken-form: ticket) {
    -webkit-mask:
      radial-gradient(circle 4px at 0 50%, transparent 97%, black 100%) left / 51% 100% no-repeat,
      radial-gradient(circle 4px at 100% 50%, transparent 97%, black 100%) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle 4px at 0 50%, transparent 97%, black 100%) left / 51% 100% no-repeat,
      radial-gradient(circle 4px at 100% 50%, transparent 97%, black 100%) right / 51% 100% no-repeat;
  }
  @container style(--ecken-form: blatt) { border-radius: 9px 2px; }
  @container style(--ecken-form: squircle) { border-radius: 8px; }
}
.regler-probe--kachelstil > .regler-probe-form {
  @container style(--karten-kante: gestrichelt) { border: 2px dashed currentColor; }
  @container style(--karten-kante: doppelt) { border: 4px double currentColor; }
  @container style(--karten-kante: streifen) { border-top: 4px solid var(--kachel-aktiv-bg); }
  @container style(--karten-kante: gold) { border: 2px solid var(--gold-mitte); }
}
.regler-probe--material > .regler-probe-form {
  @container style(--karten-material: papier) {
    background-image: radial-gradient(circle, color-mix(in srgb, var(--material-schatten) 25%, transparent) 0.6px, transparent 1px);
    background-size: 3px 4px;
  }
  @container style(--karten-material: leinen) {
    background-image:
      repeating-linear-gradient(0deg, color-mix(in srgb, var(--material-schatten) 18%, transparent) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, color-mix(in srgb, var(--material-schatten) 18%, transparent) 0 1px, transparent 1px 3px);
  }
  @container style(--karten-material: karton) {
    background-color: color-mix(in srgb, var(--material-karton) 45%, var(--kachel-bg));
  }
  @container style(--karten-material: samt) {
    background-image: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--material-licht) 40%, transparent),
      transparent 55%, color-mix(in srgb, var(--material-schatten) 35%, transparent));
  }
  @container style(--karten-material: metall) {
    background-image: repeating-linear-gradient(90deg, color-mix(in srgb, var(--material-licht) 50%, transparent) 0 1px,
      color-mix(in srgb, var(--material-schatten) 20%, transparent) 1px 2px);
  }
  @container style(--karten-material: pergament) {
    background-color: color-mix(in srgb, var(--material-pergament) 55%, var(--kachel-bg));
  }
  @container style(--karten-material: glas) {
    background-color: color-mix(in srgb, var(--kachel-bg) 40%, transparent);
    border-style: dotted;
  }
}
.regler-probe--kartenkopf > .regler-probe-form {
  @container style(--kartenkopf: band) {
    background-image: linear-gradient(var(--kachel-aktiv-bg) 0 35%, transparent 35%);
  }
  @container style(--kartenkopf: reiter) {
    background-image: linear-gradient(var(--kachel-aktiv-bg), var(--kachel-aktiv-bg));
    background-size: 55% 35%;
    background-repeat: no-repeat;
  }
  @container style(--kartenkopf: linie) {
    background-image: linear-gradient(transparent 33%, currentColor 33% calc(33% + 1px), transparent 0);
  }
}
.regler-probe--licht > .regler-probe-form {
  @container style(--licht: buehne) {
    background-image: radial-gradient(ellipse 80% 70% at 50% 0%, var(--gold-hell), transparent 75%);
  }
  @container style(--licht: vignette) {
    background-image: radial-gradient(ellipse at center, transparent 40%, color-mix(in srgb, var(--material-schatten) 45%, transparent));
  }
}

/* ======================================================================
   DC (D-265, gdc/PLAN_DC.md): Leiste, Kopf, Symbole, Bewegung.
   Bleibt unveraendert: D-262 (Leiste weicht per translate, Kopf
   einzeilig), D-213 (Heute-Kopf durchsichtig, Farbe in ::before), D-255
   (Deckel ueber der Statuszeile). Die Leisteneintraege tragen in alt
   background/box-shadow mit !important -- Flaechen am Eintrag liegen
   deshalb auf ::before, Balken und Punkt auf ::after.
   ====================================================================== */
@media (max-width: 899.98px), (min-width: 900px) and (max-width: 1024px) and (orientation: portrait) {
  /* Form der Leiste ---------------------------------------------------- */
  nav.bereichsleiste {
    @container style(--leiste-form: rand) {
      left: 0;
      width: 100%;
      max-width: none;
      bottom: 0;
      transform: none;
      border-width: 1px 0 0;
      border-radius: 0;
      box-shadow: none;
      padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); /* abstand-ausnahme: Leiste fest bemessen (D-262) */
    }
    @container style(--leiste-form: rand-mitte) {
      left: 0;
      width: 100%;
      max-width: none;
      bottom: 0;
      transform: none;
      border-width: 1px 0 0;
      border-radius: 0;
      box-shadow: none;
      padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); /* abstand-ausnahme: Leiste fest bemessen (D-262) */
    }
    @container style(--leiste-form: bogen) {
      left: 0;
      width: 100%;
      max-width: none;
      bottom: 0;
      transform: none;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); /* abstand-ausnahme: Leiste fest bemessen (D-262) */
      /* Die Flaeche mit der Mulde fuer den Mittelknopf. */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-top: 1px solid var(--dv-linie);
        background: color-mix(in srgb, var(--dv-flaeche) 72%, transparent);
        backdrop-filter: blur(20px) saturate(1.25);
        -webkit-backdrop-filter: blur(20px) saturate(1.25);
        -webkit-mask: radial-gradient(circle 36px at 50% -6px, transparent 97%, black 100%);
        mask: radial-gradient(circle 36px at 50% -6px, transparent 97%, black 100%);
      }
      /* Vier Ziele (Solo): keine Mitte, keine Mulde. */
      &:not(:has(.leisten-eintrag--parkett))::before {
        -webkit-mask: none;
        mask: none;
      }
    }
    @container style(--leiste-form: einzeln) {
      border: 0;
      box-shadow: none;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      /* Abdeckung (Timm 07.10. 12:50): zwischen und unter den Knoepfen
         schien Seitentext durch. Hinter der Reihe liegt der Seitengrund, oben
         weich einlaufend, seitlich knapp und nach unten bis ueber den Rand
         hinaus (Abstand zum Rand und Sicherheitsbereich). ::before der Leiste mit
         z-index -1 liegt im Baum vor den Eintraegen -- deren Knopfflaechen
         (::before, ebenfalls -1) malen darueber und bleiben einzeln sichtbar. */
      &::before {
        content: "";
        position: absolute;
        /* Seitlich nur 8 px, innerhalb des 10-px-Leistenabstands. */
        inset: -16px -8px -64px; /* abstand-ausnahme: Abdeckung reicht ueber Leistenrand und Sicherheitsbereich */
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(to bottom, transparent, var(--bg) 16px);
      }
      /* In der Design-Vorschau steht die Leiste im Fluss (position: static,
         oberflaeche_einstellungen.css): Hinter ihr liegt kein Text, und die
         Abdeckung richtete sich nach einem aeusseren Element -- die Seite
         wurde breiter (Merge-Gate 5.8.214, QUERFORMAT). */
      body.design-vorschau-seite &::before { content: none; }
    }
    /* Flaeche der Leiste: deckend statt Glas. */
    @container style(--leiste-flaeche: deckend) {
      background-color: var(--dv-flaeche);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  /* Einzelknoepfe: jeder Eintrag eine eigene Karte (auf ::before). */
  nav.bereichsleiste .bereichsleiste-zeile {
    @container style(--leiste-form: einzeln) {
      gap: 6px; /* abstand-ausnahme: Leiste fest bemessen (D-262) */
    }
  }
  :is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel) {
    @container style(--leiste-form: einzeln) {
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 1px solid var(--dv-linie);
        border-radius: var(--radius-flaeche);
        background: var(--dv-flaeche);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--fg) 16%, transparent);
      }
    }
  }

  /* Mittelknopf: „Hinzufuegen“, nur mit fuenf Zielen (in der Solo-Sammlung
     gibt es keine Mitte -- dann sieht die Leiste aus wie „am Rand“). */
  .bereichsleiste-zeile:has(> .leisten-eintrag--parkett) > .leisten-eintrag--neu > .leisten-nav-ziel {
    @container style(--leiste-form: rand-mitte) {
      width: 54px;
      min-height: 54px;
      height: 54px;
      margin-inline: auto;
      padding: 0;
      color: var(--kachel-aktiv-fg);
      transform: translateY(-18px);
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 50%;
        background: var(--kachel-aktiv-bg);
        box-shadow: 0 8px 18px color-mix(in srgb, var(--fg) 25%, transparent);
      }
      & .leisten-wort {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }
    @container style(--leiste-form: bogen) {
      width: 54px;
      min-height: 54px;
      height: 54px;
      margin-inline: auto;
      padding: 0;
      color: var(--kachel-aktiv-fg);
      transform: translateY(-18px);
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: 50%;
        background: var(--kachel-aktiv-bg);
        box-shadow: 0 8px 18px color-mix(in srgb, var(--fg) 25%, transparent);
      }
      & .leisten-wort {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }
  }

  /* Markierung: jede Form ausser „Fläche“ blendet die wandernde Pille aus. */
  nav.bereichsleiste .bereichsleiste-zeile::before {
    @container style(--leiste-markierung: balken) { opacity: 0; }
    @container style(--leiste-markierung: punkt) { opacity: 0; }
    @container style(--leiste-markierung: leuchten) { opacity: 0; }
    @container style(--leiste-markierung: ring) { opacity: 0; }
    @container style(--leiste-markierung: kreis) { opacity: 0; }
    @container style(--leiste-markierung: gefuellt) { opacity: 0; }
    @container style(--leiste-markierung: wort-pille) { opacity: 0; }
    @container style(--leiste-markierung: akzentflaeche) { opacity: 0; }
    @container style(--leiste-form: einzeln) { opacity: 0; }
  }
  :is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel)[aria-current] {
    @container style(--leiste-markierung: balken) {
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 30%;
        right: 30%;
        height: 3px;
        border-radius: 3px;
        background: var(--kachel-aktiv-bg);
      }
    }
    @container style(--leiste-markierung: punkt) {
      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 2px;
        left: calc(50% - 2.5px);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--kachel-aktiv-bg);
      }
    }
    @container style(--leiste-markierung: leuchten) {
      & .leisten-symbol {
        filter: drop-shadow(0 0 6px var(--kachel-aktiv-bg)) drop-shadow(0 0 2px var(--kachel-aktiv-bg));
      }
    }
    @container style(--leiste-markierung: ring) {
      & svg.leisten-symbol {
        padding: 3px; /* abstand-ausnahme: Abstand des Rings ums 24-px-Zeichen der fest bemessenen Leiste (D-262) */
        border-radius: 50%;
        box-shadow: 0 0 0 2px var(--kachel-aktiv-bg);
      }
    }
    @container style(--leiste-markierung: kreis) {
      & svg.leisten-symbol {
        padding: 3px; /* abstand-ausnahme: Kreis ums 24-px-Zeichen der fest bemessenen Leiste (D-262) */
        border-radius: 50%;
        background: color-mix(in srgb, var(--kachel-aktiv-bg) 20%, transparent);
      }
    }
    @container style(--leiste-markierung: wort-pille) {
      flex-direction: row;
      gap: 5px; /* abstand-ausnahme: Zeichen und Wort in der Wort-Pille, Leiste fest bemessen (D-262) */
      &::before {
        content: "";
        position: absolute;
        inset: 6px 0;
        z-index: -1;
        border-radius: var(--radius-pille);
        background: color-mix(in srgb, var(--kachel-aktiv-bg) 16%, var(--dv-flaeche));
      }
    }
    @container style(--leiste-markierung: akzentflaeche) {
      color: var(--kachel-aktiv-fg);
      &::before {
        content: "";
        position: absolute;
        inset: 2px;
        z-index: -1;
        border-radius: var(--radius-flaeche);
        background: var(--kachel-aktiv-bg);
      }
    }
    /* Einzelknoepfe mit der Vorgabe „Fläche“: die Karte des aktiven Ziels
       getoent (die wandernde Pille passt nicht zwischen die Abstaende). */
    @container style(--leiste-form: einzeln) {
      &::before {
        background: color-mix(in srgb, var(--kachel-aktiv-bg) 16%, var(--dv-flaeche));
      }
    }
  }

  /* Beschriftung: optisch versteckt, nie display:none -- jedes Ziel traegt
     ohnehin aria-label, das Wort bleibt trotzdem im Vorlesebaum. */
  :is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel) .leisten-wort {
    @container style(--leiste-beschriftung: nie) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
  :is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel):not([aria-current]) .leisten-wort {
    @container style(--leiste-beschriftung: aktiv) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    @container style(--leiste-markierung: wort-pille) {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* Bewegung „lebendig“: die Pille federt, ein Druck federt zurueck. Das
     Geraet geht vor: nur ohne „Bewegung reduzieren“. */
  nav.bereichsleiste .bereichsleiste-zeile::before {
    @container style(--bewegung: lebendig) {
      @media (prefers-reduced-motion: no-preference) {
        transition: transform 380ms cubic-bezier(.3, 1.5, .5, 1);
      }
    }
  }
  :is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel) {
    @container style(--bewegung: lebendig) {
      @media (prefers-reduced-motion: no-preference) {
        transition: transform 320ms cubic-bezier(.3, 1.6, .5, 1), color 160ms ease;
        &:active { transform: scale(0.88); }
      }
    }
  }
}

/* gefülltes Zeichen: jedes Leistenzeichen steht dann zweimal da (Schnitt der
   Seite und fill, _leisten_symbole.html) -- auf jeder Breite, also auch in
   der Seitenleiste, zeigt das aktive Ziel nur fill, jedes andere nur das
   erste Zeichen. */
:is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel)[aria-current] svg.leisten-symbol:not(.leisten-symbol--aktiv) {
  @container style(--leiste-markierung: gefuellt) { display: none; }
}
:is(.bereichsleiste-zeile > a, .bereichsleiste-zeile .leisten-nav-ziel):not([aria-current]) .leisten-symbol--aktiv {
  @container style(--leiste-markierung: gefuellt) { display: none; }
}

/* Ein Nebentext-Ton je Seite (Pruefsitzung 07.10., Befund ZONEN aus dem
   Merge-Gate 5.8.214): Karten mit Material ziehen ihren Nebentext zur
   Textfarbe (oben). Ausserhalb der Karten galt der alte Ton -- zwei
   Nebentext-Toene auf derselben Seite. Bei Kartenmaterial gilt dieselbe
   Formel deshalb schon am body; in den Karten ergibt sie denselben Wert
   (--gedaempft-grund ist der Ton des Designs aus :root). Ohne Material
   aendert sich nichts. Messpaare „Nebentext auf dem Seitengrund (<Stufe>)“. */
body {
  @container style(--karten-material: papier) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
  @container style(--karten-material: leinen) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
  @container style(--karten-material: karton) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
  @container style(--karten-material: samt) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
  @container style(--karten-material: metall) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
  @container style(--karten-material: pergament) {
    --gedaempft: color-mix(in srgb, var(--fg) 35%, var(--gedaempft-grund));
    --text-sekundaer: var(--gedaempft);
  }
}

/* Kopf ---------------------------------------------------------------- */
:is(header.kopf, .steckbrief-aktionszeile) {
  @container style(--kopf-stil: verlauf) {
    background-image: linear-gradient(120deg, var(--kopf-bg),
      color-mix(in srgb, var(--kachel-aktiv-bg) 25%, var(--kopf-bg)));
  }
  /* Glas: wie der Heute-Kopf (D-213) -- das klebende Element bleibt
     durchsichtig, die Flaeche liegt in ::before. Timm 07.10. 12:50 („Glas
     dunkler“): zu 88 % in der Kopffarbe getoent, damit die Kopfschrift auch
     ueber einem ganz hellen oder ganz dunklen Grund haelt -- in jeder Palette
     (Messpaare „Kopfschrift auf Glas über hellem/dunklem Grund“,
     design_regler.MESSPAARE).
     Geschrieben wird deshalb in den Farben der Kopfflaeche (D-275), nicht
     mehr im Text der Seite (bis DE: 55 % Kachel, Text der Seite -- auf Heute
     schien der helle Grund durch, Schriftzug 2,44 : 1). */
  @container style(--kopf-stil: glas) {
    background: transparent;
    isolation: isolate;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: color-mix(in srgb, var(--kopf-bg) 88%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      pointer-events: none;
    }
  }
  /* Linie: Seitengrund statt Kopffarbe, eine kraeftige Linie darunter. */
  @container style(--kopf-stil: linie) {
    --fg: var(--dv-text-seite);
    --kopf-nebentext: initial;
    --kopf-akzent: initial;
    --kopf-akzent-fg: initial;
    background: var(--bg);
    border-bottom: 2px solid var(--fg);
  }
  @container style(--kopf-stil: ornament) {
    padding-bottom: calc(0.5rem + 12px); /* abstand-ausnahme: Platz fuer das 10-px-Ornamentband unter dem Kopf */
    &::after {
      content: "";
      position: absolute;
      left: var(--abstand-4);
      right: var(--abstand-4);
      bottom: 4px;
      height: 10px;
      pointer-events: none;
      opacity: 0.6;
      background:
        var(--dv-theme-asset-header, none) center / var(--dv-theme-asset-header-size, 2.8rem 0.55rem) no-repeat,
        linear-gradient(90deg, transparent, var(--fg) 12% 40%, transparent 40% 60%, var(--fg) 60% 88%, transparent)
          center / 100% 1px no-repeat;
    }
  }
}
/* Z-141: Im Steckbrief traegt auch die Kopfzeile selbst die Kopfflaeche
   (.kopfzeile, stil.css) -- bei Glas und Linie blieb sie hinter der
   Aktionszeile kopffarben. Sie wird dort durchsichtig; das Titelband
   behaelt seine eigene Flaeche. */
header.kopfzeile.steckbrief-kopfzeile {
  @container style(--kopf-stil: glas) { background: transparent; }
  @container style(--kopf-stil: linie) { background: transparent; }
}
.steckbrief-aktionszeile {
  @container style(--kopf-stil: glas) { position: relative; }
  @container style(--kopf-stil: ornament) { position: relative; }
}
/* Im einzeiligen Kopf (D-262 V2) ist fuer das Band kein Platz. */
html header.kopf.kopf--kompakt[data-kopf-einzeilig] {
  @container style(--kopf-stil: ornament) {
    padding-bottom: revert-layer;
    &::after { content: none; }
  }
}
/* Die Hilfe-Marke ist ein Ausschnitt der Kopfflaeche (oberflaeche.css); steht
   der Kopf bei Linie auf dem Seitengrund, ist sie es auch (D-275: sonst ein
   dunkler Kopfton als Scheibe auf hellem Grund). Bei Glas ist der Kopf seit
   DE in der Kopffarbe getoent -- die Marke bleibt Kopffarbe. Kopf eindeutig
   (Kennzahl mehrfachselektoren). */
summary > .kopf-hilfe-marke {
  @container style(--kopf-stil: linie) { background: var(--bg); }
}
/* Heute-Kopf: Farbe bleibt in ::before (D-213); bei Linie steht er auf dem
   Seitengrund und schreibt im Text der Seite (D-275), bei Glas (seit DE in
   der Kopffarbe getoent) in den Farben der Kopfflaeche. */
header.heute-seitenkopf {
  @container style(--kopf-stil: linie) { --fg: var(--dv-text-seite); --kopf-akzent: initial; }
}
header.heute-seitenkopf::before {
  @container style(--kopf-stil: verlauf) {
    background-image: linear-gradient(120deg, var(--kopf-bg),
      color-mix(in srgb, var(--kachel-aktiv-bg) 25%, var(--kopf-bg)));
  }
  @container style(--kopf-stil: glas) {
    background: color-mix(in srgb, var(--kopf-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  @container style(--kopf-stil: linie) {
    background: var(--bg);
    border-bottom: 2px solid var(--fg);
  }
}

/* Symbole: die eigenen Strich-Zeichen (_kontakt_icons.html) folgen dem
   Schnitt; die Phosphor-Zeichen waehlt der Server (web/symbole.py). */
:is(svg[stroke-width="2"], svg [stroke-width="2"]) {
  @container style(--symbol-stil: fein) { stroke-width: 1.5; }
  @container style(--symbol-stil: kraeftig) { stroke-width: 2.5; }
}

/* Bewegung „ruhig“: wie „Bewegung reduzieren“ am Geraet. */
*, *::before, *::after {
  @container style(--bewegung: ruhig) {
    transition: none;
    animation: none;
  }
}

/* DC: Kachelproben (Leiste, Kopf, Bewegung) unter ihrem Schalter. */
.regler-probe--leisteform > .regler-probe-form {
  @container style(--leiste-form: rand) {
    background: linear-gradient(currentColor, currentColor) bottom / 100% 4px no-repeat, var(--kachel-bg);
  }
  @container style(--leiste-form: rand-mitte) {
    background: radial-gradient(circle 4px at 50% 62%, currentColor 98%, transparent),
      linear-gradient(currentColor, currentColor) bottom / 100% 4px no-repeat, var(--kachel-bg);
  }
  @container style(--leiste-form: bogen) {
    background: radial-gradient(circle 4px at 50% 62%, currentColor 98%, transparent),
      radial-gradient(circle 6px at 50% 100%, var(--kachel-bg) 98%, transparent),
      linear-gradient(currentColor, currentColor) bottom / 100% 4px no-repeat, var(--kachel-bg);
  }
  @container style(--leiste-form: einzeln) {
    background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) 50% 85% / 80% 4px no-repeat, var(--kachel-bg);
  }
}
.regler-probe--leistemarkierung > .regler-probe-form {
  @container style(--leiste-markierung: balken) {
    background: linear-gradient(var(--kachel-aktiv-bg), var(--kachel-aktiv-bg)) 50% 0 / 45% 3px no-repeat, var(--kachel-bg);
  }
  @container style(--leiste-markierung: punkt) {
    background: radial-gradient(circle 2.5px at 50% 82%, var(--kachel-aktiv-bg) 98%, transparent), var(--kachel-bg);
  }
  @container style(--leiste-markierung: leuchten) {
    background: radial-gradient(circle 7px at 50% 50%, var(--kachel-aktiv-bg) 35%, color-mix(in srgb, var(--kachel-aktiv-bg) 30%, transparent) 60%, transparent), var(--kachel-bg);
  }
  @container style(--leiste-markierung: ring) {
    background: radial-gradient(circle 7px at 50% 50%, transparent 65%, var(--kachel-aktiv-bg) 68% 92%, transparent 95%), var(--kachel-bg);
  }
  @container style(--leiste-markierung: kreis) {
    background: radial-gradient(circle 7px at 50% 50%, color-mix(in srgb, var(--kachel-aktiv-bg) 35%, transparent) 95%, transparent), var(--kachel-bg);
  }
  @container style(--leiste-markierung: gefuellt) {
    background: radial-gradient(circle 5px at 50% 50%, var(--kachel-aktiv-bg) 95%, transparent), var(--kachel-bg);
  }
  @container style(--leiste-markierung: wort-pille) {
    background: linear-gradient(color-mix(in srgb, var(--kachel-aktiv-bg) 30%, transparent), color-mix(in srgb, var(--kachel-aktiv-bg) 30%, transparent)) 50% 50% / 80% 50% no-repeat, var(--kachel-bg);
    border-radius: var(--radius-pille);
  }
  @container style(--leiste-markierung: akzentflaeche) {
    background: var(--kachel-aktiv-bg);
  }
}
.regler-probe--leistebeschriftung > .regler-probe-form {
  @container style(--leiste-beschriftung: aktiv) {
    background: linear-gradient(currentColor, currentColor) 20% 30% / 20% 30% no-repeat,
      linear-gradient(currentColor, currentColor) 20% 82% / 25% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 75% 30% / 20% 30% no-repeat, var(--kachel-bg);
  }
  @container style(--leiste-beschriftung: nie) {
    background: linear-gradient(currentColor, currentColor) 50% 50% / 30% 35% no-repeat, var(--kachel-bg);
  }
}
.regler-probe--leisteflaeche > .regler-probe-form {
  @container style(--leiste-flaeche: deckend) { background: var(--kachel-bg); }
}
.regler-probe--kopfstil > .regler-probe-form {
  @container style(--kopf-stil: verlauf) {
    background: linear-gradient(120deg, var(--kopf-bg), color-mix(in srgb, var(--kachel-aktiv-bg) 25%, var(--kopf-bg))) top / 100% 40% no-repeat, var(--kachel-bg);
  }
  @container style(--kopf-stil: glas) {
    background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 18%, transparent) 0 2px, transparent 2px 5px) top / 100% 40% no-repeat, var(--kachel-bg);
  }
  @container style(--kopf-stil: linie) {
    background: linear-gradient(currentColor, currentColor) 0 40% / 100% 2px no-repeat, var(--kachel-bg);
  }
  @container style(--kopf-stil: ornament) {
    background: radial-gradient(circle 2px at 50% 52%, currentColor 98%, transparent),
      linear-gradient(var(--kopf-bg), var(--kopf-bg)) top / 100% 40% no-repeat, var(--kachel-bg);
  }
}
.regler-probe--bewegung > .regler-probe-form {
  @container style(--bewegung: ruhig) {
    background: linear-gradient(currentColor, currentColor) 50% 60% / 80% 2px no-repeat, var(--kachel-bg);
  }
  @container style(--bewegung: lebendig) {
    background: repeating-radial-gradient(circle at 50% 120%, transparent 0 4px, currentColor 4px 5px, transparent 5px 8px) 50% 50% / 100% 100% no-repeat, var(--kachel-bg);
  }
}
}