/* ZählerFlow — Gestaltung nach docs/flow-designsystem.md
   Tokens nicht überschreiben. Keine hartkodierten Farben außerhalb von :root.
   Schriftgewichte höchstens 700. */

/* ===================================================================
   Schrift — Instrument Sans, lokal. Eine Variable Font je Subset,
   deckt 400 bis 700 in einer Datei ab.
   =================================================================== */
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ===================================================================
   Tokens
   =================================================================== */
:root{
  /* --- Raum. Gemeinsam über alle Flow-Projekte. --- */
  --raum-1:8px;
  --raum-2:12px;
  --raum-3:20px;
  --raum-4:32px;
  --raum-5:48px;
  --raum-6:64px;
  --raum-7:100px;

  --sektion:var(--raum-7);
  --sektion-mobil:var(--raum-6);
  --rand:48px;
  --rand-mobil:24px;

  --breite-inhalt:1200px;
  --breite-text:68ch;

  /* --- Radien --- */
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:22px;
  --radius-xl:30px;
  --radius-pille:999px;

  /* --- Tiefe statt Rahmen --- */
  --schatten-1:0 1px 2px rgba(0,0,0,.04),
               0 4px 12px rgba(0,0,0,.04);
  --schatten-2:0 2px 4px rgba(0,0,0,.04),
               0 12px 32px rgba(0,0,0,.08);
  --schatten-3:0 8px 24px rgba(0,0,0,.06),
               0 32px 64px rgba(0,0,0,.10);

  /* --- Bewegung --- */
  --ease-aus:cubic-bezier(.16,1,.30,1);
  --ease-weich:cubic-bezier(.40,0,.20,1);
  --zeit-kurz:200ms;
  --zeit-mittel:420ms;
  --zeit-lang:800ms;

  /* --- Palette ZählerFlow --- */
  --papier:#FAFAF8;
  --flaeche:#F2F2EF;
  --tinte:#16181A;
  --grau:#646970;                     /* Regel siehe Designsystem: >= 4,8:1 auf --flaeche */
  --linie:#E4E4E0;
  --signal:#C8102E;
  --guthaben:#2D6A4F;
  --walze:#141414;

  /* --- Projektzusätze, aus der Palette abgeleitet --- */
  --feld:#FFFFFF;                     /* Eingabeflächen */
  --walze-ziffer:#FFFFFF;             /* Ziffern auf dem Zählwerk */
  --grau-hell:#8A9096;                /* Platzhalter, bewusste Ausnahme — siehe Designsystem */
  --glas:rgba(255,255,255,.72);       /* Milchglas-Navigation */
  --fokus-ring:rgba(22,24,26,.12);    /* 12 % Deckkraft auf --tinte */
  --breite-werkzeug:520px;            /* Formularbreite: dicht, nicht ausgezogen */
  --leiste:60px;                      /* Höhe der Navigationsleiste */
  --hinweis-flaeche:#FFF6D6;          /* Redaktionsplatzhalter, nicht öffentlich */
  --hinweis-linie:#C9B87A;

  /* --- Textskala --- */
  --text-display:clamp(40px,6vw,72px);
  --text-h1:clamp(32px,5vw,44px);
  --text-h2:28px;
  --text-h3:20px;
  --text-koerper:18px;
  --text-klein:14px;
}

/* ===================================================================
   Grundlagen
   =================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:var(--text-koerper);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Textskala. Negative Laufweite bei großen Graden. --- */
.display,h1,h2,h3{font-weight:600;margin:0 0 .6em}
.display{font-size:var(--text-display);line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
h1{font-size:var(--text-h1);line-height:1.15;letter-spacing:-0.015em;margin-bottom:.5em;
  /* Gleicht die Zeilenlängen aus, damit kein einzelnes Wort allein unten steht. */
  text-wrap:balance}
h2{font-size:var(--text-h2);line-height:1.25;letter-spacing:-0.01em;margin-top:2em}
h3{font-size:var(--text-h3);line-height:1.30}
/* Deutsche Komposita sind lang. „Durchschnittsverbrauch" passt bei 360px in keine
   H1-Zeile, bricht ohne diese Regel nicht um und schiebt die ganze Seite nach rechts.
   `break-word` trennt nur, wenn das Wort sonst nicht passt — anders als `anywhere`,
   das auch dann trennt, wenn noch Platz wäre. */
h1,h2,h3{overflow-wrap:break-word}
p,ul,ol,table{margin:0 0 1.15em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:600}
small,.klein{font-size:var(--text-klein);line-height:1.50;color:var(--grau)}
hr{border:0;border-top:1px solid var(--linie);margin:var(--raum-5) 0}

a{color:var(--tinte);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--grau-hell);
  transition:text-decoration-color var(--zeit-kurz) var(--ease-weich)}
