/* ============================================================
   B&K Steuerberatung — main.css
   "Editoriale Eleganz" — Wirtschaftsmagazin-Anmutung.
   Hairline-System als Leitprinzip, Serif-Display (Fraunces),
   Inter-Sans, IBM Plex Mono für Daten, EINE Brass-Akzentfamilie.
   Design-Tokens & Komponenten exakt nach design-spec.md.
   Keine externen Requests, kein unsafe-inline (alle Styles hier).
   ============================================================ */

@import url("fonts.css");

/* ---------- 1. Design-Tokens (design-spec §1) ---------- */
:root{
  /* Marke / Dunkel — Primärfarbe #0A2540 = Logo-Farbton (Antwort 24) */
  --navy:#0A2540;
  --navy-deep:#071C32;
  --navy-line:#123B5E;
  --ink:#1C2230;
  /* Akzent (nur Brass-Familie) */
  --brass:#9A7B3F;
  --brass-light:#C9B083;
  --brass-deep:#7E6330;
  --brass-band:#A88B53;      /* helleres Gold fürs Mid-CTA-Band → navy-deep-Text erreicht WCAG-AA */
  /* Papier / Hell */
  --paper:#FAF8F3;
  --paper-2:#F3EFE6;
  --paper-3:#FBFAF7;
  /* Text / Linien */
  --muted:#4A5160;
  --hairline:#CBC4B4;
  --hairline-soft:#E3DDD0;
  /* Fließtext auf Navy (≥7:1) */
  --on-navy:#C9D0DE;
  --on-navy-soft:#9CA8BE;

  /* Spacing (8px-Basis) */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px; --s-11:160px;

  --maxw:1200px;
  --gut:var(--s-8);          /* Desktop seitliches Padding 64px */
  --sec-pad:var(--s-10);     /* Sektions-Vertikalabstand Desktop 128px */
}

