/* ============================================================
   global.css  ·  hausgeldpilot.de

   EINE Stildatei fuer alle Seiten. Wird von einbauen.py
   automatisch in jede HTML-Seite eingehaengt:

     <link rel="stylesheet" href="global.css">

   Enthaelt vier Teile:
     1. Kopfleiste (Korrektur nach Einbau der Lupe)
     2. Mobil (kein horizontales Scrollen)
     3. Ratgeber-Bausteine (Inhaltsverzeichnis, Bilder, Werbung, FAQ)
     4. Aufklappmenues in der Kopfleiste

   Kommt NACH dem <style>-Block der Seite, gewinnt also ohne
   !important.
   ============================================================ */


/* ============================================================
   TEIL 1 · Kopfleiste
   ------------------------------------------------------------
   Die Lupe belegt 34px plus Abstand. Die Kopfleiste ist auf
   1120px begrenzt, dadurch brachen die Menuepunkte und der
   Handlungsknopf auf zwei Zeilen um. Am Live-Stand gemessen:
   Logo 119 + Menue 723 + Lupe 34 + Knopf 143 = 1019px zzgl.
   Abstaende - passt in eine Zeile, sobald nichts mehr umbricht.
   ============================================================ */
.nav ul li{white-space:nowrap}
.nav .cta,.nav .btn{white-space:nowrap}

/* Die Leiste passend machen, ohne am Wortlaut zu kuerzen.
   Neun Menuepunkte, Logo, Lupe und Handlungsknopf brauchten 1304px; zur
   Verfuegung stehen 1076px (--max 1120 abzueglich 2 x 22px Polster).
   Engere Abstaende, eine halbe Schriftgroesse weniger, weniger Sperrung und
   schmalere Pfeile bringen 1074px. "Kostenlose Formulare" und
   "Hausgeld-Analyse" bleiben damit ausgeschrieben - die Woerter tragen den
   Nutzen, an ihnen zu sparen waere die falsche Stelle. */
.nav .wrap{gap:14px}
.nav ul{gap:11px;font-size:12px;letter-spacing:.02em}
.nav .cta,.nav .btn{padding:8px 13px;font-size:12.5px}
.nav .klapppfeil{width:13px}
.nav .suchknopf{margin-left:0}

/* Wird die Leiste schmaler als ihr Inhalt, wird auf das Klappmenue
   umgeschaltet, statt umzubrechen.

   Nachgemessen am 4.9.2026, und der alte Kommentar hier stimmte nicht mehr:
   Er nannte 1019px Bedarf, tatsaechlich waren es 1227px - und das schon ohne
   den neuen Punkt "Ueber". Entscheidend ist dabei NICHT die Fensterbreite:
   .wrap ist auf --max = 1120px begrenzt, es stehen also hoechstens 1076px
   zur Verfuegung, gleich wie breit der Bildschirm ist. Die Leiste lief damit
   auf JEDEM Desktop ueber; der Handlungsknopf stand rechts heraus.

   Gekuerzt wurde nicht am Wortlaut, sondern an der Typografie: engere
   Abstaende, 12px statt 13px, weniger Sperrung, schmalere Pfeile.

   NACHTRAG 6.9.2026: Die 46px Luft, die hier standen, gab es nicht mehr -
   weiter unten in dieser Datei stand ein zweiter Block, der gap und
   Schriftgrad wieder aufmachte und diesen hier ueberschrieb. Zwei Regeln fuer
   dieselbe Sache in einer Datei, und die spaetere gewinnt: Der Knopf
   "Abrechnung starten" stand seitdem 156px ueber dem rechten Rand.

   Jetzt gilt wieder diese Fassung. Der Platz reicht fuer die zehn Punkte,
   die dastehen, und fuer keinen weiteren. Wer einen hinzufuegt, misst mit
   pruefakten/leiste.js nach und nimmt dafuer einen anderen heraus - "Fuer
   wen" ist am 6.9.2026 aus genau diesem Grund gegangen, es zeigte ohnehin
   nur auf einen Abschnitt der Startseite.

   Die Grenze lag bei 1120px, genau bei --max - sie musste dorthin, solange
   zehn Hauptpunkte nebeneinander standen und 1076px brauchten.

   Seit dem 8.9.2026 sind es drei Klappfelder: Logo 120 + Punkte 200 +
   Lupe 34 + Knopf 150 + Abstaende = rund 560px. Ein Burgermenue auf einem
   1024er Laptop waere genau die Ersparnis, die niemand zu sehen bekommt.
   Die Grenze liegt deshalb jetzt bei 1000px. Weiter herunter geht sie
   nicht: 51 Seiten tragen in ihrem eingebetteten Stil einen Block
   @media(max-width:1000.98px), der die Zeile ausblendet und den Burger
   zeigt. Unterhalb davon wuerden sich beide Fassungen ueberlagern.
   1000 ist ausserdem die Grenze, die .kopf auf der Werkzeugseite schon
   hat - es gibt jetzt nur noch einen Umbruchpunkt im Projekt. */
@media(max-width:1000.98px){
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--paper,#FCFCFA);border-bottom:1px solid var(--rule,#C9CCC3);
    box-shadow:0 10px 18px var(--schatten-weich,rgba(28,39,51,.1));padding:6px 0;
    max-height:calc(100vh - 56px);overflow-y:auto;z-index:60}
  .nav.open ul{display:flex}
  .nav ul li{width:100%}
  .nav ul a{display:block;padding:13px 22px;width:100%;box-sizing:border-box;min-height:44px}
  .nav .burger{display:block}
  .nav .wrap{position:relative}
}

/* Unter 480px passte die Kopfleiste nicht mehr in den Bildschirm.

   Gemessen bei 375px (iPhone-Breite): Logo 98 + Lupe 34 + Knopf 130 +
   Menuesymbol 32 = 294px, dazu vier Abstaende von 24px und 44px Polster -
   macht 434px Bedarf bei 375px Platz. Die Kinder der Leiste stehen auf
   white-space:nowrap und flex:none, schrumpfen also nicht: Das Dokument wurde
   396px breit, die Seite liess sich seitlich schieben, und das Menuesymbol
   stand halb ausserhalb des Bildschirms - ausgerechnet der Knopf, ueber den
   auf dem Handy die gesamte Navigation laeuft.

   Drei kleine Eingriffe statt eines grossen: engere Abstaende, weniger
   Polster, und der Handlungsknopf wird kompakter gesetzt. Er bleibt stehen -
   er ist der Weg zur Abrechnung und gehoert auf dem Handy erst recht sichtbar.
   Neu: 98 + 34 + 104 + 32 = 268, dazu 4 x 10 Abstand und 32 Polster = 340px. */
@media(max-width:480px){
  .nav .wrap{gap:10px;padding:0 16px}
  .nav .cta,.nav .btn{padding:8px 12px;font-size:12px;letter-spacing:.03em}
  .nav .suchknopf{margin-left:0}
}

/* Unter 380px reicht auch das nicht: 98 + 34 + 132 + 32 = 296 zuzueglich
   Abstaenden und Polster sind 368px bei 320px Platz. Etwas muss weichen, und
   die Wahl faellt auf die Lupe. Der Handlungsknopf ist der Weg zur Abrechnung
   und damit das Geschaeft; die Suche ist Beiwerk und ueber die Startseite
   weiterhin erreichbar. Ein Menuesymbol, das halb ausserhalb des Bildschirms
   steht, waere der schlechtere Tausch - darueber laeuft auf dem Handy die
   gesamte Navigation. */
@media(max-width:380px){
  .nav .wrap{gap:8px;padding:0 14px}
  .nav .suchknopf{display:none}
  .nav .cta,.nav .btn{padding:8px 10px;font-size:11.5px;letter-spacing:.02em}
}


/* ============================================================
   TEIL 2 · Mobil
   ============================================================ */
/* ------------------------------------------------------------
   1. Ursache, nicht Symptom
   ------------------------------------------------------------
   Kinder von Grid- und Flex-Containern haben per Default
   min-width:auto. Sie schrumpfen also NICHT unter ihre
   Inhaltsbreite. Ein langer Positionsname wie
   "Wasser/Abwasser inkl. Grundgebuehr" macht dadurch die ganze
   Zeile breiter als das Fenster - und die Seite scrollt.

   Das ist die haeufigste Einzelursache im Projekt.
   ------------------------------------------------------------ */
.pos-head,
.pos-row,
.cols,
.grid,
.raster,
.frist,
.held .raster,
.pruef,
.preise,
.zweitext,
.zweispalt,
.lex,
.schritte{
  min-width:0;
}
.pos-head > *,
.pos-row > *,
.cols > *,
.grid > *,
.raster > *,
.held .raster > *,
.pruef > *,
.zweitext > *,
.zweispalt > *,
.lex > *,
.schritte > *,
footer .raster > *{
  min-width:0;
}


/* ------------------------------------------------------------
   2. Positionsliste im Werkzeug
   ------------------------------------------------------------
   1fr + 118px + 54px + 52px + 28px + 4x10px Abstand = ueber 290px
   fester Anteil. Auf einem 360px-Display bleibt fuer den Namen
   nichts uebrig. Unter 620px wird die Zeile deshalb umgebrochen:
   Name oben ueber die volle Breite, Betrag und Schalter darunter.
   ------------------------------------------------------------ */
@media(max-width:620px){
  .pos-head{
    display:none;           /* Spaltenkoepfe ergeben gestapelt keinen Sinn */
  }
  .pos-row{
    grid-template-columns:1fr auto auto;
    grid-template-areas:
      "name name name"
      "wert schalter loeschen";
    gap:6px 10px;
    padding:10px 0;
  }
  .pos-row > :nth-child(1){grid-area:name;font-size:15px;line-height:1.35}
  .pos-row > :nth-child(2){grid-area:wert}
  .pos-row > :nth-child(3){grid-area:schalter}
  .pos-row > :last-child{grid-area:loeschen}
  .pos-row input[type=text],
  .pos-row input[type=number]{width:100%;min-width:0}
}


/* ------------------------------------------------------------
   3. Briefvorschau im DIN-A4-Format
   ------------------------------------------------------------
   .brief ist 210mm breit, also rund 794px. Der Rahmen faengt das
   mit overflow-x:auto ab - aber sein eigenes padding:0 20px
   addiert sich auf die Breite. Zusaetzlich wird die Vorschau auf
   kleinen Displays skaliert, damit man sie ueberhaupt lesen kann,
   ohne im Kasten zu scrollen.
   ------------------------------------------------------------ */
.briefrahmen{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:820px){
  .briefrahmen{padding-left:12px;padding-right:12px}
}
@media(max-width:560px){
  .brief.zeigen{
    padding:10mm;
    font-size:9.5pt;
  }
  .brief table{font-size:8.5pt}
  .brief th,.brief td{padding:1mm .6mm}
}


/* ------------------------------------------------------------
   4. Tabellen
   ------------------------------------------------------------
   .tabrahmen hat bereits overflow-x:auto, aber ohne max-width
   kann der Rahmen selbst mitwachsen.
   ------------------------------------------------------------ */
.tabrahmen{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{min-width:0}


/* ------------------------------------------------------------
   5. Werkzeugleiste
   ------------------------------------------------------------
   .toolbar button hat flex:0 0 auto + nowrap. Bei fuenf Knoepfen
   reicht das ueber die Fensterbreite hinaus. Statt die Seite
   scrollen zu lassen, scrollt die Leiste selbst.
   ------------------------------------------------------------ */
@media(max-width:700px){
  .toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    max-width:100%;
  }
  .toolbar button{flex:1 1 auto;min-width:0}
}


/* ------------------------------------------------------------
   6. Dateinamen und lange Zeichenketten
   ------------------------------------------------------------
   Hochgeladene Dateien heissen oft
   "Hausgeldabrechnung_2025_Musterstrasse_12_WE_04.pdf".
   Ohne Umbruchregel schiebt das den Container auf.
   ------------------------------------------------------------ */
.file,.file .nm{min-width:0;max-width:100%}
.file .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
p,li,td,h1,h2,h3,.lead,.klein{overflow-wrap:anywhere}


/* ------------------------------------------------------------
   7. Bilder und eingebettete Inhalte
   ------------------------------------------------------------ */
img,svg,video,iframe,canvas{max-width:100%;height:auto}


/* ------------------------------------------------------------
   8. Auffangnetz
   ------------------------------------------------------------
   Bewusst NICHT auf <html>, sondern auf <body>. Auf <html>
   zerstoert overflow-x:hidden in Safari das position:sticky des
   Kopfbereichs. Auf <body> bleibt sticky funktionsfaehig.

   Das ist ein Netz, keine Loesung. Wenn nach dem Einbinden noch
   etwas ueberlaeuft, findet der Pruefschnipsel unten die Stelle.
   ------------------------------------------------------------ */
body{overflow-x:hidden}


/* ------------------------------------------------------------
   9. Tippfreundliche Trefferflaechen
   ------------------------------------------------------------
   Nebenwirkung des Umbaus, aber richtig so: Apple und Google
   setzen 44px bzw. 48px als Mindestmass an. Zu kleine Schalter
   sind auf dem Telefon der zweithaeufigste Beschwerdegrund
   nach dem Scrollen.
   ------------------------------------------------------------ */
@media(max-width:620px){
  button,
  .btn,
  .nav .cta,
  input[type=checkbox]{min-height:40px}
  /* 24 UND NICHT 20 (7.9.2026, gemessen)
     Die Zeile darueber setzt 40 Punkte als Mindestmass an und nimmt das
     Kontrollkaestchen hier wieder aus - richtig, ein 40 Punkte hohes
     Kaestchen sieht aus wie ein Fehler. Nur waren 20 Punkte dann UNTER der
     Schwelle, die WCAG 2.5.8 (AA) fuer Zeigerziele verlangt: 24 x 24.
     Vier Punkte mehr faellt kaum auf und traegt den Finger. */
  input[type=checkbox]{min-height:0;width:24px;height:24px;flex:none}
  /* flex:none gehoert dazu. Ohne das drueckt ein langes Etikett das
     Kaestchen in einer Flex-Reihe wieder zusammen - gemessen auf der
     Buergschaftserklaerung und der Mietbescheinigung: 13 statt 24
     Punkte, obwohl die Regel oben 24 sagt. */
  input.inline{min-height:24px}
  input[type=text],
  input[type=number],
  input[type=date],
  select,
  textarea{
    font-size:16px;   /* verhindert das automatische Hineinzoomen in iOS Safari */
    max-width:100%;
    min-width:0;
  }
}

/* ============================================================
   TEIL 3 · Ratgeber-Bausteine
   ============================================================ */
/* ---------- Bearbeitungsstand ----------
   Sichtbares Datum. Nutzt dem Leser, und Google liest den
   Zeitpunkt der letzten Aktualisierung ohnehin aus dem
   Schema-Block. Bei jeder inhaltlichen Aenderung mitpflegen.
   -------------------------------------- */
.stand{
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  color:var(--ink-soft);margin:-6px 0 22px;
}
.stand b{color:var(--ink);font-weight:600}


/* ---------- Inhaltsverzeichnis ----------
   Zwei Zwecke: der Leser sieht die Struktur, und Google zeigt
   bei laengeren Beitraegen daraus Sprungmarken direkt im
   Suchergebnis an.
   ---------------------------------------- */
.iv{
  background:var(--tint);border-left:3px solid var(--ink);
  padding:16px 20px 14px;margin:0 0 32px;
}
.iv h2{
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 10px;border:0;padding:0;
}
.iv ol{
  font-family:var(--sans);font-size:14.5px;line-height:1.5;
  margin:0;padding-left:19px;color:var(--ink-soft);
}
.iv li{margin-bottom:5px}
.iv a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent}
.iv a:hover{border-bottom-color:var(--stamp);color:var(--stamp)}


/* ---------- Sprungmarken ----------
   Ohne scroll-margin verschwindet die angesprungene Ueberschrift unter der
   klebenden Kopfleiste.

   Zwei Berichtigungen am 4.9.2026:

   110px waren zu viel. Die Leiste ist 57px hoch; gemessen stand die
   angesprungene Ueberschrift 53px UNTER ihrer Unterkante, also mitten im
   Nichts statt oben. 76px lassen 19px Luft - genug, dass die Ueberschrift
   nicht an der Leiste klebt, wenig genug, dass sie oben steht.

   Und die Regel traf nur Ueberschriften. Sprungziele sind aber auch
   Abschnitte: nebenkostenabrechnung.html#worum zeigt auf ein <section>, und
   dort galt gar kein Abstand. :target trifft jedes angesprungene Element,
   gleich welches Tag - das ist die Regel, die von Anfang an hier haette
   stehen sollen.
   ---------------------------------- */
:root{--klebehoehe:57px}
h2[id],h3[id],section[id],:target{scroll-margin-top:calc(var(--klebehoehe) + 19px)}


/* ---------- Schaubilder ----------
   Eigene SVG statt Stockfotos: laedt schnell, keine
   Lizenzfragen, und der Inhalt ist tatsaechlich relevant.
   Als externe Datei eingebunden, damit die Grafik in der
   Bildersuche auffindbar ist.
   --------------------------------- */
figure.figur{
  margin:30px 0;padding:0;
  border:1.5px solid var(--ink);background:#fff;
  box-shadow:4px 4px 0 var(--tint);
}
figure.figur img{
  display:block;width:100%;height:auto;
}
figure.figur figcaption{
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  color:var(--ink-soft);padding:12px 16px;
  border-top:1px solid var(--rule);background:var(--paper);
}
figure.figur figcaption b{
  color:var(--ink);font-weight:600;
  display:block;margin-bottom:3px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}


/* ---------- Werbemodul im Text ----------
   Bewusst NICHT als Banner ueberall gleich, sondern pro Beitrag
   auf dessen Thema getextet. Ein Modul, das die Frage des
   gerade gelesenen Absatzes aufgreift, wird deutlich haeufiger
   geklickt als eine allgemeine Aufforderung.

   Optisch klar vom Fliesstext abgesetzt, damit es nicht wie
   Textbestandteil wirkt.
   ---------------------------------------- */
