/* KI-Signale · Wissensangebot der Haravyn LLC neben Signalakquise und AI Agency.
   Schrift, Maße, Karten und Flächen folgen den beiden Schwesterseiten (Stand 14.11.2026).
   Die Seite hat keinen eigenen Markenakzent. Sie trägt die Farben der beiden Häuser als Bedeutung:
   Cyan = KI-Sichtbarkeit (AI Agency), Grün = Signale (Signalakquise). Alles Eigene ist Tinte.
   Schriften: fonts/fonts.css wird im Seitenkopf direkt geladen. */
:root{
  --font:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --papier:#F7F7F5;--papier2:#FAFAF7;--ton:#EFF1EE;--weiss:#FFFFFF;
  --ink:#14171A;--tief:#1B2A33;--body:#53616A;--dim:#68757E;
  --rule:#E0E3E1;--kante:#D3D8D6;
  --ki:#21708C;--ki-knopf:#1F5A70;--ki-ton:#E3EEF2;
  --sig:#0A7A4C;--sig-knopf:#086540;--sig-ton:#E2F0E9;
  --n-bg:#080C13;--n-hoch:#0E141D;--n-line:#1E2836;--n-text:#E8EDF3;--n-body:#A3B0BF;--n-dim:#74838F;--n-ki:#46B6D8;--n-sig:#00C97B;
  --kurve:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--papier);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.62;color:var(--body);background:var(--papier)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-underline-offset:4px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wrap{max-width:1296px;margin:0 auto;padding:0 48px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--ink);color:#fff;padding:8px 12px;z-index:9}
