/* Alle Farben der Oberflaeche stehen hier und nur hier. Ein fest
     eingetragener Farbwert weiter unten waere im Dunkelmodus die eine
     Stelle, die weiss bleibt - und genau die faellt beim Umschalten auf.

     --dunkel ist die Farbe der Hauptflaechen (Taste, Reitermarkierung,
     Zeichen), --auf-dunkel die Schrift darauf. Im Dunkelmodus tauschen
     die beiden die Rollen: aus schwarz auf weiss wird weiss auf
     schwarz. */
  :root {
    --bg: #f4f3f1;
    --karte: #ffffff;
    --flaeche2: #fbfaf8;
    --gedaempft: #f2f0ed;
    --balken: #ebe8e3;
    --linie: #e7e5e0;
    --linie-stark: #d5d2cb;
    --text: #1b1a18;
    --grau: #76736d;
    --dunkel: #1b1a18;
    --dunkel-hover: #35322d;
    --auf-dunkel: #ffffff;
    --aus: #cbc8c2;
    --aus-text: #a8a49d;
    --gruen: #2c5c3f;
    --gruen-hell: #eaf1ec;
    --gruen-hell2: #f6f8f6;
    --gruen-rand: #cfe0d5;
    --warn: #7a5a15;
    --warn-hell: #fdf3de;
    --warn-rand: #e8dcc4;
    --rot: #a63b2c;
    --rot-hell: #fdf1ef;
    --rot-rand: #f0d6d0;
    --zusatzton: #5b4b9e;
    --zusatzton-hell: #f3f0fa;
    --radius: 14px;
    /* Fuer Eingabefelder, Auswahllisten und Bildlaufleisten des
       Browsers. Ohne das bleiben Auswahlfelder und Kalender hell und
       stechen aus einer dunklen Seite heraus. */
    color-scheme: light;
  }

  /* --- Dunkelmodus ---------------------------------------------------
     Kein Umfaerben per Filter: ein invert() dreht auch Rot und Gruen um,
     und dann ist die Warnfarbe gruen. Statt dessen eine zweite, von Hand
     gesetzte Palette.

     Die Flaechen sind nicht reines Schwarz, sondern sehr dunkles Grau -
     auf einem Bildschirm ergibt Schwarz-auf-Weiss umgekehrt zu viel
     Kontrast und flimmert beim Lesen laengerer Diktate. Die Signalfarben
     werden aufgehellt statt uebernommen: ein Rot, das auf Weiss gut
     lesbar ist, verschwindet auf Schwarz fast. */
  html[data-modus="dunkel"] {
    --bg: #16181a;
    --karte: #1e2124;
    --flaeche2: #24282c;
    --gedaempft: #2b2f34;
    --balken: #343a40;
    --linie: #32373d;
    --linie-stark: #454c54;
    --text: #eceff2;
    --grau: #a3aab2;
    --dunkel: #eceff2;
    --dunkel-hover: #ffffff;
    --auf-dunkel: #16181a;
    --aus: #3a4046;
    --aus-text: #6f777f;
    --gruen: #7fc79b;
    --gruen-hell: #1d2b23;
    --gruen-hell2: #1b2620;
    --gruen-rand: #2f4a3a;
    --warn: #e0b45c;
    --warn-hell: #2e2718;
    --warn-rand: #4d4126;
    --rot: #f08a7a;
    --rot-hell: #2f1e1b;
    --rot-rand: #5a3129;
    --zusatzton: #a99ae0;
    --zusatzton-hell: #232135;
    color-scheme: dark;
  }

  /* Das Zahnschema bleibt hell.

     Es ist eine Zeichnung, keine Bedienflaeche: die Zahnfarbe steht fuer
     bleibend oder Milchzahn, gruen fuer den erhobenen Befund, blau fuer
     den Nachtrag, gelb fuer die Plausibilitaetswarnung. Diese dreizehn
     Farben im Dunkeln nachzustimmen hiesse, dreizehnmal die Bedeutung zu
     riskieren - und dasselbe SVG steht so auch im PDF. Statt dessen
     bekommt es einen hellen Untergrund, wie ein Blatt Papier auf einem
     dunklen Tisch. */
  html[data-modus="dunkel"] svg.zahnschema { background: #f6f4ef;
    border-radius: 10px; padding: .3rem; }
  html[data-modus="dunkel"] .schemalegende i { outline: 1px solid var(--linie); }

  /* Auswahllisten sehen ohne diese Regel in jedem Browser anders aus
     als die Textfelder daneben. Im Dunkelmodus stechen sie dann als
     helle Kaesten heraus. */
  select { font: inherit; color: var(--text); background: var(--karte);
    border: 1px solid var(--linie); border-radius: 10px;
    padding: .45rem .6rem; }
  /* Die Filterzeile des Protokolls: Beschriftung ueber dem Feld statt
     davor, sonst kleben Wort und Kasten aneinander. */
  .filterzeile label.filterfeld { display: flex; flex-direction: column;
    gap: .2rem; font-size: .78rem; color: var(--grau); }
  .filterzeile label.filterhaken { display: flex; align-items: center;
    gap: .4rem; font-size: .82rem; color: var(--grau); }
  /* hidden muss hidden bedeuten.
     Ohne diese Regel gewinnt jede display-Angabe im Stilblock gegen das
     Attribut: ".tastenzeile { display: flex }" liess die Loeschzeile der
     Berichteliste dauerhaft sichtbar, obwohl sie im HTML "hidden" traegt -
     die Taste stand da, ohne dass jemand "Auswaehlen & loeschen" gedrueckt
     hatte. Dasselbe bei jedem <button hidden>, weil button auf
     inline-block steht.

     !important ist hier richtig: hidden ist eine Aussage ueber die
     Sichtbarkeit, keine Formatierung - es hat Vorrang. */
  [hidden] { display: none !important; }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--text);
         font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", sans-serif; }
  a { color: inherit; }

  /* --- Kopfleiste --------------------------------------------------- */
  header.leiste { background: var(--karte); border-bottom: 1px solid var(--linie);
                  position: sticky; top: 0; z-index: 20; }
  .leisteinhalt { max-width: 68rem; margin: 0 auto; padding: .7rem 1.4rem;
                  display: flex; align-items: center; gap: 1rem;
                  justify-content: space-between; }
  a.marke { display: flex; align-items: center; gap: .6rem;
            text-decoration: none; }
  a.marke .zeichen { width: 2.1rem; height: 2.1rem; border-radius: .6rem;
                     background: var(--dunkel); color: var(--auf-dunkel); font-weight: 700;
                     display: flex; align-items: center; justify-content: center;
                     font-size: .95rem; flex: none; }
  a.marke strong { display: block; font-size: .95rem; line-height: 1.2; }
  a.marke em { display: block; font-style: normal; font-size: .62rem;
               letter-spacing: .11em; color: var(--grau); text-transform: uppercase; }
  nav.reiter { display: flex; gap: .15rem; flex-wrap: wrap; }
  nav.reiter a { text-decoration: none; color: var(--grau); font-size: .88rem;
                 padding: .45rem 1rem; border-radius: 999px; white-space: nowrap; }
  nav.reiter a:hover { color: var(--text); background: var(--gedaempft); }
  nav.reiter a.aktiv { background: var(--dunkel); color: var(--auf-dunkel); font-weight: 600; }

  /* --- Sprachwahl ---------------------------------------------------- */
  form.sprachwahl { display: flex; gap: .2rem; margin: 0; }
  form.sprachwahl button { border: 1px solid var(--linie); background: transparent;
                 color: var(--grau); font-size: .72rem; font-weight: 600;
                 padding: .28rem .55rem; border-radius: 999px; cursor: pointer; }
  form.sprachwahl button:hover { color: var(--text); background: var(--gedaempft); }
  form.sprachwahl button.aktiv { background: var(--dunkel); color: var(--auf-dunkel);
                 border-color: var(--dunkel); cursor: default; }

  /* --- Wer ist angemeldet ------------------------------------------- */
  .wer { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
  .wer .wername { font-weight: 600; white-space: nowrap; color: inherit;
                  text-decoration: none; }
  .wer a.wername:hover { text-decoration: underline; }
  .wer .werrolle { color: var(--grau); white-space: nowrap; }
  .wer .werform { margin: 0; }
  @media (max-width: 46rem) { .wer .werrolle { display: none; } }

  /* Ein Banner, das man nicht wegklicken kann. Solange kein Benutzer
     angelegt ist, steht die Anwendung offen - das darf nicht in einer
     Fussnote stehen. */
  .offenbanner { background: var(--rot-hell); color: var(--rot);
                 border-bottom: 1px solid var(--rot-rand); font-size: .86rem;
                 line-height: 1.5; padding: .7rem 1.4rem; text-align: center; }
  .offenbanner strong { display: inline; }
  .offenbanner a { color: inherit; }

  /* --- Seitengeruest ------------------------------------------------ */
  main { max-width: 68rem; margin: 0 auto; padding: 2rem 1.4rem 4rem; }
  h1 { font-size: 1.85rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
  p.unter { color: var(--grau); margin: 0 0 1.6rem; font-size: .92rem; }
  h2 { font-size: 1.02rem; margin: 0 0 .2rem; }
  p.erklaerung { color: var(--grau); font-size: .86rem; margin: 0 0 .9rem; }

  .karte { background: var(--karte); border: 1px solid var(--linie);
           border-radius: var(--radius); padding: 1.1rem 1.2rem;
           margin: 0 0 1rem; }
  .karte > .schritt { font-size: .76rem; color: var(--grau); margin: 0 0 .8rem;
                      letter-spacing: .01em; }
  .karte.schmal { padding: .9rem 1rem; }
  /* Einklappbare Karten (18.10.2026): Plus/Minus rechts in der Ueberschrift. */
  .karte.klappbar > h2 { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
  .karte.klappbar > h2 .klappknopf { margin-left: auto; width: 1.7rem; height: 1.7rem;
    line-height: 1; padding: 0; border: 1px solid var(--linie); border-radius: 6px;
    background: var(--flaeche2); color: var(--text); font-size: 1.1rem; font-weight: 600;
    cursor: pointer; flex: none; }
  .karte.klappbar > h2 .klappknopf:hover { border-color: var(--dunkel); }
  .karte.klappbar.zu > :not(h2) { display: none !important; }
  .karte.klappbar.zu > h2 { margin-bottom: 0; }

  /* --- Kacheln (Auswahl) -------------------------------------------- */
  .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
  @media (max-width: 46rem) { .kacheln { grid-template-columns: 1fr; } }

  /* --- Übersicht oben im Bericht (18.10.2026) ------------------------
     Angekreuzte Nummern links, Befund rechts, immer sichtbar. Die Karte
     ist bewusst nicht .klappbar und bekommt eine farbige Kante, damit
     sie sich von den klappbaren Karten darunter abhebt. Unter 46rem
     werden die Spalten untereinander gestellt. */
  #ueberblick { border-left: 4px solid var(--dunkel); }
  #ueberblick > h2 { margin-bottom: .2rem; }
  .ueberblick { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
  .ueberblick .spalte { min-width: 0; }
  /* Eigene Klasse, nicht .schemamarke: die Schema-Marken werden in
     Tests eingesammelt und den Zahnschemata zugeordnet - zwei weitere
     Marken ohne Schema wuerden diese Zuordnung verschieben. */
  .ueberblick p.spaltenmarke { font-size: .78rem; font-weight: 600;
    color: var(--grau); text-transform: uppercase; letter-spacing: .05em;
    margin: .4rem 0 .3rem; }
  .ueberblick pre.diktat { margin: 0; }
  ul.nummernliste { list-style: none; margin: 0; padding: 0; }
  ul.nummernliste li { display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .45rem; padding: .3rem 0; border-top: 1px solid var(--linie); }
  ul.nummernliste li:first-child { border-top: 0; }
  ul.nummernliste .nr { font-size: 1.05rem; }
  ul.nummernliste .text { flex-basis: 100%; color: var(--grau); font-size: .86rem; }
  p.leer.knapp { margin: .3rem 0 0; }
  @media (max-width: 46rem) {
    .ueberblick { grid-template-columns: 1fr; gap: .8rem; }
  }
  label.kachel { border: 1px solid var(--linie); border-radius: 10px;
                 padding: .85rem 1rem; text-align: center; cursor: pointer;
                 background: var(--karte); display: block; }
  label.kachel:hover { border-color: var(--linie-stark); }
  label.kachel input { position: absolute; opacity: 0; pointer-events: none; }
  label.kachel .was { display: block; font-size: .92rem; font-weight: 600; }
  label.kachel .warum { display: block; font-size: .78rem; color: var(--grau);
                        margin-top: .15rem; }
  label.kachel.aktiv, label.kachel:has(input:checked) {
    border-color: var(--dunkel); box-shadow: inset 0 0 0 1px var(--dunkel);
    background: var(--flaeche2); }

  /* --- Aufnahme (Diktat) --------------------------------------------- */
  .aufkarte { border: 1px solid var(--linie); border-radius: 10px;
              background: var(--flaeche2); padding: .9rem 1rem; margin-top: .7rem; }
  .aufzustimmung { display: flex; gap: .6rem; align-items: flex-start;
                   font-size: .86rem; line-height: 1.45; padding: .6rem .75rem;
                   border: 1px solid var(--warn-rand); background: var(--warn-hell);
                   border-radius: 8px; margin-bottom: .8rem; }
  .aufzustimmung input { margin-top: .22rem; flex: none; }
  .aufsteuer { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
  button.aufnehmen { background: var(--rot-hell); color: var(--rot);
                     border-color: var(--rot-rand); font-weight: 600; }
  button.aufnehmen:hover { border-color: var(--rot); }
  button.aufnehmen.laeuft { background: var(--rot); color: var(--auf-dunkel);
                            border-color: var(--rot); }
  button.aufnehmen[disabled] { background: var(--gedaempft); color: var(--aus-text);
                               border-color: var(--linie); cursor: not-allowed; }
  .aufuhr { font-variant-numeric: tabular-nums; font-size: 1.05rem;
            font-weight: 600; min-width: 4rem; }
  .aufpegel { width: 7rem; height: .45rem; background: var(--balken);
              border-radius: 3px; overflow: hidden; }
  .aufpegel i { display: block; height: 100%; width: 0; background: var(--dunkel);
                transition: width .08s linear; }
  .aufstatus { font-size: .84rem; color: var(--grau); }
  .aufstatus.warn { color: var(--rot); font-weight: 600; }
  /* Sprachbefehle Pause/Weiter, Warteschlange, Trainingskennzeichen (18.10.2026) */
  .aufpausen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
               margin-top: .7rem; font-size: .82rem; color: var(--grau); }
  .aufpausiert { margin-top: .7rem; padding: 1rem; border-radius: 10px;
                 background: var(--warn-hell); border: 2px solid var(--warn-rand);
                 color: var(--rot); font-size: 2rem; font-weight: 800;
                 letter-spacing: .12em; text-align: center; }
  .aufpausiert small { display: block; font-size: .8rem; font-weight: 400;
                       letter-spacing: 0; color: var(--grau); margin-top: .3rem; }
  .aufwarte { margin-top: .5rem; font-size: .84rem; color: var(--grau); }
  .auftraining { display: flex; gap: .6rem; align-items: flex-start;
                 margin-top: .8rem; font-size: .86rem; cursor: pointer; }
  .auftraining input { margin-top: .22rem; flex: none; }
  .auftraining .warum { display: block; font-size: .8rem; color: var(--grau); }
  /* --- Soll aus der Praxis (19.10.2026) --------------------------------
     Erste Karte auf Bericht und Erfassung, violette Kante wie die
     Praxis-Ergaenzungen (zusatzton): was hier steht, kommt von der
     Praxis, nicht vom Programm. Zwei offene Unterabschnitte mit je
     einem Textfeld. */
  .sollkarte { border-left: 4px solid var(--zusatzton); }
  .sollkarte details.sollblock > summary { font-size: .9rem; }
  .sollkarte .sollblock textarea { width: 100%; min-height: 4.5rem;
    margin: 0 0 .5rem; box-sizing: border-box; }
  /* --- Tonaufnahme im Bericht (19.10.2026) ----------------------------- */
  .tonspieler { display: block; width: 100%; max-width: 40rem; margin: .4rem 0 .6rem; }
  /* Das eigene Kaestchen fuer das Kuerzel. Steht ueber der
     Aufnahmekarte und sieht aus wie sie - es ist derselbe Rahmen. */
  .kuerzelkarte { margin-top: .7rem; }
  .kuerzelzeile { display: flex; align-items: center; gap: 1rem;
                  cursor: pointer; }
  .kuerzelzeile > span { flex: 1; }
  .kuerzelzeile .was { display: block; font-size: .9rem; font-weight: 600; }
  .kuerzelzeile .warum { display: block; font-size: .82rem; color: var(--grau); }
  .kuerzelzeile input[type=text] { width: 7rem; flex: none;
                                   padding: .4rem .6rem; }
  .auffortschritt { width: 100%; height: .28rem; background: var(--balken);
                    border-radius: 2px; margin-top: .7rem; display: none;
                    overflow: hidden; }
  .auffortschritt i { display: block; height: 100%; width: 0;
                      background: var(--dunkel); }
  .auffahne { display: none; margin-top: .7rem; padding: .6rem .75rem;
              border-radius: 8px; font-size: .86rem; line-height: 1.5;
              background: var(--warn-hell); border: 1px solid var(--warn-rand); }
  .auffahne.geprueft { background: var(--gedaempft); border-color: var(--linie); }
  .auffahne.fehler { background: var(--rot-hell); border-color: var(--rot-rand);
                     color: var(--rot); }
  .auffahne code { font-size: .8rem; }
  .aufzaehne { margin-top: .5rem; }
  .aufzaehne code { display: inline-block; background: var(--karte);
                    border: 1px solid var(--linie-stark); border-radius: 5px;
                    padding: .08rem .4rem; margin: .1rem .25rem .1rem 0;
                    font-weight: 600; }
  p.aufherkunft { color: var(--grau); font-size: .8rem; margin: .5rem 0 0; }
  /* Sprechhilfe: steht unter der Aufnahmesteuerung, damit sie im Blick
     ist, bevor jemand auf "Aufnahme starten" drueckt - nicht daneben,
     wo sie ueberlesen wird. */
  .sprechhilfe { margin-top: .7rem; padding-top: .6rem;
                 border-top: 1px solid var(--linie); }
  .sprechhilfe .sprechsatz { font-size: .83rem; line-height: 1.45;
                             margin: 0 0 .4rem; }
  ul.signalliste { list-style: none; margin: 0 0 .4rem; padding: 0; }
  ul.signalliste li { padding: 0; font-size: .83rem; }
  ul.signalliste code { background: var(--karte); border: 1px solid var(--linie-stark);
                        border-radius: 5px; padding: .08rem .45rem;
                        font-weight: 600; }
  /* Inline statt als eigene Zeile: die Karte steht ueber der Eingabe,
     jede Zeile hier schiebt das Diktatfeld weiter nach unten. */
  ul.signalliste .warum { color: var(--grau); font-size: .78rem; }
  ul.signalliste .warum code { font-weight: 400; background: transparent;
                               border: 0; padding: 0; }

  /* --- Formularteile ------------------------------------------------ */
  textarea, input[type=text], input[type=password] {
                               width: 100%; font: inherit; padding: .7rem .85rem;
    border: 1px solid var(--linie); border-radius: 10px; background: var(--karte);
    color: var(--text); }
  textarea { min-height: 10rem; resize: vertical; }
  textarea:focus, input[type=text]:focus, input[type=password]:focus {
    outline: 2px solid var(--dunkel);
    outline-offset: -1px; border-color: var(--dunkel); }
  .feldabstand { margin-bottom: .7rem; }
  p.fusszeile { color: var(--grau); font-size: .8rem; margin: .6rem 0 0; }

  button, .taste { font: inherit; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent; padding: .62rem 1.3rem; text-decoration: none;
    display: inline-block; }
  button.haupt, .taste.haupt { background: var(--dunkel); color: var(--auf-dunkel); }
  button.haupt:hover, .taste.haupt:hover { background: var(--dunkel-hover); }
  button.haupt[disabled] { background: var(--aus); cursor: not-allowed; }
  button.zweit, .taste.zweit { background: var(--karte); color: var(--text);
    border-color: var(--linie-stark); }
  button.zweit:hover, .taste.zweit:hover { border-color: var(--dunkel); }
  button.gefahr, .taste.gefahr { background: var(--rot-hell); color: var(--rot);
    border-color: var(--rot-rand); }
  button.gefahr:hover { border-color: var(--rot); }
  button.breit { width: 100%; padding: .8rem 1.3rem; font-weight: 600; }
  button.klein, .taste.klein { padding: .34rem .9rem; font-size: .84rem; }
  .tastenzeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
                 margin-top: .8rem; }
  .kopfzeile { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center;
               margin: 0 0 1.1rem; }
  .kopfzeile .hinweis { margin: 0; }

  /* --- Ergaenzen / Nachtraege ---------------------------------------- */
  details.ergaenzen { margin: 0 0 .9rem; }
  details.ergaenzen > summary { cursor: pointer; display: inline-block;
    font-size: .82rem; color: var(--grau); border: 1px solid var(--linie);
    border-radius: 999px; padding: .22rem .8rem; list-style: none; }
  details.ergaenzen > summary::-webkit-details-marker { display: none; }
  details.ergaenzen > summary:hover { border-color: var(--dunkel);
                                      color: var(--text); }
  details.ergaenzen[open] > summary { background: var(--gedaempft); color: var(--text); }
  .ergaenzform { border: 1px solid var(--linie); border-radius: 10px;
                 background: var(--flaeche2); padding: .8rem; margin-top: .6rem; }
  .ergaenzform p.erklaerung { margin-bottom: .6rem; }
  .ergaenzzeile { display: flex; gap: .5rem; flex-wrap: wrap;
                  align-items: center; margin-bottom: .5rem; }
  .ergaenzzeile:last-child { margin-bottom: 0; }
  .ergaenzzeile input[type=text], .ergaenzzeile select { flex: 1; min-width: 9rem; }
  .ergaenzzeile input.schmalfeld { flex: 0 0 6.5rem; min-width: 0; }
  .ergaenzzeile select { font: inherit; padding: .7rem .85rem;
    border: 1px solid var(--linie); border-radius: 10px; background: var(--karte);
    color: var(--text); }
  .nachtrag { border-left: 3px solid var(--warn); background: var(--warn-hell);
              border-radius: 0 8px 8px 0; padding: .6rem .8rem;
              margin-top: .6rem; }
  .nachtrag .kopf { font-size: .72rem; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--warn);
                    font-weight: 600; margin-bottom: .2rem; }
  .nachtrag .inhalt { font-size: .9rem; white-space: pre-wrap; }
  .nachtrag .wer { font-size: .78rem; color: var(--grau); margin-top: .3rem; }
  .nachtrag code { font-weight: 600; }
  /* Gestrichenes bleibt lesbar. Es verschwindet nicht - es wird als
     zurueckgenommen gekennzeichnet. */
  .nachtrag.gestrichen { background: var(--flaeche2); border-left-color: var(--grau); }
  .nachtrag.gestrichen .inhalt { text-decoration: line-through;
                                 color: var(--grau); }
  .nachtrag.gestrichen .kopf { color: var(--grau); }
  .nachtrag.streichung { border-left-color: var(--rot);
                         background: var(--rot-hell); }
  .nachtrag.streichung .kopf { color: var(--rot); }
  .nachtrag .bezug { font-size: .82rem; color: var(--grau);
                     text-decoration: line-through; margin-bottom: .2rem; }
  .streichform { margin-top: .5rem; }
  .streichform summary { cursor: pointer; font-size: .78rem;
                         color: var(--grau); list-style: none; }
  .streichform summary::-webkit-details-marker { display: none; }
  .streichform summary:hover { color: var(--rot); }
  .freigabezeile { border-top: 1px solid var(--linie); padding: .35rem 0;
                   font-size: .84rem; }
  .freigabezeile:first-of-type { border-top: 0; }
  .freigabezeile .wer { font-weight: 600; }
  .freigabezeile .wann { color: var(--grau); }

  label.schalterzeile { display: flex; gap: .6rem; align-items: flex-start;
    padding: .6rem 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
  label.schalterzeile:last-child { border-bottom: 0; }
  label.schalterzeile input { margin-top: .25rem; flex: none; }
  label.schalterzeile .was { font-size: .9rem; font-weight: 600; display: block; }
  label.schalterzeile .warum { font-size: .82rem; color: var(--grau); display: block; }
  /* Eine einzelne Schalterzeile mitten in einer Karte - nicht in einer
     Liste. Die Trennlinie der Grundregel trennt dort nichts und stuende
     als Strich zwischen Text und Taste. */
  label.schalterzeile.frei { border-bottom: 0; padding: .2rem 0 .8rem; }
  /* Dieselbe Zeile, aber ohne Polster: sie ist der ganze Inhalt einer
     schmalen Karte und soll sie nicht hoeher machen als noetig. */
  label.schalterzeile.knapp { border-bottom: 0; padding: 0; }

  /* --- Einstellungsabschnitte ---------------------------------------- */
  /* Zehn Karten untereinander waren eine Seite, die man scrollt statt
     liest. Fuenf Aufklapper, alle zu, passen auf einen Bildschirm.

     Wichtig: die Felder bleiben im Formular, auch wenn der Abschnitt zu
     ist. <details> blendet aus, es schaltet nichts ab - ein zugeklappter
     Abschnitt schickt seine Werte mit. Bei den Kaestchen sorgt zusaetzlich
     "schalter_gestellt" dafuer, dass keiner umkippt. */
  details.abschnitt { background: var(--karte);
    border: 1px solid var(--linie); border-radius: var(--radius);
    margin: 0 0 .7rem; }
  details.abschnitt > summary { cursor: pointer; list-style: none;
    padding: .9rem 1.2rem; display: flex; align-items: baseline;
    gap: .6rem; flex-wrap: wrap; }
  details.abschnitt > summary::-webkit-details-marker { display: none; }
  /* Eigenes Zeichen statt des Browser-Dreiecks: das sieht in jedem
     Browser anders aus und laesst sich nicht ausrichten. */
  details.abschnitt > summary::before { content: "▸"; flex: none;
    color: var(--grau); font-size: .75rem; line-height: 1.6; }
  details.abschnitt[open] > summary::before { content: "▾"; }
  details.abschnitt > summary .titel { font-size: 1.02rem; font-weight: 600; }
  details.abschnitt > summary .worum { font-size: .84rem; color: var(--grau); }
  details.abschnitt > summary:hover .titel { text-decoration: underline; }
  details.abschnitt[open] > summary { border-bottom: 1px solid var(--linie); }
  details.abschnitt > .inhalt { padding: .2rem 1.2rem 1.1rem; }
  /* Karten innerhalb eines Abschnitts: kein zweiter Rahmen, nur eine
     Trennlinie zwischen den Themen. */
  .unterkarte { padding: .9rem 0 0; }
  .unterkarte + .unterkarte { border-top: 1px solid var(--linie);
    margin-top: .4rem; }
  .unterkarte h2 { font-size: .95rem; }

  /* --- Informationskarte --------------------------------------------- */
  /* Eigene Klasse und nicht details.ergaenzen: der Aufklapper soll hier
     aussehen wie die Schalterzeile daneben, nicht wie eine Pille. */
  details.infoklappe > summary { cursor: pointer; list-style: none;
    display: block; padding: 0; }
  details.infoklappe > summary::-webkit-details-marker { display: none; }
  details.infoklappe > summary .was { display: block; font-size: .9rem;
    font-weight: 600; }
  details.infoklappe > summary .warum { display: block; font-size: .82rem;
    color: var(--grau); }
  details.infoklappe > summary:hover .was { text-decoration: underline; }
  details.infoklappe[open] > summary { margin-bottom: .6rem; }
  table.lesetabelle { font-size: .84rem; }
  table.lesetabelle td, table.lesetabelle th { padding: .35rem .5rem; }
  table.lesetabelle td.ja { color: var(--gruen); font-weight: 600; }
  table.lesetabelle td.nein { color: var(--grau); }
  p.wortkopf { font-size: .8rem; font-weight: 600; color: var(--gruen);
               margin: .9rem 0 .25rem; }
  p.wortliste { margin: 0; font-size: .84rem; line-height: 2; }
  p.wortliste code { background: var(--karte);
                     border: 1px solid var(--linie-stark); border-radius: 5px;
                     padding: .1rem .45rem; white-space: nowrap; }

  /* Beispieldiktat: als Zitat abgesetzt, damit es nicht wie Anleitung
     gelesen wird, sondern wie ein gesprochener Satz. */
  p.beispieldiktat { margin: 0; font-size: .84rem; line-height: 1.65;
                     color: var(--text); font-style: italic;
                     border-left: 2px solid var(--linie-stark);
                     padding: .1rem 0 .1rem .7rem; }

  /* Richtlinien sind Empfehlungen, keine Pflicht - deshalb in der
     ruhigen Fusszeilenfarbe statt in der Signalfarbe der Wortkoepfe. */
  ol.richtlinien { margin: .4rem 0 0; padding-left: 1.15rem;
                   color: var(--grau); font-size: .8rem; }
  ol.richtlinien li { margin-bottom: .35rem; }
  ol.richtlinien strong { color: var(--text); font-weight: 600; }

  /* --- Meldungen ---------------------------------------------------- */
  p.stoerung, p.gutgegangen, p.hinweisfeld {
    border-radius: 10px; padding: .6rem .8rem; font-size: .87rem;
    margin: 0 0 1rem; }
  p.stoerung { background: var(--warn-hell); color: var(--warn); }
  p.gutgegangen { background: var(--gruen-hell); color: var(--gruen); font-weight: 600; }
  p.hinweisfeld { background: var(--gedaempft); color: var(--grau); }
  .hinweis { color: var(--grau); font-size: .85rem; margin: .9rem 0 0; }
  .leer { color: var(--grau); padding: 2rem 0; text-align: center; }

  /* --- Tabellen ----------------------------------------------------- */
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie);
           vertical-align: top; }
  tr:last-child td { border-bottom: 0; }
  th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
       color: var(--grau); font-weight: 600; }
  td.nr { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
  td.zitat { color: var(--grau); font-size: .85rem; }
  td.kreuz { width: 1.8rem; padding-right: 0; }
  /* Abgewaehlte Zeile: bleibt lesbar, ist aber sichtbar aus der Abrechnung
     heraus. Nur blass reicht nicht - der Durchstrich sagt "gilt nicht". */
  tr.heraus td.nr, tr.heraus td:nth-child(3) { text-decoration: line-through; }
  tr.heraus td { color: var(--grau); }
  /* Von den BEMA-Abrechnungsbestimmungen gesperrt. Die Zeile bleibt
     stehen und bleibt ankreuzbar - der Hinweis geht nicht weg, auch
     wenn der Behandler das Haekchen wieder setzt. Warnung gelb,
     Fehler rot, wie sonst im Haus. */
  tr.gesperrt td { background: var(--warn-hell); }
  tr.gesperrt td.nr { color: var(--warn); }
  .sperrhinweis { display: block; font-size: .8rem; color: var(--warn);
                  margin-top: .2rem; }
  tr.gesperrt.streng td { background: var(--rot-hell); }
  tr.gesperrt.streng td.nr { color: var(--rot); }
  tr.gesperrt.streng .sperrhinweis { color: var(--rot); }
  /* Dritte Stufe der GOZ (22.09.2026): zulaessig, aber in der Rechnung zu
     begruenden. Kein Haekchen weg, deshalb weder gelb noch rot, sondern
     der Zusatzton, der im Haus fuer "Ergaenztes" steht. Minderung ist eine
     Warnung ohne Haekchenverlust: gelb. Regelhinweise sind Prosa mit
     pruefbarem Kern: grau, damit sie nicht wie eine Sperre aussehen. */
  tr.begruendung td { background: var(--zusatzton-hell); }
  tr.begruendung td.nr { color: var(--zusatzton); }
  .begruendungshinweis { display: block; font-size: .8rem; color: var(--zusatzton);
                         margin-top: .2rem; }
  .begruendungstext { display: block; font-size: .8rem; margin-top: .15rem; }
  .begruendungstext q { font-style: italic; }
  .minderungshinweis { display: block; font-size: .8rem; color: var(--warn);
                       margin-top: .2rem; }
  tr.minderungszeile td { font-size: .82rem; padding-top: 0; }
  .minderungsangebot { display: flex; gap: .4rem; align-items: baseline;
                       color: var(--warn); cursor: pointer; }
  .minderungsangebot strong { color: inherit; }
  .regelhinweis { display: block; font-size: .8rem; color: var(--grau);
                  margin-top: .2rem; }
  .bausteinliste { font-size: .82rem; margin: .4rem 0 0; }
  .bausteinliste dt { margin-top: .3rem; }
  .bausteinliste dd { margin: 0 0 0 1rem; color: var(--grau); }
  /* Im abgelegten Bericht: warum die Zeile nicht abgerechnet wird - oder
     warum sie trotz Sperre drinsteht. Die bewusste Aufnahme faellt
     staerker auf, weil sie eine Abweichung dokumentiert. */
  .sperrvermerk { display: block; font-size: .8rem; color: var(--warn);
                  margin-top: .2rem; }
  .sperrvermerk.aufgenommen { color: var(--rot); font-weight: 600; }
  /* Laut Bestimmungen daneben berechenbar. Hebt sich ab, ist aber
     bewusst nicht angekreuzt: die Bestimmungen sagen, was daneben stehen
     darf - nicht, dass es erbracht wurde. */
  .vorschlagsblock { margin-top: 1rem; padding-top: .8rem;
                     border-top: 1px solid var(--linie); }
  .vorschlagsblock h3 { font-size: .95rem; margin: 0 0 .2rem; }
  li.vorschlag { background: var(--gruen-hell2); border-radius: 8px;
                 padding: .35rem .5rem; }
  /* Zeilenweise Aenderungen an der Abrechnung. Gestrichenes bleibt lesbar
     stehen (rot), Ergaenztes hebt sich violett ab - dieselbe Sprache wie
     im Befundschema. */
  tr.z-gestrichen td { background: var(--rot-hell); }
  tr.z-gestrichen td.nr, tr.z-gestrichen td.leistung {
    text-decoration: line-through; color: var(--rot); }
  tr.z-ergaenzt td { background: var(--zusatzton-hell); }
  tr.z-aufgenommen td { background: var(--gruen-hell); }
  tr.z-aufgenommen td.nr { color: var(--gruen); font-weight: 600; }
  tr.z-ergaenzt td.nr { color: var(--zusatzton); font-weight: 600; }

  /* Der Knopf ist rund. Die Grundregel fuer <button> gibt ihm sonst
     1.3rem Seitenpolster und macht eine Ellipse daraus - deshalb hier
     ausdruecklich Groesse und Polster setzen. */
  .zeilenknopf { padding: 0; width: 1.6rem; height: 1.6rem; flex: none;
                 border-radius: 50%; border: 1px solid var(--linie);
                 background: var(--karte); color: var(--grau); cursor: pointer;
                 font-size: 1rem; line-height: 1; display: inline-flex;
                 align-items: center; justify-content: center; }
  .zeilenknopf.minus:hover { color: var(--rot); border-color: var(--rot);
                             background: var(--rot-hell); }
  .zeilenknopf.plus:hover { color: var(--gruen); border-color: var(--gruen);
                            background: var(--gruen-hell); }
  .zeilenknopf.aktiv { border-style: dashed; border-width: 2px;
                       color: var(--text); }
  /* Tastaturbedienung: ohne eigenen Ring verschluckt der runde Knopf den
     Fokus, weil die Grundregel ihn auf eckige Felder auslegt. */
  .zeilenknopf:focus-visible { outline: 2px solid var(--dunkel);
                               outline-offset: 2px; }
  /* Das Kaestchen selbst ist der Schalter (06.09.2026, ersetzt -/+ am
     Zeilenende): ein Knopf ohne Rahmen um das Abbild des Kaestchens, damit
     die Spalte so schmal bleibt wie vorher. */
  .kreuzknopf { padding: 0 .15rem; border: 0; background: none;
                cursor: pointer; line-height: 1; display: inline-flex;
                align-items: center; border-radius: 4px; }
  .kreuzknopf:hover .haken { color: var(--text); }
  .kreuzknopf:hover .haken.an { color: var(--rot); }
  .kreuzknopf.aktiv { outline: 2px dashed var(--warn); outline-offset: 1px; }
  .kreuzknopf:focus-visible { outline: 2px solid var(--dunkel);
                              outline-offset: 2px; }
  /* Zahnfeld: zweistellig, tabellarische Ziffern, unauffaellig bis man
     hineinklickt. Rot, wenn keine Zahnnummer drinsteht. */
  input[type=text].zahnfeld { width: 3.2rem; padding: .15rem .35rem;
                              font-size: .9rem; text-align: center;
                              font-variant-numeric: tabular-nums; }
  input[type=text].zahnfeld.falsch { border-color: var(--rot);
                                     background: var(--rot-hell); }
  tr.zahn-vorgemerkt td.zahnzelle input { border-color: var(--warn);
                                          border-style: dashed; }
  tr.heraus td.zahnzelle input, tr.z-gestrichen td.zahnzelle input {
    color: var(--grau); }
  .zahnmarke { font-size: .78rem; color: var(--grau); margin-left: .35rem;
               white-space: nowrap; }
  /* Badge und Knopf gehoeren in eine Zeile. Ohne das rutscht der Knopf
     unter die Marke, sobald die Textstelle die Zeile breit macht. */
  td.aendzelle, td.aendzelle + td { vertical-align: middle; }
  td.aendzelle { width: 1px; text-align: right; white-space: nowrap;
                 vertical-align: middle; }

  /* Vermerk und Begruendung stehen als eigene Zeile unter ihrer Zeile,
     eingerueckt und ohne Trennlinie darueber - sie gehoeren optisch nach
     oben, nicht zur naechsten Leistung. */
  tr.vermerkzeile td { border-top: 0; padding: 0 0 .45rem 0; }
  tr.vermerkzeile td.text { padding-left: .1rem; }
  .vermerk { font-size: .76rem; color: var(--grau);
             display: inline-block; }
  .vermerk.rot { color: var(--rot); }
  .vermerk.zusatz { color: var(--zusatzton); }
  .vermerk .marke { font-weight: 600; }

  /* Vorgemerkt heisst: noch nicht geschrieben. Ein gestrichelter Balken
     links markiert das, ohne die Tabelle mit einer Linie zu zerschneiden. */
  tr.vorgemerkt td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
  tr.vorgemerkt td { background: var(--warn-hell); }
  .grundkasten { display: flex; align-items: center; gap: .5rem;
                 padding: .1rem 0 .1rem .3rem;
                 border-left: 3px dashed var(--warn); margin-left: .1rem; }
  .grundkasten .marke { font-size: .72rem; color: var(--warn);
                        text-transform: uppercase; letter-spacing: .04em;
                        font-weight: 600; white-space: nowrap; }
  /* Schmaler als die grossen Eingabefelder der Seite. Der Fokusrahmen
     wird bewusst uebersteuert: der dicke schwarze Rahmen aus der
     Grundregel wuerde die Tabellenzeile sprengen. */
  input[type=text].grundfeld { flex: 1; width: auto; font-size: .8rem;
    padding: .32rem .6rem; border: 1px solid var(--linie);
    border-radius: 8px; background: var(--karte); min-width: 8rem; }
  input[type=text].grundfeld:focus { outline: 1px solid var(--warn);
    outline-offset: 0; border-color: var(--warn); }

  .aenderungsleiste { margin-top: .9rem; padding: .7rem .9rem;
                      border: 1px solid var(--warn-rand); border-radius: 10px;
                      background: var(--warn-hell); }
  .aenderungsleiste .zaehler { font-size: .86rem; font-weight: 600;
                               margin: 0 0 .5rem; color: var(--warn); }
  .aenderungsleiste .fehl { color: var(--rot); font-size: .82rem;
                            margin: .4rem 0 0; }
  .aenderungsleiste .fusszeile { margin-bottom: 0; }
  /* Auf schmalen Fenstern brechen die Felder des Ergaenzfensters sonst
     mitten im Wort um. */
  @media (max-width: 620px) {
    .grundkasten { flex-wrap: wrap; }
    .grundkasten .marke { flex-basis: 100%; }
    ul.wahl li .vermerk, ul.wahl li .grundkasten { margin-left: 0; }
  }

  /* In der Nummernliste: der Knopf steht vorn, der Vermerk in einer
     eigenen Zeile darunter - nicht rechts danebengequetscht. */
  ul.wahl li { flex-wrap: wrap; align-items: center; }
  ul.wahl li > span:not(.haken):not(.vermerk):not(.stern):not(.zahnmarke) { flex: 1;
                                                            min-width: 12rem; }
  ul.wahl li .vermerk { flex-basis: 100%; margin-left: 2.15rem; }
  ul.wahl li .grundkasten { flex-basis: 100%; margin-left: 2.15rem;
                            margin-top: .2rem; }
  ul.wahl li.vorgemerkt { background: var(--warn-hell); margin: 0 -.4rem;
                          padding: .3rem .4rem; border-radius: 8px; }
  .marke2 { font-size: .7rem; padding: .12rem .45rem; border-radius: 999px;
            background: var(--gedaempft); color: var(--grau); white-space: nowrap; }
  .marke2.ki { background: var(--gruen-hell); color: var(--gruen); }

  /* --- Aufklappblöcke ----------------------------------------------- */
  details.block { border-top: 1px solid var(--linie); }
  details.block:first-of-type { border-top: 0; }
  details.block > summary { cursor: pointer; padding: .6rem 0; font-weight: 600;
                            font-size: .9rem; list-style-position: inside; }
  details.block > summary .zahl { color: var(--grau); font-weight: 400; font-size: .84rem; }
  ul.wahl { list-style: none; margin: 0 0 .8rem; padding: 0 0 0 1rem; }
  ul.wahl li { padding: .3rem 0; display: flex; gap: .55rem; align-items: baseline;
               font-size: .89rem; }
  ul.wahl li.empf { background: var(--gruen-hell2); margin: 0 -.4rem; padding: .3rem .4rem;
                    border-radius: 8px; }
  ul.wahl code { font-weight: 600; min-width: 3.4rem; font-variant-numeric: tabular-nums; }
  ul.wahl .warum { color: var(--grau); font-size: .8rem; }
  /* Im Bericht steht statt der Ankreuzkaesten ihr Abbild: dort wird nicht
     mehr gewaehlt, aber man muss sehen, was gewaehlt war. */
  .haken { color: var(--grau); font-size: 1rem; line-height: 1;
           min-width: 1rem; text-align: center; }
  .haken.an { color: var(--gruen); }
  ul.wahl li.gewaehlt { background: var(--gruen-hell); margin: 0 -.4rem;
                        padding: .3rem .4rem; border-radius: 8px; }
  ul.wahl .kreuzfeld { flex: none; margin: .15rem 0 0; }
  .auswahlstand { color: var(--grau); font-size: .82rem; flex: 1;
                  min-width: 12rem; }
  .auswahlstand.gut { color: var(--gruen); font-weight: 600; }
  .auswahlstand.warn { color: var(--warn); font-weight: 600; }
  .karte.abgerechnet { border-color: var(--gruen-rand); background: var(--gruen-hell2); }
  .karte.abgerechnet h2 { color: var(--gruen); }

  /* --- Rechnung ------------------------------------------------------ */
  /* Betraege rechtsbuendig und mit gleich breiten Ziffern. Ohne
     tabular-nums tanzen die Kommastellen und die Spalte laesst sich
     nicht mehr ueberfliegen. */
  table.rechnung td.geld, table.rechnung th.geld { text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap; }
  table.rechnung td.geld.summe { font-weight: 700; }
  table.rechnung tr.summenzeile td { border-top: 1px solid var(--linie-stark);
    border-bottom: 0; font-weight: 600; }
  table.rechnung tr.gesamtzeile td { border-top: 2px solid var(--dunkel);
    border-bottom: 0; font-size: 1rem; font-weight: 700; }
  table.rechnung input[type=text] { width: 100%; font: inherit;
    font-size: .85rem; padding: .3rem .45rem; border-radius: 8px;
    text-align: right; font-variant-numeric: tabular-nums; }
  table.rechnung td.faktorzelle { width: 5.4rem; }
  table.rechnung td.anzahlzelle { width: 4.2rem; }
  table.rechnung td.betragzelle { width: 6.5rem; }
  /* Ein Faktor ueber dem Schwellenwert faellt auf, bevor jemand den
     Ausdruck in der Hand haelt. */
  table.rechnung input.ueberschwelle { border-color: var(--warn);
    background: var(--warn-hell); }
  table.rechnung input.unzulaessig { border-color: var(--rot);
    background: var(--rot-hell); }
  tr.begruendungszeile td { border-top: 0; padding: 0 0 .5rem 2.2rem; }
  tr.begruendungszeile input[type=text] { text-align: left;
    font-size: .82rem; }
  .schwellenmarke { font-size: .72rem; color: var(--grau);
                    white-space: nowrap; }
  .rechnungsmangel { border-left: 3px solid var(--rot);
    background: var(--rot-hell); border-radius: 0 8px 8px 0;
    padding: .6rem .8rem; margin: 0 0 .9rem; }
  .rechnungsmangel ul { margin: .3rem 0 0; padding-left: 1.1rem;
                        font-size: .85rem; color: var(--rot); }
  .kopfgitter { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
  @media (max-width: 46rem) { .kopfgitter { grid-template-columns: 1fr; } }
  .kopfgitter label { display: block; font-size: .8rem; color: var(--grau); }
  .kopfgitter label input { margin-top: .2rem; }
  .stern { color: var(--gruen); font-weight: 600; }
  details.goae { border: 1px solid var(--linie); border-radius: 10px;
                 padding: 0 .9rem; margin-top: .9rem; background: var(--flaeche2); }
  details.goae > summary { color: var(--warn); }
  p.goaehinweis { color: var(--grau); font-size: .82rem; margin: .2rem 0 .6rem; }

  /* --- Fuß ----------------------------------------------------------- */
  .fuss { margin-top: 1.4rem; padding-top: .8rem; border-top: 1px solid var(--linie);
          color: var(--grau); font-size: .79rem; line-height: 1.65; }
  .fuss code { font-size: .77rem; }
  .betrieb { display: inline-block; padding: .1rem .5rem; border-radius: 999px;
             font-size: .72rem; font-weight: 600; }
  .betrieb.prod { background: var(--gruen-hell); color: var(--gruen); }
  .betrieb.red { background: var(--warn-hell); color: var(--warn); }

  /* --- Berichte ------------------------------------------------------ */
  .suchzeile { display: flex; align-items: center; gap: .6rem; background: var(--karte);
               border: 1px solid var(--linie); border-radius: 999px;
               padding: .55rem 1.1rem; margin: 0 0 1.1rem; }
  .suchzeile input[type=text] { border: 0; padding: 0; border-radius: 0; }
  .suchzeile input[type=text]:focus { outline: 0; }
  .suchzeile .lupe { color: var(--grau); flex: none; }
  .suchzeile .suchlauf { color: var(--grau); font-size: .8rem; flex: none; }
  .filterzeile { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
                 margin: 0 0 .7rem; }
  .filterzeile .schub { margin-left: auto; }
  a.chip, button.chip { text-decoration: none; color: var(--grau);
    font-size: .85rem; padding: .4rem .9rem; border-radius: 999px;
    border: 1px solid transparent; background: transparent; }
  a.chip:hover, button.chip:hover { color: var(--text); }
  a.chip.aktiv { background: var(--karte); color: var(--text); font-weight: 600;
                 border-color: var(--linie); }

  /* Die Loeschzeile steht ueber der Liste. ".tastenzeile" bringt nur
     margin-top mit - dort, wo sie herkam, war unter ihr das Seitenende.
     Ohne eigenen Abstand nach unten klebt die Taste auf der ersten
     Berichtszeile (gemessen: 0 px). */
  #loeschzeile { margin: .2rem 0 1rem; }

  a.bericht { display: flex; gap: 1rem; align-items: center; text-decoration: none;
    background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
    padding: .85rem 1.1rem; margin-bottom: .6rem; }
  a.bericht:hover { border-color: var(--linie-stark); }
  .bericht .haupttext { flex: 1; min-width: 0; }
  .bericht .titel { font-weight: 600; font-size: .95rem; }
  .bericht .neben { color: var(--grau); font-size: .82rem; margin-top: .15rem;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bericht .pfeil { color: var(--grau); flex: none; }
  .reihe { display: flex; gap: .8rem; align-items: center; margin-bottom: .6rem; }
  .reihe input[type=checkbox] { flex: none; }
  .reihe a.bericht { margin-bottom: 0; flex: 1; }
  .schild { font-size: .72rem; padding: .15rem .55rem; border-radius: 999px;
            background: var(--gedaempft); color: var(--grau); white-space: nowrap; }
  .schild.frei { background: var(--gruen-hell); color: var(--gruen); }
  .schild.offen { background: var(--warn-hell); color: var(--warn); }
  .freigabekasten { border: 1px solid var(--linie); border-radius: var(--radius);
    background: var(--karte); padding: 1.1rem 1.2rem; margin: 0 0 1rem; }
  .freigabekasten.erledigt { background: var(--gruen-hell); border-color: var(--gruen-rand); }
  .freigabekasten.erledigt .wer { font-weight: 600; color: var(--gruen); }
  pre.diktat { font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace;
               white-space: pre-wrap; margin: 0; background: var(--flaeche2);
               border: 1px solid var(--linie); border-radius: 10px; padding: .8rem; }

  /* Beschriftung ueber einem Zahnschema. Auf der Berichtseite stehen bis
     zu drei davon untereinander - Eingabe, Stand, Planung -, und sie
     zeigen dasselbe Bild. Ohne Marke ist nicht zu sehen, welches welches
     ist. */
  p.schemamarke { font-size: .78rem; font-weight: 600; color: var(--grau);
    text-transform: uppercase; letter-spacing: .05em;
    margin: .9rem 0 .3rem; }

  /* --- Befund -------------------------------------------------------- */
  .befundrahmen { background: var(--karte); border: 1px solid var(--linie);
                  border-radius: 10px; padding: .8rem; margin-bottom: .7rem; }
  svg.zahnschema { width: 100%; height: auto; display: block; }
  /* Anklickbar ist das Schema nur in der Erfassung, also nur innerhalb von
     #befundschema. Im Bericht steht dasselbe SVG, aber als Stand: kein
     Zeigefinger, keine Hover-Kante, nichts, was eine Eingabe verspricht.
     Wer diese ID umbenennt, nimmt dem Schema hier die Bedienbarkeit. */
  #befundschema svg.zahnschema .klickflaeche { cursor: pointer; }
  #befundschema svg.zahnschema g.zahn:hover .zone { stroke: var(--gruen); stroke-width: 1.4; }
  #befundschema svg.zahnschema g.zahn.gewaehlt .zone { stroke: var(--gruen); stroke-width: 1.8; }
  #befundschema svg.zahnschema text.kuerzel { cursor: pointer; }
  /* Ausbau 17.09.2026: Segmente der Draufsicht, Wurzeln, scharfes Kuerzel */
  #befundschema svg.zahnschema .segment:hover,
  #befundschema svg.zahnschema .wurzelsegment:hover {
    stroke: var(--gruen); stroke-width: 1.6; }
  svg.zahnschema text.kuerzel.unsicher { font-weight: 600; }
  .kuerzeltaste.scharf { border-color: var(--gruen); background: var(--gruen-hell);
    font-weight: 600; }
  #befundmaterial button.scharf, #befundwurzelzahl button.scharf {
    border-color: var(--gruen); background: var(--gruen-hell); }
  .befundwerkzeug { display: flex; flex-wrap: wrap; align-items: center;
    gap: .3rem .5rem; margin: .4rem 0 .2rem; }
  .befundwerkzeug .werkzeugname { font-size: .8rem; color: var(--grau); }
  .befundwerkzeug button { margin-right: .15rem; }
  .milchschalter { font-size: .82rem; margin-left: auto; display: flex;
    align-items: center; gap: .3rem; }
  .befundkopf .leise { color: var(--grau); font-weight: 400; }
  /* Dasselbe fuer das Schema der Nachtragskarte. Bewusst eine eigene ID
     und nicht dieselbe: die Anzeige des Befunds darunter bleibt ein Stand
     und darf keine Eingabe versprechen. Anklickbar sind hier ausserdem nur
     die gestrichelten Kuerzel - ein erhobener Befund laesst sich nicht
     wegklicken. */
  #nt_schema svg.zahnschema .klickflaeche { cursor: pointer; }
  #nt_schema svg.zahnschema g.zahn:hover .zone { stroke: var(--gruen); stroke-width: 1.4; }
  #nt_schema svg.zahnschema g.zahn.gewaehlt .zone { stroke: var(--gruen); stroke-width: 1.8; }
  #nt_schema svg.zahnschema text.kuerzel.nachtrag { cursor: pointer; }
  /* Die Klickflaeche des Planungsnachtrags. Violett wie die Ebene, zu der
     der Eintrag gehoert - gruen waere die Farbe des Ist-Zustands. */
  #pnt_schema svg.zahnschema .klickflaeche { cursor: pointer; }
  #pnt_schema svg.zahnschema g.zahn:hover .zone { stroke: var(--zusatzton); stroke-width: 1.4; }
  #pnt_schema svg.zahnschema g.zahn.gewaehlt .zone { stroke: var(--zusatzton); stroke-width: 1.8; }
  #pnt_form .rubrikname { color: var(--zusatzton); }
  #pnt_form .kuerzeltaste:hover { border-color: var(--zusatzton); }
  /* In der Planung ist jedes Kuerzel anklickbar - der Klick uebernimmt
     das Vorhaben in den Ist-Zustand. */
  /* In der Planung ist der **Zahn** anklickbar, nicht das Kuerzel.
     Vorher hing am Kuerzel das Uebernehmen in den Befund - eine
     Bedeutung, die sich vom Befundschema daneben unterscheidet, wo ein
     Klick aufs Kuerzel es entfernt. Zwei gleich aussehende Schemata mit
     entgegengesetzter Klickbedeutung ist eine Falle.
     Uebernehmen und Entfernen stehen jetzt als Tasten unter dem
     Schema, je Vorhaben eine Zeile. */
  #planungsschema svg.zahnschema .klickflaeche { cursor: pointer; }
  #planungsschema svg.zahnschema g.zahn:hover .zone { stroke: var(--zusatzton); stroke-width: 1.4; }
  #planungsschema svg.zahnschema g.zahn.gewaehlt .zone { stroke: var(--zusatzton); stroke-width: 1.8; }
  /* Die Rubrikfarbe der Palette folgt der Ebene: gruen im Befund,
     violett in der Planung. */
  #planungspalette .rubrikname { color: var(--zusatzton); }
  #planungspalette .kuerzeltaste:hover { border-color: var(--zusatzton); }
  .planposten { display: flex; align-items: center; gap: .5rem;
    flex-wrap: wrap; padding: .35rem 0; font-size: .88rem;
    border-bottom: 1px solid var(--linie); }
  .planposten:last-child { border-bottom: 0; }
  .planposten .was { flex: 1; min-width: 8rem; }
  .planposten code { font-weight: 600; }
  .ausgabewahl { margin: .6rem 0 0; }
  .ausgabewahl label { display: block; font-size: .88rem; padding: .3rem 0; }
  .ausgabewahl .warum { color: var(--grau); font-size: .82rem; }
  ul.hinweise { margin: .5rem 0 0; padding-left: 1.1rem; color: var(--grau);
                font-size: .86rem; }
  ul.hinweise li.warn { color: var(--warn); }
  .legende { color: var(--grau); font-size: .8rem; margin: .5rem 0 0;
             display: flex; gap: 1.1rem; flex-wrap: wrap; }
  .legende i { display: inline-block; width: .75rem; height: .75rem;
               border-radius: 2px; vertical-align: -1px; margin-right: .3rem;
               border: 1px solid var(--warn); }
  .palette { display: flex; flex-direction: column; gap: .1rem; }
  .rubrik { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap;
            border-bottom: 1px solid var(--linie); padding: .28rem 0; }
  .rubrikname { width: 8.5rem; flex: none; color: var(--gruen);
                font-size: .78rem; font-weight: 600; }
  .kuerzeltaste { font: inherit; font-size: .82rem; padding: .12rem .5rem;
                  border: 1px solid var(--linie); border-radius: 6px;
                  background: var(--karte); color: var(--text); cursor: pointer;
                  min-width: 2.4rem; }
  .kuerzeltaste:hover { border-color: var(--dunkel); }
  /* Symbolbild in der Taste (25.09.2026): dieselbe Zeichnung wie im Schema.
     Klicks gehen an die Taste, nicht an das Bild. */
  .kuerzeltaste { display: inline-flex; align-items: center; gap: .25rem; }
  .kuerzeltaste .tastensymbol { flex: none; pointer-events: none; }
  pre.befundliste { font: 13px/1.7 ui-monospace, Menlo, Consolas, monospace;
                    margin: 0; white-space: pre-wrap; }
  ul.befundhinweise li.offen button { margin-left: .35rem; vertical-align: baseline; }
  ul.befundhinweise li.offen .leise { color: var(--grau); }
  ul.befundhinweise { margin: .5rem 0 0; padding-left: 1.1rem;
                      color: var(--grau); font-size: .86rem; }
  ul.befundhinweise li.warn { color: var(--warn); }
  .befundkopf { display: flex; align-items: baseline; gap: 1rem;
                flex-wrap: wrap; margin-bottom: .5rem; }
  .befundkopf .aktiv { font-size: .85rem; color: var(--grau); }

  /* Warteschlange (25.10.2026): offene Auftraege in der Berichtsliste */
  table.auftraege { width: 100%; border-collapse: collapse; font-size: .88rem; }
  table.auftraege th, table.auftraege td { text-align: left; padding: .4rem .5rem;
    border-bottom: 1px solid var(--linie); vertical-align: top; }
  table.auftraege th { color: var(--grau); font-weight: 600; }
  table.auftraege tr.laeuft td { font-weight: 600; }
  table.auftraege td.tasten { white-space: nowrap; }
  table.auftraege code { font-size: .8rem; }