.werbung{
  border:1.5px solid var(--ink);background:#fff;
  margin:34px 0;padding:0;position:relative;
}
.werbung .kopfband{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  padding:6px 16px;display:flex;justify-content:space-between;
  align-items:center;gap:12px;flex-wrap:wrap;
}
.werbung .kopfband .rest{color:#9FADB9;font-weight:500;letter-spacing:.08em}
.werbung .leib{padding:20px 20px 22px}
.werbung h3{
  font-family:var(--sans);font-size:19px;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 8px;line-height:1.2;
}
.werbung p{
  font-family:var(--sans);font-size:14.5px;line-height:1.6;
  color:var(--ink-soft);margin:0 0 16px;
}
.werbung .knopfzeile{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.werbung .zusatz{
  font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
}
.werbung .zaehlerdick{
  font-family:var(--mono);font-size:13px;color:var(--stamp);
  font-weight:500;white-space:nowrap;
}


/* ---------- Haeufige Fragen im Beitrag ----------
   Eigener FAQ-Block je Beitrag, passend zum Thema. Speist den
   FAQPage-Schema-Block am Seitenende. Aufgeklappt startet die
   erste Frage, damit sichtbar ist, dass es hier etwas gibt.
   ------------------------------------------------ */
.fragen{margin:38px 0 0;border-top:2px solid var(--ink);padding-top:22px}
.fragen > h2{margin-top:0}
.fragen details{
  border-bottom:1px solid var(--rule);padding:0;
}
.fragen summary{
  font-family:var(--sans);font-size:16px;font-weight:600;
  color:var(--ink);padding:14px 30px 14px 0;cursor:pointer;
  position:relative;list-style:none;line-height:1.35;
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{
  content:"+";position:absolute;right:4px;top:12px;
  font-family:var(--mono);font-size:19px;color:var(--stamp);
  line-height:1;transition:transform .15s;
}
.fragen details[open] summary::after{content:"\2212"}
.fragen summary:hover{color:var(--stamp)}
.fragen details p{
  font-size:15.5px;margin:0 0 14px;padding-right:30px;
}


/* ---------- Weiterlesen mit Anrisstext ----------
   Nackte Linklisten werden ueberlesen. Ein Halbsatz pro Eintrag
   erhoeht die Klickrate und traegt zugleich internes
   Verlinkungsgewicht mit Kontext.
   ------------------------------------------------ */
.weiter a{border-bottom:0;padding:0}
.weiter .karte{
  display:block;text-decoration:none;
  border:1px solid var(--rule);background:#fff;
  padding:14px 16px;margin-bottom:10px;
  transition:border-color .13s,transform .13s;
}
.weiter .karte:hover{border-color:var(--ink);transform:translateX(2px)}
.weiter .karte b{
  display:block;font-family:var(--sans);font-size:15.5px;
  font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.3;
}
.weiter .karte:hover b{color:var(--stamp)}
.weiter .karte span{
  font-family:var(--sans);font-size:13.5px;line-height:1.5;
  color:var(--ink-soft);display:block;
}


/* ---------- Mobil ---------- */
@media(max-width:620px){
  figure.figur{box-shadow:2px 2px 0 var(--tint)}
  .werbung .kopfband{font-size:9.5px;letter-spacing:.14em}
  .werbung .leib{padding:16px}
  .werbung h3{font-size:17px}
  .iv{padding:14px 16px 12px}
}


/* ============================================================
   TEIL 4 · Aufklappmenues in der Kopfleiste
   ------------------------------------------------------------
   "Ratgeber" und "Fragen" fuehren beide auf eine Uebersichts-
   seite UND zeigen die Einzelseiten als Untermenue. Der Haupt-
   punkt bleibt ein echter Link - ein Menuepunkt, der nur
   aufklappt und nirgendwohin fuehrt, ist eine Sackgasse fuer
   Nutzer wie fuer Suchmaschinen.

   Das Markup steht als echtes HTML in jeder Seite (einbauen.py
   haengt es ein), es wird NICHT per JavaScript nachgeladen. Nur
   so folgt Google den Untereintraegen - und genau darum geht es:

     <li class="klapp">
       <a href="ratgeber.html">Ratgeber</a>
       <button class="klapppfeil" aria-haspopup="true"
               aria-expanded="false">...</button>
       <ul class="unter"> <li><a href="...">...</a></li> ... </ul>
     </li>

   Aufgeklappt wird per CSS (:hover und :focus-within) und
   zusaetzlich ueber die Klasse .auf, die menue.js setzt. Damit
   funktioniert das Menue auch ohne JavaScript; menue.js haelt
   nur aria-expanded nach, faengt Escape ab (Klasse .zu) und
   macht den Pfeil fuer Tipp- und Tastaturbedienung nutzbar.

   ZWEI SACHEN, die beim Aendern zu beachten sind:

   1. Die Grundregeln stehen bewusst OHNE .nav davor. Die
      Kopfleiste heisst auf nebenkostenabrechnung.html .kopf mit
      .innen statt .nav mit .wrap. "li.klapp > ul.unter" trifft
      beide und liegt mit (0,2,2) trotzdem ueber den beiden
      Regeln, die sonst durchgriffen: ".nav.open ul{display:flex}"
      und ".kopf.open ul{display:flex}" haben nur (0,2,1).

   2. Die Umschaltpunkte der beiden Varianten sind verschieden:
      .nav klappt ab 1120px ins Burgermenue, .kopf erst ab
      1000px. Zwischen 1001 und 1120px steht .kopf also noch als
      Zeile, waehrend .nav schon Liste ist. Darum ist unten JEDER
      Block auf eine der beiden Varianten gemuenzt. Eine gemein-
      same Regel in einem gemeinsamen Medienblock saehe kuerzer
      aus, wuerde aber in diesem 150px breiten Streifen auf einer
      der beiden Varianten das falsche Menue zeigen.
   ============================================================ */

li.klapp{position:relative}
li.klapp > ul.unter{list-style:none;margin:0;padding:0}

/* Der Pfeil ist ein eigener Schalter neben dem Link. Der Link
   navigiert, der Pfeil klappt auf - sonst muesste ein Klick auf
   den Hauptpunkt beides bedeuten und koennte nur eines tun.
   Auf Touchgeraeten ist er die einzige Moeglichkeit, das
   Untermenue zu oeffnen, ohne die Uebersichtsseite zu laden. */
.klapppfeil{
  flex:none;border:0;background:transparent;cursor:pointer;
  padding:0;margin:0 0 0 3px;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-soft,#5B6874);
}
/* Auf nebenkostenabrechnung.html faerbt eine allgemeine Regel
   "button:hover" jeden Knopf dunkel ein und haengt auf Touch-
   geraeten im Hover-Zustand fest. Hier ausdruecklich zurueck-
   genommen, wie es dort schon fuer .burger noetig war. */
.klapppfeil,.klapppfeil:hover,.klapppfeil:focus,.klapppfeil:active{
  background:transparent;border:0;
}
.klapppfeil svg{width:9px;height:9px;transition:transform .15s}
.klapppfeil:hover{color:var(--ink,#1C2733)}
li.klapp.auf > .klapppfeil svg{transform:rotate(180deg)}


/* ---------- .nav  (Start-, Ratgeber-, Formularseiten): Zeilenmenue, schwebendes Feld ---------- */
@media(min-width:1001px){
  /* Alle Menuepunkte gleich aufbauen, nicht nur die mit Klappfeld.

     Vorher war ein einfacher Punkt ein Inline-Link (Kasten 15px hoch, genau
     die Schrifthoehe), ein Klapppunkt dagegen ein Flex-Kind und damit ein
     Blockkasten von 18px - der Zeilenhoehe. Die Schrift sass darin mittig
     und damit einen Pixel tiefer als bei den Nachbarn. Ein Pixel klingt nach
     nichts und faellt in einer Zeile aus neun Woertern sofort auf: "Ueber",
     "Ratgeber" und "Fragen" hingen gegenueber "Kostenlose Formulare"
     durch.

     Jetzt haben alle denselben Kasten, also auch dieselbe Grundlinie. */
  .nav ul > li{display:flex;align-items:center}
  .nav ul > li > a{display:block;line-height:18px}
  .nav li.klapp{display:flex;align-items:center}
  .nav li.klapp > ul.unter{
    display:none;position:absolute;top:100%;left:-14px;z-index:70;
    min-width:292px;max-width:340px;
    background:var(--paper,#FCFCFA);
    border:1.5px solid var(--ink,#1C2733);
    box-shadow:5px 5px 0 var(--schatten,rgba(28,39,51,.14));
    padding:5px 0;
    /* Die Kapitaelchen der Hauptleiste gelten hier nicht: die
       Untereintraege sind ganze Seitentitel, keine Rubriken. */
    text-transform:none;letter-spacing:0;font-weight:400;
  }
  /* Bruecke ueber den Spalt zwischen Menuepunkt und Feld. Ohne
     sie schliesst das Feld, sobald die Maus den Zwischenraum
     quert. */
  .nav li.klapp > ul.unter::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  }
  .nav li.klapp:hover > ul.unter,
  .nav li.klapp:focus-within > ul.unter,
  .nav li.klapp.auf > ul.unter{display:block}
  /* Escape schliesst. Ohne diese Regel wuerde :focus-within das
     Feld sofort wieder aufziehen, weil der Fokus danach auf dem
     Pfeil innerhalb desselben li liegt. menue.js nimmt .zu bei
     der naechsten Mausbewegung oder Fokusaenderung zurueck. */
  .nav li.klapp.zu > ul.unter{display:none}

  .nav li.klapp > ul.unter > li{width:auto;margin:0;white-space:normal}
  .nav li.klapp > ul.unter > li > a{
    display:block;padding:8px 16px;min-height:0;
    font-family:var(--sans);font-size:13.5px;line-height:1.35;
    font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--ink-soft,#5B6874);text-decoration:none;
    border-left:3px solid transparent;white-space:normal;
  }
  .nav li.klapp > ul.unter > li > a:hover,
  .nav li.klapp > ul.unter > li > a:focus{
    background:var(--tint,#E8EAE4);
    border-left-color:var(--stamp,#A62B22);
    color:var(--ink,#1C2733);
  }
  /* Erster Eintrag ist die Uebersichtsseite selbst. Sie steht
     oben und abgesetzt, damit der Weg dorthin auch dann sichtbar
     bleibt, wenn das Feld schon aufgeklappt ist. */
  .nav li.klapp > ul.unter > li.uebersicht{
    border-bottom:1px solid var(--rule,#C9CCC3);
    margin-bottom:4px;padding-bottom:4px;
  }
  .nav li.klapp > ul.unter > li.uebersicht > a{
    font-weight:700;color:var(--ink,#1C2733);
  }
}


/* ---------- .kopf (nebenkostenabrechnung.html): Zeilenmenue, schwebendes Feld ---------- */
@media(min-width:1001px){
  .kopf li.klapp{display:flex;align-items:center}
  .kopf li.klapp > ul.unter{
    display:none;position:absolute;top:100%;left:-14px;z-index:70;
    min-width:292px;max-width:340px;
    background:var(--paper,#FCFCFA);
    border:1.5px solid var(--ink,#1C2733);
    box-shadow:5px 5px 0 var(--schatten,rgba(28,39,51,.14));
    padding:5px 0;
    /* Die Kapitaelchen der Hauptleiste gelten hier nicht: die
       Untereintraege sind ganze Seitentitel, keine Rubriken. */
    text-transform:none;letter-spacing:0;font-weight:400;
  }
  /* Bruecke ueber den Spalt zwischen Menuepunkt und Feld. Ohne
     sie schliesst das Feld, sobald die Maus den Zwischenraum
     quert. */
  .kopf li.klapp > ul.unter::before{
    content:"";position:absolute;left:0;right:0;top:-10px;height:10px;
  }
  .kopf li.klapp:hover > ul.unter,
  .kopf li.klapp:focus-within > ul.unter,
  .kopf li.klapp.auf > ul.unter{display:block}
  /* Escape schliesst. Ohne diese Regel wuerde :focus-within das
     Feld sofort wieder aufziehen, weil der Fokus danach auf dem
     Pfeil innerhalb desselben li liegt. menue.js nimmt .zu bei
     der naechsten Mausbewegung oder Fokusaenderung zurueck. */
  .kopf li.klapp.zu > ul.unter{display:none}

  .kopf li.klapp > ul.unter > li{width:auto;margin:0;white-space:normal}
  .kopf li.klapp > ul.unter > li > a{
    display:block;padding:8px 16px;min-height:0;
    font-family:var(--sans);font-size:13.5px;line-height:1.35;
    font-weight:500;letter-spacing:0;text-transform:none;
    color:var(--ink-soft,#5B6874);text-decoration:none;
    border-left:3px solid transparent;white-space:normal;
  }
  .kopf li.klapp > ul.unter > li > a:hover,
  .kopf li.klapp > ul.unter > li > a:focus{
    background:var(--tint,#E8EAE4);
    border-left-color:var(--stamp,#A62B22);
    color:var(--ink,#1C2733);
  }
  /* Erster Eintrag ist die Uebersichtsseite selbst. Sie steht
     oben und abgesetzt, damit der Weg dorthin auch dann sichtbar
     bleibt, wenn das Feld schon aufgeklappt ist. */
  .kopf li.klapp > ul.unter > li.uebersicht{
    border-bottom:1px solid var(--rule,#C9CCC3);
    margin-bottom:4px;padding-bottom:4px;
  }
  .kopf li.klapp > ul.unter > li.uebersicht > a{
    font-weight:700;color:var(--ink,#1C2733);
  }
}


/* ---------- .nav: Burgermenue, eingerueckt UND aufklappbar ----------
   Frueher standen die Untereintraege hier dauerhaft offen, mit der
   Begruendung, ein zweites Aufklappen sei eine Ebene zu viel. In der
   Praxis war das Gegenteil der Fall: Sieben Ratgeber- und zehn
   Frageseiten ausgeklappt ergeben siebzehn Zeilen, unter denen die
   Hauptpunkte begraben liegen. Wer auf dem Handy das Menue oeffnete,
   sah "Ratgeber" und danach eine lange Liste - "Fragen" stand weit
   unterhalb des sichtbaren Bereichs.

   Jetzt sind die Felder zu und der Pfeilschalter traegt sie auf. Er
   bekommt dabei eine eigene Trefferflaeche von 56 x 44 Pixeln, damit
   ein Tipp auf den Hauptpunkt weiterhin zur Uebersichtsseite fuehrt
   und nur der Pfeil klappt.
   ------------------------------------------------------------------------ */
@media(max-width:1000.98px){
  .nav li.klapp{display:flex;flex-wrap:wrap;align-items:center}
  .nav li.klapp > a{flex:1 1 auto;width:auto}
  .nav .klapppfeil{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:56px;min-height:44px;padding:0;
    color:var(--ink-soft,#5B6874);
  }
  .nav .klapppfeil svg{width:12px;height:12px}
  .nav li.klapp > ul.unter{
    display:none;position:static;flex:0 0 100%;width:100%;
    border:0;box-shadow:none;background:transparent;
    padding:0 0 6px;margin:0;
  }
  .nav li.klapp.auf > ul.unter{display:block}
  .nav li.klapp > ul.unter > li{width:100%;margin:0;white-space:normal}
  .nav li.klapp > ul.unter > li > a{
    display:block;width:100%;box-sizing:border-box;
    min-height:44px;padding:11px 22px 11px 18px;margin-left:22px;
    font-family:var(--sans);font-size:12.5px;line-height:1.35;
    font-weight:500;letter-spacing:.02em;text-transform:none;
    color:var(--ink-soft,#5B6874);text-decoration:none;
    border-left:2px solid var(--rule,#C9CCC3);white-space:normal;
  }
  .nav li.klapp > ul.unter > li > a:hover{color:var(--ink,#1C2733)}
  .nav li.klapp > ul.unter > li.uebersicht > a{
    font-weight:700;color:var(--ink,#1C2733);
  }
}


/* ---------- .kopf: Burgermenue, eingerueckt UND aufklappbar ----------
   Dieselbe Aenderung wie bei .nav einen Block hoeher, nur mit der
   anderen Umschaltgrenze: 1000px statt 1120px.
   ------------------------------------------------------------------------ */
@media(max-width:1000.98px){
  .kopf li.klapp{display:flex;flex-wrap:wrap;align-items:center}
  .kopf li.klapp > a{flex:1 1 auto;width:auto}
  .kopf .klapppfeil{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:56px;min-height:44px;padding:0;
    color:var(--ink-soft,#5B6874);
  }
  .kopf .klapppfeil svg{width:12px;height:12px}
  .kopf li.klapp > ul.unter{
    display:none;position:static;flex:0 0 100%;width:100%;
    border:0;box-shadow:none;background:transparent;
    padding:0 0 6px;margin:0;
  }
  .kopf li.klapp.auf > ul.unter{display:block}
  .kopf li.klapp > ul.unter > li{width:100%;margin:0;white-space:normal}
  .kopf li.klapp > ul.unter > li > a{
    display:block;width:100%;box-sizing:border-box;
    min-height:44px;padding:11px 22px 11px 18px;margin-left:22px;
    font-family:var(--sans);font-size:12.5px;line-height:1.35;
    font-weight:500;letter-spacing:.02em;text-transform:none;
    color:var(--ink-soft,#5B6874);text-decoration:none;
    border-left:2px solid var(--rule,#C9CCC3);white-space:normal;
  }
  .kopf li.klapp > ul.unter > li > a:hover{color:var(--ink,#1C2733)}
  .kopf li.klapp > ul.unter > li.uebersicht > a{
    font-weight:700;color:var(--ink,#1C2733);
  }
}


/* ============================================================
   TEIL 5 · Einwilligung vor der serverseitigen Erkennung
   ------------------------------------------------------------
   Nur auf nebenkostenabrechnung.html sichtbar, steht aber hier,
   weil global.css die eine Stildatei des Projekts ist.

   Findet die Erkennung im Browser nichts, wuerde bisher ohne
   Rueckfrage ein Abbild jeder Seite an den Server gehen. Der
   Kasten fragt vorher. Bewusst kein confirm(): ein Systemdialog
   laesst sich nicht erklaeren, nicht verlinken und wird
   weggeklickt, ohne gelesen zu werden.

   Farbgebung wie der Fristhinweis - Stempelrot als Signal, dass
   hier eine Entscheidung ansteht, nicht nur eine Meldung.
   ============================================================ */
.kifrage[hidden]{display:none}
.kifrage{
  border:1.5px solid var(--stamp,#A62B22);
  background:#fff;margin:14px 0 0;padding:0;
}
.kifrage .band{
  background:var(--stamp,#A62B22);color:#fff;
  font-family:var(--sans);font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;
}
.kifrage .leib{padding:14px 16px 16px}
.kifrage p{
  font-family:var(--sans);font-size:14px;line-height:1.55;
  color:var(--ink-soft,#5B6874);margin:0 0 10px;
}
.kifrage p.datei{
  font-family:var(--mono,monospace);font-size:12.5px;
  color:var(--ink,#1C2733);word-break:break-all;
}
.kifrage b{color:var(--ink,#1C2733);font-weight:600}
.kifrage a{color:var(--stamp,#A62B22)}
.kifrage .knopfzeile{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.kifrage button{
  font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.03em;padding:9px 16px;cursor:pointer;
  border:1.5px solid var(--ink,#1C2733);min-height:40px;
}
/* Keine der beiden Schaltflaechen ist vorausgewaehlt oder optisch
   als Standard gesetzt - die Entscheidung soll bewusst fallen. */
.kifrage button.ja{background:var(--ink,#1C2733);color:var(--paper,#FCFCFA)}
.kifrage button.ja:hover{background:var(--stamp,#A62B22);border-color:var(--stamp,#A62B22)}
.kifrage button.nein{background:transparent;color:var(--ink,#1C2733)}
.kifrage button.nein:hover{background:var(--tint,#E8EAE4)}


/* ---------- Trennung langer Wortzusammensetzungen ----------
   Zeile 186 bricht lange Woerter bereits um (overflow-wrap:anywhere), sonst
   liefe "Wohnungsuebergabeprotokoll" auf einem 320px-Telefon aus dem Kasten:
   das Wort ist bei der kleinsten Ueberschriftgroesse 358px breit, verfuegbar
   sind abzueglich der Raender 276px.

   Umgebrochen wird dabei aber OHNE Trennstrich, mitten im Wort. Im Deutschen,
   wo genau diese Komposita in fast jeder Ueberschrift stehen, liest sich das
   wie ein Fehler. hyphens:auto setzt den Trennstrich und trennt nach den
   deutschen Mustern, die der Browser wegen <html lang="de"> mitbringt.

   Bewusst OHNE eigenes overflow-wrap: die Regel von Zeile 186 ist die
   schaerfere und soll gelten. Auf breiten Fenstern aendert sich nichts, weil
   die Trennung nur greift, wenn ein Wort sonst nicht passt.
   ------------------------------------------------ */
/* NUR AUF SCHMALEN GERAETEN (8.9.2026, abends)

   Gemeldet aus dem Abschnitt "Fuer wen", auf einem breiten Schirm:

       Einmal im Jahr eine Abrech-
       nung - und dann richtig

   Da war Platz genug, das ganze Wort in die zweite Zeile zu nehmen. Getrennt
   wurde trotzdem, weil text-wrap:balance (TEIL 10) die Zeilen gleich lang
   machen will und dafuer gern einen Trennstrich nimmt, sobald hyphens:auto
   ihn erlaubt. Zwei Regeln, jede fuer sich richtig, zusammen falsch.

   Die Begruendung unten gilt fuer ein 320px-Telefon: dort ist
   "Wohnungsuebergabeprotokoll" breiter als die Spalte, und ohne Trennung
   bricht es ohne Strich mitten im Wort. Oberhalb von 600px gibt es dieses
   Problem nicht - dort wird nicht mehr getrennt. */
@media(max-width:600px){
h1, h2, h3, h4 {
  hyphens: auto;
  -webkit-hyphens: auto;
  /* Nicht nach zwei Buchstaben trennen. Ohne diese Grenze macht der Browser
     aus "Eigentumswohnung" ein "Ei-gentumswohnung" - nach den deutschen
     Trennregeln falsch, und in einer Ueberschrift sieht es aus wie ein
     Textfehler. 6 3 3 heisst: erst ab sechs Buchstaben trennen, und
     mindestens drei muessen vor und nach dem Strich stehen. */
  hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
}
}


/* ============================================================
   TEIL 7 · Bewegung und Akzente
   ============================================================

   Zurueckhaltend, und das ist eine Entscheidung, keine Sparmassnahme.
   Diese Seite arbeitet mit einer Dokumentaesthetik: IBM Plex, Papierton,
   harte 1,5-Pixel-Kanten, keine runden Ecken, ein einziges Rot. Das
   signalisiert Amtlichkeit bei einem Produkt, das einer Pruefung standhalten
   muss. Verlaeufe, Glaseffekte und weiche Schatten wuerden dagegen arbeiten.

   Was fehlte, war nicht ein anderes Design, sondern Bewegung: Ein Klappfeld,
   das schlagartig da ist, wirkt wie ein Sprung im Bild. Ein Feld, das in
   180 Millisekunden aufzieht, wirkt gebaut.

   Die Zeiten sind bewusst kurz. Alles unter 100ms nimmt niemand als Bewegung
   wahr, alles ueber 300ms faengt an zu bremsen. 160 bis 240ms ist der Bereich,
   in dem eine Bewegung erklaert, was passiert, ohne aufzuhalten.
   ------------------------------------------------------------ */

/* Eine gemeinsame Kurve fuer alles. Sie startet zuegig und laeuft weich aus -
   das ist die Bewegung, die physisch plausibel wirkt, weil auch Dinge in der
   Welt so zur Ruhe kommen. */
:root{
  --schwung:cubic-bezier(.2,.7,.3,1);
  --zeit-kurz:.16s;
  --zeit-mittel:.22s;
}


/* ---------- Klappfelder in der Zeilenleiste ----------
   display laesst sich normalerweise nicht animieren: none und block sind
   diskrete Werte, dazwischen gibt es nichts. Seit @starting-style und
   transition-behavior:allow-discrete geht es doch - der Browser haelt das
   Element waehrend der Animation sichtbar und schaltet display erst am Ende.

   Bewusst in Einzelzeilen statt in der Kurzschreibweise: Ein Browser ohne
   allow-discrete wuerde die ganze transition-Kurzschreibweise verwerfen und
   damit auch die Deckkraft nicht mehr weich schalten. So faellt nur die
   eine unbekannte Zeile weg, der Rest gilt. Aeltere Browser bekommen das
   Feld dann ohne Bewegung - vollstaendig bedienbar, nur nuechterner. */
@media(min-width:1001px){
  .nav li.klapp > ul.unter{
    opacity:0;
    transform:translateY(-7px);
    transform-origin:top left;
    transition-property:opacity,transform,display;
    transition-duration:var(--zeit-kurz),var(--zeit-mittel),var(--zeit-mittel);
    transition-timing-function:ease,var(--schwung),linear;
    transition-behavior:allow-discrete;
  }
  .nav li.klapp:hover > ul.unter,
  .nav li.klapp:focus-within > ul.unter,
  .nav li.klapp.auf > ul.unter{
    opacity:1;
    transform:translateY(0);
  }
  /* Der Anfangszustand fuer den Weg von "nicht da" nach "da". Ohne
     @starting-style gaebe es keinen Wert, von dem aus animiert werden
     koennte - das Feld waere sofort vollstaendig sichtbar. */
  @starting-style{
    .nav li.klapp:hover > ul.unter,
    .nav li.klapp:focus-within > ul.unter,
    .nav li.klapp.auf > ul.unter{
      opacity:0;
      transform:translateY(-7px);
    }
  }

  /* Die Untereintraege tragen bereits einen unsichtbaren Streifen links.
     Er faehrt jetzt heran, statt zu erscheinen. */
  .nav li.klapp > ul.unter > li > a{
    transition:border-color var(--zeit-kurz) ease,
               color var(--zeit-kurz) ease,
               background-color var(--zeit-kurz) ease,
               padding-left var(--zeit-mittel) var(--schwung);
  }
  .nav li.klapp > ul.unter > li > a:hover,
  .nav li.klapp > ul.unter > li > a:focus{padding-left:20px}

  /* ---------- Akzent: die Linie unter dem Menuepunkt ----------
     Statt nur die Farbe zu wechseln, faehrt eine zwei Pixel hohe Linie im
     Stempelrot von links heran. Dieselbe Geste wie beim Streifen im
     Klappfeld, und sie nimmt die Kante auf, die das ganze Layout traegt. */
  .nav ul > li > a{position:relative}
  .nav ul > li > a::after{
    content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
    background:var(--stamp,#A62B22);
    transform:scaleX(0);transform-origin:left center;
    transition:transform var(--zeit-mittel) var(--schwung);
  }
  .nav ul > li > a:hover::after,
  .nav ul > li > a:focus-visible::after,
  .nav li.klapp.auf > a::after,
  .nav li.klapp:hover > a::after{transform:scaleX(1)}
}


/* ---------- Klappfelder im Burgermenue ----------
   Hier traegt die Hoehe die Bewegung, nicht die Deckkraft: Der Inhalt
   schiebt die Punkte darunter nach unten, und genau das soll man sehen.

   max-height statt height, weil die echte Hoehe von der Zahl der Eintraege
   abhaengt und CSS sie nicht kennt. 720px sind grosszuegig genug fuer die elf
   Frageseiten und niedrig genug, dass die Kurve nicht traege wirkt.

   visibility schaltet ohne Uebergang mit, aber erst am Ende des Zuklappens:
   Sonst blieben die Verweise waehrend der Animation fuer die Tastatur
   erreichbar, obwohl sie schon nicht mehr zu sehen sind. */
@media(max-width:1000.98px){
  .nav li.klapp > ul.unter{
    display:block;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;
    /* Das Polster muss mit auf null. max-height begrenzt nur den Inhalt -
       die 6px Innenabstand blieben sonst stehen, und unter jedem
       zugeklappten Punkt saesse eine unerklaerliche Luecke. */
    padding-bottom:0;
    transition:max-height var(--zeit-mittel) var(--schwung),
               padding-bottom var(--zeit-mittel) var(--schwung),
               opacity var(--zeit-kurz) ease,
               visibility 0s linear var(--zeit-mittel);
  }
  .nav li.klapp.auf > ul.unter{
    max-height:720px;opacity:1;visibility:visible;padding-bottom:6px;
    transition:max-height .28s var(--schwung),
               padding-bottom .28s var(--schwung),
               opacity var(--zeit-mittel) ease,
               visibility 0s;
  }
  .nav li.klapp > ul.unter > li > a{
    transition:color var(--zeit-kurz) ease,
               border-color var(--zeit-kurz) ease;
  }
}


/* ---------- Der Pfeil ---------- */
.klapppfeil svg{transition:transform var(--zeit-mittel) var(--schwung)}
.klapppfeil{transition:color var(--zeit-kurz) ease}


/* ---------- Akzent: Karten und Knoepfe ----------
   Kein Schweben, kein Schatten, der waechst. Die Karte rueckt zwei Pixel
   heran und ihre Kante nimmt Farbe an - dieselbe Sprache wie im Menue. */
.weiter .karte{
  transition:border-color var(--zeit-kurz) ease,
             transform var(--zeit-mittel) var(--schwung);
}
.pknopf,.uknopf,.kform button{
  transition:background-color var(--zeit-kurz) ease,
             border-color var(--zeit-kurz) ease,
             transform .12s var(--schwung);
}
.pknopf:active,.uknopf:active,.kform button:active{transform:translateY(1px)}


/* ---------- Fokus sichtbar machen ----------
   Wer mit der Tastatur navigiert, muss sehen, wo er steht. :focus-visible
   trifft dabei nur die Tastatur, nicht den Mausklick - ein Rahmen, der nach
   jedem Klick stehen bleibt, sieht aus wie ein Fehler. */
a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus,#2C5F8A);
  outline-offset:2px;
  border-radius:1px;
}


/* ---------- Wer keine Bewegung will, bekommt keine ----------
   Nicht Geschmackssache: Bei vestibulaerer Stoerung loesen bewegte Flaechen
   Schwindel und Uebelkeit aus. Das Betriebssystem hat dafuer einen Schalter,
   und diese Regel hoert darauf. Ausgeschaltet wird die Bewegung, nicht die
   Funktion - alles bleibt bedienbar, es geschieht nur sofort.

   0,01ms statt 0s mit Absicht: Manche Browser feuern bei einer Dauer von
   exakt null kein transitionend-Ereignis mehr, und Skripte, die darauf
   warten, blieben haengen. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ---------- Bedienelemente erben die Schrift ----------
   Knoepfe, Felder und Auswahllisten uebernehmen die Schrift ihrer Umgebung
   NICHT von selbst - der Browser setzt dort seine eigene, meist Arial. Auf
   den Formularseiten kam das heraus: Gemessen standen acht Elemente in Arial
   statt in IBM Plex.

   Sichtbar war das bisher kaum, weil die betroffenen Knoepfe nur Symbole
   tragen. Gefaehrlich ist die Luecke trotzdem: input[type=text] trifft ein
   <input> OHNE type-Angabe nicht, obwohl der Browser es als Textfeld
   darstellt. Ein einziges vergessenes Attribut, und das Feld steht in Arial
   mitten im Bogen. Diese Regel schliesst die ganze Klasse von Fehlern.

   Nur die Schriftfamilie, nicht Groesse oder Sperrung - die bleiben dort, wo
   sie bewusst gesetzt sind. */
button,input,select,textarea{font-family:inherit}


/* ============================================================
   TEIL 8 · Die zweite Farbe
   ============================================================

   Bis hierher trug das Stempelrot alles: Fristen, Rubriken, Pfeile, Haken,
   Warnungen. Eine Farbe fuer alles heisst aber, dass sie nichts mehr sagt.
   Wenn "noch 118 Tage" dieselbe Farbe hat wie das Wort "kostenlos", muss der
   Leser jedes Mal lesen, um zu wissen, ob er sich freuen oder beeilen soll.

   Ab jetzt zwei Farben mit klarer Aufgabenteilung:

     --stamp  #A62B22 rot     Was Sie beachten muessen.
                              Fristen, Pflichtangaben, Warnungen, Rubriken,
                              Fehlermeldungen. Die Farbe der Aufmerksamkeit.

     --haben  #1C6B4C gruen   Was fuer Sie spricht.
                              Guthaben, kostenlos, erledigt, freigeschaltet,
                              bestaetigt. Die Farbe der guten Nachricht.

   Gruen gab es im Projekt schon - als Guthabenbetrag, als Haken in Listen, als
   DSGVO-Siegel. Es stand nur in den einzelnen Seiten, nie in global.css, und
   ohne Regel dahinter. Beides wird hier nachgeholt.

   Nachgerechnet nach WCAG 2.1, nicht geschaetzt:

     Rot   auf Papier  6,84 : 1     Leuchtdichte 0,0995
     Gruen auf Papier  6,28 : 1     Leuchtdichte 0,1128

   Beide weit ueber den 4,5, die fuer Fliesstext gefordert sind, und - das ist
   fuer ein Farbpaar das Entscheidende - mit fast gleicher Leuchtdichte. Sie
   wiegen optisch gleich schwer, keine draengt sich vor. Ein helleres,
   "frischeres" Gruen haette beides verloren: den Kontrast auf dem Papierton
   und den Platz in einer gedeckten Palette.

   Bewusst NICHT eingefaerbt wird der Kaufknopf. Gruen an einem Knopf, der Geld
   kostet, verspricht etwas, das er nicht haelt.
   ------------------------------------------------------------ */

/* ---------- Der Zustandswechsel nach der Zahlung ----------
   Die Ueberschrift des Freigabe-Abschnitts zeigt rechts, woran man ist:
   "Vorschau mit Wasserzeichen" oder "freigeschaltet". Beides stand in
   demselben Grau - der Augenblick, in dem der Kunde bekommt, wofuer er bezahlt
   hat, sah aus wie der Augenblick davor.

   Die Klasse .frei ist spezifischer als das blosse .hint der Seite und setzt
   sich deshalb durch, obwohl die Seitenstile nach global.css stehen. */
section.block > h2 .hint.frei{
  color:var(--haben,#1C6B4C);
  font-weight:600;
}
/* Haken gezeichnet statt gesetzt: U+2713 fehlt in IBM Plex Sans Condensed,
   und der Ersatz aus der Systemschrift steht als "V" da (20.9.2026). */
section.block > h2 .hint.frei::before{
  content:"";
  display:inline-block;
  width:8px; height:4.5px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  margin-right:7px;
  vertical-align:3px;
}

/* Der Urheberrechtsvermerk. Pflicht ist er nicht - das Urheberrecht
   entsteht mit dem Werk. Er benennt aber den Urheber "in der ueblichen
   Weise" (Paragraf 10 UrhG); im Streitfall spart das den Nachweis.
   Das Jahr setzt menue.js (data-jahr="jetzt"). */
footer .unten .rechte{margin-top:12px}

/* ---------- Was nichts kostet ----------
   "Kostenlos" ist das staerkste Wort auf dieser Seite und stand bisher in
   derselben Farbe wie die Frist. Hebt es heraus, ohne zu schreien. */
b.frei,strong.frei{color:var(--haben,#1C6B4C)}



/* ============================================================
   TEIL 9 · Bewegung beim Blättern
   ============================================================

   Nachtrag vom 5. September 2026, zweite Fassung.

   Der Anspruch ist derselbe wie in Teil 7: Die Bewegung soll erklaeren, was
   passiert, und nicht auf sich aufmerksam machen. Neu ist, dass es beim
   Blaettern ueberhaupt eine gibt - bis hierher hing jede Bewegung an einem
   Ereignis, Zeiger drauf oder Feld bekommt den Fokus.

   WARUM HIER EIN SKRIPT STEHT UND NICHT animation-timeline

   Die erste Fassung war reine CSS mit animation-timeline:view() - kein
   Skript, im Compositor, elegant. Sie liess sich nur nicht pruefen: Das
   Browser-Panel der Arbeitsumgebung aktiviert Scroll-Zeitachsen nicht, auch
   eine nackte Lehrbuchfassung ohne jedes overflow meldete dort progress:null.
   Damit war jede Messung wertlos, und Uygar meldete zweimal, dass nichts
   ankommt.

   Eine Technik, die sich nicht pruefen laesst, gehoert nicht auf eine
   laufende Seite. Der IntersectionObserver in bewegung.js tut dasselbe, laeuft
   ueberall und ist mit blossem Nachdenken nachvollziehbar. Wer das spaeter
   zurueckdrehen will, braucht zuerst eine Umgebung, in der sich das Ergebnis
   ansehen laesst - nicht ein besseres Gefuehl.

   DIE EINE VORKEHRUNG, AUF DIE ES ANKOMMT

   Hier wird NICHTS von sich aus versteckt. Versteckt wird nur unterhalb von
   html.bewegung, und diese Klasse setzt allein bewegung.js, unmittelbar bevor
   es zu beobachten beginnt. Faellt das Skript aus - Fehler, geblockt, alte
   Maschine - wird die Klasse nie gesetzt und die Seite steht vollstaendig da.
   Der umgekehrte Weg, erst verstecken und dann per Skript einblenden, macht
   aus jedem Skriptfehler eine leere Seite.

   prefers-reduced-motion wird zusaetzlich in bewegung.js abgefragt: Dort
   fuehrt es zum sofortigen Ruecksprung, die Klasse wird gar nicht erst
   gesetzt. Die Regel aus Teil 7, die alle Dauern auf 0,01ms zieht, greift
   hier also nur noch als zweite Sicherung.
   ------------------------------------------------------------ */

/* ---------- Bausteine fahren heran ----------
   14 Pixel, nicht 40. Der Weg soll gerade so lang sein, dass das Auge eine
   Richtung erkennt; alles darueber liest sich als Effekt.

   Die 14 sind gepruefte 14, nicht geschaetzte: Am 5.9.2026 standen 8, 14, 20
   und 28 Pixel gleichzeitig nebeneinander auf einer Vergleichsseite, damit
   der Unterschied ueberhaupt beurteilbar war. Uygar hat sich die vier
   angesehen und 14 bestaetigt. Wer die Zahl aendern will, baut den Vergleich
   neu - sie nach Gefuehl zu drehen, macht sie schlechter begruendet.

   Die Kurve ist --schwung aus Teil 7, die Dauern sind laenger als die 160 bis
   240ms von dort: Ein Klappfeld antwortet auf einen Zeiger und muss sofort da
   sein, ein Baustein am Bildrand darf sich setzen. */
/* NUR KLASSEN, KEIN ELEMENTNAME - und das ist keine Schoenheitsfrage.
   Hier stand ".figur" bis zum 5.9.2026 als "figure.figur", und das hat die
   Schaubilder auf der ganzen Seite unsichtbar gemacht. Nachgerechnet:

       html.bewegung figure.figur   (0,2,2)   zwei Klassen, ZWEI Elementnamen
       html.bewegung .da            (0,2,1)   zwei Klassen, ein Elementname

   (0,2,2) schlaegt (0,2,1). Die Aufdeck-Regel unten verlor also gegen die
   Versteck-Regel hier, und zwar ausschliesslich bei den Figuren - .merk,
   .tat, .weiter und .karte tragen keinen Elementnamen und lagen gleichauf.
   Ergebnis: Das Bild war geladen, anklickbar, hatte seine Groesse, und war
   trotzdem nicht zu sehen. Uygar hat es so beschrieben: "wie bei einem TV
   ohne Hintergrundbeleuchtung."

   Der Kommentar an dieser Stelle behauptete "gleiche Spezifitaet (0,2,1)".
   Das war schlicht falsch gerechnet - eine Selektorliste hat keine gemeinsame
   Spezifitaet, jedes Glied zaehlt fuer sich. Wer hier ein Element ergaenzt,
   nimmt eine Klasse, keinen Tagnamen. */
html.bewegung .figur,
html.bewegung .merk,
html.bewegung .tat,
html.bewegung .weiter,
html.bewegung .karte{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .30s ease, transform .40s var(--schwung);
}

/* Jetzt tatsaechlich gleiche Spezifitaet wie jedes Glied der Liste darueber
   (0,2,1), steht danach und gewinnt deshalb. Kein !important noetig. */
html.bewegung .da{
  opacity:1;
  transform:none;
}


/* ---------- Die Lesefortschrittslinie ----------
   Zwei Pixel am oberen Rand, die mitwachsen. Auf den Ratgeber- und
   Frageseiten steht viel Text; die Linie beantwortet "wie lange noch", ohne
   die Frage zu stellen. Das Element legt seit dem 14.9.2026 menue.js an,
   auf allen Seiten (vorher bewegung.js - Begruendung in menue.js).

   z-index 55 liegt ueber der Kopfzeile (50) und der Navigation (40), aber
   unter dem aufgeklappten Mobilmenue (60). */
.lesebalken{
  position:fixed;
  top:0; left:0; right:0;
  /* 18.9.2026: 4 statt 2 px - mit 2 px war die Linie auf einem grossen
     Bildschirm kaum zu sehen (Rueckmeldung des Betreibers). */
  height:4px;
  background:var(--stamp,#A62B22);
  transform:scaleX(0);
  transform-origin:0 50%;
  z-index:55;
  pointer-events:none;
  will-change:transform;
}

/* OHNE SKRIPT AN DEN SCROLL GEBUNDEN (15.9.2026)

   Gemeldet: "die rote Linie laggt bei mobil". Das Skript in menue.js hoert
   auf scroll und setzt die Breite im naechsten Bild. Auf dem Telefon
   blaettert aber der Compositor, nicht die Seite: Die Seite laeuft voraus,
   das scroll-Ereignis kommt hinterher, und bei Schwung fallen Ereignisse
   ganz aus - die Linie springt und haengt nach.

   Eine Scroll-Zeitleiste rechnet der Browser selbst, im selben Bild wie das
   Blaettern. Chrome seit 115, Safari seit 26. Wo es sie nicht gibt, bleibt
   das Skript (menue.js prueft dieselbe Bedingung).

   Die Regel fuer reduzierte Bewegung (animation-duration .01ms !important)
   stoert hier nicht: An einer Scroll-Zeitleiste wird die Dauer auf die
   Laenge der Zeitleiste umgerechnet, eine einzige Wiederholung fuellt sie
   ganz. Nachgemessen, nicht angenommen - siehe Commit. */
@keyframes lesebalken{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@supports (animation-timeline: scroll()){
  .lesebalken{
    animation:lesebalken linear both;
    animation-timeline:scroll(root block);
  }
}

@media print{ .lesebalken{display:none} }


/* ---------- Ueberschriften brechen ausgewogen ----------
   text-wrap:balance verteilt die Zeilen einer Ueberschrift so, dass keine
   letzte Zeile mit einem einzelnen Wort uebrigbleibt. Das ist der Umbruch,
   den ein Setzer von Hand machen wuerde.

   Nur fuer Ueberschriften: Der Browser rechnet dafuer mehrere Umbrueche
   durch und tut das aus gutem Grund nur bis etwa sechs Zeilen. Auf einem
   Fliesstextabsatz waere es verschwendet.

   Kein @supports noetig - ein Browser, der den Wert nicht kennt, verwirft
   die eine Zeile und bricht wie bisher um. */
h1, h2, h3, .lead{
  text-wrap:balance;
}


/* ============================================================
   TEIL 10 · Der Kopfbereich, einheitlich
   ============================================================

   Nachtrag vom 5. September 2026.

   Uygar ist es beim Wechsel von fragen.html zurueck auf die Startseite
   aufgefallen: eine minimale Verschiebung in der obersten Zeile. Nachgemessen
   bei 1280 Pixeln Fensterbreite:

       Band auf fragen.html      38,22px
       Band auf index.html       34,89px
       Oberkante Logo            53,47px gegen 50,14px

   Also 3,33 Pixel, und die springen bei jedem Seitenwechsel. Zwei Ursachen,
   beide nur auf der Startseite und beide ausserhalb jeder Medienabfrage: die
   Polsterung des Bandes stand dort auf 8 statt 9 Pixeln (2,00px), und .band
   trug eine eigene line-height von 1,4, waehrend die uebrigen Seiten die 1,5
   des Fliesstextes erben (13,5 x 0,1 = 1,35px). 2,00 + 1,35 = 3,35 - das ist
   die gemessene Verschiebung.

   Beim Nachsehen war es aber nicht bei zwei Abweichungen geblieben. Die
   Kopf-Geometrie existierte in SIEBEN Fassungen ueber 43 Seiten: Polsterung 8
   oder 9, line-height gesetzt oder geerbt, Abstand in der Leiste 24 oder 26,
   Abstand der Menuepunkte 18 oder 20 - und der Umbruchpunkt zum Burgermenue
   auf der Startseite bei 900 statt bei 1000 Pixeln. Die Leiste klappte also
   je nach Seite bei einer anderen Fensterbreite um.

   WARUM DAS HIER STEHT UND NICHT IN 43 DATEIEN

   Die Kopf-Stile stehen in jeder Seite als eingebetteter <style>-Block. Der
   steht im Quelltext VOR dem <link> auf diese Datei. Bei gleicher Spezifitaet
   entscheidet die Reihenfolge, also gewinnt global.css. Eine Regel hier
   ueberschreibt damit alle sieben Fassungen auf einmal, ohne dass 43 Dateien
   angefasst werden - und sie bleibt die eine Stelle, an der die Geometrie des
   Kopfes steht. Wer sie kuenftig aendern will, aendert sie hier.

   ZWEI GRENZEN, DIE ABSICHTLICH NICHT UEBERSCHRIEBEN WERDEN

   1. Die Breite der INHALTSspalte. nebenkostenabrechnung.html arbeitet mit
      1180px statt 1120px und 20px statt 22px - das Werkzeug braucht die
      Breite fuer seine Tabellen. Deshalb wird .wrap allgemein nicht
      angefasst.

      Das Band ist davon ausgenommen, und zwar aus einem gemessenen Grund:
      Bei 760 Pixeln Fensterbreite stand es auf der Werkzeugseite einzeilig
      (36,88px) und auf allen anderen zweizeilig (63,76px) - 27 Pixel Sprung,
      also das Achtfache dessen, was ueberhaupt aufgefallen war. Die vier
      Pixel weniger Polsterung reichen an der Umbruchgrenze aus, um die Zeile
      noch unterzubringen. Das Band ist keine Inhaltsspalte, sondern ein
      Streifen mit einem Satz darin; seine seitliche Polsterung wird deshalb
      mit vereinheitlicht. Die Leiste und der Inhalt darunter behalten ihre
      20 Pixel.

   2. Ob das Fristband mitklebt. Auf 11 Seiten ist .oben sticky, das Band
      bleibt also beim Blaettern stehen; auf 32 Seiten klebt nur .nav und das
      Band scrollt weg. Das ist ein Verhaltens- und kein Geometrieunterschied,
      und die Entscheidung darueber gehoert Uygar - hier wird sie nicht
      nebenbei getroffen.
   ------------------------------------------------------------ */

/* ---------- Das Fristband ----------
   line-height 1,4 statt der geerbten 1,5: Das Band traegt eine einzige Zeile.
   Der Durchschuss des Fliesstextes ist dafuer zu locker - er ist fuer Absaetze
   gemacht, nicht fuer eine Leiste. Die 11 Seiten, die es schon so hatten,
   hatten recht; die uebrigen 32 hatten es nur nie bekommen. */
.band{
  font-size:13.5px;
  line-height:1.4;
}
.band .wrap{
  padding-top:9px;
  padding-bottom:9px;
  /* Seitlich mit vereinheitlicht - siehe die Begruendung oben zu den 760
     Pixeln. Nur beim Band, nicht bei .wrap allgemein. */
  padding-left:22px;
  padding-right:22px;
  gap:8px 16px;
}

/* ---------- Die Leiste ----------
   24 statt 26 Pixel Abstand: Die Kopfleiste ist an der Grenze - gemessen
   stehen dort rund 1019px Inhalt bei 1120px Satzspiegel. Von den beiden
   vorgefundenen Werten ist der kleinere derjenige, der spaeter umbricht. */
/* NACHGEMESSEN AM 6.9.2026, und der Kommentar darueber stimmte nicht mehr.
   Behauptet waren "rund 1019px Inhalt bei 1120px Satzspiegel". Gemessen auf
   /muster/: Logo 119 + Menue 938 + Lupe 34 + Knopf 141 = 1232px, dazu drei
   Abstaende. Bei 24px Abstand sind das 1304px auf 1120px Satzspiegel - die
   Leiste war also schon vorher ueberfuellt und wurde von flex gestaucht.

   Diese Werte hier hatten die engeren Angaben weiter oben in dieser Datei
   ueberschrieben. Sie sind jetzt wieder die engeren, und der zehnte
   Menuepunkt ("Beispielabrechnung") passt mit hinein.

   Wer hier einen Punkt hinzufuegt, misst nach - nicht die Fensterbreite,
   sondern die Summe der Kinder von .nav .wrap gegen dessen clientWidth. Ein
   breiteres Fenster hilft nicht: Der Satzspiegel ist auf 1120px begrenzt. */
.nav .wrap{
  height:56px;
  gap:14px;
}
.nav ul{
  font-size:12px;
  gap:11px;
  letter-spacing:.02em;
}
.logo,
.nav .logo{
  font-size:17px;
}

/* ---------- Der dritte Satz im Band ----------
   "Danach ist Ihre Nachforderung ausgeschlossen - ein Guthaben bleibt
   geschuldet." Der Satz verschwand bisher bei drei verschiedenen Breiten: auf
   21 Seiten bei 640px, auf 12 bei 700px, auf 10 bei 760px. Zwischen diesen
   Schwellen war das Band je nach Seite ein- oder zweizeilig - beim Wechsel
   von der Werkzeugseite auf eine Frageseite sprang die ganze Seite um 27
   Pixel. Das ist das Achtfache der Verschiebung, die ueberhaupt gemeldet
   worden war, und der eigentliche Fund dieser Aufraeumaktion.

   Eine Schwelle fuer alle, und sie ist gerechnet statt geraten: Punkt (10) +
   Fristsatz (350) + Zaehler (98) + drei Abstaende (48) + der Satz (445)
   ergeben 951 Pixel Inhalt, dazu 44 Polsterung - der Satz passt also bis rund
   1010 Pixel Fensterbreite in dieselbe Zeile. Die 1060 sind Reserve: Der
   Zaehler wird ueber das Jahr breiter ("noch 9 Tage" gegen "noch 365 Tage"),
   und Schriften rendern nicht auf jedem System gleich breit.

   Damit ist das Band ueberall einzeilig, solange der Satz steht - und wo er
   nicht mehr passt, ist er weg statt umgebrochen. */
@media(max-width:1060px){
  .band .rest{display:none}
}

/* ---------- Die Zwischenstufe ----------
   Zwischen 1001 und 1090 Pixeln wird es eng, bevor das Burgermenue kommt.
   41 Seiten hatten diese Stufe bereits, zwei nicht. */
@media(min-width:1001px) and (max-width:1090px){
  .nav .wrap{gap:14px}
  .nav ul{font-size:12.5px; gap:11px}
}

/* ---------- Der Umbruch zum Burgermenue ----------
   Einheitlich bei 1000 Pixeln. Die Startseite klappte bei 900 um, das
   Werkzeug bei 1000, die uebrigen bei 1000. Ein Umbruchpunkt, der von der
   Seite abhaengt, ist der sichtbarste aller Sprunge: Auf einem Fenster
   zwischen 900 und 1000 Pixeln hatte die Startseite eine Leiste und jede
   andere Seite ein Burgermenue. */
@media(max-width:1000.98px){
  .nav .wrap{position:relative; gap:14px}
  .nav ul{position:absolute; gap:0; padding:6px 0}
}

/* ---------- Der Kopfbereich klebt als Ganzes ----------
   Gemeldet: "wenn ich mich im ratgeber oder in den fragen bewege verschwindet
   die oberste top line, die mit dem puls, bei den anderen bleibt es."

   Nachgesehen: 14 Seiten trugen den Wrapper <div class="oben"> und die Regel
   dazu im eingebetteten Stil, 29 hatten ihn gar nicht - dort klebte nur .nav
   und das Fristband scrollte darunter weg. Kein Gestaltungswille, sondern ein
   Rest: Die 14 sind die Seiten, die spaeter entstanden oder ueberarbeitet
   wurden. kopf-kleben.py hat den Wrapper nachgetragen, diese Regel gilt jetzt
   fuer alle 43.

   Warum das Band bleiben soll: Es traegt den Stichtag und den Countdown. Wer
   im Ratgeber ueber die Frist liest, soll nicht zurueckblaettern muessen, um
   zu sehen, wie viele Tage noch bleiben - und ausgerechnet dort war es weg.

   .oben .nav wieder auf static: Sonst klebte die Leiste ein zweites Mal,
   innerhalb des schon klebenden Wrappers.

   DER PREIS, UND ER IST NICHT KLEIN: Auf einem schmalen Telefon bricht das
   Band auf drei Zeilen um (gemessen 90px bei 360px Breite), zusammen mit der
   Leiste rund 147. Das ist auf einem 700 Pixel hohen Bildschirm gut ein
   Fuenftel, dauerhaft belegt. Wer das nicht will, setzt genau diese eine
   Regel unter @media(min-width:701px) - dann klebt der Kopf auf breiten
   Fenstern und gibt auf dem Telefon den Platz frei. */
.oben{
  position:sticky;
  top:0;
  z-index:50;
}
.oben .nav{
  position:static;
}
@media print{
  .oben{position:static}
}


/* ---------- Das aufgeklappte Menue auf dem Telefon ----------
   Gemeldet: In "Fragen" und "Ratgeber" laesst sich nicht richtig scrollen.
   Nachgemessen bei 375x812 mit beiden Klappfeldern offen:

       Eintraege im Menue      31
       Inhaltshoehe          1394px
       sichtbarer Ausschnitt  755px
       Unterkante des Menues  885px   <- 73px UNTERHALB des Fensters
       overscroll-behavior    auto

   Zwei Fehler, die sich addieren.

   1. calc(100vh - 50px) rechnet mit 50 Pixeln ueber dem Menue. Tatsaechlich
      sind es rund 94 - Fristband (37) plus Leiste (57). Das Menue ist damit
      zu hoch und haengt unten aus dem Fenster heraus; die letzten Eintraege
      liegen in einem Bereich, den es gar nicht mehr gibt.

      100dvh statt 100vh ist der zweite Teil davon, und auf einem Telefon der
      wichtigere: 100vh meint dort die Hoehe OHNE eingeblendete Adresszeile.
      Solange die Adresszeile sichtbar ist - also beim Oeffnen des Menues -
      ist das sichtbare Fenster kleiner als 100vh, und die Rechnung geht um
      genau diesen Betrag daneben. dvh ist der Wert, der sich mitbewegt.

      Der Abzug muss den UNGUENSTIGSTEN Fall decken, nicht den freundlichsten.
      Der erste Versuch nahm 96 - die Kopfhoehe auf breiten Fenstern (Band 37
      plus Leiste 57). Nachgemessen bei 375 Pixeln Breite bricht das Band aber
      auf zwei Zeilen um, der Kopf ist dort 129 hoch, und das Menue ragte
      weiter 33 Pixel hinaus. Die Regel gilt ohnehin nur unterhalb von 1000
      Pixeln, und dort liegt die Kopfhoehe zwischen 120 und 147. 150 deckt
      das ab und laesst unten eine Kante stehen, an der erkennbar ist, dass
      noch etwas kommt.

   2. overscroll-behavior stand auf auto. Erreicht ein scrollbarer Bereich
      sein Ende, gibt er die Bewegung an das Element dahinter weiter - hier
      also an die Seite. Auf dem Telefon fuehlt sich das an, als wuerde das
      Menue springen: Man wischt weiter und statt der Liste bewegt sich die
      Seite darunter. "contain" haelt die Bewegung im Menue.

   Die Regel steht hier und nicht in den 43 eingebetteten Stilen, weil
   global.css spaeter geladen wird und bei gleicher Spezifitaet gewinnt. */
@media(max-width:1000.98px){
  .nav ul{
    /* Erst die Fassung fuer Browser ohne dvh, dann die richtige. Wer dvh
       nicht kennt, verwirft die zweite Zeile und behaelt die erste. */
    max-height:calc(100vh - 150px);
    max-height:calc(100dvh - 150px);
    overscroll-behavior:contain;
  }
}

/* ---------- Schmale Geraete ----------
   Nur 11 Seiten zogen das Band unter 560px enger. Auf einem Telefon ist die
   Zeile "Frist fuer den Abrechnungszeitraum 2025: 31. Dezember 2026" das
   Erste, was jemand sieht - sie soll dort nicht drei Zeilen hoch sein. */
@media(max-width:560px){
  .band{font-size:12.5px}
  .band .wrap{gap:5px 10px}
  .nav ul{font-size:12px}
  .logo,
  .nav .logo{font-size:14px}
  /* Das Wortzeichen ist der Weg zurueck auf die Startseite und wurde bei
     14 Punkten Schrift nur 21 Punkte hoch - knapp unter den 24, die ein
     Zeigerziel braucht. Das Polster vergroessert die Trefferflaeche, ohne
     die Schrift anzufassen. */
  .nav .logo{display:inline-block;padding:3px 0}
}

/* ==========================================================================
   BREITE TABELLEN AUF DEM TELEFON (7.9.2026)

   Eine Tabelle mit vier oder mehr Spalten passt auf 375 Punkte nicht. Ohne
   Regel waechst sie ueber den Rand hinaus und nimmt die ganze Seite mit: Die
   Startseite liess sich 670 Punkte weit seitlich schieben, die Vorlagenseite
   482. Beim seitlichen Schieben verrutscht auch der Text daneben - der Nutzer
   liest dann eine Seite, deren linker Rand nicht mehr da ist.

   display:block macht aus der Tabelle einen eigenen Kasten, der fuer sich
   geschoben werden kann. Die erste Spalte darf umbrechen und bekommt eine
   Mindestbreite, damit die Kostenart lesbar bleibt; der Rest bleibt in einer
   Zeile, weil eine umgebrochene Zahlenspalte nicht mehr zu lesen ist.

   Die Formularseiten machen das seit jeher fuer table.tab - die Regel stand
   nur in ihrem eigenen Kopf und galt fuer keine andere Seite.
   ========================================================================== */
@media(max-width:640px){
  table.tab, table.vtab{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    font-size:13px;
  }
  table.tab td:first-child, table.vtab td:first-child,
  table.tab th:first-child, table.vtab th:first-child{white-space:normal;min-width:10em}

  /* Ein Fieldset traegt vom Browser ein min-width:min-content und waechst
     damit aus jedem Kasten heraus, statt sich zu fuegen. */
  fieldset{min-width:0}
}


/* ==========================================================================
   TEIL 11 · BEWEGUNG (7.9.2026)

   EINE KURVE FUER ALLES

   Nicht, weil es huebsch ist, sondern weil eine Oberflaeche mit fuenf
   verschiedenen Beschleunigungen gebastelt wirkt und eine mit einer
   einzigen gebaut. cubic-bezier(.16,1,.3,1) bremst am Ende hart ab: Dinge
   KOMMEN AN und rutschen nicht aus. Das passt zu einem Werkzeug, in dem es
   um Geld geht - Verspieltheit waere hier das falsche Versprechen.

   Kurz bleibt es auch. Alles unter 0,25 Sekunden nimmt niemand als
   "Animation" wahr, sondern als Reaktion. Was laenger dauert, wartet.

   prefers-reduced-motion ist weiter oben schon global abgefangen
   (transition-duration:.01ms !important) - alles hier drunter schaltet sich
   fuer wen es muss von selbst ab.
   ========================================================================== */
:root{
  /* Kurz und schnappend. Fuer Rueckmeldung an einem Knopf, einer Zeile,
     einem Haken - dort SOLL es sofort passieren. */
  --kurve:cubic-bezier(.16,1,.3,1);

  /* ZWEI KURVEN, NICHT EINE (7.9.2026)

     Die erste allein war zu wenig. Sie ist eine easeOut-Kurve: Sie startet
     mit voller Geschwindigkeit und bremst nur noch ab. In Zahlen, Anteil der
     Bewegung nach Anteil der Zeit:

       nach 10 % der Zeit    schon 49 % der Strecke
       nach 20 %                   75 %
       nach 30 %                   88 %

     Fuer eine Flaeche, die aufgeht, ist das falsch. Sie wird losgelassen und
     faellt an ihren Platz, statt gefuehrt zu werden - eine ganze Klappe, die
     so ankommt, sieht aus wie hingeworfen.

     Die weiche Kurve setzt an, statt zu springen:

       nach 10 % der Zeit          27 % der Strecke
       nach 20 %                   66 %
       nach 30 %                   85 %

     Regel im Haus: Was der Finger gerade beruehrt, bekommt --kurve.
     Was sich als Flaeche bewegt, bekommt --kurve-weich.

     Die Dauer der Klappe steht auf 620 Millisekunden. Das ist viel fuer eine
     Oberflaeche und war eine Entscheidung nach dem Ansehen, nicht nach der
     Rechnung: Bei dieser Kurve sind 90 Prozent der Strecke schon nach 229 ms
     geschafft, die restlichen 390 ms sind Auslauf. Genau der macht den
     Unterschied zwischen "aufgeklappt" und "aufgegangen". */
  --kurve-weich:cubic-bezier(.32,.72,0,1);
  /* Fuer etwas, das VORHER NICHT DA WAR. Sanfterer Anlauf als --kurve-weich,
     und zwei Prozent Ueberschwingen am Ende. Siehe die Klappe des Helfers. */
  --kurve-klappe:cubic-bezier(.28,.84,.28,1.02);
}

/* -------------------------------------------------------------------------
   DAS KLAPPMENUE

   Das Menuesymbol verwandelt sich seit jeher in 0,2 Sekunden in ein Kreuz.
   Die Klappe darunter sprang im selben Moment auf - display:none auf
   display:flex laesst sich nicht animieren. Dieser Bruch war das, was falsch
   aussah: Das eine Element bewegt sich, das andere ist ploetzlich einfach da.

   Jetzt ist die Klappe immer im Baum und wird nur sichtbar gemacht.
   visibility statt display, damit sie zugeklappt weder anklickbar ist noch
   im Vorlesemodus auftaucht - und damit sie sich ueberhaupt animieren laesst.

   Der Selektor ist eng: .nav .wrap > ul trifft NUR die oberste Liste. Ein
   blosses ".nav ul" haette die Untermenues (ul.unter) mitgenommen.
   ------------------------------------------------------------------------- */
@media(max-width:1120px){
  .nav .wrap > ul{
    display:flex;
    opacity:0;
    visibility:hidden;
    transform:translateY(-16px);
    transition:opacity .48s var(--kurve-weich), transform .62s var(--kurve-weich), visibility 0s linear .62s;
  }
  .nav.open .wrap > ul{
    opacity:1;
    visibility:visible;
    transform:none;
    transition:opacity .48s var(--kurve-weich), transform .62s var(--kurve-weich), visibility 0s;
  }

  /* Die Eintraege kommen gestaffelt nach, 40 Millisekunden auseinander. Der
     neunte startet bei 0,32 Sekunden und ist bei 0,58 fertig - die Klappe
     selbst braucht 0,62. Beides kommt also zusammen an.

     Diese Rechnung muss man mitfuehren. Bliebe die Staffelung bei 30 ms und
     die Eintragsdauer bei 0,24, waeren die Zeilen lange vor der Flaeche
     fertig, auf der sie liegen - dann sieht man ZUERST die Eintraege und
     DANN, wie sich das Weiss darunter noch zurechtschiebt.
     Zugeklappt wird ohne Staffelung: Rueckwaerts wirkt sie zoegerlich. */
  .nav .wrap > ul > li{
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .24s var(--kurve-weich), transform .26s var(--kurve-weich);
  }
  .nav.open .wrap > ul > li{opacity:1;transform:none}
  .nav.open .wrap > ul > li:nth-child(1){transition-delay:.04s}
  .nav.open .wrap > ul > li:nth-child(2){transition-delay:.08s}
  .nav.open .wrap > ul > li:nth-child(3){transition-delay:.12s}
  .nav.open .wrap > ul > li:nth-child(4){transition-delay:.16s}
  .nav.open .wrap > ul > li:nth-child(5){transition-delay:.20s}
  .nav.open .wrap > ul > li:nth-child(6){transition-delay:.24s}
  .nav.open .wrap > ul > li:nth-child(7){transition-delay:.28s}
  .nav.open .wrap > ul > li:nth-child(8){transition-delay:.32s}
  .nav.open .wrap > ul > li:nth-child(n+9){transition-delay:.32s}
}

/* -------------------------------------------------------------------------
   DER SCHIEBEKASTEN SAGT, DASS ER SCHIEBBAR IST

   Breite Tabellen liegen seit dem 7.9.2026 in einem Kasten mit
   overflow-x:auto. Damit geht nichts mehr verloren - aber niemand SIEHT,
   dass rechts noch etwas steht. Auf der Musterseite ist das die Spalte
   "Ihre Kosten", also genau die, wegen der jemand hinsieht.

   Vier Verlaeufe uebereinander, das Verfahren geht auf Roman Komarov
   zurueck: Zwei davon haengen am Inhalt (background-attachment:local) und
   wandern beim Schieben mit, zwei am Kasten (scroll) und bleiben stehen.
   Am linken Rand deckt der mitwandernde Verlauf den stehenden Schatten ab,
   solange nichts geschoben ist - der Schatten erscheint also von selbst
   genau dann, wenn es etwas zu schieben gibt, und verschwindet am Ende
   wieder. Ohne eine Zeile JavaScript und ohne Ereignis beim Schieben.
   ------------------------------------------------------------------------- */
@media(max-width:640px){
  table.tab, table.vtab, table.aufstellung{
    background-image:
      linear-gradient(to right,  var(--paper,#FCFCFA) 40%, var(--papier-klar,rgba(252,252,250,0))),
      linear-gradient(to left,   var(--paper,#FCFCFA) 40%, var(--papier-klar,rgba(252,252,250,0))),
      radial-gradient(farthest-side at 0% 50%, var(--schatten-kante,rgba(28,39,51,.16)), rgba(28,39,51,0)),
      radial-gradient(farthest-side at 100% 50%, var(--schatten-kante,rgba(28,39,51,.16)), rgba(28,39,51,0));
    background-position:left center, right center, left center, right center;
    background-repeat:no-repeat;
    background-size:34px 100%, 34px 100%, 13px 100%, 13px 100%;
    background-attachment:local, local, scroll, scroll;
  }
}


/* ==========================================================================
   TEIL 12 · TECHNISCHE FINESSEN (7.9.2026)
   ==========================================================================

   Anlass war vibecodeawards.de, aber nicht ihr Aussehen. Die Frage war:
   Was koennen die technisch, das wir nicht koennen? Nachgezaehlt in ihrem
   einen Stylesheet, 57 Kilobyte:

       clamp()      131x   Groessen fliessen, statt an Umbruchpunkten zu springen
       mask-image    26x   fremde Logos nehmen die Hausfarbe an
       color-mix     24x   jeder Ton wird aus EINER Marke abgeleitet
       cubic-bezier   1x   dieselbe wie unsere: .16 1 .3 1
       steps()        2x   eine Bewegung, die absichtlich ruckelt

   Zwei davon kommen hier nicht an, und das ist eine Entscheidung: steps()
   und die Maske tragen ihre Marke - eine Veranstaltung fuer Entwickler, die
   nach Pixeln aussehen darf. Bei uns steht am Ende ein Brief ueber Geld.

   EINE MESSUNG, DIE EINE IDEE ERLEDIGT HAT

   Die erste Finesse auf meiner Liste war font-variant-numeric:tabular-nums,
   damit Eurobetraege in den Spalten uebereinanderstehen. Vorher nachgemessen,
   in der echten Schrift auf der echten Seite: alle zehn Ziffern von IBM Plex
   Sans Condensed sind 8,64 Pixel breit. Die Schrift setzt Ziffern bereits
   tabellarisch. Die Regel haette nichts getan ausser gut auszusehen.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · EIN TON WIRD ABGELEITET, NICHT NOCHMAL GEMISCHT

   In dieser Datei standen neun handgemischte rgba-Werte. Sie buchstabieren
   Toene nach, die als Token schon da sind: rgba(28,39,51,.14) IST --ink mit
   14 Prozent Deckung. Vier davon habe ich am 7.9. selbst geschrieben, beim
   Schiebeschatten der Tabellen - und dabei var(--paper) und ein festes
   rgba(252,252,250,0) in DIESELBE Zeile gesetzt. Wer --paper spaeter aendert,
   bekommt einen Verlauf, der von der neuen Farbe ins alte Papier laeuft.

   color-mix loest genau das: Der Ton wird aus dem Token gerechnet, nicht
   danebengestellt. Aeltere Browser bekommen ueber die var()-Ausweichwerte
   weiter exakt die Zahlen von vorher - nichts wird schlechter, es wird nur
   nicht mehr doppelt gepflegt.

   Die Ausnahme steht unten: durchsichtiges Papier laesst sich mit color-mix
   nicht ausdruecken, weil "transparent" dort als schwarze Null gilt und die
   Mischung ihre Farbe verlieren wuerde.
   -------------------------------------------------------------------------- */
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --schatten:color-mix(in srgb, var(--ink,#1C2733) 14%, transparent);
    --schatten-weich:color-mix(in srgb, var(--ink,#1C2733) 10%, transparent);
    --schatten-kante:color-mix(in srgb, var(--ink,#1C2733) 16%, transparent);
  }
}
/* Papier mit Deckung null - hier bewusst als Zahl, siehe oben. */
:root{ --papier-klar:rgba(252,252,250,0) }


/* --------------------------------------------------------------------------
   2 · DER SEITENWECHSEL BLITZT NICHT MEHR

   Das ist die groesste sichtbare Aenderung und stammt NICHT von ihnen - ihre
   Seite ist eine einzige, da stellt sich die Frage nicht. Unsere sind 51.
   Bisher hiess jeder Klick im Menue: weisser Blitz, Seite neu.

   @view-transition sagt dem Browser, dass er den alten Stand fotografieren,
   den neuen aufbauen und zwischen beiden ueberblenden soll. Zwei Zeilen, kein
   Skript, kein Rahmenwerk. Browser, die es nicht kennen, ueberlesen die
   Regel und blaettern wie bisher - es gibt nichts zu reparieren.

   220 Millisekunden, nicht mehr. Ein Seitenwechsel darf nicht warten lassen;
   er soll nur aufhoeren, wie ein Fehler auszusehen.

   Der Kopf bekommt einen eigenen Namen und wird dadurch als eigenes Stueck
   behandelt. Ohne das wuerde er mit sich selbst ueberblenden - dasselbe Logo
   auf demselben Platz, das kurz doppelt und flau wird. Mit Namen erkennt der
   Browser ihn auf beiden Seiten wieder und laesst ihn einfach stehen.

   Bedingung dafuer: der Name darf pro Seite nur EINMAL vorkommen. .oben steht
   auf allen geprueften Seiten genau einmal; wer ein zweites Element mit
   dieser Klasse anlegt, schaltet die Ueberblendung stillschweigend ab.
   -------------------------------------------------------------------------- */
@view-transition{ navigation:auto }

::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.22s;
  animation-timing-function:var(--kurve-weich,ease);
}

.oben{ view-transition-name:kopf }

/* Die Regel aus Teil 7, die alle Dauern auf 0,01ms zieht, greift hier NICHT:
   Die Schnappschuesse liegen in einem eigenen Baum, den * nicht trifft. Also
   noch einmal ausdruecklich. */
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important }
}


/* --------------------------------------------------------------------------
   3 · AUFKLAPPEN STATT AUFSPRINGEN

   111 <details> stehen auf 23 Seiten, die meisten davon die Fragen unter den
   Ratgebern. Sie springen auf. Der Grund ist derselbe wie beim Menue: von
   Hoehe null auf "so hoch wie noetig" gibt es keinen Zwischenwert, den ein
   Browser berechnen koennte.

   Seit interpolate-size:allow-keywords gibt es ihn doch. ::details-content
   ist dabei der Griff, den es vorher nicht gab: der Inhalt hinter dem
   Zusammenklapper, ohne dass wir ihn in ein zusaetzliches <div> wickeln
   muessen - was 111 Stellen im HTML bedeutet haette.

   Alles steht in @supports selector(::details-content). Wer den Griff nicht
   kennt, sieht die ganze Gruppe nicht und klappt weiter schlagartig auf.
   Das ist der Unterschied zwischen einer Finesse und einem Risiko.

   content-visibility muss mitschalten, sonst bliebe der Inhalt fuer Suche
   und Vorlesemodus waehrend der Bewegung unsichtbar. Es ist ein diskreter
   Wert wie display - allow-discrete haelt ihn bis zum Ende der Bewegung.
   -------------------------------------------------------------------------- */
@supports selector(::details-content){
  details{ interpolate-size:allow-keywords }
  details::details-content{
    block-size:0;
    overflow:clip;
    transition-property:block-size,content-visibility;
    transition-duration:.3s;
    transition-timing-function:var(--kurve-weich,ease);
    transition-behavior:allow-discrete;
  }
  details[open]::details-content{ block-size:auto }

  /* Beim Drucken gibt es keinen Bildaufbau, der eine Bewegung zu Ende
     bringt. Was aufgeklappt ist, muss auf dem Papier vollstaendig stehen -
     und zwar ohne overflow:clip, sonst schneidet der Umbruch auf die
     naechste Seite mitten im Text ab. */
  @media print{
    details[open]::details-content{ block-size:auto !important; overflow:visible !important }
  }
}


/* --------------------------------------------------------------------------
   4 · KEIN EINZELNES WORT AUF DER LETZTEN ZEILE

   Ueberschriften brechen seit dem 5.9. ausgewogen (Teil 9). Fliesstext nicht -
   dort waere balance verschwendet, weil der Browser dafuer alle Umbrueche
   durchrechnet und das nur bis etwa sechs Zeilen tut.

   pretty ist der Wert fuer den langen Text: Der Browser sieht sich die
   letzten Zeilen an und verhindert, dass ein einzelnes Wort allein
   uebrigbleibt. Das ist genau die Stelle, an der ein Absatz auf dem Telefon
   unfertig aussieht - und es passt zu den 30 Absaetzen, die gestern an einem
   Satzende geteilt wurden.

   .lead ist ausgenommen, weil dort balance bewusst steht: Ein Vorspann ist
   kurz genug, dass sich das Durchrechnen lohnt. Die Klasse gewinnt gegen den
   Elementnamen hier von selbst, (0,1,0) gegen (0,0,1).
   -------------------------------------------------------------------------- */
p, li, dd, figcaption{ text-wrap:pretty }


/* --------------------------------------------------------------------------
   5 · ZWEI STELLEN, DIE MAN NUR MERKT, WENN SIE FEHLEN

   Die Unterlaenge: Eine Standard-Unterstreichung liegt so hoch, dass sie
   durch das g, j und p faehrt. In "Vorauszahlung" trifft sie zwei Buchstaben.
   Ein Sechstel Geviert tiefer, und der Strich liegt unter dem Wort statt darin.

   Die Auswahl: Markierter Text bekommt sonst das Blau des Betriebssystems -
   auf einer Seite mit Papierton und einem einzigen Rot ist das der einzige
   Fremdkoerper, den man selbst herstellt. Der Ton ist das Stempelrot mit
   22 Prozent auf Papier; die Schrift bleibt Tinte, damit lesbar bleibt, was
   man gerade kopieren will.
   -------------------------------------------------------------------------- */
main a{ text-underline-offset:.16em; text-decoration-thickness:.07em }

::selection{ background:#E9CECA; color:var(--ink,#1C2733) }
@supports (color:color-mix(in srgb,red,blue)){
  ::selection{
    background:color-mix(in srgb, var(--stamp,#A62B22) 22%, var(--paper,#FCFCFA));
  }
}


/* ==========================================================================
   TEIL 13 · BEWEGUNG, DIE ETWAS SAGT (7.9.2026)
   ==========================================================================

   Die vierte Stelle in dieser Datei, an der Bewegung steht. Wer sucht:

       Teil 7    Klappfelder, Karten, Fokus - alles am Zeiger
       Teil 9    Bausteine beim Blaettern, die Lesefortschrittslinie
       Teil 11   die Klappe des Mobilmenues, 620ms
       Teil 13   hier: Rueckmeldung auf eine Handlung

   Anlass war wieder vibecodeawards.de. Ihre siebzehn Uebergaenge sind
   ausgezaehlt und nachgesehen worden; das meiste ist Farbe in 0,2 Sekunden.
   Drei Dinge waren es wert:

   1. Ihr Knopf hat DREI Dauern statt einer: Farbe 80ms, Rahmen 120ms,
      Position 100ms. Die schnellste Rueckmeldung ist die Farbe, weil sie
      am wenigsten kostet - man sieht sie, bevor man den Finger hebt.
   2. Ihr Knopf gibt beim Druecken nach: translate 2px 2px. Zwei Pixel,
      und der Knopf ist ein Gegenstand statt einer Flaeche.
   3. translate statt transform. Beides verschiebt, aber transform ist EINE
      Eigenschaft fuer alles - wer sie hier belegt, kann daneben nicht mehr
      drehen oder skalieren, ohne den Wert komplett neu zu schreiben.

   Was NICHT uebernommen wurde und warum, damit es niemand nachtraegt:

   - Das Laufband (marquee 30s linear infinite). Eine Dauerschleife zieht
     das Auge fuer immer; auf einer Seite, auf der jemand Zahlen pruefen
     soll, ist das eine Steuer auf jede Sekunde Aufmerksamkeit.
   - Der Equalizer (briefing-wave, scaleY 0.62, 1,6s endlos). Dasselbe.
   - Das Pixelfeld des Knopfes: ein Raster aus Quadraten hinter der Flaeche,
     jedes mit eigener Verzoegerung, steps(2,end). Sehr schoen und sehr
     ihre Marke. Bei uns waere es ein Kostuem.
   - Hochzaehlende Betraege. Am naechsten lag es und es bleibt draussen:
     Eine Zahl, die von 0,00 auf 122,80 laeuft, zeigt eine halbe Sekunde
     lang Betraege, die niemand schuldet. Auf einer Seite, deren einziges
     Versprechen die Richtigkeit der Zahl ist, waere das die eine Animation,
     die dem Produkt widerspricht.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · KNOEPFE GEBEN NACH

   .btn ist der Hauptknopf und steht auf 40 Seiten. Er hatte bisher einen
   Farbwechsel und sonst nichts - auf ein Antippen antwortete er gar nicht.
   Auf dem Telefon ist das der haeufigste Fall: kurzer Druck, Finger weg,
   und in der Zwischenzeit sieht man nicht, ob er getroffen hat.

   Ein Pixel, nicht zwei: Ihr Knopf traegt einen harten Schlagschatten, in
   den er sich hineindrueckt. Unserer hat keinen, da genuegt weniger.
   Senkrecht, nicht diagonal - .pknopf und .uknopf im Werkzeug machen es
   seit Teil 7 senkrecht, und zwei Richtungen fuer dieselbe Geste waeren
   der Anfang vom Ende einer Handschrift.

   Die drei Dauern stehen einzeln, wie bei ihnen: Farbe zuerst.
   -------------------------------------------------------------------------- */
.btn{
  transition:background .13s var(--kurve,ease),
             border-color .16s var(--kurve,ease),
             translate .1s var(--kurve,ease);
}
.btn:active{translate:0 1px}


/* --------------------------------------------------------------------------
   2 · DIE ABGEWAEHLTE ZEILE VERBLASST, STATT ZU SPRINGEN

   Im Werkzeug entscheidet ein Haken je Zeile, ob eine Kostenart auf den
   Mieter geht. Abgewaehlt heisst opacity .42 - und das schaltete hart um.
   Bei achtzehn Zeilen untereinander sieht man den Sprung, aber nicht
   unbedingt, WELCHE Zeile gesprungen ist.

   180 Millisekunden genuegen, damit das Auge der Ursache folgen kann. Die
   Klasse wird umgeschaltet, nicht neu gezeichnet (Zeile 7266 im Werkzeug) -
   sonst gaebe es kein Element, an dem ein Uebergang haengen koennte.
   -------------------------------------------------------------------------- */
.pos-row{transition:opacity .18s var(--kurve,ease)}


/* --------------------------------------------------------------------------
   3 · DIE ERGEBNISLEISTE QUITTIERT

   Auf dem Telefon steht das Ergebnis in einer festen Leiste am unteren Rand,
   waehrend oben die Positionen bearbeitet werden. Beides gleichzeitig im
   Blick zu haben, ist genau der Zweck der Leiste - nur: aendert sich der
   Betrag, faellt es nicht auf. Der Daumen ist oben, die Zahl unten.

   Also eine Quittung: eine zwei Pixel hohe Linie im Stempelrot faehrt unter
   dem Betrag von links heran und verschwindet wieder. Dieselbe Geste wie
   unter den Menuepunkten in Teil 7 - eine Handschrift besteht daraus, dass
   dieselbe Bewegung dasselbe bedeutet.

   Die ZAHL selbst bewegt sich nicht und zaehlt nicht hoch. Sie steht in
   jedem Einzelbild richtig da; bewegt wird nur der Hinweis darauf.
   -------------------------------------------------------------------------- */
.mobilbon .mb-v{position:relative}
.mobilbon .mb-v::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px; height:2px;
  background:var(--stamp,#A62B22);
  transform:scaleX(0);
  transform-origin:left center;
  pointer-events:none;
}
@keyframes quittung{
  0%   {transform:scaleX(0); opacity:1}
  38%  {transform:scaleX(1); opacity:1}
  100% {transform:scaleX(1); opacity:0}
}
.mobilbon .mb-v.geaendert::after{
  animation:quittung .62s var(--kurve-weich,ease);
}
@media print{ .mobilbon .mb-v::after{display:none} }


/* --------------------------------------------------------------------------
   4 · DER ZEIGER, DER NIE WEGGEHT

   Auf einem Tippgeraet gibt es kein "Zeiger daneben". Wer einen Knopf
   antippt, loest damit auch :hover aus - und der Zustand bleibt, bis
   irgendwo anders hingetippt wird. Bei uns faerbt :hover den Knopf ins
   Stempelrot. Ein Knopf, der nach dem Antippen rot stehen bleibt, sieht aus,
   als arbeite er noch.

   Aufgefallen ist es erst durch die neue Druckbewegung: Solange gar nichts
   passierte, war auch nichts falsch daran. Jetzt gibt es zwei Antworten auf
   dieselbe Beruehrung, und eine davon geht nicht wieder weg.

   :not(:active) laesst das Antippen selbst unberuehrt - waehrend der Finger
   liegt, DARF der Knopf rot sein. Nur danach nicht mehr.

   Hier stehen keine Farben, sondern dieselben Token, die alle 40 Seiten in
   ihrem eigenen .btn schon verwenden. Wer sie dort aendert, aendert sie hier
   mit.
   -------------------------------------------------------------------------- */
@media(hover:none){
  .btn:hover:not(:active){
    background:var(--ink,#1C2733);
    border-color:var(--ink,#1C2733);
  }
  .btn.hohl:hover:not(:active){
    background:transparent;
    color:var(--ink,#1C2733);
    border-color:var(--ink,#1C2733);
  }
}


/* ==========================================================================
   TEIL 14 · DER HELFER UNTEN RECHTS (8.9.2026)
   ==========================================================================

   Ein Knopf, der eine Frage entgegennimmt und mit dem antwortet, was auf
   diesen Seiten steht. Kein Sprachmodell - die Begruendung dafuer steht in
   helfer.js, wo sie hingehoert.

   DIE SCHICHTEN, DAMIT NICHTS ETWAS VERDECKT

       40   die Kopfleiste
       45   der Knopf des Helfers        <- hier
       50   die Ergebnisleiste im Werkzeug
       55   die Lesefortschrittslinie
       58   die geoeffnete Klappe des Helfers   <- und hier
       60   das aufgeklappte Mobilmenue

   Der Knopf liegt also UNTER der Ergebnisleiste des Werkzeugs, die
   geoeffnete Klappe darueber. Das ist Absicht: Solange der Helfer zu ist,
   darf er dem Betrag nicht im Weg stehen; wer ihn aufmacht, will ihn lesen.

   Und dass er dem Betrag ueberhaupt nicht im Weg steht, regelt :has() weiter
   unten - der Knopf rueckt hoch, sobald die Leiste da ist.
   ========================================================================== */
.hf{
  position:fixed;
  right:16px; bottom:16px;
  z-index:45;
  font-family:var(--sans,system-ui,sans-serif);
}

/* ---------- Der Knopf ----------
   Dieselbe Sprache wie .btn: Tinte, harte Kante, kein Rund. Der Schatten ist
   der versetzte Block aus dem Rest des Hauses, kein weicher Schein.

   KLEIN, UND ER WAECHST UNTER DEM ZEIGER (8.9.2026)

   Zuerst war er 91 Punkte breit und trug das Wort "Hilfe" dauerhaft. Auf
   einer Seite, auf der jemand Zahlen prueft, ist das ein Stueck Werbung, das
   immer mitlaeuft. Jetzt ist er ein Quadrat mit einem Fragezeichen und
   erklaert sich erst, wenn jemand hingeht.

   Bewegt wird max-width, nicht width: "auf null" nach "so breit wie noetig"
   ist ohne interpolate-size kein Uebergang, sondern ein Sprung. 64 Punkte
   sind grosszuegig fuer "Hilfe" und schneiden nichts ab.

   Auf Tippgeraeten gibt es kein Hingehen. Dort bleibt das Fragezeichen
   allein stehen - es ist die Beschriftung, nicht die Abkuerzung dafuer -,
   und das Quadrat behaelt seine 44 Punkte Grifflaeche. */
.hf-knopf{
  display:flex; align-items:center; gap:0;
  width:38px; height:38px; padding:0;
  background:var(--ink,#1C2733); color:var(--paper,#FCFCFA);
  border:1.5px solid var(--ink,#1C2733);
  box-shadow:3px 3px 0 var(--schatten,rgba(28,39,51,.14));
  font-family:inherit; font-size:13.5px; font-weight:600; letter-spacing:.04em;
  cursor:pointer; overflow:hidden;
  justify-content:center;
  transition:background .13s var(--kurve,ease),
             border-color .13s var(--kurve,ease),
             width .32s var(--kurve-weich,ease),
             gap .32s var(--kurve-weich,ease),
             box-shadow .2s var(--kurve,ease),
             translate .1s var(--kurve,ease);
}
.hf-knopf:hover,
.hf-knopf:focus-visible{
  background:var(--stamp,#A62B22); border-color:var(--stamp,#A62B22);
  width:96px; gap:8px;
  box-shadow:4px 4px 0 var(--schatten,rgba(28,39,51,.14));
}
.hf-knopf:active{translate:0 1px}
.hf-wort{
  max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  /* Die Breite zuerst, die Schrift hinterher: Ein Wort, das erscheint,
     bevor Platz dafuer da ist, wird einen Moment lang gequetscht. */
  transition:max-width .32s var(--kurve-weich,ease),
             opacity .2s linear .1s;
}
.hf-knopf:hover .hf-wort,
.hf-knopf:focus-visible .hf-wort{max-width:64px;opacity:1}

@media(hover:none){
  /* Kein Zeiger, kein Aufgehen - und die Grifflaeche bleibt bei 44. */
  .hf-knopf{width:44px;height:44px}
  .hf-knopf:hover:not(:active){
    background:var(--ink,#1C2733); border-color:var(--ink,#1C2733); width:44px;
  }
  .hf-knopf:hover .hf-wort{max-width:0;opacity:0}
}
.hf-zeichen{width:20px;height:17px;flex:none;display:block;overflow:visible}

/* ---------- Die Blase spricht, wenn man hingeht ----------
   Ein einmaliger Lauf durch die drei Punkte, nicht die Dauerschleife, die
   auf der Wettbewerbsseite steht. Der Unterschied ist der ganze Punkt: Eine
   Schleife zieht das Auge fuer immer, ein einmaliger Lauf ANTWORTET auf
   etwas. Er faengt an, wenn der Zeiger kommt, und ist vorbei, bevor die
   Klappe oben ist.

   transform-box:fill-box, weil ein SVG-Kreis sonst um den Ursprung der
   ganzen Zeichenflaeche wandert statt um sich selbst - der Punkt flaege
   dann aus der Blase heraus. */
.hf-punkt{transform-box:fill-box;transform-origin:50% 50%}
@keyframes hf-welle{
  0%,100%{transform:none}
  38%    {transform:translateY(-2.6px)}
}
.hf-knopf:hover .hf-punkt,
.hf-knopf:focus-visible .hf-punkt{animation:hf-welle .46s var(--kurve-weich,ease) both}
.hf-knopf:hover .hf-punkt:nth-of-type(2),
.hf-knopf:focus-visible .hf-punkt:nth-of-type(2){animation-delay:.07s}
.hf-knopf:hover .hf-punkt:nth-of-type(3),
.hf-knopf:focus-visible .hf-punkt:nth-of-type(3){animation-delay:.14s}

/* ---------- Die Klappe ----------
   Bewegt wird NUR die Lage, nicht die Deckkraft. Bliebe der Uebergang
   haengen - alter Browser, angehaltener Bildaufbau -, saehe man die Klappe
   acht Punkte zu tief. Bei opacity:0 saehe man gar nichts, und das bei
   einem Element, das gerade jemand ausdruecklich geoeffnet hat. */
/* ZUGEKLAPPT HEISST ZUGEKLAPPT (8.9.2026)

   Hier stand display:flex in der Grundregel - und das ist der Fehler, mit
   dem der Helfer ausgeliefert wurde: [hidden]{display:none} steht im
   Standardblatt des Browsers, meine Regel im Autorenblatt, und das Autorblatt
   gewinnt. Das Attribut war gesetzt, gerechnet wurde flex. Die Klappe stand
   auf allen 51 Seiten dauerhaft offen.

   Nachgeprueft hatte ich, was NACH dem Klick passiert. Den Ruhezustand der
   Seite - das erste Bild, das jeder Besucher sieht - habe ich nicht
   angesehen. Genau davor warnt der eigene Merksatz in Teil 9.

   Jetzt traegt die Grundregel display:none, und erst der offene Zustand
   macht daraus flex. allow-discrete schaltet display am Ende der Bewegung,
   nicht an ihrem Anfang. */
.hf-panel{
  position:absolute; right:0; bottom:calc(100% + 10px);
  width:min(370px, calc(100vw - 32px));
  max-height:min(70vh, 560px);
  display:none; flex-direction:column;
  background:var(--paper,#FCFCFA);
  border:1.5px solid var(--ink,#1C2733);
  box-shadow:5px 5px 0 var(--schatten,rgba(28,39,51,.14));
  z-index:58;
  /* DIE KLAPPE ENTFALTET SICH AUS DEM KNOPF (8.9.2026, zweite Fassung)

     Die erste Fassung schob sie acht Punkte nach oben und blendete sie ein.
     Das ist die Bewegung, die jedes Fenster seit 2008 macht, und sie sagt
     nichts: Sie kommt von nirgendwo.

     Jetzt kommt sie aus dem Knopf. transform-origin liegt in ihrer unteren
     rechten Ecke - und genau dort, zehn Punkte darunter, sitzt der Knopf.
     Was aus 82 Prozent auf volle Groesse waechst, waechst also sichtbar
     AUS ihm heraus. Dieselbe Idee, mit der Betriebssysteme ein Fenster aus
     seinem Symbol aufziehen, nur ohne Rahmenwerk: zwei Zeilen CSS.

     Bewegt wird ausschliesslich transform, nirgends die Deckkraft. Bleibt
     die Bewegung haengen, sieht man eine etwas zu kleine Klappe statt gar
     keiner - und nach dem heutigen Vormittag ist das keine Vorsicht mehr,
     sondern Hausregel.

     display wird nicht mitbewegt: Mit allow-discrete schaltet es erst am
     ENDE, und beim Zuklappen stuende die Klappe sonst noch da - fuer
     immer, falls der Uebergang nicht durchlaeuft. Das Zuklappen springt
     deshalb. Beim Oeffnen sieht man die Bewegung, beim Schliessen sieht
     man ohnehin schon woandershin. */
  transform-origin:100% 100%;
}
/* DRITTE FASSUNG (8.9.2026, abends) - "oeffnet sich zu ploetzlich"

   Zwei Gruende, und der groessere lag nicht im Stilblatt.

   Der groessere: Beim ersten Oeffnen wurden 113 KB nachgeladen und 267
   Eintraege zerlegt, waehrend diese Bewegung lief. Die ersten Bilder fielen
   schlicht aus - die Klappe stand auf halbem Weg da und sprang den Rest. Das
   ist in helfer.js behoben: Das Wissen wird geholt, sobald der Zeiger
   ankommt, 140 Millisekunden vor dem Aufgehen.

   Der kleinere: --kurve-weich legt 70 Prozent des Weges im ersten Drittel der
   Zeit zurueck. Fuer eine Flaeche, die schon da ist und sich verschiebt, ist
   das richtig. Fuer eine, die es vorher NICHT GAB, ist es der Grund, warum
   sie aufblitzt statt zu kommen. Deshalb hier eine eigene Kurve: vorn
   spuerbar sanfter, hinten mit zwei Prozent Ueberschwingen, damit sie
   ankommt, statt einzurasten.

   Und die Deckkraft ist dazugekommen, gegen die Regel von heute frueh. Sie
   ist bei 40 Prozent der Zeit auf 1, lange vor dem Ende: Bleibt die Bewegung
   irgendwo haengen, steht die Klappe sichtbar da - eine Spur zu klein, aber
   lesbar. Genau das war die Bedingung. */
@keyframes hf-entfalten{
  from{transform:scale(.84) translateY(12px);opacity:0}
  40% {opacity:1}
  to  {transform:none;opacity:1}
}

/* Der Inhalt rueckt gestaffelt nach - dieselbe Geste wie die Eintraege im
   Burgermenue (Teil 11). Eine Handschrift besteht daraus, dass dieselbe
   Bewegung dasselbe bedeutet: Hier wie dort entfaltet sich etwas, statt
   fertig dazustehen.

   Der letzte Teil startet bei 0,16 und ist bei 0,46 fertig - genau dann ist
   auch die Klappe fertig. Beides kommt zusammen an, wie beim Menue
   nachgerechnet. */
@keyframes hf-nachruecken{
  from{transform:translateY(9px)}
  to  {transform:none}
}

.hf-panel:not([hidden]){
  display:flex;
  animation:hf-entfalten .46s var(--kurve-klappe,ease) both;
}

/* AUF DEM TELEFON KLEINER, MIT RAND DANEBEN (20.9.2026)

   Bis hierher war die Klappe 370 Punkte breit und bis 70 vh hoch - auf einem
   Telefon mit 393 Punkten ist das fast die ganze Flaeche. Wer sie schliessen
   wollte, fand kaum etwas, wohin er tippen konnte, und das Kreuz oben rechts
   ist der einzige verbleibende Weg. Jetzt bleibt links und oben so viel
   Seite stehen, dass ein Tipp daneben moeglich und sichtbar ist.

   Dazu ein leichter Schleier ueber der Seite: Er sagt, dass die Klappe
   obenauf liegt, und macht den Tipp daneben zur erwartbaren Geste. Er liegt
   unter der Klappe (z-index 57 gegen 58) und ueber allem anderen. */
@media(max-width:700px){
  .hf-panel{
    width:min(320px, calc(100vw - 76px));
    max-height:min(54vh, 430px);
  }
  html.hf-offen body::after{
    content:"";
    position:fixed; inset:0; z-index:44;
    background:rgba(28,39,51,.22);
    animation:hf-schleier .22s ease-out both;
  }
  @keyframes hf-schleier{from{opacity:0}to{opacity:1}}
}
@media(max-width:700px) and (prefers-reduced-motion:reduce){
  html.hf-offen body::after{animation:none}
}

/* ZURUECK IN DEN KNOPF (20.9.2026)

   Das Aufgehen hatte eine Bewegung, das Zugehen nicht - die Klappe war in
   einem Bild weg. Sie faltet sich jetzt dorthin zurueck, wo sie herkam:
   derselbe Drehpunkt unten rechts, nur kuerzer als beim Oeffnen (0,34 statt
   0,46 s). Zugehen darf schneller sein als Aufgehen; man sieht ohnehin schon
   woandershin, und eine lange Bewegung fuehlt sich dann wie Warten an.

   helfer.js haelt die Klappe genau diese 0,34 s sichtbar und versteckt sie
   danach. Aendert sich die Zahl hier, muss ZU_MS dort mit. */
.hf-panel.hf-schliesst{
  /* Gleichmaessig ein- und ausblendend (wie beim Schliessen der Suche).
     --kurve-weich legt 70 % des Weges im ersten Drittel zurueck - beim
     Zugehen sah das aus wie ein Sprung, gemessen: Deckkraft 0,23 nach 94 ms
     von 340. */
  animation:hf-falten .34s cubic-bezier(.65,0,.35,1) both;
  pointer-events:none;
}
.hf-panel.hf-schliesst > *{animation:none}
@keyframes hf-falten{
  from{transform:none;opacity:1}
  to  {transform:scale(.88) translateY(10px);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .hf-panel.hf-schliesst{animation:none;opacity:0}
}
.hf-panel:not([hidden]) > *{
  animation:hf-nachruecken .3s var(--kurve-weich,ease) both;
}
.hf-panel:not([hidden]) > *:nth-child(1){animation-delay:.07s}
.hf-panel:not([hidden]) > *:nth-child(2){animation-delay:.12s}
.hf-panel:not([hidden]) > *:nth-child(3){animation-delay:.16s}
.hf-panel:not([hidden]) > *:nth-child(4){animation-delay:.16s}

.hf-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1.5px solid var(--ink,#1C2733);
  font-size:14.5px;
}
.hf-zu{
  border:0; background:none; cursor:pointer; padding:4px 6px;
  font-size:22px; line-height:1; color:var(--ink-soft,#5B6874);
  min-width:32px; min-height:32px;
}
.hf-zu:hover{color:var(--stamp,#A62B22)}

.hf-feld{display:block;padding:12px 14px 0}
.hf-vb{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.hf-feld input{
  width:100%; box-sizing:border-box;
  /* 16px ist keine Geschmacksfrage: Darunter zoomt iOS beim Antippen in das
     Feld hinein, und der Besucher steht ploetzlich in einer vergroesserten
     Seite, aus der er von Hand wieder herausfinden muss. */
  font-size:16px; font-family:inherit;
  padding:9px 10px; min-height:44px;
  border:1.5px solid var(--rule,#C9CCC3); background:#fff; color:var(--ink,#1C2733);
}
.hf-feld input:focus{border-color:var(--ink,#1C2733);outline:none}

/* DIE KLAPPE SPRINGT NICHT MEHR (8.9.2026, abends)

   Die Trefferliste war so hoch wie ihr Inhalt. Bei jedem Buchstaben wurde die
   Auswahl kleiner, die Liste kuerzer, und weil die Klappe ueber dem Knopf
   haengt und nach oben waechst, wanderte ihre Oberkante nach unten. Das sah
   nicht nur unruhig aus - es zog der Klappe den Zeiger unter dem Rand weg und
   liess sie zugehen, mitten im Wort. Siehe helfer.js, gehalten().

   Die Mindesthoehe ist die Hoehe der fuenf Startvorschlaege. Damit steht die
   Klappe vom Aufgehen an ruhig, und der Rest der Bewegung findet INNEN statt,
   wo er hingehoert. */
.hf-liste{overflow-y:auto; padding:12px 14px 4px; flex:1; min-height:216px}
.hf-hinweis,.hf-leer{
  margin:0 0 10px; font-size:13.5px; line-height:1.55; color:var(--ink-soft,#5B6874);
}
.hf-vorschlag{list-style:none;margin:0;padding:0}
.hf-vorschlag li{margin:0 0 6px}
.hf-vorschlag button{
  width:100%; text-align:left; cursor:pointer;
  font-family:inherit; font-size:13.5px; line-height:1.4;
  padding:9px 11px; min-height:40px;
  background:var(--tint,#E8EAE4); color:var(--ink,#1C2733);
  border:1px solid var(--rule,#C9CCC3);
  transition:border-color .13s var(--kurve,ease), background .13s var(--kurve,ease);
}
.hf-vorschlag button:hover{border-color:var(--ink,#1C2733);background:#fff}

/* ---------- Vorschlaege beim Tippen ----------
   Wie die Suche oben: erst die Fragen als Zeilen, und die erste steht offen
   da. Wer die Antwort schon sieht, muss nicht klicken; wer eine andere
   meint, sieht sie daneben stehen, statt sie zu erraten. */
.hf-zeile{
  width:100%; text-align:left; cursor:pointer; display:block;
  font-family:inherit; font-size:13.5px; line-height:1.4; font-weight:600;
  color:var(--ink,#1C2733); background:none;
  border:0; border-bottom:1px dotted var(--rule,#C9CCC3);
  padding:10px 22px 10px 2px; min-height:40px; position:relative;
  transition:color .13s var(--kurve,ease), padding-left .18s var(--kurve,ease);
}
.hf-zeile::after{
  content:"+"; position:absolute; right:4px; top:9px;
  font-family:var(--mono,ui-monospace,monospace); font-weight:400;
  font-size:16px; color:var(--stamp,#A62B22);
}
.hf-zeile[aria-expanded="true"]::after{content:"\2013"}
.hf-zeile:hover{color:var(--stamp,#A62B22);padding-left:6px}
.hf-zeile mark{background:none;color:var(--stamp,#A62B22);font-weight:700}
/* Ausdruecklich, obwohl [hidden] hier von selbst greift: Diese Regel setzt
   kein display, das Standardblatt also nicht ueberstimmt. Nach dem Fehler an
   der Klappe heute frueh steht es trotzdem da - eine Zeile gegen eine
   Fehlerklasse, die einmal 51 Seiten getroffen hat. */
.hf-antwort[hidden]{display:none}
.hf-antwort{padding:2px 2px 12px;border-bottom:1px dotted var(--rule,#C9CCC3)}
.hf-antwort p{
  margin:0 0 7px; font-size:13.5px; line-height:1.6;
  color:var(--ink-soft,#5B6874); text-wrap:pretty;
}
.hf-antwort a{
  font-size:12.5px; font-weight:600; color:var(--stamp,#A62B22);
  text-decoration:none; letter-spacing:.02em;
}
.hf-antwort a:hover{text-decoration:underline}

.hf-treffer{margin:0 0 14px;padding:0 0 12px;border-bottom:1px dotted var(--rule,#C9CCC3)}
.hf-treffer:last-child{border-bottom:0}
.hf-treffer h3{
  margin:0 0 5px; font-size:14px; line-height:1.35; font-weight:600;
  color:var(--ink,#1C2733); text-wrap:balance;
}
.hf-treffer p{
  margin:0 0 7px; font-size:13.5px; line-height:1.6;
  color:var(--ink-soft,#5B6874); text-wrap:pretty;
}
.hf-treffer a{
  font-size:12.5px; font-weight:600; color:var(--stamp,#A62B22);
  text-decoration:none; letter-spacing:.02em;
}
.hf-treffer a:hover{text-decoration:underline}

.hf-fuss{
  margin:0; padding:9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--rule,#C9CCC3);
  font-size:11.5px; line-height:1.5; color:var(--ink-soft,#5B6874);
  background:var(--tint,#E8EAE4);
}
.hf-fuss a{color:var(--ink,#1C2733)}

/* ---------- Wo die Ergebnisleiste steht, rueckt der Knopf hoch ----------
   Im Werkzeug klebt unterhalb von 980 Punkten eine Leiste mit dem Ergebnis am
   unteren Rand. Sie ist 51 Punkte hoch, gemessen bei 320 wie bei 390 Punkten.
   Der Helfer darf sie nicht verdecken - es ist die Zahl, wegen der jemand
   hier ist.

   :has() faengt genau den Fall: Die Leiste traegt [hidden], solange es nichts
   zu zeigen gibt. Ein Browser ohne :has() ueberliest die Regel; dann steht
   der Knopf neben der Leiste statt darueber, was auf einem schmalen Schirm
   eng, aber nicht falsch ist. */
@media(max-width:980px){
  body:has(#mobilbon:not([hidden])) .hf{
    bottom:calc(51px + 12px + env(safe-area-inset-bottom, 0px));
  }
}

/* Auf schmalen Schirmen gibt der Knopf sein Wort auf, damit er nicht ueber
   den Text ragt. Die Klappe nahm hier frueher die volle Breite - seit dem
   20.9.2026 nicht mehr: Wer sie schliessen will, braucht eine Flaeche
   daneben, auf die er tippen kann. Die Breite kommt aus der Regel fuer
   700 px darueber; hier bleibt nur der linke Rand etwas schmaler. */
@media(max-width:420px){
  .hf{right:12px;bottom:12px}
  .hf-panel{width:min(320px, calc(100vw - 68px))}
  .hf-wort{display:none}
  .hf-knopf{padding:11px 13px}
}

/* Wer sein Betriebssystem auf ruhige Oberflaechen gestellt hat, bekommt die
   Klappe ohne Anlauf - aber vollstaendig. Kein Ausblenden, kein halber Weg. */
@media(prefers-reduced-motion:reduce){
  .hf-panel:not([hidden]),
  .hf-panel:not([hidden]) > *{animation:none}
  .hf-knopf:hover .hf-punkt,
  .hf-knopf:focus-visible .hf-punkt{animation:none}
  .hf-knopf,.hf-wort{transition:none}
}

@media print{ .hf{display:none !important} }


/* ============================================================
   TEIL 15 · DAS BAND UNTER DER LEISTE (8.9.2026)
   ------------------------------------------------------------

   Das Fristband sass ueber der Leiste, am oberen Bildschirmrand: dunkler
   Balken, fetter Text, kein Schliesskreuz, fixiert. Das sind vier von vier
   Merkmalen, an denen ein Nutzer ein Cookie-Banner erkennt - und die erste
   Handlung, die die Seite ausloeste, war der Griff zum Wegklicken.

   Gemessen bei 390x844 vorher:

       Kopfzone fixiert (Band + Leiste)   130px  =  15 % des Schirms
       davon Band                          74px  (drei Zeilen)

   Nachher: Leiste 56px + Band 34px = 90px. Drei Aenderungen brechen das
   Muster, ohne die Botschaft aufzugeben:

     1. Es sitzt UNTER der Logozeile. Damit ist es Teil der Seite und nicht
        etwas, das darueber liegt.
     2. Es ist einzeilig. Was nicht in die Zeile passt, faellt weg statt
        umzubrechen.
     3. Es ist ein Link auf die Fristsektion. Ein Banner ist nie ein Link -
        das ist der Unterschied, den ein Nutzer am schnellsten merkt.

   Die alte Fassung mit <div class="band"><div class="wrap"> bleibt in den
   eingebetteten Style-Bloecken der Seiten stehen; sie greift nicht mehr,
   weil das Band jetzt ein <a> ist. Die Regeln hier stehen bewusst nach
   TEIL 4 und TEIL 10 - bei gleicher Spezifitaet entscheidet die
   Reihenfolge.
   ============================================================ */

a.band{
  display:block;
  background:var(--ink,#1C2733);
  color:var(--paper,#FCFCFA);
  font-family:var(--sans);
  font-size:13px;
  line-height:1;
  text-decoration:none;
  border-bottom:1px solid rgba(252,252,250,.14);
}
a.band:hover{background:#16202B}
a.band .wrap{
  display:flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding-top:0;
  padding-bottom:0;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow:hidden;
}
a.band .punkt{align-self:center}
a.band b{font-weight:600}
a.band .satz{overflow:hidden;text-overflow:ellipsis}
a.band .zaehler{font-family:var(--mono);font-size:12.5px;color:#E0736A;flex:none}
a.band .rest{color:#9FADB9;overflow:hidden;text-overflow:ellipsis}
a.band .pfeil{margin-left:auto;color:#9FADB9;font-family:var(--mono);flex:none}

/* Auf schmalen Geraeten bleibt Datum und Zaehler. Die Folge steht dort im
   Beleg daneben ("ohne Abrechnung bis 31.12. --- 0,00 EUR"), also nicht
   zweimal - aber auch nie nur ein Datum ohne Folge irgendwo auf der Seite. */
@media(max-width:900px){
  a.band .rest{display:none}
}
@media(max-width:560px){
  a.band{font-size:12.5px}
  a.band .wrap{gap:8px}
  a.band .pfeil{display:none}
}
@media print{ a.band{display:none !important} }


/* ============================================================
   TEIL 16 · DREI GRUPPEN STATT ZEHN PUNKTEN (8.9.2026)
   ------------------------------------------------------------

   Zehn Hauptpunkte und vierzig Links im Kopf, fuer ein Produkt, das eine
   Sache tut. Jetzt drei Klappfelder - Produkt, Wissen, Ueber - und der
   Handlungsknopf. Die einzelnen Ratgeber- und Frageseiten stehen auf ihren
   Uebersichtsseiten, die aus jedem Feld verlinkt sind; sie stehen nicht
   mehr auf jeder der 51 Seiten im Kopf.

   Zwei neue Bausteine im Klappfeld:

     li.kopfzeile   Zwischenueberschrift ohne Link ("Weitere Werkzeuge").
     li.hebt        Der eine Eintrag, auf den es ankommt - rot und oben.
   ============================================================ */

li.klapp > ul.unter > li.kopfzeile{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft,#5B6874);
  padding:11px 16px 4px;
  margin-top:4px;
  border-top:1px solid var(--rule,#C9CCC3);
  white-space:nowrap;
}
li.klapp > ul.unter > li.hebt{
  border-bottom:1px solid var(--rule,#C9CCC3);
  margin-bottom:4px;
  padding-bottom:4px;
}
li.klapp > ul.unter > li.hebt > a{
  color:var(--stamp,#A62B22);
  font-weight:700;
}

/* Im Burgermenue sind die Untereintraege eingerueckt (margin-left:22px am
   <a>). Die Zwischenueberschrift ist kein <a> und braucht den Einzug
   deshalb selbst - sonst haengt sie links vor der Liste, die sie ueberschreibt. */
@media(max-width:1120px){
  .nav li.klapp > ul.unter > li.kopfzeile{
    margin-left:22px;
    padding:14px 16px 4px 18px;
    border-top:0;
  }
}
@media(max-width:1000.98px){
  .kopf li.klapp > ul.unter > li.kopfzeile{
    margin-left:22px;
    padding:14px 16px 4px 18px;
    border-top:0;
  }
}


/* ============================================================
   TEIL 17 · FLACHE LEISTE, VOLLBILDMENUE (8.9.2026, abends)
   ------------------------------------------------------------

   TEIL 16 hat zehn Punkte in drei Klappfelder gepackt - Produkt, Wissen,
   Ueber. Das war die falsche Antwort auf die richtige Frage. Keines der drei
   Woerter ist eines, das jemand sucht; gesucht werden "Preise", "Beispiel",
   "Ueber uns". Dazu drei Fehler, die erst im Betrieb auffielen:

     - Das Klappfeld ging ueber Band und Vorspann auf, also ueber die zwei
       Elemente, die die Seite tragen.
     - Beschriftung und Pfeil waren zwei getrennte Ziele. Mit der Maus faellt
       das nicht auf, mit dem Finger schon: Wer "Preise" wollte, landete auf
       der Werkzeugseite.
     - Im Burgermenue waren es drei Tipps fuer einen Link - ein Akkordeon im
       Akkordeon.

   Jetzt sechs Woerter nebeneinander, keine Klappen. Was nicht in die Zeile
   passt, steht im Vollbildmenue und in der Fusszeile, nicht hinter einem
   Pfeil.
   ============================================================ */

/* ---------- Die Zeile (ab 1001px) ---------- */
@media(min-width:1001px){
  .nav ul{display:flex;gap:18px}
  .nav ul > li.nurmobil{display:none}
}

/* ---------- Das Vollbildmenue (bis 1000px) ----------
   Vorher war das Menue nur so hoch wie sein Inhalt, und die Ueberschrift
   schien darunter durch - das sieht aus wie ein Fehler, nicht wie ein Menue.
   Jetzt deckt es die Seite vollstaendig ab, scrollt selbst und haelt die
   Bewegung bei sich (overscroll-behavior). */
@media(max-width:1000.98px){
  .nav.open .wrap{
    position:fixed;inset:0;z-index:90;
    display:flex;flex-direction:column;align-items:stretch;
    height:100vh;height:100dvh;
    max-width:none;
    padding:0 0 32px;
    gap:0;
    background:var(--paper,#FCFCFA);
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  }
  /* NICHTS SCHRUMPFT (16.9.2026)
     Gemeldet an einem iPhone-Bildschirmfoto: die Schrift im Balken sass
     unten an. Ursache war nicht die Schrift, sondern der Balken selbst: In
     einer Spalte aus Flex-Elementen schrumpfen alle Kinder, sobald der Inhalt
     hoeher ist als der Schirm - und auf dem Telefon ist er das, sobald die
     Adresszeile Platz nimmt. Nachgestellt bei 402 x 620: Der Balken fiel von
     52,3 auf 40 px (die Untergrenze aus min-height), und das fehlende Polster
     fehlte unten.
     Mit flex-shrink:0 behalten alle Kinder ihre Hoehe; zu viel Inhalt wird
     gescrollt, wofuer overflow-y ohnehin da ist. */
  .nav.open .wrap > *{flex-shrink:0}

  /* SCHLIESSEN MIT UEBERGANG (16.9.2026) - Ablauf in menue.js.
     Solange .schliesst gesetzt ist, bleibt das Vollbild stehen und blendet
     aus. Die Kurve beginnt und endet langsam (ease-in-out): Die weiche Kurve
     des Oeffnens hat nach 0,12 s schon drei Viertel geschafft - beim
     Schliessen wirkte das wie ein Zuschnappen. Dieselben 0,5 s und dieselbe
     Kurve wie beim Schliessen der Suche (suche.js). */
  .nav.open.schliesst .wrap{
    opacity:0;transform:translateY(-8px);
    transition:opacity .5s cubic-bezier(.65,0,.35,1), transform .5s cubic-bezier(.65,0,.35,1);
  }
  .nav.open.schliesst .burger span:nth-child(1),
  .nav.open.schliesst .burger span:nth-child(3){transform:none}
  .nav.open.schliesst .burger span:nth-child(2){opacity:1}
  .nav.zugegangen .wrap{animation:kopfleiste-zurueck .3s ease-out}
  @keyframes kopfleiste-zurueck{from{opacity:0}to{opacity:1}}
  /* Reihenfolge im Menue: Wortzeichen, Handlungsknopf, Liste. Im Quelltext
     steht der Knopf hinter der Liste - dort gehoert er hin, wenn die Zeile
     eine Zeile ist. */
  .nav.open .wrap > .logo{order:1;padding:18px 22px;font-size:18px;
    border-bottom:1px solid var(--rule,#C9CCC3)}
  /* SCHRIFT MITTIG IM BALKEN (16.9.2026)
     Gemeldet: die Schrift sitzt zu tief. Nachgemessen an den gezeichneten
     Pixeln (Schriftzug in eine Zeichenflaeche gerendert, 6-fach, Tintenzeilen
     gesucht): ueber dem Wort 20,67 px Luft, darunter 17,50 - die Tinte lag
     1,6 px unter der Mitte des Balkens.

     Das liegt an der Schrift, nicht am Kasten: Der Zeilenkasten steht mittig,
     aber Plex Sans Condensed meldet 15 px Oberlaenge zu 4 px Unterlaenge. Der
     Browser richtet danach aus, das Auge dagegen nach dem, was es sieht.
     Also drei Pixel Polster von oben nach unten umgehaengt (14/14 -> 12,5/15,5),
     das hebt den Schriftzug um 1,5 px. Die Hoehe des Balkens bleibt gleich. */
  .nav.open .wrap > .btn,
  .nav.open .wrap > .cta{order:2;margin:22px 22px 6px;text-align:center;
    padding:12.5px 20px 15.5px;font-size:15px}
  .nav.open .wrap > .rechts{order:2;margin:22px 22px 6px;text-align:center}
  .nav.open .wrap > ul{order:3}
  /* Die Lupe waere hier ein zweiter Weg zu denselben elf Zielen. */
  .nav.open .wrap > .suchknopf{display:none}

  .nav.open ul{
    display:flex;flex-direction:column;
    position:static;inset:auto;
    max-height:none;overflow:visible;
    background:none;border:0;box-shadow:none;
    padding:6px 0 0;margin:0;
    text-transform:none;letter-spacing:0;font-size:17px;font-weight:600;
  }
  .nav.open ul > li{width:100%}
  .nav.open ul > li > a{
    display:block;padding:14px 22px;min-height:44px;box-sizing:border-box;
    color:var(--ink,#1C2733);
  }
  .nav.open ul > li > a:hover{color:var(--stamp,#A62B22)}

  /* Zwischenueberschrift ohne Link. */
  .nav.open ul > li.kopfzeile{
    font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--ink-soft,#5B6874);
    padding:22px 22px 4px;margin-top:10px;
    border-top:1px solid var(--rule,#C9CCC3);
  }
  /* Die Zeile mit den drei kleinen Zielen. */
  .nav.open ul > li.klein{
    padding:18px 22px 0;margin-top:10px;
    border-top:1px solid var(--rule,#C9CCC3);
    font-size:14px;font-weight:400;
  }
  .nav.open ul > li.klein > a{
    display:inline;padding:0;min-height:0;color:var(--ink-soft,#5B6874);
  }
  .nav.open ul > li.klein > a + a::before{content:"\00a0\00b7\00a0";color:var(--rule,#C9CCC3)}

  /* Das Band als letzte Zeile: Es haengt sonst hinter dem Menue und die
     Frist waere fuer die Dauer des Menues verschwunden. */
  .nav.open ul > li.frist{margin-top:auto;padding-top:22px}
  /* width:auto (16.9.2026): .nav ul a traegt width:100%, hier kommen 22 px
     Rand links und rechts dazu - zusammen 44 px mehr als das Fenster. Das
     Menue liess sich dadurch seitlich schieben. */
  .nav.open ul > li.frist > a{
    display:flex;align-items:center;gap:9px;width:auto;
    margin:0 22px;padding:11px 14px;
    background:var(--ink,#1C2733);color:var(--paper,#FCFCFA);
    font-size:13px;font-weight:400;white-space:nowrap;
  }
  .nav.open ul > li.frist b{font-weight:600}
  .nav.open ul > li.frist .zaehler{font-family:var(--mono);font-size:12.5px;color:#E0736A}
  .nav.open ul > li.frist .punkt{
    width:9px;height:9px;border-radius:50%;background:#E0736A;flex:none;
  }

  /* Das Kreuz sitzt da, wo der Burger war. */
  .nav.open .burger{position:fixed;top:14px;right:18px;z-index:91;width:34px;height:34px}
}


/* ---------- Der Puls bleibt im Band ----------
   Gemeldet: ein roter Fleck, der oben links durch das Menue scheint. Der
   Punkt waechst auf das 2,1-fache und traegt einen Ring von 9px; zusammen
   ist er hoeher als das Band, das ihn haelt. */
a.band{overflow:hidden}

/* Das reicht aber nicht, und der Grund ist nicht offensichtlich: Ein Element
   mit laufender transform-Animation bekommt vom Browser eine eigene
   Zeichenebene und liegt damit ueber Nachbarn, die keine haben - auch ueber
   einem position:fixed mit z-index 90. Nachgemessen bei geoeffnetem Menue:

       elementFromPoint(27, 18)  ->  SPAN.punkt

   Also nicht stapeln, sondern wegnehmen: Solange das Menue offen ist, ist
   das Band nicht zu sehen. Es fehlt dabei nichts - die Fristzeile steht als
   letzte Zeile im Menue, mit demselben Zaehler. */
@media(max-width:1000.98px){
  .nav.open + a.band{display:none}
}


/* ---------- Der Pfeil gehoert an den Satz ----------
   Er stand mit margin-left:auto am rechten Rand, auf einem breiten Schirm
   800px vom letzten Wort entfernt. Ein Pfeil, der nichts beruehrt, zeigt
   auch nichts an. */
a.band .pfeil{margin-left:6px}

/* ---------- Das Band steht mittig (14.9.2026) ----------
   Vorgabe des Betreibers: "er muss mittig immer sein". Bis hierher stand der
   Satz linksbuendig im Satzspiegel.

   "safe center" nach "center": Wird der Inhalt breiter als das Band, wuerde
   reines center ihn nach BEIDEN Seiten abschneiden - der Punkt und der
   Anfang des Satzes waeren weg. safe faellt dann auf den Anfang zurueck.
   Browser ohne safe verwerfen die zweite Zeile und behalten die erste; der
   Fall tritt ohnehin kaum ein, weil .satz schrumpft (overflow:hidden) und
   .rest unter 1060 px entfaellt. */
a.band .wrap{justify-content:center;justify-content:safe center}
.nav.open ul > li.frist > a{justify-content:center;justify-content:safe center}

/* ============================================================================
   TEIL 18 - ZWEI SCHRIFTEN STATT DREI (14.9.2026)

   IBM Plex Mono ist entfallen. Sie trug auf der Erklaerseite 26 Zeichen fuer
   93 KB und im Werkzeug 98 Zeichen fuer 139 KB. Das einzige sachliche Argument
   fuer sie waeren gleich breite Ziffern in Betragsspalten - die hat Plex Sans
   Condensed von Haus aus (gemessen: "1111111111" und "8888888888" gleich breit).

   --mono heisst weiter so, weil der Name die Rolle meint (Schrittnummern,
   Kicker, Zaehler, Bon), nicht die Schrift. Jede Seite setzt ihn in ihrem
   eigenen :root auf var(--sans). Hier steht bewusst KEINE Regel dafuer: Auf
   16 Seiten folgt nach global.css noch ein Inline-Style, eine :root-Regel an
   dieser Stelle wuerde dort ueberschrieben und nur scheinbar gelten.
   ============================================================================ */

/* ============================================================================
   TEIL 19 - LOGO MIT BILDMARKE (14.9.2026)

   Das Blatt mit der roten Ecke steht vor dem Wortzeichen, in der Kopfleiste
   und im Fuss. Die Wortmarke bleibt echter Text; nur die Bildmarke ist SVG,
   inline, damit sie ueber currentColor die Schriftfarbe erbt.

   WARUM SPEZIFITAET STATT REIHENFOLGE
   Der Auftrag sah vor, die Regeln in jede Seite "direkt nach der .logo-Regel"
   zu setzen. Das waere an zwei Stellen still gescheitert:
     - Weiter hinten in denselben Seiten steht @media(max-width:560px)
       {.logo{font-size:14px}}. Gleiche Spezifitaet, spaeter im Stil - sie
       haette bei 360 px das font-size:0 der Stufe 3 ueberschrieben.
     - Weiter oben in dieser Datei steht bei <=560 px
       .nav .logo{display:inline-block}. Das haette das inline-flex geschlagen
       und die Marke aus der Mitte geschoben.
   Dazu kommt: Auf 16 Seiten folgt nach global.css noch ein Inline-Stil. Die
   Selektoren hier sind deshalb so gebaut, dass sie unabhaengig von der
   Reihenfolge gewinnen (.nav a.logo = 0,2,1 gegen .nav .logo = 0,2,0 und
   .nav a = 0,1,1).

   FARBEN
   Wortzeichen in --ink, wie im Markenpaket (logo-voll.svg: #1C2733). Bisher
   stand es in --ink-soft, weil .nav a die .logo-Regel ueberstimmte - das war
   Zufall, keine Entscheidung. Auf dem dunklen Fuss gelten die Farben der
   gelieferten Invers-Fassung (logo-marke-invers.svg): Blatt ohne Fuellung,
   Ecke #E0736A (auf der Seite schon im Fristband im Einsatz), Zeilen
   --ink-soft. Die Stufen 2 und 3 gelten nur in der Kopfleiste; im Fuss ist
   Platz fuer den ganzen Namen.
   ============================================================================ */
/* Abstand als margin an der Marke, NICHT als gap: In Flexbox gilt gap zwischen
   allen Kindern - auch zwischen "hausgeld", "pilot" und ".de", die als
   eigene Flex-Elemente zaehlen. Mit gap:8px (so im gelieferten Snippet) stand
   da "hausgeld  pilot  .de". Gefunden am Bildschirmfoto, nicht an der Messung:
   innerText setzt die Stuecke luckenlos zusammen. */
.nav a.logo{display:inline-flex;align-items:center;color:var(--ink)}
.logo-mark{width:22px;height:22px;flex:none;display:block;margin-right:8px}
.logo-mark .ecke{fill:var(--stamp)}
.logo-mark .zeile{fill:var(--rule)}
footer div.logo{display:flex;align-items:center}
footer .logo-mark .blatt{fill:none}
footer .logo-mark .ecke{fill:#E0736A}
footer .logo-mark .zeile{fill:var(--ink-soft)}
/* DER GANZE NAME AUCH AUF DEM TELEFON (15.9.2026)

   Bis hierhin stand bei <=560 px nur "pilot.de" und bei <=360 px nur die
   Marke. Gemeldet am Bildschirmfoto eines iPhones: "links oben steht nur
   pilot". Ein halber Name ist kein Name.

   Statt eines Teils wird jetzt die Schrift kleiner, stufenlos mit der Breite.
   Gerechnet an Plex Sans Condensed bold: Marke 20 + 8 Abstand, Text 6,98 px
   je Pixel Schriftgroesse. Rechts daneben stehen bei 381-560 px Lupe (bis 44),
   Handlungsknopf (132), Menue (32), drei Abstaende (30) und 32 Polster;
   ueber 380 px bleibt fuer das Logo also 100vw - 270px. Die Formel zieht
   305px ab - 35 px Reserve fuer andere Handlungsknoepfe und Rundung.
   Unter 380 px faellt die Lupe weg (siehe oben), dort reicht 100vw - 240px.

   Die Rechnung gilt nur mit den Abstaenden, die TEIL 1 fuer <=480 px
   vorsieht. Nachgemessen standen auf der Startseite 14 statt 10 (ihr
   Inline-Stil kommt nach global.css) und vor der Lupe 8 px Rand aus
   suche.js - 20 px mehr, der Menueknopf ragte ins Polster. "body" davor
   gewinnt unabhaengig von der Reihenfolge. */
@media(max-width:480px){
  body .nav .wrap{gap:10px}
  body .nav .suchknopf{margin-left:0}
}
@media(max-width:380px){
  body .nav .wrap{gap:8px}
}
@media(max-width:560px){
  .nav a.logo{font-size:clamp(11px, calc((100vw - 305px) / 7), 14px)}
  .nav .logo-mark{width:20px;height:20px}
}
@media(max-width:380px){
  .nav a.logo{font-size:clamp(10.5px, calc((100vw - 240px) / 7), 14px)}
}

/* LUPE QUADRATISCH (15.9.2026)
   suche.js setzt 34 x 34. Auf dem Telefon heben zwei Regeln die Knoepfe an
   (min-height 40 bei <=620 px, auf Beruehrungsgeraeten mancher Seiten 44),
   die Breite blieb 34 - ein stehendes Rechteck, in dem die Lupe schief sass.
   aspect-ratio uebertraegt die Mindesthoehe auf die Breite, gleich welche
   der beiden Regeln greift; der Knopf ist so hoch wie der Handlungsknopf
   daneben und genauso breit. */
.nav .suchknopf{width:auto;aspect-ratio:1/1}

/* 1000.98 STATT 1000 (16.9.2026)
   Klappmenue bis max-width:1000px, volle Leiste ab min-width:1001px - und
   dazwischen nichts. Ein Fenster kann einen Bruchteil breiter als 1000 px
   sein (Windows-Skalierung 125 %, Browser-Zoom). Gemessen bei 1000,x px:
   beide Abfragen falsch, die Kopfleiste zeigte Klapp- und Vollmenue
   zugleich, 689 px zu breit. Alle max-width:1000px sind deshalb 1000.98px,
   auf allen Seiten ausser dem MFH-Werkzeug (dort am 16.9. in Arbeit). */

/* KOPFLEISTE MIT SCROLLLEISTE (16.9.2026)
   Die volle Leiste erscheint ab 1001 px Fensterbreite (darunter das
   Klappmenue). Gemessen braucht sie aber 1030 px: Polster 22 + Logo 149 +
   sieben Punkte 548 mit sechs Abstaenden zu 12 + Lupe 34 + Handlungsknopf 141
   + drei Abstaende zu 14 + Polster 22. Unter Windows zieht die Scrollleiste
   16 px von der Fensterbreite ab - bei 1001 px bleiben 985, und der
   Handlungsknopf ragte auf allen Seiten bis 30 px hinaus (bis 1031 px Fenster).
   Die Media-Query zaehlt die Scrollleiste mit, die Seite nicht; an der Schwelle
   selbst zu drehen hiesse, sie in 53 Dateien zu aendern. Stattdessen in diesem
   schmalen Bereich engere Abstaende: 30 + 12 + 12 = 54 px Luft. */
@media(min-width:1001px) and (max-width:1060px){
  body .nav .wrap{gap:10px;padding-left:16px;padding-right:16px}
  body .nav .wrap > ul{gap:7px}
}
/* Im geoeffneten Vollbildmenue ist Platz: dort wieder der ganze Name. Die
   Schriftgroesse setzt .nav.open .wrap > .logo (TEIL 17). */
.nav.open .logo-lang{display:inline}
/* ... und der Abstand zur Marke, den Stufe 3 bei <=360 px wegnimmt. */
.nav.open .logo-mark{margin-right:8px}

/* WARUM HAUSGELDPILOT.DE? RAUS AUS DER LEISTE (18.9.2026)
   Der Punkt stand seit dem 17.9. als erster neben dem Logo und als einziger
   in der Stempelfarbe. Damit war der auffaelligste Punkt der Leiste
   derjenige, der vom Hauptweg wegfuehrt - und er sprach nur die Vermieter
   an, die bisher selbst rechnen. Er steht jetzt im Fuss (Spalte Produkt)
   und als eine Kleingedruckt-Zeile unter dem Preisblock der Startseite.
   Die Regeln .nav ul > li.warum > a sind mit ihm weggefallen.
   Der Punkt war 11 px breiter als der alte; bei 1001 px ragte der
   Handlungsknopf damit 14 px heraus (gemessen mit pruefakten/leiste.js).
   Ohne Sperrung sind es rund 20 px weniger - nur im engen Bereich, darueber
   bleibt die Leiste wie sie war. */
@media(min-width:1001px) and (max-width:1090px){
  body .nav .wrap > ul{letter-spacing:0}
}

/* FRISTBAND NACH JAHRESZEIT (17.9.2026)
   Von Januar bis September ist die Frist ein Argument, kein Alarm: eine
   schmale, ruhige Zeile mit dem Datum, ohne Zaehler und ohne roten Punkt.
   Ab Oktober wie bisher - dunkel, mit Zaehler. menue.js setzt die Klasse
   nach dem Datum (fristSaison); kein Cookie, kein Speicher. Dieselbe Klasse
   am body nimmt den Zaehlersatz im Schluss der Startseite mit. */
a.band.ruhig{background:var(--tint,#E8EAE4);color:var(--ink,#1C2733);border-bottom-color:var(--rule,#C9CCC3)}
a.band.ruhig:hover{background:#DFE2DB}
a.band.ruhig .wrap{height:30px}
/* Der pulsierende Punkt bleibt auch im ruhigen Band (Wunsch vom 17.9. abends). */
a.band.ruhig .zaehler,a.band.ruhig .rest{display:none}
a.band.ruhig .pfeil{color:var(--ink-soft,#5B6874)}
body.frist-ruhig .zaehlersatz{display:none!important}

/* KURZER KNOPF AUF DEM TELEFON (17.9.2026 abends)
   "Nebenkostenabrechnung erstellen" ist in der Kopfleiste 195 px breit und
   schob sich auf dem iPhone ueber das Logo. einbauen.py legt zwei Fassungen
   in den Knopf; unter 600 px steht die kurze. */
.nav .ctakurz{display:none}
@media(max-width:600px){
  .nav .ctalang{display:none}
  .nav .ctakurz{display:inline}
}
body.frist-ruhig .nav li.frist .punkt,body.frist-ruhig .nav li.frist .zaehler{display:none}