/* ADWENIA Website, Stylesheet. Eine Datei, reines CSS, kein Praeprozessor.
   Alle Werte stammen aus STYLE-GUIDE.md. Farben ausschliesslich ueber die
   Custom Properties in :root, keine Zahlenwerte im Regelwerk.
   E64 bis E68: Hausidentitaet aus dem Leitfaden der Schulungsreihe
   (content/referenz/styling_guide_schulungsreihe.md), abgestimmt auf die
   Website. Vorfassung mit der vorlaeufigen CI E22 in
   content/archiv/2026_10_12_style_e22.css.txt. */

/* E65: Titel in Manrope 800 wie die alte Seite, Text in adwenia Text, der
   Teilmenge der Hausschrift Liberation Sans (D-052 der Schulungsreihe).
   Lokal, OFL 1.1, Lizenz neben den Dateien. swap, damit Text sofort steht.
   Ersatz Arial, metrisch gleich. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"adwenia Text";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/adwenia-text-regular.woff2) format("woff2")}
@font-face{font-family:"adwenia Text";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/adwenia-text-bold.woff2) format("woff2")}
@font-face{font-family:"adwenia Text";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/adwenia-text-italic.woff2) format("woff2")}

:root{
 /* E64: Rot, Schwarz, Weiss. Rot nur als Akzent, tragende Flaechen schwarz.
    Kontraste gemessen mit quelle/werkzeuge/kontrast.py, STYLE-GUIDE.md 2. */
 --grund:#ffffff;          /* --paper, Seitengrund */
 --flaeche:var(--band);    /* E183: Karten ohne Verweis, Formular, Partner, Tafeln, dieselbe Creme wie die Baender statt Grau #f7f5f4. Text 17,43, Nebentext 7,43, Dunkelrot 7,63 zu 1 */
 --band:#faf6f0;           /* E76, E182: Baender der Startseite und Seitenkoepfe, Creme statt Grau #efebe8, das kuehle Grau wirkte drueckend. Text 17,43, Nebentext 7,43, Dunkelrot 7,63, --hervorhebung 5,31, --akzent 4,61 zu 1 */
 --abstand-band:clamp(2.5rem,5vw,4rem); /* E80, aendert E76: Innenabstand je Band oben und unten, 40 bis 64 px statt 56 bis 88 */
 --text:#15110f;           /* --ink, Fliesstext, 18,77 zu 1 auf --grund */
 --neben:#574f4b;          /* --muted, Nebentext, 8,00 auf --grund, 7,36 auf --flaeche */
 --linie:#e3ded9;          /* --rule, feine Linien, nie Text */
 --struktur:#111111;       /* --black, Knoepfe, Kopf- und Fusslinie, dunkler Block */
 --akzent:#e10600;         /* --brand, Markenrot: Linien, Streifen, Eyebrow, Listenpunkte, Hover. 4,97 auf --grund */
 --akzent-text:#a30000;    /* --brand-deep, Verweise und h3, 8,21 auf --grund, 7,56 auf --flaeche */
 --hervorhebung:#cf0500;   /* E135: fette Kernwoerter in Ueberschriften. Markenrot, 8 % tiefer: 5,71 auf --grund, 5,31 auf --flaeche und --band (beide Creme seit E182, E183, vorher 5,26 und 4,82, nachgemessen E303), 4,98 auf --akzent-hell. Nie auf --sand (4,18). --akzent lag auf dem grauen Band bei 4,19, --akzent-text wirkt weinrot */
 --akzent-hell:#fbeceb;    /* --brand-tint, Callout, Hinweiszeile */
 --auf-akzent:#ffffff;     /* Schrift auf Rot 4,97, auf Schwarz 18,88 */
 --dunkel:#111111;         /* E64: der eine dunkle Block je Seite, schwarz statt Navy */
 --auf-dunkel:#ffffff;     /* Ueberschrift im dunklen Block, 18,88 */
 --auf-dunkel-neben:#c9c4c0; /* Fliesstext im dunklen Block, 10,92 */
 --akzent-dunkel:#ff4136;  /* Verweise im dunklen Block, 5,45. --akzent hat dort nur 3,80 */
 --sterne:#f4b400;         /* E164: Sternzeichen in Gold wie bei Google statt --akzent, nur Zierde: die Note steht immer als Text daneben (Vertrauenszeile) oder fuer Vorlesesoftware (Stimmen), deshalb ohne Kontrastanforderung (WCAG 1.4.11 gilt nicht fuer Zierde) */
 --fokus:#e10600;
 --schatten:0 6px 22px rgba(225,6,0,.10); /* E67: Karten mit Verweis beim Ueberfahren */
 --schatten-kopf:0 1px 0 rgba(17,17,17,.03),0 6px 18px rgba(17,17,17,.05); /* E81: weicher Schatten unter dem Kopf statt 2 px Schwarz */
 --schatten-karte:0 1px 2px rgba(17,17,17,.04),0 6px 18px rgba(17,17,17,.06); /* E164: Karten der Stimmen, weich wie der Kopf */
 --pfeil-schwebt:drop-shadow(0 8px 16px rgba(17,17,17,.13)); /* E147: Leistungspfeil beim Ueberfahren, nur weicher Schatten unter der Pfeilform, keine Kontur mehr (ersetzt E143, E145) */
 --akzent-mittel:#f1908d;  /* E117: Zwischenton der Kopfgrafik, 40 % von --akzent-hell zu --akzent, Text 8,15 zu 1, nur Flaeche */
 --stufe-2:#fdf4f4;        /* E138, E141: Pfeile der Leistungsstufen, Flaeche wird roeter, gleichmaessig in Dritteln bis --stufe-4. Text 17,36, --neben 7,40, --hervorhebung 5,29 */
 --stufe-3:#fceae9;        /* E141: Text 16,16, --neben 6,89, --hervorhebung 4,92 */
 --stufe-4:#fadfde;        /* E141: Text 14,90, --neben 6,35, --hervorhebung 4,54. Vorher #f8d2d0, dort hatte --hervorhebung nur 4,11 */
 --sand:#e4dbd3;           /* E94: warme Nuance, erste Stufe der Kopfgrafik. Text 13,74 zu 1 */
 --sand-tief:#cfc2b6;      /* E94: zweite Stufe der Kopfgrafik. Text 10,76 zu 1 */
 --schein-linie:0 2px 4px rgba(225,6,0,.35); /* E104: Schein der roten Linie in der Kopfgrafik */
 --verlauf-kopf:linear-gradient(to bottom,var(--grund),var(--band) min(9rem,35%),var(--band) max(100% - 6rem,65%),var(--grund)); /* E107, E109, E110: Kopfband und Seitenkopf, oben und unten weich in Weiss */
 --fuss:var(--sand);       /* E100: Fuss eine Stufe waermer als die Baender, Text 13,74, Nebentext 5,86, Dunkelrot 6,01 zu 1 */
 --hinweis-grund:#fff4e0;
 --hinweis-text:#7a4100;   /* Platzhalter, 7,46 zu 1 */
 --r-klein:6px;            /* E68: Knoepfe, Felder, Karten wie Leitfaden 7.7 */
 --r-gross:8px;
 --schrift:"adwenia Text","Liberation Sans",Arial,"Helvetica Neue",sans-serif;
 --schrift-titel:"Manrope","adwenia Text",Arial,sans-serif;
 --breite:1120px;
 --lesebreite:72ch;
 /* E219: Farben der Plattformen beim Ueberfahren der Profilzeichen, aus dem
    Bestand (www_old/less/style.less), Facebook ohne Bestand, Farbe der Plattform.
    E233: beim Ueberfahren fuellt die Farbe die Flaeche, das Zeichen wird weiss, wie die
    Knoepfe im Fuss des Bestands. X damit schwarz wie die Plattform, sichtbar
    als Flaeche (ersetzt das Twitterblau aus E231). Gemessen in STYLE-GUIDE.md 2 */
 --marke-linkedin:#007bb5;
 --marke-xing:#126567;
 --marke-x:#000000;
 --marke-facebook:#1877f2;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--schrift);font-size:1.0625rem;line-height:1.6;
 background:var(--grund);color:var(--text);-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:800;line-height:1.2;margin:1.6em 0 .5em;letter-spacing:-.01em}
/* E132: lange Woerter wie Geschaeftsbedingungen trennen statt ueber den Rand zu laufen, bei 360 px ragte der Titel der AGB 21 px hinaus */
h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(2rem,6vw,3rem);margin-top:.6em}
/* E66: jedes Kapitel beginnt mit feiner Linie, h3 in Dunkelrot (Leitfaden 7.2) */
h2{font-size:clamp(1.5rem,3.5vw,1.875rem);border-top:1px solid var(--linie);padding-top:.6em;margin-top:2.4em}
h3{font-size:1.2rem;color:var(--akzent-text)}
.eyebrow+h2{border-top:0;padding-top:0;margin-top:.2em}
/* E66: Eyebrow, kleine Zeile in roten Versalien ueber dem Kapitel. Zeile
   `^ Text` im Seitentext, quelle/texte.py. Die Linie wandert auf sie. */
.eyebrow{font:700 .78rem/1.3 var(--schrift);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent);
 border-top:1px solid var(--linie);padding-top:1.4rem;margin:3rem 0 .2rem;max-width:none}
p,li{max-width:var(--lesebreite);overflow-wrap:break-word} /* E169: lange Ketten ohne Leerzeichen (etwa Responsible/Accountable/Consulted/Informed in einem Einblick) brechen um, statt bei 360 px ueber den Rand zu ragen */
p{margin:0 0 1em;text-wrap:pretty} /* E155: keine einzelnen Woerter in der letzten Zeile, etwa „Sie.“ unter Zielgruppe. Browser ohne Unterstuetzung brechen wie bisher */
li::marker{color:var(--akzent)}
ol>li::marker{color:var(--akzent-text);font-weight:700}
/* Verweise im Text bleiben unterstrichen: Dunkelrot gegen Schwarz hat nur
   2,29 zu 1, Farbe allein reicht nicht (WCAG 1.4.1, Abweichung vom Leitfaden 8) */
a{color:var(--akzent-text);text-underline-offset:2px}
a:hover{color:var(--akzent)}
/* E82: das Logo ist ausgenommen, es behaelt die ganzzahligen Masse aus dem Markup */
img:not(.logo),svg{display:block;max-width:100%;height:auto}
.wrap{width:min(100% - 2rem,var(--breite));margin-inline:auto}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:2px}
.sprung{position:absolute;left:-9999px;top:0;background:var(--struktur);color:var(--auf-akzent);padding:.7rem 1rem;z-index:10}
.sprung:focus{left:0}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Kopf. Die Navigation steht ohne JavaScript offen, erst das Modul klappt sie
   zu (Lehre aus RUMADUM E107, E108). Beruehrflaeche mindestens 44 Pixel.
   E81, aendert E64: statt 2 Pixel Schwarz eine feine Linie --linie und ein
   weicher Schatten, der Kopf liegt auf der Seite statt sie abzuschneiden.
   E82: Innenabstand ganzzahlig, damit das Logo auf ganzen Pixeln steht.
   E87: Logo 56 px hoch, Innenabstand dafuer 8 statt 12 px. */
/* E101: Logo 64 px als Raster je Pixeldichte, Kopf hoeher: 10 px Luft am Telefon,
   16 px ab 1024 Pixel, ganze Pixel, damit das Logo nicht auf Bruchteilen liegt */
.kopf{position:sticky;top:0;z-index:5;background:var(--grund);padding:.625rem 0;border-bottom:1px solid var(--linie);box-shadow:var(--schatten-kopf)}
@media (min-width:1024px){.kopf{padding:1rem 0}}
.kopf .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.marke{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--text)}
.logo{display:block}  /* E82: Groesse allein aus width und height im Markup, ganzzahlig, sonst unscharf */
.logo-text{font:800 1.3rem var(--schrift-titel)}
.nav{display:flex;flex-direction:column;flex:0 0 100%;order:3;border-top:1px solid var(--linie);padding-top:.4rem}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 .2rem;text-decoration:none;color:var(--text);font-weight:700;white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover{color:var(--akzent-text)}
.nav a[aria-current="page"]{color:var(--akzent-text);border-bottom-color:var(--akzent)}
/* E118: der letzte Menuepunkt, Kontakt, ist ein schwarzer Knopf wie Kurzgespraech
   vereinbaren (E68), beim Ueberfahren rot. Auf der Seite selbst rot und
   unterstrichen, damit der Zustand nicht allein an der Farbe haengt */
.nav a:last-child{align-self:flex-start;margin-top:.4rem;padding:0 1.1rem;border:0;border-radius:var(--r-klein);background:var(--struktur);color:var(--auf-akzent)}
.nav a:last-child:hover,.nav a:last-child:focus-visible{background:var(--akzent);color:var(--auf-akzent)}
.nav a:last-child[aria-current="page"]{background:var(--akzent);color:var(--auf-akzent);text-decoration:underline;text-underline-offset:4px}
.nav-schalter{display:none;min-height:44px;font:700 1rem var(--schrift);background:none;color:var(--text);
 border:1.5px solid var(--struktur);border-radius:var(--r-klein);padding:0 1rem;cursor:pointer}
.js .nav{display:none}
.js .nav-offen{display:flex}
.js .nav-schalter{display:inline-block}
/* E69: fuenf Punkte mit Kontakt statt Kurzgespraech vereinbaren. Gemessen
   im Testbau: ab 1024 Pixel passen sie in eine Zeile. */
@media (min-width:1024px){
 .nav,.js .nav{display:flex;flex-direction:row;align-items:center;flex:0 1 auto;order:0;gap:1.5rem;border:0;padding:0}
 .nav a:last-child{margin-top:0}
 .nav-schalter,.js .nav-schalter{display:none}
}

/* Inhalt */
main{display:block;padding-bottom:3rem}
/* E75, nach RUMADUM: Kopfband auf --flaeche mit Hinweiszeile, Leitsatz,
   Unterzeile, Knoepfen und Sternen. */
.held{background:var(--flaeche);padding:2.6rem 0 1.6rem;margin-bottom:1rem}
.held .hinweiszeile{margin:0 0 1rem;background:var(--grund)}
.held .aufrufe{margin:1.4rem 0 .4rem}
.held .vertrauen{margin:.2rem 0 0}
.held h1{margin:0 0 .4em;max-width:22ch}
.unterzeile{font-size:1.2rem;color:var(--neben);margin:0;max-width:60ch}
/* E110: Kopf jeder Unterseite als Band ueber die volle Breite mit demselben
   Verlauf wie das Kopfband der Startseite (E107, E109), oben und unten weiss,
   dazwischen --band. Vorher stand der Titel direkt auf Weiss */