/* ---------- 2. Reset / Basis ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* Root: overflow-x:hidden propagiert normal auf den Viewport (klippt X, scrollt Y).
     WICHTIG: body NICHT auf hidden lassen (s. u.) — sonst wird body zum Scroll-Container
     und bricht den sticky-Header + den Anker-Offset. */
  overflow-x:hidden;
  scroll-padding-top:78px;   /* sticky-Header-Offset für Anker (Desktop 74px-Leiste + Luft) */
}
body{
  margin:0;
  width:100%;
  max-width:100vw;
  overflow-x:clip;   /* clip (nicht hidden) — macht body NICHT zum Scroll-Container, sticky-Header bleibt oben */
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  text-wrap:pretty;
  hyphens:manual;
}
a{ color:inherit; }
img,svg,picture{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
button{ font-family:inherit; }

/* Display-Serif: optical sizing aktiv (Fraunces opsz-Achse) */
h1,h2,h3,.sec-title,.form-q{ font-optical-sizing:auto; }

/* ---------- 3. Skip-Link & Fokus (A11y) ---------- */
.skip-link{
  position:absolute; left:var(--s-4); top:-60px; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
  font-family:var(--font-sans); font-size:14px; font-weight:600;
  text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{ top:var(--s-4); }

a:focus-visible, button:focus-visible, summary:focus-visible,
.choice:focus-visible, input:focus-visible, textarea:focus-visible,
label.choice:focus-within{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

/* ---------- 4. Layout-Helfer ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:var(--gut);
  padding-right:var(--gut);
}
.section{ position:relative; }
.hairline{ height:1px; background:var(--hairline); border:0; margin:0; }
.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;
}

/* Kupferne Eckmarken (design-spec §4.1) — an oberer linker & rechter Ecke */
.corner-marks{ position:relative; }
.corner-marks::before,
.corner-marks::after{
  content:""; position:absolute; top:0; width:14px; height:14px;
  pointer-events:none;
}
.corner-marks::before{
  left:0;
  border-top:1.5px solid var(--brass);
  border-left:1.5px solid var(--brass);
}
.corner-marks::after{
  right:0;
  border-top:1.5px solid var(--brass);
  border-right:1.5px solid var(--brass);
}
.corner-marks.on-navy::before,
.corner-marks.on-navy::after{ border-color:var(--brass-light); }

/* ---------- 5. Editorial Kicker / Sektionsköpfe ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brass-deep);
  font-weight:600;
  margin:0;
}
.sec-head{
  display:flex;
  align-items:baseline;
  gap:1.4em;
  flex-wrap:wrap;
  margin-bottom:clamp(28px,4vw,52px);
}
.sec-no{
  font-family:var(--font-display);
  font-size:.8125rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--brass-deep); /* WCAG: --brass wäre auf Papier nur 3.75:1; brass-deep = 5.33:1 (AA) */
  font-variant-numeric:tabular-nums;
}
.sec-no b{ color:var(--navy); font-weight:500; }
.sec-label{
  font-family:var(--font-sans);
  font-size:.75rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
}
.sec-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(2rem,4vw,3rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--navy);
}
.sec-title em{ font-style:italic; }
.lead{
  color:var(--muted);
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  line-height:1.6;
}

/* ---------- 6. Buttons / CTA (design-spec §4.2) ---------- */
.btn{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  background:var(--navy);
  color:var(--paper);
  text-decoration:none;
  padding:16px 28px;
  border:1px solid var(--navy);
  border-radius:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  min-height:48px;
  position:relative;
  transition:background .22s ease;
}
.btn .arr{ display:inline-flex; flex:0 0 auto; transition:transform .25s ease; }
.btn:hover{ background:var(--navy-deep); }
.btn:hover .arr{ transform:translateX(5px); }
/* Hover: Brass-Hairline wandert ein */
.btn::after{
  content:""; position:absolute; left:14px; right:14px; bottom:9px; height:1px;
  background:var(--brass-light); transform:scaleX(0); transform-origin:left;
  transition:transform .28s ease;
}
.btn:hover::after{ transform:scaleX(1); }
.btn-ghost{
  background:transparent; color:var(--navy); border:1px solid var(--navy);
}
.btn-ghost::after{ background:var(--brass); }
.btn-ghost:hover{ background:var(--navy); color:var(--paper); }
/* CTA auf dem Goldband: gefüllter Navy-Button (kein Brass-auf-Brass) —
   gleiche visuelle Priorität wie die übrigen Primär-CTAs. */
.btn-on-navy{ background:var(--navy-deep); border-color:var(--navy-deep); color:var(--paper); }
.btn-on-navy::after{ background:var(--brass-light); }
.btn-on-navy:hover{ background:var(--navy); }

.micro{ font-family:var(--font-sans); font-size:.8125rem; color:var(--muted); letter-spacing:.01em; }
.micro b{ color:var(--navy); font-weight:600; }
.cta-row{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.resp-badge{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-sans); font-size:.84rem; color:var(--muted); border:1px solid var(--brass); border-radius:999px; padding:8px 15px; line-height:1.15; background:var(--paper-3); }
.resp-badge svg{ width:16px; height:16px; color:var(--brass-deep); flex:0 0 auto; }
.resp-badge b{ color:var(--navy); font-weight:700; }
.resp-badge .rb-sub{ color:var(--muted); }

/* ============================================================
   HEADER / NAV (sticky)
   ============================================================ */
.topbar{
  position:sticky; top:0; z-index:80;
  background:var(--paper);
  border-bottom:1px solid var(--hairline-soft);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:18px; }
.brand{ display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
/* Höhe maximal ausreizen: 74px-Leiste minus je 7px Luft oben/unten */
.brand .logo{ height:60px; width:auto; }
.brand img.logo{ height:54px; }  /* Startseite-Logo etwas kleiner (Tim); Impressum/Datenschutz nutzen svg.logo und bleiben 60px */
.brand .logo .word{ font-family:var(--font-sans); }
.nav{ display:flex; align-items:center; gap:24px; font-family:var(--font-sans); }
.nav a{
  text-decoration:none; color:var(--ink); font-size:.875rem; letter-spacing:.02em;
  position:relative; padding:6px 0; font-weight:500;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass);
  transition:width .28s ease;
}
.nav a:hover::after, .nav a:focus-visible::after{ width:100%; }
.nav .navcta{
  font-size:.8125rem; letter-spacing:.02em; font-weight:600;
  border:1px solid var(--navy); color:var(--navy); padding:11px 18px; border-radius:2px;
  text-decoration:none; transition:background .2s,color .2s; white-space:nowrap;
}
.nav .navcta:hover{ background:var(--navy); color:var(--paper); }
.nav .navcta::after{ display:none; }
/* Standalone-CTA im Header der Unterseiten (ohne .nav-Parent) */
.topbar > .wrap > .navcta{
  font-family:var(--font-sans); font-size:.8125rem; letter-spacing:.02em; font-weight:600;
  border:1px solid var(--navy); color:var(--navy); padding:11px 18px; border-radius:2px;
  text-decoration:none; transition:background .2s,color .2s; white-space:nowrap;
}
.topbar > .wrap > .navcta:hover{ background:var(--navy); color:var(--paper); }
.menu-btn{ display:none; }
.mobile-nav{ display:none; }

/* ============================================================
   HERO (01/06)
   ============================================================ */
.hero{ position:relative; overflow:hidden; background:var(--paper); }
.hero .wrap{ padding-top:clamp(40px,4.5vw,64px); padding-bottom:clamp(40px,5vw,72px); }
.hero-grid{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.hero-left{ position:relative; padding-top:8px; }
.hero-kicker{ margin-bottom:22px; }
.hero h1{
  font-family:var(--font-display);
  font-weight:380;
  font-size:clamp(2.75rem,6vw,5rem);
  line-height:1.0;
  letter-spacing:-.02em;
  color:var(--navy);
  margin:0 0 20px;
}
.hero h1 em{ font-style:italic; color:var(--navy); }
/* Brass-Unterstreichung unter Schlüsselwort */
.hero h1 .ul{
  background-image:linear-gradient(var(--brass-light),var(--brass-light));
  background-repeat:no-repeat;
  background-position:0 .92em;
  background-size:100% .12em;
  padding-bottom:.02em;
}
.hero-sub{
  font-family:var(--font-sans);
  font-size:clamp(1.0625rem,1.4vw,1.25rem);
  line-height:1.55;
  color:var(--ink);
  max-width:38ch;
  margin:0 0 30px;
}
.usp{
  list-style:none; margin:0 0 32px; padding:0;
  border-top:1px solid var(--hairline);
}
.usp li{
  display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:start;
  padding:14px 0; border-bottom:1px solid var(--hairline);
}
.usp .ux{
  font-family:var(--font-display); font-size:1rem; font-weight:500; color:var(--brass-deep); /* WCAG AA: 5.33:1 auf Papier statt 3.75:1 mit --brass */
  letter-spacing:.02em; font-variant-numeric:tabular-nums; padding-top:1px;
}
.usp .ut{ font-family:var(--font-sans); font-size:.96875rem; line-height:1.5; color:var(--muted); }
.usp .ut b{ color:var(--navy); font-weight:600; }

/* Hero rechte Spalte: Foto-Frame + Trust */
.hero-right{ display:flex; flex-direction:column; gap:16px; }
.photo-frame{
  position:relative; overflow:hidden;
  border:1px solid var(--hairline);
  background:var(--navy);
}
.photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Duotone-Navy-Tonung über echtem Foto, stilistische Einheit.
   Bewusst dezent, damit das aufgehellte Hero-Foto hell/einladend bleibt. */
.photo-frame::after{ content:none; }   /* Hero-Tönung entfernt – Naturfarben (Tim) */
.ph-corner{
  position:absolute; top:12px; right:14px; z-index:3;
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.14em;
  color:rgba(255,255,255,.82);
  background:rgba(7,28,50,.42); padding:4px 9px; border-radius:2px;
  font-variant-numeric:tabular-nums;
}
/* Trust-Zeile (Variante A — keine Sterne ohne echte Daten) */
.trust-strip{
  border:1px solid var(--hairline); background:var(--paper-3);
  padding:16px 20px;
  font-family:var(--font-mono); font-size:.78125rem; line-height:1.7;
  color:var(--ink); letter-spacing:.01em;
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
}
.trust-strip .ts-item{ display:inline-flex; align-items:center; gap:8px; }
.trust-strip .ts-item::before{
  content:""; width:6px; height:6px; background:var(--brass); border-radius:50%; flex:0 0 auto;
}

/* ---------- Laufzahlen-Band (Kennzahlen-Ledger) ---------- */
.figband{ border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); background:var(--paper-2); }
.figband .wrap{ display:grid; grid-template-columns:repeat(4,1fr); padding-top:0; padding-bottom:0; }
/* Tiles als gleich hohe Flex-Spalten; Wert unten, Caption ganz unten →
   alle vier Captions sitzen auf einer Linie, egal ob Zahl oder Wort. */
.fig{ padding:28px 24px; border-right:1px solid var(--hairline); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; text-align:center; }
.fig:last-child{ border-right:0; }
.fig .n{
  font-family:var(--font-mono); font-weight:500;
  font-size:clamp(2.25rem,4vw,3.25rem); color:var(--navy); line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.fig .n sup{ font-size:.42em; color:var(--brass-deep); top:-1.1em; font-weight:500; } /* WCAG: brass-deep statt brass (Kontrast auf Papier) */
/* Wort-Kacheln (Deutschlandweit / Persönlich): Display-Serif statt Mono-Zahl,
   damit die textbasierten Werte sauber zu 24h / 100% passen. */
.fig--word .n{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2.125rem); line-height:1.05;
  letter-spacing:-.005em; text-transform:none;
}
.fig .k{
  font-family:var(--font-sans); font-size:.75rem; letter-spacing:.08em;
  color:var(--muted); margin-top:10px; text-transform:uppercase;
}

/* ============================================================
   ZIELGRUPPEN (02/06)
   ============================================================ */
.audience{ padding:var(--sec-pad) 0; }
.aud-list{ border-top:1px solid var(--hairline); margin-top:clamp(32px,4vw,48px); }
.aud-row{
  display:grid; grid-template-columns:96px 1.05fr 1.45fr; gap:clamp(20px,4vw,56px);
  padding:clamp(32px,4vw,48px) 0; border-bottom:1px solid var(--hairline);
  align-items:start;
}
.aud-row .a-no{
  font-family:var(--font-display); font-weight:400; font-size:clamp(2.5rem,4vw,3.5rem);
  color:var(--hairline); line-height:.85; font-variant-numeric:tabular-nums;
  transition:color .3s ease;
}
.aud-row:hover .a-no, .aud-row:focus-within .a-no{ color:var(--brass); }
.aud-headcol{ display:flex; flex-direction:column; gap:10px; }
.aud-row .a-tag{
  font-family:var(--font-sans); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-deep); font-weight:600;
}
.aud-icon{ color:var(--navy); margin-top:2px; }
.aud-icon svg{ width:34px; height:34px; }
.aud-row h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,3vw,2.0625rem); color:var(--navy); line-height:1.12; letter-spacing:-.01em; }
.aud-row p{ margin:0 0 16px; color:var(--ink); font-size:1.0625rem; line-height:1.62; }
.aud-row .a-key{
  font-family:var(--font-sans); font-size:.84375rem; color:var(--muted);
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:4px;
}
.aud-row .a-key span{ display:inline-flex; align-items:center; gap:8px; }
.aud-row .a-key span::before{ content:""; width:5px; height:5px; background:var(--brass); border-radius:50%; display:inline-block; flex:0 0 auto; }
.fact-box{
  margin-top:18px; border-left:2px solid var(--brass); background:var(--paper-2);
  padding:12px 16px; font-family:var(--font-mono); font-size:.8125rem; line-height:1.55; color:var(--ink);
}

