/*
Theme Name: FRAUEN ÄRZTINNEN KONSTANZ — Ratgeber
Theme URI: https://frauenaerztinnen-konstanz.de/
Author: FRAUEN ÄRZTINNEN KONSTANZ
Author URI: https://frauenaerztinnen-konstanz.de/
Description: Ratgeber-Theme. Header & Footer 1:1 aus der Hauptseite (main-site.css). Diese Datei enthält nur Ratgeber-spezifische Komponenten obendrauf.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietär — interne Nutzung
Text Domain: fak-ratgeber
*/

/* =============================================================
   Diese Datei enthält ausschließlich Ratgeber-spezifische
   Komponenten (Post-Cards, Single-Article, Suche, Static-Index-
   Results, YouTube-Shorts-Lightbox). Alles andere — Reset, Tokens,
   Typografie, Header, Footer, Buttons, Container — kommt aus
   main-site.css (= Hauptseiten-CSS, autoritativ).

   Verfügbare Tokens (aus main-site.css):
     --navy, --navy-soft, --coral, --coral-soft,
     --rosa, --rosa-light, --text, --text-dim,
     --rule, --bg, --max-width, --max-narrow
   ============================================================= */

/* ============================================
   1. RATGEBER-HERO (Landing / Archive / Search)
   ============================================ */