.seitenkopf{background:var(--verlauf-kopf);padding:clamp(2rem,5vw,3.5rem) 0 clamp(2rem,4.5vw,3rem)}
.seitenkopf h1{max-width:24ch;margin-top:0}
/* E163: Brotkrumen ueber der Ueberschrift jeder Unterseite, klein in --neben
   (8,00 zu 1 auf --grund, auf dem Verlauf mindestens 6,75), Trenner als
   Zeichen ohne Bedeutung fuer Vorlesesoftware. Die Verweise haben ueber
   Innenabstand eine Beruehrflaeche von 44 Pixel Hoehe, ohne die Zeile hoeher
   zu machen (INSTRUCTIONS 6). */
.brotkrumen{font-size:.875rem;color:var(--neben);margin:0 0 .9rem}
.brotkrumen ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:0 .5rem}
.brotkrumen li{max-width:none}
.brotkrumen li+li::before{content:"›";margin-right:.5rem;color:var(--neben)}
.brotkrumen a{color:var(--neben);display:inline-block;padding:.75rem 0;margin:-.75rem 0;text-underline-offset:3px;text-decoration-color:var(--sand-tief)}
.brotkrumen a:hover{color:var(--akzent-text);text-decoration-color:currentColor}
.brotkrumen [aria-current]{color:var(--text)}
.seitenkopf .unterzeile{margin:0}
.seitenkopf .wrap>:last-child{margin-bottom:0}
.textseite-inhalt>h2:first-child,.textseite-inhalt>.eyebrow:first-child,.textseite-inhalt>.anker:first-child+.eyebrow{border-top:0;padding-top:0;margin-top:1rem}
.bild{margin:1.5rem 0}
.bild img{border-radius:var(--r-gross)}
figcaption{font-size:.85rem;color:var(--neben);margin-top:.4rem}
.platzhalter{background:var(--hinweis-grund);color:var(--hinweis-text);border-left:4px solid var(--hinweis-text);padding:.5rem .8rem}
.anker{display:block;scroll-margin-top:7.5rem} /* E269: vorher 6 rem, das war genau die Hoehe des Seitenkopfs ab 1024 px (97 px), die Ueberschrift stiess an; jetzt etwa 23 px Luft */
.textseite h2+ol,.textseite h2+ul{margin-top:.2rem}

/* E64: der dunkle Block, schwarz mit roter Kante oben. Rot auf Schwarz hat
   3,80 zu 1, genug fuer eine Linie, nicht fuer Schrift. Kaesten darin nur mit
   Linie (E55), Fliesstext gedaempft, Ueberschrift weiss. */
.dunkel{background:var(--dunkel);color:var(--auf-dunkel);border-radius:var(--r-gross);border-top:4px solid var(--akzent);
 padding:1.8rem 1.5rem 1.6rem;margin:2.5rem 0}
.dunkel h2,.dunkel h3{color:var(--auf-dunkel);border-top:0;padding-top:0;margin-top:0}
.dunkel .eyebrow{color:var(--akzent-dunkel);border-top:0;padding-top:0;margin-top:0}
.dunkel p,.dunkel li{color:var(--auf-dunkel-neben);max-width:62ch}
/* E178: Knopfreihe im dunklen Block ohne Zeilenbreite. .aufrufe hat font-size 0
   (blendet das Trennzeichen aus), 62ch wurde damit 0 und jeder Knopf brach um */
.dunkel .aufrufe{max-width:none}
.dunkel strong{color:var(--auf-dunkel)}
.dunkel a{color:var(--akzent-dunkel)}
.dunkel a:hover{color:var(--auf-dunkel)}
.dunkel figcaption{color:var(--auf-dunkel-neben)}

/* Kontaktwege, E74 nach RUMADUM: Karten mit Symbol, fettem Titel und
   zweiter Zeile, gleich breit, nebeneinander ab 768 Pixel. */
.kontaktwege{list-style:none;margin:1rem 0 1.4rem;padding:0;display:grid;gap:.6rem;grid-template-columns:1fr}
.kontaktwege li{max-width:none;display:flex}
.kontaktweg{flex:1;display:flex;align-items:center;gap:.8rem;min-height:56px;padding:.55rem 1rem;background:var(--grund);
 border:1.5px solid var(--linie);border-radius:var(--r-klein);text-decoration:none;color:var(--text)}
.kontaktweg-symbol{width:1.5rem;height:1.5rem;flex:none;color:var(--akzent)}
.kontaktweg-text{display:flex;flex-direction:column;line-height:1.3}
.kontaktweg-text span{color:var(--neben);font-size:.9rem}
.kontaktweg:hover,.kontaktweg:focus-visible{border-color:var(--akzent)}
/* Kontaktkarten im dunklen Block */
.dunkel .kontaktweg{background:transparent;color:var(--auf-dunkel);border-color:var(--auf-dunkel-neben)}
.dunkel .kontaktweg-text span{color:var(--auf-dunkel-neben)}
.dunkel .kontaktweg-symbol{color:var(--akzent-dunkel)}
.dunkel .kontaktweg:hover,.dunkel .kontaktweg:focus-visible{border-color:var(--akzent-dunkel)}
@media (min-width:768px){.kontaktwege{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* E68: Knoepfe wie Leitfaden 7.7. Primaer schwarz, sekundaer schwarzer
   Rahmen, beim Ueberfahren und Fokus beide rot mit weisser Schrift (4,97).
   Eine Zeile `=> [a](x) · [b](y)` wird zur Knopfzeile, der erste Verweis
   primaer, alle weiteren sekundaer. Die Trennpunkte bleiben fuer
   Vorlesesoftware im Text und werden nur ausgeblendet. */
.aufrufe{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;font-size:0;color:transparent;max-width:none;margin:1.2rem 0 1.4rem}
.aufrufe a{font-size:1rem}
.knopf,.aufrufe a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;border:1.5px solid var(--struktur);
 border-radius:var(--r-klein);font:700 1rem var(--schrift);cursor:pointer;text-decoration:none;white-space:nowrap}
.knopf,.aufrufe a:first-child{background:var(--struktur);color:var(--auf-akzent)}
.aufrufe a+a{background:var(--grund);color:var(--text)}
/* E99: Knopfzeile `-> ` nur aus Randknoepfen, am Ende eines Kapitels. Steht vor
   der Regel fuer Ueberfahren, damit Rot beim Ueberfahren weiter gewinnt. */
.aufrufe-rand a:first-child{background:var(--grund);color:var(--text)}
.knopf:hover,.knopf:focus-visible,.aufrufe a:hover,.aufrufe a:focus-visible{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
.startseite .bild{max-width:320px}

/* Formular, E69 und E74 nach RUMADUM: Einleitungssatz oben, Anliegen als
   Pillenleiste, das Optionsfeld bleibt nativ und fuer Tastatur und
   Vorlesesoftware da, sichtbar ist die Pille. Gewaehlt: schwarz gefuellt. */
.anfrage{background:var(--flaeche);border-radius:var(--r-gross);border-top:4px solid var(--struktur);padding:1.4rem;margin:1rem 0 2rem;max-width:none} /* E241: ueber die ganze Breite, vorher 52 rem */
.anfrage-einleitung{font-size:1.05rem;margin-bottom:1rem}
.anliegen{border:0;padding:0;margin:0 0 1.2rem;min-width:0}
.anliegen legend{font-weight:700;margin-bottom:.5rem;padding:0}
.anliegen-wahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.anliegen-wahl label{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:44px;padding:.4rem .8rem;
 background:var(--grund);border:1.5px solid var(--struktur);border-radius:999px;cursor:pointer;font-weight:700;line-height:1.2}
.anliegen-wahl input{position:absolute;opacity:0;width:1px;height:1px}
.anliegen-wahl label:has(input:checked){background:var(--struktur);color:var(--auf-akzent)}
.anliegen-wahl label:hover{border-color:var(--akzent)}
.anliegen-wahl label:has(input:focus-visible){outline:2px solid var(--fokus);outline-offset:3px}
@media (min-width:768px){.anliegen-wahl{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feld-paar{display:grid;gap:0 1rem}
@media (min-width:600px){.feld-paar{grid-template-columns:1fr 1fr}}
.anfrage-datenschutz{margin:.8rem 0 0}
.feld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1rem}
.feld label{font-weight:700}
.feld input,.feld textarea{font:inherit;color:var(--text);background:var(--grund);border:1.5px solid var(--linie);
 border-radius:var(--r-klein);padding:.6rem .7rem;min-height:44px}
.feld input:focus-visible,.feld textarea:focus-visible{border-color:var(--struktur)}
.feld-wahl{flex-direction:row;align-items:flex-start;gap:.6rem}
.feld-wahl label{font-weight:400}
.feld-wahl input{min-height:auto;width:1.3rem;height:1.3rem;margin-top:.25rem;flex:none;accent-color:var(--akzent)}
.feld-hinweis{font-size:.9rem;color:var(--neben)}
.koeder{position:absolute;left:-9999px}

/* Fuss. E79 nach RUMADUM: kompakt, links Logo, Firma fett, Anschrift, rechts
   die drei Kontaktkarten nebeneinander, darunter Oeffnungszeiten und die
   Rechtsverweise. E88, aendert E79: hell auf --band statt dunkel, damit der
   eine dunkle Block je Seite die einzige dunkle Flaeche bleibt und sich auf
   der Startseite vom Fuss trennt. Logo wie im Kopf, 56 px. E100, aendert E88:
   Grund --fuss (--sand) statt --band, damit sich der Fuss von den grauen
   Baendern abhebt, 1,15 zu 1 gegen --band, 1,37 gegen Weiss. */
.fuss{background:var(--fuss);color:var(--text);border-top:1px solid var(--linie);padding:2.5rem 0 1.5rem;font-size:.95rem}
.fuss-raster{display:grid;gap:1.8rem}
.fuss p{margin:0;max-width:none}
.fuss .fuss-firma{font-weight:700;margin:1rem 0 .2rem}
.fuss-adresse,.fuss-zeiten{color:var(--neben)}
.fuss .kontaktwege{margin:0}
/* E129: Kennzahlen auf /ueber-mich/ mit Luft zum Text davor und zum dunklen Block */
.textseite-inhalt .kennzahlen{margin:2.2rem 0 2.6rem}
/* E128: im Fuss so viele Karten nebeneinander, wie ganz Platz haben. Zwischen 900 und
   rund 1000 px ragte die Karte Mail 3 bis 16 px ueber den Rand, seit das Logo mit E101
   breiter ist. Die Mailadresse bricht nicht um, deshalb Mindestbreite 14rem */
@media (min-width:768px){.fuss .kontaktwege{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}}
.fuss .fuss-zeiten{margin:1rem 0 0}
.fuss-verweise{display:flex;flex-wrap:wrap;gap:0 1.4rem;margin-top:.4rem}
.fuss-verweise a{display:inline-flex;align-items:center;min-height:44px;color:var(--text);font-weight:700;text-decoration-color:var(--neben);text-underline-offset:3px}
.fuss-verweise a:hover,.fuss-verweise a:focus-visible{color:var(--akzent-text);text-decoration-color:currentColor}
@media (min-width:900px){
 .fuss-raster{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);align-items:start;column-gap:3rem}
}

/* E67: Karten nach Leitfaden 7.11. Mit Verweis im Titel: weiss, Rahmen,
   roter Streifen links, die ganze Flaeche fuehrt zum Ziel, beim Ueberfahren
   roter Rahmen, Schatten, 2 Pixel Anhebung. Ohne Verweis: Flaeche ohne
   Rahmen und ohne Streifen, damit sofort sichtbar ist, was anklickbar ist. */
.kacheln{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:1.2rem 0 1.8rem}
.kachel{background:var(--flaeche);border:1px solid transparent;border-radius:var(--r-klein);padding:1.3rem 1.3rem .5rem}
.kachel h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--text)}
.kachel p,.kachel li{max-width:none}
.kachel ul{padding-left:1.1rem}
.kachel:has(h3 a){position:relative;background:var(--grund);border-color:var(--linie);border-left:4px solid var(--akzent)}
.kachel h3 a{color:var(--text);text-decoration:none}
.kachel h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kachel:has(h3 a):hover,.kachel:has(h3 a:focus-visible){border-color:var(--akzent);box-shadow:var(--schatten)}
.kachel:has(h3 a):hover h3 a{color:var(--akzent-text)}

/* Kundenstimmen, E65: Zitat kursiv in der Textschrift */
/* E164: Stimmen als weisse Karten nach dem Muster der alten Seite: weicher
   Schatten, oben links Zitatzeichen in --sand-tief, oben rechts Sterne in
   --sterne, Wortlaut kursiv, Name rechts unten fett in --neben. */
.stimmen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin:1.2rem 0 1.8rem}
.stimme{margin:0;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte);padding:1.2rem 1.4rem;display:flex;flex-direction:column}
.stimme-kopf{display:flex;justify-content:space-between;align-items:center;margin:0 0 .8rem}
.stimme-zeichen{width:1.6rem;height:1.6rem;color:var(--sand-tief)}
.stimme-sterne{color:var(--sterne);letter-spacing:.1em}
.stimme blockquote{margin:0 0 1rem;font-style:italic;font-size:1.12rem;line-height:1.55;flex:1}
.stimme blockquote p{margin:0}
.stimme figcaption{text-align:right;font-weight:700;font-size:.9rem;color:var(--neben)}
.stimme-quelle{display:block;font-weight:400;font-size:.85rem}
/* E223: Logos der Zertifizierungen auf weissen Karten wie im Bestand, grau,
   beim Ueberfahren farbig wie die Profilzeichen (E219). Nur bei Geraeten mit
   Zeiger, am Telefon gibt es kein Ueberfahren, dort bleiben sie farbig */
.logoleiste{list-style:none;padding:0;margin:1.2rem 0 1.8rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.logoleiste li{max-width:none;display:flex;align-items:center;justify-content:center;min-height:7rem;padding:1rem;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte)}
.logoleiste .bild{margin:0}
.logoleiste img{height:64px;width:auto;max-width:100%;object-fit:contain;border-radius:0;transition:filter .2s,opacity .2s}
@media (hover:hover){.logoleiste img{filter:grayscale(1);opacity:.8}.logoleiste li:hover img{filter:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.logoleiste img{transition:none}}
.logoleiste a{display:inline-flex;min-height:44px;align-items:center}
/* E307, E308: Zeile zum Nachweis als Schild unter der Karte, so breit wie die Karte, damit
   nichts ueber den Rand ragt. Unsichtbar, bis die Karte ueberfahren, fokussiert oder angetippt
   wird, wie der Name der Profile (E219). Opacity statt visibility, damit Vorlesesoftware die
   Zeile immer liest. --grund auf --text 18,77 zu 1. Escape blendet aus (main.js) */
.logoleiste li:has(.logo-zeile){position:relative;cursor:default}
.logo-zeile{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:5;margin:0;max-width:none;padding:.35rem .6rem;border-radius:var(--r-klein);background:var(--text);color:var(--grund);font-size:.8125rem;font-weight:700;line-height:1.35;text-align:center;hyphens:auto;overflow-wrap:normal;opacity:0;pointer-events:none;transition:opacity .15s}
.logoleiste li:hover .logo-zeile,.logoleiste li:focus .logo-zeile{opacity:1}
.logoleiste li.zeile-aus .logo-zeile{opacity:0}
.logoleiste li[tabindex]:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.logo-zeile{transition:none}}