/* ============================================================
   LEISTUNGEN (03/06) — Navy-Band, Positions-Tabelle
   ============================================================ */
.services{ background:var(--navy); color:var(--paper); padding:var(--sec-pad) 0; position:relative; overflow:hidden; }
/* Konstruktionsraster, weich per Radial-Maske ausgeblendet */
.services::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, var(--navy-line) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--navy-line) 0 1px, transparent 1px 96px);
  opacity:.30;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%);
}
.services .wrap{ position:relative; z-index:1; }
.services .sec-title{ color:var(--paper); }
.services .sec-label{ color:var(--on-navy-soft); }
.services .lead{ color:var(--on-navy); }
.services .sec-no{ color:var(--brass-light); }
.services .sec-no b{ color:var(--paper); }
.services .eyebrow{ color:var(--brass-light); }
.services .corner-marks::before,.services .corner-marks::after{ border-color:var(--brass-light); }

.svc-table{ border-top:1px solid var(--navy-line); margin-top:clamp(28px,4vw,44px); }
.svc-row{
  display:grid; grid-template-columns:64px 1fr 200px; gap:clamp(16px,3vw,40px);
  align-items:baseline; padding:clamp(22px,3vw,32px) 0; border-bottom:1px solid var(--navy-line);
}
.svc-row .s-no{ font-family:var(--font-display); font-weight:500; font-size:1.125rem; color:var(--brass-light); font-variant-numeric:tabular-nums; }
.svc-row .s-no svg{ width:30px; height:30px; display:block; }
.svc-main h3{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.25rem,2.2vw,1.5rem); color:var(--paper); line-height:1.18; margin-bottom:8px; letter-spacing:-.005em; }
.svc-main p{ color:var(--on-navy); font-size:1rem; line-height:1.55; max-width:54ch; }
.svc-meta{
  font-family:var(--font-mono); font-size:.78125rem; letter-spacing:.02em; color:var(--brass-light);
  text-align:right; line-height:1.5; padding-top:4px; font-variant-numeric:tabular-nums;
}

