/*
Theme Name: Zuckerhelden
Theme URI: https://zuckerhelden.com
Author: Christopher Sakel
Description: Corporate-Design-Theme der Zuckerhelden GmbH. Schlank, ohne Page-Builder, ohne externe Requests: Schriften und Icons sind self-hosted (DSGVO). Farb- und Typo-Tokens stammen aus dem Markenhandbuch; Kontraste sind auf WCAG 2.1 AA angehoben.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: proprietaer — nur fuer zuckerhelden.com
Text Domain: zuckerhelden
*/

/* ============================================================
   1 — SCHRIFTEN (self-hosted, Variable Fonts, latin)
   Kein Google-CDN: DSGVO. Variable Fonts decken alle Schnitte
   in je einer Datei ab (Oswald 500-700, Montserrat 400-800).
   ============================================================ */
@font-face{
  font-family:'Oswald';
  src:url('assets/fonts/oswald-latin.woff2') format('woff2-variations'),
      url('assets/fonts/oswald-latin.woff2') format('woff2');
  font-weight:500 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';
  src:url('assets/fonts/montserrat-latin.woff2') format('woff2-variations'),
      url('assets/fonts/montserrat-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ============================================================
   2 — TOKENS (aus tokens/colors.css, foundations.css, typography.css)
   ============================================================ */
:root{
  /* Markenkern */
  --zh-navy:#0B3160; --zh-navy-700:#1E4477; --zh-navy-soft:#2C4E74;
  --zh-blue:#2BA3EA; --zh-blue-600:#1F86C9; --zh-blue-700:#146DA8;
  --zh-red:#DA2C3B;  --zh-red-600:#C01F2E;
  --zh-gold:#F8B831; --zh-gold-600:#E09F14;

  /* Pastell */
  --zh-sky-50:#E7F3FC; --zh-sky-100:#C9E5F8;
  --zh-sand:#F8E3B4;   --zh-sand-50:#FCF3DC;
  --zh-rose:#F2C7C0;   --zh-rose-50:#FAE9E6;

  /* Flaechen */
  --surface-bg:#F6FAFF; --surface-1:#FFFFFF; --surface-2:#EFF5FC; --surface-3:#E4EEF9;
  --surface-navy:#0B3160; --surface-navy-2:#16406F;

  /* Text */
  --fg-1:#16345D; --fg-2:#41597B; --fg-3:#6E82A0; --fg-muted:#8FA2BC;
  --fg-on-accent:#FFFFFF; --fg-on-navy:#FFFFFF; --fg-on-navy-2:#B9CFE8;

  /* Linien & Fokus */
  --border-1:#D9E4F0; --border-2:#BFD2E4; --border-focus:var(--zh-blue);

  /* Semantik */
  --accent:var(--zh-blue); --accent-hover:var(--zh-blue-600); --accent-press:var(--zh-blue-700);
  --status-ok:#2E9E63;  --status-ok-bg:#E3F5EB;
  --status-warn:#8A6207; --status-warn-bg:var(--zh-sand-50);
  --status-error:#B3202D; --status-error-bg:#FBE7E9;
  --status-info:var(--zh-blue-700); --status-info-bg:var(--zh-sky-50);

  /* ---- BARRIEREFREIHEIT: abgeleitete Tokens ----
     Helden-Blau #2BA3EA traegt auf hellem Grund nur 2,79:1 und faellt damit
     durch WCAG AA. Auf hellen Flaechen tragen Text und Buttons deshalb
     --zh-ink-blue (#146DA8, 5,55:1). Das helle Blau bleibt fuer Flaechen und
     fuer Text AUF Navy (dort 4,64:1) — die Marke bleibt erkennbar. */
  --zh-ink-blue:var(--zh-blue-700);      /* blauer Text/Button auf hell — AA */
  --zh-ink-blue-hover:#0F578A;           /* dunkler fuer Hover — 7,0:1 */
  --btn-primary-bg:var(--zh-blue-700);
  --btn-primary-bg-hover:#0F578A;
  --btn-primary-bg-active:#0B4571;

  /* Abstaende, Radien, Schatten */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --r-blob:58% 42% 55% 45% / 52% 48% 45% 55%;
  --sh-1:0 2px 8px rgba(11,49,96,.08);
  --sh-2:0 8px 24px rgba(11,49,96,.10);
  --sh-3:0 18px 48px rgba(11,49,96,.16);
  --sh-focus:0 0 0 3px rgba(20,109,168,.45);

  /* Typografie */
  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-body:'Montserrat','Segoe UI',system-ui,sans-serif;
  --lh-tight:1.05; --lh-snug:1.2; --lh-body:1.6; --lh-prose:1.75;
  --ls-eyebrow:0.18em; --ls-display:0.01em;

  --wrap:1140px;
}

/* ============================================================
   3 — BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--surface-bg); color:var(--fg-1);
  font-family:var(--font-body); font-weight:400; font-size:17px; line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  line-height:var(--lh-tight); letter-spacing:var(--ls-display);
  margin:0 0 var(--sp-4); color:var(--fg-1); text-wrap:balance;
  /* Deutsche Komposita sprengen sonst auf dem Handy das Layout —
     "VERBRAUCHERSTREITBEILEGUNG" ist in Versalien breiter als ein iPhone.
     hyphens:auto greift, weil das Dokument lang="de" traegt. */
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
h1{font-size:clamp(34px,5.2vw,56px); font-weight:700;}
h2{font-size:clamp(28px,3.6vw,40px);}
h3{font-size:clamp(20px,2.2vw,24px);}
h4{font-size:19px;}
p,li{overflow-wrap:break-word;}
p{margin:0 0 var(--sp-4); color:var(--fg-2); line-height:var(--lh-prose); text-wrap:pretty;}
a{color:var(--zh-ink-blue); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;}
a:hover{color:var(--zh-ink-blue-hover);}
strong,b{font-weight:700; color:var(--fg-1);}
ul,ol{color:var(--fg-2); line-height:var(--lh-prose); padding-left:1.25em;}
li{margin-bottom:var(--sp-2);}
hr{border:none; border-top:1px solid var(--border-1); margin:var(--sp-10) 0;}

/* Fokus — durchgaengig sichtbar, nie entfernt */
:focus-visible{
  outline:3px solid var(--zh-ink-blue); outline-offset:2px;
  border-radius:var(--r-xs);
}
/* Windows High-Contrast / forced-colors */
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;}
  .btn{border:1px solid ButtonText;}
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}

