@font-face{font-family:"Fira Sans";src:url(/f/fira-sans-400.woff2)format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:"Fira Sans";src:url(/f/fira-sans-600.woff2)format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"Fira Sans";src:url(/f/fira-sans-700.woff2)format("woff2");font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:"Fira Sans Condensed";src:url(/f/fira-sans-cond-800.woff2)format("woff2");font-weight:800;font-display:swap;font-style:normal}
@font-face{font-family:FiraMono;src:url(/f/mono.woff2)format("woff2");font-weight:400;font-display:swap;font-style:normal}

:root{
  --ground:#0C131A; --ground-2:#131E28; --rule-dark:#25333F;
  --paper:#F2EFE8; --ink:#101820; --rule:#CFC9BC;
  --signal:#F4A020; --signal-ink:#8A5600;
  --dim-dark:#93A7B6; --dim:#5D6670;
  --measure:66ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--paper);
  /* Deckende Flaeche, DESIGN.md 16.09.2026: die Textur war als unruhiges
     Material wahrnehmbar, und eine halbtransparente Toenung darueber
     garantiert nicht denselben Kontrast wie der reine Farbwert. */
  background:var(--ground);
  font:400 17px/1.55 "Fira Sans",system-ui,sans-serif;
  font-feature-settings:"ss01";
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--signal);color:#241500}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
/* Auf Papier ist Bernstein 1,85:1 -- ein Fokusring, den man suchen muss.
   Dort traegt ihn die Tinte; auf der Nacht bleibt er Signal. */
.paper :focus-visible{outline-color:var(--ink)}
/* hyphens/overflow-wrap: die Schlagzeile waechst mit der Schriftgroesse des
   Nutzers (rem, so soll es sein) -- bei 200 %% passt "Rechtstexte" dann nicht
   mehr in eine 320px-Spalte und hat die Seite verbreitert. */
h1,h2{margin:0;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;letter-spacing:-.005em;line-height:1.0;text-wrap:balance;hyphens:auto;overflow-wrap:anywhere}
h1{font-size:clamp(2.4rem,6.4vw,4.6rem);margin-bottom:.9rem}
h2{font-size:clamp(1.5rem,3.2vw,2.2rem);margin-bottom:.6rem}
h3,h4{margin:0;font-weight:600;font-size:1.05rem;letter-spacing:-.005em;overflow-wrap:anywhere;hyphens:auto}
/* overflow-wrap: deutsche Komposita ("Umsatzsteuer-Identifikationsnummer")
   sind bei grosser Schrift breiter als eine Handyspalte. Greift nur, wenn ein
   Wort sonst nicht passt.
   anywhere und nicht break-word: beide brechen erst, wenn es sonst
   ueberlaeuft, aber nur anywhere senkt auch die min-content-Breite -- und
   die entscheidet, wie schmal eine Rasterspalte werden darf. Mit
   break-word blieb eine .head-Spalte 351px breit in 284px Platz
   (Audit 16.09.2026, 320px plus 200 % Textzoom). */
p{margin:0 0 1rem;max-width:var(--measure);overflow-wrap:anywhere}
a{color:inherit}
b,strong{font-weight:600}
.m{font-family:FiraMono,ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:.9em;letter-spacing:-.01em}

/* Der Seitenrand hat eine Untergrenze in px, nicht in rem: bei 200 %
   Textzoom waren 1.1rem = 35px links UND rechts, also 70px von 390px
   Bildschirm, und dem Inhalt blieben 320px. Ein Rand soll mit der Seite
   wachsen, nicht mit der Schriftgroesse (Audit 16.09.2026). */
.wrap{max-width:74rem;margin:0 auto;padding:0 clamp(18px,4vw,2.5rem)}
.dim{color:var(--dim-dark)}
.paper .dim{color:var(--dim)}
/* "Papier" ist die warme Lesefaeche, kein simuliertes Material. */
.paper{background:var(--paper);color:var(--ink)}
.pad{padding:clamp(3.2rem,7vw,6rem) 0}

/* Kopfleiste */
/* flex-wrap, damit die Navigation bei grosser Schrift unter die Wortmarke
   rutscht statt die Seite breiter zu machen (Abnahme 16.09.2026, 200 %
   Textzoom auf 390px). */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0;flex-wrap:wrap}
/* Die Wortmarke war mit 18,9px kleiner gesetzt als die Unterzeile darunter
   (20,8px) und nur 1,26x so gross wie ein Navigationslink — im Kopf war damit
   nicht erkennbar, was der Name und was das Menue ist. Sie waechst mit, aber
   gedeckelt: auf dem Handy faellt die H1 auf 38px, und eine Wortmarke, die
   dort mit der Schlagzeile gleichzieht, gewinnt einen Wettstreit, den sie
   nicht fuehren soll. */
.logo{display:inline-flex;align-items:center;text-decoration:none;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;letter-spacing:0;font-size:clamp(1.35rem,1.1rem + 0.85vw,1.66rem);
  /* 44px Trefferflaeche fuer die Wortmarke, ohne dass sie waechst: der
     negative Aussenabstand gibt den Innenabstand wieder her. */
  padding:.35rem 0;margin:-.35rem 0;min-height:44px}
.logo i{font-style:normal;font-weight:400;color:var(--dim-dark)}
.paper .logo i{color:var(--dim)}
.top nav{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.92rem}
/* Die Zeile bleibt so hoch, wie sie war: der Zuwachs geht nach oben und unten
   aus dem Textfluss heraus (negativer Aussenabstand), damit ein Daumen 44px
   trifft, ohne dass der Kopf der Seite waechst. */
.top nav a{color:var(--dim-dark);text-decoration:none;text-underline-offset:4px;padding:.72rem .4rem;margin:-.72rem 0}
.top nav a:hover{color:var(--paper);text-decoration:underline}
/* Auf Papier ist die Kopfnavigation dieselbe Regel mit der falschen Farbe:
   --dim-dark auf --paper sind 2,17:1 (uicheck, 16.09.2026). Betrifft jede
   simple()-Seite, deren ganzer Rumpf in .paper liegt -- Impressum,
   Datenschutz, Fehlerseiten. Derselbe Fehler wie bei .start > label > span
   am 08.09.2026: eine gedimmte Regel ohne Papier-Fassung. */
.paper .top nav a{color:var(--dim)}
.paper .top nav a:hover{color:var(--ink)}
/* Auf dem Handy blieb der Kopf bis 31.08.2026 ohne Navigation, bei 7.594px
   Seitenhoehe. Kein Hamburger fuer fuenf Anker: zwei bleiben stehen. */
@media(max-width:620px){.top nav a:not(.key){display:none}.top nav{gap:.3rem;font-size:.92rem}}

/* Eingabe */
.start{display:flex;gap:.8rem;margin-top:2.6rem;flex-wrap:wrap;min-width:0}
/* Der Statusabsatz des Nachweises (altcha.js) ist im Normalfall LEER -- er
   fuellt sich nur, wenn etwas schiefgeht. Als Flex-Kind zaehlte er trotzdem
   mit: 0 Pixel breit, unsichtbar, und der Abstand dahinter schob den einzigen
   Knopf der Seite um 12,8px nach rechts. Damit war die Handlung als einzige
   Kante im Hero nicht buendig mit H1, Schalter und Adressfeld -- auf dem
   Handy genauso. Ein leeres Element ist kein Element; und sobald es etwas zu
   sagen hat, bekommt es eine eigene Zeile statt eines Platzes neben dem
   Knopf. */
.start [data-altcha-hinweis]{flex:1 1 100%;margin:.4rem 0 0}
.start [data-altcha-hinweis]:empty{display:none}
/* Auf dem Handy nimmt die einzige Handlung die volle Spaltenbreite. Sie stand
   dort auf 249px in einer 358px breiten Spalte -- schmaler als das Feld
   darueber, das sie absendet, und mit einer rechten Kante, die zu nichts
   gehoert. Am Schreibtisch bleibt sie inhaltsbreit: dort ist eine Flaeche
   ueber die halbe Fensterbreite keine Handlung mehr, sondern ein Banner. */
@media(max-width:34rem){.start button{flex:1 1 100%;width:100%}}
/* Kurzes Handy: auf 320x568 lag der Startknopf bei y=576..634 -- das Feld war
   im ersten Bild, die Handlung dazu nicht (Audit 17.09.2026). Gespart wird an
   den Abstaenden, nicht an der Bedienung: Fliesstext, Beschriftungen und die
   44px-Flaechen bleiben, wie sie sind, die H1 gibt 0,2rem ab. Zusammen rund
   70px, und der Knopf steht ganz im Bild.
   Nur bis 360px: auf 390px passte er schon vorher (y=511..569 von 844). */
@media(max-width:360px){
  .top{padding:1rem 0}
  h1{font-size:2.2rem;margin-bottom:.5rem}
  .hero{gap:1.2rem}
  .start{margin-top:1.2rem}
}
/* Die Fehlermeldung unter den Befunden. Kein Kaufknopf, also kein Knopf:
   ein Textlink neben einem Feld, das leer bleiben darf. */
.melde{margin-top:2rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.melde p{flex:1 0 100%}
.melde input{flex:1 1 20rem;width:auto}

/* Nur die direkten Kinder: seit der Laenderschalter im Formular steht, gibt es
   dort Beschriftungen INNERHALB eines Labels, und "jedes span in einem label"
   hat sie absolut positioniert -- die Halbe des Schiebers war danach 35px
   breit und der Text schwebte darueber. */
.start > label{flex:1 1 100%;position:relative;display:block}
.start > label > span{position:absolute;left:0;top:-1.35rem;color:var(--dim-dark)}
/* Auf Papier hat diese Beschriftung nie ihre Farbe gewechselt: --dim-dark auf
   --paper sind 2,17:1, unter jeder Lesbarkeitsschwelle. Sichtbar erst im
   Bericht, wo das zweite Startformular in einer hellen Sektion steht -- die
   Startseite ist durchgehend dunkel, deshalb ist es nie jemandem aufgefallen.
   Jede andere gedimmte Regel dieser Datei hat ihre .paper-Fassung. */
.paper .start > label > span{color:var(--dim)}
.landkopf{margin:1.4rem 0 0}
.landkopf p{margin:.6rem 0 0;max-width:var(--measure)}

/* Der Laenderschalter. Ein Schieber, kein Auswahlfeld: der Unterschied
   zwischen oesterreichischem und deutschem Recht ist das Produkt, und ein
   Produktmerkmal steht nicht hinter einer aufklappbaren Voreinstellung.

   Zwei gleich breite Haelften und eine Flaeche, die sich bewegt. Kein
   Signalgelb -- die Signalfarbe heisst auf dieser Seite genau eine Sache
   ("Pruefung starten"), und ein Schalter startet nichts. Der aktive Zustand
   traegt Flaeche und Gewicht, keine Farbe.

   RADIUS 2PX, NICHT 999. Der erste Entwurf war eine Pille, und sie war das
   einzige runde Objekt auf einer Seite, deren eigene Regel "eckig, bewusst
   kein freundliches Rund" heisst (DESIGN.md). Sie las sich als
   zugekaufte Komponente. Dieselbe Mechanik in der Geometrie des Hauses:
   dieselben 2px wie Eingabefeld und Knopf, dieselbe Haarlinie.

   Und kleiner als das Adressfeld darunter. Er ist eine Einstellung, keine
   Handlung: 46px hoch gegen 58px, damit die Rangfolge stimmt und die helle
   Flaeche nicht den Kaufknopf ueberstrahlt. 44px Mindesthoehe bleibt.

   Die Radiofelder bleiben im Fokusfluss (unsichtbar, nicht display:none),
   sonst ist der Schieber mit der Tastatur nicht erreichbar. */
.landschalter{flex:1 1 100%;border:0;padding:0;margin:0 0 .9rem;min-width:0}
/* Die Frage ist kleiner als die Antwort: sonst wiegt die Beschriftung so viel
   wie die nicht gewaehlte Haelfte, und die liest sich dann nicht als Wahl. */
.landschalter legend,.landschalter .legende{padding:0;font-size:.95rem;color:var(--dim-dark);margin-bottom:.45rem;display:block}
.paper .landschalter legend,.paper .landschalter .legende{color:var(--dim)}
/* Gleich breite Spalten, nicht gleich breite Woerter: "Oesterreichisches
   Recht" ist laenger als "Deutsches Recht", und eine wandernde Flaeche, die
   mal die Haelfte und mal zwei Drittel deckt, ist kaputt. */
.landschalter .schalter{
  position:relative;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));
  width:22rem;max-width:100%;padding:3px;border:1px solid var(--rule-dark);border-radius:2px;overflow:hidden;
  background:var(--ground-2);isolation:isolate;
}
.paper .landschalter .schalter{border-color:var(--rule);background:rgba(16,24,32,.04)}
.landschalter input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
/* inset statt width: die Flaeche deckt exakt eine Haelfte, egal wie breit. */
.landschalter .knopf{position:absolute;inset:3px auto 3px 3px;width:calc((100% - 6px)/2);border-radius:1px;background:var(--paper);transition:transform .2s cubic-bezier(.16,1,.3,1);z-index:-1}
.paper .landschalter .knopf{background:var(--ink)}
.landschalter input[value=DE]:checked~.knopf{transform:translateX(100%)}
/* Wer reduzierte Bewegung eingestellt hat, bekommt den Zustand ohne die
   Fahrt. Drei andere Komponenten hatten die Regel, die zwei sichtbarsten
   Bewegungen der Seite nicht (Audit 16.09.2026). */