/* ============================================================
   MID-CTA — Versatz-CTA-Block (Brass + Navy-Hairline-Versatz)
   ============================================================ */
.ctaband{ background:var(--paper); padding:var(--sec-pad) 0; }
.ctaband-inner{ position:relative; }
/* versetzter Navy-Hairline-Rahmen dahinter */
.ctaband-inner::before{
  content:""; position:absolute; left:14px; top:14px; right:-14px; bottom:-14px;
  border:1px solid var(--navy); pointer-events:none;
}
.ctaband-card{
  position:relative; background:var(--brass-band); color:var(--navy-deep);
  padding:clamp(32px,5vw,56px) clamp(28px,4vw,56px);
  display:grid; grid-template-columns:1.4fr .7fr; gap:clamp(28px,5vw,56px); align-items:center;
}
.ctaband-card h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.75rem,3.6vw,2.75rem); color:var(--navy-deep); line-height:1.1; letter-spacing:-.01em; }
.ctaband-card h2 em{ font-style:italic; }
/* Fließ-/Micro-Text auf navy-deep für WCAG-AA-Kontrast (>=4.5:1) auf dem Goldband */
.ctaband-card p{ font-family:var(--font-sans); font-size:1rem; color:var(--navy-deep); margin-top:16px; max-width:48ch; line-height:1.6; }
.ctaband-side{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
.ctaband-side .btn{ width:100%; }
.ctaband-side .micro{ color:var(--navy-deep); }
.ctaband-side .micro b{ color:var(--navy-deep); }

/* ============================================================
   TEAM / KANZLEI (04/06)
   ============================================================ */
.team{ padding:var(--sec-pad) 0; }
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,56px); margin-top:clamp(32px,4vw,48px); }
/* Flex-Spalte, damit die Fakten-Liste (m-facts) per margin-top:auto am unteren
   Rand klebt → die Punkte beider Berater fluchten auf gleicher Baseline,
   auch wenn die Biografien unterschiedlich lang sind. */
.member{ border-top:1px solid var(--hairline); padding-top:26px; display:flex; flex-direction:column; }
.member .m-photo{
  position:relative; aspect-ratio:4/5; margin-bottom:24px; overflow:hidden;
  border:1px solid var(--hairline); background:var(--navy);
}
.member .m-photo picture{ position:absolute; inset:0; display:block; }
/* Navy-Duotone für stilistische Einheit (design-spec 4.5): die Platzhalter-
   Umfeldbilder werden entsättigt und in einen gemeinsamen Navy-Ton gezogen,
   damit warmes Innenmotiv und kühles Außenmotiv als EIN Bildpaar lesen. */
.member .m-photo img{
  position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover;
  filter:none;
}
.member .m-photo::before{ content:none; }   /* Duotone entfernt – Naturfarben (Tim) */
.member .m-photo::after{ content:none; }    /* dunkler Verlauf entfernt */
.member .m-photo .ph-corner{ z-index:3; font-family:var(--font-mono); }
.member .m-name{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.5rem,2.8vw,1.9375rem); color:var(--navy); line-height:1.05; }
.member .m-role{ font-family:var(--font-sans); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep); margin:10px 0 18px; font-weight:600; }
.member .m-bio{ font-size:1.03125rem; color:var(--ink); line-height:1.6; margin:0 0 18px; }
.member .m-facts{ list-style:none; margin:auto 0 0; padding:18px 0 0; border-top:1px solid var(--hairline-soft); font-family:var(--font-sans); }
.member .m-facts li{ display:flex; gap:14px; padding:7px 0; font-size:.875rem; }
.member .m-facts .fk{ flex:0 0 120px; color:var(--muted); letter-spacing:.02em; }
.member .m-facts .fv{ color:var(--ink); font-weight:500; }

/* ============================================================
   SOCIAL PROOF (05/06)
   ============================================================ */
