/* =============================================================
   Mikhail Iankovski - Design System (base.css)
   Marke: Navy / Paper / Charcoal / Dunkelrot
   Fraunces (Headlines) - IBM Plex Sans (Text) - IBM Plex Mono (Zahlen)
   Light-Standard (Paper), Dark optional. WCAG AA.
   ============================================================= */

/* ---- Tokens: Light (Paper) ---- */
:root {
  --brand:        #0F1E38;   /* tiefes Navy */
  --brand-2:      #0B1730;   /* dunkler Navy */
  --bg:           #F6F3EC;   /* Paper */
  --surface:      #FFFFFF;
  --surface-2:    #EDE5D3;
  --ink:          #16191F;   /* Charcoal */
  --muted:        #56606E;
  --border:       #E3DCCE;
  --link:         #8A1E2C;   /* Dunkelrot */
  --link-hover:   #6E1522;
  --accent-btn:       #8A1E2C;
  --accent-btn-hover: #6E1522;
  --on-accent:    #FFFFFF;
  --on-brand:     #EEEAE1;
  --ring:         #8A1E2C;

  --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Fluid type scale */
  --fs-display: clamp(2.5rem, 1.5rem + 4.8vw, 5.6rem);
  --fs-h1:      clamp(2.1rem, 1.4rem + 2.6vw, 3.2rem);
  --fs-h2:      clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem);
  --fs-h3:      clamp(1.2rem, 1.1rem + .4vw, 1.35rem);
  --fs-lede:    clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;

  /* Spacing scale (Standard) */
  --sp-1: 0.5rem; --sp-2: 0.75rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2rem;   --sp-6: 3rem;    --sp-7: 4.5rem; --sp-8: 6.5rem;
  --sp-9: clamp(5rem, 3.5rem + 5vw, 8.5rem);

  --maxw: 72rem;
  --maxw-prose: 44rem;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(16,25,40,.06), 0 8px 24px rgba(16,25,40,.06);
  --shadow-md: 0 2px 4px rgba(16,25,40,.07), 0 14px 34px rgba(16,25,40,.10);
  --shadow-lg: 0 2px 6px rgba(16,25,40,.08), 0 24px 60px rgba(16,25,40,.12);
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-hover: .3s;   /* gemeinsame Hover-Dauer, ruhig statt zackig */
}

/* ---- Tokens: Dark ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand:#12233F; --brand-2:#0A1322;
    --bg:#0A1322; --surface:#0F1D33; --surface-2:#13233D;
    --ink:#ECE6DB; --muted:#9BA7B7; --border:#243651;
    --link:#E79AA3; --link-hover:#F0B2B9;
    --accent-btn:#B0293A; --accent-btn-hover:#C6394B;
    --on-accent:#FFFFFF; --on-brand:#ECE6DB; --ring:#E79AA3;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.36);
    --shadow-md: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --brand:#12233F; --brand-2:#0A1322;
  --bg:#0A1322; --surface:#0F1D33; --surface-2:#13233D;
  --ink:#ECE6DB; --muted:#9BA7B7; --border:#243651;
  --link:#E79AA3; --link-hover:#F0B2B9;
  --accent-btn:#B0293A; --accent-btn-hover:#C6394B;
  --on-accent:#FFFFFF; --on-brand:#ECE6DB; --ring:#E79AA3;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.36);
  --shadow-md: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.5);
}

/* ---- Sektions-Varianten: dunkle Navy-Buehne + Surface-Buehne ----
   .section--dark remappt die Tokens, dadurch funktionieren alle
   Kindkomponenten (h2, .lede, .card, .field, .link-arrow) ohne Fork
   und der Dark-Toggle bleibt intakt. */