/* Screenreader-only + Sprungmarke */
.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:0; z-index:200;
  background:var(--zh-navy); color:#fff; padding:14px 22px;
  border-radius:0 0 var(--r-sm) 0; font-weight:700; text-decoration:none;
}
.skip-link:focus{left:0;}

/* ============================================================
   4 — MARKENMOTIVE
   ============================================================ */
/* Trikolore — Signatur-Linie, 1x pro Flaeche */
.zh-tricolor{position:relative; height:12px; width:320px; max-width:100%;}
.zh-tricolor i{position:absolute; left:0; height:3px; border-radius:2px; display:block;}
.zh-tricolor i:nth-child(1){top:0;     width:100%;         background:var(--zh-blue);}
.zh-tricolor i:nth-child(2){top:4.5px; width:92%; left:5%;  background:var(--zh-gold);}
.zh-tricolor i:nth-child(3){top:9px;   width:84%; left:10%; background:var(--zh-red);}

/* Pastell-Blob hinter Illustrationen */
.zh-blob{border-radius:var(--r-blob);}
.blob-wrap{position:relative; display:grid; place-items:center;}
.blob-wrap .blob-bg{
  position:absolute; inset:6% 4%; border-radius:var(--r-blob); z-index:0;
}
.blob-wrap img{position:relative; z-index:1;}

/* Navy-Wellenecke (Flyer-Motiv) */
.wave-corner{
  position:absolute; width:340px; height:340px; background:var(--zh-navy);
  border-radius:0 0 100% 0; top:0; left:0; z-index:0; pointer-events:none;
}
.wave-corner--br{top:auto; left:auto; right:0; bottom:0; border-radius:100% 0 0 0;}

/* ============================================================
   5 — TYPO-HELFER
   ============================================================ */