.proof{ background:var(--paper-2); padding:var(--sec-pad) 0; border-top:1px solid var(--hairline); }
.proof-head{ margin-bottom:clamp(32px,4vw,44px); }
.proof-head .sec-title{ max-width:18ch; }
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.quote{ background:var(--paper); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; }
.quote .q-mark{ font-family:var(--font-display); font-size:3.25rem; line-height:.5; color:var(--brass-light); margin-bottom:18px; }
.quote p{ font-family:var(--font-display); font-weight:400; font-size:1.0625rem; line-height:1.55; color:var(--ink); margin:0 0 22px; flex:1; }
.quote .q-by{ font-family:var(--font-sans); font-size:.8125rem; color:var(--muted); border-top:1px solid var(--hairline-soft); padding-top:16px; line-height:1.5; }
.quote .q-by b{ color:var(--navy); font-weight:600; display:block; font-size:.875rem; letter-spacing:.01em; margin-bottom:2px; }
.proof-note{
  font-family:var(--font-sans); font-size:.8125rem; color:var(--muted); margin-top:22px;
  border-left:2px solid var(--brass); padding:8px 0 8px 14px; line-height:1.55;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ padding:var(--sec-pad) 0; }
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,72px); align-items:start; }
.faq-aside .sec-title{ position:static; }
.faq-aside .aside-note{ font-family:var(--font-sans); font-size:.875rem; color:var(--muted); margin-top:22px; max-width:32ch; line-height:1.55; }
.faq-list{ border-top:1px solid var(--hairline); }
details.qa{ border-bottom:1px solid var(--hairline); }
details.qa summary{
  list-style:none; cursor:pointer; padding:24px 48px 24px 0; position:relative;
  font-family:var(--font-display); font-weight:500; font-size:clamp(1.125rem,2vw,1.375rem);
  color:var(--navy); line-height:1.3;
}
details.qa summary::-webkit-details-marker{ display:none; }
details.qa summary::after{
  content:""; position:absolute; right:6px; top:30px; width:16px; height:16px;
  background:
    linear-gradient(var(--brass),var(--brass)) center/16px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) center/1.5px 16px no-repeat;
  transition:transform .25s ease;
}
details.qa[open] summary::after{ transform:rotate(45deg); }
details.qa .qa-body{ padding:0 48px 26px 0; }
details.qa .qa-body p{ margin:0; color:var(--ink); font-size:1.03125rem; line-height:1.62; }
details.qa .qa-body p + p{ margin-top:12px; }
.faq-fact{
  margin-top:14px; border-left:2px solid var(--brass); background:var(--paper-2);
  padding:10px 14px; font-family:var(--font-mono); font-size:.78125rem; color:var(--ink); line-height:1.5;
}

/* ============================================================
   KONTAKT / FORMULAR (06/06) — Navy-deep
   ============================================================ */
.contact{ background:var(--navy-deep); color:var(--paper); padding:var(--sec-pad) 0; position:relative; overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--navy-line) 0 1px, transparent 1px 96px);
  opacity:.22;
  -webkit-mask-image:radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
  mask-image:radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
}
.contact .wrap{ position:relative; z-index:1; }
.contact .eyebrow{ color:var(--brass-light); }
.contact .sec-no{ color:var(--brass-light); }
.contact .sec-no b{ color:var(--paper); }
.contact .sec-label{ color:var(--on-navy-soft); }
.contact .corner-marks::before,.contact .corner-marks::after{ border-color:var(--brass-light); }
.contact-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(32px,5vw,72px); align-items:start; }
.contact-info h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.875rem,4vw,3rem); color:var(--paper); line-height:1.06; letter-spacing:-.01em; margin-bottom:18px; }
.contact-info .ci-sub{ font-family:var(--font-sans); font-size:1rem; color:var(--on-navy); line-height:1.6; max-width:40ch; margin-bottom:34px; }
.nap{ border-top:1px solid var(--navy-line); }
.nap-row{ display:grid; grid-template-columns:92px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--navy-line); }
.nap-row .nk{ font-family:var(--font-sans); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-soft); padding-top:4px; }
.nap-row .nv{ font-family:var(--font-mono); font-size:.9375rem; color:var(--paper); line-height:1.55; font-variant-numeric:tabular-nums; }
/* E-Mail einzeilig halten (sie passt breitenmäßig); ggf. minimal kleiner */
.nap-row .nv-email{ font-size:.875rem; white-space:nowrap; }
.nap-row .nv a{ text-decoration:none; color:var(--paper); }
.nap-row .nv a:hover{ color:var(--brass-light); }
.map-link{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-family:var(--font-sans); font-size:.84375rem; color:var(--on-navy); text-decoration:none; letter-spacing:.02em; }
.map-link:hover{ color:var(--brass-light); }
.map-link svg{ width:16px; height:16px; flex:0 0 auto; }

/* Formular-Karte */
.formcard{ background:var(--paper); color:var(--ink); padding:clamp(26px,3.5vw,44px); border:1px solid var(--navy-line); }
/* Kurzer Intro-Satz über dem Schritt-Zähler (Reaktionszusage) */
.formcard-intro{ font-family:var(--font-sans); font-size:.9375rem; color:var(--muted); line-height:1.55; margin:0 0 22px; }
.form-top{ margin-bottom:24px; }
.form-step{ font-family:var(--font-sans); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.form-step b{ color:var(--navy); font-variant-numeric:tabular-nums; }
.progress{ display:flex; gap:6px; margin-top:12px; }
.progress i{ flex:1; height:3px; background:var(--hairline); display:block; transition:background .25s ease; }
.progress i.on{ background:var(--brass); }
.form-q{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.375rem,2.6vw,1.75rem); color:var(--navy); line-height:1.18; margin-bottom:8px; }
.form-qs{ font-family:var(--font-sans); font-size:.875rem; color:var(--muted); margin-bottom:24px; }