.section--dark {
  background:linear-gradient(165deg, var(--brand) 0%, var(--brand-2) 100%);
  color:var(--on-brand);
  --ink:var(--on-brand);
  --muted:color-mix(in srgb, var(--on-brand) 74%, transparent);
  --border:color-mix(in srgb, var(--on-brand) 18%, transparent);
  --link:#F0B2B9; --link-hover:#FFFFFF;
  --surface:color-mix(in srgb, #FFFFFF 7%, var(--brand));
  --ring:#F0B2B9;
  border-block:1px solid color-mix(in srgb, var(--on-brand) 12%, transparent);
}
.section--dark .eyebrow { color:#F0B2B9; }
.section--dark .eyebrow::before { background:#F0B2B9; }
.section--dark .trust-strip { background:transparent; }
.section--stage { background:var(--surface-2); border-block:1px solid var(--border); }

/* ---- Reset ---- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video,svg { max-width:100%; height:auto; display:block; }
a { color:var(--link); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:var(--link-hover); }
strong { font-weight:600; }
:target { scroll-margin-top:5.5rem; }

/* ---- Focus ---- */
:focus-visible { outline:3px solid var(--ring); outline-offset:2px; border-radius:2px; }

/* ---- Headings ---- */
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.12; color:var(--ink); letter-spacing:-.01em; }
h1 { font-size:var(--fs-h1); }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); font-weight:600; }
.display { font-size:var(--fs-display); font-weight:600; line-height:1.0; letter-spacing:-.025em; }
.num { font-family:var(--font-mono); font-feature-settings:"tnum" 1; letter-spacing:-.01em; }

/* ---- Layout ---- */
.container { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(1.35rem,4vw,2.5rem); }
.section { padding-block:var(--sp-9); }
.section--tight { padding-block:var(--sp-7); }
/* Fuer-wen-Reihe und Leistungen ruecken als zusammengehoeriges Kapitel eng zusammen */
.logo-wall + .section--tight { padding-bottom:var(--sp-4); }
#leistungen { padding-top:var(--sp-6); }
.prose-wrap { max-width:var(--maxw-prose); }
.eyebrow {
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--link);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before { content:""; width:1.6rem; height:1px; background:var(--link); display:inline-block; }
.lede { font-size:var(--fs-lede); line-height:1.55; color:var(--ink); }
.center { text-align:center; }
.center .eyebrow { justify-content:center; }

.grid { display:grid; gap:var(--sp-4); }
@media (min-width:720px){
  .cols-2 { grid-template-columns:repeat(2,1fr); }
  .cols-3 { grid-template-columns:repeat(3,1fr); }
  /* Ueberschriften-Ausgleich: Fliesstexte einer Kartenreihe starten auf gleicher Hoehe */
  .grid--align-heads .stack h3, .grid--align-heads .card h3 { min-height:2.3em; }
}
.stack > * + * { margin-top:var(--sp-3); }

/* ---- Header / Nav ---- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-height:4.25rem; }
.brand { display:inline-flex; align-items:baseline; gap:.55rem; font-family:var(--font-head); font-weight:600; font-size:1.15rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.brand:hover { color:var(--ink); }
.brand .mark { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; color:var(--link); border:1px solid var(--link); border-radius:3px; padding:.15rem .35rem; transform:translateY(-2px); white-space:nowrap; }
/* Sehr schmale Screens: Chip unter den Namen stapeln statt ausblenden */
@media (max-width:460px){
  .site-header .brand { flex-direction:column; align-items:flex-start; gap:.15rem; }
  .site-header .brand .mark { transform:none; font-size:.58rem; padding:.1rem .3rem; }
}
.nav-links { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2rem); list-style:none; }
.nav-links a { color:var(--ink); text-decoration:none; font-size:.95rem; font-weight:500; transition:color var(--t-hover) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--link); }
@media (min-width:821px){
  .nav-links a { position:relative; padding-bottom:.2rem; }
  .nav-links a::after {
    content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
    background:var(--link); transition:right var(--t-hover) var(--ease);
  }
  .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right:0; }
  @media (prefers-reduced-motion: reduce){ .nav-links a::after { transition:none; } }
}
.nav-actions { display:flex; align-items:center; gap:.75rem; }
.theme-toggle, .nav-toggle {
  display:inline-grid; place-items:center; width:2.75rem; height:2.75rem;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--ink); cursor:pointer; transition:border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.theme-toggle:hover, .nav-toggle:hover { border-color:var(--link); }
.theme-toggle svg { width:1.15rem; height:1.15rem; }
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:block; }
}
.nav-toggle { display:none; }
/* Burger-Balken, morphen bei aria-expanded zum X.
   Mitte verschwindet beim Oeffnen sofort; beim Schliessen dreht erst das X
   zurueck, dann erscheint die Mitte wieder (Verzoegerung im Grundzustand). */