@media(prefers-reduced-motion:reduce){.landschalter .knopf{transition:none}}
.landschalter label,.landschalter a{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:.5rem .8rem;min-height:44px;font-size:.95rem;text-align:center;border-radius:1px;
  color:var(--dim-dark);cursor:pointer;text-decoration:none;transition:color .12s ease-out;
  /* Bei 200 % Textzoom ist "Deutschland" breiter als die halbe Handybreite und
     hat bis 16.09.2026 die ganze Seite auf 439px geschoben. Getrennt wird das
     Wort, nicht die Seite. */
  min-width:0;hyphens:auto;overflow-wrap:anywhere;
}
.paper .landschalter label,.paper .landschalter a{color:var(--dim)}
.landschalter input[value=AT]:checked~label[for$="-AT"],
.landschalter input[value=DE]:checked~label[for$="-DE"]{color:var(--ink);font-weight:700}
.paper .landschalter input[value=AT]:checked~label[for$="-AT"],
.paper .landschalter input[value=DE]:checked~label[for$="-DE"]{color:var(--paper)}
/* Der Fokusring liegt hier INNEN (-3px), weil .schalter overflow:hidden
   traegt und eine Kontur davor abschneiden wuerde. Innen heisst: er liegt auf
   der wandernden Kachel, und die traegt immer die Gegenfarbe ihrer Seite --
   auf der Nacht ist sie Papier, auf Papier ist sie Tinte. Deshalb steht die
   Farbe hier genau andersherum als beim globalen :focus-visible.
   Ohne das war Bernstein auf der hellen Kachel 1,85:1 (Audit 17.09.2026).
   Ein Radiofeld in einer Gruppe bekommt den Tastaturfokus immer als das
   gewaehlte -- die Kontur liegt also immer auf der Kachel, nie daneben. */
.landschalter input[value=AT]:focus-visible~label[for$="-AT"],
.landschalter input[value=DE]:focus-visible~label[for$="-DE"]{outline:2px solid var(--ink);outline-offset:-3px}
.paper .landschalter input[value=AT]:focus-visible~label[for$="-AT"],
.paper .landschalter input[value=DE]:focus-visible~label[for$="-DE"]{outline-color:var(--signal)}
@media(hover:hover){
  .landschalter label:hover{color:var(--paper)}
  .paper .landschalter label:hover{color:var(--ink)}
  .landschalter input[value=AT]:checked~label[for$="-AT"]:hover,
  .landschalter input[value=DE]:checked~label[for$="-DE"]:hover{color:var(--ink)}
  .paper .landschalter input[value=AT]:checked~label[for$="-AT"]:hover,
  .paper .landschalter input[value=DE]:checked~label[for$="-DE"]:hover{color:var(--paper)}
}
/* Im Bericht ist derselbe Schalter aus Links gebaut: er ruft denselben Bericht
   anders bewertet auf. Dort wandert nichts, weil die Seite neu laedt. */
.landschalter a.an{color:var(--ink);font-weight:700}
.paper .landschalter a.an{color:var(--paper)}
.landschalter .schalter:has(a.an) .knopf{display:block}
.landschalter .schalter:has(a:last-child.an) .knopf{transform:translateX(100%)}
.landschalter .schalter:has(a) .knopf{display:none}
.landschalter a:focus-visible{outline:2px solid var(--signal);outline-offset:-3px}

/* Die Beispielmail auf /preise. Sie bildet brandMail() aus mail.js nach und
   muss ihr aehnlich sehen, sonst zeigt sie etwas, das so nie ankommt: ein
   600px breiter Koerper auf Papier, darueber ein Nachtbalken mit der Wortmarke
   und einer 3px-Signalkante, der Text auf Weiss, der Fuss auf Papier.

   Die Mail selbst kennt weder unsere Schrift noch unsere Klassen -- sie traegt
   alles als style-Attribut und eine Systemschrift, weil eine @font-face-Regel
   eine fremde Datei nachlaedt. Deshalb steht hier dieselbe Systemschrift:
   naeher an der Wahrheit als unsere Fira. */