/* Steps — als fieldset ohne Default-Rahmen */
.fstep{ border:0; padding:0; margin:0; min-width:0; }
.fstep legend{ padding:0; }
/* Ohne JS (form ohne .js-active): ALLE Schritte sichtbar (noscript-Fallback) */
#leadForm:not(.js-active) .fstep{ display:block; margin-bottom:32px; }
#leadForm:not(.js-active) .fstep + .fstep{ border-top:1px solid var(--hairline-soft); padding-top:28px; }
/* Mit JS: nur der aktive Schritt */
#leadForm.js-active .fstep{ display:none; }
#leadForm.js-active .fstep.active{ display:block; animation:fade .3s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
/* Inaktiven Schritt-Button je Schritt wirklich ausblenden:
   .btn{display:inline-flex} überschriebe sonst das [hidden]-Attribut */
#leadForm .btn[hidden]{ display:none !important; }
/* Feature-Flag: deaktivierte Sektionen (z. B. Stimmen, Antwort 17) sicher ausblenden */
section[hidden]{ display:none !important; }
/* Ohne JS: Weiter/Zurück verstecken, Submit zeigen */
#leadForm:not(.js-active) #formNext,
#leadForm:not(.js-active) #formBack{ display:none; }
#leadForm:not(.js-active) #formSubmit{ display:inline-flex !important; }
/* Ohne JS: Fortschrittskopf ausblenden (.form-top ist Geschwister von #leadForm) */
.formcard:has(#leadForm:not(.js-active)) .progress{ display:none; }
.formcard:has(#leadForm:not(.js-active)) .form-step{ visibility:hidden; }

.ff-note-spaced{ margin-top:14px; }

/* Auswahl-Buttons (Line-Icon Choice) */
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choices.one-col{ grid-template-columns:1fr; }
.choice{
  position:relative; border:1px solid var(--hairline); background:var(--paper-3);
  padding:18px 18px; text-align:left; cursor:pointer;
  font-family:var(--font-sans); display:flex; flex-direction:column; gap:7px;
  transition:border-color .2s ease, background .2s ease; min-height:48px; border-radius:2px;
}
.choice input{ position:absolute; opacity:0; width:1px; height:1px; }
.choice:hover{ border-color:var(--navy); }
.choice .c-ico{ color:var(--navy); margin-bottom:2px; }
.choice .c-ico svg{ width:26px; height:26px; }
.choice .c-t{ font-size:.96875rem; font-weight:600; color:var(--navy); line-height:1.25; }
.choice .c-d{ font-size:.8125rem; color:var(--muted); line-height:1.4; }
.choice.is-selected{ border-color:var(--navy); background:#fff; box-shadow:inset 0 0 0 1px var(--navy); }
.choice .c-check{
  position:absolute; top:12px; right:12px; width:18px; height:18px; opacity:0; transition:opacity .15s ease;
  color:var(--brass);
}
.choice.is-selected .c-check{ opacity:1; }

/* Textfelder Schritt 5 */
.fields{ display:flex; flex-direction:column; gap:16px; }
.field label{ display:block; font-family:var(--font-sans); font-size:.8125rem; font-weight:600; color:var(--navy); margin-bottom:6px; letter-spacing:.01em; }
.field label .opt{ font-weight:400; color:var(--muted); letter-spacing:0; }
.field input, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:1rem; color:var(--ink);
  background:var(--paper-3); border:1px solid var(--hairline); border-radius:2px;
  padding:13px 14px; min-height:48px;
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.field input:focus, .field textarea:focus{ border-color:var(--navy); outline-offset:1px; }
.field.has-error input, .field.has-error textarea{ border-color:#9b2c2c; }
.field-error{ display:none; font-family:var(--font-sans); font-size:.78125rem; color:#9b2c2c; margin-top:6px; }
.field.has-error .field-error{ display:block; }

/* Honeypot — komplett unsichtbar, aus dem Tab-Flow */
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Formular-Fuß / Navigation
   Stabile Button-Leiste über alle Schritte: "Zurück" immer links,
   "Weiter"/"Anfrage absenden" immer rechts. Der Hinweistext steht als
   eigener Block (#footNote) ÜBER dieser Zeile und verschiebt die Buttons
   nicht. In Schritt 1 ist "Zurück" unsichtbar, hält aber seinen Platz,
   damit der primäre CTA nicht die Seite wechselt. */
.form-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:8px; padding-top:22px; border-top:1px solid var(--hairline-soft); }
#footNote{ margin-top:24px; }
.form-back{
  font-family:var(--font-sans); font-size:.875rem; color:var(--muted); background:none; border:0;
  cursor:pointer; padding:8px 4px; display:inline-flex; align-items:center; gap:8px;
}
.form-back:hover{ color:var(--navy); }
.form-back[hidden]{ display:none; }
.form-back.is-invisible{ visibility:hidden; pointer-events:none; }
.ff-note{ font-family:var(--font-sans); font-size:.78125rem; color:var(--muted); max-width:50ch; line-height:1.5; }
.ff-note a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }
.form-msg{ font-family:var(--font-sans); font-size:.875rem; margin-bottom:16px; padding:12px 14px; border-radius:2px; }
.form-msg.err{ background:#fbeaea; color:#7a2222; border-left:3px solid #9b2c2c; }
.form-msg[hidden]{ display:none; }

/* Sekundärer Kontaktweg unter Formular */
.form-alt{ font-family:var(--font-sans); font-size:.84375rem; color:var(--on-navy); margin-top:22px; max-width:60ch; line-height:1.6; }
.form-alt a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.form-alt a:hover{ color:var(--brass-light); }

/* Lokales Vertrauens-Band */
.local-band{ background:var(--navy); border-top:1px solid var(--navy-line); }
.local-band .wrap{
  display:flex; align-items:center; justify-content:center; gap:10px 22px; flex-wrap:wrap;
  padding-top:18px; padding-bottom:18px;
  font-family:var(--font-mono); font-size:.78125rem; letter-spacing:.06em; color:var(--on-navy);
  text-align:center;
}
.local-band .lb-sep{ color:var(--brass-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--navy-deep); color:var(--on-navy); padding:clamp(54px,6vw,82px) 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:46px; border-bottom:1px solid var(--navy-line); }
.footer .f-brand .logo{ width:220px; height:auto; margin-bottom:20px; }
.footer .f-tag{ font-family:var(--font-display); font-style:italic; font-size:1.125rem; color:var(--paper); line-height:1.4; max-width:30ch; }
.footer h4{ font-family:var(--font-sans); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-navy-soft); margin-bottom:18px; font-weight:600; }
.footer ul{ list-style:none; margin:0; padding:0; font-family:var(--font-sans); }
.footer ul li{ padding:7px 0; font-size:.90625rem; color:var(--on-navy); }
.footer ul li.muted{ color:var(--on-navy-soft); font-size:.8125rem; padding-top:10px; }
.footer ul a{ color:var(--on-navy); text-decoration:none; transition:color .2s ease; }
.footer ul a:hover{ color:var(--brass-light); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-top:26px; font-family:var(--font-sans); font-size:.78125rem; color:var(--on-navy-soft); }
.footer-bottom .legal{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-bottom .legal a{ color:var(--on-navy); text-decoration:none; }
.footer-bottom .legal a:hover{ color:var(--brass-light); }

/* ============================================================
   SUBPAGES (Impressum / Datenschutz / Danke / 404)
   ============================================================ */
.page-hero{ padding:clamp(56px,7vw,104px) 0 clamp(28px,3vw,40px); }
.page-hero h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,4.6vw,3.25rem); color:var(--navy); line-height:1.06; letter-spacing:-.015em; max-width:24ch; }
.page-hero .lead{ margin-top:18px; max-width:58ch; }
.prose{ padding-bottom:var(--sec-pad); }
/* Prose-Wrap behält die volle Seiten-Wrap-Breite (--maxw), damit seine linke
   Kante exakt mit Eyebrow/H1 der page-hero fluchtet. Die angenehme Lesebreite
   (820px) wird stattdessen linksbündig auf die Inhalts-Blöcke begrenzt – kein
   zentrierter Schmal-Container, also keine leere linke Spalte. */
.prose .wrap > *{ max-width:820px; }
.prose h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.375rem,2.4vw,1.75rem); color:var(--navy); margin:clamp(36px,4vw,52px) 0 14px; line-height:1.2; }
.prose h3{ font-family:var(--font-display); font-weight:500; font-size:1.1875rem; color:var(--navy); margin:28px 0 10px; }
.prose p{ margin:0 0 14px; color:var(--ink); font-size:1.03125rem; line-height:1.68; }
.prose a{ color:var(--brass-deep); text-underline-offset:2px; }
.prose ul{ margin:0 0 16px; padding-left:20px; color:var(--ink); }
.prose li{ margin-bottom:6px; line-height:1.6; }
.prose .placeholder{ color:var(--brass-deep); font-family:var(--font-mono); font-size:.9em; }
.prose hr{ border:0; border-top:1px solid var(--hairline); margin:clamp(32px,4vw,48px) 0; }
.prose .meta-note{ font-family:var(--font-mono); font-size:.8125rem; color:var(--muted); margin-top:8px; }

.centered-page{ min-height:62vh; display:flex; align-items:center; }
.centered-page .wrap{ text-align:center; }
.centered-page h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,5vw,3.25rem); color:var(--navy); line-height:1.08; letter-spacing:-.015em; max-width:20ch; margin:0 auto; }
.centered-page p{ margin:18px auto 32px; max-width:52ch; color:var(--muted); font-size:1.0625rem; line-height:1.6; }
.centered-page .cta-row{ justify-content:center; }
.centered-page .eyebrow{ margin-bottom:18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  :root{ --gut:var(--s-7); }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-right{ max-width:540px; }
  .aud-row{ grid-template-columns:80px 1fr; }
  .aud-row > div:last-child{ grid-column:1 / -1; }
  .svc-row{ grid-template-columns:52px 1fr; }
  .svc-meta{ grid-column:2; text-align:left; padding-top:10px; }
  .ctaband-card{ grid-template-columns:1fr; }
  .ctaband-side{ align-items:flex-start; }
  .ctaband-side .btn{ width:auto; min-width:280px; }
  .faq-grid{ grid-template-columns:1fr; }
  .faq-aside .sec-title{ position:static; }
  .contact-grid{ grid-template-columns:1fr; }
  .quotes{ grid-template-columns:1fr; }
}