.nav-toggle .bar {
  display:block; width:1.15rem; height:2px; background:currentColor; border-radius:1px;
  transition:transform var(--t-hover) var(--ease), opacity .12s var(--ease) .18s;
}
.nav-toggle .bar + .bar { margin-top:4px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity:0; transition:opacity .08s var(--ease); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
/* Sehr schmale Screens: Header-CTA ausblenden (Hero traegt denselben CTA), verhindert Overflow */
@media (max-width:480px){ .nav-actions .btn { display:none; } }
@media (max-width:820px){
  /* Beide Knoepfe als Paar hart rechts, Menueknopf ganz aussen */
  .nav { justify-content:flex-start; gap:var(--sp-3); }
  .nav-actions { order:2; margin-left:auto; }
  .nav-toggle {
    order:3; display:inline-flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .nav-links {
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--surface); border-bottom:1px solid var(--border); padding:var(--sp-2) 0;
    box-shadow:var(--shadow); display:flex;
    opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
    transition:opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
               visibility 0s linear var(--t-hover);
  }
  .nav-links.open {
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
  }
  .nav-links li { width:100%; }
  .nav-links a { display:block; width:100%; padding:.85rem clamp(1.1rem,4vw,2.5rem); }
  @media (prefers-reduced-motion: reduce){
    .nav-links, .nav-links.open, .nav-toggle .bar { transition:none; }
  }
}

/* ---- Buttons ---- */
.btn {
  --_bg:var(--accent-btn); --_bgh:var(--accent-btn-hover); --_fg:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-body); font-weight:500; font-size:1rem; line-height:1;
  padding:.85rem 1.4rem; min-height:2.85rem; border-radius:var(--radius);
  background:var(--_bg); color:var(--_fg); border:1px solid var(--_bg);
  text-decoration:none; cursor:pointer;
  transition:background var(--t-hover) var(--ease), transform .15s var(--ease),
             border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease),
             color var(--t-hover) var(--ease);
}
.btn:hover { background:var(--_bgh); border-color:var(--_bgh); color:var(--_fg); box-shadow:var(--shadow); }
.btn:active { transform:translateY(1px); box-shadow:none; }
.btn svg { width:1.05rem; height:1.05rem; transition:transform var(--t-hover) var(--ease); }
.btn:hover svg { transform:translateX(3px); }
@media (prefers-reduced-motion: reduce){ .btn svg, .btn:hover svg { transition:none; transform:none; } }
.btn-ghost {
  --_bg:transparent; --_fg:var(--ink);
  border:1px solid var(--border);
}
.btn-ghost:hover { --_bgh:transparent; border-color:var(--link); color:var(--link); }
.btn-brand { --_bg:var(--brand); --_bgh:var(--brand-2); --_fg:var(--on-brand); border-color:var(--brand); }

.link-arrow { display:inline-flex; align-items:center; gap:.4rem; font-weight:500; text-decoration:none; transition:color var(--t-hover) var(--ease); }
.link-arrow svg { width:1rem; height:1rem; transition:transform var(--t-hover) var(--ease); }
.link-arrow:hover svg { transform:translateX(3px); }

/* ---- Cards ---- */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-4);
  transition:border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
.card--hover:hover { border-color:color-mix(in srgb,var(--link) 45%, var(--border)); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card h3 { margin-bottom:.5rem; }
.card p { color:var(--muted); }
.card .kicker { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--link); }
@media (prefers-reduced-motion: reduce){ .card--hover:hover { transform:none; } }

/* ---- Hero (Navy-Buehne, Trust-Strip integriert) ---- */
.hero {
  position:relative; overflow:hidden; z-index:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(2rem, 4vh, 3rem);
  padding-block:clamp(2.5rem, 5vh, 4rem) 0;
}
/* Kompakte Buehne: Logo-Band lugt auf typischen Screens in den ersten Viewport */
@media (min-width:900px){ .hero { min-height:min(70vh, 46rem); } }
/* Mobil: kompakter Einstieg, weniger Leerraum zwischen Header und Eyebrow */
@media (max-width:899px){ .hero { padding-top:clamp(2.25rem, 4vh, 3.5rem); } }
.hero::before {
  content:""; position:absolute; top:-22%; right:-8%; width:58%; height:80%; z-index:-1;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--link) 7%, transparent), transparent 72%);
  pointer-events:none;
}
.hero-grid { display:grid; gap:var(--sp-6); align-items:center; }
@media (min-width:900px){ .hero-grid { grid-template-columns:1.15fr .85fr; } }
.hero .display { margin:var(--sp-3) 0 var(--sp-4); }
.hero .lede { max-width:34rem; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:var(--sp-5); }
.hero-media { position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-lg); }
.hero-media img { width:100%; aspect-ratio:4/5; object-fit:cover; }
/* Engerer Bildausschnitt (Zoom auf die Person), Rahmen schneidet sauber */
.hero-media .img-zoom { transform:scale(1.35); transform-origin:46% 22%; }
.hero-media .caption {
  position:absolute; left:0; right:0; bottom:0; padding:1.1rem 1.2rem;
  background:linear-gradient(to top, rgba(11,23,48,.82), transparent);
  color:#EEEAE1; font-size:.82rem; font-family:var(--font-mono); letter-spacing:.03em;
}