.ratgeber-hero{padding:64px 0 32px;background:linear-gradient(180deg,var(--rosa-light) 0%,#fff 100%)}
@media(min-width:768px){.ratgeber-hero{padding:88px 0 48px}}
.ratgeber-hero__inner{max-width:var(--max-narrow);margin:0 auto;padding:0 24px;text-align:center}
.ratgeber-hero h1{margin:0 0 16px}
.ratgeber-hero .lead{font-size:18px;color:var(--text-dim);max-width:580px;margin:0 auto 24px}

/* Dark-Mode: kein Gradient zu Weiß — Bleibt durchgehend dunkelblau */
body.theme-dark .ratgeber-hero {
  background: linear-gradient(180deg, #0E1226 0%, #181D34 100%);
}
body.theme-dark .ratgeber-hero h1,
body.theme-dark .ratgeber-hero .eyebrow { color: #FFF; }
body.theme-dark .ratgeber-hero .lead { color: #E3E6F0; }

/* ============================================
   2. POST GRID
   ============================================ */
.post-grid{display:grid;grid-template-columns:1fr;gap:24px;margin:0 auto;max-width:var(--max-width);padding:0 24px}
@media(min-width:640px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.post-grid{grid-template-columns:repeat(3,1fr);gap:32px}}

.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:16px;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;height:100%;text-decoration:none}
.post-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(22,65,147,.10)}

/* Dark-Mode Post-Cards */
body.theme-dark .post-card { background: #181D34; border-color: var(--rule); }
body.theme-dark .post-card h2,
body.theme-dark .post-card h3 { color: #FFF; }
body.theme-dark .post-card p,
body.theme-dark .post-card__excerpt,
body.theme-dark .post-card__meta { color: #9097B0; }
.post-card__thumb{aspect-ratio:16/10;background:var(--rosa-light);overflow:hidden;display:block}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.post-card:hover .post-card__thumb img{transform:scale(1.04)}
.post-card__thumb--placeholder{background:linear-gradient(135deg,var(--rosa) 0%,var(--navy) 100%);opacity:.15}
.post-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card__cat{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);font-weight:700}
.post-card__title{font-size:20px;line-height:1.3;margin:0;color:var(--navy);font-weight:700}
.post-card__title a{color:inherit;text-decoration:none;border:0}
.post-card__title a:hover{color:var(--coral)}
.post-card__excerpt{color:var(--text-dim);font-size:14px;line-height:1.55;margin:0;flex:1}
.post-card__meta{font-size:12px;color:var(--text-dim);opacity:.7;margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

.post-card--featured{grid-column:1/-1}
@media(min-width:768px){
  .post-card--featured{display:grid;grid-template-columns:1.2fr 1fr;align-items:stretch}
  .post-card--featured .post-card__thumb{aspect-ratio:auto;height:100%}
  .post-card--featured .post-card__body{padding:32px 36px}
  .post-card--featured .post-card__title{font-size:28px}
}

/* ============================================
   3. SINGLE ARTICLE
   ============================================ */
.single-article{max-width:var(--max-narrow);margin:0 auto;padding:48px 24px 0}
.single-header{text-align:center;padding-bottom:32px;border-bottom:1px solid var(--rule);margin-bottom:40px}
.single-header .eyebrow{color:var(--coral)}
.single-header h1{margin:8px 0 16px}
.single-meta{font-size:14px;color:var(--text-dim);display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.single-meta span{display:inline-flex;align-items:center;gap:6px}
.single-thumb{margin:0 -24px 40px}
@media(min-width:768px){.single-thumb{margin:0 0 40px;border-radius:18px;overflow:hidden}}
.single-thumb img{width:100%;display:block}

.article-content{font-size:17px;line-height:1.75;color:var(--text)}
.article-content h2{margin:40px 0 16px;font-size:clamp(22px,3vw,30px)}
.article-content h3{margin:32px 0 12px}
.article-content p{margin:0 0 20px}
.article-content ul,.article-content ol{padding-left:22px;margin:0 0 20px}
.article-content li{margin-bottom:6px}
.article-content img{border-radius:12px;margin:24px 0}
.article-content a{color:var(--coral);text-decoration:underline;text-underline-offset:3px}
.article-content a:hover{color:var(--navy)}
.article-content blockquote{border-left:4px solid var(--rosa);padding:4px 0 4px 22px;margin:28px 0;color:var(--text-dim);font-style:italic}

.article-tags{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.article-tags strong{font-size:13px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
.article-tags a{display:inline-block;padding:5px 12px;background:var(--rosa-light);border-radius:999px;font-size:13px;color:var(--navy);text-decoration:none;border:0}
.article-tags a:hover{background:var(--coral);color:#fff}

.post-navigation{margin:48px auto 0;max-width:var(--max-narrow);padding:0 24px;display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:768px){.post-navigation{grid-template-columns:1fr 1fr}}
.post-navigation a{display:block;padding:18px 22px;border:1px solid var(--rule);border-radius:12px;color:var(--text);text-decoration:none}
.post-navigation a:hover{border-color:var(--coral);background:var(--rosa-light)}
.post-navigation .nav-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);display:block;margin-bottom:6px;font-weight:700}
.post-navigation .nav-title{font-weight:700;color:var(--navy)}
.post-navigation .next{text-align:right}

/* ============================================
   4. PAGINATION
   ============================================ */
.pagination{display:flex;justify-content:center;gap:6px;margin:48px auto 0;flex-wrap:wrap;max-width:var(--max-width);padding:0 24px}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;border-radius:8px;border:1px solid var(--rule);color:var(--text);font-weight:600;font-size:14px;text-decoration:none}
.pagination .page-numbers:hover{border-color:var(--coral);color:var(--coral)}
.pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination .page-numbers.dots{border:0}

/* ============================================
   5. SEARCH FORM
   ============================================ */
.search-form{display:flex;gap:8px;max-width:520px;margin:0 auto 32px}
.search-form input[type=search]{flex:1;padding:11px 18px;border:1px solid var(--rule);border-radius:999px;font:inherit;font-size:15px;background:#fff;color:var(--text);outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.search-form input[type=search]:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(22,65,147,.1)}
.search-form button{padding:11px 22px;border:0;border-radius:999px;background:var(--coral);color:#fff;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.search-form button:hover{background:var(--navy)}

/* ============================================
   6. STATIC INDEX RESULTS (Hauptseite in Suche)
   ============================================ */
.static-results{max-width:var(--max-width);margin:0 auto 32px;padding:0 24px}
.static-results__title{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-dim);font-weight:700;margin-bottom:20px}
.static-results__list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.static-result__link{display:block;padding:18px 22px;background:#fff;border:1px solid var(--rule);border-radius:12px;text-decoration:none;color:var(--text);transition:border-color .15s ease,box-shadow .15s ease}
.static-result__link:hover{border-color:var(--coral);box-shadow:0 6px 18px rgba(22,65,147,.08)}
.static-result__badge{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--coral);background:rgba(255,113,117,.1);padding:3px 10px;border-radius:999px;margin-bottom:8px}
.static-result__title{font-size:18px;margin:0 0 4px;color:var(--navy);font-weight:700}
.static-result__snippet{margin:0 0 6px;font-size:14px;line-height:1.55;color:var(--text)}
.static-result__snippet mark{background:#fff3a3;padding:0 2px;color:inherit}
.static-result__url{font-size:12px;color:var(--text-dim);opacity:.7;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ============================================
   7. YOUTUBE-SHORTS-GRID & LIGHTBOX
   (Klassen vom inc/youtube-shorts.php Modul)
   ============================================ */
.fak-shorts-empty{padding:32px;background:var(--rosa-light);border-radius:14px;text-align:center;color:var(--text-dim)}
.fak-shorts{margin:24px auto;max-width:var(--max-width);padding:0 24px}
.fak-shorts__privacy{background:linear-gradient(135deg,#fff3f5 0%,#f0f3fb 100%);border:1px solid var(--rule);border-radius:14px;padding:24px;margin-bottom:24px}
.fak-shorts__privacy.is-hidden{display:none}
.fak-shorts__privacy-inner{max-width:680px;margin:0 auto}
.fak-shorts__privacy p{margin:0 0 12px;font-size:15px;line-height:1.6}
.fak-shorts__privacy p:last-child{margin:0}
.fak-shorts__privacy code{font-size:.85em;background:rgba(22,65,147,.06);padding:1px 6px;border-radius:4px}
.fak-shorts__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.fak-shorts__grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:980px){.fak-shorts[data-cols="4"] .fak-shorts__grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.fak-shorts[data-cols="3"] .fak-shorts__grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:980px){.fak-shorts[data-cols="5"] .fak-shorts__grid{grid-template-columns:repeat(5,1fr)}}
.fak-short{margin:0}
.fak-short__btn{position:relative;display:block;width:100%;padding:0;border:0;background:#000;border-radius:14px;overflow:hidden;cursor:pointer;aspect-ratio:9/16;transition:transform .15s ease,box-shadow .2s ease}
.fak-short__btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(22,65,147,.18)}
.fak-short__btn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.fak-short__thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s ease}
.fak-short__btn:hover .fak-short__thumb{opacity:1}
.fak-short__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none}
.fak-short__play svg{width:48px;height:48px;background:rgba(0,0,0,.5);border-radius:50%;padding:10px}
.fak-shorts__lightbox{position:fixed;inset:0;z-index:1000;background:rgba(10,12,20,.92);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fak-shorts__lightbox[hidden]{display:none}
.fak-shorts__player{width:100%;max-width:420px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.fak-shorts__player iframe{width:100%;height:100%;border:0;display:block}
.fak-shorts__close{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:30px;line-height:1;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .15s ease}
.fak-shorts__close:hover{background:rgba(255,255,255,.25)}
body.fak-modal-open{overflow:hidden}

/* ============================================
   8. SIDE-NAV (EIN-Logo-Variante, Hot-Spots, Typewriter)
   ============================================ */
/* Override main-site.css: kein Gap zwischen OBEN/Logo/UNTEN,
   Cluster sitzt tight zusammen, öffnet nur bei Hover */
.side-nav--single { gap: 0; padding: 14px 10px; }
.side-nav--single .side-nav__logo,
.side-nav--single .side-nav__progress { margin: 0; padding-top: 6px; padding-bottom: 6px; }

/* Logo-Container — exakte Logo-Proportion 130:200 */
.side-nav__body {
  position: relative;
  width: 42px;
  height: 65px;          /* 42 * 200/130 ≈ 65 — Logo-Aspect */
  margin: 6px 0;
}
.side-nav__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.side-nav__svg path { transition: opacity 0.25s ease; }

/* Hot-Spots: horizontale Bänder über den drei Logo-Regionen.
   Im DOM VOR dem SVG, damit der ~-Selektor das SVG erreicht. */
.side-nav__hot {
  position: absolute;
  left: -6px;
  right: -6px;
  z-index: 2;
  display: block;
  cursor: pointer;
  text-decoration: none;
  border: 0;
}
.side-nav__hot--kopf  { top: 0;   height: 28%; }
.side-nav__hot--brust { top: 28%; height: 30%; }
.side-nav__hot--vulva { top: 58%; height: 42%; }

/* Dim-Logik: Hover über Hot → die anderen zwei Pfade werden grau */
.side-nav__hot--kopf:hover  ~ .side-nav__svg .sn-brust,
.side-nav__hot--kopf:hover  ~ .side-nav__svg .sn-vulva,
.side-nav__hot--brust:hover ~ .side-nav__svg .sn-kopf,
.side-nav__hot--brust:hover ~ .side-nav__svg .sn-vulva,
.side-nav__hot--vulva:hover ~ .side-nav__svg .sn-kopf,
.side-nav__hot--vulva:hover ~ .side-nav__svg .sn-brust { opacity: 0.15; }

/* Label-Container: CI-Farben, Position links neben dem Logo */
.side-nav__hot-label {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(22,65,147,0.18);
  overflow: hidden;          /* clip für typewriter */
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
/* CI-Farben strikt — nur Navy, Rosa, Coral */
.side-nav__hot--kopf  .side-nav__hot-label { background: #164193; color: #fff; }
.side-nav__hot--brust .side-nav__hot-label { background: #f8bcd0; color: #164193; }
.side-nav__hot--vulva .side-nav__hot-label { background: #ff7175; color: #fff; }

/* Typewriter-Effekt: Text schreibt sich Zeichen-für-Zeichen ein */
.side-nav__hot-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  vertical-align: middle;
  transition: max-width 0.55s steps(40, end) 0.10s;
}
.side-nav__hot:hover .side-nav__hot-label,
.side-nav__hot:focus-visible .side-nav__hot-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.side-nav__hot:hover .side-nav__hot-text,
.side-nav__hot:focus-visible .side-nav__hot-text { max-width: 400px; }

/* Fokus für Tastatur-Bedienung */
.side-nav__hot:focus-visible { outline: 2px solid #164193; outline-offset: 2px; border-radius: 4px; }

/* ============================================
   9. TOP-NAV — KONTAKT · TERMIN · KNOW-HOW (Mega)
   Alle Header-Items harmonisch ~36px hoch.
   ============================================ */
.nav { position: relative; }   /* Anker für absolutes .nav__list auf Mobile */
.nav__list { gap: 4px; display: flex; align-items: center; }

/* Generische Item-Pille (KONTAKT, TERMIN, KNOW-HOW) */
.nav__item { position: relative; list-style: none; }
.nav__item > a {
  display: inline-flex !important;
  flex-direction: row !important;          /* Pikto LINKS, Text rechts */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 5px !important;                     /* Abstand Pikto-Text, etwas enger */
  padding: 0 12px !important;
  height: 36px !important;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #164193 !important;
  background: transparent !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
  /* Grid-Reste aus main-site.css überschreiben */
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  column-gap: 5px !important;
}
.nav__item > a:hover,
.nav__item.is-open > a,
.nav__item.has-children:hover > a,
.nav__item.has-children:focus-within > a {
  background: rgba(22, 65, 147, 0.06) !important;
  color: #164193 !important;
}
.nav__pic {
  flex-shrink: 0;
  width: 18px !important;
  height: 18px !important;
  color: #164193;
  display: inline-block !important;
  transition: color 0.18s ease;
}
.nav__label {
  display: inline-block !important;
  white-space: nowrap;
}
.nav__item > a:hover .nav__pic { color: #ff7175; }

/* Chevron-Pfeil aus main-site.css für KNOW-HOW ausblenden */
.nav__item > a::after { display: none !important; }

/* ----- MOBILE: nav-list versteckt, Burger als Trigger ----- */
@media (max-width: 950px) {
  .nav__toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    /* iOS-Touch-Polish: schnelle Reaktion, kein Highlight, kein Zoom */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
  }
  /* SVG IM Button darf Touch nicht abfangen */
  .nav__toggle svg { pointer-events: none; }
  .nav__list {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch !important;
    background: #FFF;
    border-top: 1px solid rgba(22, 65, 147, 0.12);
    padding: 12px 16px;
    gap: 2px !important;
    box-shadow: 0 16px 40px rgba(22, 65, 147, 0.10);
    z-index: 110;                                  /* über Drawer und sticky header */
  }
  .nav__list.is-open { display: flex !important; }
  .nav__list .nav__item { width: 100%; }
  .nav__item > a {
    height: auto !important;
    padding: 12px 8px !important;
    width: 100%;
    justify-content: flex-start !important;
    font-size: 13px;
  }
  /* Dark Mode: mobile Liste auf dunkelblau */
  body.theme-dark .nav__list {
    background: #0E1226;
    border-top-color: rgba(255, 255, 255, 0.12);
  }
}
@media (min-width: 951px) {
  .nav__toggle { display: none !important; }
}

/* ============================================
   10. DRAWER-PATTERN — KNOW-HOW & KONTAKT
   Schiebt Content nach unten (in-flow, max-height-Animation).
   Keine Border, kein Shadow. Weiss / Dunkelblau im Dark-Mode.
   ============================================ */
.site-header { position: sticky; top: 0; z-index: 100; }

.site-header__drawer {
  background: #FFF;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  border: 0;
  box-shadow: none;
}
body.theme-dark .site-header__drawer { background: #0E1226; }

body.is-drawer-knowhow-open .site-header__drawer[data-drawer="knowhow"],
body.is-drawer-kontakt-open .site-header__drawer[data-drawer="kontakt"] {
  max-height: 540px;
}

.site-header__drawer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 32px 32px;
}

/* KNOW-HOW: 3 Spalten */
.header-mega {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.header-mega-col { min-width: 0; }
.header-mega-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 2px solid currentColor;
}
.header-mega-logo { flex-shrink: 0; }
.header-mega-head strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #164193;
  line-height: 1.2;
}
body.theme-dark .header-mega-head strong { color: #FFF; }
.header-mega-head span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #ff7175;
  margin-top: 4px;
  line-height: 1.3;
}
.header-mega-col--davor  .header-mega-head { color: #164193; }
.header-mega-col--drin   .header-mega-head { color: #f8bcd0; }
.header-mega-col--danach .header-mega-head { color: #ff7175; }

.header-mega-col ul { list-style: none; padding: 0; margin: 0; }
.header-mega-col li { margin: 0; }
.header-mega-col a {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  color: #164193 !important;
  text-decoration: none;
  border-radius: 6px;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
body.theme-dark .header-mega-col a { color: #FFF !important; }
.header-mega-col--davor  a:hover { background: rgba(22, 65, 147, 0.08); }
.header-mega-col--drin   a:hover { background: rgba(248, 188, 208, 0.28); }

/* DANACH: nur bei Hover Coral-Overlay, sonst Standard */
.header-mega-col--danach a:hover {
  background: #ff7175 !important;
  color: #FFF !important;
}
.header-mega-col--danach a[aria-current="page"] {
  background: #ff7175 !important;
  color: #FFF !important;
  font-weight: 700;
}
/* Dark-Mode: Hover-Overlays */
body.theme-dark .header-mega-col--davor  a:hover { background: rgba(255, 255, 255, 0.08); }
body.theme-dark .header-mega-col--drin   a:hover { background: rgba(248, 188, 208, 0.18); }
body.theme-dark .header-mega-col--danach a:hover { background: #ff7175 !important; color: #FFF !important; }
body.theme-dark .header-mega-col--danach a[aria-current="page"] { background: #ff7175 !important; color: #FFF !important; }

/* KONTAKT: 3 Wege */
.header-kontakt {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.header-kontakt-way {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 6px;
  padding: 22px 24px;
  border-radius: 12px;
  background: rgba(22, 65, 147, 0.04);
  color: #164193 !important;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.header-kontakt-way:hover {
  background: rgba(22, 65, 147, 0.08);
  transform: translateY(-2px);
}
.header-kontakt-way svg { color: #164193; }
.header-kontakt-way strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #164193;
  margin-top: 4px;
}
.header-kontakt-way__big {
  font-size: 18px;
  font-weight: 700;
  color: #164193;
  line-height: 1.25;
}
.header-kontakt-way__sub {
  font-size: 12px;
  font-weight: 400;
  color: #164193;
  opacity: 0.7;
  line-height: 1.4;
}
.header-kontakt-way--featured {
  background: #ff7175;
  color: #FFF !important;
}
.header-kontakt-way--featured:hover { background: #ff5a5e; }
.header-kontakt-way--featured svg,
.header-kontakt-way--featured strong,
.header-kontakt-way--featured .header-kontakt-way__big,
.header-kontakt-way--featured .header-kontakt-way__sub { color: #FFF; }
.header-kontakt-way--featured .header-kontakt-way__sub { opacity: 0.9; }

body.theme-dark .header-kontakt-way {
  background: rgba(255, 255, 255, 0.06);
  color: #FFF !important;
}
body.theme-dark .header-kontakt-way:hover { background: rgba(255, 255, 255, 0.12); }
body.theme-dark .header-kontakt-way,
body.theme-dark .header-kontakt-way svg,
body.theme-dark .header-kontakt-way strong,
body.theme-dark .header-kontakt-way .header-kontakt-way__big,
body.theme-dark .header-kontakt-way .header-kontakt-way__sub { color: #FFF !important; }
body.theme-dark .header-kontakt-way .header-kontakt-way__sub { opacity: 0.75; }

/* Mobile: Drawer-Inhalt einspaltig */
@media (max-width: 950px) {
  body.is-drawer-knowhow-open .site-header__drawer[data-drawer="knowhow"],
  body.is-drawer-kontakt-open .site-header__drawer[data-drawer="kontakt"] {
    max-height: 1400px;
  }
  .site-header__drawer-inner { padding: 18px 16px 22px; }
  .header-mega { grid-template-columns: 1fr; gap: 22px; }
  .header-kontakt { grid-template-columns: 1fr; gap: 14px; }
  .header-kontakt-way { padding: 16px 18px; }
}

/* ============================================
   11. THEME-TOGGLE · LANG-SWITCH · SOCIAL — harmonisch 36px hoch
   ============================================ */
.theme-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  margin: 0 4px !important;
  transition: background 0.18s ease;
}
.theme-toggle:hover { background: rgba(22, 65, 147, 0.06) !important; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 4px;
  height: 36px;
}
.lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #164193 !important;
  background: transparent !important;
  text-decoration: none;
  transition: background 0.15s ease;
}
.lang-switch__item:hover { background: rgba(22, 65, 147, 0.08) !important; color: #164193 !important; }
.lang-switch__item.is-active { background: #164193 !important; color: #fff !important; }

.header-social {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0 4px;
  height: 36px;
}
.header-social__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.header-social__icon:hover { background: rgba(22, 65, 147, 0.06); }
.header-social__icon svg { width: 18px !important; height: 18px !important; }
.header-social__icon svg path { fill: #164193; transition: fill 0.15s ease; }
.header-social__icon:hover svg path { fill: #ff7175; }

/* ============================================
   12. FOOTER — CI-konform, Background-Logo angeschnitten oben-links
   ============================================ */
.footer-grid ul li a .fnav-soon { color: #ff7175 !important; opacity: 1 !important; }
.footer-newsletter__text p { color: #ff7175 !important; }

/* Footer wird zur position-relativen Bühne für das Background-Logo */
.site-footer {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

/* Großes Logo-Mark als angeschnittener Hintergrund-Akzent. Volles
   CI-Farb-Profil mit halber Deckkraft — die Schrift darüber bleibt
   lesbar, das Logo prägt aber spürbar den Footer. */
.site-footer__bg-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(560px, 78vw, 1400px);
  line-height: 0;
  pointer-events: none;
  z-index: 0;
  transform: translate(-4%, -10%);
  opacity: 0.55;
}
.site-footer__bg-logo img {
  width: 100%;
  height: auto;
  display: block;
}
/* Alle direkten Inhalte über dem Logo */
.site-footer > .container { position: relative; z-index: 1; }

/* Mobile: Logo nicht ganz so weit reinragend, weil Layout enger */
@media (max-width: 768px) {
  .site-footer__bg-logo {
    width: clamp(340px, 95vw, 620px);
    transform: translate(-8%, -8%);
    opacity: 0.35;
  }
}

/* Footer-Bottom: jetzt nur Copy + Links, 2 Spalten */
.footer-bottom {
  align-items: center;
  gap: 24px !important;
}
.footer-bottom__copy,
.footer-bottom__links { position: relative; z-index: 1; }

.footer-bottom__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-bottom__links a svg {
  width: 13px;
  height: 13px;
  opacity: 0.85;
  flex-shrink: 0;
}

/* ============================================
   13. SITE-HEADER-LOGO — bleibt statisch
   ============================================ */
.site-header__logo svg { animation: none !important; transform: none !important; }
.site-header__logo .lm-1, .site-header__logo .lm-2, .site-header__logo .lm-3,
.site-header__logo .cls-1, .site-header__logo .cls-2, .site-header__logo .cls-3 {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.site-header__logo:hover svg > g:first-of-type .cls-2,
.site-header__logo:hover svg > g:first-of-type .cls-3,
.site-header__logo:hover svg > g:first-of-type .lm-2,
.site-header__logo:hover svg > g:first-of-type .lm-3,
.site-header__logo:focus-visible svg > g:first-of-type .cls-2,
.site-header__logo:focus-visible svg > g:first-of-type .cls-3,
.site-header__logo:focus-visible svg > g:first-of-type .lm-2,
.site-header__logo:focus-visible svg > g:first-of-type .lm-3 { transform: none !important; }

/* ============================================
   13b. DARK MODE — Header + Drawer polish, Pictos rosa → coral
   ============================================ */
body.theme-dark .site-header {
  background: rgba(14, 18, 38, 0.96);
}
body.theme-dark .nav__item > a {
  color: #FFF !important;
}
body.theme-dark .nav__item > a:hover,
body.theme-dark .nav__item.is-open > a,
body.theme-dark .nav__item--mega:hover > a {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFF !important;
}
/* Pictogramme: Default Rosa, Hover Coral */
body.theme-dark .nav__pic { color: #f8bcd0 !important; }
body.theme-dark .nav__item > a:hover .nav__pic,
body.theme-dark .nav__item--mega:hover > a .nav__pic { color: #ff7175 !important; }

/* Theme-Toggle, Lang, Social im Dark-Mode lesbar */
body.theme-dark .theme-toggle { color: #FFF !important; }
body.theme-dark .theme-toggle:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ff7175 !important; }
body.theme-dark .lang-switch__item { color: #FFF !important; }
body.theme-dark .lang-switch__item:hover { background: rgba(255, 255, 255, 0.10) !important; }
body.theme-dark .lang-switch__item.is-active { background: #ff7175 !important; color: #FFF !important; }
body.theme-dark .header-social__icon:hover { background: rgba(255, 255, 255, 0.08); }
body.theme-dark .header-social__icon svg path { fill: #f8bcd0; }
body.theme-dark .header-social__icon:hover svg path { fill: #ff7175; }

/* Burger im Dark */
body.theme-dark .nav__toggle { color: #FFF; }

/* Drawer-Logos: Geist-Pfade im Dark-Mode etwas heller damit erkennbar */
body.theme-dark .header-mega-logo path[opacity="0.18"] {
  opacity: 0.28;
}

/* ============================================
   ============================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 16px;background:var(--navy);color:#fff;border-radius:6px;z-index:1000}

.comments-area{display:none}

/* Empty-State auf der Ratgeber-Landing */
.ratgeber-empty{max-width:var(--max-narrow);margin:0 auto;padding:48px 24px;text-align:center}
.ratgeber-empty h2{margin-bottom:16px}
.ratgeber-empty p{color:var(--text-dim)}

/* Print */
@media print{
  .site-header,.site-footer,.nav,.nav__toggle,.mobile-cta{display:none}
  body{color:#000;background:#fff}
  a{color:#000;text-decoration:underline}
}

/* === v5.42 PATCH 31-05 (Dark-Footer-Links · Mobile-Mega-Akkordeon · Mobile-Footer enger · Side-Nav-Kopf dark) === */
/* A) Dark-Mode: anrufen/chatten weiß */
body.theme-dark .footer-clara-links a { color: #FFF !important; }
body.theme-dark .footer-clara-links a svg { color: #FFF; }
/* Side-Nav: Navy-Kopf auf dunkler Pille sichtbar halten */
body.theme-dark .side-nav__svg .sn-kopf { fill: #93A6DA; }
/* B) Mobile: KNOW-HOW-Mega als Akkordeon — DAVOR/DRIN/DANACH antippen */
@media (max-width: 720px) {
  .header-mega-col .header-mega-head { cursor: pointer; position: relative; padding-right: 90px; -webkit-user-select: none; user-select: none; }
  .header-mega-col .header-mega-head::after {
    content: "ausziehen \25BE"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.7; white-space: nowrap; transition: opacity 0.2s ease;
  }
  .header-mega-col.is-open .header-mega-head::after { content: "anziehen \25B4"; }
  .header-mega-col > ul {
    overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
    transition: max-height 0.32s ease, opacity 0.25s ease, margin-top 0.32s ease;
  }
  .header-mega-col.is-open > ul { max-height: 680px; opacity: 1; margin-top: 8px; }
}
/* C) Mobile: Newsletter-Footer kompakter (kein erzwungener 340px-Textblock) */
@media (max-width: 560px) {
  .footer-newsletter { padding: 18px 18px; margin-bottom: 22px; gap: 14px; }
  .footer-newsletter__text { flex: 0 1 auto; }
  .footer-newsletter__social { margin-top: 10px; justify-content: center; }
  .footer-bg-logo { transform: translateX(-42%) scale(1.05); opacity: 0.30; }
}

/* ANRUFEN (mobile-CTA, is-secondary) im Dark-Mode: Text + Icon weiss */
body.theme-dark .mobile-cta a.is-secondary,
body.theme-dark .mobile-cta a.is-secondary svg { color: #FFF !important; }

/* Consent-Optionen: Hover-Feedback (klickbare Zeilen) */
.cc-opt:not(.cc-opt--locked):hover { border-color: var(--coral); background: rgba(255,114,118,0.05); }
body.theme-dark .cc-opt:not(.cc-opt--locked):hover { border-color: var(--coral); background: rgba(255,114,118,0.12); }

/* === v5.42 HEADER-LAYOUT 31-05: CTA-Boxen raus · 3 Icons (+Theme/Sprache) mittig · Social rechts === */
.nav__cta { display: none !important; }
@media (min-width: 721px) {
  .nav { flex: 1 1 auto; }
  .nav__list { margin-left: auto; }
  .header-social { display: inline-flex !important; margin-left: auto; align-items: center; gap: 6px; }
}

/* Logo nie schrumpfen (Mobile-Fix) */
.site-header__logo { flex-shrink: 0; }

/* MOBILE: Social aus (Header-Overflow-Fix) — Social ist im Drawer + Footer vorhanden */
@media (max-width: 720px) { .header-social { display: none !important; } }