h1,h2,h3{font-weight:400;color:var(--tief);margin:0;text-wrap:balance}
h1{font-size:clamp(36px,4.4vw,60px);line-height:1.08;letter-spacing:-.045em;color:var(--ink)}
h2{font-size:clamp(26px,2.6vw,34px);line-height:1.2;letter-spacing:-.03em}
h3{font-size:19px;font-weight:500;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
p{margin:0 0 14px}
.eyebrow{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin:0 0 22px}
.lead{font-size:19px;line-height:1.6;max-width:40em;margin:24px 0 0;color:var(--tief)}
.mono{font-family:var(--mono)}
.punkt{display:inline-block;width:7px;height:7px;background:var(--ink);margin-right:10px;vertical-align:1px}
.punkt.ki{background:var(--ki)}
.punkt.sig{background:var(--sig)}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:500;font-size:17px;line-height:1.5;padding:15px 22px;border-radius:6px;border:0;cursor:pointer;font-family:var(--font);transition:background .3s var(--kurve)}
.btn:hover{background:#2A3138}
.btn.ki{background:var(--ki-knopf);color:#fff}
.btn.ki:hover{background:#17485A}
.btn.sig{background:var(--sig);color:#fff}
.btn.sig:hover{background:var(--sig-knopf)}
.btn.klein{font-size:13.5px;padding:9px 13px}
.btn.leise{background:var(--weiss);color:var(--ink);border:1px solid var(--kante)}
.btn.leise:hover{background:var(--ton)}
.mikro{font-size:13.5px;color:var(--body);margin:14px 0 0}

/* Familienleiste: ein Träger, zwei Häuser */
.familie{background:var(--n-bg);color:var(--n-dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.familie .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:34px}
.familie a{color:var(--n-body);text-decoration:none}
.familie a:hover{color:var(--n-text)}
.familie .haeuser{display:flex;gap:22px;align-items:center}
.familie .haeuser a::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px}
.familie .haeuser a.sig::before{background:var(--n-sig)}
.familie .haeuser a.ki::before{background:var(--n-ki)}
.familie .haeuser a::after{content:" ↗"}

/* Kopf */
header.kopf{border-bottom:1px solid var(--rule);background:var(--papier2)}
header.kopf .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px}
.marke{display:block;text-decoration:none;color:var(--ink)}
.marke .zeile{display:flex;align-items:flex-end;gap:12px;font-size:20px;line-height:1;letter-spacing:-.01em;font-weight:500}
.zeichen{display:grid;grid-template-columns:6px 6px;grid-template-rows:6px 6px 6px;gap:3px;height:24px}
.zeichen i{grid-row:1/4;background:var(--ink);display:block}
.zeichen b{display:block;width:6px;height:6px}
.zeichen b:nth-of-type(1){background:var(--ki);grid-column:2;grid-row:1}
.zeichen b:nth-of-type(2){background:var(--sig);grid-column:2;grid-row:3}
.marke small{display:block;font-size:11px;color:var(--body);margin-top:9px;letter-spacing:.01em;font-weight:400}
nav.haupt{display:flex;align-items:center;gap:26px;font-size:16px;font-weight:500}
nav.haupt a{text-decoration:none;color:var(--body)}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--ink)}
nav.haupt a[aria-current]{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}

/* Start: Held auf Nachtglas */
.held{background:var(--n-bg);color:var(--n-body);padding:96px 0 104px;position:relative;overflow:hidden;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px}
.held::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 80% at 8% -10%,rgba(70,182,216,.13),transparent 60%),radial-gradient(50% 70% at 100% 110%,rgba(0,201,123,.09),transparent 60%)}
.held .wrap{position:relative;display:grid;grid-template-columns:.86fr 1fr;gap:72px;align-items:center}
.held .eyebrow{color:var(--n-dim)}
.held h1{color:var(--n-text);max-width:12ch}
.held .lead{color:var(--n-body);max-width:30em}
.held .haken{list-style:none;margin:34px 0 0;padding:0;font-size:15px;color:var(--n-body)}
.held .haken li{padding:10px 0;border-top:1px solid var(--n-line);display:flex;gap:14px}
.held .haken li:last-child{border-bottom:1px solid var(--n-line)}
.held .haken li::before{content:"";flex:none;width:6px;height:6px;margin-top:10px;background:var(--n-dim)}
.inhalt-tafel{border:1px solid var(--n-line);border-radius:14px;background:var(--n-hoch);overflow:hidden}
.inhalt-tafel .kopfband{display:flex;justify-content:space-between;gap:16px;padding:14px 26px;border-bottom:1px solid var(--n-line);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--n-dim)}
.inhalt-tafel a{display:grid;grid-template-columns:44px 1fr 28px;gap:0 8px;padding:26px 26px 24px;text-decoration:none;color:var(--n-body);border-bottom:1px solid var(--n-line);transition:background .4s var(--kurve)}
.inhalt-tafel a:last-child{border-bottom:0}
.inhalt-tafel a:hover{background:#121A25}
.inhalt-tafel .nr{font-family:var(--mono);font-size:12px;color:var(--n-dim);padding-top:7px}
.inhalt-tafel .art{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.inhalt-tafel .art.ki{color:var(--n-ki)}
.inhalt-tafel .art.sig{color:var(--n-sig)}
.inhalt-tafel .art.beide{color:var(--n-text)}
.inhalt-tafel b{display:block;font-size:23px;font-weight:400;letter-spacing:-.025em;line-height:1.2;color:var(--n-text)}
.inhalt-tafel p{margin:8px 0 0;font-size:15px;max-width:34em}
.inhalt-tafel a::after{content:"→";color:var(--n-dim);font-size:20px;padding-top:26px;transition:transform .4s var(--kurve)}
.inhalt-tafel a:hover::after{transform:translateX(4px);color:var(--n-text)}

/* Abschnitte */
section.band{padding:104px 0;border-bottom:1px solid var(--rule)}
section.band.ton{background:var(--ton)}
section.band.hell{background:var(--papier2)}
section.band > .wrap > h2{font-size:clamp(30px,3.4vw,46px);line-height:1.12;letter-spacing:-.04em;max-width:18em}
section.band > .wrap > h2 span{color:var(--dim)}

/* Karten */
.karte{background:var(--weiss);border:1px solid var(--kante);border-radius:14px;overflow:hidden}
.kopfband{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 26px;border-bottom:1px solid var(--kante);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}

/* Start: zwei Themen, eine Entscheidung */
.zweiklang{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px}
.zweiklang .karte{padding:30px 30px 28px;display:flex;flex-direction:column}
.zweiklang .eyebrow{margin-bottom:16px}
.zweiklang h3{font-size:26px;font-weight:400;letter-spacing:-.03em;color:var(--tief)}
.zweiklang p{font-size:15.5px;margin:14px 0 0}
.zweiklang .fuss{margin-top:auto;padding-top:22px}
.zweiklang .fuss a{display:flex;justify-content:space-between;border-top:1px solid var(--kante);padding-top:18px;text-decoration:none;font-weight:500;font-size:15px}
.zweiklang .fuss a::after{content:"→"}
.zweiklang .karte.ki .eyebrow,.zweiklang .karte.ki .fuss a{color:var(--ki-knopf)}
.zweiklang .karte.sig .eyebrow,.zweiklang .karte.sig .fuss a{color:var(--sig)}

/* Wer hier schreibt */
.absender{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start;margin-top:52px}
.person{display:grid;grid-template-columns:132px 1fr;gap:26px;align-items:start}
.person img{width:132px;aspect-ratio:1/1;object-fit:cover;border-radius:14px}
.person h3{font-size:22px}
.person .rolle{font-size:14px;margin:4px 0 14px}
.person p{font-size:15.5px}
.haeuser a.karte{display:block;padding:22px 26px;margin-top:14px;text-decoration:none;color:var(--body);transition:border-color .3s var(--kurve)}
.haeuser a.karte:first-of-type{margin-top:0}
.haeuser a.karte .eyebrow{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
.haeuser a.karte b{display:block;font-size:22px;font-weight:500;color:var(--tief);letter-spacing:-.02em}
.haeuser a.karte p{margin:8px 0 0;font-size:15px}
.haeuser a.karte.sig .eyebrow{color:var(--sig)}
.haeuser a.karte.ki .eyebrow{color:var(--ki-knopf)}
.haeuser a.karte.sig:hover{border-color:var(--sig)}
.haeuser a.karte.ki:hover{border-color:var(--ki)}
.haeuser .fuss{font-size:14px;margin-top:18px}

/* Artikelkopf */
.seitenkopf{padding:80px 0 60px;border-bottom:1px solid var(--rule);background:var(--papier2)}
.seitenkopf .eyebrow{display:flex;align-items:center;gap:0;margin-bottom:26px}
.seitenkopf h1{max-width:17ch}
.seitenkopf .lead{max-width:38em}
.meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim);margin-top:26px;display:flex;gap:8px 22px;flex-wrap:wrap}
.offen{border:1px solid var(--kante);border-radius:14px;background:var(--weiss);padding:18px 22px;margin-top:30px;max-width:46em;font-size:14.5px;color:var(--tief)}
.offen .eyebrow{margin-bottom:6px;color:var(--ink)}
.offen p{margin:0}
.kopf-zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:end}
.kurz{border:1px solid var(--kante);border-radius:14px;background:var(--weiss);overflow:hidden}
.kurz ul{list-style:none;margin:0;padding:6px 26px 10px}
.kurz li{padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--tief);display:grid;grid-template-columns:30px 1fr}
.kurz li:last-child{border-bottom:0}
.kurz li::before{content:"0" counter(k);counter-increment:k;font-family:var(--mono);font-size:11px;color:var(--dim);padding-top:5px}
.kurz ul{counter-reset:k}