/* ---- Hero-Ladechoreografie (rein CSS, kein JS, kein Layout-Shift) ---- */
@keyframes hero-rise { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
.hero-copy > * { animation:hero-rise .7s var(--ease) both; }
.hero-copy > .eyebrow { animation-delay:.08s; }
.hero-copy > h1 { animation-delay:.2s; }
.hero-copy > .lede { animation-delay:.34s; }
.hero-copy > .hero-cta { animation-delay:.48s; }
.hero .hero-media { animation:hero-rise .8s var(--ease) .58s both; }
.hero .trust-strip { animation:hero-rise .7s var(--ease) .72s both; }
@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .hero .hero-media, .hero .trust-strip { animation:none; }
}

/* ---- Stat row (minmax(0,1fr) verhindert inhaltsgetriebene Spaltenbreiten) ---- */
.stats { display:grid; gap:var(--sp-4); grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat .stat-num { font-family:var(--font-mono); font-size:clamp(1.9rem, 1.3rem + 1.8vw, 3.4rem); font-weight:500; color:var(--brand); line-height:1; }
/* Auf dunklen Buehnen erben die Zahlen die helle Textfarbe, themenunabhaengig */
.section--dark .stat .stat-num,
:root[data-theme="dark"] .section--dark .stat .stat-num { color:var(--ink); }
:root[data-theme="dark"] .stat .stat-num { color:var(--ink); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .stat .stat-num { color:var(--ink); } }
.stat .stat-label { margin-top:.5rem; font-size:.9rem; color:var(--muted); }

/* ---- Feature/step list: Liniensegmente von Chip zu Chip, enden exakt am letzten ---- */
.steps { counter-reset:step; display:grid; gap:var(--sp-4); }
.step { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3); align-items:start; position:relative; }
.step:not(:last-child)::after {
  content:""; position:absolute; left:1.2rem; top:2.3rem; bottom:calc(-1 * var(--sp-4)); width:1px;
  background:linear-gradient(var(--link), var(--link)) top / 1px 0% no-repeat,
             linear-gradient(var(--border), var(--border));
}
@supports (animation-timeline: view()) {
  .step:not(:last-child)::after {
    animation:steps-draw linear both; animation-timeline:view(); animation-range:entry 30% entry 90%;
  }
  @keyframes steps-draw { to { background-size:1px 100%, auto; } }
}
@media (prefers-reduced-motion: reduce){ .step:not(:last-child)::after { animation:none; } }
.step::before {
  counter-increment:step; content:counter(step,decimal-leading-zero);
  font-family:var(--font-mono); font-size:.85rem; color:var(--link); font-weight:500;
  border:1px solid var(--border); border-radius:var(--radius); padding:.35rem .5rem; min-width:2.4rem; text-align:center;
  background:var(--surface-2); position:relative; z-index:1;
}

/* ---- Panel (navy block) ---- */
.panel-brand {
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color:var(--on-brand); border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,3rem);
  box-shadow:var(--shadow-md);
  position:relative; overflow:hidden; z-index:0;
}
/* Monogramm-Wasserzeichen: vom Panel-Rahmen kontrolliert angeschnitten,
   dadurch auf jeder Bildschirmgroesse identisch und bewusst wirkend */
