/*
Theme Name: TWS 2026
Description: Theme für den Relaunch twsconsult.de, Leitbild „Planunterlage statt Prospekt“ (PLAN.md, Abschnitt C). Bis zur Umschaltung (P9) nur über ?vorschau=2026 sichtbar; in der Verwaltung nicht aktivieren.
Version: 0.2.0
Author: Thomas Svilar
Text Domain: tws-theme-2026
*/

/* ========== Schriften (selbst gehostet, SIL OFL, untergliedert; Quelle und Prüfung: _werkzeug/schriften.py) ========== */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/text.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(fonts/text-kursiv.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/serif.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(fonts/mono.woff2) format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

/* ========== Farben und Maße ========== */
:root{
  --papier:#FFFFFF;      /* Grund: Weiß (Thomas, 10.11.2026; Plan C sah Papierweiß vor) */
  --papier-2:#F6F4EF;    /* abgesetzte Fläche (warmes Papierweiß) */
  --text:#1A1D21;        /* 16,9:1 auf Weiß */
  --text-2:#4B545D;      /* 7,7:1 auf Weiß, 7,0:1 auf Papier-2 */
  --linie:#6C7884;       /* Stahlgrau, nur Linien (4,6:1) */
  --linie-hell:#D5D7D9;  /* Haarlinie, schmückend */
  --akzent:#2460A8;      /* Logoblau, Verweise (6,3:1 auf Weiß, 5,8:1 auf Papier-2) */
  --tief:#0C3C78;        /* Tiefblau, Flächen und Knöpfe (10,9:1) */
  --tief-2:#0A3266;
  --hell-auf-tief:#C9D3E0; /* 7,2:1 auf Tiefblau */

  --schrift-text:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-titel:"Source Serif 4",Georgia,"Times New Roman",serif;
  --schrift-mono:"Atkinson Hyperlegible Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --a1:.25rem;--a2:.5rem;--a3:.75rem;--a4:1rem;--a5:1.5rem;--a6:2rem;--a7:3rem;--a8:4.5rem;--a9:6.5rem;
  --rand:12.5rem;        /* Randspalte */
  --spalt:3rem;          /* Abstand Randspalte zu Text */
  --seite:75rem;         /* größte Seitenbreite */
  --lese:66ch;           /* Zeilenlänge Fließtext */
  --rad:3px;

  /* Farben für das Anfrageformular aus P7 (mu-plugins/tws-anfrage) */
  --tws-akzent:var(--akzent);--tws-tiefblau:var(--tief);--tws-linie:var(--linie);
  --tws-text:var(--text);--tws-text-leise:var(--text-2);--tws-feld:#fff;
}

/* ========== Grundlagen ========== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--text);font-family:var(--schrift-text);font-size:1.125rem;line-height:1.6;font-variant-numeric:lining-nums}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:600;line-height:1.2;margin:0 0 var(--a4);color:var(--text);text-wrap:balance}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem);letter-spacing:-.005em}
h2{font-size:clamp(1.55rem,1.25rem + 1.2vw,2.1rem)}
h3{font-size:1.3rem}
h4{font-size:1.1rem}
p,ul,ol,dl,table,figure,blockquote{margin:0 0 var(--a4)}
p,li,dd,td,blockquote,figcaption{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
p,li{max-width:var(--lese)}
a{color:var(--akzent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--tief);text-decoration-thickness:2px}
strong,b{font-weight:700}
small{font-size:.875rem}
hr{border:0;border-top:1px solid var(--linie-hell);margin:var(--a7) 0}
::selection{background:#D6E1F0}
:focus-visible{outline:3px solid var(--tief);outline-offset:2px;border-radius:1px}
.mono,code,kbd{font-family:var(--schrift-mono);font-size:.9em;font-variant-numeric:tabular-nums}
.leise{color:var(--text-2)}
.unsichtbar{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprung{position:absolute;left:var(--a4);top:-10rem;z-index:20;background:var(--tief);color:#fff;padding:var(--a3) var(--a4);border-radius:var(--rad)}
.sprung:focus{top:var(--a4);color:#fff}
main:focus{outline:none}

/* ========== Raster: Randspalte und Textspalte ========== */
.breite{max-width:var(--seite);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.5rem)}
.raster{display:grid;grid-template-columns:var(--rand) minmax(0,1fr);column-gap:var(--spalt)}
.raster > .rand{grid-column:1}
.raster > .haupt{grid-column:2;min-width:0}
.abschnitt{padding-block:var(--a8);border-top:1px solid var(--linie-hell)}
.abschnitt:first-child{border-top:0}
.rand{font-family:var(--schrift-mono);font-size:.875rem;line-height:1.5;color:var(--text-2)}
.rand .nr{display:block;color:var(--tief);font-weight:500;font-size:1rem;margin-bottom:var(--a1)}
.ueberzeile{font-family:var(--schrift-mono);font-size:.875rem;color:var(--text-2);margin:0 0 var(--a3);letter-spacing:.01em}
.einleitung{font-size:1.25rem;line-height:1.55;max-width:60ch}

