/* ============================================================
   „Golden Hour" — verbindliche Design-Tokens des Produkts
   Quelle: Produkt/09-Design-Print-Konzept.md (Palette v2)
   ============================================================ */
:root{
  --petrol-900:#0A2530; --petrol-700:#0F3D4A; --petrol-500:#1A6079;
  --amber-500:#F5A623;  --amber-300:#FFC96B;  --amber-700:#C77E08;
  --green-500:#1FB58F;  --green-050:#E9F7F2;
  --cream-050:#FBF7F0;  --cream-100:#F5EEE2;  --sand-200:#E9DFCE;
  --ink-900:#1E2A30;    --ink-500:#5C6B70;    --ink-300:#93A2A6;
  --danger:#B5462F;     --danger-soft:#FBE9E4;
  --r:16px; --r-s:10px;
  --shadow:0 18px 50px rgba(15,61,74,.10); --shadow-s:0 8px 22px rgba(15,61,74,.07);
  --f-head:'Space Grotesk',sans-serif; --f-body:'Inter',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream-050);color:var(--ink-900);font:15.5px/1.6 var(--f-body)}
h1,h2,h3,h4{font-family:var(--f-head);color:var(--petrol-700)}
img{display:block}
a{color:var(--petrol-500)}

/* ---- Buttons & Tags ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;
  font:600 14.5px var(--f-body);border-radius:12px;padding:12px 22px;border:none;transition:.15s}
.btn-gold{background:var(--amber-500);color:var(--petrol-900)}
.btn-gold:hover{background:var(--amber-300)}
.btn-ghost{background:transparent;color:var(--petrol-700);border:1.5px solid var(--sand-200)}
.btn-ghost:hover{border-color:var(--petrol-700)}
.btn[disabled]{opacity:.55;cursor:wait}
.tag{display:inline-block;font:700 10.5px var(--f-head);letter-spacing:.07em;text-transform:uppercase;padding:4px 11px;border-radius:20px}
.tag-norm{background:var(--petrol-700);color:#fff}
.tag-preis{background:var(--amber-500);color:var(--petrol-900)}
.tag-trend{background:var(--green-500);color:#fff}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:40;display:flex;gap:8px;align-items:center;
  background:rgba(251,247,240,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--sand-200);padding:13px 26px}
.logo{display:flex;align-items:center;gap:10px;margin-right:22px;text-decoration:none}
.logo .mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--amber-500),var(--amber-300));
  display:flex;align-items:center;justify-content:center;font:700 16px var(--f-head);color:var(--petrol-900)}
.logo b{font:700 15.5px var(--f-head);color:var(--petrol-700)}
.topbar nav{display:flex;gap:4px;flex:1}
.topbar nav a{text-decoration:none;color:var(--ink-500);font:600 13.5px var(--f-body);padding:8px 14px;border-radius:10px;cursor:pointer}
.topbar nav a:hover{background:var(--cream-100);color:var(--ink-900)}
.topbar nav a.act{background:var(--petrol-700);color:#fff}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--petrol-500);color:#fff;
  display:flex;align-items:center;justify-content:center;font:700 13px var(--f-head);cursor:pointer;border:none}
.wrap{max-width:1100px;margin:0 auto;padding:30px 26px 100px}

/* ---- Mobil: Bereichswechsel als Tab-Leiste unten (Daumen-Zone), Topbar nur Logo + Abmelden ----
   Die drei Textlinks quetschten sich vorher ungeregelt neben das Logo in 375px. Jetzt das Muster,
   das die Hand vom iPhone kennt: Navigation unten. viewport-fit=cover + env(safe-area-inset-bottom)
   halten die Leiste über dem Home-Balken. Ab 701px unverändert Desktop. */