.panel-brand::after {
  content:"I"; position:absolute; z-index:-1;
  right:clamp(1rem,2.5vw,2.6rem); bottom:-2.6rem;
  font-family:var(--font-head); font-style:italic; font-weight:600; line-height:1;
  font-size:clamp(10rem, 15vw, 16rem);
  color:color-mix(in srgb, var(--on-brand) 9%, transparent);
  pointer-events:none; user-select:none;
}
.panel-brand h2, .panel-brand h3 { color:var(--on-brand); }
.panel-brand .lede { color:color-mix(in srgb,var(--on-brand) 82%, transparent); }
.panel-brand a:not(.btn) { color:#F0B2B9; }

/* ---- Fachbeitraege: Artikel-Hero, Autorenzeile, Autorenbox, Fakten-Kacheln ---- */
.article-hero { padding-block:var(--sp-6) var(--sp-6); }
.article-hero .article-head { max-width:60rem; }
/* Mobile Silbentrennung fuer lange deutsche Komposita in Ueberschriften
   (Beitragsbemessungsgrenze u.ae. sind breiter als ein Handy-Display) */
@media (max-width:600px){
  .article-head h1, .prose h2, .prose h3, .service-item > summary {
    hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
  }
}
.share-row { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-top:var(--sp-5); }
.share-label { font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-right:.4rem; }
.share-btn {
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border:1px solid var(--border); border-radius:var(--radius); color:var(--ink);
  transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.share-btn:hover { border-color:var(--link); color:var(--link); transform:translateY(-2px); }
.share-btn svg { width:1.15rem; height:1.15rem; }
.article-hero .breadcrumb a:hover { color:var(--link); }
.author-line { align-items:center; }
.author-avatar {
  width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); flex:none;
}
.author-box {
  display:flex; gap:var(--sp-4); align-items:center;
  border-block:1px solid var(--border); padding-block:var(--sp-4); margin-top:var(--sp-6);
}
.author-box .author-avatar { width:4.5rem; height:4.5rem; }
.author-box p { font-size:.98rem; margin:0; }
.author-box .author-name { font-family:var(--font-head); font-weight:600; font-size:1.15rem; }
.fact-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); margin-block:var(--sp-5); }
.fact-row .fact-num { font-family:var(--font-mono); font-weight:500; font-size:clamp(1.6rem,1.2rem+1.4vw,2.4rem); color:var(--link); line-height:1; }
.fact-row .fact-label { margin-top:.4rem; font-size:.85rem; color:var(--muted); line-height:1.4; }
.read-progress { position:fixed; top:0; left:0; height:3px; background:var(--link); width:0; z-index:60; }

/* ---- Prose (Blog articles) ---- */
.prose { max-width:var(--maxw-prose); }
.prose > * + * { margin-top:1.15rem; }
.prose h2 { font-size:var(--fs-h2); margin-top:2.6rem; margin-bottom:.2rem; }
.prose h3 { font-size:var(--fs-h3); margin-top:1.9rem; }
.prose p, .prose li { font-size:1.09rem; line-height:1.72; }
.prose ul, .prose ol { padding-left:1.3rem; }
.prose li + li { margin-top:.4rem; }
.prose a { font-weight:500; }
.prose blockquote {
  border-left:3px solid var(--link); padding:.2rem 0 .2rem 1.3rem; margin-block:1.8rem;
  font-family:var(--font-head); font-style:italic; font-size:1.25rem; line-height:1.4; color:var(--ink);
}
.prose figure { margin-block:2rem; }
.prose figcaption { font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.prose code { font-family:var(--font-mono); font-size:.9em; background:var(--surface-2); padding:.1rem .35rem; border-radius:3px; }
.prose .callout {
  background:linear-gradient(165deg, var(--brand) 0%, var(--brand-2) 100%);
  border:none; border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5);
  color:var(--on-brand); box-shadow:var(--shadow-md);
}
.prose .callout .kicker {
  display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:#F0B2B9; margin-bottom:.6rem;
}
.prose .callout p { font-size:1rem; color:var(--on-brand); }
.prose .callout strong { color:#FFFFFF; }
.prose hr { border:none; border-top:1px solid var(--border); margin-block:2.4rem; }

/* ---- Article header/meta ---- */
.article-head { max-width:var(--maxw-prose); }
.article-meta { display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center; color:var(--muted); font-size:.88rem; font-family:var(--font-mono); }
.tag { display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--link); border:1px solid var(--border); border-radius:99px; padding:.25rem .7rem; }