/* Nav-Umschaltung auf Burger ab 1140px: die Desktop-Nav trägt jetzt 6 Links
   (Für wen, Leistungen, Kanzlei, Fragen, Karriere, DATEV) + CTA-Button neben
   dem breiten Wortmarken-Logo. Unter ~1140px liefe das sonst über und der
   rechte Rand würde abgeschnitten; darunter übernimmt das Burger-Menü. */
@media (max-width:1140px){
  .nav{ display:none; }
  .menu-btn{
    display:inline-flex; align-items:center; gap:9px; background:none; border:1px solid var(--navy);
    color:var(--navy); font-family:var(--font-sans); font-size:.8125rem; font-weight:600; padding:11px 15px;
    cursor:pointer; letter-spacing:.04em; min-height:46px; border-radius:2px;
  }
  .mobile-nav{ display:none; }
  .mobile-nav.show{ display:block; border-bottom:1px solid var(--hairline-soft); background:var(--paper); }
  .mobile-nav a{ display:block; padding:15px var(--gut); font-family:var(--font-sans); font-size:1rem; color:var(--ink); text-decoration:none; border-top:1px solid var(--hairline-soft); }
  .mobile-nav a:first-child{ border-top:0; }
  .mobile-nav .navcta{ color:var(--navy); font-weight:600; }
}