a:hover{text-decoration-color:var(--tinte)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--tinte);outline-offset:2px;border-radius:2px}

/* Tabellenziffern überall, wo Ziffern stehen. Instrument Sans setzt
   sonst proportionale Ziffern — die „1" ist 41 % schmäler als die „0". */
.num,input,td,th,time,.ergebnis-zahl,.kennzahl,.zaehlwerk{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* ===================================================================
   Raster
   =================================================================== */
.huelle{width:100%;max-width:var(--breite-inhalt);margin-inline:auto;padding-inline:var(--rand-mobil)}
.fliesstext{max-width:var(--breite-text)}
.abschnitt{padding-block:var(--sektion-mobil);border-top:1px solid var(--linie)}
.abschnitt:first-of-type{border-top:0}
@media(min-width:900px){
  .huelle{padding-inline:var(--rand)}
  .abschnitt{padding-block:var(--sektion)}
}

/* --- Wiederkehrende Textbausteine --- */
/* Der erste Titel in einem Abschnitt braucht keinen Vorabstand. */
.abschnitt>h2:first-child,.huelle>h2:first-child,.fliesstext>h2:first-child{margin-top:0}
/* Vorspann: der Satz unter der Überschrift. */
.vorspann{font-size:var(--text-h3);line-height:1.5;color:var(--grau);
  max-width:var(--breite-text);margin:0 0 var(--raum-5)}
.leise{color:var(--grau)}
.held{padding-top:var(--raum-5)}
/* Held: links die Überschrift, rechts das Werkzeug. */
.held-text{max-width:440px}
.held-werkzeug{max-width:var(--breite-werkzeug)}
.held-raster{display:flex;flex-direction:column;gap:var(--raum-5)}
/* Umbruchpunkt: 900px, also der globale aus dem Designsystem — kein eigener.
   Nachgemessen bei 900, 960, 1024, 1100 und 1440px: Das Zählwerk bleibt überall
   bei 196px unverzerrt, die Textspalte fällt nie unter 400px, kein Überlauf.
   Ein höherer Umbruchpunkt wäre also unbegründet gewesen. */
@media(min-width:900px){
  .held-raster{
    display:grid;
    grid-template-columns:minmax(0,440px) minmax(340px,1fr);
    gap:var(--raum-6);
    align-items:start;
  }
}
.abstand-oben{margin-top:var(--raum-4)}
/* Formel, zwischen zwei Haarlinien. */
.formel{font-size:var(--text-h3);font-weight:600;text-align:center;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:var(--raum-3) 0;font-variant-numeric:tabular-nums}

/* ===================================================================
   Kopf
   =================================================================== */
/* Milchglas. Der Text steht in --tinte, nicht in --grau: über dunklem Inhalt,
   der darunter durchscrollt, fällt Grau auf 2,66:1 und ist auch bei 92 %
   Deckkraft noch unter der Schwelle. Tinte hält bei jedem Untergrund. */
.kopf{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:var(--glas);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid var(--linie);
  transition:background var(--zeit-kurz) var(--ease-weich);
}
body{padding-top:var(--leiste)}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:var(--raum-2);
  min-height:60px;max-width:var(--breite-inhalt);margin-inline:auto;padding-inline:var(--rand-mobil)}
@media(min-width:900px){.kopf-innen{padding-inline:var(--rand)}}
.marke{font-weight:600;font-size:17px;letter-spacing:-0.015em;text-decoration:none;
  display:inline-flex;align-items:center;gap:var(--raum-1);padding-block:var(--raum-2)}
.walze{display:inline-flex;border:1px solid var(--walze);border-radius:4px;overflow:hidden;
  font-size:11px;line-height:1;letter-spacing:.02em}
.walze span{background:var(--walze);color:var(--papier);padding:.28em .2em}
.walze span:last-child{background:var(--papier);color:var(--tinte);
  box-shadow:inset 1px 0 0 var(--walze)}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;color:var(--tinte);font-size:16px;font-weight:400;
  padding:var(--raum-2) var(--raum-1);min-height:48px;display:inline-flex;align-items:center;
  transition:opacity var(--zeit-kurz) var(--ease-weich)}