.mailvorschau{max-width:600px;background:var(--paper);border:1px solid var(--rule-dark);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif} /* impeccable-disable-line overused-font -- Systemschrift der echten Aenderungsmail (mail.js), nicht unsere Wahl */
.paper .mailvorschau{background:#fff;border-color:var(--rule)}
.mv-kopf{background:var(--ground);padding:20px 28px;font:700 19px/1 inherit;color:var(--paper);
  letter-spacing:-.2px;border-bottom:3px solid var(--signal)} /* impeccable-disable-line side-tab -- Kopf der echten Aenderungsmail (mail.js) */
.mv-kopf span{font-weight:400;color:var(--dim-dark)}
.mv-koerper{background:#FFF;padding:30px 28px 22px;color:var(--ink)}
.mv-koerper h3{font:700 24px/1.2 inherit;color:var(--ink);margin:0 0 16px;letter-spacing:0}
.mv-koerper p{font:400 16px/1.55 inherit;color:var(--ink);margin:0 0 14px;max-width:none}
.mv-koerper p.mv-fine{font-size:14px;line-height:1.5;color:var(--dim);margin:0 0 12px}
.mv-koerper hr{border:0;border-top:1px solid var(--rule);margin:6px 0}
/* Die farbige Kante links traegt in der Mail den Rang des Befunds. */
.mv-befund{border-left:3px solid #B0341C;padding-left:14px;margin:0 0 14px} /* impeccable-disable-line side-tab -- Vorschau der echten Aenderungsmail (mail.js), kein Kartenakzent */
.mv-befund b{display:block;font:600 16px/1.4 inherit;color:var(--ink)}
.mv-befund span{display:block;font:400 15px/1.5 inherit;color:var(--dim);padding-top:3px}
.mv-liste{font:400 16px/1.5 inherit;color:var(--ink);padding:0 0 6px 14px;border-left:2px solid var(--rule);margin-bottom:14px}
/* Kein <a>: das hier ist ein Bild einer Mail, kein Knopf. Wer ihn drueckt,
   erwartet den Bericht eines Shops, den es nicht gibt. */
/* #241500, nicht --signal-ink: die Mail nimmt fuer den Knopf ein dunkleres
   Braun als die Seite, und ein Nachbau, der die eigene Variable nimmt, weicht
   genau dort ab, wo man am ehesten hinsieht. */
.mv-knopf{display:inline-block;background:var(--signal);color:#241500;
  padding:14px 26px;font:600 16px/1.2 inherit;border-radius:2px;margin:26px 0 6px}
.mv-fuss{padding:18px 28px 34px;font:400 13px/1.6 inherit;color:var(--dim)}

/* Was nur in einer der beiden Rechtsordnungen gilt. Beide Fassungen stehen im
   Quelltext, eine ist sichtbar, und den Schalter oben liest das CSS selbst --
   kein JavaScript, keine zweite Seite, keine Weiterleitung.

   "body [data-land=...]" und nicht "[data-land=...]": das blanke Attribut hat
   dieselbe Spezifitaet wie eine Klasse, und .swap{display:grid} steht siebzig
   Zeilen weiter unten. Bei Gleichstand gewinnt das Spaetere -- die deutsche
   Fassung des Begriffsvergleichs stand deshalb IMMER da, sichtbar unter der
   oesterreichischen: zwoelf Zeilen statt sechs, die zweiten sechs die
   Umkehrung der ersten. Auf jeder Breite, seit dem 07.09.2026, und mir erst
   am 09.09. aufgefallen, weil ich die Startseite nie bis dorthin gescrollt
   hatte. Ein zusaetzliches Element im Selektor kostet nichts und stellt die
   Regel ueber jede Komponente, die spaeter ein display setzt. */
body [data-land="DE"]{display:none}
/* Zwei Absaetze, die aneinanderstossen, lesen sich als einer: der Satz ueber
   dem Feld traegt margin-bottom:0, damit der Link darunter anschliesst, und
   der laenderspezifische Absatz erbte dadurch keinen Abstand nach oben. */
body p[data-land]{margin-top:1rem}
body:has(input[name=land][value=DE]:checked) [data-land="DE"]{display:revert}
body:has(input[name=land][value=DE]:checked) [data-land="AT"]{display:none}

input[type=text],input[type=email]{
  width:100%;padding:.95rem 1rem;font:inherit;font-size:1.05rem;font-weight:400;color:var(--paper);
  background:var(--ground-2);border:1px solid var(--rule-dark);border-radius:2px;
}
/* Auf Papier ist das Nachtfeld ein schwarzes Loch: dieselbe Eingabe, andere
   Flaeche. Galt bisher nur fuer type=email, das Adressfeld im unteren
   Aufruf ist aber type=text und stand als Balken in der hellen Sektion. */
.paper input[type=email],.paper input[type=text]{background:#FFF;color:var(--ink);border-color:var(--rule)}

/* Platzhalter sind Text und werden gelesen: 5,1:1 auf dem Feld, 5,0:1 auf Papier. */
input::placeholder{color:#7C90A0}
.paper input::placeholder{color:#697077}
button{
  padding:.95rem 1.5rem;font:inherit;font-weight:600;font-size:1.02rem;
  background:var(--signal);color:#241500;border:1px solid var(--signal);border-radius:2px;cursor:pointer;
  transition:background .12s ease-out,color .12s ease-out;
}
button:hover{background:#FFB53E;border-color:#FFB53E}
a.btn{display:inline-block;padding:.95rem 1.5rem;font-weight:600;background:var(--signal);color:#241500;border-radius:2px;text-decoration:none}
a.btn:hover{background:#FFB53E}
/* Der Knopf ist die ersten ~150 ms gesperrt, bis der Spam-Schutz im Browser
   gerechnet hat. Er darf dabei nicht ausgegraut aussehen: ein grauer Knopf mit
   einem "rechnet…"-Text war das Erste, was ein Besucher sah, und die Seite las
   sich als haengend. Ohne JavaScript erklaert der noscript-Absatz darunter. */
button:disabled{cursor:default}

/* Tabellen statt Karten. Karten sind der bequeme Behälter, hier trägt das
   Raster die Aussage: jede Prüfung, und die eine Seite, auf der sie sichtbar ist. */
table{width:100%;border-collapse:collapse;margin:2rem 0 0;font-size:.95rem}
th{text-align:left;font-weight:600;font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:0 1rem .6rem 0;border-bottom:1px solid var(--ink)}
td{padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
/* .m verkleinert auf .9em, im Tabellensatz waeren das 13,97px — die einzige
   Stelle der Seite unter 14px. */
td.m{font-size:.95em}
tr td:last-child,tr th:last-child{padding-right:0}
/* screen, nicht all: seit das PDF ordentliche Seitenraender hat, ist sein
   Satzspiegel 174 mm ≈ 658 px — damit griff diese Handy-Regel im Druck und
   stellte die Tabelle "Gelesene Rechtstexte" untereinander statt nebeneinander.
   Das Umbrechen einer Tabelle in Zeilen ist eine Bildschirmhilfe, auf Papier
   ist die Spalte da. */
@media screen and (max-width:700px){
  table,thead,tbody,tr,td,th{display:block}
  /* Eine caption in einer Tabelle, die display:block ist, landet in einer
     anonymen Tabelle und faellt auf ihre Mindestbreite zusammen: gemessen
     79px in 355px, "Woran wir das gesehen haben" stand einwortweise
     untereinander. Sie muss hier mit umgestellt werden. */
  caption{display:block}
  thead{display:none}
  tr{border-bottom:1px solid var(--rule);padding:.9rem 0}
  /* "Datenschutzerklaerung" ist breiter als die Spalte, sobald die Tabelle
     zeilenweise umbricht: 148px Wort in 108px Zelle bei 320px Breite
     (Audit 16.09.2026). Getrennt wird das Wort, nicht die Tabelle. */
  td{border:0;padding:.1rem 0;overflow-wrap:anywhere;hyphens:auto}
}

/* Der Anhang. Dichter gesetzt als der Bericht: hier liest niemand, hier schlägt
   jemand nach. Adressen brechen an jeder Stelle um -- eine Shopify-URL mit
   /policies/refund-policy schiebt die Tabelle sonst über den Satzspiegel. */
.anhang{margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--rule)}
.quellen caption{text-align:left;margin-top:2rem}
/* Die Caption traegt bei der ersten Tabelle den ganzen Vorspann, danach nur
   noch das Wort. Das <span> darin ist die eigentliche Ueberschrift. */
.quellen caption span{display:block;font-weight:600;color:var(--dim-dark);margin-bottom:.2rem}
.paper .quellen caption span{color:var(--dim)}
.quellen caption h2{margin-bottom:.5rem}
.quellen{margin-top:.8rem;font-size:.92rem}
.quellen td{padding:.55rem 1rem .55rem 0}
.quellen td:first-child{width:38%}
.url{overflow-wrap:anywhere}

/* Österreichisch statt deutsch: die Gegenüberstellung ist das Argument. */
.swap{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.1rem}
.swap li{display:grid;grid-template-columns:minmax(0,1fr) 2.2rem minmax(0,1fr);align-items:baseline;gap:.6rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
.swap del{color:var(--dim);text-decoration-thickness:1px}
.swap i{font-style:normal;color:var(--signal-ink);display:flex;align-items:center}
.swap b{font-weight:600}
@media(max-width:620px){.swap li{grid-template-columns:1fr;gap:0}.swap i{display:none}}

.finds{list-style:none;padding:0;margin:2rem 0 0}
.finds li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--rule)}
.finds li:has(>form),.finds li:has(>.aktionen){grid-template-columns:2.6rem minmax(0,1fr) auto}
/* (Keine Backticks in diesem Block: die Vorlage ist ein Template-Literal.) */
/* Textlinks, keine Knoepfe. Drei umrandete Kaesten je Shop waren auf einem
   Agenturtarif neunzig Kaesten auf einer Seite, und DESIGN.md sagt seit jeher:
   ein Knopf ist der Kauf, alles andere ist ein Link. Sichtbar wurde es erst,
   als am 08.09.2026 der dritte dazukam ("Nach deutschem Recht pruefen") --
   sein Text ist je Zeile verschieden lang, und weil die Kaesten rechts
   ausgerichtet standen, hatte danach jede Zeile eine andere Kante.
   Als Links nebeneinander ist die Laenge gleichgueltig. */
.aktionen{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;align-self:center;justify-content:flex-end}
.aktionen form{margin:0}
/* .aktionen button.quiet, nicht .aktionen button: button.quiet steht weiter
   unten und haette bei gleicher Spezifitaet gewonnen -- der Rahmen war danach
   wieder da. Einmal uebersehen am 08.09.2026, im Bild gesehen. */
.aktionen button.quiet{background:none;border:0;padding:.5rem 0;min-height:44px;font:inherit;font-size:.92rem;
  color:var(--dim-dark);text-decoration:underline;text-underline-offset:4px;
  text-decoration-color:var(--rule-dark);cursor:pointer;width:auto;min-width:0}
.aktionen button.quiet:hover{color:var(--paper);text-decoration-color:currentColor;background:none;border:0}
.paper .aktionen button.quiet{color:var(--dim);text-decoration-color:var(--rule);border:0}
.paper .aktionen button.quiet:hover{color:var(--ink);text-decoration-color:currentColor;background:none;border:0}
/* Auf dem Handy nehmen zwei Knoepfe neben dem Text die halbe Zeilenbreite und
   pressen ihn in eine Spalte von vier Woertern. Also darunter statt daneben,
   nebeneinander und zu gleichen Teilen: der Text bekommt die Breite zurueck,
   und die Knoepfe bleiben untereinander gleich gross. */
/* Auf dem Handy unter den Text statt daneben: als Links brauchen sie keine
   eigene Spalte mehr, nur eine eigene Zeile. */
@media(max-width:34rem){
  .finds li:has(>.aktionen){grid-template-columns:2.6rem minmax(0,1fr)}
  .aktionen{grid-column:2/-1;justify-content:flex-start;margin-top:.2rem}
}
/* Eigene Klasse statt .badge: "stumm" ist keine Dringlichkeitsstufe und darf
   nicht in Signalfarbe erben, nur weil die Zeile zufaellig .red ist. Dieselbe
   ruhige Optik wie die NICHT-PRUEFBAR-Marke, aus demselben Grund: neutral. */
.stumm{display:inline-block;margin-left:.55rem;transform:translateY(-1px);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim-dark);border:1px solid var(--rule-dark);padding:.05rem .4rem}
.paper .stumm{color:var(--dim);border-color:var(--rule)}
/* Pruefsiegel-Einbettung: ein Textfeld zum Markieren, kein Editor. Bei
   390px eine eigene Zeile unter dem Bericht-Link, nie eine zweite Spalte --
   dieselbe Breitenregel wie .aktionen auf dem Handy weiter oben. */
.badge-embed{margin-top:.7rem;max-width:30rem}
.badge-preview{margin:.4rem 0}
.badge-embed details{margin-top:.4rem}
.badge-embed summary{cursor:pointer;list-style:none}.badge-embed summary::-webkit-details-marker{display:none}
.badge-embed summary::before{content:'▸ ';font-size:.8rem}.badge-embed details[open] summary::before{content:'▾ '}
.badge-embed textarea{display:block;width:100%;box-sizing:border-box;resize:vertical;min-height:3.4rem;
  font-family:FiraMono,ui-monospace,monospace;font-size:.82rem;line-height:1.4;
  padding:.5rem .6rem;border:1px solid var(--rule-dark);border-radius:2px;
  background:var(--ground-2);color:var(--paper);margin-bottom:.5rem}
.paper .badge-embed textarea{background:#FFF;color:var(--ink);border-color:var(--rule)}
.badge-embed button.quiet{min-height:44px}
/* Auch dieser Knopf steht auf beiden Untergruenden: --ink beim Ueberfahren
   heisst auf der Nachtflaeche dunkel auf dunkel, also unsichtbar. */
button.quiet{background:transparent;border-color:var(--rule-dark);color:var(--dim-dark);padding:.5rem .9rem;font-size:.92rem}
button.quiet:hover{background:transparent;border-color:var(--paper);color:var(--paper)}
.paper button.quiet{border-color:var(--rule);color:var(--dim)}
.paper button.quiet:hover{border-color:var(--ink);color:var(--ink)}
/* Ein Knopf, der aussieht wie ein Textlink. Fuer Handlungen, die ein Formular
   brauchen (POST, damit ein Vorschaubild sie nicht ausloest), aber keine
   Schaltflaeche verdienen: kuendigen, abbrechen. Der einzige echte Knopf auf
   einer Kundenseite bleibt der, der etwas hinzufuegt. */
/* Der Innenabstand geht wieder aus dem Textfluss heraus: diese Knoepfe stehen
   mitten in einem Satz, und die Zeile darf davon nicht auseinandergehen. Ohne
   ihn waren sie 23px hoch und damit die kleinste Klickflaeche im Kundenbereich
   -- ausgerechnet fuer "Abo kuendigen", wo ein Fehlgriff besonders aergert. */
button.link{background:none;border:0;padding:.65rem 0;margin:-.65rem 0;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
button.link:hover{text-decoration-thickness:2px}
/* Zahlungsuebersicht: Bezeichnung und Wert nebeneinander, auf dem Handy
   untereinander. Kein Rahmen -- das ist eine Auskunft, keine Tabelle. */
.zahlung{margin:1rem 0 0;display:grid;gap:.5rem}
.zahlung>div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:.4rem 1rem;align-items:baseline}
.zahlung dt{color:var(--dim);font-size:.92rem}
/* Beobachtung zu einer Frist: was wir heute schon gesehen haben. Bewusst KEINE
   Signalfarbe und kein Punkt davor -- die Pflicht gilt noch nicht, und ein
   roter Rand hier waere die Behauptung, der Shop sei jetzt schon saeumig.
   Ein ruhiger Balken, der sagt: dazu haben wir nachgesehen. */
.beobachtung{border-left:2px solid var(--rule);padding-left:.8rem;margin:0 0 1rem}
.paper .beobachtung{border-left-color:var(--rule)}
.zahlung dd{margin:0}
@media(max-width:34rem){.zahlung>div{grid-template-columns:1fr;gap:.1rem}}
.finds .no{color:var(--dim-dark);padding-top:.2rem}
.paper .finds .no{color:var(--dim)}
.finds :is(h3,h4){margin:0;font-weight:600;font-size:1.05rem;letter-spacing:-.005em;overflow-wrap:anywhere;hyphens:auto}
.finds .red :is(h3,h4){font-weight:700}
.finds .green :is(h3,h4),.finds .pending :is(h3,h4){font-weight:400;color:var(--dim-dark)}
.paper .finds .green :is(h3,h4),.paper .finds .pending :is(h3,h4){color:var(--dim)}
/* .finds wird an zwei Stellen benutzt: im Bericht auf Papier und auf der
   Kundenseite auf der Nachtflaeche. --ink ist dunkel und war dort unlesbar —
   im Screenshot standen die roten und gelben Zeilen als graue Schemen auf
   Schwarz. Der Papierton gilt also nur im Papierabschnitt. */
.finds p{margin:.35rem 0 0;font-size:.95rem;color:var(--paper)}
.paper .finds p{color:var(--ink)}
.finds .green p,.finds .pending p{color:var(--dim-dark)}
.paper .finds .green p,.paper .finds .pending p{color:var(--dim)}
.finds .ev{margin-top:.35rem;color:var(--dim);overflow-wrap:anywhere}
/* Der Strafrahmen steht abgesetzt, nicht im Fliesstext des Befunds: er ist
   eine andere Art Aussage. Der Befund sagt, was wir gesehen haben; diese Zeile
   sagt, was im Gesetz steht. Eine Haarlinie statt einer Farbe -- Orange hat im
   Bericht genau eine Bedeutung, und "moegliche Luecke" ist nicht "Strafe". */
.finds .strafe{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--rule);color:var(--dim)}
/* Seit 15.09.2026 eingeklappt. Dreissig Befunde mit Begruendung waren sieben
   Bildschirme, bevor jemand das Angebot darunter sah, und wer den Bericht
   oeffnet, will zuerst wissen, WAS gefunden wurde, nicht warum. Der Rang
   steht weiter im Schriftgewicht der Zeile; das Warum steht dahinter. Im PDF
   und beim Drucken ist alles offen (pdf.js und beforeprint im Bericht).
   Der Pfeil ist Geometrie aus zwei Haarlinien, kein Zeichen aus einer Schrift. */
details.befund>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:start;padding:.6rem 0;margin:-.6rem 0}
details.befund>summary::-webkit-details-marker{display:none}
/* Nur transform, kein margin: eine animierte Layout-Eigenschaft rechnet das
   Layout neu, und derselbe Versatz laesst sich mittransformieren
   (Audit 16.09.2026). */
details.befund>summary::after{content:"";width:.45rem;height:.45rem;margin:.4rem .35rem 0 0;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
details.befund[open]>summary::after{transform:translateY(.25rem) rotate(-135deg)}
details.befund>summary:hover h4{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
details.befund>summary:hover::after{border-color:var(--ink)}
details.befund>summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
details.befund[open]>summary+*{margin-top:.5rem}
@media(prefers-reduced-motion:reduce){details.befund>summary::after{transition:none}}

/* Zwei Termine statt eines Satzes, in dem das Datum untergeht: wann der Shop
   kostenlos wieder dran ist, und wann mit Beobachtung. Das spaetere Datum
   steht gedaempft, das fruehere in voller Tinte -- der Vergleich traegt die
   Entscheidung, keine Farbe und kein Ausrufezeichen. */
.wieder{margin:1.4rem 0 0;max-width:42rem}
.wieder>div{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:.15rem 1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.wieder>div:first-child{border-top:1px solid var(--rule)}
.wieder dt{color:var(--dim);font-size:.95rem}
.wieder dd{margin:0;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:clamp(1.3rem,2.4vw,1.6rem);line-height:1.05;color:var(--ink)}
.wieder .spaeter dd{color:var(--dim)}
.wieder+p{margin:1rem 0 0}

/* Die Befunde nach Einstufung in Gruppen: 31 gleichrangige Zeilen waren eine
   Wand, drei Ueberschriften mit Zahl sind eine Gliederung. */
/* h3.gruppe, nicht .gruppe: die Tarifstufen auf /preise tragen dieselbe
   Klasse (ul.tiers.gruppe), und bis 15.09.2026 zog diese Regel dort eine
   2px-Linie direkt unter den Knopf "19 EUR abonnieren". */
h3.gruppe{margin:2.6rem 0 0;padding-bottom:.5rem;border-bottom:2px solid var(--ink);font-size:1.05rem;font-weight:700;scroll-margin-top:1.5rem}
h3.gruppe.red{border-bottom-color:var(--signal-ink)}
h3.gruppe.yellow{border-bottom-color:#3A7A99}
h3.gruppe.green{border-bottom-color:#2A6E3F}
h3.gruppe.pending{border-bottom-color:#8A8070}
.paper .finds .red{border-left:3px solid var(--signal-ink);padding-left:.9rem}
.paper .finds .yellow{border-left:3px solid #3A7A99;padding-left:.9rem}
.paper .finds .green{border-left:3px solid #2A6E3F;padding-left:.9rem}
.paper .finds .pending{border-left:3px solid #8A8070;padding-left:.9rem}
h3.gruppe+.finds{margin-top:0}
/* Ein Satz je Gruppe, der sagt, was die Einstufung bedeutet. Er gehoert zur
   Ueberschrift, nicht zur ersten Zeile, also sitzt er zwischen beiden. */
.gruppe-hilfe{margin:.55rem 0 .2rem;max-width:var(--measure)}
.gruppe-hilfe+.finds{margin-top:0}
/* Mehrere Aspekte eines Dienstes in einer Zeile: jeder Aspekt als eigener
   Absatz, die Belege einmal am Ende statt dreimal dieselben Hosts. */
.befund .aspekt{margin:.7rem 0 0}
.befund .aspekt:first-child{margin-top:0}
.befund .aspekt b{font-weight:600}
/* accessibility:axe: Regeln je Seite zusammengefasst statt als Fliesstext,
   eine Zeile je Regel, kurz genug fuer 390px ohne Umbruch der Zahl. */
/* .finds li greift per Nachfahren-Selektor auch hier hinein (verschachtelt
   in details.befund>div) und erzwingt sein 2.6rem-Zahlenraster -- deshalb
   display und Spalten hier ausdruecklich zuruecksetzen, nicht nur ergaenzen. */
.axe-regeln{list-style:none;margin:0 0 .5rem;padding:0}
.axe-regeln li{display:block;grid-template-columns:none;padding:.3rem 0;border-bottom:1px dotted var(--rule)}
.axe-regeln li:last-child{border-bottom:none}
.finds li{scroll-margin-top:1.5rem}
/* Zuerst ansehen: drei Zeilen, dieselbe Nummer wie in der Liste darunter,
   damit das Auge sie dort wiederfindet. Keine Flaeche, keine Farbe. */
.zuerst{margin:0 0 2rem}
.zuerst h2{font-size:1.15rem;margin:0 0 .6rem}
.zuerst ol{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.zuerst li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.zuerst .no{color:var(--dim)}
/* 44px hoch, ohne die Zeile wachsen zu lassen -- wie die Kopfnavigation.
   uicheck mass 26,3px, und getroffen werden muss der Link mit dem Daumen. */
.zuerst a{font-weight:600;color:var(--ink);display:inline-block;padding:.6rem 0;margin:-.6rem 0}
/* Das PDF unter dem Kaufknopf, im selben Formular: ein Satz mit Textlink,
   der Einwilligungstext dahinter, weil er nur fuer diesen Weg gilt.
   Seit 20.09.2026 aufklappbar: zugeklappt ist der gratis Weg eine Zeile,
   aufgeklappt stehen Einwilligung und Absendeknopf da. Vorher standen sechs
   Zeilen Recht unter einer Zeile Angebot, und in zwanzig Tagen hat von 37
   Scans niemand ein PDF angefordert. Die Einwilligung bleibt vor dem
   Absenden sichtbar -- den Knopf gibt es nur aufgeklappt. */
/* max-width:none, sonst deckelt die Lesebreite fuer Absaetze den Flex-Umbruch,
   und die Zeile stand neben dem Knopf statt darunter (am 15.09.2026 im Bild
   gesehen: der Knopf wurde 130px hoch). Die Lesebreite traegt der Text innen. */
.pdfweg{flex:1 1 100%;max-width:none;margin:.2rem 0 0;color:var(--dim)}
.pdfweg .consent{max-width:var(--measure)}
.pdfweg button.link{width:auto;flex:none;min-width:0;background:none;border:0;color:var(--ink);font-weight:600}
.pdfweg .consent{display:block;margin-top:.6rem;font-size:.92rem}
/* 44px hoch wie die anderen Daumenziele, Marker weg: die Zeile soll wie der
   Textlink aussehen, der sie vorher war. */
/* .8rem, nicht .5rem: uicheck mass 39,6px und will 44 fuer den Daumen. */
.pdfweg>summary{cursor:pointer;list-style:none;padding:.8rem 0;margin:-.3rem 0 0}
.pdfweg>summary::-webkit-details-marker{display:none}
.pdfweg>summary span{color:var(--ink);font-weight:600;text-decoration:underline}
details.pdfweg button.link{display:block;margin-top:.9rem;text-decoration:underline}

/* Das Ergebnis gehoert in den ersten Bildschirm. Bis 15.09.2026 stand dort
   nur, WAS geprueft wurde; die Zahl der Luecken kam anderthalb Bildschirme
   tiefer. Dieselbe Liste stand fuer das PDF schon im Kopf -- auf dem
   Bildschirm war sie ausgeblendet. Nur fuer den Bildschirm gesetzt: das PDF
   hat seine eigene, kleinere Fassung weiter unten. */
@media screen{
  .kennzahlen{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;list-style:none;padding:0;margin:1.8rem 0 0;color:var(--dim-dark);font-size:.95rem}
  .kennzahlen b{display:block;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);line-height:1;color:var(--paper);margin-bottom:.2rem}
  .kennzahlen a{color:inherit;text-decoration:none}
  .kennzahlen a:hover span{color:var(--paper);text-decoration:underline;text-underline-offset:.2em}
  .kennzahlen a:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
  .kennzahlen .kz-red b{color:var(--signal)}
  .kennzahlen .kz-yellow b{color:#7AACCC}
  .kennzahlen .kz-pending b{color:#8A8070}
  .kennzahlen .kz-green b{color:#5AA870}
  .kennzahlen .kz-signal b{color:var(--signal)}
  /* Kleiner als im Bericht: hier steht die Zahlenreihe unter dem Formular,
     nicht als Kopfzeile einer eigenen Seite. */
  .kennzahlen.klein{gap:1rem 2rem;margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--rule-dark)}
  .kennzahlen.klein b{font-size:clamp(1.5rem,3.4vw,2rem)}
}
/* Auf dem Handy zwei mal zwei statt drei plus eins: eine einzelne Zahl in
   der zweiten Zeile las sich wie eine Fussnote. */
@media screen and (max-width:34rem){.kennzahlen{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}
/* Warum dieses Land: eine Zeile statt vier. Die Begruendung bleibt einen
   Klick entfernt; steht KEIN Land fest, ist sie offen (siehe landKopf). */
details.grund>summary{cursor:pointer;color:var(--dim-dark);font-size:.95rem;padding:.6rem 0;min-height:44px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--rule-dark)}
details.grund>summary:hover{color:var(--paper)}
details.grund>p{margin:.2rem 0 0}
@media(max-width:34rem){.wieder>div{grid-template-columns:1fr}}
/* Vorher trug jede Marke dieselbe Farbe -- 27 Befunde in derselben Amberfarbe
   sehen aus wie 27 gleich wichtige Zeilen, und genau das sind sie nicht. Auf
   Papier galt seit dem PDF-Umbau schon die richtige Regel (nur Rot bekommt
   die Signalfarbe); dieselbe Regel fehlte auf dem Bildschirm. */
.badge{display:inline-block;margin-left:.55rem;transform:translateY(-1px);font-size:.75rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim-dark)}
.paper .badge{color:var(--dim)}
.finds .red .badge{color:var(--signal)}
.paper .finds .red .badge{color:var(--signal-ink)}
.finds .pending .badge{color:var(--dim);border:1px solid var(--rule);padding:.05rem .4rem}

/* Was in diesem Land nicht gilt. Grau, ohne Nummer, ohne Signalfarbe und
   eingeklappt: ein nicht anwendbarer Punkt ist kein Befund, und wer ihn wie
   einen aussehen laesst, hat die Zahl oben gerade wieder unbrauchbar gemacht.
   Im PDF bleibt nur die Zusammenfassungszeile stehen: ein Browser klappt
   details fuer den Druck nicht auf, und dafuer einen Klickzustand nachzubauen
   waere mehr Aufwand als der Punkt wert ist.
   ponytail: wenn ein Kunde die Liste im PDF vermisst, bekommt sie das
   open-Attribut. */
.na{margin-top:1.6rem}
details.na>summary{cursor:pointer;font-weight:600;color:var(--dim);padding:.55rem 0;min-height:44px;display:flex;align-items:center}
.paper details.na>summary{color:var(--dim)}
.finds.na{margin-top:.6rem}
.finds.na li{grid-template-columns:1fr;border-bottom:1px dotted var(--rule);padding:.7rem 0}
.finds.na h3{font-weight:400;color:var(--dim)}
.finds.na p{color:var(--dim)}
.finds.na .badge{border:1px solid var(--rule);padding:.05rem .4rem}

/* Die Abfrage sitzt mitten im Papier und muss sich davon absetzen, ohne eine
   Karte zu werden: eine Flaeche, zwei Haarlinien, sonst nichts. */
.watch{margin:2.4rem 0 0;padding:1.6rem 1.6rem 1.8rem;background:rgba(16,24,32,.045);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.watch p{margin:.5rem 0 0;color:var(--dim)}
/* Zwei halbtransparente Flaechen uebereinander (.watch und die Schiene des
   Schalters) drueckten "Deutschland" im Beispielbericht auf 4,22:1. Die
   Schiene bleibt hier durchsichtig, die Haarlinie traegt sie allein. */
.watch .landschalter .schalter{background:transparent}
/* Das PDF unter dem Kauf: keine Flaeche, nur eine Haarlinie. Es soll
   gefunden werden, nicht mit dem Kauf um den Blick konkurrieren. */
.pdf{margin:2.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule)}
.pdf p{color:var(--dim)}
.watch+.pdf{border-top:0;padding-top:0}
.note{border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:1.1rem 0;margin:2rem 0}
.lede{font-size:clamp(1.08rem,2.1vw,1.3rem);color:var(--dim-dark);max-width:52ch}
.paper .lede{color:var(--dim)}
.fine{font-size:.95rem;color:var(--dim-dark)}
.paper .fine{color:var(--dim)}
/* Zugeklappt sieht man alle Fragen und liest nur die relevante Antwort. */
.faq{margin:2rem 0 0;max-width:var(--measure)}
.faq details{padding:.9rem 0;border-top:1px solid var(--rule)}
/* 44px hoch, wie jede andere Klickflaeche: eine Aufklapp-Zeile war 26px und
   damit die kleinste Schaltflaeche der Seite -- ausgerechnet die, die auf dem
   Handy am haeufigsten getroffen werden soll. Der Zuwachs geht in den
   Innenabstand des <details>, das ihn schon hatte, also waechst nichts. */
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;gap:.7rem;align-items:baseline;
  min-height:44px;padding:.45rem 0;margin:-.45rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--dim);font-weight:400;width:.8rem;flex:none}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:.5rem 0 0 1.5rem;color:var(--dim);font-size:.95rem}
/* Zusammenhaengender heller Lesebereich statt abwechselnder Streifen
   (DESIGN.md 16.09.2026): benachbarte Abschnitte auf derselben Flaeche
   teilen EINEN Abstand, nicht zwei. */
.paper>section.pad+section.pad{padding-top:0}
/* Aufklappzeile vor einer vollstaendigen Tabelle oder Liste. Dieselbe
   Geometrie wie details.fristen-mehr im Bericht: 44px hoch, unterstrichen,
   und die Zeile sagt, was folgt. */
details.mehr{margin-top:1.8rem}
/* KEIN display:flex hier: die Zeile enthaelt zwei Textknoten und die beiden
   Laenderfassungen als <span>, und flex macht aus jedem davon eine eigene
   Spalte -- auf dem Handy stand "Alle | 16 Prüfungen | mit Fundstelle"
   dreispaltig uebereinander. Der Aufklapper ist eine Textzeile. */
details.mehr>summary{list-style:none;cursor:pointer;font-weight:600;padding:.85rem 0;
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::before{content:"+ ";font-weight:400}
details.mehr[open]>summary::before{content:"– "}
details.mehr>table{margin-top:.6rem}
/* Der Berichtsausschnitt auf der Startseite: die Zeile des Berichts, oben
   eingefasst, damit sie als Ausschnitt und nicht als Seiteninhalt liest. */
.finds.probe{margin-top:0;border-top:1px solid var(--rule)}
/* Die vier Pruefbereiche sind die Antwort des Abschnitts, nicht sein
   Kleingedrucktes: dieselbe Liste wie sonst, aber in Tinte. */
.paper .enthalten.wichtig li{color:var(--ink)}
@media(min-width:62rem){
  .faq{max-width:none;columns:2;column-gap:3.5rem}
  .faq details{break-inside:avoid}
}
/* Zweispaltig, seit die zweite Spalte einen Beleg trug. Der Beleg ist weg, die
   Spalte blieb: sie nahm auf 1440px 45% der Breite und drueckte das Adressfeld
   auf halbe Laenge. Wieder einspaltig, das Feld bekommt die Breite zurueck. */
.hero{display:grid;gap:2.4rem}
.hero-main{max-width:52rem;min-width:0}

/* Der Kopf einer Sektion: Ueberschrift links, Einordnung rechts. Der Fliesstext
   ist auf 52-66 Zeichen begrenzt und liess auf dem Laptop die rechte Haelfte der
   Seite leer stehen — die Begrenzung bleibt, die freie Spalte wird benutzt. */
.head{display:grid;gap:.9rem}
.head h2{align-self:start;margin-bottom:0}
.head>*:last-child{margin-bottom:0}
@media(min-width:62rem){
  .head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 3.5rem;align-items:start}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.scan-panel{margin-top:2.4rem;border-top:2px solid var(--paper);padding-top:1.1rem;display:grid;gap:1rem}
.scan-status p{margin:.35rem 0 0;color:var(--dim-dark);max-width:var(--measure)}
.scan-pulse{position:relative;display:block;width:100%;height:4px;background:var(--rule-dark);overflow:hidden}
.scan-pulse::after{content:"";position:absolute;left:0;top:0;height:100%;width:25%;background:var(--signal);animation:scan 1.6s linear infinite}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(420%)}}
.stage-list{list-style:none;padding:0;margin:.8rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));gap:0;border-top:1px solid var(--rule-dark)}
.stage-list li{padding:.72rem 1rem .72rem 0;border-bottom:1px solid var(--rule-dark);color:var(--dim-dark)}
.stage-list li.done,.stage-list li.laeuft{color:var(--paper)}
/* Laeuft ist nicht fertig: gefuellt heisst erledigt, umrandet heisst gerade
   dran. Bis 07.09.2026 wurde eine Stufe beim ERSTEN Ereignis ihrer Art
   gefuellt -- "Rechtstexte lesen" stand also fertig da, sobald der erste von
   vier gelesen war. */
.stage-list li.laeuft::before{border-color:var(--signal);background:transparent}
.stage-list li::before{content:"";display:inline-block;width:.55rem;height:.55rem;margin-right:.5rem;background:transparent;border:1px solid var(--rule-dark);transition:background-color 200ms ease-out,border-color 200ms ease-out}
/* Erledigte Stufen in Papierweiss, nicht in Signalfarbe (seit 15.09.2026):
   Orange heisst "die eine Handlung der Seite" oder "lud ohne Einwilligung",
   und ein Haken hinter "8 Seiten geöffnet" ist keins von beiden. Im Bericht
   stand der Kaufknopf sonst neben einer Tafel voller oranger Quadrate. */
.stage-list li.done::before{background:var(--paper);border-color:var(--paper)}
@media(prefers-reduced-motion:reduce){.scan-pulse::after{animation:none;left:0;width:100%}}

/* Laufendes Protokoll während des Scans */
.log{list-style:none;padding:0;margin:2rem 0 0;font-size:.95rem}
/* min(): bei 200 % Textzoom sind 4.5rem 144px von 284px Spaltenbreite, und
   der Dienstname daneben hat keinen Platz mehr (Audit 16.09.2026). */
.log li{display:grid;grid-template-columns:min(4.5rem,22%) minmax(0,1fr) auto;gap:1rem;padding:.4rem 0;border-bottom:1px solid var(--rule-dark)}
.log li>*{min-width:0;overflow-wrap:anywhere}
.log li:last-child{color:var(--signal)}
.log time{color:var(--dim-dark)}
.log b{color:var(--dim-dark);font-weight:400;white-space:nowrap}
@media(max-width:620px){.log b{display:none}}
/* Dieselbe Tafel im Bericht, nur zu Ende gelaufen: die Leiste ist voll statt
   wandernd, und die letzte Zeile ist nicht mehr "die gerade laufende". Ein
   Dienst, zu dem ein roter Befund gehoert, steht in Signalfarbe — dieselbe
   Unterscheidung, die vorher die Legende der Achse getroffen hat. */
/* Im fertigen Bericht keine Leiste mehr: eine volle orange Linie ist eine
   Ladeleiste bei 100 %, und Orange heisst seit 15.09.2026 nur noch
   "Handlung" oder "lud ohne Einwilligung". Die Haarlinie des Panels bleibt. */
.fertig .scan-pulse{display:none}
.log.fertig li:last-child{color:inherit}
.log.fertig span{color:var(--signal)}
.log.fertig li.late span{color:var(--dim-dark)}

footer{border-top:1px solid var(--rule-dark);margin-top:0;padding:2.4rem 0 3rem;font-size:.95rem;color:var(--dim-dark)}
/* Trefferflaeche, nicht Aussehen: die Fussleiste traegt elf Textlinks, jeder
   war 18px hoch, und zwei umgebrochene Zeilen standen 5px auseinander -- auf
   einem Handy eine Fehltippzone (Audit 16.09.2026, WCAG 2.5.8 verlangt 24px).
   inline-block plus Innenabstand macht aus jedem Link ein Ziel von ueber
   40px; der negative Aussenabstand nimmt den Zuwachs oben und unten wieder
   weg, damit die Fussleiste nicht waechst. Sekundaere Handlungen bleiben
   Textlinks (DESIGN.md), sie werden nur treffbar. */
footer a{color:var(--dim-dark);text-underline-offset:3px;display:inline-block;padding:.8rem 0;line-height:1.25}
/* Und die Zeilenhoehe dazu: ohne sie ueberlappen die gewachsenen Ziele,
   sobald eine Linkzeile umbricht -- ein Tippen in der Ueberlappung traefe den
   falschen Link, also schlimmer als das kleine Ziel davor. Der Link setzt
   seine eigene Zeilenhoehe (sonst waechst er mit der des Absatzes mit), der
   Absatz die Teilung. Gemessen, nicht gerechnet. Nur die Linkzeilen, nicht
   der Absatz mit dem Vorbehalt darueber -- und auch nicht der Absatz, in dem
   ein einzelner Link am Satzende steht: dort ueberlappt das Ziel nur Text,
   und eine Ueberlappung mit Text kann niemand falsch treffen. Nur die zwei
   reinen Linkzeilen brauchen die Teilung. */
footer p.linkzeile{line-height:3.6}
footer a:hover{color:var(--paper)}
/* Dieselbe Behandlung fuer die freistehenden Textlinks im Fliesstext: sie
   stehen in ihrem eigenen Absatz, also verschiebt der Innenabstand nichts. */
/* Freistehende Textlinks: eigener Absatz, also verschiebt der Innenabstand
   nichts. Links MITTEN IN EINEM SATZ bleiben unberuehrt -- WCAG 2.5.8 nimmt
   sie ausdruecklich aus, und ein Innenabstand dort zerreisst die Zeile. */
.fine>a:only-child,p.no-print>a:first-child{display:inline-block;padding:.8rem 0;margin:-.8rem 0}
.paper+footer,main:has(>.paper:last-child)+footer{border-top:0}
/* Der Sprunglink ist bis zum Fokus unsichtbar, danach ein normaler Knopf. */
.skip{position:absolute;left:-9999px;top:0;z-index:9;background:var(--signal);color:#241500;padding:.7rem 1.1rem;font-weight:600;text-decoration:none}
.skip:focus{left:0}
/* Preisstufen: dieselbe Sprache wie die Pruef-Tabelle, keine Karten, keine
   Schatten. Zwei Spalten, Haarlinie oben, der Preis in der Display-Schrift. */
/* Rechner (Variante B, Preisumbau 22.09.2026, approved.json): ein Stepper
   1..11 links, das Ergebnis rechts, statt einer Messachse mit acht
   Haltepunkten. Eigene Praefixe (pr-*), damit nichts mit vorhandenen
   Klassen kollidiert. Alle elf Kombinationen x zwei Intervalle stehen fertig
   im Quelltext (aus preis(), subs.js, nie getippt) -- data-n am Formular
   zeigt per Attributselektor nur die passende. Ohne JavaScript setzt ein
   Klick auf Minus/Plus das ueber ein zweites, verstecktes GET-Formular
   (form="pr-stepper-form" auf den Knoepfen, siehe rechner()) -- die Seite
   laedt neu mit /preise?n=X und zeigt dieselbe Karte, nur ohne Zwischenschritt
   im Browser. Kein Bernstein fuer den Stepper oder die Auswahl selbst: sie
   sind ein Zustand, und Bernstein fuehrt in diesem Haus zur naechsten
   Handlung (DESIGN.md). */
/* Erster Abschnitt auf /preise: section-sm statt section-md (DESIGN.md,
   spacing), sonst haengt der Rechner ~125px statt der ueblichen ~48px unter
   dem schmalen dunklen Kopf -- derselbe Rhythmus, den .paper-Abschnitte
   sonst auf dieser Seite auch tragen, nur ohne die grosse Vorspann-Leiste,
   die es hier nicht mehr gibt. */
.pr-erste-sektion{padding-top:clamp(2rem,4vw,3rem)!important}
.pr-gratis-band{font-size:.92rem;color:var(--dim);margin:1.8rem 0 0;max-width:none}
.pr-gratis-band a{color:var(--ink)}
.pr-rechner{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem;align-items:start;margin:0}
@media(max-width:780px){.pr-rechner{grid-template-columns:1fr}}
.pr-frage{padding:0 2.4rem 0 0;border-right:1px solid var(--rule-dark)}
.paper .pr-frage{border-right-color:var(--rule)}
@media(max-width:780px){.pr-frage{border-right:0;border-bottom:1px solid var(--rule-dark);padding:0 0 1.4rem}
.paper .pr-frage{border-bottom-color:var(--rule)}}
.pr-frage h1{font-size:1.15rem;margin:0 0 1.1rem}
.pr-stepper{display:inline-flex;align-items:stretch;border:1px solid var(--rule-dark);border-radius:2px;overflow:hidden;margin:0 0 1.2rem}
.paper .pr-stepper{border-color:var(--rule)}
.pr-stepper-btn{appearance:none;background:transparent;border:0;min-width:44px;min-height:44px;font-size:1.15rem;font-weight:600;color:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 .5rem;line-height:1}
.paper .pr-stepper-btn{color:var(--ink)}
.pr-stepper-btn:hover:not(:disabled){background:var(--rule-dark)}
.paper .pr-stepper-btn:hover:not(:disabled){background:var(--rule)}
.pr-stepper-btn:disabled{color:var(--rule-dark);cursor:not-allowed}
.paper .pr-stepper-btn:disabled{color:var(--rule)}
.pr-stepper-btn:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.paper .pr-stepper-btn:focus-visible{outline-color:var(--ink)}
.pr-stepper-count{min-width:10rem;min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-size:1.05rem;color:var(--paper);border-left:1px solid var(--rule-dark);border-right:1px solid var(--rule-dark);padding:0 .8rem}
.paper .pr-stepper-count{color:var(--ink);border-left-color:var(--rule);border-right-color:var(--rule)}
.pr-intervall-zeile{display:flex;align-items:center;gap:.9rem}
.pr-intervall-zeile>span:first-child{font-size:.88rem;color:var(--dim-dark)}
.paper .pr-intervall-zeile>span:first-child{color:var(--dim)}
.pr-intervall{display:inline-flex;border:1px solid var(--rule-dark);border-radius:2px;overflow:hidden}
.paper .pr-intervall{border-color:var(--rule)}
.pr-intervall input{position:absolute;opacity:0;width:1px;height:1px}
.pr-intervall label{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;font-size:.92rem;font-weight:600;cursor:pointer;color:var(--dim-dark)}
.paper .pr-intervall label{color:var(--dim)}
.pr-intervall input:checked+label{background:var(--paper);color:var(--ink)}
.paper .pr-intervall input:checked+label{background:var(--ink);color:var(--paper)}
.pr-intervall input:focus-visible+label{outline:2px solid var(--signal);outline-offset:-2px}
.paper .pr-intervall input:focus-visible+label{outline-color:var(--ink)}
.pr-antwort{padding:0 0 0 2.4rem}
@media(max-width:780px){.pr-antwort{padding:1.5rem 0 0}}
.pr-plan-daten{display:none}
.pr-rechner[data-n="1"] #pr-d-1,
.pr-rechner[data-n="2"] #pr-d-2,
.pr-rechner[data-n="3"] #pr-d-3,
.pr-rechner[data-n="4"] #pr-d-4,
.pr-rechner[data-n="5"] #pr-d-5,
.pr-rechner[data-n="6"] #pr-d-6,
.pr-rechner[data-n="7"] #pr-d-7,
.pr-rechner[data-n="8"] #pr-d-8,
.pr-rechner[data-n="9"] #pr-d-9,
.pr-rechner[data-n="10"] #pr-d-10,
.pr-rechner[data-n="11"] #pr-d-11{display:block}
.pr-antwort .pr-plan-name{font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;color:var(--dim-dark);margin:0}
.paper .pr-antwort .pr-plan-name{color:var(--dim)}
.pr-antwort .pr-preis{font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:clamp(2.4rem,5.5vw,3.4rem);line-height:1;margin:.3rem 0 .3rem}
.pr-antwort .pr-preis small{font-family:"Fira Sans",system-ui,sans-serif;font-weight:600;font-size:1.1rem;color:var(--dim-dark)}
.paper .pr-antwort .pr-preis small{color:var(--dim)}
.pr-antwort .pr-jahr-preis{display:none}
.pr-rechner:has(#pr-int-jahr:checked) .pr-monat-preis{display:none}
.pr-rechner:has(#pr-int-jahr:checked) .pr-jahr-preis{display:block}
.pr-antwort .pr-jahr-info{display:none;font-size:.9rem;color:var(--dim-dark);margin:0 0 .7rem}
.paper .pr-antwort .pr-jahr-info{color:var(--dim)}
.pr-rechner:has(#pr-int-jahr:checked) .pr-jahr-info{display:block}
.pr-antwort .pr-erklaer{font-size:.94rem;color:var(--dim-dark);margin:.3rem 0 1.2rem;max-width:32rem}
.paper .pr-antwort .pr-erklaer{color:var(--dim)}
.pr-antwort .pr-klein{font-size:.86rem;color:var(--dim-dark);margin:0 0 1rem}
.paper .pr-antwort .pr-klein{color:var(--dim)}
.pr-antwort .pr-vergleichszeile{font-size:.86rem;color:var(--dim-dark);border-top:1px solid var(--rule-dark);padding-top:.8rem;margin:0}
.paper .pr-antwort .pr-vergleichszeile{color:var(--dim);border-top-color:var(--rule)}
/* Kein eigenes margin-top hier: die sitewide .start-Regel (2.6rem) ist genau
   auf den negativ positionierten Labeltext kalibriert (.start > label >
   span{top:-1.35rem}) -- eine kleinere Zahl (frueher 1.4rem) liess "Ihre
   E-Mail-Adresse" auf der Vergleichszeile druebersitzen (Kritik 22.09.2026). */

/* Vergleichstabelle unter dem Rechner: Gratis/Watchdog/Agentur, eigene
   Praefixe (pr-*). "Ihre Wahl" und die Haarlinie folgen dem Stepper oben --
   ueber den Geschwister-Kombinator, weil die Tabelle ausserhalb von
   form.pr-rechner steht (siehe tiers()). Kein Bernstein als Flaeche, nur die
   Haarlinie traegt die Signalfarbe (DESIGN.md, dieselbe Regel wie bei der
   alten Messachse). Section-sm-Abstand zum Freistreifen darueber (statt
   direkt aufeinander zu sitzen, Kritik 22.09.2026); die Ueberschrift traegt
   "heading-sm" (DESIGN.md, "kleine H2"), sonst schlaegt sie die absichtlich
   kleine H1 des Rechners ("tier"-Groesse, 1.15rem) optisch. */
.pr-tabelle-h2{font-size:clamp(1.3rem,2.6vw,1.8rem);margin:clamp(2rem,4vw,3rem) 0 .6rem}
.pr-tabelle{width:100%;border-collapse:collapse;margin:1.6rem 0 0}
.pr-tabelle th,.pr-tabelle td{padding:.65rem .8rem;border-bottom:1px solid var(--rule-dark);text-align:center;font-size:.92rem;vertical-align:middle}
.paper .pr-tabelle th,.paper .pr-tabelle td{border-bottom-color:var(--rule)}
.pr-tabelle thead th{vertical-align:bottom;padding-top:0;padding-bottom:.9rem;border-bottom:2px solid var(--paper)}
.paper .pr-tabelle thead th{border-bottom-color:var(--ink)}
.pr-tabelle th[scope=row]{text-align:left;font-weight:400;color:var(--dim-dark);padding-left:0}
.paper .pr-tabelle th[scope=row]{color:var(--dim)}
.pr-tabelle td:first-child,.pr-tabelle th:first-child{padding-left:0}
.pr-tabelle .pr-plan-name{display:block;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:1.05rem;color:var(--paper)}
.paper .pr-tabelle .pr-plan-name{color:var(--ink)}
.pr-tabelle .pr-plan-preis{display:block;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:1.25rem;margin:.25rem 0 0}
.pr-tabelle .pr-plan-preis small{font-family:"Fira Sans",system-ui,sans-serif;font-weight:600;font-size:.78rem;color:var(--dim-dark)}
.paper .pr-tabelle .pr-plan-preis small{color:var(--dim)}
.pr-tabelle .pr-plan-shops{display:block;font-size:.8rem;color:var(--dim-dark);margin-top:.15rem}
.paper .pr-tabelle .pr-plan-shops{color:var(--dim)}
.pr-tabelle .pr-tag{display:none;margin:0 0 .4rem;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-dark)}
.paper .pr-tabelle .pr-tag{color:var(--dim)}
.pr-ico{display:inline-block;vertical-align:middle;color:var(--paper)}
.paper .pr-ico{color:var(--ink)}
.pr-ico-nein{color:var(--rule-dark)}
.paper .pr-ico-nein{color:var(--rule)}
.pr-rechner[data-n="1"] ~ .pr-tabelle .pr-tag-watchdog,
.pr-rechner[data-n="2"] ~ .pr-tabelle .pr-tag-watchdog,
.pr-rechner[data-n="3"] ~ .pr-tabelle .pr-tag-watchdog,
.pr-rechner[data-n="4"] ~ .pr-tabelle .pr-tag-watchdog{display:block}
.pr-rechner[data-n="5"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="6"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="7"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="8"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="9"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="10"] ~ .pr-tabelle .pr-tag-agentur,
.pr-rechner[data-n="11"] ~ .pr-tabelle .pr-tag-agentur{display:block}
.pr-rechner[data-n="1"] ~ .pr-tabelle .pr-col-watchdog,
.pr-rechner[data-n="2"] ~ .pr-tabelle .pr-col-watchdog,
.pr-rechner[data-n="3"] ~ .pr-tabelle .pr-col-watchdog,
.pr-rechner[data-n="4"] ~ .pr-tabelle .pr-col-watchdog{border-left:1px solid var(--signal);border-right:1px solid var(--signal)}
.pr-rechner[data-n="1"] ~ .pr-tabelle thead .pr-col-watchdog,
.pr-rechner[data-n="2"] ~ .pr-tabelle thead .pr-col-watchdog,
.pr-rechner[data-n="3"] ~ .pr-tabelle thead .pr-col-watchdog,
.pr-rechner[data-n="4"] ~ .pr-tabelle thead .pr-col-watchdog{border-top:1px solid var(--signal)}
.pr-rechner[data-n="1"] ~ .pr-tabelle tbody tr:last-child .pr-col-watchdog,
.pr-rechner[data-n="2"] ~ .pr-tabelle tbody tr:last-child .pr-col-watchdog,
.pr-rechner[data-n="3"] ~ .pr-tabelle tbody tr:last-child .pr-col-watchdog,
.pr-rechner[data-n="4"] ~ .pr-tabelle tbody tr:last-child .pr-col-watchdog{border-bottom:1px solid var(--signal)}
.pr-rechner[data-n="5"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="6"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="7"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="8"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="9"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="10"] ~ .pr-tabelle .pr-col-agentur,
.pr-rechner[data-n="11"] ~ .pr-tabelle .pr-col-agentur{border-left:1px solid var(--signal);border-right:1px solid var(--signal)}
.pr-rechner[data-n="5"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="6"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="7"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="8"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="9"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="10"] ~ .pr-tabelle thead .pr-col-agentur,
.pr-rechner[data-n="11"] ~ .pr-tabelle thead .pr-col-agentur{border-top:1px solid var(--signal)}
.pr-rechner[data-n="5"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="6"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="7"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="8"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="9"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="10"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur,
.pr-rechner[data-n="11"] ~ .pr-tabelle tbody tr:last-child .pr-col-agentur{border-bottom:1px solid var(--signal)}

/* Handy: keine drei Zeilen je Zeile, sondern die Merkmalzeile und darunter
   die drei Werte nebeneinander in gleich breiten Zellen (Design-Kritik
   22.09.2026 am Mockup: drei gestapelte Zeilen je Merkmal waren doppelt so
   hoch wie noetig). */
@media(max-width:35rem){
  .pr-tabelle thead{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .pr-tabelle,.pr-tabelle tbody{display:block;width:100%}
  .pr-tabelle tbody tr{display:grid;grid-template-columns:repeat(3,1fr);column-gap:.5rem;border-top:2px solid var(--paper);padding:.7rem 0}
  .paper .pr-tabelle tbody tr{border-top-color:var(--ink)}
  .pr-tabelle tbody tr:first-child{border-top:0}
  .pr-tabelle th[scope=row]{grid-column:1/-1;display:block;text-align:left;padding:0 0 .4rem;font-weight:700;font-size:.88rem;color:var(--paper)}
  .paper .pr-tabelle th[scope=row]{color:var(--ink)}
  .pr-tabelle td{display:flex;flex-direction:column;align-items:center;gap:.2rem;border-bottom:0;text-align:center;padding:.15rem .1rem;font-size:.85rem}
  .pr-tabelle td::before{content:attr(data-plan);font-size:.62rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--dim-dark)}
  .paper .pr-tabelle td::before{color:var(--dim)}
  .pr-tabelle .pr-col-watchdog,.pr-tabelle .pr-col-agentur{border:0}
  .pr-rechner[data-n="1"] ~ .pr-tabelle .pr-col-watchdog,
  .pr-rechner[data-n="2"] ~ .pr-tabelle .pr-col-watchdog,
  .pr-rechner[data-n="3"] ~ .pr-tabelle .pr-col-watchdog,
  .pr-rechner[data-n="4"] ~ .pr-tabelle .pr-col-watchdog{border-radius:2px;box-shadow:inset 0 0 0 1px var(--signal)}
  .pr-rechner[data-n="5"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="6"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="7"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="8"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="9"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="10"] ~ .pr-tabelle .pr-col-agentur,
  .pr-rechner[data-n="11"] ~ .pr-tabelle .pr-col-agentur{border-radius:2px;box-shadow:inset 0 0 0 1px var(--signal)}
}
/* Dieselbe Auswahl auf Desktop und Handy; im Druck bleiben beide Gruppen. */
/* min(17rem,100%) und nicht 17rem: bei 200 % Textzoom sind 17rem 544px, und
   ein Raster mit 544px Mindestbreite schiebt die Seite auf einem 390px-Handy
   auf 579px auf. Gemessen bei der Abnahme am 16.09.2026 -- gefunden nicht bei
   der Zoomstufe, sondern beim Nachmessen des horizontalen Ueberlaufs.
   Dasselbe an .stage-list und .checklist. */
.tiers{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;gap:2.4rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr))}
/* Ohne CSS stehen alle 16 Preis/Intervall-Kombinationen je Karte
   untereinander -- mit Preis und Nebenzeile, in derselben Reihenfolge. Das
   ist die ehrlichere Ausfallform als eine Karte ohne Betrag (dieselbe
   Entscheidung wie beim alten Schieber). */
.kurz-mehr{margin-top:1.6rem;max-width:var(--measure)}
/* Der Weg zu allen Tarifen ist eine eigene Zeile und kein Anhaengsel am
   Kleingedruckten. In der ersten Fassung stand er am Ende eines vierzeiligen
   grauen Absatzes -- die einzige Handlung des Abschnitts war das Unauffaelligste
   darin. */
.kurz-alle{margin:.9rem 0 0}
.tiers li{border-top:2px solid var(--paper);padding:1rem 0 0}
.paper .tiers li{border-color:var(--ink)}
.tiers h3{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.tiers h3{font-size:1.15rem}
.tiers b{display:block;margin:.6rem 0 .2rem;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:clamp(2.2rem,5vw,3rem);line-height:1}
.tiers b i{font-style:normal;font-weight:400;font-size:1rem;color:var(--dim-dark)}
/* "Auf Anfrage" ist kein Messwert, sondern ein Satz -- in der Preisgroesse
   gesetzt liest er sich wie eine falsch formatierte Zahl. */
.tiers b.kontakt{font-size:1.4rem}
.paper .tiers b i{color:var(--dim)}
/* Ausgangswert ist die Nachtfassung, Papier ueberschreibt -- die Stufen stehen
   auf der Startseite auf Nacht und auf /preise auf Papier. Mit var(--ink) als
   Grundwert war die wichtigste Zeile der Karte auf der Startseite dunkel auf
   dunkel (DESIGN.md: die Sekundaerfarbe folgt dem Territorium). */
.tiers .anzahl{margin:.4rem 0 0;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:1.25rem;color:var(--paper)}
.paper .tiers .anzahl{color:var(--ink)}
.tiers ul{list-style:none;padding:0;margin:.8rem 0 1.4rem}
/* Haelt die Kaufformulare der Spalten auf einer Linie, obwohl die Stufen
   verschieden viele Zeilen tragen. Nur nebeneinander -- untereinander ist
   derselbe Platzhalter ein Loch. */
@media(min-width:621px){.tiers ul{min-height:3.4rem}}
.enthalten{margin:2rem 0 0;padding:1.1rem 0 0;border-top:1px solid var(--rule-dark);list-style:none;display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.enthalten li{position:relative;padding-left:1.1rem;color:var(--dim-dark)}
.paper .enthalten li{color:var(--dim)}
.enthalten li::before{content:"";position:absolute;left:0;top:.82em;width:.5rem;height:1px;background:var(--rule-dark)}
.paper .enthalten{border-top-color:var(--rule)}
.paper .enthalten li::before{background:var(--rule)}
.enthalten .wer{flex:1 0 100%;padding:0;color:var(--paper);font-weight:600;margin-bottom:.2rem}
.paper .enthalten .wer{color:var(--ink)}
.enthalten .wer::before{display:none}
/* Die lange Fassung: sechs Leistungen als zweispaltiges Raster mit Haarlinien,
   wie jede andere Aufzaehlung dieses Hauses (DESIGN.md: Tabellen und
   Haarlinien, keine Karten). Der umbrechende Fluss mit Gedankenstrichen las
   sich als Blocktext -- die Striche fluchteten nicht, die Zeilen brachen
   ungleich, und der letzte Punkt stand allein in seiner Reihe.

   Sechs in zwei Spalten heisst drei volle Zeilen, kein Waisenkind. Die
   Gedankenstriche entfallen: die Haarlinie trennt, ein Strich, der nicht
   fluchtet, ist Rauschen. Die kurzen Geschwisterlisten (drei Punkte) behalten
   den Fluss, dort traegt er. */
.enthalten.leistungen{display:grid;grid-template-columns:1fr 1fr;gap:0 2.6rem}
.enthalten.leistungen li{padding:.62rem 0;padding-left:0;border-bottom:1px solid var(--rule-dark)}
.paper .enthalten.leistungen li{border-bottom-color:var(--rule)}
.enthalten.leistungen li::before{display:none}
.enthalten.leistungen .wer{grid-column:1/-1;border-bottom:0;padding-bottom:.15rem}
@media(max-width:34rem){.enthalten.leistungen{grid-template-columns:1fr}}
.tiers ul li{border:0;padding:.25rem 0 .25rem 1.1rem;position:relative;color:var(--dim-dark)}
.paper .tiers ul li{color:var(--dim)}
.tiers ul li::before{content:"";position:absolute;left:0;top:.82em;width:.5rem;height:1px;background:var(--rule)}
.tiers form{margin:0}

/* Fristen: eine Liste von Daten, keine Ampel. Das Datum traegt die
   Display-Schrift, weil es hier die Ueberschrift ist. */
.fristen{list-style:none;padding:0;margin:1.6rem 0 0}
.fristen li{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:0 1.6rem;padding:1.2rem 0;border-top:1px solid var(--rule)}
.fristen li:first-child{border-top:2px solid var(--ink)}
.fristen time{display:block;font-family:"Fira Sans Condensed",system-ui,sans-serif;font-weight:800;font-size:1.5rem;line-height:1.1;letter-spacing:-.005em}
.fristen time span{display:block;font:400 .95rem/1.4 inherit;font-family:inherit;color:var(--dim)}
.fristen h3{margin:0 0 .3rem}
.fristen p{margin:0;color:var(--dim)}
.fristen .src{margin-top:.4rem;font-size:.92rem}
/* Manche Pflichten haengen daran, was ein Shop verkauft, und das sieht der
   Crawler nicht. Die Bedingung steht deshalb ueber dem Text und nicht darin:
   wer sie nicht erfuellt, hat nach einer Zeile aufgehoert zu lesen. */
.fristen .wenn{margin:0 0 .4rem;font-weight:600;color:var(--ink)}
@media(max-width:620px){.fristen li{grid-template-columns:1fr;gap:.5rem}}
/* Die weiteren Stichtage: die Zeile sagt die Zahl und den letzten Termin,
   damit niemand raten muss, was dahinter liegt. Die Liste darin faengt ohne
   die dicke erste Linie an -- sie ist die Fortsetzung, kein neuer Block. */
details.fristen-mehr>summary{list-style:none;cursor:pointer;font-weight:600;padding:.75rem 0;min-height:44px;display:flex;align-items:center;gap:.6rem;color:var(--dim);border-top:1px solid var(--rule);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--rule)}
details.fristen-mehr>summary::-webkit-details-marker{display:none}
details.fristen-mehr>summary::after{content:"";width:.45rem;height:.45rem;flex:none;margin-bottom:.2rem;border-right:1.5px solid var(--dim);border-bottom:1.5px solid var(--dim);transform:rotate(45deg);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
details.fristen-mehr[open]>summary::after{transform:rotate(-135deg);margin:.2rem 0 0}
details.fristen-mehr>summary:hover,details.fristen-mehr>summary:focus-visible{color:var(--ink)}
details.fristen-mehr>summary:hover::after{border-color:var(--ink)}
@media(prefers-reduced-motion:reduce){details.fristen-mehr>summary::after{transition:none}}
details.fristen-mehr .fristen{margin-top:0}
details.fristen-mehr .fristen li:first-child{border-top:1px solid var(--rule)}

.checklist{list-style:none;counter-reset:check;padding:0;margin:2.2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));gap:0 2.5rem}
.checklist li{counter-increment:check;border-top:1px solid var(--rule);padding:1.1rem 0 1.2rem 2.4rem;position:relative;break-inside:avoid;overflow-wrap:anywhere}
.checklist li::before{content:counter(check,decimal-leading-zero);position:absolute;left:0;top:1.05rem;font-family:FiraMono,ui-monospace,monospace;color:var(--dim)}
.checklist p{margin:.35rem 0 0;color:var(--dim)}

/* Druck. Das PDF ist dieselbe Seite, also entscheidet sich hier, ob eine
   Agentur es an ihren Kunden weitergibt oder erst nachbaut. Nacht wird Papier,
   alles Interaktive verschwindet, und kein Befund wird zwischen zwei Seiten
   zerrissen. */
/* Der Druck ist kein Bildschirmfoto der Seite. Eine Agentur legt dieses PDF in
   eine Kundenakte und reicht es weiter — es muss ein Dokument sein.

   Was am 31.08.2026 am ersten Blick auffiel: der Text begann an der Papierkante
   (Rand links und rechts stand auf 0), fuellte dann aber nur die linke Haelfte,
   weil --measure fuer eine Bildschirmspalte gedacht ist. Dazwischen standen
   Absaetze, die es nur im Browser gibt: "Dieser Bericht ist nicht auffindbar",
   der Seitenfuss mit Impressumslinks, der Verkaufsblock. */
@media print{
  body{background:#fff!important;color:var(--ink)!important;font-size:10.5pt;line-height:1.45}
  /* h1/h2/.lede setzen ihre Groesse ueber rem und clamp(), beides gegen die
     Bildschirmbreite und den html-Grundwert gerechnet — die 10.5pt oben
     aendern daran nichts, und ohne diese Zeilen druckt der Bericht seine
     Ueberschriften in voller Bildschirmgroesse. */
  h1{font-size:20pt}
  h2{font-size:13pt}
  .lede{font-size:10.5pt}
  .paper{background:#fff!important}
  .pad{padding:1.2rem 0!important}
  /* Die Seitenraender macht Chromium (pdf.js), hier also volle Breite — und die
     Zeilenlaenge darf die Spalte fuellen, statt 40 % Papier leer zu lassen. */
  .wrap{max-width:none;padding:0}
  :root{--measure:none}
  .lede,.note p,.finds p,.fristen p,footer p{max-width:none}
  .no-print,.print-only ~ .no-print{display:none!important}
  /* Nur im Browser sinnvoll: der Hinweis auf die unauffindbare Adresse, die
     Navigationslinks im Fuss. In einem weitergereichten PDF sind sie Ballast
     oder schlicht falsch. */
  .web-only{display:none!important}
  .top nav{display:none}
  .logo{color:var(--ink)}
  .logo i{color:var(--dim)}
  .lede,.fine,.dim{color:var(--dim)!important}
  /* Farbe traegt auf Papier genau eine Aussage: hier ist eine moegliche Luecke.
     Alles andere — Hinweise, Bestaetigungen, Tafel, Protokoll, Kennzahlen — ist
     Schrift und Haarlinie. Eine Agentur legt dieses Blatt in eine Kundenakte;
     vier Farben darin sehen nach Werbung aus, eine nach Befund. */
  /* Die Tafel des fertigen Scans auf Papier. Ohne diese vier Zeilen steht sie
     in Nachtfarben auf Weiss: der Rahmen in Papierfarbe (unsichtbar), die
     erledigten Stufen ebenfalls (unsichtbar), die Zeiten in Hellblau. Die
     laufende Leiste ist eine Bildschirmsache und faellt weg. */
  .scan-panel{border-top-color:var(--ink)}
  .scan-pulse{display:none}
  .stage-list,.stage-list li,.log li{border-color:var(--rule)}
  /* Feste zwei Spalten: auto-fit setzt auf der Papierbreite drei, und dann
     steht eine Stufe allein in einer Zeile mit einem Drittel Linie darunter.
     Bei fuenf Stufen bleibt die letzte allein in der dritten Zeile -- das ist
     die verbleibende Unregelmaessigkeit, kein neues Problem. */
  .stage-list{grid-template-columns:repeat(2,1fr)}
  .stage-list li{color:var(--dim)}
  .stage-list li.done{color:var(--ink)}
  .stage-list li.done::before{background:var(--ink);border-color:var(--ink)}
  .stage-list li::before{border-color:var(--rule)}
  .scan-status p,.log time,.log b{color:var(--dim)!important}
  .log.fertig span{color:var(--ink)}
  .log.fertig li.late span{color:var(--dim)}
  .badge{color:var(--dim)!important}
  .finds .red .badge{color:var(--signal-ink)!important}
  .kennzahlen b{color:var(--ink)}
  .finds li,.note,table,h2{break-inside:avoid}
  /* Dichter gesetzt als auf dem Bildschirm: eine Kundenakte mit 27 Befunden auf
     zehn Seiten liest niemand zu Ende. Screen bleibt grosszuegig -- hier
     lesen Sie einen scrollenden Bericht, kein Papierstapel. */
  .finds{margin-top:1rem}
  .finds li{padding:.5rem 0}
  .finds :is(h3,h4){font-size:1em}
  .finds p{font-size:.92em;margin-top:.2rem}
  .finds .ev{font-size:.82em;margin-top:.15rem}
  h3.gruppe{break-after:avoid;margin-top:1.4rem}
  details.befund>summary{padding:0;margin:0}
  details.befund>summary::after{display:none}
  details.befund[open]>summary+*{margin-top:.2rem}
  /* 0,62rem waren 7,4pt in Grossbuchstaben -- die Einstufung, das Wichtigste
     an jeder Zeile, war im PDF die kleinste Schrift. Gefunden am 15.09.2026
     vom Design-Detektor, der die Druckwerte las. */
  .badge,.stumm{font-size:.7rem}
  table{margin-top:1rem}
  th{padding:0 1rem .4rem 0}
  td{padding:.5rem 1rem .5rem 0}
  .fristen{margin-top:1rem}
  /* Im PDF sind alle Stichtage offen; die Aufklappzeile waere dort ein
     Knopf auf Papier. */
  details.fristen-mehr>summary{display:none}
  .fristen li{padding:.5rem 0}
  /* Dieselbe Groesse wie die Befunde, aus demselben Grund -- eine Frist ist
     kein Befund, aber auf Papier ist sie auch kein zweites Dokument mit
     eigener Typografie. */
  .fristen h3{font-size:1em}
  .fristen time{font-size:1em}
  .fristen time span{font-size:.85em}
  .fristen p{font-size:.92em}
  .fristen .src{font-size:.82em}
  .fristen .wenn{font-size:.92em}
  h2{margin-top:1.3rem!important}
  /* Eine Frist bleibt zusammen, solange sie auf eine Seite passt; die langen
     duerfen umbrechen. Mit break-inside:avoid sprang die erste lange Frist auf
     die naechste Seite und liess eine halbe Seite leer — das sieht aus, als
     fehle etwas. Der Stichtag darf nur nicht allein stehen bleiben. */
  .fristen li{break-inside:auto}
  .fristen h3,.fristen time{break-after:avoid}
  h2{break-after:avoid}
  a{text-decoration:none;color:inherit}
  /* Eigenes Blatt. Drei Versuche, den Anhang mitlaufen zu lassen, sind an
     Chromium gescheitert: break-inside:avoid haelt hier weder auf der
     Sektion noch auf einem div noch auf der Tabelle, und jedes Mal stand die
     Ueberschrift am Fuss der Seite davor oder die Tabelle riss mitten
     entzwei. Ein erzwungener Umbruch haelt immer, und er kostet hier nichts:
     die letzte Seite war ohnehin zu zwei Dritteln leer. */
  .anhang{break-before:page;border-top:0;margin-top:0;padding-top:0}
  .quellen caption{margin-top:1.2rem}
  .quellen{font-size:9pt}
  .quellen td{padding:.32rem 1rem .32rem 0}
  .quellen tr{break-inside:avoid}
  /* Der Titelblock steht nur auf Papier: im Browser traegt ihn die Seite selbst.
     Achtung: das !important hier hat schon einmal das Flex-Layout der
     Kennzahlen darunter ueberschrieben — die Liste stand dann untereinander
     statt in einer Zeile. Deshalb bekommt jedes Element mit eigenem display
     seine eigene Regel. */
  .print-only{display:block!important}
  ul.print-only.kennzahlen{display:flex!important}
  .titel{border-bottom:2px solid var(--ink);padding-bottom:.8rem;margin-bottom:1.4rem}
  .titel .art{font:700 9pt/1 "Fira Sans Condensed",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
  .titel h1{margin:.35rem 0 .2rem}
  .kennzahlen{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.9rem 0 .7rem;padding:0;list-style:none;font-size:9.5pt}
  .kennzahlen b{font-family:"Fira Sans Condensed",system-ui,sans-serif;font-size:13pt}
  /* Kein erzwungener Seitenumbruch mehr vor den Befunden -- die Tafel, die
     hier vorher als Deckel diente, ist aus dem Druck raus (siehe .web-only
     oben), und ohne sie waere die erste Seite sonst halb leer. */
  /* Auf Papier kann niemand schieben: alle elf Rechner-Kombinationen zeigen,
     Stepper und Zahlweise-Umschalter weg -- beide sind interaktiv und
     bedeuten auf einem gedruckten Blatt nichts. */
  .pr-stepper,.pr-intervall-zeile{display:none}
  .pr-plan-daten{display:block!important;border-top:1px solid var(--rule);padding-top:.6rem;margin-top:.6rem}
  .pr-plan-daten:first-of-type{border-top:0;padding-top:0;margin-top:0}
}
.print-only{display:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}