/* ---- Blog list cards (ganze Karte klickbar via Stretched Link) ---- */
.post-card { display:flex; flex-direction:column; height:100%; position:relative; }
.post-card .kicker { margin-bottom:.6rem; }
.post-card h3 { font-size:1.3rem; margin-bottom:.5rem; }
.post-card h3 a { color:var(--ink); text-decoration:none; transition:color var(--t-hover) var(--ease); }
.post-card h3 a::after { content:""; position:absolute; inset:0; border-radius:var(--radius-lg); }
.post-card:hover h3 a { color:var(--link); }
.post-card h3 a:focus-visible::after { outline:3px solid var(--ring); outline-offset:2px; }
.post-card p { flex:1; }
.post-card .post-meta { margin-top:var(--sp-3); font-family:var(--font-mono); font-size:.8rem; color:var(--muted); }

/* ---- Forms ---- */
.field { display:flex; flex-direction:column; gap:.4rem; }
.field label { font-weight:500; font-size:.95rem; }
.field .hint { font-size:.82rem; color:var(--muted); }
.field input, .field textarea, .field select {
  font-family:var(--font-body); font-size:1rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:.75rem .85rem; min-height:2.85rem; width:100%;
}
.field input:focus, .field textarea:focus { border-color:var(--link); outline:2px solid color-mix(in srgb,var(--link) 40%, transparent); outline-offset:0; }
.req { color:var(--link); }

/* ---- Footer ---- */
.site-footer { background:var(--brand-2); color:var(--on-brand); margin-top:0; }
.site-footer a { color:#E7CBCF; text-decoration:none; transition:color var(--t-hover) var(--ease); }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.footer-grid { display:grid; gap:var(--sp-5); padding-block:var(--sp-6) var(--sp-4); }
@media (min-width:720px){ .footer-grid { grid-template-columns:1.4fr 1fr 1fr; } }
.footer-grid h3, .footer-grid h4 { color:#fff; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; font-weight:500; margin-bottom:.9rem; }
.footer-grid ul { list-style:none; display:grid; gap:.55rem; padding:0; margin:0; }
.footer-brand p { color:color-mix(in srgb,var(--on-brand) 78%, transparent); max-width:26rem; font-size:.95rem; }
.footer-legal {
  padding-block:var(--sp-3); position:relative;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center; justify-content:space-between;
  font-size:.82rem; color:color-mix(in srgb,var(--on-brand) 70%, transparent);
}
/* Trennlinie full-bleed, konsistent mit der Disclosure-Kante darueber */
.footer-legal::before {
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; height:1px; background:rgba(255,255,255,.12);
}
.social-row { display:flex; gap:.6rem; margin-top:1.1rem; }
.social-btn {
  width:2.75rem; height:2.75rem; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--radius); color:#E7CBCF;
  transition:border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease);
}
.social-btn:hover { border-color:#fff; color:#fff; text-decoration:none; transform:translateY(-2px); }
.social-btn svg { width:1.2rem; height:1.2rem; }
.footer-legal .num { font-size:.8rem; }

/* ---- Compliance disclosure strip (verschmilzt mit dem dunklen Schlussblock) ---- */
.disclosure {
  background:var(--brand-2); border-top:1px solid rgba(255,255,255,.12);
  font-size:.82rem; color:color-mix(in srgb, var(--on-brand) 70%, transparent); line-height:1.55;
}
.disclosure .container { padding-block:var(--sp-3); }

/* ---- Skip link ---- */
.skip-link {
  position:absolute; left:.5rem; top:-3rem; z-index:100; background:var(--brand); color:#fff;
  padding:.6rem 1rem; border-radius:var(--radius); transition:top .15s var(--ease); text-decoration:none;
}
.skip-link:focus { top:.5rem; color:#fff; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-family:var(--font-mono); font-size:.78rem; color:var(--muted); display:flex; gap:.5rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--link); }

/* ---- Reveal on scroll (progressive, no-JS safe) ---- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in, .no-js .reveal { opacity:1; transform:none; }
/* Groesserer Hub fuer Karten */
.reveal--lg { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.reveal--lg.in, .no-js .reveal--lg { opacity:1; transform:none; }
/* Wipe fuer Bildflaechen */
.reveal--wipe { opacity:0; clip-path:inset(0 0 14% 0); transition:clip-path .9s var(--ease), opacity .6s var(--ease); }
.reveal--wipe.in, .no-js .reveal--wipe { opacity:1; clip-path:inset(0); }
/* Gestaffelter Einlauf innerhalb von Grids (Kaskade statt Block) */
.grid .reveal:nth-child(2), .grid .reveal--lg:nth-child(2) { transition-delay:.09s; }
.grid .reveal:nth-child(3), .grid .reveal--lg:nth-child(3) { transition-delay:.18s; }
.grid .reveal:nth-child(4), .grid .reveal--lg:nth-child(4) { transition-delay:.09s; }
.grid .reveal:nth-child(5), .grid .reveal--lg:nth-child(5) { transition-delay:.18s; }
.grid .reveal:nth-child(6), .grid .reveal--lg:nth-child(6) { transition-delay:.27s; }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal--lg, .reveal--wipe { opacity:1; transform:none; clip-path:none; transition:none; }
}

/* ---- Trust-Strip (Kurzprofil-Leiste unter dem Hero) ---- */
.trust-strip { border-block:1px solid var(--border); background:color-mix(in srgb, var(--surface-2) 55%, var(--bg)); }
.trust-items {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.5rem 2.2rem; padding-block:.9rem;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--muted);
}
.trust-items span { display:inline-flex; align-items:center; gap:2.2rem; }
.trust-items span + span::before { content:"\00B7"; color:var(--link); font-weight:700; }
/* Schmale Screens: gestapelte Liste ohne Trennpunkte (nichts zu trennen) */
@media (max-width:600px){
  .trust-items { flex-direction:column; gap:.45rem; }
  .trust-items span { gap:0; }
  .trust-items span + span::before { content:none; }
}

/* ---- Logo-Wall (Referenzen, laufendes Band) ---- */
.logo-wall { padding-block:var(--sp-5); border-bottom:1px solid var(--border); }
.logos-title {
  text-align:center; font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-4);
}
/* Logo-Band: endloser Auto-Lauf per JS (site.js), frei greifbar per Maus-Drag,
   Touch-Wisch und Trackpad. Beruehrung pausiert, danach laeuft es weiter. */