/* ========== Kopf ========== */
.kopf{border-bottom:1px solid var(--linie);background:var(--papier)}
.kopf .breite{display:flex;align-items:center;gap:var(--a5);min-height:4.75rem}
.marke{display:flex;align-items:center;gap:var(--a3);color:var(--text);text-decoration:none;margin-right:auto;flex-shrink:0}
.marke:hover{color:var(--text)}
.marke img{width:54px;height:54px;flex-shrink:0}
.marke span{display:block;font-weight:700;line-height:1.15;font-size:1rem}
.marke small{display:block;font-weight:400;color:var(--text-2);font-size:.8125rem;max-width:19rem;margin-top:.15rem}
.navi > ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--a1)}
.navi li{position:relative;margin:0;max-width:none;hyphens:manual;-webkit-hyphens:manual}
.navi a,.navi button{display:block;font:inherit;font-size:1rem;color:var(--text);text-decoration:none;background:none;border:0;padding:var(--a2) .6rem;cursor:pointer;border-radius:var(--rad);line-height:1.4;white-space:nowrap}
.navi a:hover,.navi button:hover{color:var(--tief);text-decoration:underline;text-underline-offset:.25em}
.navi [aria-current="page"],.navi .aktiv > button{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em;color:var(--tief)}
.navi button::after{content:"";display:inline-block;width:.45em;height:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg);margin-left:.5em}
.navi button[aria-expanded="true"]::after{transform:translateY(.05em) rotate(-135deg)}
.navi .unter{list-style:none;margin:0;padding:var(--a2) 0;position:absolute;left:0;top:100%;min-width:19rem;background:var(--papier);border:1px solid var(--linie);border-radius:var(--rad);box-shadow:0 6px 16px rgba(12,60,120,.10);display:none;z-index:10}
.navi .unter a{padding:var(--a2) var(--a4)}
.navi .unter .trenner{border-top:1px solid var(--linie-hell);margin-top:var(--a2);padding-top:var(--a2)}
.navi .unter .gruppe{font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2);padding:var(--a2) var(--a4) 0}
.navi li.offen > .unter{display:block}
.no-js .navi li:focus-within > .unter,.no-js .navi li:hover > .unter{display:block}
.telefon{font-family:var(--schrift-mono);font-size:1rem;color:var(--tief);text-decoration:none;white-space:nowrap;font-weight:500}
.telefon:hover{text-decoration:underline}
.menue-knopf{display:none;font:inherit;font-size:1rem;background:none;border:1.5px solid var(--tief);color:var(--tief);border-radius:var(--rad);padding:var(--a2) var(--a3);cursor:pointer}