/* E50: Standortbestimmung, Trefferzeile zusaetzlich mit Rahmen und
   aria-current, nie allein ueber Farbe (INSTRUCTIONS 5). */
.selbsttest fieldset{border:1px solid var(--linie);border-radius:var(--r-gross);padding:1rem 1.2rem;margin:0 0 1.2rem}
.selbsttest legend{font-weight:700;padding:0 .4rem;color:var(--akzent-text)}
.selbsttest ol{padding-left:1.4rem;margin:.4rem 0}
.selbsttest li{max-width:none}
.selbsttest label{display:flex;gap:.7rem;align-items:flex-start;min-height:44px;padding:.35rem 0;cursor:pointer}
.selbsttest input{width:1.3rem;height:1.3rem;margin-top:.2rem;flex:none;accent-color:var(--akzent)}
.selbsttest-hinweis{color:var(--neben);font-size:.95rem;margin:.4rem 0 0;max-width:none} /* E273: ohne Lesebreite, die Erklaerung nutzt die volle Breite des Blocks wie die Fragen, vorher brach sie bei etwa 62 Zeichen um */
.selbsttest-ergebnis{display:none}
.js .selbsttest-ergebnis{display:block}

/* E52: Partnerkarten nach RUMADUM E56, ohne Rahmen, weil nur der Verweis
   anklickbar ist (E55). Breite der Logos rechnet projekt.py. */
.partnerliste{display:grid;gap:1rem;margin:1.2rem 0 1.8rem}
.partner{display:grid;gap:.6rem 1.2rem;background:var(--flaeche);border-radius:var(--r-klein);padding:1rem}
.partner h3{margin:0 0 .3rem;color:var(--text)}
.partner p{margin:0 0 .4rem;max-width:none}
.partner-logo{display:flex;align-items:center;justify-content:center;background:var(--grund);border-radius:var(--r-klein);height:7rem;padding:.8rem}
.partner-logo .bild{margin:0}
.partner-logo img{height:auto;object-fit:contain;border-radius:0}
.partner-web a{display:inline-flex;align-items:center;min-height:44px}
/* E218, E219: Profile als Zeichen und Nebenverweis ohne Knopf in einer Zeile,
   der Nebenverweis rechtsbuendig auf Lesebreite. Zeichen grau, beim Ueberfahren
   und im Fokus in der Farbe der Plattform, darueber der Name als Schild. Das
   Zeichen sitzt mittig in 44 px, der Rand links gleicht das optisch aus */