.tabbar{display:none}
@media(max-width:700px){
  .topbar nav{display:none}
  /* Ausnahme: oeffentliche Seiten (nav.pub) haben keine Tabbar als Ersatz — ohne sie waeren
     Login, Blog, Rechner & Co. mobil Sackgassen (27.07.2026). Kompakter, aber sichtbar. */
  .topbar nav.pub{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 100%;order:3;margin-top:4px}
  .topbar nav.pub a{padding:5px 10px;font-size:12.5px}
  /* Umbruch erlauben, damit nav.pub eine eigene Zeile bekommt (sonst quetscht sie sich
     neben Logo und Knopf). Im Mitgliederbereich bleibt die Leiste einzeilig — dort ist
     nav ausgeblendet, es gibt also nichts zu umbrechen. */
  .topbar{justify-content:space-between;flex-wrap:wrap}
  .logo{margin-right:0}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(251,247,240,.94);backdrop-filter:blur(12px);border-top:1px solid var(--sand-200);
    padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;
    text-decoration:none;color:var(--ink-500);font:600 10px var(--f-body);border-radius:10px;cursor:pointer}
  .tabbar a svg{width:21px;height:21px}
  .tabbar a.act{color:var(--petrol-700)}
  .tabbar a.act svg{color:var(--amber-500)}
  .wrap{padding:20px 16px calc(86px + env(safe-area-inset-bottom))}  /* Platz für die Tab-Leiste */
  .foot{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ---- Cards & Hero ---- */
.card{background:#fff;border:1px solid var(--sand-200);border-radius:var(--r);box-shadow:var(--shadow-s)}
.card .pad{padding:20px 22px}
.card h3{font-size:16.5px;margin:0 0 4px}
.card .sub{font-size:12.5px;color:var(--ink-500)}
.hero{position:relative;border-radius:20px;overflow:hidden;margin-bottom:24px;min-height:250px;display:flex;align-items:flex-end;box-shadow:var(--shadow)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ov{position:absolute;inset:0;background:linear-gradient(190deg,rgba(10,37,48,0) 25%,rgba(10,37,48,.86) 85%)}
.hero .in{position:relative;padding:30px;color:#fff;width:100%}
.hero .kick{font:600 11.5px var(--f-head);letter-spacing:.18em;text-transform:uppercase;color:var(--amber-300)}
.hero h1{color:#fff;font-size:28px;margin:8px 0 4px}
.hero p{color:#c9d8dd;margin:0;font-size:14px}
.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}
.pbar{height:7px;border-radius:5px;background:var(--cream-100);overflow:hidden;margin-top:7px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green-500),var(--amber-500));transition:width .4s}
.continue{display:flex;gap:16px;align-items:center;padding:16px 18px;border-top:1px solid var(--cream-100);text-decoration:none;color:inherit;transition:.12s;cursor:pointer}
.continue:hover{background:var(--cream-050)}
.continue img{width:86px;height:60px;object-fit:cover;border-radius:10px;flex:0 0 auto;background:var(--cream-100)}
.continue .bild-wrap{width:86px;height:60px;border-radius:10px;overflow:hidden}
.continue b{font:600 14.5px var(--f-head);color:var(--petrol-700);display:block}
.continue small{color:var(--ink-500);font-size:12.5px}
.continue .pct{margin-left:auto;font:700 13px var(--f-head);color:var(--green-500);white-space:nowrap}
.radar-item{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--cream-100)}
.radar-item:first-of-type{border-top:none}
.radar-item .val{font:700 17px var(--f-head);color:var(--petrol-700);min-width:86px}
.radar-item .val small{display:block;font:500 10.5px var(--f-body);color:var(--ink-300)}
.radar-item p{margin:0;font-size:13px;color:var(--ink-500)}
.radar-item p b{color:var(--ink-900)}

/* ---- Changelog „Was ist neu im Kurs" (+ Admin-Formular „Update melden") ---- */
.upd-card{background:#fff;border:1px solid var(--sand-200);border-radius:var(--r);padding:16px 20px;margin:0 0 18px;box-shadow:var(--shadow-s)}
.upd-card h3{margin:0 0 10px;font-size:17px;color:var(--petrol-700)}
.upd-item{border-top:1px dashed var(--sand-200);padding:10px 0}
.upd-item:first-of-type{border-top:none}
.upd-kopf{display:flex;justify-content:space-between;gap:14px;align-items:baseline;flex-wrap:wrap}
.upd-kopf b{color:var(--ink-900);font-size:14.5px}
.upd-datum{font-size:11.5px;color:var(--ink-300);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.upd-item p{margin:5px 0 0;font-size:13.5px;color:var(--ink-500)}
.upd-leer{font-size:13.5px;color:var(--ink-300)}
.upd-mailinfo{font-size:12px;color:var(--green-500);margin-top:5px}
.upd-senden{margin-top:7px;font:600 12.5px var(--f-head);color:var(--petrol-700);background:var(--cream-050);
  border:1px solid var(--sand-200);border-radius:8px;padding:6px 12px;cursor:pointer}
.upd-senden:hover{border-color:var(--petrol-500)}
.upd-test{margin:7px 8px 0 0;font:600 12.5px var(--f-head);color:var(--ink-500);background:#fff;
  border:1px dashed var(--sand-200);border-radius:8px;padding:6px 12px;cursor:pointer}
.upd-test:hover{border-color:var(--petrol-500);color:var(--petrol-700)}
.upd-loeschen{margin:7px 0 0 8px;font:600 12.5px var(--f-head);color:var(--danger);background:#fff;
  border:1px dashed var(--sand-200);border-radius:8px;padding:6px 10px;cursor:pointer}
.upd-loeschen:hover{border-color:var(--danger)}
.upd-form{margin-top:14px;padding:12px 14px;background:#f6f2fb;border:1px solid #d9cdee;border-radius:10px;display:grid;gap:8px}
.upd-form b{font-size:13px;color:#3b2f63}
.upd-form input,.upd-form textarea{font:14px var(--f-body);border:1px solid var(--sand-200);border-radius:8px;padding:8px 10px;width:100%}
.upd-form button{justify-self:start;font:600 13.5px var(--f-head);background:#3b2f63;color:#fff;border:none;border-radius:9px;padding:9px 16px;cursor:pointer}
.upd-form small{font-size:11.5px;color:var(--ink-300)}

/* ---- ⑫ Ersparnis-Summierer ---- */
.vorlage-summe .sum-ist{background:var(--green-050);border-left:3px solid var(--green-500);border-radius:0 10px 10px 0;
  padding:11px 15px;margin:12px 0;display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline}
.vorlage-summe .sum-ist>b{font:700 17px var(--f-head);color:var(--petrol-700);white-space:nowrap}
.vorlage-summe .sum-ist small{grid-column:1/-1;color:var(--ink-500);font-size:12.5px}
.vorlage-summe .sum-tab td:last-child,.vorlage-summe .sum-eur{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.vorlage-summe .sum-konk td:first-child{color:var(--ink-900)}
.vorlage-summe .sum-marke{color:var(--amber-700);font-weight:700}
.vorlage-summe .vp-sum td{font-weight:700;background:var(--cream-050)}
.vorlage-summe .sum-offen{font-size:12.5px;color:var(--ink-300);margin:10px 0 0}

/* ---- Admin: „Sicht als"-Leiste (nur beim Superadmin sichtbar, app.js baut sie) ---- */
.adminbar{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;
  background:#3b2f63;color:#fff;padding:7px 16px;font:600 13px var(--f-head)}
.adminbar select{font:600 13px var(--f-head);color:var(--petrol-900);border:none;border-radius:8px;
  padding:5px 10px;background:#fff;cursor:pointer}

/* ---- Reader ---- */
/* minmax(0,1fr) statt 1fr — mit Absicht: `1fr` heißt „mindestens so breit wie der sperrigste
   Inhalt", und damit drückte die breiteste Tabelle eines Kapitels (z. B. „drei Wege" in PV+Wärme)
   die ganze Spalte auf — jedes Kapitel hatte seine eigene Breite, das Layout sprang beim Wechsel.
   Mit Minimum 0 ist die Spalte für ALLE Kapitel gleich breit; erst dadurch bekommt eine breite
   Tabelle eine feste Außengrenze und ihr overflow-x:auto kann greifen (intern scrollen). */
.reader{display:grid;grid-template-columns:250px minmax(0,1fr);gap:26px}
@media(max-width:900px){.reader{grid-template-columns:minmax(0,1fr)}}
.modnav{position:sticky;top:80px;align-self:start;background:#fff;border:1px solid var(--sand-200);border-radius:var(--r);padding:10px;box-shadow:var(--shadow-s)}

/* ---- Mobil: Kapitelwahl als Bottom-Sheet statt 13-Kapitel-Vorspann ----
   Bis 16.07. wurde die Kapitelliste unter 900px einfach VOR den Text gestellt (position:static) —
   man musste auf dem Handy erst an 13 Kapiteln vorbeiscrollen, bevor das Lesen anfing.
   Jetzt: Ein kompakter, antippbarer Balken (.modwahl) zeigt das aktuelle Kapitel; ein Tipp öffnet
   die Liste als Sheet, das von unten hochfährt (iOS-Muster). Desktop bleibt unverändert. */
.modwahl{display:none}
.modnav-backdrop{display:none}
@media(max-width:900px){
  .modwahl{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
    background:#fff;border:1px solid var(--sand-200);border-radius:12px;box-shadow:var(--shadow-s);
    padding:12px 16px;margin-bottom:16px;font:600 14px var(--f-body);color:var(--petrol-700)}
  .modwahl .n{font:700 11px var(--f-head);min-width:26px;height:26px;padding:0 4px;border-radius:8px;
    background:var(--amber-500);color:var(--petrol-900);display:flex;align-items:center;justify-content:center}
  .modwahl .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modwahl .chev{color:var(--ink-300);font-size:12px}
  .modnav{position:fixed;left:0;right:0;bottom:0;z-index:70;margin:0;max-height:72vh;overflow-y:auto;
    border-radius:20px 20px 0 0;border:none;box-shadow:0 -18px 50px rgba(15,61,74,.25);
    padding:14px 14px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(105%);transition:transform .28s ease;visibility:hidden}
  .modnav.open{transform:translateY(0);visibility:visible}
  .modnav::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--sand-200);margin:0 auto 12px}
  .modnav a{padding:12px}   /* größere Tippflächen */
  .modnav-backdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(10,37,48,.45);
    opacity:0;pointer-events:none;transition:opacity .25s}
  .modnav-backdrop.open{opacity:1;pointer-events:auto}
}
.modnav a{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink-500);font:500 13.5px var(--f-body);padding:9px 12px;border-radius:10px;cursor:pointer}
.modnav a:hover{background:var(--cream-050);color:var(--ink-900)}
.modnav a.act{background:var(--petrol-700);color:#fff;font-weight:600}
.modnav a .n{font:700 11px var(--f-head);width:24px;height:24px;border-radius:7px;background:var(--cream-100);color:var(--petrol-700);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.modnav a.act .n{background:var(--amber-500);color:var(--petrol-900)}
.modnav a .done{margin-left:auto;color:var(--green-500);font-size:12px}
/* Track-Gating: Gesperrte Kapitel werden AUSGEBLENDET (Entscheidung 23.07.2026) — jedes Paket soll
   sich vollständig anfühlen. Statt Schlössern steht ein dezenter Hinweis am Listenende. Die
   .lock/.locked-Regeln bleiben für den Direktlink-Fall (Upsell-Karte) erhalten. */
.modnav .nav-locked-hint{margin:8px 6px 2px;padding:9px 10px 0;font-size:12px;line-height:1.5;
  color:var(--ink-300);border-top:1px solid var(--sand-200)}
.modnav .nav-locked-hint b{color:var(--ink-500);font-weight:600}
.modnav a .lock{margin-left:auto;font-size:12px;opacity:.75}
.modnav a.locked{color:var(--ink-300)}
.modnav a.locked .n{background:var(--cream-100);color:var(--ink-300)}
.rhero{border-radius:18px;overflow:hidden;position:relative;margin-bottom:22px;box-shadow:var(--shadow);background:linear-gradient(135deg,var(--petrol-700),var(--petrol-900));min-height:120px}
.rhero img{width:100%;height:230px;object-fit:cover}
.rhero .ov{position:absolute;inset:0;background:linear-gradient(190deg,rgba(10,37,48,0) 30%,rgba(10,37,48,.8) 88%)}
/* KI-Kennzeichnung nach Art. 50 Abs. 4 KI-VO — als Auflage IM Bild, unten rechts.
   Warum nicht eingebrannt, wie zuerst gewuenscht: Auf diesem Rechner gibt es kein ImageMagick,
   und jedes Neuschreiben der JPEGs loescht das C2PA-Manifest (nachgemessen: 1 Marker -> 0). Genau
   dieses Manifest ist der Herkunftsnachweis und die Grundlage der automatischen Erkennung — es
   fuer ein Wasserzeichen zu opfern, waere ein schlechter Tausch. Die Auflage sieht aus wie ein
   Wasserzeichen, ist aber verlustfrei, umkehrbar und gilt sofort fuer alle 77 Bilder.
   Halbtransparentes Dunkel statt Vollflaeche: lesbar auf hellen wie dunklen Motiven. */
.ki-marke{position:absolute;right:8px;bottom:7px;z-index:2;
  font:600 9px var(--f-head);letter-spacing:.03em;color:rgba(255,255,255,.9);
  background:rgba(10,37,48,.38);backdrop-filter:blur(2px);
  padding:2px 6px;border-radius:5px;pointer-events:none;user-select:none}
/* Im Kopfbild nach OBEN rechts: unten sitzt .rhero .in mit Titel und Kicker ueber die ganze
   Breite — dort lag die Marke auf dem Text. Der Verlauf .ov dunkelt nur unten ab, oben traegt
   die Marke ihren eigenen Hintergrund. */
.ki-marke-oben{top:9px;bottom:auto}
/* Das Vorschaubild der Fortsetzen-Kachel ist 86x60 px. Dort passt kein Wort, nur ein Kuerzel. */
.ki-marke-mini{right:4px;bottom:3px;font-size:7.5px;padding:1px 4px;border-radius:4px;letter-spacing:.02em}
/* Bezugsrahmen. Ohne ihn misst die absolute Position gegen die Karte statt gegen das Bild —
   genau so sass die Marke am 24.08. im Textfeld statt im Bild. Die Klassennamen sind hier
   NACHGESEHEN, nicht geraten: .continue ist die Fortsetzen-Kachel (styles.css:94). */
.bild-wrap{position:relative;display:inline-block;line-height:0;flex:0 0 auto}
.bild-wrap img{display:block}
.rhero .in{position:absolute;left:24px;bottom:20px;right:24px;color:#fff}
/* Hero OHNE Bild (Normen-Rubriken; Kapitel ohne Motiv): Text im Fluss statt absolut ans
   Kasten-Ende gepinnt — sonst wächst der Petrol-Kasten nicht mit, sobald der Titel mobil
   umbricht, und der Kicker ragt oben heraus. Ohne img ist .in das erste Element im Hero. */
.rhero .in:first-child{position:static;padding:22px 24px}
.rhero .in .kick{font:600 11px var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--amber-300)}
.rhero .in h2{color:#fff;margin:6px 0 0;font-size:23px}
.rbody{background:#fff;border:1px solid var(--sand-200);border-radius:var(--r);padding:30px 34px;box-shadow:var(--shadow-s)}
/* Mobil schmalere Innenabstände: 34px waren im 375px-Screen zu großzügig (ließen nur ~273px
   Lesebreite). 16px geben allen Reader-Inhalten spürbar mehr Platz — Fließtext bricht schöner,
   dichte Tabellen scrollen intern nur noch minimal statt merklich. */
@media(max-width:700px){.rbody{padding:22px 16px}}
.rbody p{color:#3d4c52}
/* Tool-Sammlung: kleine Kopfzeile „Rechner aus Modul X" mit Sprung ins Kapitel */
.toolview-mod{margin:0 0 6px;font-size:13px;color:var(--ink-500)}
.toolview-mod a{color:var(--amber-700);font-weight:600;text-decoration:none}
.toolview-mod a:hover{text-decoration:underline}
/* Normen-Volltextsuche */
.normsuche{position:relative;margin:0 0 14px}
.normsuche-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink-300);pointer-events:none}
.normsuche input{width:100%;font:15px var(--f-body);color:var(--ink-900);padding:13px 42px 13px 44px;border:1px solid var(--sand-200);border-radius:12px;background:#fff;box-shadow:var(--shadow-s);outline:none}
.normsuche input:focus{border-color:var(--amber-500);box-shadow:0 0 0 3px rgba(245,166,35,.16)}
.normsuche input::-webkit-search-decoration,.normsuche input::-webkit-search-cancel-button{display:none}
.normsuche-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;font-size:16px;color:var(--ink-300);cursor:pointer;padding:8px 10px;line-height:1}
.normsuche-x:hover{color:var(--ink-500)}
.ntreffer-kopf{font-size:13px;color:var(--ink-500);margin:2px 0 12px}
.ntreffer-leer{background:#fff;border:1px solid var(--sand-200);border-radius:14px;padding:24px 22px;color:var(--ink-500);text-align:center;line-height:1.55}
.ntreffer{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--sand-200);border-radius:14px;padding:14px 16px;margin:0 0 10px;cursor:pointer;box-shadow:var(--shadow-s);font-family:inherit}
.ntreffer:hover{border-color:var(--amber-500);box-shadow:0 3px 12px rgba(20,40,45,.09)}
.nt-kopf{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}
.nt-badge{font-size:10.5px;font-weight:700;letter-spacing:.03em;border-radius:20px;padding:2px 9px;white-space:nowrap}
.nt-badge.muss{background:#FBE3EC;color:#b02a5b}.nt-badge.soll{background:#E4F5EC;color:#0c7a4f}
.nt-rub{font-size:12px;color:var(--ink-500);font-weight:600}
.nt-titel{font:600 15.5px var(--f-head);color:var(--petrol-700);line-height:1.32}
.nt-text{font-size:13.5px;color:var(--ink-500);line-height:1.5;margin-top:4px}
.nt-norm{font-size:12px;color:var(--amber-700);margin-top:6px;font-weight:600}
.ntreffer mark{background:#FCE9BE;color:inherit;border-radius:3px;padding:0 2px}
.nt-flash{animation:ntflash 2.2s ease}
@keyframes ntflash{0%,20%{background:#FCE9BE;box-shadow:0 0 0 3px rgba(245,166,35,.45);border-radius:10px}100%{background:transparent;box-shadow:none}}
/* Glossar */
.glossar-link{display:inline-block;margin:-4px 0 14px;background:var(--cream-100);border:1px solid var(--sand-200);color:var(--petrol-700);font:600 13px var(--f-body);padding:8px 15px;border-radius:20px;cursor:pointer}
.glossar-link:hover{border-color:var(--amber-500);background:#fff}
.gsektion{font:700 12.5px var(--f-head);letter-spacing:.03em;color:var(--ink-500);text-transform:uppercase;margin:4px 0 10px}
.gletter{font:600 21px var(--f-head);color:var(--amber-700);margin:22px 0 10px;border-bottom:2px solid var(--sand-200);padding-bottom:4px}
.gcard{background:#fff;border:1px solid var(--sand-200);border-left:3px solid var(--amber-500);border-radius:14px;padding:14px 16px;margin:0 0 10px;box-shadow:var(--shadow-s)}
.gc-kopf{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px}
.gc-badge{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:#FCE9BE;color:#8a5a00;border-radius:20px;padding:2px 9px}
.gc-kopf b{font:600 16.5px var(--f-head);color:var(--petrol-700)}
.gc-norm{font-size:12px;color:var(--amber-700);font-weight:600}
.gc-def{font-size:14.5px;color:var(--ink-900);line-height:1.55}
.gc-def mark,.gc-kopf mark{background:#FCE9BE;border-radius:3px;padding:0 2px}
.gc-fuss{font-size:12.5px;color:var(--ink-500);margin-top:8px}
/* Upsell-Karte für gesperrte Kapitel (Track-Gating): ehrlich, ohne Restposten-Optik. */
.upsell{text-align:center;padding:34px 22px;background:var(--cream-050);border:1px dashed var(--sand-200);border-radius:var(--r);margin:2px 0 4px}
.upsell-ic{font-size:34px;line-height:1}
.upsell h3{margin:12px 0 6px;color:var(--petrol-900);font:600 18px var(--f-head)}
.upsell p{color:var(--ink-500);max-width:44ch;margin:0 auto 18px}
.upsell-cta[aria-disabled="true"]{opacity:.55;pointer-events:none}
.merk{border-radius:12px;background:var(--green-050);border-left:4px solid var(--green-500);padding:13px 17px;margin:18px 0;font-size:14.5px}
.merk b{color:#12866a}
.bignum{display:flex;align-items:baseline;gap:10px;margin:20px 0 4px}
.bignum b{font:700 44px var(--f-head);color:var(--petrol-700)}
.bignum span{color:var(--ink-500);font-size:13.5px}
.dfy{font-size:13px;color:var(--amber-700);background:#FCF3E1;border-radius:9px;padding:8px 13px;display:inline-block;margin:8px 0 16px}
details.prof{border:1.5px solid var(--sand-200);border-radius:12px;padding:0 16px;margin:16px 0}
details.prof summary{cursor:pointer;font:600 13.5px var(--f-head);color:var(--petrol-500);padding:13px 0;list-style:none;display:flex;justify-content:space-between}
details.prof summary::after{content:"▸ aufklappen";font:600 11.5px var(--f-body);color:var(--amber-700)}
details.prof[open] summary::after{content:"▾ zuklappen"}
details.prof .in{font-size:13.5px;color:var(--ink-500);padding-bottom:14px}
.rnav{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;flex-wrap:wrap}
/* Blätter-Leiste am Kapitelende: Desktop volle Beschriftung („← Modul 1"), mobil EINE feste Zeile
   ← / Gelesen ✓ / → — vorher brachen die drei langen Texte auf 375px ungünstig um (Axels Fund).
   Beide Textfassungen stehen im Markup (.lang/.wort vs. .kurz/.pfeil), hier wird nur geblendet. */
.rnav .kurz{display:none}
@media(max-width:700px){
  .rnav{flex-wrap:nowrap;gap:8px}
  .rnav .wort,.rnav .lang{display:none}
  .rnav .kurz{display:inline}
  .rnav .rnav-blaettern{flex:0 0 auto;padding:12px 17px;font-size:16px}  /* Tippfläche ≥44px */
  .rnav #markdone{flex:1;min-width:0;padding:12px 8px;white-space:nowrap}
}
.placeholder{border:1.5px dashed var(--sand-200);border-radius:12px;padding:22px;text-align:center;color:var(--ink-500);font-size:14px;margin:14px 0}

/* ---- Kapitel-Elemente aus 06-Ratgeber-Inhalte.html (via scripts/build-modules.js) ----
   Gleiche Bausteine wie im Arbeitsdokument, hier in Golden-Hour-Tokens statt der Arbeitsfarben. */
.rbody .lead{color:var(--ink-500);font-style:italic;font-size:14px;margin:2px 0 14px}
.rbody h4{font-size:16px;margin:24px 0 6px;color:var(--petrol-700)}
.rbody table{border-collapse:collapse;width:100%;font-size:13.5px;margin:14px 0;display:block;overflow-x:auto}
.rbody th,.rbody td{border:1px solid var(--sand-200);padding:7px 10px;text-align:left;vertical-align:top}
.rbody th{background:var(--cream-100);font-weight:600;color:var(--petrol-700)} /* Kopfzeilen dürfen umbrechen — nowrap zwang die PV+Wärme-Tabelle ins interne Scrollen */
.rbody .calc{background:var(--cream-100);border:1px solid var(--sand-200);border-radius:10px;
  padding:12px 16px;margin:14px 0;font:13.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.rbody .note,.rbody .warn,.rbody .law,.rbody .muss,.rbody .soll{border-radius:0 8px 8px 0;padding:11px 15px;margin:14px 0;font-size:14px}
/* Zielgruppen-Hinweis (Axel 25.08.2026): Funde, die auf Gewerbe- oder Grossanlagen zielen, bleiben
   im Bestand, sind aber zugeklappt und tragen eine Einordnungszeile. Der Titel bleibt sichtbar —
   der Leser soll sehen, WAS dort steht, und selbst entscheiden, ob es ihn angeht. */
.rbody details.zielgruppe>summary{cursor:pointer;list-style:none;display:block}
.rbody details.zielgruppe>summary::-webkit-details-marker{display:none}
.rbody details.zielgruppe>summary .ftitel{display:inline;margin:0}
.rbody details.zielgruppe>summary::after{content:'  ▸ aufklappen';font-size:12px;color:var(--ink-500);white-space:nowrap}
.rbody details.zielgruppe[open]>summary::after{content:'  ▾ zuklappen'}
.rbody .zg-hinweis{display:block;font-size:12.5px;color:var(--ink-500);font-style:italic;margin:3px 0 0}
.rbody .muss.zg,.rbody .soll.zg{opacity:.82}
.rbody details.zielgruppe[open]{opacity:1}
.rbody .note{border-left:4px solid var(--petrol-500);background:var(--cream-100)}
.rbody .warn{border-left:4px solid var(--amber-500);background:#FCF3E1}
.rbody .law{border-left:4px solid #7a5d1d;background:#fbf6e9}
.rbody .muss{border-left:4px solid var(--danger);background:var(--danger-soft)}
.rbody .soll{border-left:4px solid var(--green-500);background:var(--green-050)}
.rbody .muss>b:first-child,.rbody .soll>b:first-child{display:block;margin-bottom:4px;font-size:13px}
.rbody .muss>b:first-child{color:var(--danger)}
.rbody .soll>b:first-child{color:#12866a}
.rbody .beispiel{background:var(--cream-050);border:1.5px solid var(--sand-200);border-radius:12px;padding:14px 18px;margin:14px 0}
.rbody .aufgabe{border:1.5px solid var(--amber-500);border-radius:10px;background:#FFF8EC;padding:13px 17px;margin:18px 0;font-size:14px}
.rbody .aufgabe b{color:var(--amber-700)}
.rbody .check{list-style:none;padding-left:0;margin:8px 0}
.rbody .check li{padding-left:26px;position:relative;margin:5px 0;font-size:14px}
.rbody .check li::before{content:"☐";position:absolute;left:0;color:var(--amber-500);font-size:16px}
.rbody .stand{font-size:12px;color:var(--ink-300)}
.rbody img{max-width:100%}   /* kein Bild darf die Spalte aufdrücken — gleiche Falle wie die Tabellen */
.rbody figure.mimg{margin:18px 0;border-radius:12px;overflow:hidden}
.rbody figure.mimg img{width:100%;max-height:300px;object-fit:cover}
.rbody figure.mimg figcaption{font-size:12px;color:var(--ink-500);padding:7px 4px 0;font-style:italic}
/* Quellenverweis: Nummer bleibt, Quelle steht im title-Tooltip (Anker gibt es im Reader nicht) */
.rbody sup.q{font-size:9.5px;font-weight:700;color:var(--petrol-500);background:var(--cream-100);
  border-radius:4px;padding:1px 4px;margin-left:2px;cursor:help}
/* Quellen-Sektion am Kapitelende (seit 27.07. aus dem Generator, mit echten Links) — dezent,
   wie im Export: die Glaubwürdigkeit gehört ins Bild, ohne das Kapitel zu dominieren. */
.rbody .quellen{margin-top:30px;padding-top:14px;border-top:1px solid var(--sand-200)}
.rbody .quellen h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-300);margin:0 0 6px}
.rbody .quellen ol{font-size:12.5px;color:var(--ink-500);margin:0;padding-left:22px}
.rbody .quellen li{margin:3px 0}
.rbody .quellen a{color:var(--petrol-500);text-decoration:none}
.rbody .quellen a:hover{color:var(--amber-700);text-decoration:underline}

/* ---- Rechentools (Konzept: Produkt/20) ---- */
.tool{background:var(--cream-050);border:1.5px solid var(--sand-200);border-left:4px solid var(--amber-500);
  border-radius:14px;padding:20px 22px;margin:24px 0}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tool-head h4{font-size:16px;margin:0}
.tool-stand{font:600 11px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-300);white-space:nowrap}
.tool-intro{font-size:13.5px;color:var(--ink-500);margin:6px 0 16px}
/* minmax(0,1fr) statt 1fr: sonst zwingt das number-Eingabefeld seine Wunschbreite durch
   und der Feld-Wrapper ragt aus der Rechner-Karte (mobil sichtbar). input{min-width:0} greift nur so. */
.tool-felder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}
@media(max-width:640px){.tool-felder{grid-template-columns:minmax(0,1fr)}}
.tool-feld{display:flex;flex-direction:column;gap:5px}
.tool-feld .l{font:600 12.5px var(--f-body);color:var(--petrol-700)}
.tool-feld .i{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--sand-200);
  border-radius:10px;padding:0 12px;transition:.15s}
.tool-feld .i:focus-within{border-color:var(--amber-500);box-shadow:0 0 0 4px rgba(245,166,35,.15)}
.tool-feld input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:15px var(--f-body);
  color:var(--ink-900);padding:11px 0}
.tool-feld select.tool-select{flex:1;min-width:0;border:none;outline:none;background:transparent;font:15px var(--f-body);
  color:var(--ink-900);padding:11px 18px 11px 0;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--petrol-500) 50%),linear-gradient(135deg,var(--petrol-500) 50%,transparent 50%);
  background-position:right 4px center,right 0 center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.tool-feld em{font:600 12px var(--f-body);color:var(--ink-300);font-style:normal;white-space:nowrap}
.tool-feld .h{font-size:11.5px;color:var(--ink-300)}
.tool-out{margin-top:18px}
.tool-warte{border:1.5px dashed var(--sand-200);border-radius:10px;padding:16px;text-align:center;
  color:var(--ink-300);font-size:13px}
.tool-gross{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:4px}
.tool-gross b{font:700 38px var(--f-head);color:var(--petrol-700);line-height:1.1}
.tool-gross span{color:var(--ink-500);font-size:13px}
.tool-kennzahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 4px}
@media(max-width:640px){.tool-kennzahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Mobil: Rechner-Karte etwas kompakter, damit die Felder mehr Breite haben */
@media(max-width:600px){.tool{padding:16px 15px}.tool-felder{gap:11px}}
.tool-kennzahlen div{background:#fff;border:1px solid var(--sand-200);border-radius:10px;padding:11px 13px}
.tool-kennzahlen b{display:block;font:700 17px var(--f-head);color:var(--petrol-700)}
.tool-kennzahlen span{font-size:11.5px;color:var(--ink-500)}
/* Annahmenblatt: der eine Ort, an dem die tragenden Konstanten mit Stand-Datum zusammenstehen.
   Vier Leser hatten bemängelt, dass sie verstreut sind (Personas-Runde 3). */
.tool-annahmen{width:100%;border-collapse:collapse;font-size:13.5px;margin:4px 0 6px}
.tool-annahmen th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-500);border-bottom:1px solid var(--cream-300);padding:0 10px 6px 0;font-weight:600}
.tool-annahmen td{padding:8px 10px 8px 0;border-bottom:1px solid var(--cream-200);vertical-align:top}
.tool-annahmen td.an-wert{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--petrol-900);font-weight:600}
.tool-annahmen td.an-quelle{color:var(--ink-500);font-size:12.5px}
@media(max-width:560px){
  /* Auf dem Telefon bricht die dritte Spalte unter den Wert — sonst quetscht die Herkunft die Zahl. */
  .tool-annahmen,.tool-annahmen tr,.tool-annahmen td{display:block;width:100%}
  .tool-annahmen th{display:none}
  .tool-annahmen tr{border-bottom:1px solid var(--cream-200);padding:8px 0}
  .tool-annahmen td{border:0;padding:1px 0}
}
.tool-hinweis{border-radius:10px;padding:11px 14px;font-size:13px;margin-top:10px}
.tool-hinweis.info{background:var(--cream-100);color:#3d4c52;border-left:3px solid var(--petrol-500)}
.tool-hinweis.ok{background:var(--green-050);color:#12866a;border-left:3px solid var(--green-500)}
.tool-hinweis.warn{background:var(--danger-soft);color:var(--danger);border-left:3px solid var(--danger)}
.tool-disc{font-size:11.5px;color:var(--ink-300);margin:14px 0 0;line-height:1.5}

/* ---- Technik-Bereich: Quellen-Nennung inline + Dashboard-Feedback-Kachel ---- */
/* tq DARF umbrechen: nowrap zwang in den Kennzahlen-Tabellen die Quellen-Spalte auf ihre
   volle Breite und quetschte die Wert-Spalte (Auto-Layout). Umbrechbar = Quelle schrumpft,
   Wert bekommt den Platz — und mobil kein Zeilen-Überlauf. */
.tq{font-size:11.5px;color:var(--ink-300)}
.tq a{color:var(--ink-300);text-decoration:none;margin-left:2px}
.tq a:hover{color:var(--petrol-500)}
.feedback-kachel{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px 20px;
  cursor:pointer;text-decoration:none;color:inherit}
.feedback-kachel .fk-ic{font-size:22px}
.feedback-kachel span b{display:block;font-size:15px}
.feedback-kachel span small{color:var(--ink-500);font-size:12.5px}
.feedback-kachel .fk-pfeil{margin-left:auto;color:var(--petrol-500);font-weight:700}

/* ---- Vorlagen (ausfüllbare Arbeitsblätter — Steckbrief, 90-Tage-Plan) ---- */
.vorlage-plan-wrap{overflow-x:auto}
.vorlage-plan{width:100%;border-collapse:collapse;font-size:13.5px}
.vorlage-plan th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-300);padding:6px 8px;border-bottom:1.5px solid var(--sand-200)}
.vorlage-plan td{padding:6px 8px;border-bottom:1px solid var(--sand-200);vertical-align:middle}
.vorlage-plan .vp-phase{white-space:nowrap;font-weight:600;color:var(--petrol-500);font-size:12.5px}
.vorlage-plan input[type="text"],.vorlage-plan input[type="date"],.vorlage-plan input[type="number"]{
  width:100%;min-width:0;border:none;outline:none;background:transparent;font:13.5px var(--f-body);
  color:var(--ink-900);border-bottom:1px dashed var(--sand-200);padding:4px 2px}
.vorlage-plan input:focus{border-bottom-color:var(--petrol-500)}
.vorlage-plan input[type="number"]{max-width:76px}
.vorlage-plan input[type="checkbox"]{width:17px;height:17px;accent-color:var(--green-500)}
.vorlage-plan .vp-summe td{font-weight:700;border-bottom:none;padding-top:10px}
.vorlage-plan .vp-summe .vp-summe-wert{color:var(--petrol-500)}

/* ---- Eigenverbrauchs-Schnellcheck (interaktive Checkliste, Modul 1) ---- */
.vorlage-check .check-teil{margin-top:16px}
.vorlage-check .check-teil-kopf{display:flex;gap:11px;align-items:flex-start;margin:0 0 6px}
.vorlage-check .check-teil-nr{flex:0 0 auto;width:23px;height:23px;border-radius:7px;background:var(--petrol-700);
  color:#fff;font:700 12px var(--f-head);display:flex;align-items:center;justify-content:center;margin-top:1px}
.vorlage-check .check-teil-kopf b{font:600 14.5px var(--f-head);color:var(--petrol-700);display:block}
.vorlage-check .check-teil-kopf small{display:block;font-size:12px;color:var(--ink-300);margin-top:1px}
.vorlage-check .check-item{display:flex;gap:11px;align-items:flex-start;padding:9px 11px;margin:5px 0 0 34px;
  border:1px solid var(--sand-200);border-radius:10px;background:#fff;cursor:pointer;transition:.12s}
.vorlage-check .check-item:hover{border-color:var(--petrol-500);background:var(--cream-050)}
.vorlage-check .check-item input{flex:0 0 auto;width:18px;height:18px;margin-top:1px;accent-color:var(--green-500);cursor:pointer}
.vorlage-check .check-item:has(input:checked){border-color:var(--green-500);background:var(--green-050)}
.vorlage-check .check-txt{font-size:13.5px;line-height:1.5;color:var(--ink-900)}
.vorlage-check .check-txt small{display:block;font-size:12px;color:var(--ink-500);margin-top:3px;line-height:1.45}
.vorlage-check .check-item:has(input:checked) .check-txt{color:var(--ink-500)}
@media(max-width:600px){.vorlage-check .check-item{margin-left:0}}
.vorlage-check .check-auswertung{margin-top:18px;border-radius:12px;padding:0}
.vorlage-check .check-auswertung.an{padding:15px 17px;border:1.5px solid var(--sand-200);background:var(--cream-050)}
.vorlage-check .check-auswertung.los{border-color:var(--amber-500)}
.vorlage-check .check-auswertung.mitte{border-color:var(--amber-500)}
.vorlage-check .check-auswertung.top{border-color:var(--green-500);background:var(--green-050)}
.vorlage-check .check-score{display:flex;align-items:baseline;gap:9px;margin-bottom:7px}
.vorlage-check .check-score b{font:700 30px/1 var(--f-head);color:var(--petrol-700)}
.vorlage-check .check-auswertung.top .check-score b{color:var(--green-500)}
.vorlage-check .check-score span{font-size:13px;color:var(--ink-500)}
.vorlage-check .check-band{font-size:13.5px;line-height:1.55;color:var(--ink-900)}

/* ---- Anlagen-Stammdatenblatt (Multi-Flächen + Ertragsprognose) ---- */
.vorlage-stamm .stamm-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--sand-200)}
.vorlage-stamm .stamm-block:first-of-type{border-top:none;padding-top:0}
.vorlage-stamm .stamm-sub{font:600 14px var(--f-head);color:var(--petrol-700);margin:0 0 10px}
.vorlage-stamm .stamm-sub small{font:400 12px var(--f-body);color:var(--ink-300);margin-left:6px}
.vorlage-stamm .stamm-flaeche{border:1px solid var(--sand-200);border-radius:12px;padding:11px 13px;margin:0 0 10px;background:var(--cream-050)}
.vorlage-stamm .stamm-name{width:100%;border:none;background:transparent;font:600 14px var(--f-body);color:var(--petrol-700);outline:none;margin-bottom:8px;border-bottom:1px dashed var(--sand-200);padding:2px 0}
.vorlage-stamm .stamm-flaeche-werte{display:grid;grid-template-columns:1fr 1.2fr 1fr auto;gap:9px;align-items:end}
@media(max-width:600px){.vorlage-stamm .stamm-flaeche-werte{grid-template-columns:1fr 1fr;gap:8px}}
.vorlage-stamm .stamm-flaeche-werte label{display:flex;flex-direction:column;gap:4px}
.vorlage-stamm .stamm-flaeche-werte label>span:first-child{font:600 11.5px var(--f-body);color:var(--ink-500)}
.vorlage-stamm .stamm-flaeche-werte .i{display:flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--sand-200);border-radius:9px;padding:0 9px}
.vorlage-stamm .stamm-flaeche-werte .i:focus-within{border-color:var(--amber-500);box-shadow:0 0 0 4px rgba(245,166,35,.15)}
.vorlage-stamm .stamm-flaeche-werte input,.vorlage-stamm .stamm-flaeche-werte select{flex:1;min-width:0;border:none;outline:none;background:transparent;font:15px var(--f-body);color:var(--ink-900);padding:9px 0}
.vorlage-stamm .stamm-flaeche-werte em{font:600 12px var(--f-body);color:var(--ink-300);font-style:normal}
.vorlage-stamm .stamm-weg{align-self:center;justify-self:center;width:30px;height:30px;border:none;border-radius:8px;background:#fff;color:var(--danger);font-size:14px;cursor:pointer;border:1px solid var(--sand-200)}
.vorlage-stamm .stamm-weg:hover{background:var(--danger-soft)}
.vorlage-stamm .stamm-add{font-size:13px;padding:8px 14px}
.vorlage-stamm .stamm-prognose{margin-top:16px}
.vorlage-stamm .stamm-prognose.an{border:1.5px solid var(--green-500);background:var(--green-050);border-radius:12px;padding:16px 18px}
.vorlage-stamm .stamm-gross{text-align:center;margin-bottom:12px}
.vorlage-stamm .stamm-gross b{display:block;font:700 30px/1.1 var(--f-head);color:var(--green-500)}
.vorlage-stamm .stamm-gross span{display:block;margin-top:4px;font-size:13px;color:var(--ink-500)}
.vorlage-stamm .stamm-kz,.vorlage-stamm .stamm-flaechen-erg{list-style:none;padding:0;margin:0}
.vorlage-stamm .stamm-kz li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(31,181,143,.2);font-size:14px}
.vorlage-stamm .stamm-kz li span{color:var(--ink-500)}
.vorlage-stamm .stamm-flaechen-erg{margin-top:10px;border-top:1px dashed rgba(31,181,143,.35);padding-top:8px}
.vorlage-stamm .stamm-flaechen-erg li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:13px;color:var(--ink-500)}
.vorlage-stamm .stamm-flaechen-erg li b{color:var(--petrol-700)}
.vorlage-stamm .stamm-hinweis{font-size:12px;color:var(--ink-500);margin:10px 0 0;line-height:1.5}

/* ---- Feed ---- */
.feedhead h1{font-size:26px;margin:0}
.feedhead p{color:var(--ink-500);font-size:13.5px;margin:4px 0 0}
.chips{display:flex;gap:8px;margin:16px 0 22px;flex-wrap:wrap}
.chip{cursor:pointer;font:600 12.5px var(--f-body);border:1.5px solid var(--sand-200);background:#fff;color:var(--ink-500);padding:7px 15px;border-radius:20px}
.chip.on{background:var(--petrol-700);border-color:var(--petrol-700);color:#fff}
.fitem{background:#fff;border:1px solid var(--sand-200);border-radius:var(--r);padding:19px 22px;box-shadow:var(--shadow-s);margin-bottom:14px}
.fitem .top{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.fitem .date{font:600 11.5px var(--f-head);color:var(--ink-300);letter-spacing:.05em}
.fitem h3{font-size:16.5px;margin:0 0 6px}
.fitem p{font-size:13.5px;color:var(--ink-500);margin:0}
.fitem .dfy{margin:10px 0 0}
.fitem .src-link{display:inline-block;margin-top:11px;font:600 12.5px var(--f-body);color:var(--petrol-500);text-decoration:none}
.fitem .src-link:hover{text-decoration:underline}
.pinned{display:flex;gap:16px;align-items:center;background:linear-gradient(120deg,var(--petrol-700),var(--petrol-900));border-radius:var(--r);padding:18px 22px;color:#fff;margin-bottom:20px;box-shadow:var(--shadow)}
.pinned b{font:600 15px var(--f-head);display:block;color:#fff}
.pinned small{color:#b9cdd3;font-size:12.5px}

/* ---- Login ---- */
.login{display:grid;grid-template-columns:1.15fr 1fr;min-height:calc(100vh - 61px)}  /* 61px = Topbar (seit 27.07.) */
@media(max-width:900px){.login{grid-template-columns:1fr}.login .visual{min-height:34vh}}
.login .visual{position:relative;overflow:hidden;background:var(--petrol-900)}
.login .visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.92}
.login .visual .ov{position:absolute;inset:0;background:linear-gradient(200deg,rgba(10,37,48,.05) 30%,rgba(10,37,48,.88) 82%)}
.login .visual .cl{position:absolute;left:44px;bottom:44px;right:44px;color:#fff}
.login .visual .cl .kick{font:600 12px var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--amber-300)}
.login .visual .cl h2{color:#fff;font-size:30px;line-height:1.2;margin:10px 0 8px}
.login .visual .cl p{color:#c9d8dd;font-size:14.5px;max-width:400px;margin:0}
.login .formside{display:flex;align-items:center;justify-content:center;padding:40px 26px}
.login .box{width:100%;max-width:400px}
.login .mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--amber-500),var(--amber-300));display:flex;align-items:center;justify-content:center;font:700 20px var(--f-head);color:var(--petrol-900);margin-bottom:18px}
.login h1{font-size:27px;margin:0 0 6px}
.login .sub{color:var(--ink-500);font-size:14px;margin:0 0 24px}
.field{margin-bottom:14px}
.field label{display:block;font:600 12.5px var(--f-body);color:var(--petrol-700);margin-bottom:6px}
.input{width:100%;font:15px var(--f-body);padding:13px 15px;border:1.5px solid var(--sand-200);border-radius:12px;background:#fff;outline:none;transition:.15s;color:var(--ink-900)}
.input:focus{border-color:var(--amber-500);box-shadow:0 0 0 4px rgba(245,166,35,.15)}
.formerr{display:none;background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.buy{margin-top:22px;padding:15px;border:1.5px dashed var(--sand-200);border-radius:12px;font-size:13px;color:var(--ink-500);text-align:center}
.buy a{color:var(--amber-700);font-weight:700;text-decoration:none}
.foot{text-align:center;color:var(--ink-300);font-size:11.5px;padding:20px;line-height:1.5}
.foot a{color:var(--ink-500)}

/* ---- Rechtsseiten (Impressum/Datenschutz) ---- */
.legal{max-width:780px;margin:0 auto;padding:34px 26px 60px}
.legal .card{padding:34px 38px}
@media(max-width:700px){.legal .card{padding:24px 20px}}
.legal h1{font-size:26px;margin:0 0 4px}
.legal .stand{color:var(--ink-300);font-size:12.5px;margin:0 0 24px}
.legal h2{font-size:17.5px;margin:28px 0 8px}
.legal p,.legal li{font-size:14px;color:#3d4c52}
.legal ul{padding-left:20px}
.legal address{font-style:normal}
.legallinks{margin-top:18px;text-align:center;font-size:12px;color:var(--ink-300)}
.legallinks a{color:var(--ink-500);text-decoration:none}
.legallinks a:hover{color:var(--petrol-700)}
.view{display:none}.view.on{display:block}
.skeleton{color:var(--ink-300);font-size:14px;padding:30px;text-align:center}
/* Kapitelsprung im Fließtext („siehe Modul 12") — sieht aus wie ein Link, ist einer */
.rbody a[data-mod]{color:var(--petrol-500);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rbody a[data-mod]:hover{color:var(--amber-700)}


/* ============================================================
   Normenkatalog — Zusatzklassen (Erweiterung 07/2026)
   Nutzt ausschließlich vorhandene Golden-Hour-Tokens.
   ============================================================ */
.ftitel{display:block;font:600 14.5px var(--f-head);color:var(--ink-900);margin:2px 0 6px}
.fmeta{font-size:12px;color:var(--ink-300);margin-top:9px;line-height:1.5}
.fmeta .norm{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--petrol-500);
  background:var(--cream-100);border-radius:5px;padding:1px 6px}
.fmeta a{color:var(--petrol-500);text-decoration:none;font-weight:600;margin-left:4px}
.fmeta a:hover{color:var(--amber-700)}
.vchip{display:inline-block;font:700 10px var(--f-head);letter-spacing:.05em;text-transform:uppercase;
  border-radius:12px;padding:2px 8px;margin-left:8px;vertical-align:1px}
.vchip.ok{background:var(--green-050);color:#12866a}
.vchip.korr{background:#FCF3E1;color:var(--amber-700)}
.korrbox{border-left:4px solid var(--amber-500);background:#FCF3E1;border-radius:0 8px 8px 0;
  padding:10px 14px;margin:10px 0 0;font-size:13.5px}
.korrbox b{color:var(--amber-700)}
.rubrik-stat{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.rubrik-stat span{background:var(--cream-100);border:1px solid var(--sand-200);border-radius:20px;
  font:600 12px var(--f-body);color:var(--ink-500);padding:6px 14px}
.rubrik-stat span b{color:var(--petrol-700)}
.radar-item a[data-mod]{color:var(--petrol-500);font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
.radar-item a[data-mod]:hover{color:var(--amber-700)}

/* ============================================================
   Tools-Platzhalter + Feedback-Formular (Erweiterung 07/2026)
   ============================================================ */
.tools-hint{display:flex;gap:14px;align-items:flex-start}
.tools-emoji{font-size:30px;line-height:1}
.tools-hint b{color:var(--petrol-700)}
.tools-hint p{margin:4px 0 0;color:var(--ink-500);font-size:14px;line-height:1.55}
.fb-opt{font-weight:400;color:var(--ink-300);font-size:12px}
.fb-rating{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fb-rating button,.fb-choice button{font:600 14px var(--f-body);cursor:pointer;border:1.5px solid var(--sand-200);
  background:#fff;color:var(--petrol-700);border-radius:10px;padding:9px 14px;transition:.12s}
.fb-rating button{width:44px;padding:9px 0}
.fb-rating button:hover,.fb-choice button:hover{border-color:var(--amber-500)}
.fb-rating button.sel,.fb-choice button.sel{background:var(--petrol-700);color:#fff;border-color:var(--petrol-700)}
.fb-rating-hint{font-size:12px;color:var(--ink-300);margin-left:4px}
.fb-choice{display:flex;gap:8px;flex-wrap:wrap}
.fb-checks{display:flex;flex-direction:column;gap:9px}
.fb-checks label{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-900);cursor:pointer;font-weight:400}
.fb-checks input{width:18px;height:18px;accent-color:var(--amber-500)}
textarea.input{resize:vertical;min-height:44px;font-family:var(--f-body)}
.fb-note{font-size:12px;color:var(--ink-300);margin:12px 0 0;line-height:1.5}
.fb-danke{text-align:center;padding:18px 10px}
.fb-danke b{display:block;font-size:18px;margin:8px 0 4px;color:var(--petrol-700)}
.fb-danke p{color:var(--ink-500);font-size:14px;margin:0}