.eyebrow{
  font-family:var(--font-body); font-weight:800; font-size:14px;
  letter-spacing:var(--ls-eyebrow); text-transform:uppercase;
  color:var(--zh-ink-blue);           /* AA auf hell */
  margin:0 0 var(--sp-2);
}
.on-navy .eyebrow,.eyebrow--on-navy{color:var(--zh-blue);} /* AA auf Navy (4,64:1) */
.lead{font-size:19px; line-height:var(--lh-prose); color:var(--fg-2);}

/* Claim-Pill (Flyer-Hero) */
.claim-pill{
  display:inline-block; background:var(--zh-blue-700); color:#fff;
  padding:2px 18px 6px; border-radius:var(--r-pill);
  font-family:var(--font-display); text-transform:uppercase;
}

/* ============================================================
   6 — BUTTONS  (Pill, Montserrat 700; Rot max. 1x pro Ansicht)
   Mindest-Trefferflaeche 44x44 (WCAG 2.5.8).
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1;
  border:none; cursor:pointer; text-decoration:none;
  border-radius:var(--r-pill); padding:15px 28px; min-height:48px;
  transition:background .16s ease-out,border-color .16s ease-out,color .16s ease-out;
}
.btn-primary{background:var(--btn-primary-bg); color:#fff;}
.btn-primary:hover{background:var(--btn-primary-bg-hover); color:#fff;}
.btn-primary:active{background:var(--btn-primary-bg-active);}
.btn-secondary{background:#fff; color:var(--fg-1); border:1.5px solid var(--border-2);}
.btn-secondary:hover{border-color:var(--zh-ink-blue); color:var(--zh-ink-blue);}
.btn-accent{background:var(--zh-red); color:#fff;}       /* 4,77:1 — AA */
.btn-accent:hover{background:var(--zh-red-600); color:#fff;}
.btn-ghost{background:transparent; color:var(--zh-ink-blue); padding-left:8px; padding-right:8px;}
.btn-ghost:hover{color:var(--zh-ink-blue-hover); text-decoration:underline;}
.btn-on-navy{background:#fff; color:var(--zh-navy);}
.btn-on-navy:hover{background:var(--zh-sky-100); color:var(--zh-navy);}
.btn[disabled],.btn:disabled{background:var(--surface-3); color:#5C6F87; cursor:not-allowed;}

/* ============================================================
   7 — KARTEN & BADGES
   ============================================================ */
.karte{
  background:#fff; border:1px solid var(--border-1); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:var(--sp-8);
  transition:box-shadow .18s ease-out,border-color .18s ease-out;
}
.karte:hover{box-shadow:var(--sh-2); border-color:var(--border-2);} /* kein Scale */
.karte h3{margin-bottom:var(--sp-3); hyphens:manual; -webkit-hyphens:manual;}
.karte p:last-child{margin-bottom:0;}

/* Karte als Zeile: Icon links, Text rechts. In schmalen Spalten bricht der
   Text sonst nach zwei Woertern um und die Ueberschriften werden getrennt. */
.karte--zeile{display:flex; gap:var(--sp-6); align-items:flex-start;}
.karte--zeile .icon-circle{margin-bottom:0;}
.karte--zeile .karte-text{min-width:0;}
.karte--zeile h3{margin-bottom:var(--sp-2);}

/* Pastell-Icon-Kreis */
.icon-circle{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--zh-sky-100); color:var(--zh-navy); margin-bottom:var(--sp-5);
  flex:0 0 auto;
}
.icon-circle svg{width:26px; height:26px;}
.icon-circle--sand{background:var(--zh-sand);}
.icon-circle--rose{background:var(--zh-rose);}

.badge{
  display:inline-block; border-radius:var(--r-pill); padding:6px 14px;
  font-size:13px; font-weight:700; background:var(--zh-sky-50); color:var(--zh-blue-700);
}

/* ============================================================
   8 — GRID
   ============================================================ */
.grid{display:grid; gap:var(--sp-6);}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); align-items:center;}

/* ============================================================
   9 — SEKTIONEN
   ============================================================ */