.verweise{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;max-width:var(--lesebreite);margin-top:1.5rem}
.profile{display:flex;gap:.25rem;list-style:none;margin:0 0 0 -.6rem;padding:0}
.profile a{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--neben);border-radius:var(--r-klein);transition:color .15s,background-color .15s}
.profile .profil-zeichen{width:1.4em;height:1.4em}
.profil-name{position:absolute;bottom:calc(100% + .25rem);left:50%;transform:translateX(-50%);padding:.2rem .55rem;border-radius:var(--r-klein);background:var(--text);color:var(--grund);font-size:.8125rem;font-weight:700;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.profile a:hover .profil-name,.profile a:focus-visible .profil-name{opacity:1}
.profile a:hover,.profile a:focus-visible{color:var(--grund);outline:0}
.profil-linkedin a:hover,.profil-linkedin a:focus-visible{background:var(--marke-linkedin)}
.profil-xing a:hover,.profil-xing a:focus-visible{background:var(--marke-xing)}
.profil-x a:hover,.profil-x a:focus-visible{background:var(--marke-x)}
.profil-facebook a:hover,.profil-facebook a:focus-visible{background:var(--marke-facebook)}
.verweis-klein{margin:0 0 0 auto;font-size:.875rem}
/* E221: Karten mit Zeichen, Leitgedanken auf /ueber-mich/. Zeichen in
   --akzent auf --akzent-hell (4,33, Grafik), Titel zentriert in der Titelschrift,
   Fettes in --hervorhebung (5,71 auf --grund) */
.kacheln-zeichen .kachel{background:var(--grund);text-align:center;padding:1.8rem 1.4rem 1rem}
.kachel-zeichen{display:flex;align-items:center;justify-content:center;width:4rem;height:4rem;margin:0 auto 1rem;border-radius:50%;background:var(--akzent-hell);color:var(--akzent)}
.kachel-zeichen .motiv-symbol{width:2.1rem;height:2.1rem}
.kacheln-zeichen .kachel h3{font-family:var(--schrift-titel);font-size:1.35rem;margin-bottom:.6rem}
.kacheln-zeichen .kachel strong{color:var(--hervorhebung)}
.verweis-klein a{display:inline-flex;align-items:center;min-height:44px;color:var(--neben);text-decoration-color:var(--linie)}
.verweis-klein a:hover{color:var(--akzent-text)}
@media (prefers-reduced-motion:reduce){.profile a,.profil-name{transition:none}}
/* E131: zwei Spalten erst ab 1100 px und Spalten mit minmax(0,1fr). Vorher ragten die
   Karten zwischen 768 und 960 px bis zu 193 px ueber den Rand, die Webadresse bricht nicht */
.partner-web a{overflow-wrap:anywhere}
@media (min-width:768px){
 .partner{grid-template-columns:13rem minmax(0,1fr);align-items:start}
 .partner.ohne-logo{grid-template-columns:minmax(0,1fr)}
}
@media (min-width:1100px){
 .partnerliste{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* E53: Vertrauenszeile, Sterne nur als Beiwerk, Note und Anzahl als Text */
.vertrauen{margin:.6rem 0 1.4rem;max-width:none;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .7rem}
.vertrauen a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .55rem;min-height:44px;color:var(--text);text-decoration:none}
.vertrauen a span:last-child{text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px}
.vertrauen a:hover span:last-child,.vertrauen a:focus-visible span:last-child{text-decoration-color:currentColor}
.sterne-zeichen{color:var(--sterne);letter-spacing:.08em;font-size:1.15rem}
.vertrauen-stand{color:var(--neben);font-size:.9rem;flex-basis:100%}

/* E56: QR Codes 220 Pixel, weisse Flaeche mit Luft, auch im dunklen Block */
.qr{margin:1rem 0 1.4rem;width:max-content;max-width:100%}
.qr img{width:220px;height:220px;background:var(--grund);border-radius:var(--r-klein);padding:8px}
.qr figcaption{font-size:.8rem;text-align:center}

/* E55 und E64: Hinweiszeile fuer befristete Nebenangaben. Keine Warnfarbe. */
.hinweiszeile{display:inline-block;background:var(--akzent-hell);border-left:4px solid var(--akzent);color:var(--akzent-text);
 border-radius:var(--r-klein);padding:.3rem .7rem;font-size:.875rem}

/* E55: Ueberfahren und Fokus zeigen denselben Zustand. Farbwechsel laufen
   immer, Bewegung nur ohne Wunsch nach reduzierter Bewegung (Leitfaden 8.4) */
@media (prefers-reduced-motion:no-preference){
 .knopf,.aufrufe a,.kachel,.kontaktweg{transition:transform .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
 .knopf:hover,.knopf:focus-visible,.aufrufe a:hover,.aufrufe a:focus-visible,
 .kachel:has(h3 a):hover,.kachel:has(h3 a:focus-visible),.kontaktweg:hover,.kontaktweg:focus-visible{transform:translateY(-2px)}
 .knopf:active,.aufrufe a:active{transform:translateY(1px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

/* E74, nach RUMADUM: Schrittfolge mit roten Ziffernkreisen. Die Ziffer
   zaehlt das Stylesheet, Weiss auf Rot 4,97 zu 1, fett. */
.schritte{list-style:none;counter-reset:schritt;padding:0;margin:1.4rem 0 1.8rem}
.schritte>li{counter-increment:schritt;position:relative;padding:0 0 1.4rem 3.4rem;max-width:var(--lesebreite)}
.schritte>li::marker{content:""}
.schritte>li::before{content:counter(schritt);position:absolute;left:0;top:-.1rem;width:2.3rem;height:2.3rem;border-radius:50%;
 background:var(--akzent);color:var(--auf-akzent);font:800 1.05rem/2.3rem var(--schrift-titel);text-align:center}
.schritte>li::after{content:"";position:absolute;left:1.1rem;top:2.5rem;bottom:.3rem;border-left:2px solid var(--linie)}
.schritte>li:last-child::after{display:none}
.schritte h3{margin:0 0 .3rem;color:var(--text)}

/* E74: QR Code rechts neben seinem Text, im Markup davor und umflossen */
@media (min-width:768px){
 .textseite .qr{float:right;margin:0 0 1rem 2rem}
}
.textseite h2,.textseite .eyebrow,.textseite .dunkel{clear:both}

/* E73: Selbsttest (bis E103 Status Quo), Stufe gross, Leiste aus meter, drei Stufen als Folge */
.selbsttest-ergebnis{border-top:4px solid var(--akzent);background:var(--flaeche);border-radius:var(--r-klein);padding:1rem 1.2rem;margin:1.5rem 0 1rem}
.selbsttest-stufe{font:800 clamp(1.4rem,3.5vw,1.9rem)/1.2 var(--schrift-titel);margin:0 0 .6rem}
.selbsttest-ergebnis meter{width:100%;height:1rem;display:block}
.selbsttest-zahl{margin:.4rem 0 0;color:var(--neben)}
.selbsttest-auswertung{list-style:none;padding:0;display:grid;gap:.6rem;margin:1rem 0 1.5rem}
.selbsttest-auswertung li{display:flex;flex-direction:column;gap:.2rem;padding:.8rem 1rem;border:1.5px solid var(--linie);border-top:4px solid var(--linie);border-radius:var(--r-klein);max-width:none}
.selbsttest-auswertung li.treffer{border-color:var(--struktur);border-top-color:var(--akzent);background:var(--grund)}
.stufe-marke{font:700 .78rem/1.3 var(--schrift);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-text)}
.stufe-bereich{color:var(--neben);font-size:.85rem}
@media (min-width:768px){.selbsttest-auswertung{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* E73: Leiste in Markenrot statt des Gruens des Browsers */
.selbsttest-ergebnis meter{appearance:none;background:var(--grund);border:1px solid var(--linie);border-radius:999px}
.selbsttest-ergebnis meter::-webkit-meter-bar{background:var(--grund);border:0;border-radius:999px;height:1rem}
.selbsttest-ergebnis meter::-webkit-meter-optimum-value,.selbsttest-ergebnis meter::-webkit-meter-suboptimum-value,
.selbsttest-ergebnis meter::-webkit-meter-even-less-good-value{background:var(--akzent);border-radius:999px}
.selbsttest-ergebnis meter::-moz-meter-bar{background:var(--akzent);border-radius:999px}
.selbsttest .selbsttest-auswertung{padding:0}
/* E74: umflossene QR Codes enden mit ihrer Seite */
.textseite-inhalt::after{content:"";display:block;clear:both}
/* E68: Knopfzeile im dunklen Block, primaer weiss, sekundaer hell gerahmt */
.dunkel .aufrufe a:first-child{background:var(--grund);color:var(--text);border-color:var(--grund)}
.dunkel .aufrufe a+a{background:transparent;color:var(--auf-dunkel);border-color:var(--auf-dunkel-neben)}
.dunkel .aufrufe a:hover,.dunkel .aufrufe a:focus-visible{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}

/* E76: Startseite in Baendern ueber die volle Breite, abwechselnd Weiss und
   --band, jedes Band mit festem Innenabstand. Die Linie ueber den Kapiteln
   entfaellt dort, die Flaeche trennt. Im grauen Band werden Karten weiss und
   die Eyebrow dunkelrot (Hellrot hat auf --band nur 4,19 zu 1). Das Kopfband
   bekommt feste Abstaende: 32 px Text bis Knoepfe, 16 px Knoepfe bis Sterne. */
.held{background:var(--band);padding:clamp(2rem,5vw,3.5rem) 0 clamp(2rem,5vw,3rem);margin:0} /* E80: 32 bis 56 px statt 40 bis 72 */
/* E107: oben weiss, nach 9rem im Ton des Bands. Der Schatten des Kopfs faellt auf Weiss wie auf den
   Unterseiten, statt hart auf Grau zu stossen. E109: unten ebenso zurueck nach Weiss */
.held{background:var(--verlauf-kopf)}
/* E306: feine aufsteigende Linien im Kopfband, Feedback „erster Eindruck zu trocken“. Form aus
   pics/held/linien.svg als Maske, Farbe --akzent mit 10 % Deckkraft, damit der Wert aus den Custom
   Properties kommt und die Policy (img-src self) ohne data: auskommt. E308: 5 statt 10 % Deckkraft,
   die Linien schlugen sich mit den Gitterlinien der Kopfgrafik. Text darauf: --text 16,0, --neben
   6,8 zu 1 an der dunkelsten Stelle einer Linie */
.held{position:relative;isolation:isolate}
.held::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--akzent);opacity:.05;pointer-events:none;-webkit-mask:url(../pics/held/linien.svg) center bottom/100% 85% no-repeat;mask:url(../pics/held/linien.svg) center bottom/100% 85% no-repeat}
@media print{.held::before{display:none}}
.held .unterzeile{margin:0}
.held .aufrufe{margin:2rem 0 1rem}
.held .vertrauen{margin:0}
.held .hinweiszeile{margin:0 0 1.2rem}
main:has(.baender){padding-bottom:0}
.band{padding:var(--abstand-band) 0}
/* E137: Wechsel nur fuer helle Baender. Seit E129 (Kennzahlen entfallen) steht der dunkle Block an gerader Stelle, und diese Regel (0,3,0) schlug .dunkel (0,1,0): Block grau, Ueberschrift weiss auf Grau, Eyebrow dunkelrot */
/* E140: alle grauen Baender blenden oben und unten weich in Weiss, wie das Kopfband (E107, E109) und das Band Leistungen (E138) */
.baender>.band:nth-child(even):not(.dunkel){background:var(--verlauf-kopf)}
.band>.wrap>:first-child,.band .eyebrow+h2{margin-top:0}
/* E154: ein Sprungziel vor der Ueberschrift zaehlt nicht als Inhalt. Ohne Eyebrow stand die Ueberschrift Zielgruppe sonst 72 px tiefer */
.band>.wrap>.anker:first-child+*{margin-top:0}
.band>.wrap>:last-child,.band>.wrap>.kacheln:last-child,.band>.wrap>.stimmen:last-child{margin-bottom:0}
.band .eyebrow,.band h2{border-top:0;padding-top:0}
.band .eyebrow{margin:0 0 .3rem}
.band h2{margin-bottom:.8rem}
.baender>.band:nth-child(even):not(.dunkel) .eyebrow{color:var(--akzent-text)}
.baender>.band:nth-child(even):not(.dunkel) .kachel:not(.kacheln-pfeile>*),.baender>.band:nth-child(even):not(.dunkel) .stimme{background:var(--grund)}
.band.dunkel{border-radius:0;margin:0;padding:var(--abstand-band) 0}
.band.dunkel .eyebrow{color:var(--akzent-dunkel)}

/* E77: Fahrplan der Startseite waagrecht ab 1024 Pixel, fuenf Schritte
   nebeneinander, die Linie verbindet die Ziffernkreise. Darunter senkrecht. */
@media (min-width:1024px){
 .startseite .schritte{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 1rem}
 /* E159: jeder Schritt eine Karte auf --flaeche, Titel, Dauer und Text je
    in derselben Zeile des Rasters (subgrid), damit sie ueber alle fuenf
    Karten auf gleicher Hoehe stehen. Zwischen den Karten ein kurzer
    Verbinder in --akzent-mittel auf Hoehe der Ziffern. Bewusst nicht
    getoent wie die Leistungspfeile, damit Phasen und Stufen nicht
    verwechselt werden. Browser ohne subgrid zeigen dieselben Karten, nur
    ohne gemeinsame Zeilen. */
 .startseite .schritte>li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start;
  background:var(--flaeche);border-radius:var(--r-klein);padding:4.1rem 1.1rem 1.2rem;max-width:none}
 .startseite .schritte>li::before{left:1.1rem;top:1.1rem}
 .startseite .schritte>li::after{left:auto;right:-1rem;width:1rem;top:2.25rem;bottom:auto;border-left:0;border-top:2px solid var(--akzent-mittel)}
 .startseite .schritte>li>h3{margin:0 0 .35rem}
 .startseite .schritte>li>p{margin:0}
 .startseite .schritte>li>p:first-of-type{grid-row:3;align-self:end;justify-self:start;margin:.8rem 0 0}
 .startseite .schritte>li>p:last-of-type{grid-row:2}
}
.startseite .schritte p{margin:0 0 .3rem}
/* E160, E162: die Saetze unter dem Fahrplan nutzen die volle Breite, statt bei --lesebreite umzubrechen, je Satz eine Zeile */
.startseite .schritte~p:not(.aufrufe){max-width:none;margin:0 0 .2rem}
.startseite .schritte~p.aufrufe{margin-top:1.2rem}
/* E161: die Dauer als Marke ganz unten in der Karte, nach dem Text. Im
   Markup bleibt sie nach dem Titel, damit Vorlesesoftware sie gleich mit
   dem Namen der Phase ansagt, nur die Anordnung wechselt. --akzent-text auf
   --akzent-hell 7,16 zu 1. Darunter senkrecht dieselbe Reihenfolge. */
@media (max-width:1023.98px){.startseite .schritte>li{display:flex;flex-direction:column;align-items:flex-start}}
.startseite .schritte>li>p:first-of-type{order:3;margin:.7rem 0 0;background:var(--akzent-hell);color:var(--akzent-text);border-radius:999px;padding:.1rem .7rem;font-size:.85rem;font-weight:600}
.startseite .schritte>li>p:first-of-type em{font-style:normal}

/* E77: Porträt links, Text rechts, sobald ein Band ein Bild direkt im
   Inhalt traegt (Wer Sie begleitet). Darunter untereinander. */
@media (min-width:768px){
 .band .wrap:has(>figure.bild){display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:3rem;align-items:start}
 .band .wrap:has(>figure.bild)>*{grid-column:2}
 .band .wrap:has(>figure.bild)>figure.bild{grid-column:1;grid-row:1/span 8;margin:0}
}
/* E301: Partnerlogos ausgenommen. Seit E216 traegt /ueber-mich/ Baender, die Regel
   zog jedes Logo auf die volle Breite seiner Flaeche, am Telefon und Tablet unter
   768 px bis 677 px breit und bis 104 px in den Text. Die Logos stehen in der
   Groesse aus width und height, die projekt.py nach E52 und E60 rechnet */
.baender .band .bild:not(.partner-logo .bild) img{width:100%}
/* E138: Leistungsstufen als Pfeile, ohne Nummer. Die Reihenfolge traegt die
   Form (Spitze nach rechts, darunter nach unten), die Flaeche wird zusaetzlich
   von Weiss zu Rosa roeter, nie die Farbe allein. Das Band blendet wie das
   Kopfband ein und aus (--verlauf-kopf) und steht ausserhalb des Bandwechsels.
   E143: die Pfeilform liegt nicht mehr auf der Karte, sondern auf einer
   eigenen Flaeche span.pfeil-flaeche (projekt.py) hinter dem Inhalt. Nur so
   kann ein Schatten der Form folgen: clip-path schneidet alles ab, was auf
   demselben Element liegt, filter auf dem Elternteil nicht. Die Karte bleibt
   ein Rechteck, Verweisflaeche und Fokus unveraendert. Innenabstand 1,2 / 1,3 /
   1,1 rem wie abgenommen (P28). */
.baender>.band:has(>.wrap>.kacheln-pfeile){background:var(--verlauf-kopf)}
.kacheln-pfeile{gap:.3rem;margin:1.6rem 0}
.kacheln-pfeile>.kachel{--spitze:1.1rem;--form:polygon(0 0,calc(100% - var(--spitze)) 0,100% 50%,calc(100% - var(--spitze)) 100%,0 100%,var(--spitze) 50%)}
.kacheln-pfeile>.kachel,.kacheln-pfeile>.kachel:has(h3 a){position:relative;isolation:isolate;border:0;border-radius:0;box-shadow:none;background:none;padding:1.2rem 1.3rem 1.1rem}
.pfeil-flaeche{position:absolute;inset:0;z-index:-1;transition:filter .25s ease}
.pfeil-flaeche::before{content:"";position:absolute;inset:0;background:var(--grund);clip-path:var(--form)}
.kacheln-pfeile>.kachel:nth-child(2) .pfeil-flaeche::before{background:var(--stufe-2)}
.kacheln-pfeile>.kachel:nth-child(3) .pfeil-flaeche::before{background:var(--stufe-3)}
.kacheln-pfeile>.kachel:nth-child(4) .pfeil-flaeche::before{background:var(--stufe-4)}
.kacheln-pfeile .kachel h3{font-size:1.1rem;margin:0 0 .45rem}
.kacheln-pfeile .kachel p{margin:0;color:var(--neben)}
/* E147, ersetzt E143, E145, E141 und E139: Ueberfahren und Fokus schwebend.
   Der Pfeil hebt sich 3 px an, darunter ein weicher Schatten der Pfeilform
   (--pfeil-schwebt), die Flaeche behaelt ihren Ton, damit die Reihe der Toene
   erhalten bleibt, keine Kontur (wirkte wie markiert). Titel --hervorhebung
   ohne Unterstreichung (4,54 bis 5,71 zu 1). Bei reduzierter Bewegung nur der
   Schatten. Fokus bleibt der rote Umriss des Titels. */
.kacheln-pfeile>.kachel{transition:transform .25s ease}
.kacheln-pfeile .kachel h3 a{transition:color .25s ease}
.kacheln-pfeile>.kachel:hover,.kacheln-pfeile>.kachel:has(a:focus-visible){z-index:1}
.kacheln-pfeile>.kachel:hover .pfeil-flaeche,.kacheln-pfeile>.kachel:has(a:focus-visible) .pfeil-flaeche{filter:var(--pfeil-schwebt)}
.kacheln-pfeile>.kachel:hover h3 a,.kacheln-pfeile .kachel h3 a:focus-visible{color:var(--hervorhebung)}
@media (prefers-reduced-motion:no-preference){
 .kacheln-pfeile>.kachel:hover,.kacheln-pfeile>.kachel:has(a:focus-visible){transform:translateY(-3px)}
}
@media (max-width:1023.98px){
 .kacheln-pfeile{grid-template-columns:minmax(0,1fr)}
 .kacheln-pfeile>.kachel{--form:polygon(0 0,50% var(--spitze),100% 0,100% calc(100% - var(--spitze)),50% 100%,0 calc(100% - var(--spitze)))}
 .kacheln-pfeile>.kachel:first-child{--form:polygon(0 0,100% 0,100% calc(100% - var(--spitze)),50% 100%,0 calc(100% - var(--spitze)))}
}
@media (min-width:1024px){
 .kacheln-pfeile{grid-template-columns:repeat(4,minmax(0,1fr))}
 .kacheln-pfeile>.kachel:first-child{--form:polygon(0 0,calc(100% - var(--spitze)) 0,100% 50%,calc(100% - var(--spitze)) 100%,0 100%)}
}
/* E156: Band Zielgruppe als zwei plus eins. Links eine weisse Karte mit
   roter Kante oben fuer Passt und Voraussetzungen, rechts schmaler und ohne
   Flaeche Nicht ideal, mit Kreuzen statt Haken und Text in --neben. Kopf je
   Teil mit rundem Zeichen. Ab 1024 px nebeneinander 2 zu 1, die beiden Teile
   der Karte ab 700 px nebeneinander. */
.eignung{display:grid;gap:1rem;margin:1.6rem 0}
.eignung-ja{background:var(--grund);border-top:4px solid var(--akzent);border-radius:var(--r-klein);padding:1.4rem 1.4rem .6rem;display:grid;gap:0 2rem}
.eignung-nein{border:1px solid var(--linie);border-radius:var(--r-klein);padding:1.4rem 1.4rem .6rem}
.eignung-teil h3{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;color:var(--text);margin:0 0 1rem}
.eignung-zeichen{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--akzent-hell);color:var(--akzent);display:flex;align-items:center;justify-content:center;flex:none}
.eignung-zeichen .motiv-symbol{width:1.2rem;height:1.2rem}
.eignung-liste{list-style:none;padding:0;margin:0 0 .8rem}
.eignung-liste li{display:flex;gap:.6rem;align-items:flex-start;margin:0 0 .65rem;max-width:none}
.eignung-liste li>.motiv-symbol{flex:none;width:1.05rem;height:1.05rem;margin-top:.22rem;color:var(--akzent);stroke-width:2.4}
.eignung-nein .eignung-zeichen{background:none;border:1px solid var(--sand-tief);color:var(--neben)}
.eignung-nein .eignung-liste li{color:var(--neben)}
.eignung-nein .eignung-liste li>.motiv-symbol{color:var(--neben)}
@media (min-width:700px){.eignung-ja{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.eignung{grid-template-columns:2fr 1fr}}
/* E169: Karten der Einblicke, Grundform wie die Stimmen (weiss, weicher
   Schatten), die ganze Karte ist Verweis. Thema klein in Versalien, Titel,
   Kurztext, darunter abgesetzt das Ergebnis. Beim Ueberfahren hebt sich die
   Karte wie die Leistungspfeile (E147), Titel in --hervorhebung. */
.einblicke{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin:1.2rem 0 1.8rem}
.einblick{position:relative;display:flex;flex-direction:column;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte);padding:1.3rem 1.4rem 1.2rem;transition:box-shadow .25s ease,transform .25s ease}
.einblick p{max-width:none}
.einblick-thema{margin:0 0 .5rem;font:700 .75rem/1.3 var(--schrift);letter-spacing:.1em;text-transform:uppercase;color:var(--neben)}
.einblick h3{margin:0 0 .5rem;font-size:1.1rem;line-height:1.3}
.einblick h3 a{color:var(--text);text-decoration:none;transition:color .25s ease}
.einblick h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.einblick-kurz{margin:0 0 .9rem;color:var(--neben);font-size:.95rem;flex:1}
.einblick-ergebnis{margin:0;padding-top:.7rem;border-top:1px solid var(--linie);font-weight:700;font-size:.9rem;color:var(--text)}
.einblick-pfeil{display:none;color:var(--akzent);margin-right:.35rem}
/* E170: kompakte Karte der Startseite, ohne Kurztext, Ergebnis mit Pfeil, unten buendig */
.einblick-kompakt h3{margin-bottom:.9rem}
/* E174: Ergebnis auf der Startseite leise, normal statt fett, damit nur Thema
   und Titel fett sind und die Karte ruhig wird. E176: Pfeil wieder davor */
.einblick-kompakt .einblick-ergebnis{border-top:0;padding-top:0;margin-top:auto;font-weight:400;color:var(--neben)}
.einblick-kompakt .einblick-pfeil{display:inline}
.einblick:hover,.einblick:has(a:focus-visible),.weiter-karte:hover,.weiter-karte:focus-visible{box-shadow:var(--schatten-karte),0 10px 24px rgba(17,17,17,.08)}
.einblick:hover h3 a,.einblick h3 a:focus-visible,.weiter-karte:hover .weiter-titel,.weiter-karte:focus-visible .weiter-titel{color:var(--hervorhebung)}
@media (prefers-reduced-motion:no-preference){.einblick:hover,.einblick:has(a:focus-visible),.weiter-karte:hover,.weiter-karte:focus-visible{transform:translateY(-3px)}}
/* E172: Zeichen der Themen im rosa Kreis wie die Ziel-Motive (E85), auf den
   Karten der Startseite vor dem Thema, auf der Uebersicht neben der
   Zwischenueberschrift. Nur Zierde, das Thema steht als Text daneben. */
.einblick-zeichen{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--akzent-hell);color:var(--akzent)}
.einblick-zeichen .motiv-symbol{width:1.2rem;height:1.2rem}
.einblick-kompakt .einblick-thema{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.einblick-thema-titel{display:flex;align-items:center;gap:.75rem}
.einblick-thema-titel .einblick-zeichen{width:2.6rem;height:2.6rem}
.einblick-thema-titel .einblick-zeichen .motiv-symbol{width:1.4rem;height:1.4rem}
/* E177: Stand eines Einblicks unter der Unterzeile, klein und leise */
.seitenkopf .einblick-stand{margin:.9rem 0 0;font-size:.85rem;color:var(--neben)}
/* E171: zwei Wege weiter vor dem dunklen Block eines Einblicks, passende
   Leistungsstufe und naechster Einblick desselben Themas, Karten wie .einblick */
.einblick-weiter{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin:2.4rem 0}
.einblick-weiter .weiter-karte{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:1rem;align-content:start;padding:1.1rem 1.3rem;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte);color:var(--text);text-decoration:none;transition:box-shadow .25s ease,transform .25s ease}
.weiter-art{grid-column:1;margin-bottom:.35rem;font:700 .75rem/1.3 var(--schrift);letter-spacing:.1em;text-transform:uppercase;color:var(--neben)}
.weiter-titel{grid-column:1;font-weight:700;line-height:1.3;transition:color .25s ease}
.weiter-pfeil{grid-column:2;grid-row:1/span 2;align-self:center;font-size:1.3rem;color:var(--akzent)}
.einblick-themen{margin:0 0 .5rem}
.textseite-inhalt .einblicke+h2{margin-top:2.4rem}

/* E136: Foto im dunklen Block Sprechen wir rechts, Text links, je halbe
   Breite, senkrecht mittig. Ueberschreibt die Porträtregel von E77 (300 px
   links), weil das Foto die leere rechte Haelfte fuellen soll. Darunter steht
   es nach dem Knopf, damit der Weg zum Kurzgespraech vorne bleibt. */
.baender .band-dunkel .bild{max-width:none}
@media (min-width:768px){
 .band-dunkel .wrap:has(>figure.bild){grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
 .band-dunkel .wrap:has(>figure.bild)>*{grid-column:1}
 .band-dunkel .wrap:has(>figure.bild)>figure.bild{grid-column:2;grid-row:1/span 8}
}
/* E136: Foto im Fliesstext einer Textseite (Schulungsreihe auf
   /arbeitsweise/) als Breitbild 2 zu 1 statt 3 zu 2, sonst waere es bei
   1120 px 747 px hoch. Ausschnitt oben betont, damit Kopf und Flipchart
   bleiben. Das Porträt auf /ueber-mich/ steht als erstes Kind und bleibt
   unberuehrt. */
.textseite-inhalt>figure.bild:not(:first-child) img{width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 25%}

/* E85, geaendert durch E90: die drei Ziele als ruhige Liste mit Symbol statt
   als Karten, getrennt durch feine Linien. Symbol in --akzent auf
   --akzent-hell im Kreis, Grafik ohne Text, 4,33 zu 1 und damit ueber 3 zu 1.
   Ein Foto ersetzt das Symbol, dann quadratisch neben dem Text. */
.motive{list-style:none;padding:0;margin:1.2rem 0}
.motiv{max-width:none;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:1rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--linie)}
.motiv:last-child{border-bottom:1px solid var(--linie)}
.motiv>h3,.motiv>p{grid-column:2}
.motiv h3{margin:0;color:var(--text);font-size:1.1rem}
.motiv p{margin:.1rem 0 0;color:var(--neben)}
.motiv-zeichen,.motiv-foto{grid-row:1/span 2;width:3rem;height:3rem;border-radius:50%;overflow:hidden}
.motiv-zeichen{background:var(--akzent-hell);color:var(--akzent);display:flex;align-items:center;justify-content:center}
.motiv-symbol{width:1.5rem;height:1.5rem}
.motiv-foto .bild{margin:0}
.motiv-foto img{width:100%;height:100%;object-fit:cover;border-radius:0}

/* E86, geaendert durch E90: die Methode als ruhige Tafel neben den Zielen,
   weiss auf --band, ab 1024 Pixel rechts. Ohne Kette, die steht auf
   /arbeitsweise/. Ohne roten Streifen links, der bleibt Karten mit Verweis. */
.tafel{background:var(--grund);border-radius:var(--r-gross);padding:clamp(1.5rem,3.5vw,2.5rem);margin:2rem 0 0;box-shadow:var(--schatten-kopf)}
.tafel h3{margin:0 0 .6rem;color:var(--text);font-size:clamp(1.3rem,2.4vw,1.6rem)}
.tafel-text>:last-child{margin-bottom:0}
/* E130: Tafel mit Eyebrow und grosser Ziffer neben dem Kernsatz. Ziffer Manrope 800
   in --akzent (4,57 zu 1 auf --flaeche, 4,97 auf Weiss, grosse Schrift), Eyebrow
   --akzent-text (7,56 auf --flaeche) */
.tafel-eyebrow{font:700 .78rem/1.2 var(--schrift);letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-text);margin:0 0 .8rem}
.tafel-kopf{display:flex;align-items:center;gap:1.2rem;margin:0 0 1rem}
.tafel-ziffer{font:800 5.5rem/.85 var(--schrift-titel);color:var(--akzent);flex:none}
.tafel-mit-zahl h3{margin:0;font-size:clamp(1.15rem,2vw,1.3rem);line-height:1.3}
/* E134: Symbol Fokus statt Ziffer, 4 rem in --akzent, Hervorhebung im Kernsatz in --akzent-text (7,56 zu 1 auf --flaeche) */
.tafel-symbol{flex:none;color:var(--akzent);line-height:0}
.tafel-symbol .motiv-symbol{width:4rem;height:4rem}
/* E135: Hervorhebung in Ueberschriften allgemein, nicht nur in der Tafel, damit jede kuenftige Stelle dieselbe Farbe traegt. Im dunklen Block gilt .dunkel strong (hoehere Spezifitaet) */
h1 strong,h2 strong,h3 strong{color:var(--hervorhebung)}
/* E98: Tafel auf weissem Band in --flaeche ohne Schatten, wie Karten ohne
   Verweis (E67). Die Fragen des Selbsttests mit roter Kante oben wie das
   Ergebnis auf /selbsttest/ (E73), Nummer dunkelrot und fett (7,56 zu 1 auf
   --flaeche), feine Linien zwischen den Fragen wie bei den Zielen (E90). */
.baender>.band:nth-child(odd) .tafel{background:var(--flaeche);box-shadow:none}
.tafel-fragen{border-top:4px solid var(--akzent)}
.tafel-fragen h3{font-size:clamp(1.15rem,2vw,1.3rem)}
.fragen{margin:0;padding-left:2.2rem}
.fragen li{max-width:none;padding:.75rem 0 .75rem .2rem;border-top:1px solid var(--linie)}
.fragen li:first-child{border-top:0;padding-top:.2rem}
.fragen li:last-child{padding-bottom:0}
@media (min-width:1024px){
 .band .wrap:has(>.tafel){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4rem;align-items:center}
 .band .wrap:has(>.tafel)>*{grid-column:1}
 .band .wrap:has(>.tafel)>.tafel{grid-column:2;grid-row:1/span 6;margin:0}
}

/* E142: Band Ziel, die Linien ueber und unter den drei Zielen stehen auf
   Hoehe der Ober- und Unterkante der Tafel. Tafel und Liste teilen sich eine
   Zeile des Rasters und strecken sich, die Ziele verteilen sich gleichmaessig.
   Nur wenn die Liste direkt vor der Tafel steht, die Fragen des Selbsttests
   bleiben senkrecht mittig (E98). */
@media (min-width:1024px){
 .band .wrap:has(>.motive+.tafel){align-items:start}
 .band .wrap:has(>.motive+.tafel)>.motive{grid-row:3;align-self:stretch;display:flex;flex-direction:column;margin:0}
 .band .wrap:has(>.motive+.tafel)>.motive>.motiv{flex:1 1 auto;align-content:center}
 .band .wrap:has(>.motive+.tafel)>.tafel{grid-row:3;align-self:stretch;display:flex;align-items:center}
 .band .wrap:has(>.motive+.tafel)>p{margin-bottom:1.6rem}
}

/* E90: Kette auf /arbeitsweise/. Erstes Glied weiss auf Rot 4,97 zu 1 und
   fett, die uebrigen weiss mit Rahmen, dazwischen Linie mit Spitze in
   --akzent, reine Grafik, die Reihenfolge traegt die Liste ol. */
.kette{list-style:none;padding:0;margin:1.2rem 0 1.8rem;display:flex;flex-direction:column;gap:1.5rem;max-width:34rem}
.kette li{position:relative;max-width:none;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-klein);padding:.6rem 1rem;line-height:1.35}
.kette li:first-child{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent);font-weight:700}
.kette li+li::before{content:"";position:absolute;left:1.5rem;top:calc(-1.5rem - 1px);height:1.5rem;border-left:2px solid var(--akzent)}
.kette li+li::after{content:"";position:absolute;left:calc(1.5rem - 3px);top:-10px;width:8px;height:8px;border-right:2px solid var(--akzent);border-bottom:2px solid var(--akzent);transform:rotate(45deg)}