.logo-marquee {
  overflow-x:auto; overflow-y:hidden; position:relative;
  scrollbar-width:none; cursor:grab;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.logo-marquee::-webkit-scrollbar { display:none; }
.logo-marquee.dragging { cursor:grabbing; }
.logo-marquee.dragging .logo-tile { pointer-events:none; }
.logo-track { display:flex; width:max-content; }
.logo-group { display:flex; align-items:stretch; gap:var(--sp-4); padding-right:var(--sp-4); }
@keyframes logo-scroll { to { transform:translateX(-50%); } }
.logo-tile {
  display:flex; align-items:center; justify-content:center;
  background:#FFFFFF; border:1px solid var(--border); border-radius:var(--radius-lg);
  height:4.6rem; padding:0 1.5rem; min-width:9.5rem;
  text-decoration:none; transition:border-color var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease);
}
a.logo-tile:hover { border-color:color-mix(in srgb,var(--link) 45%, var(--border)); box-shadow:var(--shadow); }
.logo-tile img {
  max-height:2.6rem; max-width:8rem; width:auto; height:auto;
  filter:grayscale(1); opacity:.85;
  transition:filter var(--t-hover) var(--ease), opacity var(--t-hover) var(--ease);
}
.logo-tile:hover img { filter:none; opacity:1; }
@media (prefers-reduced-motion: reduce){
  .logo-track { animation:none; width:auto; flex-wrap:wrap; justify-content:center; }
  .logo-group { flex-wrap:wrap; justify-content:center; padding-right:0; }
  .logo-group[aria-hidden="true"] { display:none; }
  .logo-marquee { -webkit-mask-image:none; mask-image:none; }
}