.section{padding:var(--sp-24) 0;}
.section--tight{padding:var(--sp-16) 0;}
.section--surface{background:var(--surface-1);}
.section--navy{background:var(--surface-navy); color:var(--fg-on-navy); position:relative; overflow:hidden;}
.section--navy h2,.section--navy h3{color:#fff;}
/* :not(.eyebrow) ist Pflicht — sonst schlaegt .section--navy p (0,1,1) die
   Regel .eyebrow--on-navy (0,1,0) und das Eyebrow verliert sein Helden-Blau.
   Dritter Fall dieser Spezifitaetsfalle in diesem Stylesheet (siehe .nav a
   und .section--navy a). Immer daran denken: kontextuelle Farbregeln auf
   Elementselektoren schlagen Klassen-Utilities. */
.section--navy p:not(.eyebrow){color:var(--fg-on-navy-2);}
/* :not(.btn) ist Pflicht: .section--navy a (0,1,1) schlaegt sonst .btn-on-navy
   (0,1,0) und faerbt den weissen Button-Text weiss auf weissem Grund — 1:1.
   Dieselbe Falle wie bei .nav a. Nicht entfernen. */
.section--navy a:not(.btn){color:#fff;}
.section-head{max-width:720px; margin-bottom:var(--sp-12);}
.section-head .zh-tricolor{margin-top:var(--sp-5);}

/* ============================================================
   10 — HEADER / NAVIGATION
   ============================================================ */
.site-header{
  background:rgba(246,250,255,.92); backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--border-1);
  position:sticky; top:0; z-index:100;
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); padding:10px 24px; max-width:var(--wrap); margin:0 auto;}
.site-logo{display:inline-flex; text-decoration:none; align-items:center;}
/* <picture> aus dem Layout nehmen, damit das <img> direktes Flex-Kind bleibt
   und das Ausblenden der jeweils anderen Variante keine Luecke hinterlaesst. */
.site-logo picture{display:contents;}
/* Die Wort-Bild-Marke ist quadratisch (Schild ueber Wortmarke). Die CI setzt
   96px Mindestbreite an — darunter ist "ZUCKERHELDEN" nicht mehr lesbar. */
.site-logo img{height:96px; width:auto;}
.site-logo .logo-schild{display:none;}

.nav{display:flex; align-items:center; gap:var(--sp-2);}
/* Ohne das hier rendert die Navigation als Aufzaehlungsliste mit Punkten. */
.nav-list{display:flex; align-items:center; gap:var(--sp-1); list-style:none; margin:0; padding:0;}
.nav-list li{margin:0;}
/* :not(.btn) ist Pflicht, nicht Kosmetik — ohne das schlaegt .nav a (0,1,1)
   die Regel .btn-primary (0,1,0) und faerbt den weissen Button-Text navy.
   Ergebnis waere ein Kontrast von 2,24:1 statt 5,55:1. */
.nav a:not(.btn){
  font-weight:600; font-size:15px; color:var(--fg-1); text-decoration:none;
  padding:11px 14px; border-radius:var(--r-sm); display:inline-block;
  transition:background .15s ease-out,color .15s ease-out;
}
.nav a:not(.btn):hover{background:var(--surface-2); color:var(--zh-ink-blue);}
.nav .current-menu-item>a:not(.btn),.nav .current_page_item>a:not(.btn){
  color:var(--zh-ink-blue); background:var(--zh-sky-50);
}
.header-cta{margin-left:var(--sp-3);}

.nav-toggle{
  display:none; background:#fff; border:1.5px solid var(--border-2);
  border-radius:var(--r-sm); width:48px; height:48px; cursor:pointer;
  align-items:center; justify-content:center; color:var(--fg-1);
}

/* ============================================================
   11 — HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding:var(--sp-20) 0 var(--sp-24);}
.hero .wrap{position:relative; z-index:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-16); align-items:center;}
.hero h1{margin-bottom:var(--sp-5);}
.hero .lead{max-width:33ch;}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-8);}
.hero-illu{position:relative;}
.hero-illu .blob-bg{background:var(--zh-sky-100);}

/* ============================================================
   12 — AKKORDEON (FAQ) — native <details>, tastaturbedienbar
   ============================================================ */
