/* geo-seo-ki.de: Gestaltung „Die Quellenzeile“. Schriften lokal (OFL). */
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/assets/fonts/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/dm-mono-normal-400-latin.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/dm-mono-normal-500-latin.woff2) format("woff2")}
:root{--papier:#F6F4EE;--tinte:#172033;--nacht:#0F2A4A;--grau:#4A5568;--gruen:#136B4E;--gruen-hell:#7FD1B0;--gold:#B8862B;--linie:#D8D3C6;--karte:#FFFFFF;--gelb:#FFE55C;
--schrift:"Barlow",system-ui,Arial,sans-serif;--kopf:"Barlow Condensed","Arial Narrow",Arial,sans-serif;--mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--schrift);font-size:1.125rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gruen);text-underline-offset:.15em}
a:hover{color:var(--nacht)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-200vw;top:.5rem;background:var(--nacht);color:#fff;padding:.5rem 1rem;z-index:50}
.sprung:focus{left:.5rem}
.huelle{max-width:72rem;margin:0 auto;padding:0 1rem}
@media (min-width:48rem){.huelle{padding:0 2rem}}
h1,h2,h3{font-family:var(--kopf);line-height:1.08;letter-spacing:-.005em;margin:0 0 .6rem;color:var(--nacht);text-wrap:balance}
h1{font-size:clamp(2.2rem,5.5vw,4.2rem);font-weight:700;max-width:22ch}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700}
h3{font-size:1.35rem;font-weight:600;color:var(--tinte)}
p,li{max-width:70ch}
.gross{font-size:1.3rem;line-height:1.5}
.leise{color:var(--grau);font-size:1rem}
.klein{color:var(--grau);font-size:.95rem}
.nr{font-family:var(--mono);font-weight:500;color:var(--gruen);font-size:.9em;letter-spacing:.02em;white-space:nowrap}
.offen{background:var(--gelb);color:var(--tinte);padding:.05em .4em;border-radius:3px;font-weight:500;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Entwurfsleiste, Kopf, Menü */
.entwurf{background:var(--gelb);color:var(--tinte);font-size:.95rem;padding:.4rem 0;text-align:center;font-weight:500}
.kopf{background:var(--nacht);color:var(--papier);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(255,255,255,.12)}
.kopf .huelle{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem;flex-wrap:wrap}
.marke{color:var(--papier);text-decoration:none;font-family:var(--kopf);font-weight:700;font-size:1.5rem;display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.marke .nr{color:var(--gruen-hell);font-size:1rem}
.marke small{font-family:var(--schrift);font-weight:400;font-size:.85rem;color:rgba(246,244,238,.75);display:block;width:100%}
.menue{display:none;width:100%;flex-direction:column;gap:.25rem;padding:.5rem 0 1rem}
.menue.offen-menue{display:flex}
.menue a{color:var(--papier);text-decoration:none;padding:.65rem .25rem;font-weight:500;border-bottom:1px solid rgba(255,255,255,.1)}
.menue a[aria-current=page]{color:var(--gruen-hell)}
.menue a.knopf{margin-top:.5rem;border:0;text-align:center}
.menue-schalter{background:transparent;color:var(--papier);border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:.5rem .9rem;font:inherit;font-weight:500;cursor:pointer;min-height:44px}
@media (min-width:62rem){.menue-schalter{display:none}.menue{display:flex;flex-direction:row;width:auto;align-items:center;gap:1.4rem;padding:0}.menue a{border:0;padding:.25rem 0}.menue a.knopf{margin:0;padding:.6rem 1.1rem}.marke small{display:inline;width:auto;margin-left:.5rem}}
/* Knöpfe */
.knopf{display:inline-block;background:var(--gruen);color:#fff;text-decoration:none;font-weight:600;padding:.85rem 1.4rem;border-radius:4px;min-height:44px;line-height:1.3;border:2px solid var(--gruen)}
.knopf:hover{background:var(--nacht);border-color:var(--nacht);color:#fff}
.knopf.hell{background:transparent;color:var(--nacht);border-color:var(--nacht)}
.knopf.hell:hover{background:var(--nacht);color:#fff}
.dunkel .knopf.hell{color:var(--papier);border-color:rgba(246,244,238,.6)}
.dunkel .knopf.hell:hover{background:var(--papier);color:var(--nacht)}
.aufruf{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin:1.75rem 0 0;max-width:none}
/* Abschnitte */
.abschnitt{padding:3.5rem 0}
@media (min-width:48rem){.abschnitt{padding:5rem 0}}
.abschnitt.erster{padding-top:2rem}
.abschnitt.blatt{background:var(--karte);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.abschnitt.dunkel{background:var(--nacht);color:var(--papier)}
.dunkel h1,.dunkel h2,.dunkel h3{color:var(--papier)}
.dunkel a{color:var(--gruen-hell)}
/* Derselbe Fall wie bei ki-agenten-system.de: Der Link-Stil fuer dunkle Abschnitte
   ist spezifischer als .knopf und faerbte die Knopfschrift hellgruen auf gruenem
   Grund, Kontrast 3.59 statt mindestens 4.5. Gemessen mit Lighthouse am 14.11.2026. */
.dunkel a.knopf{color:#fff}
.dunkel .leise,.dunkel .klein{color:rgba(246,244,238,.78)}
.dunkel .nr{color:var(--gruen-hell)}
.zwei{display:grid;gap:2rem}
@media (min-width:56rem){.zwei{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.zwei.schmal-breit{grid-template-columns:2fr 3fr}}
.drei{display:grid;gap:1.5rem}
@media (min-width:48rem){.drei{grid-template-columns:repeat(3,1fr)}}
.vier{display:grid;gap:1.25rem}
@media (min-width:40rem){.vier{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.vier{grid-template-columns:repeat(4,1fr)}}
.pfad{font-size:.95rem;color:var(--grau);margin:0 0 1.25rem}
.pfad a{color:var(--grau)}
.kennung{font-family:var(--mono);color:var(--gruen);font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .75rem}
.dunkel .kennung{color:var(--gruen-hell)}
.buehne{display:grid;gap:2.5rem}
@media (min-width:62rem){.buehne{grid-template-columns:1.1fr 1fr;align-items:center;gap:4rem}}
/* Antwortkarte: das Erkennungszeichen */
.antwort{margin:0;color:var(--tinte);background:var(--karte);border:1px solid var(--linie);border-radius:8px;padding:1.5rem;box-shadow:0 20px 50px -30px rgba(15,42,74,.45);position:relative}
.antwort::before{content:"";position:absolute;left:0;top:1.5rem;bottom:1.5rem;width:4px;background:var(--gold);border-radius:0 3px 3px 0}
.antwort .frage,.antwort .atext{margin:0 0 1rem;display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;align-items:baseline;max-width:none}
.antwort .frage{font-weight:600;color:var(--nacht);font-size:1.1rem}
.antwort .atext{color:var(--tinte)}
.antwort .nr{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;padding-top:.25em}
.quellen{list-style:none;margin:0;padding:1rem 0 0;border-top:1px dashed var(--linie);display:grid;gap:.5rem}
.quellen li{display:grid;grid-template-columns:auto 1fr auto;gap:.2rem .75rem;align-items:baseline;padding:.45rem .6rem;border-radius:4px;font-size:.98rem;max-width:none;transition:opacity .5s ease,transform .5s ease}
.quellen li .qname{font-weight:500}
.quellen li .qdom{font-family:var(--mono);font-size:.8rem;color:var(--grau)}
.quellen li.wir{background:rgba(19,107,78,.1);outline:2px solid var(--gruen)}
.quellen li.wir .qname::after{content:" ← Ihre Website";color:var(--gruen);font-weight:600}
.quellen li.fehlt{opacity:.55;border:1px dashed var(--grau)}
.quellen li.fehlt .qname::after{content:" ← fehlt";color:var(--grau);font-weight:600}
.quellen li.fehlt.sichtbar{opacity:.55}
.bewegt .quellen li{opacity:0;transform:translateY(10px)}
.bewegt .quellen li.sichtbar{opacity:1;transform:none}
.bewegt .quellen li:nth-child(2){transition-delay:.25s}.bewegt .quellen li:nth-child(3){transition-delay:.5s}.bewegt .quellen li:nth-child(4){transition-delay:.75s}.bewegt .quellen li:nth-child(5){transition-delay:1s}
.ahinweis{margin:1rem 0 0;font-size:.9rem;color:var(--grau);max-width:none}
.antwort.klein{padding:1.1rem 1.25rem;font-size:.95rem}
.antwort.klein .frage{font-size:1rem}
.dunkel .antwort{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
@media (max-width:30rem){.quellen li{grid-template-columns:auto 1fr}.quellen li .qdom{grid-column:2}}
/* Stufenleiste */
.stufen ol{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (min-width:48rem){.stufen ol{grid-template-columns:repeat(4,1fr)}}
.stufen a{display:grid;gap:.15rem;text-decoration:none;color:var(--tinte);background:var(--karte);border:1px solid var(--linie);border-radius:6px;padding:1rem 1.1rem;height:100%;min-height:44px}
.stufen a:hover{border-color:var(--gruen)}
.stufen a[aria-current=page]{border-color:var(--gruen);background:rgba(19,107,78,.08)}
.stufen strong{font-family:var(--kopf);font-size:1.3rem;color:var(--nacht)}
.stufen span:not(.nr){font-size:.95rem;color:var(--grau)}
.vorzurueck{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:2rem 0 0;max-width:none;font-weight:500}
/* Nummernlisten, Karten, Tabellen */
.nummern{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1.1rem}
.nummern li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;max-width:none}
.nummern li div{max-width:70ch}
.nummern li strong{color:var(--nacht)}
.nummern.spalten{gap:1.25rem}
@media (min-width:56rem){.nummern.spalten{grid-template-columns:1fr 1fr;column-gap:3rem}}
.karten{display:grid;gap:1.25rem;margin-top:1.5rem}
@media (min-width:48rem){.karten{grid-template-columns:1fr 1fr}}
@media (min-width:64rem){.karten.vier{grid-template-columns:repeat(4,1fr)}}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:6px;padding:1.4rem}
.karte h3{margin-top:.3rem}
.karte .nr{display:block}
.karte p:last-child{margin-bottom:0}
.dunkel .karte{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.dunkel .nummern li strong{color:var(--papier)}
.dunkel .tabelle tbody th{color:var(--papier)}
.dunkel .tabelle thead th{color:rgba(246,244,238,.72)}
.dunkel .tabelle th,.dunkel .tabelle td{border-color:rgba(255,255,255,.2)}
.dunkel .tabelle caption{color:rgba(246,244,238,.72)}
.dunkel .tabelle.stapel td::before{color:rgba(246,244,238,.72)}
.rollen{overflow-x:auto;margin-top:1.5rem}
.tabelle{width:100%;border-collapse:collapse;font-size:1rem;min-width:36rem}
.tabelle caption{text-align:left;color:var(--grau);font-size:.95rem;padding:0 0 .6rem}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:.7rem .75rem;border-bottom:1px solid var(--linie)}
.tabelle thead th{font-family:var(--mono);font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grau)}
.tabelle tbody th{font-weight:600;color:var(--nacht)}
.tabelle.stapel{min-width:0}
@media (max-width:40rem){.tabelle.stapel thead{display:none}.tabelle.stapel tr{display:block;padding:.5rem 0}.tabelle.stapel th,.tabelle.stapel td{display:block;border:0;padding:.25rem 0}.tabelle.stapel td::before{content:attr(data-spalte) ": ";font-family:var(--mono);font-size:.75rem;color:var(--grau);text-transform:uppercase}.tabelle.stapel tr{border-bottom:1px solid var(--linie)}}
.zahlen{display:grid;gap:1.25rem;margin-top:1.5rem}
@media (min-width:48rem){.zahlen{grid-template-columns:repeat(3,1fr)}}
.zahl{border-top:3px solid var(--gold);padding-top:.75rem}
.zahl b{font-family:var(--kopf);font-size:2.6rem;line-height:1;color:var(--nacht);display:block}
.dunkel .zahl b{color:var(--papier)}
.zahl span{display:block;margin-top:.4rem;max-width:30ch}
.zahl small{display:block;color:var(--grau);font-size:.85rem;margin-top:.35rem}
/* Fragen */
.fragen{margin-top:1.5rem;display:grid;gap:.6rem}
.fragen details{background:var(--karte);border:1px solid var(--linie);border-radius:6px}
.fragen summary{cursor:pointer;padding:1rem 1.2rem;font-weight:600;color:var(--nacht);list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;min-height:44px}
.fragen summary .ft{font-family:var(--schrift);font-size:1.0625rem;font-weight:600;line-height:1.35;color:inherit;margin:0;max-width:62ch}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";font-family:var(--mono);color:var(--gruen);font-size:1.3rem;line-height:1}
.fragen details[open] summary::after{content:"−"}
.fragen .antwort-text{padding:0 1.2rem 1.1rem}
.fragen .antwort-text p{margin:0}
.dunkel .fragen details{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.dunkel .fragen summary{color:var(--papier)}
/* Skala */
.skala{margin:1.5rem 0 0;max-width:40rem}
.skala .band{position:relative;height:14px;border-radius:7px;background:linear-gradient(90deg,#8B2E2E 0%,#B8862B 50%,#136B4E 100%);margin:3.2rem 0 .4rem}
.skala .zeiger{position:absolute;top:-3rem;transform:translateX(-50%);text-align:center;font-family:var(--mono)}
.skala .zeiger b{display:block;font-size:1.4rem;color:var(--nacht);line-height:1}
.skala .zeiger i{font-style:normal;font-size:.75rem;color:var(--grau)}
.skala .zeiger::after{content:"";position:absolute;left:50%;bottom:-1.25rem;transform:translateX(-50%);width:2px;height:1.5rem;background:var(--nacht)}
.skala .klassen{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.8rem;color:var(--grau)}
.skala-text{font-size:.95rem;color:var(--grau);margin:.5rem 0 0}
/* Referenzen */
.referenzen{margin-top:1.5rem}
.logos{list-style:none;margin:1rem 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:48rem){.logos{grid-template-columns:repeat(4,1fr)}}
.logos li{background:var(--karte);border:1px solid var(--linie);border-radius:6px;min-height:6rem;display:flex;align-items:center;justify-content:center;padding:1rem}
.logos img{max-height:3.2rem;width:auto;max-width:100%;filter:grayscale(1) brightness(.35);opacity:.85;object-fit:contain}
.logos .textlogo{font-family:var(--kopf);font-weight:600;color:#444;text-align:center;line-height:1.1;font-size:1.1rem}
.logos .textlogo small{display:block;font-family:var(--schrift);font-weight:400;font-size:.8rem;color:var(--grau)}
/* Formular */
.formular{display:grid;gap:1.1rem;max-width:40rem;margin-top:1.5rem}
.feld{display:grid;gap:.35rem}
.feld label{font-weight:600;color:var(--nacht)}
.feld input,.feld select,.feld textarea{font:inherit;padding:.75rem .9rem;border:1px solid var(--grau);border-radius:4px;background:#fff;color:var(--tinte);min-height:44px;width:100%}
.feld textarea{min-height:8rem;resize:vertical}
.feld small{color:var(--grau);font-size:.9rem}
.zustimmung{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start}
.zustimmung input{width:1.3rem;height:1.3rem;margin-top:.25rem}
.formular button{font:inherit;font-weight:600}
.hinweis-box{background:var(--karte);border-left:4px solid var(--gold);padding:1rem 1.25rem;margin-top:1.5rem;max-width:70ch}
.kontaktdaten{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.6rem}
/* Fußbereich */
.fuss-seite{background:var(--nacht);color:var(--papier);padding:3rem 0 2rem;margin-top:3rem}
.fuss-seite h2{font-size:1.15rem;color:var(--papier);margin-bottom:.6rem}
.fuss-seite a{color:var(--gruen-hell)}
.fuss-seite ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.fuss-seite .spalten{display:grid;gap:2rem}
@media (min-width:48rem){.fuss-seite .spalten{grid-template-columns:2fr 1fr 1fr}}
.fuss-seite .klein{color:rgba(246,244,238,.7);margin-top:2rem;max-width:80ch}
.quellen-fuss{padding:2.5rem 0}
.quellenliste{font-size:.95rem;color:var(--grau);padding-left:1.25rem;display:grid;gap:.4rem}
.quellenliste li{max-width:90ch}
.lesen{max-width:70ch}
.rechtstext h2{font-size:1.5rem;margin-top:2.25rem}
.rechtstext h3{font-size:1.15rem;margin-top:1.5rem}
.rechtstext p,.rechtstext li{max-width:80ch}
.inhalt-navi{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:1rem 0 0;padding:0;list-style:none;max-width:none}
.inhalt-navi li a{font-size:.95rem}