/* =============================================================
   brand.css – Brand-Layer Auftragsautopilot
   Quelle: Brand Guide · Richtung D · „Handschlag“ (Okt 2026)
   „Weiche Flächen · ein Markerton · Handzeichnung · Klartext statt Fachchinesisch“

   Farbe
   – Marine  #182848  Text, dunkle Flächen. Trägt Text und Vertrauen.
   – Limette #CDF25C  Marker und CTA-Flächen. Hebt ein Wort, einen Button oder
                      eine Zahl hervor, nie einen ganzen Absatz.
                      Text steht nie IN Limette, sondern AUF Limette.
   – Himmel  #D7E6F5  Hero, Sektionen
   – Hafer   #FBF3E6  Grund (Seitenhintergrund)
   – Weiß    #FFFFFF  Karten
   Typografie
   – Headlines: Bricolage Grotesque 800, −4 % Laufweite
   – Fließtext, Buttons, UI: Figtree 400 · 500 · 600 (Fließtext groß 20/32)
   Formen: weiche Flächen (große Radien), Pill-Buttons, gestrichelte Flugbahn
   als verbindendes Element, Papierflieger als Bildmarke.
   ============================================================= */

/* ---------- Schriften (lokal, latin) ---------- */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/figtree-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/figtree-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/figtree-latin-600-normal.woff2") format("woff2")}

/* ---------- Farb-Tokens ---------- */
:root{
  /* Markenfarben */
  --marine:#182848;       /* Text, dunkle Flächen */
  --limette:#CDF25C;      /* Marker, CTA-Flächen */
  --himmel:#D7E6F5;       /* Hero, Sektionen */
  --hafer:#FBF3E6;        /* Grund */
  --weiss:#FFFFFF;        /* Karten */

  /* Abgeleitete Töne (nur aus den Markenfarben gemischt) */
  --marine-hover:#22365E;
  --limette-hover:#D9F67F;
  --himmel-hell:#EAF2FA;  /* zarte Flächen in Karten */
  --himmel-dunkel:#C3D7EC;/* leere Balken, ruhige Tags */
  --text-muted:#46536E;   /* Fließtext zweite Ebene */
  --text-soft:#6A7590;    /* Hinweise, Fußnoten */
  --muted-dark:#C2CDE0;   /* Fließtext zweite Ebene auf Marine */
  --status-fehler:#B4402E;

  /* Kontext-Variablen (werden von den Flächen überschrieben) */
  --surface-card:var(--weiss);
  --line:rgba(24,40,72,.12);
  --line-strong:rgba(24,40,72,.24);
  --text-on-surface:var(--marine);
  --muted-on-surface:var(--text-muted);
  --accent-text:var(--marine);
  --check-bg:var(--limette);
  --check-fg:var(--marine);
  --btn-bg:var(--marine);--btn-fg:var(--weiss);--btn-hover:var(--marine-hover);
  --btn-outline:var(--marine);--btn-outline-fg:var(--marine);
  --marker:var(--limette);
  --contact-ring:var(--weiss);

  /* Typo */
  --font-display:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --font-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Radien: weiche Flächen */
  --radius-small:.75rem;--radius-medium:1rem;--radius-large:1.25rem;--radius-panel:1.75rem;--radius-pill:999px;

  --navbar-height:5rem;
  --panel-inset:.75rem;
}
@media (max-width:640px){:root{--radius-large:1rem;--radius-panel:1.25rem;--panel-inset:.5rem;--navbar-height:4.5rem}}

/* ---------- Flächen ----------
   surface-leinen (historischer Name) = Himmel · surface-dark = Marine
   surface-brand = Limette (CTA-Fläche) · surface-light = weiße Karte in farbiger Fläche */
.surface-papier{background:var(--hafer)}
.surface-leinen{background:var(--himmel);--surface-card:var(--weiss);--line:rgba(24,40,72,.14)}
.surface-dark{
  background:var(--marine);color:var(--weiss);
  --surface-card:rgba(255,255,255,.06);--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.3);
  --text-on-surface:var(--weiss);--muted-on-surface:var(--muted-dark);--accent-text:var(--himmel);
  --check-bg:var(--limette);--check-fg:var(--marine);
  --btn-bg:var(--limette);--btn-fg:var(--marine);--btn-hover:var(--limette-hover);
  --btn-outline:rgba(255,255,255,.45);--btn-outline-fg:var(--weiss);
  --contact-ring:#25344F;
}
.surface-brand{
  background:var(--limette);color:var(--marine);
  --surface-card:rgba(255,255,255,.55);--line:rgba(24,40,72,.16);--line-strong:rgba(24,40,72,.32);
  --text-on-surface:var(--marine);--muted-on-surface:#34425E;--accent-text:var(--marine);
  --check-bg:var(--marine);--check-fg:var(--limette);
  --btn-bg:var(--marine);--btn-fg:var(--weiss);--btn-hover:var(--marine-hover);
  --btn-outline:var(--marine);--btn-outline-fg:var(--marine);
  --marker:var(--weiss);
  --contact-ring:#E6F8AC;
}
/* Helle Karte innerhalb einer farbigen Fläche (z. B. Formular) setzt den Kontext zurück */
.surface-light{
  color:var(--marine);
  --surface-card:var(--himmel-hell);--line:rgba(24,40,72,.12);--line-strong:rgba(24,40,72,.24);
  --text-on-surface:var(--marine);--muted-on-surface:var(--text-muted);--accent-text:var(--marine);
  --check-bg:var(--limette);--check-fg:var(--marine);
  --btn-bg:var(--marine);--btn-fg:var(--weiss);--btn-hover:var(--marine-hover);
  --btn-outline:var(--marine);--btn-outline-fg:var(--marine);
  --marker:var(--limette);
  --contact-ring:var(--weiss);
}