.akkordeon{border:1px solid var(--border-1); border-radius:var(--r-md); background:#fff; margin-bottom:var(--sp-3); overflow:hidden;}
.akkordeon summary{
  cursor:pointer; padding:20px 24px; font-weight:700; font-size:17px; color:var(--fg-1);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
  min-height:48px;
}
.akkordeon summary::-webkit-details-marker{display:none;}
.akkordeon summary:hover{background:var(--surface-2);}
.akkordeon summary::after{
  content:""; flex:0 0 auto; width:12px; height:12px;
  border-right:2.5px solid var(--zh-ink-blue); border-bottom:2.5px solid var(--zh-ink-blue);
  transform:rotate(45deg); transition:transform .2s ease-out; margin-top:-4px;
}
.akkordeon[open] summary::after{transform:rotate(-135deg); margin-top:4px;}
.akkordeon .ak-body{padding:0 24px 22px; color:var(--fg-2); line-height:var(--lh-prose);}
.akkordeon .ak-body p:last-child{margin-bottom:0;}

/* ============================================================
   13 — HINWEISE / ALERTS
   ============================================================ */
.alert{border-radius:var(--r-md); padding:16px 20px; margin-bottom:var(--sp-5); font-size:15px; line-height:1.6; border:1px solid transparent;}
.alert-ok{background:var(--status-ok-bg); color:#1C6B42; border-color:#B7E2CB;}
.alert-error{background:var(--status-error-bg); color:var(--status-error); border-color:#F1C2C7;}
.alert-info{background:var(--status-info-bg); color:var(--zh-blue-700); border-color:var(--zh-sky-100);}
.alert strong{color:inherit;}

/* ============================================================
   14 — FORMULARE
   ============================================================ */
.form-row{margin-bottom:var(--sp-5);}
.form-row label{display:block; font-weight:700; font-size:14.5px; color:var(--fg-1); margin-bottom:7px;}
.form-row .hint{font-weight:500; color:var(--fg-2); font-size:13.5px;}
.req{color:var(--status-error); font-weight:700;}
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--fg-1);
  background:#fff; border:1.5px solid var(--border-2); border-radius:var(--r-sm);
  padding:13px 15px; min-height:48px;
  transition:border-color .15s ease-out,box-shadow .15s ease-out;
}
textarea{min-height:150px; resize:vertical; line-height:1.6;}
input::placeholder,textarea::placeholder{color:#7A8CA6;} /* 4,5:1 auf weiss */
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--zh-ink-blue); box-shadow:var(--sh-focus);
}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--status-error);}
.field-error{color:var(--status-error); font-size:13.5px; font-weight:600; margin-top:6px;}

.check-row{display:flex; gap:12px; align-items:flex-start; margin-bottom:var(--sp-6);}
.check-row input[type=checkbox]{
  width:22px; height:22px; min-height:22px; flex:0 0 auto; margin-top:2px;
  accent-color:var(--zh-blue-700); cursor:pointer;
}
.check-row label{font-weight:500; font-size:14.5px; color:var(--fg-2); line-height:1.6; margin:0;}

/* Honeypot — fuer Menschen und Screenreader unsichtbar, fuer Bots sichtbar */
.hp-field{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;}

/* ============================================================
   15 — FOOTER
   ============================================================ */
.site-footer{background:var(--surface-navy); color:var(--fg-on-navy); padding:var(--sp-20) 0 var(--sp-8); position:relative; overflow:hidden;}
.site-footer h4{color:#fff; font-family:var(--font-body); font-weight:800; font-size:13px; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; margin-bottom:var(--sp-5);}
.site-footer p,.site-footer li{color:var(--fg-on-navy-2); font-size:15px;}
.site-footer a:not(.btn){color:#fff; text-decoration:none;}
.site-footer a:not(.btn):hover{text-decoration:underline;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:var(--sp-10); position:relative; z-index:1;}
.footer-grid ul{list-style:none; padding:0; margin:0;}
.footer-grid li{margin-bottom:10px;}
.footer-logo{height:64px; width:auto; margin-bottom:var(--sp-5);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.16); margin-top:var(--sp-12); padding-top:var(--sp-6);
  display:flex; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap;
  font-size:14px; color:var(--fg-on-navy-2); position:relative; z-index:1;
}
.footer-watermark{position:absolute; right:-60px; bottom:-80px; height:340px; opacity:.06; z-index:0; pointer-events:none;}

/* ============================================================
   16 — SEITEN-HERO (Unterseiten)
   ============================================================ */
.page-hero{background:var(--surface-1); border-bottom:1px solid var(--border-1); padding:var(--sp-16) 0 var(--sp-12); position:relative;}
.page-hero .zh-tricolor{margin-top:var(--sp-5);}
.page-hero .lead{margin-top:var(--sp-5); max-width:62ch;}

/* Breadcrumb */
.crumbs{font-size:14px; color:var(--fg-2); margin-bottom:var(--sp-4);}
.crumbs a{color:var(--zh-ink-blue);}
.crumbs span[aria-current]{color:var(--fg-2); font-weight:600;}

/* ============================================================
   17 — INHALTSBEREICH (Block-Editor-Inhalte)
   ============================================================ */
.entry{max-width:72ch;}
.entry--wide{max-width:none;}
.entry h2{margin-top:var(--sp-12);}
.entry h3{margin-top:var(--sp-8);}
.entry>*:first-child{margin-top:0;}
.entry ul,.entry ol{margin-bottom:var(--sp-5);}
.entry img{border-radius:var(--r-lg);}
.entry blockquote{
  margin:var(--sp-8) 0; padding:var(--sp-5) var(--sp-8);
  border-left:4px solid var(--zh-gold); background:var(--zh-sand-50);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.entry blockquote p:last-child{margin-bottom:0;}
.entry table{width:100%; border-collapse:collapse; margin-bottom:var(--sp-6);}
.entry th,.entry td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--border-1);}
.entry th{font-weight:700; color:var(--fg-1);}

