/* contenai – gemeinsames Design für Portal und alle Ratgeber (03.11.2026, Adnan: „viel moderner, professioneller“).
   Erzeugt/eingebunden von tools/design-erzeugen.js und tools/portal-erzeugen.js. Keine Schriften von außen (Datenschutz):
   moderne System-Schriften (Segoe UI Variable / SF Pro / Inter, falls installiert). Hell + Dunkel. */
:root{
  --bg:#f7f8f6;--flaeche:#fff;--flaeche-2:#f1f4f0;--linie:#e3e8e2;--linie-stark:#cfd8cf;
  --text:#101a14;--leise:#56645b;--sehr-leise:#7d8a82;
  --marke:#14774a;--marke-tief:#0b3d26;--marke-hell:#e7f4ec;--marke-mittel:#cde9d8;
  --gold:#f2a516;--gold-hell:#fff3d6;--gold-text:#3d2a00;
  --hinweis:#fff8e6;--hinweis-linie:#f0d38a;
  --schatten-1:0 1px 2px rgb(16 26 20/.06);--schatten-2:0 1px 2px rgb(16 26 20/.05),0 10px 30px -12px rgb(16 26 20/.18);
  --radius:18px;--radius-klein:12px;
  --schrift:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  --schrift-titel:"Segoe UI Variable Display","Segoe UI Variable","Segoe UI",-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  color-scheme:light
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b110d;--flaeche:#121a15;--flaeche-2:#17211b;--linie:#243029;--linie-stark:#33433a;
  --text:#e8efe9;--leise:#a1b0a6;--sehr-leise:#7f8e85;
  --marke:#5fd394;--marke-tief:#06180e;--marke-hell:#12271b;--marke-mittel:#1d3b2a;
  --gold:#f5b33a;--gold-hell:#2a2110;--gold-text:#1b1300;
  --hinweis:#231d0e;--hinweis-linie:#6b5520;
  --schatten-1:0 1px 2px rgb(0 0 0/.4);--schatten-2:0 1px 2px rgb(0 0 0/.35),0 12px 32px -14px rgb(0 0 0/.7);
  color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 var(--schrift);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--marke);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
img{max-width:100%}
[hidden]{display:none !important}

/* ── Kopfzeile ───────────────────────────────────────────── */
.kopf{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--flaeche) 82%,transparent);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--linie)}
.kopf-innen{max-width:1120px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;align-items:center;gap:24px}
.marke{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font:800 1.28rem/1 var(--schrift-titel);letter-spacing:-.03em;flex:none}
.marke img{display:block;border-radius:8px}
.marke b{color:var(--gold)}
.kopf nav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;min-width:0;margin-left:auto}
.kopf nav::-webkit-scrollbar{display:none}
.kopf nav a{color:var(--leise);text-decoration:none;white-space:nowrap;padding:8px 12px;border-radius:999px;font-size:.92rem;font-weight:600;transition:background .15s,color .15s}
.kopf nav a:hover{background:var(--flaeche-2);color:var(--text)}
@media (max-width:720px){.kopf-innen{gap:14px;padding:0 14px}.kopf nav a{padding:7px 10px;font-size:.86rem}}