/* Farbige Sections als weiche, eingerückte Flächen (wie der Hero im Brand Guide) */
main > section.surface-leinen,main > section.surface-dark,main > section.surface-brand,
main > section.section_hero,main > section.section_wissen-hero,.section_article-hero{
  margin:var(--panel-inset);border-radius:var(--radius-panel);
}
main > section.section_hero,main > section.section_wissen-hero,.section_article-hero{background:var(--himmel);position:relative;overflow:hidden;--surface-card:var(--weiss)}
main > section:first-child{margin-top:var(--panel-inset)}

/* ---------- Grundlagen ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navbar-height) + 1.5rem);-webkit-text-size-adjust:100%}
body{background:var(--hafer);color:var(--marine);font-family:var(--font-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (max-width:640px){body{font-size:1rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:var(--limette);color:var(--marine)}
:focus-visible{outline:2px solid var(--marine);outline-offset:3px}
.surface-dark :focus-visible{outline-color:var(--limette)}

/* ---------- Überschriften ----------
   Bricolage Grotesque 800, −4 % Laufweite (kleine Größen etwas offener) */
h1,h2,h3,h4,h5,h6,
.heading-style-display,.heading-style-h1,.heading-style-h2,.heading-style-h3,.heading-style-h4,.heading-style-h5,.heading-style-h6{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;text-wrap:balance}
h5,h6,.heading-style-h5,.heading-style-h6{letter-spacing:-.025em}

/* Display 72 / 0.98 · mobil 42 */
.heading-style-display{font-size:4.5rem;line-height:.98}
/* H1/H2 52 / 1.02 · mobil 34 – Seitentitel und Section-Headlines */
.heading-style-h1,h1,.heading-style-h2,h2{font-size:3.25rem;line-height:1.02}
/* H3/H4 32 / 1.1 */
.heading-style-h3,h3,.heading-style-h4,h4{font-size:2rem;line-height:1.1}
/* H5 22 / 1.2 – Karten-Titel */
.heading-style-h5,h5{font-size:1.375rem;line-height:1.2}
.heading-style-h6,h6{font-size:1.1875rem;line-height:1.25}

@media (max-width:991px){
  .heading-style-display{font-size:3.5rem}
  .heading-style-h1,h1,.heading-style-h2,h2{font-size:2.75rem}
  .heading-style-h3,h3,.heading-style-h4,h4{font-size:1.75rem}
}
@media (max-width:640px){
  .heading-style-display{font-size:2.625rem;line-height:1}
  .heading-style-h1,h1,.heading-style-h2,h2{font-size:2.125rem;line-height:1.05}
  .heading-style-h3,h3,.heading-style-h4,h4{font-size:1.5rem;line-height:1.15}
  .heading-style-h5,h5{font-size:1.25rem}
  .heading-style-h6,h6{font-size:1.0625rem}
}

/* ---------- Marker (Limette als Textmarker) ----------
   .is-accent in Überschriften und .marker für einzelne Zahlen.
   Text steht immer in Marine AUF Limette. */
.is-accent,.marker{
  background:var(--marker);color:var(--marine);
  padding:0 .14em;margin:0 -.04em;border-radius:.18em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
h1 .is-accent,h2 .is-accent,.heading-style-display .is-accent,.heading-style-h1 .is-accent{padding:0 .1em .02em;border-radius:.16em}

/* ---------- Text ---------- */
/* Fließtext groß 20 / 32 · mobil 18 */
.text-size-lead{font-size:1.25rem;line-height:1.6;font-weight:400}
@media (max-width:640px){.text-size-lead{font-size:1.125rem}}
.text-size-medium{line-height:1.6}

/* Tagline: kleine Kennzeichnung als Pill (wie „So reden wir / So nicht“ im Guide) */
.text-style-tagline{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border:1px solid currentColor;border-radius:var(--radius-pill);font-size:.8125rem;line-height:1.3;letter-spacing:0;font-weight:600;color:var(--accent-text)}
.text-style-muted{opacity:1;color:var(--muted-on-surface)}
.text-color-green,.is-accent-light{color:var(--accent-text)}
.text-style-pretty{text-wrap:pretty}

/* Links im Fließtext: Marine mit Limetten-Marker darunter */
.text-style-link,.text-rich-text a{color:var(--accent-text);text-decoration:none;background:linear-gradient(transparent 62%,var(--marker) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .2s ease}
.text-style-link:hover,.text-rich-text a:hover{background:linear-gradient(transparent 0,var(--marker) 0)}
.surface-dark .text-style-link{background:none;text-decoration:underline;text-decoration-color:var(--limette);text-decoration-thickness:2px;text-underline-offset:4px}