.nav a:hover{text-decoration:underline;text-underline-offset:.2em}
/* Die aktive Seite steht im Gewicht, nicht in der Farbe. */
.nav a[aria-current="page"]{font-weight:600}
@media(max-width:26.5rem){
  .marke{font-size:16px;gap:6px}
  .walze{display:none}
  .nav a{font-size:15px;padding-inline:6px}
}
/* Drei Navigationspunkte passen bei 360px nicht mehr in eine Zeile: Marke, Abstand und
   Navigation brauchen zusammen 355px, der Textbereich bietet 312px. Hier wird auf die
   kleinste Stufe der Textskala (14px) verkuerzt und die Polsterung enger gefasst. Die
   Hoehe der Tippflaeche bleibt bei 48px, nur die Breite wird knapper. */
@media(max-width:23.5rem){
  .kopf-innen{padding-inline:16px;gap:8px}
  .nav{gap:2px}
  .nav a{font-size:14px;padding-inline:4px}
}

/* ===================================================================
   Bedienelemente. Mindestens 48px Zielfläche, Felder 52px.
   =================================================================== */
.feldgruppe{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--raum-3)}
label{font-size:var(--text-klein);font-weight:600;color:var(--grau)}
input,select{
  font-family:inherit;font-size:17px;color:var(--tinte);background:var(--feld);
  border:1px solid var(--linie);border-radius:var(--radius-s);
  padding:0 var(--raum-2);height:52px;width:100%;
  transition:border-color var(--zeit-kurz) var(--ease-weich),
             box-shadow var(--zeit-kurz) var(--ease-weich);
}
select{padding-block:0}
input:focus,select:focus{border-color:var(--tinte);box-shadow:0 0 0 3px var(--fokus-ring)}
input::placeholder{color:var(--grau-hell)}
input[type="date"]{min-width:0}
.feld-mit-einheit{position:relative;display:flex;align-items:center}
.feld-mit-einheit input{padding-right:var(--raum-5)}
.einheit{position:absolute;right:var(--raum-2);color:var(--grau);font-size:var(--text-klein);
  pointer-events:none}

.knopf{
  font-family:inherit;font-size:16px;font-weight:600;
  background:var(--tinte);color:var(--papier);border:1px solid var(--tinte);
  border-radius:var(--radius-pille);padding:0 var(--raum-4);height:52px;width:100%;
  cursor:pointer;
  transition:transform var(--zeit-kurz) var(--ease-aus),
             box-shadow var(--zeit-kurz) var(--ease-aus),
             background var(--zeit-kurz) var(--ease-weich);
}
.knopf:hover{transform:translateY(-2px);box-shadow:var(--schatten-2)}
.knopf-leise{background:transparent;color:var(--tinte);border:1.5px solid var(--tinte)}
.knopf-leise:hover{background:var(--flaeche)}

/* Kontrollkästchen: Feldgruppe liegt hier waagerecht. */
/* Die Reihe war 28px hoch, die Regel verlangt 48. Das Kaestchen selbst bleibt klein,
   angetippt wird die ganze Reihe — die Beschriftung schaltet ohnehin mit. */
.feldgruppe-reihe{flex-direction:row;align-items:center;gap:var(--raum-1);min-height:48px}
.feldgruppe-reihe label{display:flex;align-items:center;min-height:48px;cursor:pointer}
.feldgruppe-reihe label{color:var(--tinte);font-weight:400;font-size:17px}
.kontrollkaestchen{width:22px;height:22px;min-height:0;flex:none;accent-color:var(--tinte)}

/* Einzige Struktur im Rechner: eine Haarlinie über der Knopfzeile. */
.knopfzeile{border-top:1px solid var(--linie);padding-top:var(--raum-3)}

/* ===================================================================
   Zählwerk — Nachbau des Zählerwerks am Stromzähler.
   Stellenzahl kommt je Bauteil über --stellen, die Einheit steht daneben.
   =================================================================== */