/* ---- Leistungs-Akkordeons (native details, kein JS, CSP-sicher) ---- */
.service-list { width:100%; }
.service-item { border-top:1px solid var(--border); }
.service-item:last-child { border-bottom:1px solid var(--border); }
.service-item > summary {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding-block:1.15rem;
  font-family:var(--font-head); font-weight:600; font-size:clamp(1.2rem, 1.05rem + .8vw, 1.5rem);
  color:var(--ink); cursor:pointer; list-style:none;
  transition:color var(--t-hover) var(--ease);
}
.service-item > summary::-webkit-details-marker { display:none; }
.service-item > summary svg {
  width:1.15rem; height:1.15rem; flex:none; color:var(--link);
  transition:transform var(--t-hover) var(--ease);
}
.service-item > summary:hover { color:var(--link); }
.service-item[open] > summary { color:var(--link); }
.service-item[open] > summary svg { transform:rotate(90deg); }
.service-body { padding:0 0 1.5rem; max-width:60ch; }
.service-body .kicker { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--link); display:block; margin-bottom:.5rem; }
.service-body p { margin:0; }
.service-body ul { margin:.7rem 0 0; padding-left:1.2rem; display:grid; gap:.4rem; }
.service-body .service-note { margin-top:.9rem; font-size:.9rem; color:var(--muted); }
.service-item[open] .service-body { animation:acc-in .5s var(--ease); }
@keyframes acc-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
/* Hoehen-Animation macht site.js browserunabhaengig (WAAPI), inkl. Safari */
@media (prefers-reduced-motion: reduce){
  .service-item[open] .service-body { animation:none; }
}

/* ---- Overlap-Scroll: Ablauf bleibt haften, die folgenden Sektionen
   schieben sich darueber (Vorhang-Effekt). top-Formel pinnt erst,
   wenn die Sektion einmal komplett sichtbar war. ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Pin-Punkt (top) setzt site.js aus der echten Sektionshoehe; ohne JS kein Effekt, kein Schaden */
  #ablauf { position:sticky; }
  /* Alle folgenden Sektionen zeichnen ueber dem gepinnten Ablauf */
  #ablauf ~ * { position:relative; z-index:1; }
  .panel-stage { box-shadow:0 -28px 60px rgba(10,19,34,.38); }
}

/* ---- Navy-Insel (full-bleed Kapitelwechsel) mit Riesentext-Marquee ---- */
.panel-stage { position:relative; overflow:hidden; z-index:0; }
.panel-stage > .container { position:relative; z-index:1; }
.type-marquee {
  position:absolute; left:0; bottom:-1.2rem; z-index:0;
  display:flex; width:max-content; white-space:nowrap;
  font-family:var(--font-body); font-weight:600; line-height:1;
  font-size:clamp(4rem, 8vw, 7.5rem);
  text-transform:uppercase; letter-spacing:.04em;
  color:color-mix(in srgb, var(--on-brand) 7%, transparent);
  animation:logo-scroll 70s linear infinite;
  user-select:none;
}
/* Pausiert nur beim Hover ueber dem Lauftext selbst, nicht ueber der ganzen Sektion */
.type-marquee:hover { animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){ .type-marquee { display:none; } }

/* ---- Profil-Szene: Gendarmenmarkt als Hintergrund (Variante B) ---- */
.profil-scene {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--brand) 88%, transparent) 0%, color-mix(in srgb, var(--brand-2) 94%, transparent) 100%),
    url("/assets/img/gendarmenmarkt-1800.jpg?v=2") center / cover no-repeat;
}
.profil-scene .caption-note {
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.08em;
  color:color-mix(in srgb, var(--on-brand) 55%, transparent); margin-top:var(--sp-5);
}

/* ---- CTA-Band (einzige rote Vollflaeche der Seite) ---- */
.cta-band { background:var(--accent-btn); color:#fff; padding-block:clamp(2.2rem, 4vw, 3rem); }
.cta-band-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.cta-band-line { font-family:var(--font-head); font-weight:600; font-size:clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); color:#fff; margin:0; }
.btn-paper { --_bg:#F6F3EC; --_bgh:#FFFFFF; --_fg:#8A1E2C; border-color:#F6F3EC; }
.btn-paper:hover { border-color:#FFFFFF; }

/* ---- Helle Formularkarte auf dunkler Buehne (lokaler Token-Reset) ---- */
.card--paper {
  --ink:#16191F; --muted:#56606E; --border:#E3DCCE; --surface:#FFFFFF;
  --link:#8A1E2C; --link-hover:#6E1522; --ring:#8A1E2C;
  background:#FBF9F4; color:var(--ink); border:none; box-shadow:var(--shadow-lg);
}

/* ---- Utilities ---- */
.muted { color:var(--muted); }
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}
.mb-4{margin-bottom:var(--sp-4)}
.mb-6{margin-bottom:var(--sp-6)}
.hr { border:none; border-top:1px solid var(--border); }
.visually-hidden { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

@media print {
  .site-header,.site-footer,.hero-media,.theme-toggle,.nav-toggle { display:none; }
  body { background:#fff; color:#000; }
}