/* Artikelkörper */
.abschnitt{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:72px 0;border-bottom:1px solid var(--rule);line-height:1.65}
.abschnitt:last-child{border-bottom:0}
.abschnitt > .eyebrow{padding-top:10px;position:sticky;top:24px;align-self:start}
.abschnitt > div{min-width:0}
.abschnitt h2{margin:0 0 18px;max-width:22em}
.abschnitt h3{margin:28px 0 8px}
.abschnitt p,.abschnitt ul,.abschnitt ol{max-width:68ch}
.abschnitt ul,.abschnitt ol{margin:0 0 16px;padding-left:18px}
.abschnitt li{margin:0 0 8px}
.abschnitt li b,.abschnitt p b{color:var(--ink);font-weight:600}
.quelle{font-size:13px;color:var(--dim);max-width:68ch}
.fakten{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0 8px;max-width:860px}
.fakten .karte{padding:24px 26px}
.fakten b{display:block;font-size:40px;font-weight:400;color:var(--tief);letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.fakten span{display:block;font-size:15px;color:var(--tief);margin-top:10px}
.fakten small{display:block;font-size:12.5px;color:var(--dim);margin-top:12px;padding-top:12px;border-top:1px solid var(--rule);line-height:1.5}

/* Vergleichstafel */
.tafel{margin:26px 0 10px;overflow:hidden}
.tafel table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.tafel th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);border-bottom:1px solid var(--kante);padding:14px 16px;vertical-align:bottom;background:var(--papier2)}
.tafel td{border-bottom:1px solid var(--rule);padding:16px;vertical-align:top}
.tafel tr:last-child td{border-bottom:0}
.tafel td.weg{color:var(--ink);font-weight:500;font-size:15.5px;min-width:190px}
.tafel td.weg .nr{display:block;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim);margin-bottom:4px}
.tafel td.weg .anbieter{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-top:8px}
.tafel td.weg .anbieter.ki{color:var(--ki-knopf)}
.tafel td.weg .anbieter.sig{color:var(--sig)}
.tafel tr.ki td.weg{box-shadow:inset 3px 0 0 var(--ki)}
.tafel tr.sig td.weg{box-shadow:inset 3px 0 0 var(--sig)}
.tafel td b{color:var(--ink);font-weight:600}