/* Kopf: zwischen 77rem und 86rem enger setzen, darunter Menüknopf (P9: alle Menüpunkte sichtbar, 1280 px mit Bildlaufleiste) */
@media (min-width:77.01rem) and (max-width:86rem){.kopf .breite{gap:var(--a3)}.navi a,.navi button{padding-inline:.45rem}}
@media (max-width:77rem){
  .kopf .breite{flex-wrap:wrap;gap:var(--a3);padding-block:var(--a3)}
  .menue-knopf{display:block;order:3}
  .telefon{order:2}
  .navi{order:4;flex-basis:100%;display:none;border-top:1px solid var(--linie-hell);padding-block:var(--a2)}
  .navi.offen,.no-js .navi{display:block}
  .no-js .menue-knopf{display:none}
  .navi > ul{flex-direction:column;gap:0}
  .navi a,.navi button{padding:var(--a3) 0;width:100%;text-align:left}
  .navi .unter{position:static;border:0;box-shadow:none;min-width:0;padding:0 0 var(--a2) var(--a4);border-left:1px solid var(--linie-hell)}
}
@media (max-width:30rem){
  .marke small{display:none}
  .telefon{font-size:.9375rem}
}

/* ========== Knöpfe und Verweise ========== */
.knopf{display:inline-block;font:inherit;font-size:1rem;font-weight:700;line-height:1.3;background:var(--tief);color:#fff;border:2px solid var(--tief);border-radius:var(--rad);padding:.8rem 1.3rem;text-decoration:none;cursor:pointer}
.knopf:hover{background:var(--tief-2);border-color:var(--tief-2);color:#fff;text-decoration:underline;text-underline-offset:.2em}
.knopf:disabled,.knopf[aria-disabled="true"]{background:var(--papier-2);border-color:var(--linie);color:var(--text-2);cursor:not-allowed;text-decoration:none}
.knopf-rahmen{background:transparent;color:var(--tief)}
.knopf-rahmen:hover{background:var(--papier-2);color:var(--tief)}
.knoepfe{display:flex;flex-wrap:wrap;gap:var(--a3) var(--a5);align-items:center;margin-top:var(--a5)}
.weiter{font-weight:700;text-decoration:none;color:var(--akzent)}
.weiter::after{content:" →"}
.weiter:hover{text-decoration:underline}
.inhalt > p:first-child{font-size:1.25rem;line-height:1.55}
.inhalt .anfrage{margin-top:var(--a5)}
.inhalt > .anfrage{max-width:36rem}

/* ========== Schriftfeld (Kopf wie auf einem Plan) ========== */
.schriftfeld{display:flex;flex-wrap:wrap;gap:1px;background:var(--linie);border:1px solid var(--linie);border-radius:var(--rad);margin:var(--a6) 0 0;overflow:hidden}
.schriftfeld > div{flex:1 1 11.5rem;background:var(--papier);padding:var(--a3) var(--a4);min-width:0}
.schriftfeld dt{font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2);margin-bottom:var(--a1)}
.schriftfeld dd{margin:0;font-size:.9375rem;line-height:1.45;hyphens:auto;-webkit-hyphens:auto}
.schriftfeld .stand dd{font-family:var(--schrift-mono)}
.seitenkopf{padding-block:var(--a8) var(--a7)}
.seitenkopf h1{max-width:24ch}

/* ========== Inhalt aus WordPress ========== */
.inhalt > *:last-child{margin-bottom:0}
.inhalt > h2,.inhalt > section > h2,.schluss > h2{margin-top:var(--a8);padding-top:var(--a5);position:relative}
.inhalt > h2::before,.inhalt > section > h2::before,.schluss > h2::before{content:"";position:absolute;top:0;right:0;left:calc(-1 * (var(--rand) + var(--spalt)));border-top:1px solid var(--linie-hell)}
.inhalt > h2:first-child{margin-top:0}
.inhalt > h3{margin-top:var(--a6)}
.inhalt ul:not([class]),.inhalt ol:not([class]){padding-left:1.25rem}
.inhalt li{margin-bottom:var(--a2)}
.inhalt li::marker{color:var(--linie)}
.inhalt blockquote{margin:var(--a6) 0;padding-left:var(--a5);border-left:2px solid var(--tief);font-family:var(--schrift-titel);font-weight:600;font-size:1.35rem;line-height:1.4}
.inhalt figure.wp-block-table{overflow-x:auto;margin:var(--a5) 0}

/* Randnotiz: im Inhalt vor dem Absatz notiert, steht auf breiten Schirmen in der Randspalte */
.randnotiz{font-family:var(--schrift-mono);font-size:.8125rem;line-height:1.5;color:var(--text-2);border-top:1px solid var(--linie);padding-top:var(--a2);margin:0 0 var(--a4);max-width:none}
@media (min-width:60.01rem){
  .inhalt .randnotiz{float:left;clear:left;width:var(--rand);margin-left:calc(-1 * (var(--rand) + var(--spalt)));margin-top:.35rem}
}

/* Positionsliste wie im Leistungsverzeichnis */
.positionen{list-style:none;padding:0;margin:var(--a5) 0;counter-reset:pos;border-bottom:1px solid var(--linie-hell)}
.positionen > li{counter-increment:pos;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:var(--a4);padding:var(--a4) 0;border-top:1px solid var(--linie-hell);margin:0;max-width:none}
.positionen > li::before{content:counter(pos,decimal-leading-zero);font-family:var(--schrift-mono);font-weight:500;color:var(--tief);grid-row:1 / span 9;padding-top:.1rem}
.positionen > li > *{grid-column:2;max-width:var(--lese)}
.positionen > li > strong:first-child,.positionen h3{display:block;font-family:var(--schrift-titel);font-weight:600;font-size:1.2rem;line-height:1.3;margin:0 0 var(--a1)}
.positionen p{margin:0 0 var(--a2)}
.positionen p:last-child{margin-bottom:0}
.positionen .verweise{font-size:.9375rem;color:var(--text-2);margin-top:var(--a2)}

/* Tabellen (Referenzen, Vergleiche) */
table{border-collapse:collapse;width:100%;font-size:.9375rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;vertical-align:top;padding:var(--a3) var(--a4) var(--a3) 0;border-bottom:1px solid var(--linie-hell)}
thead th{font-family:var(--schrift-mono);font-weight:400;font-size:.8125rem;color:var(--text-2);border-bottom:1px solid var(--linie)}
td.zahl,th.zahl{text-align:right;white-space:nowrap}
@media (max-width:48rem){
  table.stapel thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stapel,table.stapel tbody,table.stapel tr,table.stapel td{display:block;width:100%}
  table.stapel tr{border-top:1px solid var(--linie);padding:var(--a3) 0}
  table.stapel td{border:0;padding:var(--a1) 0;display:grid;grid-template-columns:8rem minmax(0,1fr);gap:var(--a3)}
  table.stapel td::before{content:attr(data-feld);font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2);padding-top:.1rem}
}