.zaehlwerk-feld{display:flex;align-items:center;gap:var(--raum-2)}
.zaehlwerk{
  display:inline-flex;
  border-radius:var(--radius-s);
  overflow:hidden;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-size:26px;
  font-weight:600;
  letter-spacing:.16em;
  box-shadow:var(--schatten-1);
  transition:box-shadow var(--zeit-kurz) var(--ease-weich);
}
/* Ein gemeinsamer Ring um das ganze Gehäuse, nicht zwei getrennte. */
.zaehlwerk:focus-within{outline:2px solid var(--tinte);outline-offset:3px}
.zaehlwerk input:focus,.zaehlwerk input:focus-visible{outline:none}

.zaehlwerk__ganze,.zaehlwerk__zehntel{
  border:0;border-radius:0;height:auto;
  font:inherit;letter-spacing:inherit;
  font-variant-numeric:inherit;font-feature-settings:inherit;
  padding:13px var(--raum-2);
  color:var(--walze-ziffer);
  transition:none;
}
.zaehlwerk__ganze{
  background:var(--walze);
  text-align:right;
  /* Breite folgt der Stellenzahl: je Stelle eine Ziffernbreite plus Laufweite. */
  width:calc(var(--stellen,6) * (1ch + .16em) + var(--raum-2) * 2);
}
.zaehlwerk__zehntel{
  background:var(--signal);
  text-align:center;
  letter-spacing:0;
  width:calc(1ch + var(--raum-2) * 2);
}
.zaehlwerk__einheit{color:var(--grau);font-size:15px;font-weight:400;white-space:nowrap}
.zaehlwerk-hinweis{font-size:var(--text-klein);line-height:1.50;color:var(--grau);
  margin:var(--raum-1) 0 0}

/* Schmale Geräte: Schriftgrad und Laufweite zurücknehmen, nie umbrechen. */
@media(max-width:22rem){
  .zaehlwerk{font-size:22px;letter-spacing:.10em}
  .zaehlwerk__ganze{width:calc(var(--stellen,6) * (1ch + .10em) + var(--raum-2) * 2)}
}

/* ===================================================================
   Rechner
   =================================================================== */
/* Werkzeuge bleiben dicht: das Formular zieht sich nicht über die ganze Spalte. */
.rechner{border:0;background:none;padding:0;max-width:var(--breite-werkzeug)}
.rechner-titel{font-size:var(--text-h3);font-weight:600;margin:0 0 var(--raum-3)}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:var(--raum-3)}
@media(max-width:29rem){.reihe{grid-template-columns:1fr;gap:0}}
details.mehr{margin:0 0 var(--raum-3)}
details.mehr>summary{cursor:pointer;color:var(--grau);font-size:var(--text-klein);font-weight:600;
  list-style:none;min-height:48px;display:flex;align-items:center;gap:var(--raum-1);
  transition:color var(--zeit-kurz) var(--ease-weich)}
details.mehr>summary::-webkit-details-marker{display:none}
/* Winkel aus zwei Rahmenkanten statt eines Schriftzeichens: unabhängig
   davon, was die Schrift an Sonderzeichen mitbringt. */
details.mehr>summary::before{
  content:"";flex:none;width:7px;height:7px;margin-right:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  transition:transform var(--zeit-kurz) var(--ease-weich);
}
details.mehr[open]>summary::before{transform:rotate(45deg)}
details.mehr>summary:hover{color:var(--tinte)}
.mehr-inhalt{padding-top:var(--raum-3)}
.noscript-hinweis{font-size:var(--text-klein);line-height:1.50;color:var(--grau);
  border-left:3px solid var(--linie);padding-left:var(--raum-2);margin:0 0 var(--raum-3)}
.hinweis-klein{font-size:var(--text-klein);line-height:1.50;color:var(--grau);margin:var(--raum-1) 0 0}
.fehler{font-size:var(--text-klein);margin:var(--raum-2) 0 0;padding-left:var(--raum-2);
  font-weight:600;border-left:2px solid var(--tinte)}

/* ===================================================================
   Ergebnis. Rot gehört dem Zähler.
   =================================================================== */