/* Zeitleiste: wann erreicht welcher Weg den Inhaber */
.leiste{margin:26px 0 10px;padding:0}
.leiste .phasen,.leiste .reihe{display:grid;grid-template-columns:210px repeat(4,1fr);gap:0}
.leiste .phasen div{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);padding:14px 14px;border-bottom:1px solid var(--kante);border-left:1px solid var(--rule);background:var(--papier2);line-height:1.5}
.leiste .phasen div b{display:block;color:var(--ink);font-weight:500}
.leiste .phasen div:first-child{border-left:0}
.leiste .reihe{border-bottom:1px solid var(--rule);align-items:center;min-height:58px}
.leiste .reihe:last-child{border-bottom:0}
.leiste .reihe > span{padding:10px 16px;font-size:14.5px;color:var(--ink);font-weight:500}
.leiste .reihe i{display:block;height:14px;background:#C9CFCC;margin:0 6px;font-style:normal}
.leiste .reihe.ki i{background:var(--ki)}
.leiste .reihe.sig i{background:var(--sig)}
.leiste .reihe.blass i{background:repeating-linear-gradient(90deg,#C9CFCC 0 6px,transparent 6px 10px)}
.von-1{grid-column-start:2}.von-2{grid-column-start:3}.von-3{grid-column-start:4}.von-4{grid-column-start:5}
.bis-2{grid-column-end:4}.bis-3{grid-column-end:5}.bis-4{grid-column-end:6}

/* Die Wege einzeln */
.weg-karte{margin-top:22px;max-width:920px}
.weg-karte .kopfband span:last-child{color:var(--ink)}
.weg-karte.ki .kopfband span:last-child{color:var(--ki-knopf)}
.weg-karte.sig .kopfband span:last-child{color:var(--sig)}
.weg-karte.ki{border-top:3px solid var(--ki)}
.weg-karte.sig{border-top:3px solid var(--sig)}
.weg-karte .innen{padding:28px 26px 8px}
.weg-karte h3{font-size:24px;font-weight:400;letter-spacing:-.03em;color:var(--tief);margin:0 0 12px}
.weg-karte .innen > p{font-size:15.5px}
.weg-karte dl{display:grid;grid-template-columns:1fr 1fr 1fr;margin:22px 0 0;border-top:1px solid var(--kante)}
.weg-karte dl div{padding:20px 26px 22px;border-left:1px solid var(--kante)}
.weg-karte dl div:first-child{border-left:0}
.weg-karte dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:8px}
.weg-karte dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--tief)}
.weg-karte .beleg{border-top:1px solid var(--kante);padding:18px 26px 20px;font-size:14px;background:var(--papier2)}
.weg-karte .beleg b{color:var(--ink);font-weight:600}
.weg-karte .beleg a{font-weight:500}

