/* ============================================================
   stil.css — gemeinsame Bausteine aller Seiten
   frank-duennebier.de · angelegt 10.08.2026 (NZZ-Fahrplan Stufe 4)

   Enthält, was auf jeder Seite gleich ist. Seitenspezifisches
   Layout bleibt vorerst in der jeweiligen Datei.
   Wird als letztes Stylesheet im <head> geladen.
   ============================================================ */

/* ===== 1. Footer-Rechtsblock =====
   Pflichtangaben nach § 34d GewO. Feste Farbwerte statt Variablen,
   damit der Block auch auf den karte-*.html läuft, die kein :root haben. */
.fdr{display:block!important;background:#1A1A18!important;color:rgba(255,255,255,.62);
padding:46px 6vw 34px;text-align:center!important;
font-family:'DM Sans',sans-serif;font-size:13px;line-height:1.7;border-top:3px solid #F5C000;}
.fdr *{box-sizing:border-box;}
.fdr>div{display:block;width:auto;}
.fdr-name{font-family:'DM Serif Display',serif;font-size:19px;color:#fff;margin-bottom:6px;}
.fdr-name span{color:#F5C000;}
.fdr-rolle{font-size:13px;color:rgba(255,255,255,.78);margin-bottom:4px;}
.fdr-gruppe{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:16px;}
.fdr-kontakt{margin-bottom:6px;}
.fdr-kontakt a{color:rgba(255,255,255,.78);text-decoration:none;}
.fdr-kontakt a:hover{color:#F5C000;}
.fdr-register{font-size:12px;color:rgba(255,255,255,.5);margin-bottom:24px;}
.fdr-register a{color:rgba(255,255,255,.5);text-decoration:underline;}
.fdr-register a:hover{color:#F5C000;}
.fdr-pflicht{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:20px;}
.fdr-pflicht a{font-size:13px;font-weight:600;color:#F5C000;text-decoration:none;padding:8px 17px;
border:1px solid rgba(245,192,0,.45);border-radius:4px;transition:background .2s,color .2s;}
.fdr-pflicht a:hover{background:#F5C000;color:#1A1A18;}
.fdr-weitere{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.fdr-weitere a{font-size:12px;color:rgba(255,255,255,.78);text-decoration:none;}
.fdr-weitere a:hover{color:#F5C000;}
@media(max-width:768px){.fdr{padding:36px 5vw 28px;}.fdr-pflicht a{padding:10px 15px;}}

/* ===== 2. Die beiden <nav> im Footer von der globalen nav-Regel ausnehmen =====
   URSACHE des Nav-Fehlers vom 09.08.2026: nav{position:fixed;top:0;background:#fff;z-index:100}
   ist ein Element-Selektor und griff auch auf die <nav> im Footer-Rechtsblock. Die flogen an
   den Seitenkopf und verdeckten die echte Navigationsleiste.
   MERKE: neue Bausteine nie mit blossem <nav>, <header> oder <footer> bauen, solange eine
   globale Element-Regel dafuer existiert. Immer eigene Klasse plus Klassenselektor. */
.fdr nav,nav.fdr-pflicht,nav.fdr-weitere{
position:static!important;top:auto!important;right:auto!important;bottom:auto!important;
left:auto!important;z-index:auto!important;background:transparent!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
border-bottom:0!important;box-shadow:none!important;padding:0!important;}

/* ===== 3. Globale Navigationsleiste (.global-nav) =====
   Weiße fixed Leiste — Standard ab NZZ-Fahrplan Stufe 4 (11.08.2026).
   Ersetzt die alte dunkle nav:not([class])-Leiste in allen Artikeln.
   Alte Artikel: <nav> durch <nav class="global-nav"> ersetzen,
   body{padding-top} von 60px auf 48px setzen. */
.global-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e5e3dc;
  padding: 9px 6vw; display: flex; justify-content: space-between;
  align-items: center; height: 48px;
}
.global-nav .nav-brand,
.global-nav .brand {
  font-family: 'DM Serif Display', serif; font-size: 16px;
  color: #1A1A18; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(26,26,24,0.35);
}
.global-nav .nav-brand:hover,
.global-nav .brand:hover { text-decoration-color: #F5C000; }
.global-nav .nav-brand span,
.global-nav .brand span { color: #F5C000; }
.global-nav .nav-links { display: flex; gap: 24px; align-items: center; }
.global-nav .nav-links a {
  font-size: 13px; font-weight: 500; color: #1A1A18;
  text-decoration: none; transition: color .2s;
}
.global-nav .nav-links a:hover { color: #F5C000; }
.global-nav .nav-cta {
  background: #1A1A18; color: white; padding: 7px 18px;
  text-decoration: none; font-size: 13px; font-weight: 600;
  transition: background .2s;
}
.global-nav .nav-cta:hover { background: #F5C000; color: #1A1A18; }
@media(max-width: 820px) { .global-nav .nav-links { display: none; } }

/* ===== 3. Termin-Button in der Leiste auf schmalen Bildschirmen =====
   Die feste Leistenhoehe von 48 px vertraegt keinen zweizeiligen Button.
   Seiten mit fester Kontaktleiste am unteren Rand tragen am <body> die Klasse
   "hat-sticky-cta" — dort entfaellt der Button, weil er doppelt stuende. */
@media(max-width:768px){
  .global-nav .nav-cta,nav .nav-cta{display:none;}
}

/* ===== 4. Nachgeruestete Navigationsleisten (fdnav-) =====
   Fuer die vier duennen Seiten: checkliste-anhaenger-download, impressum,
   datenschutz, risiko-check. */
.fdnav-links{display:flex;gap:20px;align-items:center;}
.fdnav-links a{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
color:rgba(255,255,255,.82);text-decoration:none;white-space:nowrap;transition:color .2s;}
.fdnav-links a:hover{color:#F5C000;}
.fdnav-cta{font-family:'DM Sans',sans-serif;background:#F5C000;color:#1A1A18;
padding:7px 18px;text-decoration:none;font-size:13px;font-weight:600;
white-space:nowrap;transition:background .2s,color .2s;}
.fdnav-cta:hover{background:#F5C000;color:#1A1A18;}
@media(max-width:820px){.fdnav-links{display:none;}}
@media(max-width:520px){.fdnav-cta{display:none;}}

/* ===== 5. Hamburger-Button + Mobile-Menü für .global-nav ===== */
.global-nav .hamburger {
  display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:5px; padding:6px; flex-shrink:0;
}
.global-nav .hamburger span {
  display:block; width:22px; height:2px; background:#1A1A18;
  transition:transform .3s, opacity .3s;
}
.global-nav .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.global-nav .hamburger.active span:nth-child(2) { opacity:0; }
.global-nav .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
@media(max-width:768px) { .global-nav .hamburger { display:flex; } }

.global-mobile-menu {
  display:none; position:fixed; top:48px; left:0; right:0; bottom:0;
  background:#fff; z-index:499; overflow-y:auto;
  padding:24px 6vw 80px; flex-direction:column;
}
@media(max-width:768px) { .global-mobile-menu.open { display:flex; } }
.global-mobile-menu a {
  display:block; padding:14px 0; color:#1A1A18;
  text-decoration:none; font-weight:600; font-size:17px;
  border-bottom:1px solid #e8e6df; transition:color .2s;
  font-family:'DM Sans',sans-serif;
}
.global-mobile-menu a:hover { color:#F5C000; }
.global-mobile-menu .gmm-cta {
  margin:20px 0 0; display:block; background:#F5C000; color:#1A1A18;
  text-align:center; padding:14px; font-weight:700; font-size:15px;
  border-bottom:none; border-radius:2px;
}
.global-mobile-menu .gmm-cta:hover { background:#1A1A18; color:#fff; }

/* ===== 6. Scroll-Punkt — position + overflow fix für alle Seiten ===== */
/* top:55px = nav-Unterkante(48px) + halber Punkt-Radius(7px) → Punkt vollständig sichtbar */
/* overflow:visible = 14px-Kreis nicht durch den 2px-Container abschneiden */
.linie-wrapper { top: 55px; overflow: visible; }

/* ===== 7. Passbild neben dem Namenszug in der Leiste ===== */
.nav-ident{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.nav-face-wrap{width:32px;height:32px;flex-shrink:0;border-radius:3px;overflow:hidden;display:block;}
.nav-face{width:275%;height:auto;display:block;margin-left:-87.5%;margin-top:-9px;border-radius:0;}


/* ===== 8. Aktive Nav-Hervorhebung (.nav-aktiv) ===== */
/* Für .global-nav Seiten (karte-*, artikel-*, faq, ueber-frank).             */
/* ratgeber.html hat eigene CSS-Regel, diese hier greift für global-nav.      */
.global-nav .nav-links a.nav-aktiv,
nav .nav-links a.nav-aktiv {
  color: #e6a800;
  border-bottom: 2px solid #F5C000;
  padding-bottom: 2px;
}

/* ===== 9. Mobile-Menü Legal-Links + Trenner (global-mobile-menu) ===== */
.global-mobile-menu .gmm-sep {
  border-top: 1px solid #e8e6df;
  margin: 8px 0;
  pointer-events: none;
}
.global-mobile-menu .gmm-legal {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(26,26,24,.5) !important;
}
.global-mobile-menu .gmm-legal:hover { color: #F5C000 !important; }

/* ===== 10. Altes Artikel-Header-Banner verstecken (.site-header) ===== */
/* KW33-Artikel kam aus altem Template mit eigenem dark-Header.            */
/* global-nav ist bereits vorhanden → site-header komplett ausblenden.    */
.site-header { display: none !important; }

/* ============================================================
   ARTIKEL-GRUNDGERÜST — Stufe 4 Fortsetzung (14.08.2026)
   Zielschema: KW33/34-Muster (article-content/container/case-box usw.).
   WICHTIG: stil.css lädt site-weit auf ALLEN Seiten (auch datenschutz.html,
   impressum.html, karte-*.html, glossar.html, check.html, hagel.html ...).
   Mehrere dieser Klassennamen (.disclaimer, .info-box, .cta-block, .back-link)
   werden dort bereits mit eigenem, abweichendem Styling verwendet. Deshalb
   ALLE artikelspezifischen Regeln zwingend mit "main.container" scopen —
   sonst überschreibt stil.css (lädt zuletzt) fremde Seiten. Gefunden und
   korrigiert 14.08.2026 vor dem ersten Rollout.
   ============================================================ */

/* ===== 11. Farbvariablen (global, unkritisch — Werte stimmen sitodenweit überein) ===== */
:root {
  --gelb:     #F5C000;
  --schwarz:  #1A1A18;
  --weiss:    #fff;
  --grau:     #6b7280;
  --hellgrau: #f5f5f3;
}

/* ===== 12. Artikel-Basis (gescopt auf main.container) ===== */
main.container, main.container *, main.container *::before, main.container *::after {
  box-sizing: border-box;
}
body.artikel-seite { font-family: 'Segoe UI', Arial, sans-serif; color: #1A1A18; background: #fff; line-height: 1.75; font-size: 17px; padding-top: 48px; }
main.container a { color: #1A1A18; }
main.container a:hover { color: #F5C000; }
main.container { max-width: 780px; margin: 0 auto; padding: 0 20px; }

/* ===== 13. Breadcrumb ===== */
main.container .breadcrumb { padding: 14px 0 0; font-size: 0.84rem; color: #888; }
main.container .breadcrumb a { color: #888; text-decoration: none; }
main.container .breadcrumb a:hover { color: #F5C000; }
main.container .breadcrumb .sep { margin: 0 6px; }

/* ===== 14. Artikel-Kopf ===== */
main.container .article-label { display: inline-block; background: #F5C000; color: #1A1A18; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.6px; margin: 24px 0 16px; }
main.container h1 { font-size: 1.95rem; font-weight: 700; line-height: 1.25; margin-bottom: 18px; }
main.container .article-intro { font-size: 1.08rem; color: #3a3a38; margin-bottom: 20px; border-left: 4px solid #F5C000; padding-left: 18px; line-height: 1.65; }
main.container .article-meta { font-size: 0.84rem; color: #999; margin-bottom: 28px; }

/* ===== 15. Hero-Bild ===== */
main.container .article-hero { margin-bottom: 28px; }
main.container .article-hero img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* ===== 16. Audio-Box ===== */
main.container .audio-box { background: #f5f5f3; border-left: 4px solid #1A1A18; border-radius: 0 8px 8px 0; padding: 16px 20px; margin-bottom: 36px; }
main.container .audio-box strong { display: block; font-size: 0.92rem; margin-bottom: 8px; }
main.container .audio-box audio { width: 100%; }

/* ===== 17. Artikel-Fließtext ===== */
main.container .article-content h2 { font-size: 1.42rem; font-weight: 700; margin: 44px 0 14px; color: #1A1A18; }
main.container .article-content h3 { font-size: 1.12rem; font-weight: 700; margin: 28px 0 10px; color: #1A1A18; }
main.container .article-content p { margin-bottom: 18px; }
main.container .article-content ul, main.container .article-content ol { margin: 0 0 18px 26px; }
main.container .article-content li { margin-bottom: 9px; }
main.container .article-content strong { font-weight: 700; }
main.container .article-content a { font-weight: 700; text-decoration: underline; color: #1A1A18; }
main.container .article-content a:hover { color: #c49b00; }
main.container .article-content em { font-style: italic; }

/* ===== 18. Checkliste (optional, nicht in jedem Artikel) ===== */
main.container .checklist { list-style: none; margin: 0 0 20px 0 !important; padding: 0; }
main.container .checklist li { padding-left: 28px; position: relative; margin-bottom: 10px; }
main.container .checklist li::before { content: "✓"; position: absolute; left: 0; color: #F5C000; font-weight: 700; font-size: 1.1rem; }

/* ===== 19. Case-Box ===== */
main.container .case-box { background: #1A1A18; color: #fff; border-radius: 10px; padding: 28px 30px; margin: 32px 0; }
main.container .case-box h3 { color: #F5C000; margin: 0 0 16px; font-size: 1.05rem; }
main.container .case-box ul { color: #ddd; margin-left: 20px; }
main.container .case-box li { margin-bottom: 8px; }

/* ===== 20. Highlight-Box ===== */
main.container .highlight-box { background: #F5C000; border-radius: 10px; padding: 24px 28px; margin: 32px 0; }
main.container .highlight-box h3 { margin: 0 0 14px; font-size: 1.05rem; }
main.container .highlight-box ul { margin-left: 20px; }
main.container .highlight-box li { margin-bottom: 9px; }

/* ===== 21. Info-Box (gescopt — .info-box existiert eigenständig auch auf datenschutz.html/impressum.html) ===== */
main.container .info-box { background: #f5f5f3; border-left: 4px solid #1A1A18; border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 26px 0; }
main.container .info-box strong { display: block; margin-bottom: 10px; font-size: 0.95rem; }
main.container .info-box ul { margin-left: 20px; }
main.container .info-box li { margin-bottom: 7px; }

/* ===== 22. Warning-Box ===== */
main.container .warning-box { background: #fff8e1; border: 2px solid #F5C000; border-radius: 8px; padding: 18px 22px; margin: 28px 0; }
main.container .warning-box strong { display: block; margin-bottom: 8px; }
main.container .warning-box p { margin: 0; }

/* ===== 23. CTA-Block (gescopt — .cta-block-Name wird nicht anderswo verwendet, main.container-Scope trotzdem zur Konsistenz) ===== */
main.container .cta-block { background: #1A1A18; color: #fff; border-radius: 10px; padding: 36px 30px; margin: 44px 0; text-align: center; }
main.container .cta-block h2 { color: #F5C000; margin: 0 0 12px; font-size: 1.35rem; }
main.container .cta-block h3 { color: #F5C000; margin: 0 0 12px; font-size: 1.35rem; }
main.container .cta-block p { color: #ccc; margin-bottom: 24px; font-size: 1rem; }
main.container .cta-block .cta-btn { display: inline-block; background: #F5C000; color: #1A1A18; font-weight: 700; padding: 14px 34px; border-radius: 6px; text-decoration: none; font-size: 1.05rem; }
main.container .cta-block .cta-btn:hover { background: #e6b400; color: #1A1A18; }

/* ===== 24. Disclaimer (gescopt — .disclaimer existiert eigenständig auf 9 weiteren Seiten: check, glossar, haftpflicht, hagel, karte-*, landwirtschaft) ===== */
main.container .disclaimer { background: #f9f9f7; border: 1px solid #ddd; border-radius: 6px; padding: 18px 22px; margin: 40px 0; font-size: 0.87rem; color: #666; }
main.container .disclaimer p { margin-bottom: 10px; }
main.container .disclaimer p:last-child { margin-bottom: 0; }

/* ===== 25. Autor-Box (Artikel-Fußzeile) ===== */
main.container .autor-box { display: flex; align-items: center; gap: 18px; background: #fff; border: 2px solid #F5C000; border-radius: 10px; padding: 18px 22px; margin: 28px 0; }
main.container .autor-box .autor-foto { width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; border:2px solid #F5C000; }
main.container .autor-box .autor-name { font-weight: 700; font-size: 1.05rem; }
main.container .autor-box .autor-titel { font-size: 0.9rem; color: #555; }
main.container .autor-box .autor-cv { font-size: 0.84rem; color: #888; margin-top: 4px; }
main.container .autor-box .autor-datum { font-size: 0.8rem; color: #aaa; margin-top: 4px; }

/* ===== 26. Zurück-Link (gescopt — .back-link existiert eigenständig auf checkliste-anhaenger-download.html, merkblatt-unfall-fristen-download.html) ===== */
main.container .back-link { display: inline-block; margin-top: 20px; font-size: 0.92rem; text-decoration: none; font-weight: 700; color: #1A1A18; }
main.container .back-link:hover { color: #F5C000; }

/* ===== 27. Mobile-Anpassungen Artikel ===== */
@media (max-width: 620px) {
  main.container h1 { font-size: 1.5rem; }
  main.container .cta-block { padding: 24px 18px; }
  main.container .autor-box { flex-direction: column; align-items: flex-start; }
  main.container .case-box { padding: 22px 20px; }
}

/* HINWEIS: Scroll-Punkt-Basisdefinition (.linie-wrapper/.scroll-punkt Farbe,
   Radius, Transition) bleibt bewusst vorerst lokal in jeder Artikel-Datei.
   Diese Klassen laufen sitodenweit auf 18 weiteren Nicht-Artikel-Seiten mit
   eigenen lokalen Werten — eine globale Basisdefinition hier würde ungefragt
   auch dort eingreifen (außerhalb des Scopes dieser Session). Nur der bereits
   bestehende Positionsfix (Abschnitt 6, .linie-wrapper{top:55px}) bleibt global,
   das war schon vor dieser Session so. */