.ergebnis[hidden]{display:none}
.ergebnis-kopf{padding:var(--raum-5) 0 var(--raum-4)}
.ergebnis-label{font-size:17px;color:var(--grau);margin:0 0 6px}
.ergebnis-zahl{
  font-size:var(--text-display);font-weight:600;line-height:1.05;letter-spacing:-0.02em;
  color:var(--signal);display:block;margin:.1em 0 .15em;
}
.ergebnis-zahl.ist-guthaben{color:var(--guthaben)}
.ergebnis-zahl.ist-neutral{color:var(--tinte)}
.ergebnis-satz{font-size:var(--text-h3);margin:0 0 var(--raum-3)}
/* Betriebsart B: Der Betrag ist geschätzt, und das steht an der Zahl. */
.schaetzung{font-size:var(--text-klein);line-height:1.5;color:var(--grau);font-weight:600;
  border-left:3px solid var(--linie);padding-left:var(--raum-2);margin:0 0 var(--raum-2)}
.ergebnis-einordnung{color:var(--grau);font-size:17px;max-width:var(--breite-text);margin:0}

.tat{padding-block:var(--raum-4);border-top:1px solid var(--linie)}
.tat h3{margin:0 0 6px;font-size:var(--text-h3)}
.tat p{margin:0 0 var(--raum-2);color:var(--grau)}
.tat-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--raum-2)}
.pfeil{display:inline-flex;align-items:center;min-height:48px;font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--tinte);padding-bottom:1px}
.pfeil:hover{border-bottom-width:2px}
.anzeige{font-size:var(--text-klein);color:var(--grau);border:1px solid var(--linie);
  border-radius:var(--radius-s);padding:.15em .5em;white-space:nowrap;flex:none}

/* ===================================================================
   Bauteil: Karte
   Kein Rahmen, Tiefe kommt aus der Schattenskala.
   =================================================================== */
.karte{
  background:var(--flaeche);
  border:0;
  border-radius:var(--radius-l);
  padding:var(--raum-4);
  box-shadow:var(--schatten-1);
}
/* Nur anklickbare Karten heben sich beim Überfahren. Etwas anzuheben, das
   man nicht drücken kann, verspricht eine Interaktion, die es nicht gibt.
   Derzeit trägt keine Karte diese Klasse. */
.karte--klickbar{
  transition:transform var(--zeit-kurz) var(--ease-aus),
             box-shadow var(--zeit-kurz) var(--ease-aus);
}
.karte--klickbar:hover{transform:translateY(-3px);box-shadow:var(--schatten-2)}

/* ===================================================================
   Bauteil: Sektionskopf
   Label ist freiwillig. Ohne Label bleibt kein leerer Abstand stehen.
   =================================================================== */
.sektionskopf{margin:0 0 var(--raum-4)}
.sektionskopf>h2{margin-top:0}
.sektionskopf>p{max-width:var(--breite-text)}
.sektionskopf__label{font-size:var(--text-klein);font-weight:600;color:var(--grau);
  letter-spacing:.04em;margin:0 0 var(--raum-1)}
.sektionskopf__label:empty{display:none}

/* ===================================================================
   Bilder — Foto mit Herkunft, und gezeichnete Zählwerke
   =================================================================== */
.bild{margin:var(--raum-5) 0;max-width:420px}
.bild img{display:block;width:100%;height:auto;border-radius:var(--radius-s)}
.bild figcaption{font-size:var(--text-klein);line-height:1.5;color:var(--grau);
  margin:var(--raum-1) 0 0;max-width:var(--breite-text)}
.bild figcaption a{color:var(--grau)}
.bild figcaption a:hover{color:var(--tinte)}

/* Gezeichnete Zählwerke. Farben kommen aus den Tokens, deshalb inline
   eingebettet — als externe Datei würde var() nicht greifen. */
.zaehlwerk-bild{display:block;max-width:100%;height:auto;margin:var(--raum-4) 0}

/* Zwei Zählwerke nebeneinander. flex-wrap stapelt sie auf schmalen Geräten,
   statt sie zu stauchen — die Ziffernbreite ist nicht verhandelbar. */
.zaehlwerk-paar{display:flex;flex-wrap:wrap;gap:var(--raum-3) var(--raum-5);
  margin:var(--raum-4) 0}
.zaehlwerk-paar__teil{margin:0}
.zaehlwerk-paar__teil .zaehlwerk-bild{margin:0}
.zaehlwerk-paar figcaption{font-size:var(--text-klein);line-height:1.5;color:var(--grau);
  margin:var(--raum-1) 0 0}

/* Gegenüberstellung der drei Nummern. Farben und Maße aus den Tokens.
   Der Zählpunkt ist 33 Zeichen lang und muss bei 360px umbrechen dürfen,
   deshalb `overflow-wrap` statt waagerechtem Lauf. */