/* Fragen */
.faq{border-top:1px solid var(--kante);margin-top:8px}
.faq > div{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;padding:26px 0;border-bottom:1px solid var(--kante)}
.faq h3{font-size:19px;line-height:1.35;margin:0}
.faq p{margin:0;font-size:15.5px;max-width:60ch}

/* Hausblock am Ende eines Stücks */
.haus{border-radius:14px;padding:34px 34px 32px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center;max-width:980px}
.haus.ki{background:var(--ki-ton);border:1px solid #C5DCE5}
.haus.sig{background:var(--sig-ton);border:1px solid #C3DFD1}
.haus .eyebrow{margin-bottom:12px}
.haus.ki .eyebrow{color:var(--ki-knopf)}
.haus.sig .eyebrow{color:var(--sig)}
.haus h3{font-size:28px;font-weight:400;letter-spacing:-.03em;color:var(--tief);margin:0}
.haus p{font-size:15.5px;color:var(--tief);margin:14px 0 0;max-width:36em}
.haus ul{list-style:none;margin:0 0 22px;padding:0;font-size:14.5px;color:var(--tief)}
.haus li{padding:10px 0;border-bottom:1px solid rgba(20,23,26,.12);margin:0}
.haus li:first-child{border-top:1px solid rgba(20,23,26,.12)}
.haus-paar{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px}
.haus-paar .haus{grid-template-columns:1fr;gap:22px;align-items:start;align-content:space-between}

/* Selbsttest */
.einstellen{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;padding:24px 26px;border-bottom:1px solid var(--kante);background:var(--papier2)}
.einstellen label{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:8px}
.einstellen input{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--weiss);border:1px solid var(--kante);border-radius:6px;padding:12px 14px}
.einstellen input:focus{border-color:var(--ki);outline:0;box-shadow:0 0 0 3px var(--ki-ton)}
.test{max-width:none;margin-top:26px;border-top:3px solid var(--ki)}
.abschnitt .fragen{list-style:none;margin:0;padding:0;max-width:none}
.fragen > li{display:grid;grid-template-columns:44px 1fr;gap:0 8px;padding:24px 26px;border-bottom:1px solid var(--rule);margin:0}
.fragen .nr{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:5px}
.fragen .art{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:6px}
.fragen .frage{font-size:19px;line-height:1.4;color:var(--ink);letter-spacing:-.01em;margin:0;max-width:none}
.fragen .frage mark{background:var(--ki-ton);color:var(--ki-knopf);padding:0 4px;border-radius:3px}
.fragen .zeile{display:flex;justify-content:space-between;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:16px}
.fragen .oeffnen{display:flex;gap:8px;flex-wrap:wrap}
.fragen .oeffnen a::after{content:" ↗";color:var(--dim)}
.urteil{display:flex;border:1px solid var(--kante);border-radius:6px;overflow:hidden}
.urteil label{position:relative;font-size:13.5px;padding:8px 12px;cursor:pointer;color:var(--body);border-left:1px solid var(--kante);background:var(--weiss);user-select:none}
.urteil label:first-child{border-left:0}
.urteil input{position:absolute;opacity:0;pointer-events:none}
.urteil label:has(input:checked){background:var(--ink);color:#fff}
.urteil label.u-ja:has(input:checked){background:var(--ki-knopf)}
.urteil label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:-2px}
.ergebnis{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;padding:26px;background:var(--n-bg);color:var(--n-body)}
.ergebnis .zahl{font-size:54px;font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--n-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.ergebnis .zahl small{font-size:18px;color:var(--n-dim);letter-spacing:0;margin-left:6px}
.ergebnis .eyebrow{color:var(--n-ki);margin-bottom:6px}
.ergebnis p{margin:0;font-size:15px;max-width:44em}
.ergebnis .btn{background:var(--n-hoch);border:1px solid var(--n-line);color:var(--n-text)}
.ergebnis .btn:hover{background:#121A25}
.bogen{width:100%;max-width:860px;border-collapse:collapse;font-size:14.5px;margin:14px 0 22px}
.bogen th{text-align:left;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);border-bottom:1px solid var(--kante);padding:8px 12px 8px 0}
.bogen td{border-bottom:1px solid var(--kante);padding:11px 12px 11px 0;vertical-align:top}
.bogen td b{color:var(--ink);font-weight:600}

/* Lexikon */
.begriffe{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;max-width:none}
.begriffe .karte{padding:24px 26px 22px}
.begriffe .eyebrow{margin-bottom:12px}
.begriffe h3{font-size:22px;font-weight:400;letter-spacing:-.025em;color:var(--tief);margin:0 0 10px}
.begriffe p{font-size:15px;margin:0}
.sucher{position:sticky;top:0;z-index:3;background:var(--papier);border-bottom:1px solid var(--kante);padding:16px 0 14px;margin-top:10px}
.sucher .oben{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.sucher input[type=search]{flex:1;min-width:220px;font:inherit;font-size:16px;color:var(--ink);background:var(--weiss);border:1px solid var(--kante);border-radius:6px;padding:11px 14px}
.sucher input[type=search]:focus{border-color:var(--sig);outline:0;box-shadow:0 0 0 3px var(--sig-ton)}
.sucher .zahl{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--body);white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.chips button{font:inherit;font-size:13px;color:var(--body);background:var(--weiss);border:1px solid var(--kante);border-radius:6px;padding:6px 11px;cursor:pointer;transition:background .3s var(--kurve)}
.chips button:hover{background:var(--ton)}
.chips button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips button.nf[aria-pressed=true]{background:var(--sig);border-color:var(--sig)}
.buchstabe{display:grid;grid-template-columns:72px 1fr;gap:0 24px;padding:34px 0 8px;border-bottom:1px solid var(--kante)}
.buchstabe > b{font-size:54px;font-weight:400;letter-spacing:-.04em;line-height:1;color:var(--tief);position:sticky;top:132px;align-self:start}
.eintrag{display:grid;grid-template-columns:1.15fr .85fr;gap:8px 36px;padding:22px 0;border-top:1px solid var(--rule)}
.buchstabe > div > .eintrag:first-child{border-top:0;padding-top:4px}
.eintrag h3{font-size:21px;font-weight:500;letter-spacing:-.02em;margin:0}
.eintrag h3 a{text-decoration:none}
.eintrag h3 a:hover{text-decoration:underline}
.eintrag .nr{font-family:var(--mono);font-size:11px;color:var(--dim);margin-right:10px;font-weight:400;letter-spacing:.04em}
.eintrag .anlass{font-size:15.5px;margin:8px 0 0;max-width:44ch}
.eintrag .nf{font-size:14.5px;margin:12px 0 0;padding:10px 14px;background:var(--sig-ton);color:var(--tief);border-left:2px solid var(--sig);max-width:46ch}
.eintrag .nf b{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--sig);margin-bottom:4px}
.eintrag dl{margin:0;font-size:14px;display:grid;grid-template-columns:76px 1fr;gap:6px 12px;align-content:start}
.eintrag dt{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);padding-top:4px}
.eintrag dd{margin:0;color:var(--tief)}
.eintrag dd.frist{font-family:var(--mono);font-size:13px;color:var(--ink)}
.eintrag:target{background:var(--sig-ton);box-shadow:-14px 0 0 var(--sig-ton),14px 0 0 var(--sig-ton)}
.leer{padding:40px 0;font-size:17px;color:var(--tief)}
[hidden]{display:none !important}

/* Fuß auf Nachtglas */
.nacht{background:var(--n-bg);color:var(--n-body)}
footer.fuss{border-top:1px solid var(--n-line);padding:52px 0 34px;font-size:13.5px;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:24px 24px}
footer.fuss .spalten{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1.1fr 1fr;gap:36px}
footer.fuss .marke{color:var(--n-text)}
footer.fuss .marke .zeile{font-size:16px;gap:10px}
footer.fuss .zeichen i{background:var(--n-text)}
footer.fuss .zeichen b:nth-of-type(1){background:var(--n-ki)}
footer.fuss .zeichen b:nth-of-type(2){background:var(--n-sig)}
footer.fuss .marke small{color:var(--n-dim);margin-top:8px}
footer.fuss p{margin:16px 0 0;max-width:24em;line-height:1.6}
footer.fuss a{color:var(--n-body);text-decoration:underline;text-decoration-color:#3A4656;text-underline-offset:6px}
footer.fuss a:hover{color:var(--n-text)}
footer.fuss a.marke{text-decoration:none}
footer.fuss .tel{font-family:var(--mono);letter-spacing:.04em}
footer.fuss h4{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--n-dim);margin:6px 0 18px}
footer.fuss h4.sig::before,footer.fuss h4.ki::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;vertical-align:1px}
footer.fuss h4.sig::before{background:var(--n-sig)}
footer.fuss h4.ki::before{background:var(--n-ki)}
footer.fuss ul{list-style:none;margin:0;padding:0}
footer.fuss li{margin:0 0 14px}
footer.fuss .unten{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--n-line);margin-top:34px;padding-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--n-dim)}
footer.fuss .unten b{color:var(--n-text);font-weight:500}