/* E89: Leitsatz ueber die volle Breite, ab 900 Pixel mit gewolltem Umbruch in
   zwei Zeilen, darunter links Unterzeile, Knoepfe, Sterne, rechts das
   Kopfbild. Fliesstext bleibt bei hoechstens 60 Zeichen je Zeile. */
.held h1{max-width:none;font-size:clamp(2rem,4.3vw,3.25rem)}
.held .umbruch{display:none}
.kopfbild{margin:2rem 0 0}
.kopfbild .bild{margin:0}
.kopfbild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* E121, aendert E117: die Woerter stehen einheitlich in --text unter den
   Saeulen wie die Beschriftung einer Achse (18,77 zu 1 auf Weiss), die Saeulen
   sind reine Farbflaeche. Schwarz auf Rot haette nur 3,78 zu 1. Alle drei
   Kreise weiss mit rotem Symbol, Grundlinie --linie unter den Saeulen.
   E117, aendert E111: Investor rot, Unternehmer im Zwischenton --akzent-mittel
   (40 Prozent zwischen --akzent-hell und --akzent) mit Schrift --text 8,15 zu 1,
   Investor Weiss auf Rot 4,97. Die Stufen steigern sich in einem Farbton.
   E111, aendert E104 in den Farben: Saeulen in den Hausfarben, --akzent-hell
   mit Schrift --akzent-text (7,16 zu 1), --akzent mit Weiss (4,97) und
   --struktur mit Weiss (18,88), statt Sand. Die Linie traegt einen weissen Saum.
   E104, aendert E89 und E94: Grafik lebendiger, bis zum Foto. Drei Saeulen
   wie ein Podest in --sand, --sand-tief und --struktur mit roter Kante oben
   wie der dunkle Block (Rot bleibt Akzent, E64). Auf jeder Saeule ein Kreis
   mit Symbol, der dritte rot gefuellt, das Wort am Fuss. Eine rote Linie mit
   leichtem Schein verbindet die Kreise und steigt ueber der dritten Saeule
   in eine Pfeilspitze. Grund weiss mit warmem Schimmer oben rechts und
   feinen Rasterlinien wie ein Diagramm. Die Saeulen sind ein ::before, damit
   die Linie zwischen Saeule und Kreis liegt. Schmuck, fuer Vorlesesoftware
   ausgeblendet, unter 900 Pixel ausgeblendet. Kontraste: Text auf --sand
   13,74, auf --sand-tief 10,76, Weiss auf Schwarz 18,88, Weiss auf Rot 4,97. */
.kopfgrafik{display:none;border-radius:var(--r-gross);padding:1.2rem 1.4rem 2.4rem;box-shadow:var(--schatten-kopf);min-height:13rem;
 background:radial-gradient(circle at 88% 0,var(--akzent-hell),var(--grund) 55%)}
.stufenflaeche{position:relative;isolation:isolate;flex:1;border-bottom:1px solid var(--linie);
 background-image:repeating-linear-gradient(to top,var(--linie) 0 1px,transparent 1px 25%)}
.stufenbild{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;width:100%;height:100%}
.stufenbild li{position:relative;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
 padding:1.6rem .4rem 0;font:800 .9rem/1.2 var(--schrift-titel);color:var(--text);text-align:center}
.stufenbild li::before{content:"";position:absolute;inset:0 .4rem;z-index:0;border-radius:var(--r-klein) var(--r-klein) 0 0;background:var(--akzent-hell);transform-origin:bottom}
.stufenbild li:nth-child(1){height:20%} /* E123, E124: Hoehen verdoppeln sich, 20, 40, 80 Prozent, oben 20 Prozent Platz fuer den Pfeil */
.stufenbild li:nth-child(2){height:40%}
.stufenbild li:nth-child(2)::before{background:var(--akzent-mittel)}
.stufenbild li:nth-child(3){height:80%}
.stufenbild li:nth-child(3)::before{background:var(--akzent)}
.stufe-wort{position:absolute;z-index:2;left:0;right:0;bottom:-1.9rem;text-align:center;color:var(--neben)} /* E122: Dunkelgrau wie Nebentext, 8,00 zu 1 auf Weiss */
.stufe-zeichen{position:absolute;z-index:2;top:0;left:50%;width:2.75rem;height:2.75rem;margin:-1.375rem 0 0 -1.375rem;border-radius:50%;
 display:grid;place-items:center;background:var(--grund);color:var(--akzent);box-shadow:0 0 0 3px var(--grund),var(--schatten-kopf)}
.stufe-zeichen .motiv-symbol{width:1.4rem;height:1.4rem}
.stufenlinie{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(var(--schein-linie))}
.stufenlinie path{fill:none;stroke:var(--akzent);stroke-width:3.5;stroke-linecap:round}
/* E111: weisser Saum unter der Linie, damit sie auch ueber der roten Saeule sichtbar bleibt */
.stufenlinie .saum{stroke:var(--grund);stroke-width:8}
.stufenspitze{position:absolute;z-index:1;left:93%;top:1%; /* E124: Ende der ausschwingenden Linie */width:1.5rem;height:1.5rem;margin:-.7rem 0 0 -.75rem;color:var(--akzent)}
.stufenspitze svg{display:block;width:100%;height:100%;fill:currentColor}
/* einmal beim Laden: Saeulen wachsen, Kreise erscheinen, die Linie wird von
   links nach rechts aufgedeckt (clip-path, ein Strichmuster versagt bei der
   nicht skalierten Linie) */
@media (prefers-reduced-motion:no-preference){
 .stufenbild li::before{animation:stufe-wachsen .7s cubic-bezier(.2,.8,.2,1) both}
 .stufenbild li:nth-child(2)::before{animation-delay:.15s}
 .stufenbild li:nth-child(3)::before{animation-delay:.3s}
 .stufe-zeichen,.stufe-wort{animation:stufe-zeigen .4s ease-out both;animation-delay:.55s}
 .stufenbild li:nth-child(2) :is(.stufe-zeichen,.stufe-wort){animation-delay:.7s}
 .stufenbild li:nth-child(3) :is(.stufe-zeichen,.stufe-wort){animation-delay:.85s}
 .stufenlinie{animation:stufe-linie .9s ease-in-out .9s both}
 .stufenspitze{animation:stufe-zeigen .3s ease-out 1.75s both}
}
@keyframes stufe-wachsen{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes stufe-zeigen{from{opacity:0;transform:translateY(6px)}}
@keyframes stufe-linie{from{clip-path:inset(-30% 100% -10% 0)}to{clip-path:inset(-30% 0 -10% 0)}}
@media (min-width:900px){
 .held .umbruch{display:inline}
 /* die letzte Zeile 1fr nimmt die Hoehe des Kopfbilds auf, sonst ruecken Unterzeile, Knoepfe und Sterne auseinander */
 .held .wrap:has(>.kopfbild){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,28rem);grid-template-rows:auto auto auto auto 1fr;column-gap:3.5rem}
 .held .wrap:has(>.kopfbild)>*{grid-column:1}
 .held .wrap:has(>.kopfbild)>h1{grid-column:1/-1}
 /* E104: Grafik so hoch wie Unterzeile, Knoepfe und Sterne, sie endet mit der Zeile der Bewertung */
 /* unten .5rem frei: die Bewertung steht in einer 44 px hohen Flaeche, so endet die Grafik mit ihrer Schrift */
 .held .wrap:has(>.kopfbild)>.kopfbild{grid-column:2;grid-row:2/span 3;align-self:stretch;margin:.4rem 0 .5rem}
 .kopfgrafik{display:flex;flex-direction:column}
 .kopfbild .bild,.kopfbild img{height:100%}
 .kopfbild img{aspect-ratio:auto}
}