/* Fragen und Antworten */
.inhalt details,.fragen details{border-top:1px solid var(--linie-hell);padding:0;margin:0;max-width:var(--lese)}
.inhalt details:last-of-type,.fragen details:last-of-type{border-bottom:1px solid var(--linie-hell)}
summary{cursor:pointer;font-weight:700;padding:var(--a4) 2rem var(--a4) 0;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.25rem;top:var(--a4);font-family:var(--schrift-mono);color:var(--tief);font-weight:500}
details[open] > summary::after{content:"\2212"}
details > :not(summary){margin-top:0}
details > :last-child{padding-bottom:var(--a4)}

/* Abbildung mit Bildunterschrift (Breite und Höhe im HTML, kein Layoutsprung) */
.abbildung{margin:0 0 var(--a5)}
.inhalt .abbildung{max-width:34rem}
.unterlage{font-size:1rem;color:var(--text-2);border-left:2px solid var(--linie-hell);padding-left:var(--a3)}
.unterlage .mono{color:var(--tief);margin-right:var(--a2)}
.abbildung img{width:100%;object-fit:cover;border:1px solid var(--linie);border-radius:var(--rad);background:var(--papier-2)}
.abbildung img{aspect-ratio:3 / 2;height:auto}
.abbildung figcaption{font-size:.875rem;line-height:1.5;color:var(--text-2);margin-top:var(--a2)}
.abbildung figcaption .mono{color:var(--tief);margin-right:var(--a2)}

/* Anriss eines Projektfalls (Startseite, Leistungsseite) */
.fall{border-top:2px solid var(--tief);padding-top:var(--a4)}
.fall .ueberzeile{margin-bottom:var(--a2)}
.fall h3,.fall .titel{font-family:var(--schrift-titel);font-weight:600;font-size:1.35rem;line-height:1.3;margin:0 0 var(--a3)}
.fall dl{margin:var(--a3) 0}
.fall dt{font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2)}
.fall dd{margin:0 0 var(--a3);font-size:1rem}