.nummern-vergleich{margin:var(--raum-4) 0;border-top:1px solid var(--linie)}
.nummern-vergleich__zeile{padding:var(--raum-3) 0;border-bottom:1px solid var(--linie)}
.nummern-vergleich__name{font-size:var(--text-klein);font-weight:600;color:var(--grau);
  margin:0 0 4px}
.nummern-vergleich__wert{margin:0 0 6px;font-weight:600;font-size:17px;
  font-variant-numeric:tabular-nums;line-height:1.35}
/* Die Umbruchregel muss an der Zeichenkette selbst stehen, nicht am Absatz:
   Eine 33-stellige Kennung in einem inline-Element bricht sonst nicht um
   und schiebt die ganze Seite nach rechts. */
.nummern-vergleich__wert>span:first-child{background:var(--flaeche);
  border-radius:var(--radius-s);padding:.15em .45em;
  display:inline-block;max-width:100%;overflow-wrap:anywhere;word-break:break-all}
.nummern-vergleich__einheit{color:var(--grau);font-weight:400;margin-left:.5em}
.nummern-vergleich__text{margin:0;color:var(--grau);font-size:15px;line-height:1.5;
  max-width:var(--breite-text)}

/* Hervorhebung über dem Foto statt darin. Eine Bearbeitung der Datei wäre
   bei CC BY-SA ein abgeleitetes Werk und müsste selbst unter SA stehen. */
.bild-mit-markierung{position:relative;display:inline-block;max-width:420px}
.bild-mit-markierung .markierung{position:absolute;border:3px solid var(--signal);
  border-radius:3px;pointer-events:none}

/* ===================================================================
   Inhaltsbausteine
   =================================================================== */
/* Inhaltseinschub, keine Karte: kein Schatten, dafür der linke Strich. */
.kurz{border:0;border-left:3px solid var(--tinte);
  border-radius:0 var(--radius-s) var(--radius-s) 0;background:var(--flaeche);
  padding:var(--raum-3);margin:0 0 var(--raum-4)}
.kurz p:last-child{margin-bottom:0}
.kurz-titel{font-size:15px;color:var(--grau);font-weight:600;margin:0 0 var(--raum-1)}

.inhalt-verz{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:var(--raum-3) 0;margin:0 0 var(--raum-4)}
.inhalt-verz p{font-size:15px;color:var(--grau);font-weight:600;margin:0 0 var(--raum-1)}
.inhalt-verz ul{list-style:none;padding:0;margin:0}
.inhalt-verz li{margin:0}
.inhalt-verz a{display:block;padding:4px 0;text-decoration:none;color:var(--grau);
  transition:color var(--zeit-kurz) var(--ease-weich)}
.inhalt-verz a:hover{color:var(--tinte)}

.liste-blank{list-style:none;padding:0;margin:0}
.liste-blank li{border-top:1px solid var(--linie);margin:0}
.liste-blank li:last-child{border-bottom:1px solid var(--linie)}
.liste-blank a{display:flex;align-items:center;gap:var(--raum-1);min-height:52px;
  padding:var(--raum-1) 0;text-decoration:none}
.liste-blank .zeile-text{display:flex;flex-direction:column}
.liste-blank .zeile-zusatz{font-size:var(--text-klein);color:var(--grau)}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:var(--raum-1) 6px;border-bottom:1px solid var(--linie);
  vertical-align:top}
th{font-weight:600;color:var(--grau);font-size:15px}
td:not(:first-child),th:not(:first-child){text-align:right}
.tabelle-huelle{overflow-x:auto;margin:0 0 1.15em}

.faq details{border-bottom:1px solid var(--linie)}
.faq details:first-of-type{border-top:1px solid var(--linie)}
.faq summary{cursor:pointer;font-weight:600;padding:var(--raum-3) 0;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--raum-2);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grau);font-weight:400;font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .antwort{padding:0 0 var(--raum-3);max-width:var(--breite-text)}
.faq .antwort p:last-child{margin-bottom:0}

.brotkrumen{font-size:var(--text-klein);color:var(--grau);padding-top:var(--raum-3)}
.brotkrumen a{color:var(--grau);text-decoration:none}
.brotkrumen a:hover{color:var(--tinte);text-decoration:underline}
.brotkrumen span{padding:0 4px}

