/* ===========================================================================
   ANKYR — die Klick-Bühne (Fassung vom 24.08.2026)
   Ergänzt styles.css. Eine Tafel füllt den Bildschirm, geblättert wird mit
   den Knöpfen unten oder den Pfeiltasten. Ohne JavaScript stehen alle Tafeln
   untereinander und die Seite ist eine gewöhnliche Scroll-Seite — das Skript
   ist Komfort, nie Voraussetzung.
   Entschieden im Brainstorming vom 24.08.: Klick-Bühne statt Scrollen,
   helle Bühne (Fast-Weiß und Sand im Wechsel), Nyar trägt die Nacht.
   =========================================================================== */
:root{ --kante:clamp(1.2rem,6vw,5rem) }

body{ background:var(--surface) }

.tafel{ min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,7vw,5rem) var(--kante); position:relative; isolation:isolate;
  overflow:hidden }
.js .tafel{ display:none;
  min-height:calc(100svh - var(--kopfhoehe,73px) - var(--fusshoehe,64px));
  padding-top:clamp(1rem,2.5vw,2rem); padding-bottom:clamp(1rem,2.5vw,2rem) }
.js .tafel.aktiv{ display:flex }
.tafel-innen{ max-width:1240px; margin:0 auto; width:100% }
.tafel.sand{ background:var(--bg) }

/* ---------- Blätterleiste ---------- */
.blaettern{ display:none; align-items:center; justify-content:space-between; gap:1rem;
  max-width:1240px; margin:0 auto; padding:.6rem var(--kante) 1.1rem }
.js .blaettern{ display:flex }
.blaettern button, .blaettern a.weiterseite{ display:inline-flex; align-items:center; gap:.5rem;
  min-height:var(--ziel); padding:0 1.4rem; font:inherit; font-weight:600;
  color:var(--coral-tief); background:var(--surface); border:1px solid var(--line-fest);
  border-radius:14px; cursor:pointer; text-decoration:none }
.blaettern button:hover, .blaettern a.weiterseite:hover{ background:rgba(196,99,59,.08) }
.blaettern button[disabled]{ visibility:hidden }
.blaettern a.weiterseite{ display:none }
.wo{ font-family:var(--mono); font-size:.74rem; letter-spacing:.16em; color:var(--teal-lt) }

/* ---------- Kapitelmarke, Sätze, Stufen (aus der Vorschau übernommen) ---------- */
.marke-kapitel{ font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; margin:0 0 1.2rem; display:flex; align-items:baseline; gap:.7rem;
  color:var(--coral-tief) }
.marke-kapitel .nr{ color:var(--teal-lt); letter-spacing:.1em }
.tafel h2{ font-size:clamp(1.7rem,3vw,2.3rem); max-width:22ch; margin-bottom:1rem }
.satzbeispiel{ font-family:var(--serif); font-weight:600; font-size:clamp(1.25rem,2.2vw,1.6rem);
  line-height:1.3; max-width:24ch; margin:0 }
/* 17px ist die Grundschrift des body; .stufe p und .dazu erben sie ohnehin.
   Vorher lief .lauf ueber einen eigenen Clamp und im flachen Fenster ueber
   1rem - und 1rem sind 16px, nicht 17: rem misst die Wurzel, nicht den body. */
.lauf{ font-size:clamp(17px,1.8vw,19.2px); line-height:1.6; margin:0 0 1rem; color:var(--ink);
  /* 54ch statt 60ch: ch misst die Ziffernbreite, gewoehnliche Prosa ist
     schmaler - 60ch ergaben gemessene 79 Zeichen je Zeile. Bei 60ch griff
     ausserdem die Spalte statt des Masses, das Mass war also wirkungslos. */
  max-width:54ch }
.dazu{ color:var(--teal-lt); max-width:48ch; margin:1.2rem 0 0 }
.weiter{ margin:1.2rem 0 0 } .weiter a{ font-weight:600 }
.paar{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:center }
@media (min-width:900px){ .paar{ grid-template-columns:1.05fr .95fr } }