/* Kontakt-Layout */
.kontakt-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sp-16); align-items:start;}
.kontakt-karte{background:#fff; border:1px solid var(--border-1); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--sp-8);}
.kontakt-liste{list-style:none; padding:0; margin:0;}
.kontakt-liste li{display:flex; gap:14px; align-items:flex-start; margin-bottom:var(--sp-5); color:var(--fg-2); font-size:15.5px;}
.kontakt-liste svg{flex:0 0 auto; width:20px; height:20px; color:var(--zh-ink-blue); margin-top:3px;}

/* ============================================================
   18 — RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr; gap:var(--sp-8);}
  .hero-grid,.split,.kontakt-grid{grid-template-columns:1fr; gap:var(--sp-10);}
  .hero-illu{order:-1; max-width:420px; margin:0 auto;}
  .hero .lead{max-width:none;}
  .wave-corner{width:220px; height:220px;}
}
@media (max-width:820px){
  body{font-size:16px;}
  .section{padding:var(--sp-16) 0;}
  .nav-toggle{display:inline-flex;}
  .nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--border-1);
    box-shadow:var(--sh-2); padding:var(--sp-3);
  }
  .nav.is-open{display:flex;}
  .nav-list{flex-direction:column; align-items:stretch; gap:0;}
  .nav a{padding:15px 16px; font-size:16px; border-radius:var(--r-sm);}
  .header-cta{margin:var(--sp-3) 0 var(--sp-2); justify-content:center;}
  .site-header{position:relative;}
  .header-inner{position:relative;}
  /* Auf dem Handy waere die volle Wort-Bild-Marke bei CI-konformen 96px zu
     wuchtig. Also das Schild allein — laut CI eine zulaessige Variante
     (Mindestgroesse 24px). */
  .site-logo .logo-voll{display:none;}
  .site-logo .logo-schild{display:inline-flex;}
  .site-logo img{height:48px;}
}
@media (max-width:640px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .karte{padding:var(--sp-6);}
  .hero{padding:var(--sp-12) 0 var(--sp-16);}
  .hero-actions .btn{width:100%;}
  .footer-bottom{flex-direction:column; gap:var(--sp-3);}
}

/* ============================================================
   19 — BEWEGUNG REDUZIEREN (WCAG 2.3.3)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important; transform:none !important;}
}

/* Sanftes Einblenden beim Scrollen — ruhig, kein Parallax */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease-out,transform .5s ease-out;}
.reveal.is-in{opacity:1; transform:none;}

/* ============================================================
   20 — DRUCK
   ============================================================ */