@media (max-width:760px){
  :root{ --gut:var(--s-5); --sec-pad:var(--s-8); }
  body{ font-size:16px; }
  .topbar .wrap{ min-height:64px; }
  /* Mobiler Header ist nur 64px hoch → kleinerer Anker-Offset, damit die
     Zielüberschrift sauber unter der Leiste sitzt (nicht zu tief). */
  html{ scroll-padding-top:66px; }
  /* Mobil begrenzt die Breite (Burger daneben), nicht die Höhe */
  .brand .logo{ height:auto; width:min(230px, 56vw); }

  .hero-right{ max-width:none; }
  .figband .wrap{ grid-template-columns:1fr 1fr; }
  .fig{ padding:22px 16px 22px 0; }
  .fig:nth-child(2){ border-right:0; }
  .fig:nth-child(3),.fig:nth-child(4){ border-top:1px solid var(--hairline); }

  .aud-row{ grid-template-columns:1fr; gap:14px; }
  .aud-row .a-no{ font-size:2.75rem; }
  /* Eyebrow-Label + Icon auf gemeinsamer Mittellinie statt baseline
     (SVG-Icons haben keine Glyphen-Baseline → schweben sonst über dem Label). */
  .aud-headcol{ flex-direction:row; align-items:center; gap:12px; flex-wrap:wrap; }
  .aud-headcol .a-tag{ order:1; }
  .aud-headcol .aud-icon{ order:0; margin-top:0; }
  .aud-headcol h3{ order:2; flex-basis:100%; margin-top:2px; }

  .svc-row{ grid-template-columns:44px 1fr; gap:14px; }

  .team-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .choices{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:14px; }
  .nap-row{ grid-template-columns:96px 1fr; }
  /* Auf schmalen Viewports darf die E-Mail wieder umbrechen, statt zu überlaufen. */
  .nap-row .nv-email{ white-space:normal; overflow-wrap:anywhere; }
  .btn{ width:100%; }
  .cta-row .btn{ width:100%; }
  .ctaband-side .btn{ width:100%; min-width:0; }
  .ctaband-inner::before{ right:-8px; bottom:-8px; left:8px; top:8px; }
  /* Zentrierte Statusseiten (404/Danke): CTA-Buttons als sauber gestapeltes,
     gleich breites Paar statt content-breit nebeneinander. */
  .centered-page .cta-row{ flex-direction:column; align-items:stretch; gap:14px; max-width:340px; margin-left:auto; margin-right:auto; }
  .centered-page .cta-row .btn{ width:100%; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Cookie-Consent-Banner (Opt-in) ---------- */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--navy); color:var(--on-navy); border-top:2px solid var(--brass); box-shadow:0 -6px 24px rgba(7,28,50,.22); }
.cookie-inner{ max-width:var(--maxw); margin:0 auto; padding:18px var(--gut); display:flex; align-items:center; gap:24px; flex-wrap:wrap; justify-content:space-between; }
.cookie-text{ font-family:var(--font-sans); font-size:.875rem; line-height:1.55; color:var(--on-navy); max-width:74ch; margin:0; }
.cookie-text a{ color:var(--brass-light); text-decoration:underline; }
.cookie-actions{ display:flex; gap:12px; flex:0 0 auto; }
.cookie-btn{ font-family:var(--font-sans); font-weight:600; font-size:.875rem; padding:11px 20px; border-radius:2px; cursor:pointer; border:1px solid transparent; min-height:44px; }
.cookie-decline{ background:transparent; color:var(--paper); border-color:var(--on-navy-soft); }
.cookie-decline:hover{ background:rgba(255,255,255,.08); }
.cookie-accept{ background:var(--brass); color:var(--navy); border-color:var(--brass); }
.cookie-accept:hover{ background:var(--brass-light); }
#cookieSettingsLink{ cursor:pointer; }
@media (max-width:640px){
  .cookie-inner{ padding:14px 20px; gap:12px; }
  .cookie-actions{ width:100%; }
  .cookie-btn{ flex:1; }
}