/* ── Ratgeber-Seite ─────────────────────────────────────── */
.artikel-kopf{background:radial-gradient(900px 340px at 85% -10%,var(--gold-hell),transparent 60%),radial-gradient(700px 360px at -10% 0%,var(--marke-hell),transparent 60%),var(--bg);border-bottom:1px solid var(--linie)}
.artikel-kopf-innen{max-width:760px;margin:0 auto;padding:36px 20px 30px}
.pfad{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.86rem;color:var(--sehr-leise);margin:0 0 18px}
.pfad a{color:var(--leise);text-decoration:none;font-weight:600}
.pfad a:hover{color:var(--marke)}
.pfad span[aria-hidden]{opacity:.6}
.etikett{display:inline-flex;align-items:center;gap:6px;background:var(--marke-hell);color:var(--marke);border:1px solid var(--marke-mittel);font-size:.78rem;font-weight:700;letter-spacing:.02em;padding:4px 11px;border-radius:999px}
.artikel-kopf h1{hyphens:manual;font:800 clamp(1.9rem,5vw,2.85rem)/1.12 var(--schrift-titel);letter-spacing:-.035em;margin:14px 0 14px;text-wrap:balance}
.artikel-kopf .unterzeile{font-size:1.14rem;color:var(--leise);margin:0 0 18px;max-width:64ch}
.metazeile{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.84rem;color:var(--sehr-leise)}
.metazeile span{display:inline-flex;align-items:center;gap:6px}
.metazeile svg{flex:none}
.ki-hinweis{font-size:.82rem !important;color:var(--sehr-leise) !important;margin:0 0 16px !important}
.ki-hinweis a{color:inherit}

main.artikel{max-width:760px;margin:0 auto;padding:34px 20px 56px}
main.artikel>h1{font:800 clamp(1.9rem,5vw,2.6rem)/1.15 var(--schrift-titel);letter-spacing:-.03em;margin:0 0 12px}
main h2{font:750 1.42rem/1.3 var(--schrift-titel);letter-spacing:-.02em;margin:42px 0 12px;scroll-margin-top:90px}
main h3{font:700 1.1rem/1.35 var(--schrift-titel);margin:26px 0 8px}
main p,main ul,main ol{margin:0 0 14px}
main li{margin-bottom:8px}
main li::marker{color:var(--marke)}
main ol{padding-left:0;list-style:none;counter-reset:schritt}
main ol>li{position:relative;padding-left:44px;counter-increment:schritt;min-height:30px}
main ol>li::before{content:counter(schritt);position:absolute;left:0;top:1px;width:30px;height:30px;border-radius:10px;background:var(--marke-hell);color:var(--marke);font:800 .9rem/30px var(--schrift-titel);text-align:center}
main strong{font-weight:700;color:var(--text)}
.unterzeile{color:var(--leise)}

/* Das Wichtigste in Kürze */
.kurz{position:relative;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:22px 24px 10px;margin:0 0 8px;box-shadow:var(--schatten-2);overflow:hidden}
.kurz::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--marke),var(--gold))}
.kurz h2{margin:2px 0 12px;font-size:1.12rem;display:flex;align-items:center;gap:8px}
.kurz ul{list-style:none;padding:0}
.kurz li{position:relative;padding-left:30px}
.kurz li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--marke) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

.kasten{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:18px 20px;margin:18px 0;box-shadow:var(--schatten-1)}
.kasten>:last-child{margin-bottom:0}
.achtung{background:var(--hinweis);border-color:var(--hinweis-linie);box-shadow:none;position:relative;padding-left:52px}
.achtung::before{content:"!";position:absolute;left:18px;top:18px;width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--gold-text);font:800 .85rem/22px var(--schrift-titel);text-align:center}
.werbung{font-size:.84rem;color:var(--leise);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:10px 14px;background:var(--flaeche-2);margin:0 0 22px}
.anzeige{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sehr-leise);margin:0 0 6px}
.knopf{display:inline-flex;align-items:center;gap:8px;background:var(--marke);color:#fff;font:700 1rem/1.2 var(--schrift);text-decoration:none;padding:13px 20px;border-radius:12px;margin:6px 8px 6px 0;border:0;cursor:pointer;box-shadow:0 8px 20px -10px var(--marke);transition:transform .15s,box-shadow .15s}
@media (prefers-color-scheme:dark){.knopf{color:#05140b}}
.knopf:hover{transform:translateY(-1px);text-decoration:none}
.knopf.zweit{background:transparent;color:var(--marke);border:2px solid var(--marke);box-shadow:none;padding:11px 18px}
.leise{color:var(--leise);font-size:.88rem}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;margin:6px 0 18px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);overflow:hidden}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linie);vertical-align:top}
th{background:var(--flaeche-2);font-weight:700;font-size:.86rem;color:var(--leise)}
tr:last-child td{border-bottom:0}
@media (max-width:560px){table{display:block;overflow-x:auto}}