.saetze6{ list-style:none; margin:1.8rem 0 0; padding:0; display:grid;
  grid-template-columns:1fr; gap:.4rem 3rem }
.saetze6 li{ padding:.85rem 0; border-top:1px solid var(--line) }
.saetze6 .n{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--ink-faint); display:block; margin-bottom:.25rem }
.saetze6 p{ margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.25 }
@media (min-width:900px){ .saetze6{ grid-template-columns:1fr 1fr } }

.stufen{ display:grid; gap:2rem; grid-template-columns:1fr; margin-top:2.2rem }
.stufe{ border-top:2px solid var(--coral); padding-top:1rem }
.stufe .n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--coral-tief);
  display:block; margin-bottom:.5rem }
.stufe h3{ margin:0 0 .4rem; font-size:1.3rem }
.stufe p{ margin:0; color:var(--ink-soft); max-width:34ch }
@media (min-width:820px){ .stufen{ grid-template-columns:repeat(3,1fr); gap:clamp(2rem,4vw,3.4rem) } }

/* ---------- Kopftafel der Startseite ---------- */
.hero-grafik{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.58 }
.hero-grafik svg{ position:absolute; height:158%; width:auto; left:34%; top:-30% }
.stand{ font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal-lt); margin:0 0 1.6rem; display:flex; align-items:center; gap:.6rem }
.stand::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--coral);
  flex:none; box-shadow:0 0 0 4px rgba(196,99,59,.18) }
.tafel h1{ font-size:clamp(2.1rem,4.8vw,3.25rem); line-height:1.06; letter-spacing:-.025em }
.tafel h1 .gold{ white-space:nowrap }
.tafel .lead{ font-size:clamp(1.06rem,1.5vw,1.18rem); max-width:34ch }
.aktionen{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem }

/* ---------- Bilder: Foto der Hand, randlose Porträts ---------- */
.telefon{ margin:0 }
/* Das Bild bestimmt seine Hoehe, nicht der Kasten (27.08.2026).
   Vorher stand hier height:min(60svh,540px) mit width:auto und
   max-width:100%. War der Behaelter schmaler als die Breite, die zu
   dieser Hoehe gehoert, schnitt max-width die Breite ab und die Hoehe
   blieb stehen - das Bild wurde gestaucht. Das passierte nicht nur am
   Handy (Andi, 26.08.), sondern auch auf einem 2268 px breiten Schirm:
   Kasten 559x540 bei einem Bild im Verhaeltnis 1600x1195.

   Nachtrag 28.08.: width:100% war der zweite Fehler. Eine feste Breite
   treibt die Hoehe, und auf 'Ueber mich' wuchs das Portrait dadurch auf
   538 px - die Tafel wurde 101 px hoeher als das Fenster, die Seite fing
   an zu scrollen und schob den Kopf unter die Kopfzeile. Richtig ist:
   BEIDE Masse auf auto und BEIDE Grenzen setzen. Dann skaliert der
   Browser selbst verhaeltnistreu in max-width und max-height hinein -
   kein Stauchen, kein Beschnitt, kein Ueberhang. */