/* E91: Kennzahlenleiste unter dem Kopfband, Zahl in Manrope 800 und --akzent
   (4,97 zu 1, grosse Schrift), Satz in --neben, feine Linie zwischen den
   Zahlen. Weniger Innenabstand als ein Kapitelband. */
.baender>.band:has(.kennzahlen){padding:clamp(1.8rem,3.5vw,2.6rem) 0}
.kennzahlen{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.kennzahlen li{max-width:none;display:flex;flex-direction:column;gap:.15rem}
.kennzahl{font:800 clamp(1.9rem,4vw,2.6rem)/1.05 var(--schrift-titel);color:var(--akzent)}
.kennzahlen span{color:var(--neben)}
@media (min-width:640px){
 .kennzahlen li+li{border-left:1px solid var(--linie);padding-left:2rem}
}

/* E92, E94: eine Stimme gross als Zaesur, Band in --akzent-hell. Zitat in
   Manrope 800 --text (16,35 zu 1), Anfuehrungszeichen in --akzent, Name und
   Quelle in --neben, Eyebrow in --akzent-text. */
.baender>.band:has(.zitat-gross){background:var(--grund)} /* E166: weiss statt --akzent-hell, das Zitat steht frei zwischen den weich auslaufenden Baendern */
.baender>.band:has(.zitat-gross) .eyebrow{color:var(--akzent-text)}
/* E150: Zitat mittig statt linksbuendig mit leerer rechter Haelfte, grosses
   Anfuehrungszeichen in --akzent als Zeichen ueber dem Text, Text 700 statt
   800 und etwas kleiner, Zeilen hoechstens 34 Zeichen breit, darunter ein
   kurzer Strich, Name fett, Rolle und Quelle in --neben. */
.zitat-gross{margin:0 auto;max-width:44rem;text-align:center}
.zitat-gross blockquote{margin:0}
.zitat-gross p{font:italic 400 clamp(1.4rem,2.8vw,1.9rem)/1.4 var(--schrift);color:var(--text);max-width:42ch;margin:0 auto;text-wrap:balance} /* E168: kursiv in der Grundschrift wie die Karten der Stimmen, statt Manrope 700. Manrope liegt nur aufrecht vor, eine kursive Manrope waere vom Browser schraeg gerechnet */
.zitat-gross figcaption{color:var(--neben);margin-top:1rem;font-size:.95rem;font-weight:700} /* E167: Name und Rolle fett in --neben wie in den Karten der Stimmen */
.zitat-zeichen{display:block;width:2.6rem;height:2.6rem;color:var(--sand-tief);margin:0 auto .5rem} /* E166: Sand wie in den Karten statt Rot */
/* E165: Zitatzeichen und Sterne wie in den Karten der Stimmen (E164), statt „ und Strich */
.zitat-gross p.zitat-sterne{font:400 1.05rem/1 var(--schrift);color:var(--sterne);letter-spacing:.12em;margin:1rem auto 0;max-width:none}
.zitat-gross .zitat-sterne+figcaption{margin-top:.4rem}
/* E151: Band des Zitats niedriger, die Nachbarbaender blenden weich in Weiss
   aus (E140), der Abstand entsteht dort. Statt --abstand-band (2,5 bis 4 rem)
   1,6 bis 2,4 rem oben und unten. */
.baender>.band:has(.zitat-gross){padding:clamp(1.6rem,3.5vw,2.4rem) 0}
.zitat-gross figcaption strong{color:inherit;font-weight:inherit}

/* E93: Baender gleiten beim Scrollen ein. Die Klasse setzt erst main.js, und
   nur ohne Wunsch nach reduzierter Bewegung. Bewegt wird der Inhalt, nicht
   die Flaeche, damit der Hintergrund sofort steht. */
@media (prefers-reduced-motion:no-preference){
 .band.einblenden>.wrap{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
 .band.einblenden.sichtbar>.wrap{opacity:1;transform:none}
}

/* E113, nach RUMADUM /standort/: Anschrift auf --flaeche, Hinweis als
   Hinweiszeile, QR Code rechts ab 768 Pixel. Darunter Karte und Foto
   nebeneinander, beide 2 zu 1 beschnitten statt gestaucht, Spalten mit
   minmax(0,1fr), damit sie gleich breit bleiben (RUMADUM). */
.anfahrt{margin:1rem 0 1.2rem}
.anfahrt-flaeche{background:var(--flaeche);border-radius:var(--r-gross);padding:1.4rem;display:grid;gap:1.2rem}
.anfahrt-adresse{font-size:1.15rem;margin:0 0 .9rem}
.anfahrt-adresse strong{font:800 1.25rem/1.3 var(--schrift-titel)}
.anfahrt .hinweiszeile{margin:0;max-width:52ch}
.textseite .anfahrt .qr{float:none;margin:0;justify-self:start}
.anfahrt-bilder{display:grid;gap:1rem;margin-top:1rem}
.anfahrt-bilder .bild{margin:0}
.anfahrt-bilder img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
@media (min-width:768px){
 .anfahrt-flaeche{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:2rem}
 .textseite .anfahrt .qr{justify-self:end}
 .anfahrt-bilder:has(>:nth-child(2)){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
.anfahrt-lage{margin:0 0 .9rem;color:var(--neben);font-size:.875rem} /* E244, E245: kleiner als die Anschrift, damit sie den Blick behaelt, 0,875 statt 0,95 rem */
/* E116, nach RUMADUM: Fotoauswahl. Ohne JavaScript alle Fotos untereinander,
   mit main.js eines im Verhaeltnis 2 zu 1 und darunter Miniaturen als echte
   Schaltflaechen, die aktive mit Rahmen --akzent und aria-current */
.fotoauswahl .bild{margin:0 0 1rem}
.fotoauswahl .bild:last-of-type{margin-bottom:0}
.fotoauswahl-aktiv .bild{margin:0}
.fotoauswahl-aktiv .bild[hidden]{display:none}
.fotoauswahl-leiste{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.fotoauswahl-knopf{padding:0;border:2px solid var(--linie);border-radius:var(--r-klein);background:var(--grund);cursor:pointer;line-height:0;min-height:44px}
.fotoauswahl-knopf img{width:64px;height:48px;object-fit:cover;border-radius:4px}
.fotoauswahl-knopf[aria-current="true"],.fotoauswahl-knopf:hover{border-color:var(--akzent)}
.fotoauswahl-knopf:focus-visible{outline:2px solid var(--fokus);outline-offset:2px}

/* E186: Unterseiten mit Baendern nach dem Muster der Startseite. Der Wechsel
   Weiss und Creme kommt aus den Regeln fuer `.baender>.band` oben, hier nur,
   was die Unterseiten zusaetzlich brauchen. Die Schrittfolge bleibt dort
   senkrecht, waagrecht mit Dauer-Marke ist sie nur auf der Startseite (E161). */
.baender>.band:last-child:not(.dunkel){padding-top:clamp(1.5rem,3vw,2.2rem)}
@media (min-width:1024px){
 /* Karten in Vielfachen von drei als 3er-Raster, sonst bliebe bei 9 oder 6 Karten eine allein in der letzten Zeile */
 .baender .kacheln:has(>:nth-child(3n):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
 /* Haken-Karte ohne Teil Nicht ideal: volle Breite, Punkte in zwei Spalten */
 .baender .eignung:not(:has(.eignung-nein)){grid-template-columns:1fr}
 .baender .eignung:not(:has(.eignung-nein)) .eignung-ja{grid-template-columns:1fr}
 .baender .eignung:not(:has(.eignung-nein)) .eignung-liste{columns:2;column-gap:2.5rem}
 .baender .eignung:not(:has(.eignung-nein)) .eignung-liste li{break-inside:avoid}
}
/* E186: `- Form: kompakt` am Telefon als Liste statt Karten, sonst wird eine Stufenseite 40 % laenger */
@media (max-width:639.98px){
 .kacheln-kompakt{gap:0}
 .kacheln-kompakt>.kachel,.baender>.band:nth-child(even):not(.dunkel) .kacheln-kompakt>.kachel{background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:.75rem 0 .35rem}
 .kacheln-kompakt>.kachel:last-child,.baender>.band:nth-child(even):not(.dunkel) .kacheln-kompakt>.kachel:last-child{border-bottom:0}
 .kacheln-kompakt>.kachel h3{font-size:1rem;margin-bottom:.2rem}
}

/* E191: Matrix Leistungsstufen gegen Phasen des Fahrplans. Echte Tabelle,
   belegte Zellen als durchgehender Balken in --akzent (Grafik, 4,97 auf
   --grund, 4,61 auf --band, Mindestwert 3 zu 1), Spaltenkoepfe --neben
   (8,00 / 7,43). Jede Zelle sagt ja oder nein fuer Vorlesesoftware. */
.matrix{margin:1.4rem 0 1.6rem}
.matrix table{width:100%;border-collapse:collapse;table-layout:fixed}
.matrix thead td{width:36%}
.matrix thead th{font-size:.85rem;font-weight:600;color:var(--neben);text-align:center;padding:0 .3rem .6rem;border-bottom:1px solid var(--linie)}
.matrix tbody th{text-align:left;font-weight:600;padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--linie);line-height:1.35}
.matrix td{border-bottom:1px solid var(--linie);padding:0;vertical-align:middle}
.matrix-nr{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;margin-right:.6rem;border-radius:50%;background:var(--akzent);color:var(--grund);font-size:.85rem;font-weight:700;vertical-align:middle}
.matrix-name a{color:var(--text);text-decoration:none}
.matrix-name a:hover,.matrix-name a:focus-visible{color:var(--akzent-text);text-decoration:underline}
.matrix-balken{display:block;height:.7rem;background:var(--akzent)}
.matrix td.anfang .matrix-balken{margin-left:.6rem;border-radius:999px 0 0 999px}
.matrix td.ende .matrix-balken{margin-right:.6rem;border-radius:0 999px 999px 0}
.matrix td.anfang.ende .matrix-balken{border-radius:999px}
@media (max-width:639.98px){
 .matrix thead{display:none}
 .matrix table,.matrix tbody,.matrix th,.matrix td{display:block}
 .matrix tr{display:flex;flex-wrap:wrap;gap:.4rem;padding:.8rem 0;border-bottom:1px solid var(--linie)}
 .matrix tbody th,.matrix td{border:0;padding:0}
 .matrix tbody th{flex:1 1 100%;margin-bottom:.2rem}
 .matrix td.aus,.matrix td.an .matrix-balken{display:none}
 .matrix td.an::before{content:attr(data-spalte);display:inline-block;background:var(--akzent-hell);color:var(--akzent-text);border-radius:999px;padding:.1rem .7rem;font-size:.85rem;font-weight:600}
}
/* E192: Umbruch nach dem & nur, wo Karten nebeneinander stehen. Untereinander am Telefon brauchen die Titel nicht gleich hoch zu sein */
@media (max-width:639.98px){.kacheln:not(.kacheln-pfeile) .kachel h3 br{display:none}}
/* E194: Unterzeile der Unterseiten breiter (Startseite unberuehrt, dort .held), damit zwei Saetze in zwei Zeilen laufen statt drei. Grosse Schrift, 1,2 rem, daher ueber --lesebreite vertretbar */
.seitenkopf .unterzeile{max-width:78ch}
/* E194: Satz unter der Matrix in einer Zeile, wie die Saetze unter dem Fahrplan der Startseite (E160, E162) */
.matrix~p:not(.aufrufe){max-width:none}
/* E195: Untertitel einer Karte (nur eine kursive Zeile direkt unter dem Titel) aufrecht, fett, dunkelrot wie die Fragen, 8,21 auf --grund, 7,63 auf --band */
.kachel>h3+p>em:only-child{font-style:normal;font-weight:600;color:var(--akzent-text)}
/* E197: Ueberschrift der Unterseiten bis 34 statt 24 Zeichen breit (Regel oben bei .seitenkopf h1). Ausrichtung & Eigentuemerstrategie einzeilig, keine Ueberschrift mehr dreizeilig (vorher drei Einblicke) */
.seitenkopf h1{max-width:34ch}

/* E207: Fahrplan auf Unterseiten wie die Startseite: Dauer als Marke (--akzent-text auf --akzent-hell, 7,16 zu 1),
   die Zeile darunter fett in --akzent-text (8,21 / 7,63). Nur .textseite, die Startseite hat eigene Regeln (E161) */
.textseite .schritte>li>h3+p:has(>em:only-child){margin:.15rem 0 .35rem} /* nur die Dauer-Zeile, sonst aendern sich die freigegebenen Stufenseiten */
.textseite .schritte>li>h3+p>em:only-child{display:inline-block;font-style:normal;background:var(--akzent-hell);color:var(--akzent-text);border-radius:999px;padding:.1rem .7rem;font-size:.85rem;font-weight:600}
.textseite .schritte>li>h3+p+p>em:only-child{font-style:normal;font-weight:600;color:var(--akzent-text)}
/* E207: Gate am Ende einer Phase, Beschriftung Go, wenn. Kontur --akzent-mittel, Zeichen weiss auf --akzent */
.gate{position:relative;margin:.7rem 0 0;padding:.6rem .9rem .6rem 2.7rem;border:1px solid var(--akzent-mittel);border-radius:var(--r-klein);background:var(--grund)}
.gate-zeichen{position:absolute;left:.75rem;top:.62rem;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--akzent);color:var(--grund);display:flex;align-items:center;justify-content:center}
.gate-zeichen .motiv-symbol{width:.85rem;height:.85rem;stroke-width:3}

/* E210: Band mit Bild und Karten (Schulungsreihe auf /arbeitsweise/): Ueberschrift ueber die volle Breite,
   darunter Bild und Text je zur Haelfte, darunter die Karten ueber die volle Inhaltsbreite. Am Telefon
   Ueberschrift, Bild, Text, Karten untereinander. Gilt nur, wenn das Band beides traegt, die Regel E77 bleibt sonst */
.band .wrap:has(>figure.bild):has(>.kacheln){display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"titel" "bild" "text" "karten";column-gap:3rem;align-items:center}
.band .wrap:has(>figure.bild):has(>.kacheln)>*{grid-column:1/-1}
.band .wrap:has(>figure.bild):has(>.kacheln)>.anker{grid-area:titel;align-self:start}
.band .wrap:has(>figure.bild):has(>.kacheln)>h2{grid-area:titel}
.band .wrap:has(>figure.bild):has(>.kacheln)>figure.bild{grid-area:bild;margin:0 0 1.2rem}
.band .wrap:has(>figure.bild):has(>.kacheln)>p{grid-area:text}
.band .wrap:has(>figure.bild):has(>.kacheln)>.kacheln{grid-area:karten;margin-top:2rem}
@media (min-width:768px){
 /* E212: Raster wie die Karten darunter (drei Spalten, Abstand 1 rem), Bild in der ersten Spalte buendig mit Block A,
    Text ueber zwei Spalten, eingerueckt wie der Text in den Karten (1,3 rem). Bild im eigenen Seitenverhaeltnis,
    nur verkleinert, kein Zuschnitt (E211 verworfen, wirkte gequetscht) */
 .band .wrap:has(>figure.bild):has(>.kacheln){grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1rem;grid-template-areas:"titel titel titel" "bild text text" "karten karten karten";align-items:start}
 .band .wrap:has(>figure.bild):has(>.kacheln)>p{padding-left:1.3rem}
 .band .wrap:has(>figure.bild):has(>.kacheln)>*{grid-column:auto}
 .band .wrap:has(>figure.bild):has(>.kacheln)>figure.bild{margin:0}
 .band .wrap:has(>figure.bild):has(>.kacheln)>p{margin:0}
}
/* E212: zwischen 768 und 1023 px stehen die Karten in zwei Spalten, das Bild folgt diesem Raster */
@media (min-width:768px) and (max-width:1023.98px){
 .band .wrap:has(>figure.bild):has(>.kacheln){grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"titel titel" "bild text" "karten karten"}
}

/* E213: Kapitelnummer als Marke statt Listenpunkt (wie die Dauer im Fahrplan, --akzent-text auf --akzent-hell 7,16 zu 1),
   Folgezeilen haengen unter dem Titel, nicht unter der Nummer */
.kachel ul:has(>li.kapitel){list-style:none;padding-left:0}
.kachel li.kapitel{display:grid;grid-template-columns:2.4rem 1fr;column-gap:.5rem;align-items:baseline;margin-bottom:.35rem}
.kapitel-nr{justify-self:start;background:var(--akzent-hell);color:var(--akzent-text);border-radius:999px;padding:.05rem .55rem;font-size:.8rem;font-weight:600;line-height:1.5}

/* E214: Liste Preise und Umfang ohne Umbruch: Punkte ueber die volle Inhaltsbreite statt --lesebreite, ab 1024 px je Punkt eine Zeile */
.band:has(#preise) li{max-width:none}

/* E217: Personenkarten (Erschafferfest) und Bildraster. Karten weiss auf Creme, Bild 3:4 im eigenen Verhaeltnis der Zeichnungen */
.personen{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.person{max-width:none;background:var(--flaeche);border-radius:var(--r-klein);padding:1.1rem 1.2rem .4rem}
.baender>.band:nth-child(even):not(.dunkel) .person{background:var(--grund)}
.person-bild .bild{margin:0 0 .8rem}
.person-bild img{width:100%;height:auto;border-radius:var(--r-klein)}
.person h3{margin:0 0 .4rem;font-size:1.05rem;color:var(--text)}
.galerie{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.galerie>li{max-width:none}
.galerie .bild{margin:0}
.galerie img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-klein)}
/* E225: Vorschau als Verweis, Vollbild als natives dialog aus main.js. Die
   Flaeche deckt den ganzen Schirm selbst, ohne ::backdrop, weil aeltere
   Browser dort keine Custom Properties kennen */
.galerie-verweis{display:block;border-radius:var(--r-klein);cursor:zoom-in}
.galerie-verweis img{transition:opacity .2s}
.galerie-verweis:hover img{opacity:.88}
.galerie-verweis:focus-visible{outline:3px solid var(--akzent);outline-offset:3px}
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--dunkel);color:var(--auf-dunkel)}
.lightbox[open]{display:grid;grid-template-rows:1fr auto;place-items:center}
.lightbox figure{margin:0;padding:3.5rem 4rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:0}
.lightbox img{max-width:100%;max-height:calc(100vh - 8rem);width:auto;height:auto;object-fit:contain;border-radius:var(--r-klein)}
.lightbox figcaption{margin-top:.6rem;color:var(--auf-dunkel-neben);font-size:.9rem;text-align:center}
.lightbox-zaehler{margin:.4rem 0 1rem;font-size:.85rem;color:var(--auf-dunkel-neben)}
.lightbox button{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1.5px solid var(--auf-dunkel-neben);border-radius:50%;background:var(--dunkel);color:var(--auf-dunkel);cursor:pointer}
.lightbox button:hover,.lightbox button:focus-visible{border-color:var(--akzent);color:var(--grund);outline:0;background:var(--akzent)}
.lightbox button svg{width:22px;height:22px}
.lightbox-schliessen{top:.75rem;right:.75rem}
.lightbox-zurueck{left:.75rem;top:50%;transform:translateY(-50%)}
.lightbox-weiter{right:.75rem;top:50%;transform:translateY(-50%)}
@media (max-width:599.98px){.lightbox figure{padding:3.75rem .5rem 0}.lightbox-zurueck,.lightbox-weiter{top:auto;bottom:.5rem;transform:none}.lightbox-zaehler{margin-bottom:1.4rem}}
body:has(.lightbox[open]){overflow:hidden}
/* E226: ein einzelnes Bild braucht weder Blaettern noch Stelle */
.lightbox.einzeln .lightbox-zurueck,.lightbox.einzeln .lightbox-weiter,.lightbox.einzeln .lightbox-zaehler{display:none}
/* E227: Absatzmarken. {einzeilig} ueber --lesebreite hinaus, ein Satz eine Zeile wie E160, E194, E214, am Telefon bricht er um.
   {rot} setzt das Fette in --hervorhebung, 5,71 auf --grund, 5,31 auf --band */
p.einzeilig,.seitenkopf .unterzeile.einzeilig{max-width:none}
p.rot strong{color:var(--hervorhebung)}
/* E216: Knoepfe brechen nur dann um, wenn sie breiter als die Zeile waeren (Technischer Hintergrund & Publikationen bei 360 px), sonst unveraendert einzeilig */
.knopf,.aufrufe a{max-width:100%}
@media (max-width:399.98px){.knopf,.aufrufe a{white-space:normal}}
/* E217: Bildraster ab 1024 px in vier Spalten, 12 Bilder in drei vollen Zeilen */
@media (min-width:1024px){.galerie{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* E234, geaendert durch E240: Seitenspalte neben dem Absatz davor. Auf
   /kontakt/ steht Direkt erreichen als erstes Band, darunter links die
   Erreichbarkeit, rechts Kontakt speichern mit QR Code links neben Titel und
   Knopf. Unter 768 px untereinander. Das Formular steht seit E240 in einem
   eigenen Band, die Spaltenregeln fuer das Formular entfallen */
.band .wrap:has(>.seitenspalte){display:grid;grid-template-columns:minmax(0,1fr);column-gap:2rem;align-items:center}
.band .wrap:has(>.seitenspalte)>*{grid-column:1/-1}
.band .wrap:has(>.seitenspalte)>p:has(+.seitenspalte){color:var(--neben);max-width:46ch;margin:0}
.band .wrap:has(>.seitenspalte)>p:has(+.seitenspalte) strong{color:var(--text)}
.seitenspalte{display:grid;grid-template-columns:auto auto;justify-content:start;column-gap:1.2rem;align-items:center;margin-top:1rem}
.seitenspalte h3{grid-column:2;font-size:1.05rem;margin:0 0 .6rem;align-self:end}
.seitenspalte .qr{grid-column:1;grid-row:1/span 2;float:none;margin:0}
/* E243, E245: beide QR Codes auf /kontakt/ gleich gross, seit E245 220 px wie bei RUMADUM (Grundregel .qr img) */
.seitenspalte .aufrufe{grid-column:2;margin:0;align-self:start}
@media (min-width:768px){
 .band .wrap:has(>.seitenspalte){grid-template-columns:minmax(0,1fr) auto}
 .band .wrap:has(>.seitenspalte)>p:has(+.seitenspalte){grid-column:1}
 .band .wrap:has(>.seitenspalte)>.seitenspalte{grid-column:2;margin-top:0}
}
/* E235: Satz zum Anliegen unter der Pillenleiste, Abstand nach oben statt nach unten */
/* E249: Satz zum Anliegen wieder ueber der Frage, normale Textschrift */
.anfrage .anfrage-einleitung{font-size:1rem;font-weight:400;color:var(--text);margin:0 0 1rem;max-width:none} /* E252: ohne Lesebreite, der Satz zu Kurzgespraech einzeilig */

/* E237, nach RUMADUM /standort/: Zufahrt in der Adresskarte als gerahmter
   Hinweis statt Hinweiszeile mit roter Kante, Karte mit Nachweis und Knopf
   in ihrer Spalte. --akzent-text auf --grund 8,21, Rahmen --akzent 4,61 */
.anfahrt .hinweiszeile{display:block;background:var(--grund);border:1px solid var(--akzent);border-radius:var(--r-klein);padding:.6rem .9rem;color:var(--akzent-text);max-width:var(--lesebreite)}
.anfahrt-karte .bild{margin:0}
.anfahrt-karte figcaption{margin-top:.4rem}
.anfahrt-karte .aufrufe{margin-top:1rem}

/* E241: Formular feiner, Beschriftungen kleiner in --neben statt fett schwarz
   (7,43 zu 1 auf --flaeche), die Pillen ebenso, die gewaehlte bleibt schwarz */
.anfrage .anliegen legend,.anfrage .feld label{font-size:.9rem;font-weight:600;color:var(--neben)}
.anfrage .anliegen-wahl label{font-size:.95rem;font-weight:600;color:var(--neben)}
.anfrage .anliegen-wahl label:has(input:checked){color:var(--auf-akzent)}
.anfrage .feld-wahl label{font-size:.95rem;font-weight:400}
/* E241: Kontakt speichern ohne Titel im dunklen Block, QR Code und Knopf nebeneinander */
.seitenspalte:not(:has(h3)) .qr{grid-row:auto}
.band .wrap:has(>.seitenspalte){align-items:start}
.dunkel .wrap:has(>.seitenspalte)>p:has(+.seitenspalte){color:var(--auf-dunkel-neben)}
.dunkel .wrap:has(>.seitenspalte)>p:has(+.seitenspalte) strong{color:var(--auf-dunkel)}
.seitenspalte:not(:has(h3)) .aufrufe{align-self:center}
@media (max-width:599.98px){.seitenspalte{grid-template-columns:auto}.seitenspalte .aufrufe{grid-column:1;margin-top:1rem}} /* E246: bei 360 px ragte der Knopf neben dem QR Code 220 px hinaus */
/* E242, nach RUMADUM: Adresskarte bleibt als Kasten sichtbar, auch auf einem
   cremefarbenen Band (dort Grund --grund mit Linie --linie), der QR Code in
   eigenem weissem Kasten mit Linie */
.anfahrt-flaeche{border:1px solid var(--linie)}
.baender>.band:nth-child(even) .anfahrt-flaeche{background:var(--grund)}
.anfahrt .qr img{border:1px solid var(--linie)} /* E245: wieder 220 px wie bei RUMADUM, E243 hatte 160 */

/* E247: Direkt erreichen ab 1024 px in vier Spalten, Vorschlag des
   Auftraggebers: Kontaktkarten je ein Viertel, der QR Code im vierten Viertel
   oben buendig mit der Ueberschrift, der Knopf Kontakt speichern unter Mail,
   links neben dem QR Code, die Erreichbarkeit unter Anrufen und WhatsApp.
   Die Seitenspalte loest sich dafuer auf (display:contents), Karten und
   Spalten teilen denselben Abstand von 1 rem */
@media (min-width:1024px){
 .dunkel .wrap:has(>.seitenspalte){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1rem;row-gap:0}
 .dunkel .wrap:has(>.seitenspalte)>h2{grid-column:1/4;grid-row:1}
 .dunkel .wrap:has(>.seitenspalte)>.kontaktwege{grid-column:1/4;grid-row:2;gap:1rem;margin-bottom:1.2rem}
 .dunkel .wrap:has(>.seitenspalte)>p:has(+.seitenspalte){grid-column:1/3;grid-row:3;max-width:none}
 .dunkel .wrap:has(>.seitenspalte)>.seitenspalte{display:contents}
 .dunkel .seitenspalte .qr{grid-column:4;grid-row:1/span 3;justify-self:end;align-self:start}
 .dunkel .seitenspalte .aufrufe{grid-column:3;grid-row:3;align-self:start;justify-self:end;margin:0} /* E248: rechtsbuendig mit der Karte Mail */
}

/* E249: Hinweise im Formular ohne Lesebreite, damit sie bei voller Breite einzeilig bleiben, am Telefon brechen sie um */
.anfrage .anfrage-kontaktweg,.anfrage .anfrage-datenschutz{max-width:none}

/* E251: am Telefon die Anliegen untereinander, je eine Zeile ueber die volle Breite. In zwei Spalten brachen bis etwa 540 px vier von sechs in zwei Zeilen um (gemessen bei 390 und 360 px) */
@media (max-width:539.98px){.anliegen-wahl{grid-template-columns:1fr}}

/* E253: ein dunkler Block mit QR Code umschliesst den rechts umflossenen Code, sonst ragte er auf /rezensionen/ unten hinaus */
.dunkel:has(>.qr),.band-dunkel>.wrap:has(>.qr){display:flow-root} /* E254: auch im dunklen Band nach Muster C */
/* E253: am Telefon steht der Text vor dem QR Code, Scannen braucht dort niemand zuerst */
@media (max-width:767.98px){.dunkel:has(>.qr),.band-dunkel>.wrap:has(>.qr){display:flex;flex-direction:column}.dunkel:has(>.qr)>.qr,.band-dunkel>.wrap:has(>.qr)>.qr{order:1}}

/* E255: Bewertung im Seitenkopf von /rezensionen/ nach RUMADUM. Ab 768 px rechts neben der Unterzeile, oben buendig mit ihr, darunter links unter der Unterzeile. Note fett in --akzent-text (8,21 auf --grund, 7,63 auf --band), Anzahl fett in --text, Stand klein in --neben */
.vertrauen-kopf{flex-direction:column;align-items:flex-start;gap:.15rem;margin:1rem 0 0}
.vertrauen-kopf .sterne-zeichen{font-size:1.6rem;line-height:1.1;letter-spacing:.05em} /* E256: groesser auf Wunsch des Auftraggebers, vorher 1,15 rem wie die Vertrauenszeile der Startseite */
.vertrauen-kopf>span:nth-child(2){font-weight:700}
.vertrauen-kopf strong{color:var(--akzent-text);font-size:1.35rem}
.vertrauen-kopf .vertrauen-stand{flex-basis:auto;font-size:.85rem}
@media (min-width:768px){
 .seitenkopf .wrap:has(>.vertrauen-kopf){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem}
 .seitenkopf .wrap:has(>.vertrauen-kopf)>*{grid-column:1/-1}
 .seitenkopf .wrap:has(>.vertrauen-kopf)>.unterzeile{grid-column:1}
 .seitenkopf .wrap:has(>.vertrauen-kopf)>.vertrauen-kopf{grid-column:2;align-self:start;align-items:flex-end;text-align:right;margin:0}
}
/* E255: im dunklen Band steht der QR Code ab 768 px oben buendig mit der Ueberschrift statt darunter umflossen. Raster mit drei Zeilen fuer Ueberschrift, Text und Knopfzeile, die vierte nimmt die Mehrhoehe des Codes auf, sonst wuchsen die Abstaende zwischen den Absaetzen. Darunter gilt E253, Text vor dem Code */
@media (min-width:768px){
 .band-dunkel>.wrap:has(>.qr){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:repeat(3,auto) 1fr;column-gap:3rem}
 .band-dunkel>.wrap:has(>.qr)>*{grid-column:1}
 .band-dunkel>.wrap:has(>.qr)>.qr{grid-column:2;grid-row:1/-1;align-self:start;float:none;margin:0}
}
/* E255: Herkunft der Stimmen unter den Karten nach RUMADUM, Kante in --sterne als Zierde wie die Sterne (ohne Kontrastanforderung), Text --neben 8,00 auf --grund, 7,43 auf --band */
.stimmen-hinweis{margin:1.6rem 0 0;padding:.15rem 0 .15rem .9rem;border-left:3px solid var(--sterne);font-size:.85rem;color:var(--neben);max-width:44rem} /* zwei Zeilen ab 768 px wie bei RUMADUM, Umbruch nach dem ersten Satz */

/* E260: Einblicke nach Muster C. Uebersicht: Themenknoepfe im Seitenkopf, je Thema ein Band, unter dem Titel die Beschreibung in --neben (8,00 auf --grund, 7,43 auf --band) */
.seitenkopf .einblick-themen{margin:1.4rem 0 0}
.einblick-thema-zeile{margin:-.4rem 0 0;color:var(--neben)}
.textseite .baender .einblicke{margin-bottom:0} /* nur Unterseiten, das Band Einblicke der Startseite bleibt wie abgenommen (E179) */
.textseite .baender .einblick-weiter{margin:0}
/* E260: Thema mit Zeichen vor dem Stand im Kopf eines Einblicks, Verweis auf seine Gruppe in der Uebersicht, 44 px Beruehrflaeche ueber die Zeilenhoehe */
.seitenkopf .einblick-stand{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem}
.einblick-stand-thema{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;color:var(--text);font-weight:700;text-decoration:none}
.einblick-stand-thema .einblick-zeichen{width:1.6rem;height:1.6rem}
.einblick-stand-thema .einblick-zeichen .motiv-symbol{width:.9rem;height:.9rem}
.einblick-stand-thema span:last-child{text-decoration:underline;text-decoration-color:var(--linie);text-underline-offset:3px}
.einblick-stand-thema:hover span:last-child,.einblick-stand-thema:focus-visible span:last-child{color:var(--hervorhebung);text-decoration-color:currentColor}
/* E260: die drei Schritte unter Was ist zu tun? als Karten mit Ziffernkreis wie .schritte, nebeneinander ab 3 x 220 px, sonst untereinander. Erkannt am Kopf mit Stand, den jeder Einblick traegt (E177) */
.textseite:has(.einblick-stand) .band ol{list-style:none;counter-reset:schritt;padding:0;margin:1.4rem 0 1.8rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));max-width:none}
.textseite:has(.einblick-stand) .band ol>li{counter-increment:schritt;position:relative;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte);padding:3.6rem 1.2rem 1.2rem;margin:0}
.textseite:has(.einblick-stand) .band ol>li::before{content:counter(schritt);position:absolute;left:1.2rem;top:1.1rem;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--akzent);color:var(--auf-akzent);font:800 1.05rem/2.3rem var(--schrift-titel);text-align:center}
.textseite:has(.einblick-stand) .band ol>li>strong:first-child{display:block;font-size:1.05rem;margin-bottom:.3rem}

/* E261, E262: Filter der Einblicke im Seitenkopf nach dem Muster von RUMADUM, erst mit .js (INSTRUCTIONS 5), ohne JavaScript die Sprungverweise. Weisse Flaeche wie die Karten. Oben Suche und drei Auswahllisten in einer Reihe ab 900 px, darunter links die Treffer, rechts Filter zuruecksetzen. Beschriftung 0,85 rem fett --text, Felder 44 px mit Rand --linie, Text --text auf --grund (17,43) */
.einblick-filter{display:none}
.js .einblick-ohne-js{display:none}
.js .einblick-filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.6rem 0 0;padding:1.2rem 1.3rem;background:var(--grund);border-radius:var(--r-gross);box-shadow:var(--schatten-karte)}
.filter-feld{display:grid;gap:.35rem;min-width:0;font-size:.85rem;font-weight:700;color:var(--text)}
.filter-suche{grid-column:1/-1}
.filter-feld input,.filter-feld select{width:100%;min-height:44px;padding:0 .9rem;border:1.5px solid var(--linie);border-radius:var(--r-klein);font:inherit;font-size:1rem;font-weight:400;color:var(--text);background:var(--grund)}
.filter-feld select{cursor:pointer}
.filter-feld input:hover,.filter-feld select:hover,.filter-feld input:focus,.filter-feld select:focus{border-color:var(--struktur)}
.filter-status{grid-column:1;margin:0;min-height:44px;display:flex;align-items:center;font-weight:700}
.filter-zurueck{grid-column:2;justify-self:end;min-height:44px;padding:0 1.1rem;border:1.5px solid var(--linie);border-radius:var(--r-klein);background:transparent;font:inherit;font-size:.92rem;font-weight:700;color:var(--akzent-text);cursor:pointer}
.filter-zurueck:hover,.filter-zurueck:focus-visible{border-color:var(--akzent-text)}
@media (max-width:539.98px){.js .einblick-filter{grid-template-columns:minmax(0,1fr) auto}.filter-feld{grid-column:1/-1}.filter-zurueck{padding:0 .9rem}} /* am Telefon die Felder untereinander, Treffer und Zuruecksetzen in einer Zeile */
@media (min-width:900px){.js .einblick-filter{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}.filter-suche{grid-column:auto}.filter-status{grid-column:1/3}.filter-zurueck{grid-column:3/5}}
/* E261: Raster der Treffer als eigenes Band, nur beim Filtern sichtbar, dann ohne Themenbaender */
.baender>.band:has(.einblick-treffer){display:none}
.baender.filtert>.band:has(.einblick-thema-titel){display:none}
.baender.filtert>.band:has(.einblick-treffer){display:block}
.einblick[hidden]{display:none}
.einblick-treffer .einblick-thema{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.einblick-thema-titel~.einblicke .einblick-thema{display:none}
.einblick-leer{margin:0;font-weight:700}

/* E266: Selbsttest nach Muster C. Bloecke als weisse Flaechen auf dem Band. Der Zwischenstand klebt beim Ausfuellen am unteren Rand (sticky, nur mit .js sichtbar wie bisher) und endet an seinem Platz unter den Fragen; Schatten nach oben, Stufe kleiner, damit er am Telefon hoechstens etwa 110 px deckt */
.baender .selbsttest fieldset{background:var(--grund)}
.js .selbsttest-ergebnis{padding:.75rem 1.1rem}
/* E268: mitlaufend erst nach dem ersten Kreuz (Klasse begonnen aus main.js), davor steht der Zwischenstand nur an seinem Platz und deckt keine Frage. Darueber ein Uebergang von 2,5 rem in --grund, damit zwischen Fragen und Zwischenstand sichtbar Abstand bleibt; mit der Tastatur gewaehlte Fragen halten 9 rem Abstand vom unteren Rand */
.js .selbsttest.begonnen .selbsttest-ergebnis{position:sticky;bottom:.6rem;z-index:5;box-shadow:0 -6px 20px rgba(17,17,17,.12)}
.js .selbsttest.begonnen .selbsttest-ergebnis::before{content:"";position:absolute;left:0;right:0;bottom:calc(100% + 4px);height:2.5rem;background:linear-gradient(to bottom,transparent,var(--grund));pointer-events:none}
.selbsttest label{scroll-margin-bottom:9rem}
.selbsttest>fieldset:last-of-type{margin-bottom:2.5rem} /* E267: mehr Abstand zwischen dem letzten Block und dem Ergebnis, vorher 1,5 rem durch den Aussenabstand des Ergebnisses */
.js .selbsttest-stufe{font-size:clamp(1.15rem,2.4vw,1.45rem);margin:0 0 .4rem}
.js .selbsttest-zahl{margin:.3rem 0 0;font-size:.9rem}

/* E270: Ergebnis des Selbsttests zum Mitnehmen. Knopf im Zwischenstand nur mit .js, als Randknopf klein. Teile nur fuer den Druck am Bildschirm verborgen */
.nur-druck,.selbsttest-drucken{display:none}
.js .selbsttest-drucken{display:block;margin:.6rem 0 0}
/* E272: ab 540 px steht der Knopf rechtsbuendig in der Zeile von Leiste und Zahl, darunter unter der Zahl wie bisher */
@media (min-width:540px){
 .js .selbsttest-ergebnis{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.4rem;align-items:center}
 .js .selbsttest-ergebnis>.selbsttest-stufe{grid-column:1/-1}
 .js .selbsttest-ergebnis>meter,.js .selbsttest-ergebnis>.selbsttest-zahl{grid-column:1}
 .js .selbsttest-ergebnis>.selbsttest-drucken{grid-column:2;grid-row:2/span 2;margin:0;justify-self:end}
}
.selbsttest-drucken button{min-height:44px;padding:0 1rem;border:1.5px solid var(--struktur);border-radius:var(--r-klein);background:var(--grund);font:inherit;font-size:.9rem;font-weight:700;color:var(--text);cursor:pointer}
.selbsttest-drucken button:hover,.selbsttest-drucken button:focus-visible{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent)}
/* E270: Druckansicht A4 auf zwei Seiten, nur auf der Seite mit dem Selbsttest (:has), andere Seiten drucken wie bisher. Seite 1 Kopf, Stufe, Fragen mit Kreuzen ohne Hinweise; Seite 2 Stufen, Notizlinien je Block, Kontakt. Alles andere der Seite entfaellt im Druck */
@page{size:A4;margin:13mm 14mm}
@media print{
 html:has(.selbsttest){font-size:9.2pt}
 body:has(.selbsttest){background:var(--grund);color:var(--text)}
 body:has(.selbsttest) :is(.kopf,.fuss,.seitenkopf,.springen,.baender>.band:not(:has(.selbsttest))),.band:has(.selbsttest)>.wrap>:not(.selbsttest),.selbsttest-hinweis,.selbsttest-drucken,.selbsttest-ergebnis meter{display:none!important}
 .band:has(.selbsttest){padding:0;background:var(--grund)}
 .band:has(.selbsttest)>.wrap{max-width:none;padding:0;opacity:1;transform:none}
 .nur-druck{display:block}
 .selbsttest{display:flex;flex-direction:column}
 .druck-kopf{order:0;display:flex;align-items:center;gap:1rem;border-bottom:1.5px solid var(--text);padding-bottom:.5rem;margin-bottom:.6rem}
 .druck-kopf .logo{height:26px;width:auto}
 .druck-titel{margin:0;font:800 1.35rem/1.2 var(--schrift-titel);flex:1}
 .druck-datum{margin:0;color:var(--neben)}
 .js .selbsttest-ergebnis,.selbsttest-ergebnis{order:1;display:block;position:static;box-shadow:none;border:0;border-left:4px solid var(--akzent);border-radius:0;background:var(--grund);padding:.1rem 0 .1rem .7rem;margin:0 0 .6rem;box-shadow:none!important}
 .js .selbsttest.begonnen .selbsttest-ergebnis::before{display:none}
 .js .selbsttest-stufe{font-size:1.15rem;margin:0}
 .js .selbsttest-zahl{margin:.1rem 0 0;font-size:.9rem}
 .selbsttest fieldset{order:2;break-inside:avoid;padding:.25rem .7rem .2rem;margin:0 0 .35rem;background:var(--grund)}
 .selbsttest>fieldset:last-of-type{margin-bottom:0}
 .selbsttest legend{font-size:.95rem}
 .selbsttest ol{margin:.1rem 0}
 .selbsttest label{min-height:0;padding:.1rem 0;gap:.5rem}
 .selbsttest input{width:1rem;height:1rem;margin-top:.1rem;print-color-adjust:exact;-webkit-print-color-adjust:exact}
 .selbsttest-auswertung{order:3;break-before:page;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 1rem;gap:.5rem}
 .selbsttest-auswertung li{padding:.5rem .6rem;font-size:.9rem}
 .selbsttest-auswertung li.treffer{border-width:2px;border-color:var(--text)}
 .selbsttest-auswertung a{color:var(--text);text-decoration:none}
 .druck-anhang{order:4;margin-top:.4rem}
 .druck-anhang h2{font-size:1.3rem;margin:0 0 .2rem;border:0;padding:0}
 .druck-anhang>p{margin:0 0 .6rem;color:var(--neben)}
 .druck-notiz{break-inside:avoid;margin:0 0 .45rem}
 .druck-notiz h3{font-size:.95rem;margin:0;color:var(--akzent-text)}
 .druck-linie{display:block;height:1.45rem;border-bottom:1px solid var(--linie)}
 .druck-kontakt{margin:.8rem 0 0;padding-top:.4rem;border-top:1px solid var(--linie);font-size:.9rem;color:var(--neben);max-width:none}
}


/* E280: Rueckmeldeseiten sind kuerzer als der Bildschirm, der Fuss steht
   trotzdem unten. Nur Seiten mit .kurzseite, alle anderen bleiben unberuehrt */
body:has(.kurzseite){min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body:has(.kurzseite)>main{flex:1 0 auto}
.kurzseite .aufrufe{margin-top:1.6rem}
.kurzseite .kontaktwege{margin-top:1.2rem}