/* Verweisliste: Projektfall, Arbeitshilfe, Ratgeber */
.verweisliste{list-style:none;padding:0;margin:0 0 var(--a5);border-bottom:1px solid var(--linie-hell)}
.verweisliste li{border-top:1px solid var(--linie-hell);padding:var(--a3) 0;margin:0;max-width:none;display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--a4)}
.verweisliste .art{font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2);padding-top:.2rem}
.verweisliste a{font-weight:700}
.verweisliste p{margin:var(--a1) 0 0;font-size:1rem;color:var(--text-2)}
@media (max-width:36rem){.verweisliste li{grid-template-columns:1fr;gap:0}}

/* ========== Beitrag, Ratgeber, Arbeitshilfen ========== */
.metazeile{display:flex;flex-wrap:wrap;gap:var(--a1) var(--a5);font-family:var(--schrift-mono);font-size:.875rem;color:var(--text-2);margin:var(--a4) 0 0;max-width:none}
.rand .portrait{width:150px;height:150px;border-radius:50%;object-fit:cover;border:1px solid var(--linie-hell);margin-top:var(--a4)}
.schluss{clear:both}
.schluss .verweisliste{margin-bottom:var(--a6)}
.schluss .person{margin-top:var(--a5)}
.stand-hinweis{font-size:.9375rem;color:var(--text-2);border-top:1px solid var(--linie-hell);padding-top:var(--a3);margin-top:var(--a5)}
.themen ul{list-style:none;padding:0;margin:var(--a5) 0 0;display:flex;flex-wrap:wrap;gap:var(--a2) var(--a5)}
.themen li{margin:0;max-width:none}
.themen a{font-size:1rem;text-decoration:none}
.themen a:hover{text-decoration:underline}
.themen a[aria-current="page"]{color:var(--tief);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.themen .mono{color:var(--text-2);font-size:.8125rem;margin-left:.15em}
.inhalt .ratgeber{margin-bottom:var(--a5)}
.ratgeber p{margin:var(--a1) 0 0;font-size:1rem;color:var(--text-2)}
.verweisliste .pdf{font-family:var(--schrift-mono);font-size:.875rem;font-weight:500;margin-left:var(--a3);white-space:nowrap}
.rechtstext > h3{font-size:1.1rem;margin:var(--a5) 0 var(--a2)}
/* Ausschnitte der Arbeitshilfen aus P5 (_werkzeuge/pdf/erzeugen.py) */
.inhalt > p.untertitel{font-size:1.25rem;line-height:1.55}
.inhalt h2 .nr,.inhalt h2 span.nr{font-family:var(--schrift-mono);font-weight:500;font-size:.75em;color:var(--tief);margin-right:var(--a2)}
.inhalt > section > h3{margin-top:var(--a6)}
.pruefliste{list-style:none;padding:0;margin:0 0 var(--a5)}
.pruefliste > li{position:relative;padding-left:2rem;margin:0 0 var(--a3)}
.pruefliste > li::before{content:"";position:absolute;left:0;top:.3em;width:1.05rem;height:1.05rem;border:1.5px solid var(--linie);border-radius:2px}
.inhalt ul.liste{padding-left:1.25rem}
.begriffe{display:grid;grid-template-columns:minmax(6rem,max-content) minmax(0,1fr);gap:var(--a2) var(--a5);max-width:var(--lese);border-top:1px solid var(--linie-hell);padding-top:var(--a3)}
.begriffe dt{font-family:var(--schrift-mono);font-weight:500;color:var(--tief)}
.begriffe dd{margin:0}
.einschaetzung{background:var(--papier-2);border-left:2px solid var(--tief);padding:var(--a3) var(--a4);font-size:1rem}
td.nr{font-family:var(--schrift-mono);color:var(--tief);white-space:nowrap}
.norm{white-space:nowrap}
@media (max-width:36rem){.begriffe{grid-template-columns:minmax(0,1fr);gap:0}.begriffe dd{margin-bottom:var(--a3)}}

/* Pfadleiste in der Randspalte, Nachweise zur Person */
.pfad ol{list-style:none;margin:0;padding:0}
.pfad li{display:inline;margin:0;max-width:none}
.pfad li + li::before{content:"\203A";margin:0 .4em;color:var(--linie)}
.pfad [aria-current="page"]{color:var(--text)}
.sprungziele{margin-top:var(--a4)}
.nachweise-person{list-style:none;padding:0;margin:var(--a4) 0 0;font-size:.875rem;line-height:1.45}
.nachweise-person li{margin:0 0 var(--a2);max-width:none}
.rand .nachweise-person{font-family:var(--schrift-text)}
/* Schreibmaschinenschrift nicht trennen */
.ueberzeile,.rand,.rand li,.rand p,.metazeile,.schriftfeld dt,.verweisliste .art,.ratgeber time,.themen,.fuss h2,.fuss .zeile{hyphens:manual;-webkit-hyphens:manual}

/* ========== Startseite ========== */
.start-kopf{padding-block:var(--a8) var(--a7)}
.start-kopf .raster{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:var(--a8);align-items:start}
.start-kopf .raster > *{grid-column:auto}
.start-kopf h1{max-width:20ch}
.person{display:flex;gap:var(--a4);align-items:center;margin-top:var(--a6);padding-top:var(--a5);border-top:1px solid var(--linie-hell)}
.person img{width:96px;height:96px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:1px solid var(--linie-hell);flex-shrink:0;padding:0}
.person p{margin:0;font-size:1rem;line-height:1.5}
.person .telefon{font-size:1.0625rem}
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--a6);margin-top:var(--a5)}
.drei > div{border-top:2px solid var(--tief);padding-top:var(--a4);min-width:0}
.drei .nr{font-family:var(--schrift-mono);color:var(--tief);font-weight:500;display:block;margin-bottom:var(--a2)}
.drei h3{font-size:1.35rem}
.drei h3 a{color:var(--text);text-decoration:none}
.drei h3 a:hover{color:var(--tief);text-decoration:underline}
.drei p{font-size:1rem}
.drei .verweise{font-size:.9375rem;color:var(--text-2);border-top:1px solid var(--linie-hell);padding-top:var(--a3);margin-top:var(--a3)}
.drei .verweise span{display:block}
.drei .randnotiz{margin-top:var(--a3)}
.unterlagen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a7) var(--a6);margin-top:var(--a5)}
.unterlagen h3{font-size:1.2rem;margin-bottom:var(--a2)}
.unterlagen h3 .mono{color:var(--tief);font-weight:500;margin-right:var(--a2);font-family:var(--schrift-mono);font-size:1rem}
.unterlagen p{font-size:1rem}
.zitat{font-family:var(--schrift-titel);font-weight:600;font-size:clamp(1.45rem,1.15rem + 1.1vw,2rem);line-height:1.35;margin:0 0 var(--a6);max-width:32ch;padding:0;border:0}
.zitat p{max-width:none;margin:0}
.zitat footer{font-family:var(--schrift-text);font-weight:400;font-size:1rem;color:var(--text-2);margin-top:var(--a3)}
.buecher{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--a6);margin-bottom:var(--a7)}
.buch{border-top:1px solid var(--linie-hell);padding-top:var(--a3)}
.buch h3{font-size:1.2rem;margin-bottom:var(--a2)}
.buch p{font-size:1rem}
.ratgeber{list-style:none;padding:0;margin:0 0 var(--a4)}
.ratgeber li{border-top:1px solid var(--linie-hell);padding:var(--a3) 0;margin:0;max-width:none;display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--a4)}
.ratgeber time,.ratgeber .art{font-family:var(--schrift-mono);font-size:.8125rem;color:var(--text-2)}
.ratgeber a{font-weight:700}
.ratgeber .art{display:block;margin-top:var(--a1)}