/* Rechtliches und 404 */
.adresse{font-style:normal;border-left:2px solid var(--ink);padding:4px 0 4px 16px;margin:6px 0 18px;color:var(--ink)}
.fehler{padding:120px 0 140px}
.fehler .btn{margin:14px 0 22px}
.schmal .seitenkopf{background:transparent}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}

@media (max-width:1180px){
  .held .wrap,.absender,.kopf-zwei{grid-template-columns:1fr;gap:48px}
  .held h1{max-width:16ch}
  footer.fuss .spalten{grid-template-columns:1fr 1fr 1fr}
  .weg-karte dl{grid-template-columns:1fr}
  .weg-karte dl div{border-left:0;border-top:1px solid var(--kante)}
  .weg-karte dl div:first-child{border-top:0}
}
@media (max-width:900px){
  .abschnitt{grid-template-columns:1fr;gap:8px;padding:52px 0}
  .abschnitt > .eyebrow{position:static}
  .zweiklang,.begriffe,.haus,.haus-paar,.fakten{grid-template-columns:1fr}
  .haus{gap:26px}
  .faq > div{grid-template-columns:1fr;gap:10px}
  .tafel table,.tafel tbody,.tafel tr,.tafel td{display:block}
  .tafel thead{display:none}
  .tafel tr{border-bottom:1px solid var(--kante);padding:8px 0 12px}
  .tafel tr:last-child{border-bottom:0}
  .tafel td{border:0;padding:6px 18px}
  .tafel td.weg{padding-top:14px}
  .tafel td[data-l]::before{content:attr(data-l);display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:2px}
  .leiste .phasen,.leiste .reihe{grid-template-columns:120px repeat(4,1fr)}
  .leiste .phasen div{padding:10px 6px;font-size:9px;letter-spacing:.04em}
  .leiste .phasen div b{font-size:9.5px}
  .leiste .reihe > span{padding:10px 10px;font-size:13px}
  .ergebnis{grid-template-columns:1fr;gap:16px}
  .einstellen{grid-template-columns:1fr}
  .eintrag{grid-template-columns:1fr}
  .buchstabe{grid-template-columns:44px 1fr;gap:0 12px}
  .buchstabe > b{font-size:36px;top:150px}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .familie .traeger{display:none}
  .familie .haeuser{gap:16px;justify-content:space-between;width:100%}
  header.kopf .wrap{min-height:68px;flex-wrap:wrap;padding-top:14px;padding-bottom:12px;gap:10px 24px}
  .marke .zeile{font-size:18px}
  .marke small{display:none}
  nav.haupt{gap:18px;font-size:14.5px;width:100%;overflow-x:auto;white-space:nowrap}
  .held{padding:60px 0 64px}
  .inhalt-tafel a{grid-template-columns:30px 1fr 20px;padding:20px 16px}
  .inhalt-tafel b{font-size:20px}
  .inhalt-tafel .kopfband{padding:12px 16px}
  section.band{padding:64px 0}
  .seitenkopf{padding:48px 0 40px}
  .person{grid-template-columns:1fr}
  .person img{width:112px}
  .zweiklang .karte{padding:24px 20px}
  .haus{padding:24px 20px}
  .fragen > li{grid-template-columns:1fr;padding:20px 16px}
  .fragen .nr{padding:0 0 6px}
  .fragen .frage{font-size:17px}
  .einstellen{padding:18px 16px}
  .ergebnis{padding:20px 16px}
  .weg-karte .innen{padding:22px 18px 4px}
  .weg-karte dl div{padding:16px 18px}
  .weg-karte .beleg{padding:16px 18px}
  .kopfband{padding:12px 18px}
  .kurz ul{padding:4px 18px 8px}
  footer.fuss .spalten{grid-template-columns:1fr 1fr;gap:30px 20px}
  footer.fuss .spalten > div:first-child{grid-column:1/-1}
  .sucher{position:static}
  .leiste .phasen,.leiste .reihe{grid-template-columns:104px repeat(4,minmax(0,1fr))}
  .leiste .phasen div{font-size:0;padding:10px 4px;letter-spacing:0}
  .leiste .phasen div b{font-size:9px;letter-spacing:.02em;overflow-wrap:anywhere}
  .leiste .reihe > span{padding:10px 8px 10px 12px;font-size:12.5px;line-height:1.3}
  .leiste .reihe i{margin:0 3px}
  .bogen,.bogen tbody,.bogen tr,.bogen td{display:block}
  .bogen tr:first-child{display:none}
  .bogen tr{border-bottom:1px solid var(--kante);padding:12px 0}
  .bogen td{border:0;padding:2px 0}
  .buchstabe > b{position:static}
}

@media print{
  .familie,header.kopf,footer.fuss,.oeffnen,.einstellen,.ergebnis .btn,.nicht-drucken,.haus,.haus-paar,.skip{display:none !important}
  html,body{background:#fff}
  .wrap{padding:0;max-width:none}
  .seitenkopf{padding:0 0 16px;background:#fff}
  .abschnitt{display:block;padding:18px 0;border:0}
  .abschnitt > .eyebrow{position:static;margin-bottom:6px}
  .fragen > li{break-inside:avoid;padding:12px 0}
  .ergebnis{background:#fff;color:#000;border:1px solid #999;display:block}
  .ergebnis .zahl,.ergebnis .eyebrow{color:#000}
  .urteil label:has(input:checked){background:#000;color:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  h1{font-size:28px}
}