/* Passende Ratgeber + Quellen */
.verwandt{margin:44px 0 0}
.verwandt h2{margin:0 0 14px}
.verwandt ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.verwandt li{margin:0}
.verwandt a{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;height:100%;min-height:92px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:16px;text-decoration:none;color:var(--text);font-weight:700;line-height:1.35;box-shadow:var(--schatten-1);transition:border-color .15s,transform .15s,box-shadow .15s}
.verwandt a::after{content:"→";color:var(--marke);font-size:1.1rem}
.verwandt a:hover{border-color:var(--marke-mittel);transform:translateY(-2px);box-shadow:var(--schatten-2)}
main.artikel>footer{margin-top:44px;padding:18px 20px;background:var(--flaeche-2);border-radius:var(--radius-klein);font-size:.84rem;color:var(--leise)}
main.artikel>footer p:last-child{margin-bottom:0}

/* Kündigungs-Generator (Formular) */
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.felder label{display:flex;flex-direction:column;gap:5px;font-size:.9rem;font-weight:650;min-width:0}
.felder .breit{grid-column:1/-1}
.felder small{font-weight:400;color:var(--leise)}
input,select,textarea{font:inherit;font-weight:400;color:var(--text);background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:10px;padding:11px 13px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--marke);box-shadow:0 0 0 4px var(--marke-hell)}
textarea{min-height:80px;resize:vertical}
.wahl{display:flex;gap:8px;align-items:flex-start;font-weight:400 !important;flex-direction:row !important}
.wahl input{width:auto;margin-top:5px;accent-color:var(--marke)}
.brief{font-family:Georgia,"Times New Roman",serif;font-size:1rem;line-height:1.55;white-space:pre-wrap;background:#fff;color:#111;border:1px solid var(--linie);border-radius:12px;padding:30px 32px;min-height:200px;box-shadow:var(--schatten-2)}
.meldung{font-size:.9rem;color:var(--marke);font-weight:700;min-height:1.4em}
@media (max-width:560px){.felder{grid-template-columns:1fr}.brief{padding:18px}}
@media print{.kopf,.seite-fuss,.artikel-kopf{display:none !important}body{background:#fff}main>*:not(#brief-bereich){display:none !important}#brief-bereich>*:not(#brief){display:none !important}.brief{border:0;padding:0;font-size:12pt;box-shadow:none}}

/* ── Fußzeile ───────────────────────────────────────────── */
.seite-fuss{background:var(--marke-tief);color:#cfe3d6;margin-top:24px}
.seite-fuss-innen{max-width:1120px;margin:0 auto;padding:40px 20px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.seite-fuss .marke{color:#fff}
.seite-fuss p{font-size:.9rem;color:#b7cdbf;margin:12px 0 0;max-width:34ch}
.seite-fuss h4{margin:0 0 10px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8fb5a0}
.seite-fuss ul{list-style:none;padding:0;margin:0}
.seite-fuss li{margin:0 0 7px}
.seite-fuss a{color:#e8f3ec;text-decoration:none;font-size:.92rem}
.seite-fuss a:hover{text-decoration:underline}
.seite-fuss-unten{max-width:1120px;margin:0 auto;padding:16px 20px 26px;border-top:1px solid #ffffff1a;font-size:.8rem;color:#8fb5a0}
@media (max-width:720px){.seite-fuss-innen{grid-template-columns:1fr 1fr}.seite-fuss-innen>div:first-child{grid-column:1/-1}}

/* ── Portal ─────────────────────────────────────────────── */
.held{background:radial-gradient(1000px 420px at 88% -20%,var(--gold-hell),transparent 62%),radial-gradient(900px 460px at -8% -10%,var(--marke-hell),transparent 60%),var(--bg);border-bottom:1px solid var(--linie)}
.held-innen{max-width:1120px;margin:0 auto;padding:64px 20px 86px}
.held .etikett{margin-bottom:18px}
.held h1{font:850 clamp(2.2rem,6.4vw,4rem)/1.04 var(--schrift-titel);letter-spacing:-.045em;margin:0 0 18px;max-width:15ch;text-wrap:balance}
.held h1 em{font-style:normal;background:linear-gradient(100deg,var(--marke) 10%,#2aa36a 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.held p.held-text{font-size:clamp(1.05rem,2.2vw,1.22rem);color:var(--leise);margin:0 0 28px;max-width:58ch}
.suche{display:flex;align-items:center;gap:10px;background:var(--flaeche);border:1px solid var(--linie-stark);border-radius:16px;box-shadow:var(--schatten-2);max-width:620px;padding:6px 6px 6px 16px;transition:border-color .15s,box-shadow .15s}
.suche:focus-within{border-color:var(--marke);box-shadow:0 0 0 5px var(--marke-hell),var(--schatten-2)}
.suche svg{flex:none;color:var(--sehr-leise)}
.suche input{flex:1;min-width:0;border:0;background:transparent;box-shadow:none !important;font-size:1.06rem;padding:12px 4px}
.held-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px}
.beliebt{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.86rem;color:var(--sehr-leise)}
.beliebt a{color:var(--leise);text-decoration:none;background:var(--flaeche);border:1px solid var(--linie);padding:5px 12px;border-radius:999px;font-weight:600}
.beliebt a:hover{border-color:var(--marke-mittel);color:var(--marke)}
.reinfliegen{display:inline-flex;align-items:center;gap:8px;font:600 .86rem/1 var(--schrift);color:var(--leise);background:transparent;border:1px dashed var(--linie-stark);border-radius:999px;padding:8px 14px;cursor:pointer}
.reinfliegen:hover{color:var(--marke);border-color:var(--marke)}
.reinfliegen small{font-weight:400;opacity:.8}
main.portal{max-width:1120px;margin:0 auto;padding:0 20px 56px}
.kacheln{scroll-margin-top:84px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:-44px 0 34px}
.kachel{display:flex;flex-direction:column;gap:10px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:18px;color:inherit;text-decoration:none;box-shadow:var(--schatten-2);transition:transform .18s,border-color .18s}
.kachel:hover{transform:translateY(-3px);border-color:var(--marke-mittel)}
.symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--marke-hell);color:var(--marke)}
.kachel-titel{font:750 1rem/1.25 var(--schrift-titel);letter-spacing:-.01em}
.kachel small{color:var(--sehr-leise);font-size:.8rem;line-height:1.35}
@media (max-width:560px){.kacheln{grid-template-columns:repeat(2,1fr);gap:10px}.kachel{padding:14px}.kachel small{display:none}}
.vertrauen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;list-style:none;padding:0;margin:0 0 30px}
.vertrauen li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--leise);background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:14px 16px;margin:0}
.vertrauen li>svg{flex:none;color:var(--marke);margin-top:2px}
.vertrauen strong{display:block;color:var(--text)}
main.portal .werbung{margin:0 0 34px}
main.portal section{margin:0 0 48px;scroll-margin-top:84px}
.thema-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
main.portal h2{font:800 clamp(1.35rem,3vw,1.75rem)/1.2 var(--schrift-titel);letter-spacing:-.03em;margin:0;display:flex;gap:12px;align-items:center}
main.portal h2 .symbol{width:38px;height:38px;border-radius:11px}
.thema-text{margin:0 0 18px;color:var(--leise);max-width:70ch}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.karte-link{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:20px 22px;color:inherit;text-decoration:none;box-shadow:var(--schatten-1);transition:transform .18s,box-shadow .18s,border-color .18s}
.karte-link:hover{transform:translateY(-3px);box-shadow:var(--schatten-2);border-color:var(--marke-mittel)}
.karte-link strong{font:750 1.08rem/1.32 var(--schrift-titel);letter-spacing:-.015em}
.karte-link span{color:var(--leise);font-size:.93rem;line-height:1.55}
.karte-link em{align-self:flex-start;font-style:normal;font-weight:700;color:var(--marke);font-size:.78rem;background:var(--marke-hell);border-radius:999px;padding:3px 10px}
.karte-link b{color:var(--marke);font-size:.92rem;margin-top:auto;padding-top:6px}
.vorschau-hinweis{display:none}
.vorschau .vorschau-hinweis{display:inline-block;align-self:flex-start;font-size:.74rem !important;font-weight:700;color:#8a5a00 !important;background:#fff3cd;border-radius:6px;padding:2px 8px}
.leer{background:var(--flaeche);border:1px dashed var(--linie-stark);border-radius:var(--radius);padding:20px;color:var(--leise)}
.schritte-titel{font:800 clamp(1.35rem,3vw,1.75rem)/1.2 var(--schrift-titel) !important;letter-spacing:-.03em;margin:8px 0 16px !important}
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;counter-reset:s;list-style:none;padding:0;margin:0 0 20px}
.schritte li{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:20px 22px;counter-increment:s;font-size:.94rem;color:var(--leise);margin:0;min-height:0;box-shadow:var(--schatten-1)}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--marke),#2aa36a);color:#fff;font:800 .95rem/1 var(--schrift-titel);margin-bottom:12px;position:static}
.schritte strong{display:block;color:var(--text);font-size:1rem;margin-bottom:4px}
.bald{color:var(--leise);font-size:.92rem}
.knopf small{font-weight:400;opacity:.8}

/* Bilder + Vertrauen (03.11.2026) */
.held-innen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.held-bild{width:100%;height:auto;border-radius:28px;box-shadow:var(--schatten-2)}
@media (max-width:900px){.held-innen{grid-template-columns:1fr}.held-bild{max-width:420px;justify-self:center;order:-1;margin-bottom:-6px}}
@media (max-width:560px){.held-bild{max-width:300px}}
.kachel{padding:0;overflow:hidden}
.kachel>.symbol,.kachel>.kachel-titel,.kachel>small{margin-left:16px;margin-right:16px}
.kachel>small{margin-bottom:16px}
.kachel-bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-bottom:1px solid var(--linie)}
.kachel>.symbol{margin-top:-28px;position:relative;background:var(--flaeche);box-shadow:var(--schatten-1);border:1px solid var(--linie)}
@media (max-width:560px){.kachel>.symbol{width:38px;height:38px;margin-top:-24px}}
.kopf-bild{display:none}
@media (min-width:1260px){.artikel-kopf-innen{position:relative}.kopf-bild{display:block;position:absolute;top:40px;left:calc(100% + 30px);width:min(300px,calc((100vw - 760px) / 2 - 60px));height:auto;border-radius:24px;box-shadow:var(--schatten-2)}}
.grundsaetze{background:var(--flaeche);border:1px solid var(--linie);border-radius:24px;padding:30px;margin:8px 0 48px;box-shadow:var(--schatten-2)}
.grundsaetze-kopf h2{margin:12px 0 4px !important}
.grundsaetze-kopf p{margin:0 0 20px;color:var(--leise)}
.grundsaetze-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.grundsaetze-liste div{display:flex;flex-direction:column;gap:8px}
.grundsaetze-liste strong{font:750 1.02rem/1.3 var(--schrift-titel)}
.grundsaetze-liste p{margin:0;font-size:.92rem;color:var(--leise)}
.ueber{display:flex;gap:16px;align-items:flex-start;background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius);padding:18px 20px;margin:40px 0 0;box-shadow:var(--schatten-1)}
.ueber img{flex:none;border-radius:12px}
.ueber strong{display:block;font:750 1rem/1.3 var(--schrift-titel);margin-bottom:4px}
.ueber p{margin:0;font-size:.9rem;color:var(--leise)}

/* Echte Fotos (03.11.2026) */
.held-foto{position:relative;margin:0}
.held-foto .held-bild{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:28px;box-shadow:var(--schatten-2)}
.held-karte{position:absolute;left:-22px;bottom:34px;display:flex;gap:10px;align-items:center;background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;padding:12px 16px;box-shadow:var(--schatten-2);color:var(--marke);max-width:280px}
.held-karte strong{display:block;color:var(--text);font:750 .95rem/1.2 var(--schrift-titel)}
.held-karte span{font-size:.8rem;color:var(--leise);line-height:1.35}
@media (max-width:900px){.held-foto{max-width:460px;justify-self:center;order:-1;width:100%}.held-karte{left:12px;bottom:12px}}
.foto-nachweis{display:block;margin-top:8px;font-size:.72rem;color:var(--sehr-leise)}
.foto-nachweis a,.foto-hinweis a{color:inherit}
.foto-hinweis{font-size:.75rem;color:var(--sehr-leise);margin:-30px 0 40px}
figure.kopf-bild{margin:0;box-shadow:none !important;border-radius:0 !important}
figure.kopf-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;box-shadow:var(--schatten-2)}

.karte-link{padding:0;overflow:hidden}
.karte-link>:not(.karte-bild){margin-left:22px;margin-right:22px}
.karte-link>.karte-bild+*,.karte-link>.karte-bild+.vorschau-hinweis+strong{margin-top:16px}
.karte-link>b{margin-bottom:20px}
.karte-bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--linie);transition:transform .4s}
.karte-link:hover .karte-bild{transform:scale(1.03)}