/* ========== Kontakt und Formular ========== */
.kontakt .raster{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:var(--a8)}
.kontakt .raster > *{grid-column:auto}
.anschrift{font-style:normal;line-height:1.6;font-size:1rem;border-top:1px solid var(--linie-hell);padding-top:var(--a4)}
.anschrift strong{display:block}
.klaeren{padding-left:1.25rem;font-size:1rem}
.klaeren li{margin-bottom:var(--a1)}
.formular{display:grid;gap:var(--a4);max-width:36rem}
.formular .feld{display:grid;gap:var(--a1)}
.formular label,.formular legend{font-weight:700;font-size:1rem}
.formular .hinweis{font-size:.875rem;color:var(--text-2);font-weight:400}
.formular input,.formular select,.formular textarea{font:inherit;font-size:1rem;color:var(--text);background:#fff;border:1.5px solid var(--linie);border-radius:var(--rad);padding:.65rem .75rem;width:100%;min-height:2.9rem}
.formular textarea{min-height:7rem;resize:vertical}
.formular input:focus-visible,.formular select:focus-visible,.formular textarea:focus-visible{outline:3px solid var(--tief);outline-offset:1px;border-color:var(--tief)}
.formular [aria-invalid="true"]{border-color:#9B1C1C;border-width:2px}
.formular .fehler{color:#9B1C1C;font-size:.9375rem;font-weight:700}
.formular fieldset{border:0;padding:0;margin:0}

/* ========== Fuß ========== */
.fuss{background:var(--tief);color:#fff;margin-top:var(--a9);padding-block:var(--a7) var(--a6);font-size:1rem}
.fuss a{color:#fff}
.fuss a:hover{color:#fff;text-decoration-thickness:2px}
.fuss :focus-visible{outline-color:var(--papier)}
.fuss .raster{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));column-gap:var(--a6);row-gap:var(--a6)}
.fuss .raster > *{grid-column:auto}
.fuss h2{font-family:var(--schrift-mono);font-weight:400;font-size:.875rem;color:var(--hell-auf-tief);margin-bottom:var(--a3)}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:var(--a2)}
.fuss address{font-style:normal;line-height:1.6}
.fuss .telefon{color:#fff;font-size:1.0625rem}
.fuss .zeile{display:flex;flex-wrap:wrap;gap:var(--a2) var(--a5);justify-content:space-between;border-top:1px solid rgba(255,255,255,.3);margin-top:var(--a7);padding-top:var(--a4);font-family:var(--schrift-mono);font-size:.8125rem;color:var(--hell-auf-tief)}
.fuss .zeile a{color:var(--hell-auf-tief)}
main{display:block}
.start main + .fuss,.kein-abstand + .fuss{margin-top:0}

/* Lange Wörter in Überschriften: nur in sehr schmalen Ansichten trennen (320 px, 400 % Zoom) */
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:22.5rem){h1,h2,h3{hyphens:auto;-webkit-hyphens:auto}}
/* Cookie-Hinweis (Complianz) an die Markenfarben angleichen */
.cmplz-cookiebanner{font-family:var(--schrift-text)!important;border-radius:var(--rad)!important;box-shadow:0 4px 14px rgba(12,60,120,.12)!important}
.cmplz-cookiebanner .cmplz-btn{border-radius:var(--rad)!important;font-weight:700!important}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept,.cmplz-cookiebanner .cmplz-btn.cmplz-accept-informational{background:var(--tief)!important;border-color:var(--tief)!important;color:#fff!important}

/* ========== Schmale Schirme ========== */
@media (max-width:60rem){
  .raster{grid-template-columns:minmax(0,1fr)}
  .raster > .rand,.raster > .haupt{grid-column:1}
  .raster > .rand{margin-bottom:var(--a4)}
  .rand .nr{display:inline;margin-right:var(--a2)}
  .inhalt > h2::before,.inhalt > section > h2::before,.schluss > h2::before{left:0}
  .abschnitt{padding-block:var(--a7)}
  .seitenkopf{padding-block:var(--a7) var(--a6)}
  .start-kopf .raster,.kontakt .raster{grid-template-columns:minmax(0,1fr);row-gap:var(--a6)}
  .drei{grid-template-columns:minmax(0,1fr);gap:var(--a6)}
  .unterlagen,.buecher{grid-template-columns:minmax(0,1fr)}
  .fuss .raster{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:36rem){
  body{font-size:1.0625rem}
  .einleitung{font-size:1.125rem}
  .fuss .raster{grid-template-columns:minmax(0,1fr)}
  .ratgeber li{grid-template-columns:1fr;gap:0}
  .positionen > li{grid-template-columns:2.5rem minmax(0,1fr)}
}

/* ========== Bewegung ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ========== Druck (A4, über den Druckdialog des Browsers) ========== */
/* Cookie-Hinweis (Complianz) mit eigenen Stilen; Plugin-CSS ist abgemeldet (functions.php) */
.cmplz-cookiebanner,#cmplz-manage-consent,.cmplz-cookiebanner > :not(.cmplz-header):not(.cmplz-body):not(.cmplz-buttons),.cmplz-cookiebanner .cmplz-header > :not(.cmplz-close),.cmplz-cookiebanner .cmplz-body > :not(.cmplz-message),.cmplz-cookiebanner .cmplz-buttons > :not(.cmplz-accept){display:none}
.cmplz-cookiebanner.cmplz-show:not(.cmplz-dismissed){display:block;position:fixed;z-index:9999;right:var(--a4);bottom:var(--a4);width:min(30rem,calc(100% - 2rem));max-height:calc(100vh - 2rem);overflow-y:auto;box-sizing:border-box;padding:var(--a4) 3.25rem var(--a4) var(--a4);background:var(--papier);color:var(--text);border:1px solid var(--linie);border-radius:var(--rad);box-shadow:0 6px 16px rgba(12,60,120,.10);font-size:.9375rem;line-height:1.5}
.cmplz-cookiebanner .cmplz-close{display:flex;align-items:center;justify-content:center;position:absolute;top:var(--a1);right:var(--a1);width:2.75rem;height:2.75rem;color:var(--text-2);cursor:pointer}
.cmplz-cookiebanner .cmplz-close svg{width:1rem;height:1rem;fill:currentColor}
.cmplz-cookiebanner .cmplz-buttons{margin-top:var(--a3)}
.cmplz-cookiebanner .cmplz-accept{font:inherit;font-weight:600;color:#fff;background:var(--tief);border:1px solid var(--tief);border-radius:var(--rad);padding:var(--a2) var(--a4);min-height:2.75rem;cursor:pointer}
.cmplz-cookiebanner .cmplz-accept:hover{background:var(--tief-2);border-color:var(--tief-2)}
@media print{
  @page{size:A4;margin:18mm 18mm 20mm}
  :root{--rand:32mm;--spalt:6mm}
  body{background:#fff;color:#000;font-size:10.5pt;line-height:1.45}
  .kopf .navi,.menue-knopf,.sprung,.knoepfe,.formular,.anfrage,[class^="tws-anfrage"],[class*=" tws-anfrage"],.kein-druck,.themen,.cmplz-cookiebanner,.cmplz-manage-consent{display:none!important}
  .kopf{border-bottom:1pt solid #000}
  .kopf .breite{min-height:0;padding-block:0 3mm}
  .breite{max-width:none;padding:0}
  .abschnitt,.seitenkopf,.start-kopf{padding-block:6mm}
  h1{font-size:22pt}h2{font-size:15pt;break-after:avoid}h3{font-size:12pt;break-after:avoid}
  .inhalt > h2,.inhalt > section > h2{margin-top:8mm}
  .pruefliste > li::before{border-color:#000}
  .einschaetzung{background:none;border-left-color:#000}
  .schriftfeld,.positionen > li,figure,tr,details{break-inside:avoid}
  .schriftfeld{background:#000;border-color:#000}
  .schriftfeld > div{background:#fff}
  details > *{display:block}
  summary::after{content:none}
  .inhalt a[href^="http"]::after,.inhalt a[href^="/"]::after{content:" (" attr(href) ")";font-size:8.5pt;color:#333;word-break:break-all}
  a{color:#000}
  .fuss{background:#fff;color:#000;margin-top:8mm;padding:4mm 0 0;border-top:1pt solid #000}
  .fuss a,.fuss .telefon,.fuss h2,.fuss .zeile,.fuss .zeile a{color:#000}
  .fuss .raster{display:block}
  .fuss nav,.fuss .fuss-verweise{display:none}
}