.telefon.foto img{ width:auto; height:auto;
  max-width:min(100%,560px); max-height:min(60svh,540px); display:block; margin:0 auto;
  -webkit-mask-image:radial-gradient(72% 72% at 52% 46%, #000 52%, transparent 97%);
          mask-image:radial-gradient(72% 72% at 52% 46%, #000 52%, transparent 97%) }
.randlos{ margin:0; max-width:440px }
.randlos img{ width:100%; height:auto; border:0; border-radius:0;
  -webkit-mask-image:radial-gradient(62% 66% at 42% 46%, #000 38%, transparent 94%);
          mask-image:radial-gradient(62% 66% at 42% 46%, #000 38%, transparent 94%) }
.randlos figcaption{ margin-top:.5rem; font-family:var(--mono); font-size:.75rem;
  letter-spacing:.04em; color:var(--teal-lt); max-width:44ch }
/* Kein ovaler Beschnitt mehr (28.08.): die beiden mask-image-Zeilen ersatzlos
   gestrichen, nicht ueberschrieben. Wer stattdessen .aufgeloest auf die figure
   gibt, bekommt die weiche Kantenausloesung von unten im Stylesheet - die
   gewinnt nur, weil hier keine eigene mask-image mehr steht. */
.portraet img{ width:auto; height:auto;
  max-width:min(100%,500px); max-height:min(52svh,460px); display:block; margin:0 auto;
  border:0; border-radius:0 }

/* Kleines Beweisfoto in der Werkstatt-Tafel (28.08.): das Bronzemedaillon
   neben dem Werkbank-Text, hochformatig (757x1024). Dieselbe Lektion wie
   ueberall in dieser Datei: width/height auto, BEIDE Grenzen gesetzt -
   width:100% oder eine feste Hoehe stauchen oder beschneiden das Bild. */
/* Nachtrag 28.08., zweite Messung: Die vorige Fassung (150px fest) war
   gegen ein zu grosses Prueffenster gemessen. Die Hoehe steht jetzt in
   svh statt in Pixeln, aus demselben Grund wie ueberall sonst in dieser
   Datei: eine feste Pixelzahl stimmt fuer genau ein Fenster und bricht
   beim naechsten - svh atmet mit der tatsaechlichen Fensterhoehe mit.
   Gemessen bei 24svh haelt die Kante, bei 26svh bricht sie schon - der
   Wert steht bewusst mit Abstand dazwischen. max-width:160px greift
   praktisch nie (bindend ist fast immer max-height), bleibt aber als
   Notbremse stehen, falls das Bild einmal gegen ein sehr hohes, schmales
   Fenster laeuft. */
/* Nachtrag 28.08., dritte Messung: Die figure stand im Bauskript nach dem
   Absatz und stapelte sich darunter - "Kastelung". Jetzt steht sie davor
   UND floatet rechts, der Text laeuft links daran vorbei; margin-bottom
   haelt den Text ab, margin-left haelt das Bild vom Text weg. */
.medaillon-klein{ float:right; margin:0 0 .6rem 1.2rem }
/* Gespiegelt (28.08.): das Zeichen soll in den Text hineinschauen, nicht
   aus der Seite heraus. Nur CSS - die Bilddatei bleibt unangetastet. */
.medaillon-klein img{ width:auto; height:auto;
  max-width:160px; max-height:min(22svh,200px); display:block;
  transform:scaleX(-1) }

/* ---------- Messwerte ---------- */
.mess{ display:grid; gap:.4rem; margin-top:1.6rem; max-width:640px }
.messzeile{ display:flex; align-items:center; gap:1rem; padding:1rem 0;
  border-top:1px solid var(--line-fest) }
.messzeile svg{ flex:none }
.messzeile .was{ flex:1; font-size:1.02rem }
.messzeile .wert{ font-family:var(--mono); font-weight:500; font-size:.95rem; color:var(--ink) }
.quelle{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--teal-lt);
  margin-top:1rem; max-width:70ch }

/* ---------- Hinweis- und Schluss-Tafeln ---------- */
/* 54ch wie .lauf: der Krisenhinweis war mit 64ch die breiteste Zeile der
   ganzen Seite - ausgerechnet der Text, den man im Ernstfall schnell
   erfassen muss. Das Mass gewinnt gegen .lauf (Klasse + Element schlaegt
   eine Klasse); .js .lauf setzt nur Schriftgroesse, keine Breite. */
/* Feste 17px statt .95rem: der Krisenhinweis war je nach Fensterhoehe mal
   15,2 mal 17 Pixel gross - der kleinste Text der Seite ausgerechnet dort,
   wo jemand im Ernstfall schnell eine Telefonnummer finden muss. 17px ist
   auch der Wert, den .js .lauf im flachen Fenster setzt; beide Faelle
   liefern damit dieselbe Groesse. Wer .js .lauf aendert, muss hier
   mitziehen - im flachen Fenster gewinnt jene Regel.

   Und .lauf statt p: als .hinweis-tafel p traf die Regel auch die
   Kapitelmarke "01 Wichtiger Hinweis" - Monoschrift in .74rem, die
   dadurch auf 15,2px aufgeblasen wurde. */
.hinweis-tafel .lauf{ color:var(--ink-soft); font-size:17px; max-width:54ch; margin:0 0 .7rem }
.hinweis-tafel .krise{ margin-top:1rem; max-width:660px }
.schluss-raster{ display:grid; gap:1.6rem; grid-template-columns:1fr; margin-top:1.6rem }
@media (min-width:820px){ .schluss-raster{ grid-template-columns:repeat(3,1fr); gap:2.2rem } }
.schluss-raster h3{ font-size:1.02rem; margin:0 0 .5rem }
.schluss-raster p{ margin:.2rem 0; font-size:.92rem; color:var(--teal-lt); max-width:44ch }
.schluss-raster a{ color:var(--coral-tief) }
.copyzeile{ margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 1rem; justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--teal-lt) }

/* ---------- Kopfzeile auf Bühnenbreite ---------- */
/* Die Polsterung gehoert VOR die 1240er-Spalte, nicht hinein. Die Tafeln
   legen var(--kante) aussen an (.tafel padding) und zentrieren 1240 darin;
   die Kopfzeile rechnete die Kante bisher innerhalb ihrer 1240 und stand
   dadurch um eine Kantenbreite weiter rechts als alles darunter. Mit
   box-sizing:border-box ergibt 1240 + 2 Kanten dieselbe linke Kante. */
.kopf-innen{ max-width:calc(1240px + 2 * var(--kante));
  padding-left:var(--kante); padding-right:var(--kante) }

/* ---------- Flache Fenster: Schrift gibt nach, bevor die Tafel es tut ---------- */
@media (max-height:760px){
  .js .tafel h1{ font-size:clamp(1.8rem,4vw,2.6rem) }
  .js .tafel h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-bottom:.6rem }
  .js .marke-kapitel{ margin-bottom:.6rem }
  .js .tafel .dazu{ margin-top:.7rem }
  .js .lauf{ font-size:17px; margin-bottom:.7rem }
  .js .messzeile{ padding:.6rem 0 }
  .js .quelle{ margin-top:.7rem; font-size:.68rem }
  .js .saetze6 li{ padding:.6rem 0 }
  /* Die beiden festen Bildhoehen sind am 27.08. entfallen - siehe oben.
     Im flachen Fenster gibt jetzt ebenfalls die Hoehe nach. */
  .js .randlos{ max-width:min(380px,40vw) }
  .js .stufen{ margin-top:1.2rem; gap:1.2rem }
  .js .schluss-raster{ gap:1rem }
}
/* ---------- Bilder auf schmalen Schirmen ----------
   Die Kombination height:<fest> + width:auto + max-width:100% ist auf einem
   Handy die Ursache fuer gequetschte Bilder: max-width schneidet die Breite
   ab, waehrend die Hoehe stehenbleibt. Hier gibt deshalb die Hoehe nach
   statt der Breite - dann steht das Bild ganz da und wird nicht beschnitten.
   Gemeldet von Andi am 26.08., gemessen und behoben am 27.08. */
/* Die frueher hier stehende Sonderregel fuer schmale Schirme ist entfallen:
   seit die Grundregel oben width:100%/height:auto setzt, gilt sie in jeder
   Fensterbreite. Eine Ausnahme braucht es dafuer nicht mehr. */

@media (max-width:760px){
  .hero-grafik svg{ left:auto; right:-52%; height:100%; top:0 }
  .hero-grafik{ opacity:.7 }
}
@media (max-width:560px){
  /* var(--kante) statt fester 1rem: die Tafeln bleiben auch hier bei der
     Kante, feste 1rem liessen die Wortmarke daneben stehen. */
  .kopf-innen{ gap:.4rem; padding-left:var(--kante); padding-right:.4rem }
  .marke{ font-size:1.08rem; gap:.45rem }
  .marke img{ width:26px; height:26px }
  .nav a{ padding:0 .5rem; font-size:.92rem }
}
/* Paket "Kopfzeile auf dem Handy in eine Zeile", 08.09.2026.
   Gemessen bei 375 px vor der Aenderung: Logo 101,5 + Navigation 212,3 +
   Klangknopf 48 + zwei Luecken 12,8 = 374,6 px, verfuegbar sind 346,1 px
   (375 minus Kante 22,5 minus 6,4 rechts). Es fehlten 28,5 px, "Ueber
   mich" rutschte in eine zweite Zeile, die Kopfzeile wurde 136 statt 76 px
   hoch. Bei 414 px passt es (382,8 verfuegbar), deshalb greift dieser
   Block nur bis 413 px - darueber aendert sich nichts.
   Was schrumpft: Navigationsschrift .92 auf .85rem, Innenabstand der Links
   .5 auf .3rem, Luecke .4 auf .3rem, Wortmarke 1.08 auf 1rem. Was NICHT
   schrumpft: die Hoehe der Links bleibt var(--ziel) = 60 px, und min-width
   haelt jeden Link mindestens 44 px breit - das Tippziel bleibt 44 x 44.
   Der Klangknopf bleibt 48 px (styles.css, Mikes Wunsch fuer das Handy).
   Der Unterstrich der aktiven Seite rueckt mit dem Innenabstand mit,
   sonst bliebe er 13,6 px eingerueckt und wuerde bei "Start" fast
   verschwinden. Rechnerisch danach: 96,5 + 180,6 + 48 + 9,6 = 334,7 px,
   Luft 11,4 px. */
@media (max-width:413px){
  .kopf-innen{ gap:.3rem }
  .marke{ font-size:1rem }
  .nav a{ padding:0 .3rem; font-size:.85rem; min-width:44px; justify-content:center }
  .nav a[aria-current="page"]::after{ left:.3rem; right:.3rem }
}
@media print{
  .hero-grafik{ display:none }
  .blaettern{ display:none }
}

/* ---------------------------------------------------- Strichzeichen (Stufen)
   Drei kleine Zeichen im Stil des Anker-Logos: Glocke, Sprechblase, Note.
   Koralle nur als Grafik, nie als Schriftfarbe (Kontrastregel). */
.stufe .zeichen{ display:block; margin:.55rem 0 .5rem }
.stufe .zeichen svg{ width:30px; height:30px; display:block }

/* ------------------------------------------------------------- Einschweben
   Beim Tafelwechsel gleitet der Inhalt sanft ein — Bewegung als Gewürz,
   nicht als Gericht. Nur mit Skript (.js), und nur wenn das System
   Bewegung nicht reduziert haben will. Ohne Skript: keine Animation. */
@media (prefers-reduced-motion: no-preference){
  .js .tafel.aktiv .tafel-innen{ animation:einschweben .45s ease-out both }
  .js .tafel.aktiv .telefon,
  .js .tafel.aktiv .randlos{ animation:einschweben .6s ease-out both }
  @keyframes einschweben{
    from{ opacity:0; transform:translateY(14px) }
    to{ opacity:1; transform:none }
  }
}

/* ------------------------------------------------------ Zeichnungs-Figuren
   Die Strichzeichnungen (Werkbank, Verabredung) sitzen wie die Fotos in der
   rechten Spalte des Paar-Layouts. */
.zeichnung{ margin:0; display:flex; align-items:center; justify-content:center }
.zeichnung svg{ width:min(100%,430px); height:auto; display:block }
.zeichnung.klein svg{ width:min(100%,360px) }
@media (max-height:760px){ .js .zeichnung svg{ width:min(100%,340px) } }

/* ------------------------------------------------------------- Werkbank
   Drei Werkstuecke auf der Bank: der echte Nyar-Schirm, der skizzierte
   Gastro-Schirm, und ein offener Platz mit Fragezeichen. */
.werkbank{ flex-direction:column; gap:0 }
.werkreihe{ display:flex; align-items:flex-end; gap:min(18px,3.2vw); padding:0 min(14px,2vw) }
.werkstueck{ display:flex; flex-direction:column; align-items:center; gap:4px; width:min(118px,25vw) }
.werkstueck img{ width:100%; height:auto; border-radius:12px; display:block;
  border:2px solid var(--coral) }
.werkstueck.skizze svg{ width:100%; height:auto; display:block; border-radius:12px;
  outline:2px dashed var(--ink-faint); outline-offset:-1px; opacity:.92 }
.werkstueck.offen{ align-self:stretch; justify-content:flex-end }
.werkstueck.offen .fragen{ display:flex; align-items:center; justify-content:center;
  width:100%; aspect-ratio:120/218; border-radius:12px; border:2px dashed var(--ink-faint);
  font-family:var(--serif, Fraunces, Georgia, serif); font-size:1.6rem; color:var(--ink-faint) }
.ws-name{ margin-top:8px; font-family:Fraunces, Georgia, serif; font-weight:600;
  font-size:.95rem; color:var(--ink) }
.ws-status{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint) }
.werkbank .bank{ width:100%; max-width:430px; margin-top:14px }
.werkbank.klein .werkstueck{ width:min(104px,25vw) }
@media (max-height:760px){ .js .werkstueck{ width:min(100px,25vw) } }

/* Aussprache-Zeilen unter den beiden Namen: leise, im Etiketten-Ton. */
.sprich{ margin:.1rem 0 0; font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; color:var(--ink-faint) }

/* Handy-Feinschliff (25.08. Abend-Durchgang): Die Werkbank schrumpft mit dem
   Schirm (min(...,25vw)) statt die Tafel aufzudruecken; die Mono-Etiketten
   ruecken enger zusammen, damit sie in die schmaleren Karten passen. */
@media (max-width:480px){
  .ws-status{ font-size:.55rem; letter-spacing:.09em }
  .ws-name{ font-size:.95rem }
}

/* Aufgeloeste Raender (25.08. nachts): Das Foto laeuft per Maske weich in den
   Seitengrund aus - echte Durchsichtigkeit statt eingebackener Creme-Vignette,
   deshalb kann sich nie wieder ein Rechteck abzeichnen. Nur fuer Figuren mit
   der Klasse .aufgeloest; die uebrigen Portraits behalten ihre gebackenen
   Kanten, bis sie ebenfalls neu bestellt werden. */
.aufgeloest img{
  -webkit-mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                     linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
                     linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
          mask-composite:intersect;
}

/* ---------------------------------------- Statusband und Status-Kasten
   Paket "Noch nicht fertig", 08.09.2026. Besucher fragten per Mail nach dem
   Download: sechs Fotos der laufenden App ueberstimmen das Etikett "im Test".
   Das Band sitzt als eigene Zeile IM header ueber .kopf-innen (buehne.js
   misst --kopfhoehe am header; die Kopfzeile selbst wird nicht enger). Der
   Kasten ist eine eigene Tafel nach dem letzten App-Foto.
   Beide: Nacht mit Sand - dieselbe Paarung wie Schrift auf Grund, nur
   umgekehrt, 14,3:1 (AAA). Kein Blinken, nichts zum Schliessen.
   Fokusring: der Standard ist Nacht auf Nacht und damit unsichtbar - im
   Kasten deshalb in Sand. */
.statusband{ margin:0; background:var(--ink); color:var(--bg); font-size:.9rem;
  line-height:1.4; text-align:center; padding:.5rem .9rem }
.status-kasten{ background:var(--ink); color:var(--bg); border-radius:14px;
  padding:clamp(1.4rem,4vw,2.2rem) clamp(1.2rem,4vw,2rem); max-width:560px }
.status-kasten h2{ color:var(--bg); font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .8rem }
.status-kasten p{ margin:0 0 .6rem; font-size:clamp(17px,1.8vw,19.2px); line-height:1.5; max-width:40ch }
.status-kasten p:last-child{ margin-bottom:0 }
.status-kasten a{ color:var(--bg); font-weight:600; text-decoration:underline;
  text-underline-offset:.15em }
.status-kasten a:focus-visible{ outline-color:var(--bg) }