/* Inhaltsverzeichnis (03.11.2026) */
main.artikel{position:relative}
.inhalt{margin:22px 0 8px}
.inhalt-innen{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--radius-klein);padding:16px 18px}
.inhalt strong{display:block;font:750 .78rem/1.2 var(--schrift-titel);letter-spacing:.1em;text-transform:uppercase;color:var(--sehr-leise);margin-bottom:10px}
.inhalt ol{list-style:none;counter-reset:none;padding:0;margin:0;display:grid;gap:2px}
.inhalt ol>li{padding:0;min-height:0;margin:0}
.inhalt ol>li::before{display:none}
.inhalt a{display:block;padding:6px 10px;border-radius:8px;color:var(--leise);text-decoration:none;font-size:.9rem;line-height:1.35;border-left:2px solid transparent}
.inhalt a:hover{background:var(--flaeche-2);color:var(--text)}
.inhalt a[aria-current]{color:var(--marke);border-left-color:var(--marke);background:var(--marke-hell);font-weight:650}
@media (min-width:1260px){.inhalt{position:absolute;top:0;bottom:0;left:calc(100% + 30px);width:min(270px,calc((100vw - 760px) / 2 - 60px));margin:0}.inhalt-innen{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;margin-top:34px}}
.karte-link>.karte-meta{font-size:.76rem;color:var(--sehr-leise);font-weight:600;letter-spacing:.01em}