.app-hinweis{margin:var(--raum-5) 0 0}
.app-hinweis h3{margin:0 0 6px;font-size:17px}
.app-hinweis p{margin:0 0 var(--raum-2);color:var(--grau);font-size:15px}

.erinnerung form{display:flex;gap:var(--raum-1);margin:var(--raum-2) 0 0;flex-wrap:wrap}
.erinnerung input{flex:1 1 12rem}
.erinnerung .knopf{width:auto;flex:0 0 auto}

.vorlage{margin:0 0 var(--raum-3);white-space:pre-wrap;font-size:15px;line-height:1.6}
.vorlage-leiste{display:flex;gap:var(--raum-1);flex-wrap:wrap;margin:0 0 var(--raum-4)}
.vorlage-leiste .knopf{width:auto}

/* --- Briefgenerator ------------------------------------------------------
   Ab 900px Formular und Vorschau nebeneinander, darunter gestapelt mit dem
   Formular zuerst. Auf dem Handy liegt die Vorschau also unter dem Formular,
   deshalb steht dort ein Satz, der das ansagt. */
.brief-raster{display:grid;gap:var(--raum-4);margin:0 0 var(--raum-4)}
@media(min-width:900px){
  .brief-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--raum-5)}
  .brief-nur-schmal{display:none}
  /* Die Vorschau laeuft mit, waehrend man im Formular nach unten tippt. */
  .brief-vorschau{position:sticky;top:calc(var(--leiste) + var(--raum-3));align-self:start}
}
.brief-gruppe{font-size:var(--text-klein);font-weight:600;color:var(--grau);
  letter-spacing:.04em;text-transform:uppercase;margin:var(--raum-4) 0 var(--raum-2)}
.brief-gruppe:first-of-type{margin-top:0}
.brief-formular .feldgruppe{margin-bottom:var(--raum-2)}
.brief-vorschau .vorlage{white-space:normal}
.brief-zeile{margin:0;font-size:15px;line-height:1.6;min-height:1.6em}
.brief-zeile.ist-fett{font-weight:600}
.brief-zeile.ist-rechts{text-align:right}
/* Offene Stellen sind grau, nicht gelb: Gelb ist nach dem Designsystem
   Redaktionsresten vorbehalten, und das hier sieht der Leser. */
.brief-luecke{color:var(--grau)}

.rechtshinweis{font-size:var(--text-klein);line-height:1.50;color:var(--grau);
  border-top:1px solid var(--linie);padding-top:var(--raum-3);margin-top:var(--raum-5)}
.platzhalter{background:var(--hinweis-flaeche);border:1px dashed var(--hinweis-linie);
  border-radius:4px;padding:.15em .4em;font-size:15px}

/* ===================================================================
   Fuß
   =================================================================== */
.fuss{border-top:1px solid var(--linie);margin-top:var(--raum-6);
  padding-block:var(--raum-4) var(--raum-6);font-size:15px;color:var(--grau)}
.fuss a{color:var(--grau)}
.fuss a:hover{color:var(--tinte)}
.fuss-links{display:flex;flex-wrap:wrap;gap:6px 0;align-items:center;margin:0 0 var(--raum-2)}
.fuss-links a{padding:6px 0;min-height:48px;display:inline-flex;align-items:center}
.fuss-links span{padding:0 var(--raum-1);color:var(--linie)}

/* ===================================================================
   Bewegung
   =================================================================== */

/* Einblenden beim Scrollen. Alle Regeln hängen an .js, das ein Inline-Skript
   im head setzt. Ohne JavaScript existiert keine dieser Regeln, und der
   Inhalt ist von Anfang an sichtbar — für Leser wie für Suchmaschinen. */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--zeit-lang) var(--ease-aus),
             transform var(--zeit-lang) var(--ease-aus);
}
.js .reveal.sichtbar{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Ein Sprunglink, den man nicht sieht, wenn er den Fokus hat, nützt niemandem. */
.sprunglink:focus-visible{
  position:fixed;top:var(--raum-2);left:var(--raum-2);z-index:200;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;
  background:var(--tinte);color:var(--papier);text-decoration:none;
  padding:var(--raum-2) var(--raum-3);border-radius:var(--radius-s);
  box-shadow:var(--schatten-2);
}

@media print{
  .kopf,.fuss,.knopf,.erinnerung,.app-hinweis{display:none}
  body{background:var(--feld);font-size:11pt}
  .vorlage{border:0;padding:0}
}