@media print{
  .site-header,.site-footer,.hero-actions,.nav-toggle,.skip-link{display:none !important;}
  body{background:#fff; color:#000; font-size:11pt;}
  a{color:#000; text-decoration:underline;}
  .karte{box-shadow:none; border:1px solid #ccc;}
}

/* ════════════════════════════════════════════════════════════
   21 — RUHE & MODERNE (Ausbaustufe 2)

   „Modern" entsteht hier nicht durch Effekte — die CI verbietet
   Verläufe, Texturen und Glassmorphismus. Es entsteht durch Raum,
   Rhythmus und Bildqualität. Also: mehr Luft, weichere Kanten,
   Bilder auf jeder Seite, ein ruhiger Abschluss.
   ════════════════════════════════════════════════════════════ */

/* ── Illustrationen mit Pastell-Blob (Markenmotiv) ──
   Der Blob gibt den Storyset-Motiven Halt und bindet sie an die Marke.
   Sehr dezent — er soll tragen, nicht auffallen. */
/* Kein Grid mit place-items:center — dann faellt das Bild auf Inhaltsbreite
   zusammen, statt die Spalte zu fuellen. Schlichter Block reicht. */
.illu-wrap{position:relative; width:100%;}
.illu-wrap::before{
  content:""; position:absolute; inset:2% 0%;
  border-radius:var(--r-blob);
  background:var(--zh-sky-100); opacity:.45;
  z-index:0;
}
.illu-wrap--sand::before{background:var(--zh-sand); opacity:.5;}
.illu-wrap--rose::before{background:var(--zh-rose); opacity:.45;}
.illu-wrap img{position:relative; z-index:1; display:block; width:100%; height:auto;}

/* ── Seitenkopf mit Bild ── */
.page-hero--bild{padding:var(--sp-16) 0 var(--sp-16);}
.page-hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:var(--sp-16); align-items:center;
}
.page-hero-grid .illu-wrap{max-width:440px; justify-self:end; width:100%;}

/* ── Lesespalte: zentriert, angenehme Zeilenlänge ──
   Vorher klebte der Text links am Rand und rechts gähnte eine leere
   Hälfte. Zentriert liest es sich ruhiger. */
.entry--mittig{margin-inline:auto; max-width:74ch;}
.entry--mittig h2{margin-top:var(--sp-16);}
.entry--mittig h2:first-child{margin-top:0;}

/* ── Bild-Einschub mitten im Text ──
   Bricht lange Textstrecken auf, ohne den Lesefluss zu stören. */
.einschub{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12);
  align-items:center; margin:var(--sp-16) 0;
}
.einschub .illu-wrap{max-width:360px;}
.einschub h3{margin-top:0;}
.einschub p:last-child{margin-bottom:0;}
.einschub--gedreht .illu-wrap{order:-1;}

/* ── Kontaktband vor dem Footer ── */
.cta-band{padding:var(--sp-20) 0;}
.cta-band-inner{
  display:grid; grid-template-columns:1.3fr auto;
  gap:var(--sp-12); align-items:center;
}
.cta-band h2{margin-bottom:var(--sp-3); font-size:clamp(26px,3vw,34px);}
.cta-band p{margin-bottom:0;}
.cta-band-actions{display:flex; gap:var(--sp-3); flex-wrap:wrap;}

/* Sekundärer Button auf Navy: Kontur statt Fläche — ruhiger als zwei
   volle Flächen nebeneinander. Weiß auf Navy = 12,9:1. */
.btn-ghost-navy{
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.45);
}
.btn-ghost-navy:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff;}

/* ── Weichere Kanten, ruhigere Schatten ── */
.karte{border-radius:var(--r-xl);}
.kontakt-karte{border-radius:var(--r-xl);}
.entry img{border-radius:var(--r-xl);}

/* ── Mehr Luft ── */
.section{padding:var(--sp-24) 0;}
.section-head{margin-bottom:var(--sp-16);}

@media (max-width:1000px){
  .page-hero-grid,.cta-band-inner,.einschub{grid-template-columns:1fr; gap:var(--sp-10);}
  .page-hero-grid .illu-wrap{order:-1; justify-self:center; max-width:340px;}
  .einschub .illu-wrap{order:-1; justify-self:center; margin-inline:auto;}
  .cta-band-actions{justify-content:flex-start;}
}
@media (max-width:640px){
  .cta-band-actions .btn{width:100%;}
}

/* Hero-Blob etwas zurueckhaltender als auf den Unterseiten — er soll die
   Headline nicht ueberstrahlen. */
.hero-illu.illu-wrap::before{inset:6% 2%; opacity:.38;}
.hero-illu.illu-wrap{max-width:540px; margin-inline:auto;}