/* Drohnenflug (Portal) – unverändert übernommen */
html.im-flug,html.im-flug body{overflow:hidden}
#flug{position:fixed;inset:0;z-index:50;overflow:hidden;background:#06140d}
.flug-himmel{position:absolute;inset:0 0 45%;background:linear-gradient(#0d2a1c,#1f7a4f 70%,#f2a516)}
.flug-boden{position:absolute;left:0;right:0;top:55%;bottom:-40%;perspective:320px;perspective-origin:50% 0;overflow:hidden;background:linear-gradient(#0a2015,#06140d)}
.flug-gitter{position:absolute;left:-150%;width:400%;top:0;height:400%;transform-origin:50% 0;transform:rotateX(72deg);background-image:linear-gradient(#3ee08f 3px,transparent 3px),linear-gradient(90deg,#3ee08f 3px,transparent 3px);background-size:90px 90px;-webkit-mask-image:linear-gradient(transparent,#000 6%);mask-image:linear-gradient(transparent,#000 6%)}
.flug-boden::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(#f2a51666,transparent)}
.flug-wolke{position:absolute;left:50%;top:42%;width:260px;height:110px;margin:-55px 0 0 -130px;border-radius:50%;background:#fff;filter:blur(18px);opacity:0}
.flug-ziel{position:absolute;left:50%;top:45%;width:120px;height:120px;transform:translate(-50%,-50%) scale(.06);border-radius:28px;box-shadow:0 0 60px #f2a51699}
.flug-hud{position:absolute;inset:16px;pointer-events:none;color:#e9fff1;font:700 13px/1.2 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-shadow:0 1px 3px #000}
.flug-hud .rec{position:absolute;left:14px;top:12px;color:#ff4d5e}
.flug-hud .hoehe{position:absolute;left:14px;bottom:14px}
.flug-hud .tempo{position:absolute;right:14px;bottom:14px}
.flug-hud .ziel-name{position:absolute;left:50%;top:12px;transform:translateX(-50%);color:#f2a516;white-space:nowrap}
.flug-hud .ecke{position:absolute;width:34px;height:34px;border:3px solid #e9fff1cc}
.flug-hud .e1{left:0;top:0;border-right:0;border-bottom:0}.flug-hud .e2{right:0;top:0;border-left:0;border-bottom:0}
.flug-hud .e3{left:0;bottom:0;border-right:0;border-top:0}.flug-hud .e4{right:0;bottom:0;border-left:0;border-top:0}
.flug-hud .fadenkreuz{position:absolute;left:50%;top:45%;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid #e9fff199;border-radius:50%}
.flug-blitz{position:absolute;inset:0;background:var(--bg);opacity:0}
.flug-weg{position:absolute;right:20px;top:18px;font:inherit;font-size:.85rem;color:#fff;background:#0008;border:1px solid #fff6;border-radius:999px;padding:6px 14px;cursor:pointer}

/* Feinschliff 2 (03.11.2026, Adnan: „besser und moderner“) */
/* Ratgeber: großes Titelbild über die Textbreite – auf allen Geräten, nicht mehr am Rand */
.kopf-bild,figure.kopf-bild{display:block;position:static;width:auto;margin:26px 0 0}
@media (min-width:1260px){.kopf-bild{position:static;width:auto}}
figure.kopf-bild img{aspect-ratio:21/9;border-radius:22px}
@media (max-width:560px){figure.kopf-bild img{aspect-ratio:16/9;border-radius:16px}}
/* Lesefortschritt unten am Seitenkopf (nur Browser mit Scroll-Animationen; sonst fehlt er einfach) */
@supports (animation-timeline:scroll()){
  body:has(main.artikel) .kopf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--marke),#2aa36a,var(--gold));transform-origin:0 50%;transform:scaleX(0);animation:lesefortschritt linear both;animation-timeline:scroll(root)}
  @keyframes lesefortschritt{to{transform:scaleX(1)}}
}
/* Portal: „Beliebt“ bricht nicht mitten im Knopf um */
.beliebt a{white-space:nowrap;padding:4px 11px;font-size:.82rem}
/* Portal: 4 Karten je Reihe, weniger Lücken */
.karten{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.karte-link strong{font-size:1rem}
.karte-link span{font-size:.9rem}
/* Thema mit nur einem Ratgeber: breite Querkarte statt einer einsamen kleinen */
@media (min-width:720px){
  .karten>.karte-link:only-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;column-gap:0;min-height:260px}
  .karten>.karte-link:only-child>.karte-bild{grid-column:1;grid-row:1/span 9;height:0;min-height:100%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--linie)}
  .karten>.karte-link:only-child>:not(.karte-bild){grid-column:2;margin-left:30px;margin-right:30px}
  .karten>.karte-link:only-child>.karte-bild+*{margin-top:30px}
  .karten>.karte-link:only-child>strong{font-size:1.3rem}
  .karten>.karte-link:only-child>b{margin-bottom:28px}
}
/* Portal: „So arbeiten wir“ als dunkelgrünes Band */
.grundsaetze{background:radial-gradient(600px 260px at 100% 0%,rgb(242 165 22/.16),transparent 70%),linear-gradient(135deg,var(--marke-tief),#14563a);border:0;color:#e8f3ec;padding:40px 36px}
.grundsaetze h2,.grundsaetze-liste strong{color:#fff}
.grundsaetze-kopf p,.grundsaetze-liste p{color:#b9d3c3}
.grundsaetze .etikett{background:rgb(255 255 255/.1);border-color:rgb(255 255 255/.18);color:#fff}
.grundsaetze .symbol{background:rgb(255 255 255/.08);color:var(--gold)}
@media (max-width:560px){.grundsaetze{padding:28px 20px}}

/* Feinschliff 3 (03.11.2026): Handy zuerst + Bildkarten bei „Passende Ratgeber“ */
/* Menü am Handy: weicher Rand rechts zeigt, dass man wischen kann (statt abgeschnittenem Wort) */
@media (max-width:720px){.kopf nav{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);padding-right:28px}}
/* Startseite am Handy: erst Überschrift und Suche, dann das Foto */
@media (max-width:900px){.held-foto,.held-bild{order:0}.held-foto{margin-top:30px}.held-innen{padding-top:34px;padding-bottom:66px}}
/* Themen-Kacheln am Handy und Tablet: wischbare Reihe statt Spalten mit einer einzelnen Kachel */
@media (max-width:900px){
  .kacheln{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:none;margin:-30px -20px 30px;padding:4px 20px 14px;gap:12px}
  .kacheln::-webkit-scrollbar{display:none}
  .kacheln>.kachel{flex:0 0 44%;scroll-snap-align:start}
}
@media (min-width:561px) and (max-width:900px){.kacheln>.kachel{flex-basis:21.5%}}
/* Passende Ratgeber als Bildkarten */
.verwandt a{flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow:hidden;min-height:0}
.verwandt a::after{display:none}
.verwandt-bild{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .4s}
.verwandt a:hover .verwandt-bild{transform:scale(1.03)}
.verwandt a>span{display:flex;flex-direction:column;gap:4px;padding:12px 14px 16px}
.verwandt small{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--marke)}
.verwandt strong{font:700 .96rem/1.3 var(--schrift-titel);color:var(--text)}
@media (max-width:560px){
  .verwandt a{flex-direction:row;align-items:center}
  .verwandt-bild{width:96px;flex:none;aspect-ratio:1;align-self:stretch;height:auto}
  .verwandt a>span{padding:12px 14px}
}
/* Kopiervorlagen (Kündigungsbriefe): Zeilenumbrüche behalten – war bei der Design-Umstellung verloren gegangen */
.vorlage{font-family:ui-monospace,Consolas,monospace;font-size:.88rem;line-height:1.6;white-space:pre-wrap;background:var(--flaeche-2);border:1px dashed var(--linie-stark);border-radius:var(--radius-klein);padding:14px 16px;overflow-wrap:anywhere}
/* 7 Themen (04.11.2026): Menü etwas kompakter, Kacheln in einer Reihe statt 6 + 1 */
@media (min-width:721px){.kopf-innen{gap:16px}.kopf nav a{padding:8px 9px;font-size:.87rem}}
@media (min-width:1300px){.kopf-innen{max-width:1260px}}
@media (min-width:721px) and (max-width:1299px){.kopf nav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent);padding-right:24px}}
@media (min-width:561px){.kacheln{grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:12px}.kachel-titel{font-size:.95rem}}
@media (min-width:561px) and (max-width:1100px){.kachel-titel{font-size:.86rem}.kachel small{font-size:.74rem}.kachel>.symbol,.kachel>.kachel-titel,.kachel>small{margin-left:12px;margin-right:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}