@charset "UTF-8";
/* ============================================================
   SINC Insurance Consulting · Design System v2
   Shared stylesheet for all site pages
   ============================================================ */

:root{
  /* Color palette */
  --ink:#1a1a1a;
  --ink-rgb:26,26,26;       /* Kanaltripel von --ink für rgba()-Ableitungen (Header-Border/-Schatten) — mit --ink synchron halten */
  --ink-soft:#3a3a3a;
  --muted:#595754;
  --muted-soft:#aaa8a3;
  --paper:#f5f2ec;
  --paper-rgb:245,242,236;  /* Kanaltripel von --paper für Milchglas-Flächen + Hero-Vignette — mit --paper synchron halten */
  --paper-bright:#fbfaf6;
  --rule:rgba(26,26,26,.18);
  --rule-soft:rgba(26,26,26,.10);
  --blue:#0057A3;
  --blue-rgb:0,87,163;      /* Kanaltripel von --blue für rgba()-Ableitungen (Themenlisten-Hover) — mit --blue synchron halten */
  --error:#8c2a20;   /* Formular-Fehler: 7,6:1 auf --paper (WCAG AAA) */

  /* Typography */
  --display:'D-DIN','DIN Next','Helvetica Neue',sans-serif;
  --body:'Noto Sans','Helvetica Neue',Arial,sans-serif;

  /* Schriftstaerken je Rolle (Customizer-Live Etappe 4, wertneutral eingefuehrt):
     steuerbar ueber SINC-Design; Kursiv-Woerter in Ueberschriften, strong/b
     im Fliesstext (500), Navigation, Kennzahlen, Pull-Zitate und Glyphen
     bleiben bewusst fest (Tabelle in BACKEND-KONZEPT.md Anhang 5.4) */
  --fw-display:700;   /* Rolle Ueberschriften: h1-h6, Karten-/Item-Titel */
  --fw-body:300;      /* Rolle Fliesstext: Absaetze, Leden, Listen, Cookie-Tabellen */
  --fw-ui:400;        /* Rolle Labels & Buttons: .label, Buttons, Nav-Kontakt, num-tag */

  /* Schriftgroessen — Display-Ebene */
  --fs-hero-home:    clamp(48px, 7.2vw, 112px);
  --fs-hero-page:    clamp(48px, 7vw,   108px);
  --fs-num:          clamp(56px, 5vw,    88px);
  --fs-cta:          clamp(40px, 5.4vw,  84px);

  /* Schriftgroessen — Headline-Ebene */
  --fs-h2-person:    clamp(40px, 4.8vw,  72px);
  --fs-h2:           clamp(36px, 4.4vw,  68px);
  --fs-h2-service:   clamp(36px, 4vw,    60px);
  --fs-h2-portrait:  clamp(32px, 3.6vw,  52px);
  --fs-h2-panel:     clamp(32px, 3.4vw,  48px);
  --fs-pull:         clamp(28px, 2.6vw,  40px);
  --fs-lede:         clamp(17px, 4.5vw,  22px);

  /* Schriftgroessen — Override-Stufen. Bleiben an ihren bestehenden
     Selektoren in deren Media-Bloecken (Plan 4.2): Tokens NIE im
     Media-Query per :root neu belegen — das koppelt Selektoren,
     die heute keinen Override haben. */
  --fs-hero-mobile:  clamp(40px, 12vw,   60px);
  --fs-hero-home-md: clamp(48px, 9vw,    96px);
  --fs-h2-mobile:    clamp(28px, 7vw,    40px);
  --fs-cta-mobile:   clamp(32px, 9vw,    52px);
  --fs-num-mobile:   clamp(40px, 12vw,   64px);
  --fs-num-xs:       clamp(32px, 11vw,   40px);
  --fs-h2-split:     clamp(36px, 3.5vw,  54px);
  /* Schriftgroessen — Kleintypo-Rollen (Phase 2c, Plan 11.5/11.9).
     Werte = sanktionierter Katalog nach der Bereinigungs-Runde 23.08.2026;
     dokumentierte Festwerte (A5/A6 17px, Totholz, Icon-Pseudos, .ref/.vlabel,
     certs-Platzhalter, Topics-Listenzeile) bleiben bewusst hart. */
  --fs-body:            19px;  /* Noto Fliesstext */
  --fs-body-mobile:     16px;
  --fs-text-sm:         15px;  /* Sekundaertext + Consents */
  --fs-input:           16px;  /* iOS-Fokus-Zoom-Untergrenze — nie mit wertgleichen Rollen verschmelzen */
  --fs-label:           13px;  /* Section-Kicker + Metazeilen */
  --fs-label-sm:        12px;  /* Form-/Datenlabel; zugleich Mobilstufe von Tabs/Pagination */
  --fs-nav:             15px;  /* Nav-/Footer-Menue; auch Legal-h4-Rezept (11.9 A9) */
  --fs-btn:             14px;
  --fs-btn-mobile:      13px;
  --fs-title-xl:        32px;  /* Zwischentitel-Leiter */
  --fs-title-lg:        28px;
  --fs-title:           24px;  /* zugleich Mobilstufe der 32er */
  --fs-title-sm:        22px;  /* zugleich Mobilstufe der 28er */
  --fs-title-mobile:    20px;  /* einheitliche Mobilstufe der 22er (11.9 f) */
  --fs-expander:        19px;  /* Topic-Btn + cmplz-Summary-Spiegel */
  --fs-legal-h3:        19px;  /* eigenstaendig — nicht mit --fs-expander verschmelzen (11.9 A7) */
  --fs-legal-h3-mobile: 16px;
  --fs-drawer:          36px;  /* dokumentierte Ausnahme mit eigenen Tokens (11.9 g) */
  --fs-drawer-mobile:   28px;

  /* Zeilenhoehen — Textrollen */
  --lh-body:    1.65;   /* Fliesstext + Vererbungswurzel */
  --lh-compact: 1.55;   /* Teaser, Sekundaertext, Bildunterschriften */
  --lh-tight:   1.04;   /* Headline-Ebene (12 Verwender) */
  --lh-hero:    1.02;   /* beide Hero-h1 + .person .info h2 — engste Stufe (11.9 C) */
  /* Laufweiten — wertneutral tokenisierte Bestandsstufen (Phase 2c, 11.9 C:
     Bestand 1:1, nichts umverteilt; Aenderungsreview ggf. spaeter).
     Einzel-Streuwerte bleiben dokumentierte Festwerte: .005 (Topics-li),
     .02/.04/.12/-.01/-.015/-.018/-.025 sowie die ls der Totholz-Selektoren
     (num-tag/sinc-arrow/
     return/topics v1-v3) und Icon-/Deko-Stellen (.vlabel). */
  --ls-label:       .18em;   /* Form-/Datenlabel + Section-Kicker */
  --ls-label-tight: .16em;   /* Hero-Metazeilen, Footer-Spaltentitel, Karten-kind */
  --ls-btn:         .14em;   /* Buttons, Nav-Aktionen, Formular-Labels */
  --ls-utility:     .1em;    /* Pagination, Skip-Link, Legal-Zeile, Drawer-Legal */
  --ls-meta:        .06em;   /* Metazeilen; auch Nav-Menue + Legal-h4-Rezept (A9) */
  --ls-title:       -.005em; /* Zwischentitel-Familie + Drawer */
  --ls-headline:    -.012em; /* Headline-Ebene */
  --ls-expander:    .01em;   /* Expander-Titel + Legal-Zwischentitel (inkl. cmplz-Spiegel); Nachruestung 24.08. */

  /* Sektionsrhythmus — 20er-Raster */
  --space-unit:20px;
  --space-3:calc(var(--space-unit) *  3);   /*  60px */
  --space-4:calc(var(--space-unit) *  4);   /*  80px */
  --space-5:calc(var(--space-unit) *  5);   /* 100px */
  --space-6:calc(var(--space-unit) *  6);   /* 120px */
  --space-7:calc(var(--space-unit) *  7);   /* 140px */
  --space-8:calc(var(--space-unit) *  8);   /* 160px */
  --space-9:calc(var(--space-unit) *  9);   /* 180px */
  --space-10:calc(var(--space-unit) * 10);  /* 200px */

  /* Blockrhythmus — 8er-Raster, gilt für padding UND margin */
  --gap-unit:8px;
  --gap-1:calc(var(--gap-unit) * 1);   /*  8px */
  --gap-2:calc(var(--gap-unit) * 2);   /* 16px */
  --gap-3:calc(var(--gap-unit) * 3);   /* 24px */
  --gap-4:calc(var(--gap-unit) * 4);   /* 32px */
  --gap-5:calc(var(--gap-unit) * 5);   /* 40px */
  --gap-6:calc(var(--gap-unit) * 6);   /* 48px */
  --gap-8:calc(var(--gap-unit) * 8);   /* 64px */
}

*{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--blue);color:#fff}

/* ============================================================
   ACCESSIBILITY — WCAG 2.1 AA
   ============================================================ */
/* Skip-to-content (versteckt, sichtbar bei Tab) */
.skip-link{
  position:absolute;top:-100%;left:16px;z-index:9999;
  padding:12px 20px;background:var(--ink);color:var(--paper);
  font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-utility);text-transform:uppercase;
  text-decoration:none;border-radius:2px;transition:top .15s ease;
}
.skip-link:focus{top:0;outline:2px solid var(--blue);outline-offset:2px}
/* Screenreader-only Helper */
.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}
/* Focus-Visible global */
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

html,body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-weight:400}
/* Sticky-Header (86px) bei Anker-Sprüngen und scrollIntoView freihalten (ROADMAP 2.4) — gilt für Service-Deep-Sprungmarken, Skip-Link und das Standorte-Accordion */
html{scroll-padding-top:100px}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}

/* CONTAINER */
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gap-8);position:relative}
@media (max-width:900px){.wrap{padding:0 28px}}

/* ============================================================
   HEADER · NAV — Glass / Frosted (Palantir-style)
   ============================================================ */
header.nav{
  padding:20px 0;position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(var(--ink-rgb),.12);
  transition:border-color .3s;
  /* backdrop-filter on ::before — keeps fixed children (drawer) viewport-relative */
}
header.nav::before{
  /* z-index:-1 ist hier BEWUSST und erprobt: Ein Versuch mit z:0 (20.08.2026,
     Safari-Verdacht) schwächte den Frost auf iOS sichtbar ab und wurde
     zurückgedreht. Der Drawer-offen-Zustand hebt die Schicht unabhängig
     davon auf z:50 (.nav.drawer-open::before im ≤1100-Block). */
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(var(--paper-rgb),.72);
  -webkit-backdrop-filter:saturate(140%) blur(22px);
  backdrop-filter:saturate(140%) blur(22px);
  transition:background .3s;
}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:48px;position:relative;z-index:50}
/* Tap-Target (A11y-Pass F8, 20.08.2026): Padding hebt die Trefferbox des
   Links auf 44px Höhe (mobil: 28px-Bild + 2x8), das negative Margin
   neutralisiert den Platzbedarf — im zentrierten Flex der .row verschiebt
   sich nichts. Bildgröße bewusst unangetastet (Kundenstand 05.08.2026). */
/* Logo-Box (21.10.2026, Browsermatrix Matthias/Claude, PROTOKOLL-CUSTOMIZER-LIVE.md Abschn. 5):
   logo.svg trägt nur eine viewBox (271×55). height:38px;width:auto staucht in Safari;
   height:auto;width:100% macht das Logo in Firefox unsichtbar (zirkuläres Prozent im
   shrink-to-fit Link → 0). Stabil in Chrome, Firefox und Safari ist feste Höhe + width:100%:
   die feste Höhe gibt Firefox den Anker, object-fit:contain zeichnet die SVG proportional,
   object-position:left hält sie links, falls die Box breiter wird (Footer-Spalte). Kein
   Verhältnis im CSS nötig — auch ein hochgeladenes Logo rendert 38px hoch mit seinem
   natürlichen Verhältnis. flex:0 0 auto hält den Link im Flex-Header auf Maß. */
.nav .logo{padding:8px 0;margin:-8px 0;flex:0 0 auto}
.nav .logo img{height:38px;width:100%;object-fit:contain;object-position:left center;display:block;transition:filter .2s}
/* Desktop-Stufe 48 px (26.10.2026, Vorschlag Matthias nach Feedback SINC-Admin „Icon
   leicht verzerrt" = Aliasing der Helix-Streifen auf 1x-Monitoren): ab 1101 px ist der
   Kontakt-Button sichtbar (48 px hoch), das Logo wird bündig damit, die Kopfzeile bleibt
   88 px. Messung: Mischpixel im Icon 41 % → 34 % (1x); ganz sauber wird es auf 1x nur
   mit einer vereinfachten Icon-Variante. Unter 1101 px bleiben 38 px: Burger ist 44 px,
   und 237 px Logobreite passen bei 375 px nicht in die Zeile (Retina dort ohnehin sauber).
   Footer läuft im Gleichschritt — eigener Block HINTER seiner Basisregel (Kaskade),
   siehe footer .ft-brand img. */
@media (min-width:1101px){
  .nav .logo img{height:48px}
}
/* Navigations-Feedback (UX-Runde 20.08.2026): Tap aufs Logo entfärbt das
   Zeichen — das blaue Helix-Icon ist das einzige Farbelement — und bleibt
   so, bis die neue Seite rendert (site.js setzt .is-navigating, pageshow
   räumt den bfcache-Rückweg auf). Bewusst grayscale statt Opacity (User-
   Entscheidung) und statt Fokus-Ring (Blau/2px ist Tastatur-Vokabular). */
.nav .logo.is-navigating img{filter:grayscale(1)}
.nav nav ul{display:flex;list-style:none;gap:40px;font-family:var(--display);font-size:var(--fs-nav);letter-spacing:var(--ls-meta);font-weight:700;text-transform:uppercase}
.nav nav a{transition:color .25s;position:relative;padding:6px 0}
.nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav nav a:hover{color:var(--blue)}
.nav nav a:hover::after{transform:scaleX(1)}
.nav nav a.active{color:var(--blue)}
.nav nav a.active::after{transform:scaleX(1)}
/* D-DIN kennt nur 400 und 700 (Datto, SIL OFL 1.1) — kein Medium, nicht nachladbar.
   Frühere 500er/300er an D-DIN-Elementen renderten ohnehin als 400 und sind am
   16.08.2026 darauf korrigiert worden. Bitte kein 500 an var(--display) einführen:
   es bliebe wirkungslos und würde beim Schrift-Upload (Etappe 3c) unerwartet greifen. */
/* Kontakt button — outline only, blue accent dot */
.nav .contact{
  flex:0 0 auto;   /* wie .nav .burger (21.10.2026) */
  font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);text-transform:uppercase;font-weight:var(--fw-ui);
  display:inline-flex;align-items:center;gap:12px;
  background:transparent;color:var(--ink);
  padding:11px 20px;
  border:1px solid var(--ink);
  transition:background .25s, border-color .25s, color .25s;
  position:relative;
}
.nav .contact::before{
  content:"";width:6px;height:6px;background:var(--blue);border-radius:50%;
  display:inline-block;flex-shrink:0;
  transition:background .25s;
}
.nav .contact::after{content:"→";font-size:14px;transition:transform .25s, color .25s;line-height:1;color:var(--blue)}
.nav .contact:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.nav .contact:hover::before{background:var(--paper)}
.nav .contact:hover::after{transform:translateX(4px);color:var(--paper)}
@media (max-width:900px){.nav nav ul{display:none}}

/* RETURN BUTTON (only visible inside POC overview) */
.return{position:fixed;top:14px;right:164px;z-index:100;background:var(--ink);color:var(--paper);font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;opacity:.85}
.return:hover{opacity:1;background:var(--blue)}

/* ============================================================
   GLOBAL LABEL TREATMENT — marker + reference code
   Apply via:  <div class="label">…</div>  (existing markup)
   Or with ref: <div class="label">Werte<span class="ref">/ S04</span></div>
   ============================================================ */
.label{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ink);
  font-weight:var(--fw-ui);
  white-space:nowrap;
}
.label::before{
  content:"";display:inline-block;
  width:22px;height:1px;background:var(--blue);flex-shrink:0;
  transition:width .35s ease;
}
.label:hover::before{width:36px}
.label .ref{
  color:var(--muted);font-weight:400;letter-spacing:.12em;
  margin-left:8px;font-size:11px;
}

/* When .label sits inside section heads it should still align nicely */
section.s .head .label,
.long-text .grid .label,
.contact-form .grid .label,
.approach .grid .label{padding-top:0}

/* Grundlinien-Fix der baseline-gepaarten Kopf-Labels (15.09.2026,
   systemweit — zuerst am „Mehr Insights"-Kopf gefunden und behoben):
   .label ist ein Flex-Container und exportiert als Baseline die
   Unterkante seines ERSTEN Items — des textlosen 1px-Strichs (::before),
   der mittig zur Versalzeile sitzt. Die Kopf-Grids (auto 1fr,
   align-items:baseline) richteten die h2 daran aus; der Label-Text saß
   dadurch ~5px unter der h2-Grundlinie (gemessen: portraits +4,6px,
   section.s +5,3px). Als Block exportiert das Label seine echte
   Textgrundlinie; der Strich behält per vertical-align:middle +
   margin-right (= bisheriges Flex-gap) seine optische Position;
   white-space:nowrap und die Hover-Transition erben weiter. Die
   padding-top:14px der Kopf-Label-Rezepte bleiben deklariert — unter
   echter Baseline-Ausrichtung wirkungslos (Box wächst nur nach oben).
   Betrifft NICHT die Spalten-Labels (.long-text/.approach/… — dort
   steht das Label ÜBER der h2, kein Baseline-Pairing). */
section.s .head .label,
.portraits .head .label,
.locs .head .label,
.jobs .head .label{display:block}
section.s .head .label::before,
.portraits .head .label::before,
.locs .head .label::before,
.jobs .head .label::before{vertical-align:middle;margin-right:14px}

/* Meta column on hero — turn line-by-line meta into stylized list */
.meta-list{list-style:none;display:flex;flex-direction:column;gap:10px;text-align:right;font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted)}
.meta-list li{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px}
.meta-list li::before{content:"";width:18px;height:1px;background:var(--rule);display:inline-block;transition:background .35s, width .35s}
.meta-list li:hover::before{background:var(--blue);width:30px}
.meta-list li b,.meta-list li strong{color:var(--ink);font-weight:400;letter-spacing:var(--ls-meta)}
@media (max-width:900px){.meta-list{text-align:left}.meta-list li{justify-content:flex-start}}

/* Stat-style number with leader line — used for "01 / HQ" type tags */
.num-tag{
  font-family:var(--display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:10px;
  font-weight:var(--fw-ui);
}
.num-tag::before{content:"";width:20px;height:1px;background:currentColor;display:inline-block;flex-shrink:0;transition:width .35s}
.num-tag .muted{color:var(--muted);font-weight:400;letter-spacing:var(--ls-btn)}

/* ============================================================
   PAGE HERO  (used by all subpages — calmer than home hero)
   ============================================================ */
.page-hero{padding-top:var(--space-6);padding-bottom:var(--space-5)}
.page-hero .small{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--gap-4)}
.page-hero h1{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-hero-page);line-height:var(--lh-hero);letter-spacing:-.018em;max-width:18ch;text-transform:uppercase;position:relative}
/* H1-Strich — editorial mark, thickness matches the "I" stroke of D-DIN Bold
   em-based so it scales with the headline. Margin = word-space gap */
.page-hero h1::before,
.home-hero h1::before,
.cta h3::before{
  content:"";display:block;
  width:.78em;        /* ~ 87px at 112px h1 */
  height:.13em;       /* ~ 14px at 112px — matches "I" stroke weight */
  background:var(--ink);
  margin-bottom:.08em;   /* very close to headline */
  transition:width .8s cubic-bezier(.16,1,.3,1) .15s, background .25s;
}
html.js .page-hero h1.reveal::before,
html.js .home-hero h1.reveal::before,
html.js .cta h3.reveal::before{width:0}
html.js .page-hero h1.reveal.in::before,
html.js .home-hero h1.reveal.in::before,
html.js .cta h3.reveal.in::before{width:.78em}
/* CTA h3 strich centered */
.cta h3::before{margin-left:auto;margin-right:auto}
.page-hero h1 em{font-style:italic;font-weight:400;color:var(--blue);letter-spacing:var(--ls-title)}
.page-hero .below{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:var(--gap-8);align-items:end}
.page-hero .lede{font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--ink-soft);font-weight:var(--fw-body);max-width:48ch}
.page-hero .lede strong,.page-hero .lede b{font-weight:500;color:var(--ink)}
.page-hero .meta{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--muted);text-align:right;line-height:2}
@media (max-width:900px){.page-hero{padding-top:var(--gap-8);padding-bottom:var(--gap-8)}.page-hero .below{grid-template-columns:1fr;gap:32px}.page-hero .meta{text-align:left}}

/* HOMEPAGE HERO — larger, more confident */
.home-hero{padding-top:var(--space-9);padding-bottom:var(--space-8);position:relative}
.home-hero .small{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--gap-6)}
.home-hero h1{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-hero-home);line-height:var(--lh-hero);letter-spacing:-.018em;max-width:18ch;text-transform:uppercase}
.home-hero h1 em{font-style:italic;font-weight:400;color:var(--blue);letter-spacing:var(--ls-title)}
.home-hero .below{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:var(--space-6);align-items:end}
.home-hero .lede{font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--ink-soft);font-weight:var(--fw-body);max-width:48ch}
.home-hero .lede strong,.home-hero .lede b{font-weight:500;color:var(--ink)}
.home-hero .meta{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--muted);text-align:right;line-height:2}
@media (max-width:900px){.home-hero .below{grid-template-columns:1fr;gap:40px}.home-hero .meta{text-align:left}}

/* ============================================================
   SECTION SHELL — standard rhythm
   ============================================================ */
section.s{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
section.s .head{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:baseline;margin-bottom:var(--space-4)}
section.s .head .label{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);padding-top:14px;white-space:nowrap}
section.s .head h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);max-width:18ch;text-transform:uppercase}
section.s .head h2 em{font-style:italic;font-weight:400;color:var(--blue);letter-spacing:0}
section.s .lead{font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--ink-soft);max-width:62ch;margin-bottom:var(--space-4);font-weight:var(--fw-body)}
@media (max-width:900px){section.s{padding:var(--space-4) 0}section.s .head{grid-template-columns:1fr;gap:16px;margin-bottom:var(--gap-5)}}

/* ============================================================
   SERVICES CARDS (used on home + services)
   ============================================================ */
.services{display:grid;grid-template-columns:1fr 1fr;gap:80px 80px;margin-top:var(--gap-5)}
.services .item{padding-top:var(--gap-4);border-top:1px solid var(--rule)}
.services .item h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-xl);line-height:1.05;letter-spacing:var(--ls-title);text-transform:uppercase;margin-bottom:20px;max-width:18ch;transition:color .3s}
/* Titel-Segmente (Theme rendert bewusste Umbrüche als <span> statt <br>, ROADMAP 2.1): block = Bild wie <br>; im ≤380-Block zu inline aufgelöst */
.services .item h3 span{display:block}
.services .item:hover h3{color:var(--blue)}
.services .item p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);max-width:46ch;font-weight:var(--fw-body)}
/* Fließtext-Links (freigegeben 20.08.2026): Muster von .person .info .row a / .legal-content .body a verallgemeinert */
.services .item p a{border-bottom:1px solid var(--rule);transition:.2s}
.services .item p a:hover{color:var(--blue);border-color:var(--blue)}
.services .item .more{
  display:inline-flex;align-items:center;gap:14px;margin-top:24px;
  font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);
  text-transform:uppercase;font-weight:var(--fw-ui);color:var(--ink);
  transition:color .25s, gap .25s;
}
.services .item .more::after{
  content:"";display:inline-block;
  width:36px;height:10px;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10' fill='none' stroke='black' stroke-width='1'><line x1='0' y1='5' x2='32' y2='5'/><polyline points='28,1 35,5 28,9'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='10' viewBox='0 0 36 10' fill='none' stroke='black' stroke-width='1'><line x1='0' y1='5' x2='32' y2='5'/><polyline points='28,1 35,5 28,9'/></svg>") no-repeat center / contain;
  transition:transform .35s ease;
}
.services .item .more:hover{color:var(--blue);gap:18px}
.services .item .more:hover::after{transform:translateX(4px)}
/* --- PROBEWEISE (29.07.2026, nicht freigegeben): „Mehr erfahren" bekommt die
   Button-Hülle der Insights-Filter-Tabs (.insights-filter .tabs a: Outline,
   2px-Radius, Hover-Rahmen auf Ink) — Typo (Versalien, .14em, 500) und
   Pfeil-::after samt Hover-Farbwechsel bleiben exakt der Basis-Stil darüber.
   Abweichung zur Basis: gap bleibt beim Hover fix auf 14px (das 14→18px des
   Textlink-Stils würde den Button verbreitern) — der Pfeil bewegt sich nur
   noch layoutneutral per transform, wie bei .nav .contact. Rückbau: diesen
   Block löschen. Design-Skill + POC bewusst erst nach Team-Freigabe. --- */
.services .item .more{padding:8px 16px;border:1px solid var(--rule);border-radius:2px;transition:color .25s, border-color .2s}
.services .item .more:hover{border-color:var(--ink);gap:14px}
@media (max-width:900px){.services{grid-template-columns:1fr;gap:48px}}

/* ============================================================
   FEATURE PHOTO (with real images)
   ============================================================ */
.feature{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.feature .frame{aspect-ratio:16/9;background:var(--paper-bright);position:relative;overflow:hidden}
.feature .frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.02)}
.feature .caption{display:grid;grid-template-columns:auto 1fr 1fr;gap:60px;padding-top:var(--gap-4);align-items:start}
.feature .caption .small{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.feature .caption .text{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft);max-width:54ch}
.feature .caption .credit{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-meta);color:var(--muted);text-align:right}
.feature .caption .credit b,.feature .caption .credit strong{color:var(--ink);font-weight:400;display:block;letter-spacing:.04em}
@media (max-width:900px){.feature .caption{grid-template-columns:1fr;gap:12px}.feature .caption .credit{text-align:left}}

/* Architecture band (wide cinematic) */
.archband{padding:0 0 var(--space-8)}
.archband .frame{aspect-ratio:21/9;position:relative;overflow:hidden}
.archband .frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(1.02)}

/* ============================================================
   APPROACH (editorial long-form)
   ============================================================ */
.approach{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.approach .grid{display:grid;grid-template-columns:280px 1fr;gap:120px;align-items:start}
.approach .grid .title{position:sticky;top:140px}
.approach .grid h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-split);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.approach .grid h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.approach .grid .label{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.approach .grid .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);max-width:62ch;margin-bottom:var(--gap-4);font-weight:var(--fw-body)}
.approach .grid .body p strong,.approach .grid .body p b{color:var(--ink);font-weight:500}
/* Fließtext-Links (freigegeben 20.08.2026) — Regel trägt bewusst alle drei Content-Split-Varianten, wie .pull darunter */
.approach .grid .body p a,.service-deep .body p a,.long-text .grid .body p a{border-bottom:1px solid var(--rule);transition:.2s}
.approach .grid .body p a:hover,.service-deep .body p a:hover,.long-text .grid .body p a:hover{color:var(--blue);border-color:var(--blue)}
.approach .pull,.service-deep .pull,.long-text .pull{font-family:var(--display);font-weight:400;font-size:var(--fs-pull);line-height:1.25;letter-spacing:var(--ls-title);color:var(--ink);max-width:30ch;margin:var(--space-3) 0;padding-left:var(--gap-4);border-left:1px solid var(--blue);text-transform:uppercase;font-style:italic}
.approach .pull em,.service-deep .pull em,.long-text .pull em{color:var(--blue);font-style:italic}
@media (max-width:900px){.approach .grid{grid-template-columns:1fr;gap:32px}.approach .grid .title{position:relative;top:0}}
@media (max-width:1100px){.approach .grid .title,.long-text .grid .title,.service-deep .grid .title{position:relative;top:0}}

/* ============================================================
   VALUES (sparse list)
   ============================================================ */
.values-section{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.values-section .head{margin-bottom:var(--space-4)}
.values-section dl{display:grid;grid-template-columns:240px 1fr;gap:48px 64px}
.values-section dt{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-lg);letter-spacing:var(--ls-title);text-transform:uppercase;line-height:1;padding-top:20px}
.values-section dt::before{content:"";display:block;width:32px;height:5px;background:var(--blue);margin-bottom:5px}
.values-section dd{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);max-width:52ch;border-top:1px solid var(--rule);padding-top:24px;font-weight:var(--fw-body)}
@media (max-width:900px){.values-section dl{grid-template-columns:1fr;gap:24px 0}.values-section dt{padding-top:0}}

/* Portraits — Team-Grid (Über uns), migriert aus dem Inline-<style>
   von poc/ueber-uns.html. Muss VOR den Breakpoint-Blöcken stehen,
   deren ≤1100/≤700-Regeln (Grid 2-spaltig, Namensgröße, Padding)
   diese Basis bei gleicher Spezifität per Quelltext-Reihenfolge
   überschreiben. */
.portraits{padding:var(--space-6) 0;border-top:1px solid var(--rule)}
.portraits .head{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:baseline;margin-bottom:var(--space-4)}
.portraits .head .label{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);padding-top:14px;white-space:nowrap}
.portraits .head h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-portrait);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.portraits .head h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.portraits .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;border-top:1px solid var(--rule);padding-top:var(--gap-4)}
.portraits .p .img{aspect-ratio:4/5;background:var(--paper-bright);overflow:hidden}
.portraits .p .img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.02)}
.portraits .p .meta{padding-top:20px}
.portraits .p .meta .role{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted)}
.portraits .p .meta .name{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-sm);letter-spacing:var(--ls-title);text-transform:uppercase;line-height:1.1;margin-top:8px}
/* Einleitung je Gruppe — Zelle im 4er-Raster, Startspalte kommt inline aus dem
   Block (--intro-start: 2 bei einer Person, 3 bei zwei, 1 = volle Zeile ab drei).
   Abstand zum Foto = 32px Rasterabstand + --gap-6 = 80px, derselbe Rhythmus wie
   .feature.portrait und die .head-Zeilen; bewusst NICHT über gap gelöst, das
   rückte die Fotos mit auseinander. Typo erbt von html,body (--fs-body, mobil
   16px über die bestehende Umschaltung), Farbe/Gewicht = Fließtext-Muster. */
.portraits .grid .intro{grid-column:var(--intro-start, 3) / -1;align-self:start;padding-left:var(--gap-6);color:var(--ink-soft);font-weight:var(--fw-body)}
@media (max-width:900px){.portraits .head{margin-bottom:var(--gap-5)}}

/* ============================================================
   NUMBERS / LOGOS / CERTIFICATES — Home only
   ============================================================ */
.proof{padding:var(--space-8) 0;border-top:1px solid var(--rule);background:var(--paper-bright)}
.proof .nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.proof .nums .n{padding:var(--gap-6) 24px;border-right:1px solid var(--rule-soft)}
.proof .nums .n:last-child{border-right:0}
.proof .nums .n .v{font-family:var(--display);font-weight:700;font-size:var(--fs-num);letter-spacing:-.025em;line-height:.9;color:var(--ink)}
.proof .nums .n .v sup{color:var(--blue);font-size:.42em;vertical-align:top;margin-left:6px}
.proof .nums .n .v em{font-style:italic;font-weight:400;color:var(--blue);font-size:.6em;letter-spacing:0}
.proof .nums .n .l{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted);margin-top:20px}
.proof .nums .n .d{font-size:var(--fs-text-sm);color:var(--ink-soft);margin-top:8px;max-width:24ch;line-height:var(--lh-compact)}
.proof .certs{margin-top:var(--space-4);display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:start}
.proof .certs .small{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:8px}
.proof .certs .logos{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:center}
.proof .certs .logos .cert{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-soft);padding:14px 18px;border:1px solid var(--rule-soft);transition:.25s}
.proof .certs .logos .cert:hover{color:var(--ink);border-color:var(--rule)}
/* Logo-Variante der Zertifikats-Zeile — Box-Prinzip, zwei Stufen (31.08.2026).
   Zwei Sorten Logos bestehen nebeneinander: Siegel (quadratisch bis hoch-
   kant, z. B. 500:750) und Wortmarken (breit, z. B. 271:55). SVGs mit
   prozentualen Maßen (width/height="100%") haben keine eigene Größe und
   kollabieren im Flex-Container zu 0 × 0 — deshalb immer eine feste Höhe,
   width:auto (Breite aus dem Seitenverhältnis), max-width als Breiten-
   bremse und object-fit:contain (skaliert in die Box, zentriert vertikal).
   Eine Höhe für alle geht nicht: 32px macht Siegel 21px breit, 200px steckt
   Wortmarken in 200px hohe Boxen mit 45px Inhalt — mobil ein 155px-Loch
   je Wortmarke (.logos 756px statt 452). Darum zwei Stufen: Siegel 200px,
   Wortmarken 48px. Die Klasse .is-wordmark setzt blocks/numbers/render.php
   aus dem Seitenverhältnis der Datei (> 2, Maße aus den Safe-SVG-Metadaten);
   ohne Maße greift die Siegel-Regel — sichtbar, nur größer, nie 0 × 0.
   Ergebnis: Siegel 133 × 200, Wortmarke 271:55 → 220 × 45, .cert (60px) auf
   derselben Mittelachse (align-items:center auf .logos).
   Farbe: Logos bleiben wie geliefert (Fremdsiegel sind nicht umfärbbar),
   Hover-Feedback = grau (Entscheidung Matthias 31.08.2026); Sticky-Hover
   auf Touch ist gewollt, nicht scopen. Messreihe: tools/certs-harness.html */
.proof .certs .logos img{height:200px;width:auto;max-width:220px;object-fit:contain;transition:.25s}
.proof .certs .logos img.is-wordmark{height:48px}
.proof .certs .logos img:hover{filter:grayscale(1);opacity:.75}
@media (max-width:900px){.proof .nums{grid-template-columns:1fr 1fr}.proof .nums .n{border-bottom:1px solid var(--rule-soft)}.proof .certs{grid-template-columns:1fr;gap:16px}}

/* ============================================================
   LOCATIONS — Accordion expand: click row, photo + text appear inline
   ============================================================ */
.locs{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.locs .head{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:baseline;margin-bottom:var(--space-4)}
.locs .head h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase;max-width:18ch}
.locs .head h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.locs .list{display:flex;flex-direction:column;border-top:1px solid var(--rule);position:relative}

.locs .item{position:relative;border-bottom:1px solid var(--rule)}
.locs .item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--blue);transform:scaleY(0);transform-origin:top;
  transition:transform .35s ease;z-index:2;
}
.locs .item.open::before, .locs .item:hover::before{transform:scaleY(1)}

.locs .item .row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "num   name  go"
    ".     addr  meta";
  column-gap:32px;row-gap:6px;
  padding:var(--gap-4) 0;
  align-items:baseline;
  width:100%;background:transparent;border:0;text-align:left;
  cursor:pointer;font:inherit;color:inherit;
  transition:padding .35s ease;
}
.locs .item:hover .row,
.locs .item.open .row{padding-left:var(--gap-4)}

.locs .item .num{grid-area:num;align-self:start;padding-top:8px}
.locs .item .name{grid-area:name;align-self:start}
.locs .item .addr{grid-area:addr;padding-top:8px}
.locs .item .meta{grid-area:meta;padding-top:8px;text-align:right;justify-self:end}
.locs .item .go{grid-area:go;align-self:start;padding-top:8px;justify-self:end}

.locs .item .num{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--blue);font-weight:var(--fw-ui);display:inline-flex;align-items:center;gap:10px}
.locs .item .num::before{content:"";width:18px;height:1px;background:currentColor;display:inline-block;flex-shrink:0;transition:width .35s}
.locs .item:hover .num::before,
.locs .item.open .num::before{width:32px}
.locs .item .num em{color:var(--muted);font-style:normal;font-weight:400}
.locs .item .name{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-xl);letter-spacing:var(--ls-title);text-transform:uppercase;line-height:1;transition:color .25s}
.locs .item:hover .name, .locs .item.open .name{color:var(--blue)}
.locs .item .addr{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft)}
.locs .item .meta{font-size:var(--fs-label);line-height:1.5;color:var(--muted);font-family:var(--display);letter-spacing:.02em}
.locs .item .go{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px;transition:color .25s, gap .25s}
.locs .item:hover .go,
.locs .item.open .go{color:var(--ink);gap:14px}

/* Zustands-Label (26.08.2026): offen zeigt der Expander „Schließen ✕"
   statt „Mehr →" — das alte Label suggerierte weiteren Inhalt. */
.locs .item .go .go-close{display:none}
.locs .item.open .go .go-more{display:none}
.locs .item.open .go .go-close{display:inline}
/* ohne JS stehen alle Panels offen und der Button ist tot — Link ausblenden
   (Muster wie der Burger in der no-js-Fallback-Nav) */
html:not(.js) .locs .item .go{display:none}

/* The expansion panel */
.locs .item .expand{
  display:grid;grid-template-rows:0fr;
  opacity:0;
  /* visibility statt nur opacity (A11y-Pass 20.08.2026): die Maps/Jobs-Links
     der zugeklappten Items blieben fokussierbar — Tab landete unsichtbar auf
     opacity-0-Links (8 Stopps je auf Home und Kontakt), der Fokusring war
     mit-transparent. Muster wie beim Mobile-Drawer: das 0s-Delay (.6s) lässt
     den Kollaps zu Ende laufen, bevor das Panel unsichtbar wird; .open setzt
     das Delay auf 0. */
  visibility:hidden;
  transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1), opacity .35s ease, visibility 0s .6s;
}
.locs .item.open .expand{
  grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s;
}
/* no-js-Härtung (20.08.2026): ohne JS gibt es weder Klick-Handler noch das
   Auto-Open des ersten Items — die Panels wären unerreichbar. Ohne
   js-Klasse stehen alle Standorte offen. */
html:not(.js) .locs .item .expand{grid-template-rows:1fr;opacity:1;visibility:visible}
.locs .item .expand-inner{
  overflow:hidden;min-height:0;
  display:grid;grid-template-columns:1.05fr 1fr;
  gap:64px;padding:8px var(--gap-4) var(--gap-8);align-items:start;
}
.locs .item .exp-photo{
  aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  border:1px solid var(--rule);background:var(--paper-bright);
  max-height:480px;width:100%;
}
.locs .item .exp-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.02);
  transform:scale(1.02);
  transition:transform .8s ease;
}
.locs .item.open .exp-photo img{transform:scale(1)}
.locs .item .exp-text p{
  font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);
  font-weight:var(--fw-body);margin-bottom:24px;max-width:50ch;
}
.locs .item .exp-text p strong,.locs .item .exp-text p b{color:var(--ink);font-weight:500}
.locs .item .exp-actions{
  display:flex;gap:24px;flex-wrap:wrap;margin-top:var(--gap-4);
  border-top:1px solid var(--rule);padding-top:24px;
}
.locs .item .exp-actions a{
  font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);
  text-transform:uppercase;color:var(--ink);font-weight:var(--fw-ui);
  display:inline-flex;align-items:center;gap:10px;
  padding-bottom:4px;border-bottom:1px solid var(--ink);
  transition:color .25s, border-color .25s, gap .25s;
}
.locs .item .exp-actions a:hover{color:var(--blue);border-color:var(--blue);gap:14px}

/* Hidden helpers from earlier */
.locs .item .photo{display:none}

@media (max-width:900px){
  .locs .head{grid-template-columns:1fr;gap:16px;margin-bottom:var(--gap-5)}
  /* Link in die Kopfzeile neben num (26.08.2026) — unten zwischen Meta und
     Foto war er im Open State schlecht auffindbar */
  .locs .item .row{grid-template-columns:1fr auto;grid-template-areas:"num go" "name name" "addr addr" "meta meta";column-gap:0;padding:24px 0}
  .locs .item .name{font-size:var(--fs-title)}
  .locs .item .meta{text-align:left}
  .locs .item .expand-inner{grid-template-columns:1fr;gap:24px;padding:8px 0 var(--gap-4) var(--gap-4)}
}

/* ============================================================
   CTA BLOCK — with subtle helix backdrop
   ============================================================ */
.cta{padding:var(--space-10) 0;border-top:1px solid var(--rule);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.cta .small{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:var(--gap-6);display:inline-flex;align-items:center;gap:14px;position:relative}
.cta .small::before{content:"";width:24px;height:1px;background:var(--blue);display:inline-block}
.cta .label{margin-bottom:24px}
.cta h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-cta);line-height:var(--lh-tight);letter-spacing:-.015em;text-transform:uppercase;max-width:18ch;margin:0 auto;position:relative}
.cta h3 em{font-style:italic;font-weight:400;color:var(--blue)}
.cta .button{display:inline-flex;align-items:center;gap:18px;margin-top:var(--gap-8);padding:18px var(--gap-4);border:1px solid var(--ink);font-family:var(--display);font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;font-weight:var(--fw-ui);transition:.25s;position:relative;background:transparent;color:var(--ink)}
.cta .button:hover{background:var(--ink);color:var(--paper);box-shadow:0 12px 32px rgba(0,0,0,.12)}
.cta .button::after{
  content:"";display:inline-block;
  width:44px;height:10px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10' fill='none' stroke='black' stroke-width='1'><line x1='0' y1='5' x2='40' y2='5'/><polyline points='36,1 43,5 36,9'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='10' viewBox='0 0 44 10' fill='none' stroke='black' stroke-width='1'><line x1='0' y1='5' x2='40' y2='5'/><polyline points='36,1 43,5 36,9'/></svg>") no-repeat center / contain;
  transition:transform .25s ease;
}
.cta .button:hover::after{transform:translateX(6px)}
.cta .secondary{display:block;margin-top:var(--gap-4);font-family:var(--display);font-size:var(--fs-btn);letter-spacing:var(--ls-meta);color:var(--muted);position:relative}
.cta .secondary a{border-bottom:1px solid var(--rule);color:var(--ink);transition:.25s}
.cta .secondary a:hover{color:var(--blue);border-color:var(--blue)}

/* ============================================================
   HELIX ANIMATION — clay-style, large & subtle
   Settings from clay.global control panel:
   140% size · 2%/90% pos · 4° tilt · 190s spin · 19.5s breathe
   Opacity 0.7 (30% transparency) — sits behind everything
   ============================================================ */
.helix-bg{
  position:absolute;
  pointer-events:none;
  z-index:-1;
  left:var(--hx-x, 2%);
  top:var(--hx-y, 90%);
  width:clamp(200px, var(--hx-size, 140%), 1500px);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) rotate(var(--hx-tilt, 4deg));
  opacity:var(--hx-opacity, .7);
  will-change:transform, opacity;
}
.helix-bg img{
  display:block;width:100%;height:100%;object-fit:contain;
  transform-origin:50% 50%;
  filter:
    brightness(.89)
    drop-shadow(0 28px 50px rgba(60,70,100,.298))
    drop-shadow(0 8px 14px rgba(60,70,100,.179));
  animation:
    helix-spin var(--hx-spin, 190s) linear infinite,
    helix-breathe var(--hx-breathe, 19.5s) ease-in-out infinite;
  will-change:transform, opacity;
}
@keyframes helix-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes helix-breathe{
  0%,100%{opacity:.92}
  50%{opacity:1}
}
/* Respect motion preferences */
@media (prefers-reduced-motion:reduce){
  .helix-bg img{animation:none}
}
/* Mobile: Helix statisch — Animation aus, kein drop-shadow (Performance) */
@media (max-width:700px){
  .helix-bg img{
    animation:none;
    filter:brightness(.89);
  }
  .helix-bg{will-change:auto}
}
/* JS-gesteuerte Pause wenn außerhalb Viewport */
.helix-bg.paused img{animation-play-state:paused}
/* Variants */
.helix-bg.tilt-right{--hx-tilt:-4deg;--hx-x:98%}
.helix-bg.subtle{--hx-opacity:.45}
.helix-bg.large{--hx-size:180%}

/* CTA needs to allow large helix bleed */
.cta{isolation:isolate;overflow:hidden}

/* ============================================================
   CUSTOM ARROW — used in CTAs, "more" links, etc.
   Reusable SVG class with hover animation
   ============================================================ */
.sinc-arrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);font-weight:var(--fw-ui);
  transition:color .25s, gap .25s;
}
.sinc-arrow .arr{
  display:inline-flex;align-items:center;
  width:36px;height:10px;
  position:relative;
  transition:width .35s ease, transform .35s ease;
}
.sinc-arrow .arr::before{
  content:"";position:absolute;left:0;top:50%;width:100%;height:1px;
  background:currentColor;
  transform:translateY(-50%);
  transition:background-color .25s;
}
.sinc-arrow .arr::after{
  content:"";position:absolute;right:0;top:50%;width:8px;height:8px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg) translateX(-2px);
  transition:border-color .25s;
}
.sinc-arrow:hover{color:var(--blue);gap:18px}
.sinc-arrow:hover .arr{width:48px}

/* ============================================================
   FOOTER
   ============================================================ */
footer{padding:var(--space-4) 0 var(--gap-5);border-top:1px solid var(--rule)}
footer .row{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:80px;padding-bottom:var(--space-3)}
/* Theme rendert die Spaltentitel als h2 (Überschriften-Hierarchie, ROADMAP 1.5); der POC behält sein h6 — beide Selektoren, damit die Regel in beiden site.css identisch bleibt. */
footer .col h2,footer .col h6{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--muted);margin-bottom:20px;font-weight:400}
footer .col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
/* Tap-Target (A11y-Pass F4, 20.08.2026): Padding + negative Margins füllen
   den Zeilen-Pitch als Trefferfläche komplett aus. Rechenbasis ist die
   ZEILENBOX des inline-block (15px-Schrift × lh ≈ 25px), nicht die Textbox:
   Desktop-Pitch 41 = 25 + 2x8; mobil 37 = 25 + 2x6 (Override im ≤700-Block).
   Mehr ginge nur mit Überlappung der Nachbarn bzw. sichtbar größerem gap
   (bewusst verworfen: kein längerer Footer für die letzten Pixel zum
   44er-Hausziel). Seitlich +8px je Seite (Xing: 29→45). */
footer .col ul a{font-family:var(--display);font-size:var(--fs-nav);letter-spacing:.02em;transition:color .2s;display:inline-block;padding:8px;margin:-8px}
footer .col ul a:hover{color:var(--blue)}
/* height statt width (20.08.2026): bewusste Vereinheitlichung auf die
   Header-Logo-Größe (38px, vorher 200px breit = 41px hoch). Kein Link,
   kein Tap-Target — reine Angleichung desselben Assets. */
footer .ft-brand img{height:38px;width:100%;object-fit:contain;object-position:left center;margin-bottom:24px}   /* gleiches Muster wie .nav .logo img (21.10.2026); Box = Spaltenbreite, Logo links */
/* Desktop-Stufe 48 px im Gleichschritt mit .nav .logo img (26.10.2026): beide Logos auf
   jeder Breite gleich groß, gezeichnet 236,1 × 48. Muss HINTER der Basisregel stehen —
   gleiche Spezifität, in der Header-Media-Query (Z. ~200) verlor die 48 gegen die 38
   (Staging-Messung 26.10.). Dass die Footer-Box breiter ist (Spaltenbreite, object-fit
   links), täuscht in den DevTools ein kleineres Logo vor. */
@media (min-width:1101px){
  footer .ft-brand img{height:48px}
}
footer .ft-brand p{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft);max-width:34ch}
footer .legal{display:flex;justify-content:space-between;padding-top:var(--gap-4);border-top:1px solid var(--rule);font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-utility);color:var(--muted)}
/* Tap-Target (A11y-Pass F4, 20.08.2026): 12px-Links auf 44px Trefferhöhe —
   Zeilenbox des inline-block ≈ 20px + 2x12 Padding. Vertikal ist frei (die
   Box ragt nur über den nicht-interaktiven Copyright-Text). Seitlich max
   +5px je Seite, sonst überlappen die „·"-getrennten Nachbarn. (Seit dem
   AGB-Ausbau 15.09.2026 ist „Impressum" der schmalste Link — die Breite
   ist damit unkritisch.) Im ≤380-Block übernimmt line-height:44px die
   Höhe (Padding dort vertikal 0), damit auch der Zeilen-UMBRUCH der
   schmalen Viewports überlappungsfreie 44er-Boxen trägt. */
/* Hover: muted→ink wie .drawer-legal — Utility-Link-Muster (Skill v1.18).
   Blau bleibt dem aktiven Zustand vorbehalten, keine Unterlinie
   (die gehört den Fließtext-Links). Rezept von footer .col ul a. */
footer .legal a{display:inline-block;padding:12px 5px;margin:-12px -5px;transition:color .2s}
footer .legal a:hover{color:var(--ink)}
@media (max-width:900px){footer .row{grid-template-columns:1fr 1fr;gap:40px}}

/* ============================================================
   SERVICES PAGE — Deep Service Description
   ============================================================ */
.service-deep{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.service-deep:first-of-type{border-top:0}
.service-deep .grid{display:grid;gap:120px;align-items:start}
.service-deep .grid .title{position:sticky;top:140px}
.service-deep .anchor{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.service-deep h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-service);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase;max-width:14ch}
.service-deep h2 em{font-style:italic;font-weight:400;color:var(--blue)}
@media (min-width:1100px){
  .service-deep .grid{grid-template-columns:400px 1fr}
  .service-deep h2{font-size:var(--fs-h2-split)}
}
.service-deep .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);max-width:62ch;margin-bottom:var(--gap-4);font-weight:var(--fw-body)}
.service-deep .body p strong,.service-deep .body p b{color:var(--ink);font-weight:500}
.service-deep .body .topics,.approach .grid .body .topics,.long-text .grid .body .topics{margin-top:var(--gap-6);border-top:1px solid var(--rule);padding-top:var(--gap-4)}
.service-deep .body .topics .label,.approach .grid .body .topics .label,.long-text .grid .body .topics .label{margin-bottom:24px;display:inline-flex}
.service-deep .body .topics ul,.approach .grid .body .topics ul,.long-text .grid .body .topics ul{list-style:none;display:flex;flex-direction:column;gap:8px;hyphens:manual}
.service-deep .body .topics li,.approach .grid .body .topics li,.long-text .grid .body .topics li{
  font-family:var(--display);font-size:16px;letter-spacing:.005em;
  color:var(--ink);padding-left:24px;position:relative;line-height:1.4;
}
.service-deep .body .topics li::before,.approach .grid .body .topics li::before,.long-text .grid .body .topics li::before{
  content:"";position:absolute;left:0;top:.65em;width:14px;height:1px;background:var(--blue);
}

/* ============================================================
   INSIGHTS PAGE — Raster Entwurf 01 (28.07.2026, nicht freigegeben)
   Portiert aus poc/assets/css/insights-01.css (Delta-Datei bleibt
   im POC liegen, bis der Entwurf freigegeben ist). Spalten-Umbrüche
   (2-/1-spaltig) liegen wie gehabt in den Breakpoint-Blöcken unten.
   ============================================================ */

/* Sektions-Shell — Umkehr gegenüber dem alten Stand: Sektion hell
   (--paper-bright), Kacheln in --paper. Der Rand trennt, nicht die Fläche.
   Eigene border-top wie jede Content-Sektion (Sektions-Trennlinien-Regel). */
.insights-section{padding:var(--space-4) 0;background:var(--paper-bright);border-top:1px solid var(--rule)}

/* Filterzeile — echte Links (?kategorie=), serverseitig aufgelöst */
.insights-filter{padding:28px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.insights-filter .tabs{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-meta)}
.insights-filter .tabs a{position:relative;padding:8px 16px;border:1px solid var(--rule);border-radius:2px;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
/* Tap-Target F6: Chip ~36px hoch — mehr Padding würde den sichtbaren Rahmen
   vergrößern, deshalb unsichtbares Overlay statt des üblichen
   Padding+Negativ-Margin-Musters. ±4px = halber tabs-gap (8px): maximale
   überlappungsfreie Trefferhöhe, auch bei mobil umbrochenen Chip-Zeilen
   (Boxen berühren sich dann exakt). */
.insights-filter .tabs a::before{content:'';position:absolute;inset:-4px 0}
.insights-filter .tabs a:hover{border-color:var(--ink)}
.insights-filter .tabs a[aria-current='page']{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.insights-filter .count{font-family:var(--display);font-size:var(--fs-label);color:var(--muted);letter-spacing:var(--ls-meta)}

/* Raster */
.insights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:var(--gap-6)}

/* Karte — ganze Karte klickbar über den Titel-Link (a::after deckt die
   Karte ab). Semantischer Linkname bleibt der Titel, Text bleibt markierbar.
   Radius kommt aus dem globalen 2px-Block. */
.insights-grid .card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:320px;padding:var(--gap-4) 28px 24px;background:var(--paper);border:1px solid var(--rule);transition:border-color .25s ease}

/* Wachsender blauer Strich an der Oberkante. Als ::before, NICHT als
   border-top — sonst springt die Karte beim Hover um 2px. */
.insights-grid .card::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .35s cubic-bezier(.16,1,.3,1)}

.insights-grid .card .card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.insights-grid .card .kind{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label-tight);text-transform:uppercase;color:var(--blue)}
.insights-grid .card .date{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-utility);text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* Karten-Titel: Theme rendert h2 (Hierarchie nach dem Seiten-h1, ROADMAP 1.5), POC behält h3 — beide Selektoren, Regel bleibt in beiden Dateien gespiegelt. */
.insights-grid .card h2,.insights-grid .card h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-sm);line-height:1.15;letter-spacing:var(--ls-title);text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.insights-grid .card h2 a,.insights-grid .card h3 a{color:inherit;transition:color .25s ease}
/* Klickfläche über die ganze Karte */
.insights-grid .card h2 a::after,.insights-grid .card h3 a::after{content:'';position:absolute;inset:0;z-index:1}

.insights-grid .card .teaser{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Zielzeile — sagt, wohin es geht, statt „Mehr" */
.insights-grid .card .target{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--rule-soft);padding-top:14px;font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-utility);text-transform:uppercase;color:var(--muted);transition:color .25s ease}

/* Hover-/Fokus-Zustand: Strich wächst, Titel und Zielzeile wechseln auf
   Blau. Im Ruhezustand trägt die Karte genau einen Blauakzent (Kategorie). */
.insights-grid .card:hover::before,
.insights-grid .card:focus-within::before{transform:scaleX(1)}
.insights-grid .card:hover h2 a,
.insights-grid .card:focus-within h2 a,
.insights-grid .card:hover h3 a,
.insights-grid .card:focus-within h3 a{color:var(--blue)}
.insights-grid .card:hover .target,
.insights-grid .card:focus-within .target{color:var(--blue)}
.insights-grid .card:hover .icon-external{transform:translate(3px,-3px)}
.insights-grid .card:hover .icon-download{transform:translateY(3px)}

/* Karte „in Vorbereitung" — vier gleichgerichtete Signale statt eines
   gestrichelten Rands: Hintergrund = Sektionsfarbe (die Kachel versinkt im
   Grund), feinerer Rand, kein Blau (Blau = abrufbar), Uhr-Icon.
   Kein <a>, kein Hover, kein cursor:pointer. */
.insights-grid .card.upcoming{background:var(--paper-bright);border-color:var(--rule-soft)}
.insights-grid .card.upcoming::before{display:none}
.insights-grid .card.upcoming .kind{color:var(--muted)}
.insights-grid .card.upcoming h3{color:var(--muted)}
.insights-grid .card.upcoming .teaser{color:var(--muted)}
.insights-grid .card.upcoming .target{justify-content:flex-start;gap:10px;color:var(--muted)}

/* Pagination — ?seite=, serverseitig. Padding statt gap: Trefferfläche der
   Zahlen ~45px hoch (Tap-Target-Minimum 44×44). Breite (F6): padding-inline
   13px + margin-inline -3px füllen den 34px-Pitch (28 breit + gap 6) exakt —
   Layout unverändert, Nachbar-Boxen berühren sich überlappungsfrei; echte 44
   hießen sichtbar größere Abstände (wie bei F4/Footer verworfen). Der
   ::after-Strich rückt mit dem Padding auf 13px, sitzt also pixelgleich. */
.insights-pagination{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:var(--gap-5);padding-top:24px;border-top:1px solid var(--rule);font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-utility);text-transform:uppercase}
.insights-pagination .pages{display:flex;gap:6px;align-items:center}
.insights-pagination .pages a{position:relative;padding:12px 13px 14px;margin:0 -3px;color:var(--muted);transition:color .25s ease}
/* Derselbe von links wachsende blaue Strich wie .label::before und die
   Kartenoberkante. Die aktive Seite trägt ihn dauerhaft — Hover ist die
   Vorschau des aktiven Zustands. Als ::after, nicht border-bottom: kein
   1px-Sprung beim Hover. */
.insights-pagination .pages a::after{content:'';position:absolute;left:13px;right:13px;bottom:8px;height:1px;background:var(--blue);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.insights-pagination .pages a:hover{color:var(--ink)}
.insights-pagination .pages a:hover::after{transform:scaleX(1)}
.insights-pagination .pages [aria-current='page']{color:var(--blue)}
.insights-pagination .pages [aria-current='page']::after{transform:scaleX(1)}
/* Tap-Target F6: Textzeile ~20px → padding-block hebt die Trefferhöhe auf
   ≥44px, Negativ-Margin neutralisiert das Layout (Haus-Muster). Ragt oben in
   die padding-top-Zone der Pagination — dort ist nichts Klickbares. */
.insights-pagination .step{display:inline-flex;align-items:center;gap:10px;padding-block:13px;margin-block:-13px;color:var(--ink);transition:color .2s}
.insights-pagination .step:hover{color:var(--blue)}
.insights-pagination .step.disabled{color:var(--muted-soft);pointer-events:none}
.insights-pagination .step.prev .icon-arrow{transform:rotate(180deg)}
.insights-pagination .step.prev:hover .icon-arrow{transform:rotate(180deg) translateX(4px)}
.insights-pagination .step.next:hover .icon-arrow{transform:translateX(4px)}

/* Ladezustand des Fetch&Swap-Upgrades (assets/js/insights-grid.js): Raster +
   Pagination dimmen kurz ab, kein Spinner — der Wiederaufbau läuft über den
   gestaffelten Reveal der neuen Karten. */
.insights-section.is-loading .insights-grid,
.insights-section.is-loading .insights-pagination{opacity:.45;pointer-events:none;transition:opacity .2s ease}

/* Newsletter-Band — bewusst kein Kasten, sondern Linien: andere Gattung als
   die Karten, filter- und paginierungsneutral. Layout/Button spiegeln
   .contact-form. Eigener Block sinc/newsletter. */
.newsletter{padding:var(--space-6) 0;border-top:1px solid var(--rule);background:var(--paper)}
.newsletter .grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.newsletter .grid .label{margin-bottom:24px}
/* Newsletter-Titel: Theme rendert h3 (ordnet sich unter die Karten-h2, ROADMAP 1.5), POC behält h2 — beide Selektoren. */
.newsletter .grid h2,.newsletter .grid h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-panel);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.newsletter .grid h2 em,.newsletter .grid h3 em{font-style:italic;font-weight:400;color:var(--blue)}
.newsletter .grid .lede{font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--ink-soft);font-weight:var(--fw-body);max-width:42ch;margin-top:24px}
.newsletter .grid .lede strong,.newsletter .grid .lede b{color:var(--ink);font-weight:500}
.newsletter form{display:flex;flex-direction:column;gap:28px;max-width:460px}
.newsletter form .field{display:flex;flex-direction:column;gap:8px}
.newsletter form label{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted)}
.newsletter form input[type='email']{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;font-size:var(--fs-input);transition:border-color .2s}
.newsletter form input[type='email']:focus{outline:none;border-bottom-color:var(--blue)}
/* Platzhalter ans Token-System (ROADMAP 1.8): Browser-Default #757575 lag außerhalb der Palette, knapp unter AA; opacity:1 gegen Firefox-Dimmung. Gescopt, nicht global — sonst färbte add_editor_style auch Editor-Placeholder. */
.newsletter form input[type='email']::placeholder{color:var(--muted);opacity:1}
.newsletter form .consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--muted)}
.newsletter form .consent input{width:15px;height:15px;flex-shrink:0;margin-top:3px;accent-color:var(--blue)}
/* Consent-Label ist Fließtext, nicht Feld-Label — Versalien zurücknehmen.
   Tap-Target F7: Checkbox ist nur 15px und Pseudo-Elemente/Padding greifen
   auf <input> nicht — deshalb dehnt das per for-Attribut gekoppelte LABEL
   seine Trefferfläche: 27px links = Checkbox (15) + gap (12), es legt sich
   unsichtbar über die Checkbox-Zone (Klick dort toggelt via Label-Kopplung
   identisch); ±12px vertikal → Zeile ≥44px, bei Form-gap 28 überlappungsfrei
   zu E-Mail-Feld und Button. Der Datenschutz-Link bleibt obenauf klickbar. */
.newsletter form .consent label{font-family:var(--body);font-size:var(--fs-text-sm);line-height:var(--lh-compact);letter-spacing:normal;text-transform:none;color:var(--muted);font-weight:400;padding:12px 0 12px 27px;margin:-12px 0 -12px -27px}
.newsletter form .consent a{border-bottom:1px solid var(--rule);transition:.2s}
.newsletter form .consent a:hover{color:var(--blue);border-color:var(--blue)}
.newsletter form button{align-self:flex-start;display:inline-flex;align-items:center;gap:14px;padding:18px var(--gap-4);border:1px solid var(--ink);border-radius:2px;font-family:var(--display);font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;font-weight:var(--fw-ui);background:transparent;color:var(--ink);cursor:pointer;transition:.2s}
.newsletter form button:hover{background:var(--ink);color:var(--paper)}
.newsletter form button:hover .icon-arrow{transform:translateX(4px)}
@media (max-width:900px){
  .newsletter .grid{grid-template-columns:1fr;gap:40px}
  .newsletter form{max-width:none}
}

/* Neue Mask-Icons — gleiches Rezept wie .icon-arrow (Material Symbols,
   currentColor über background-color + mask). Hover-Bewegung spiegelt die
   Aktionsrichtung (Download nach unten, extern nach schräg oben). */
.icon-download,.icon-external,.icon-clock{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;background-color:currentColor;transition:transform .25s ease;flex-shrink:0}
.icon-download{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z'/></svg>") no-repeat center / contain;
}
.icon-external{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5z'/></svg>") no-repeat center / contain;
}
.icon-clock{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/></svg>") no-repeat center / contain;
}

@media (prefers-reduced-motion:reduce){
  .insights-grid .card::before{transition:none}
  .insights-pagination .pages a::after{transition:none}
  .insights-grid .card:hover .icon-external,
  .insights-grid .card:hover .icon-download{transform:none}
  .insights-section.is-loading .insights-grid,
  .insights-section.is-loading .insights-pagination{transition:none}
}

/* ============================================================
   ABOUT / KARRIERE / KONTAKT — Reusable elements
   ============================================================ */
.long-text{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.long-text .grid{display:grid;grid-template-columns:280px 1fr;gap:120px;align-items:start}
.long-text .grid .title{position:sticky;top:140px}
.long-text .grid h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-panel);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.long-text .grid h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.long-text .grid .label{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.long-text .grid .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);max-width:62ch;margin-bottom:28px;font-weight:var(--fw-body)}
/* Hervorhebungen im Fließtext — gilt auch für die Gruppen-Einleitung im Team-Grid
   (Über uns: Herkunftstext und Einleitung liegen untereinander, ein <em> muss
   dort gleich aussehen; Selektor erweitert statt neuer Regel, 25.08.2026) */
.long-text .grid .body p strong,.long-text .grid .body p b,.portraits .grid .intro strong{color:var(--ink);font-weight:500}
.long-text .grid .body p em,.portraits .grid .intro em{color:var(--blue);font-style:italic;font-weight:400}
@media (max-width:900px){.long-text .grid{grid-template-columns:1fr;gap:32px}.long-text .grid .title{position:relative;top:0}}

/* Job list (Karriere) */
.jobs{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.jobs .head{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:baseline;margin-bottom:var(--space-4)}
.jobs .head h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase;max-width:18ch}
.jobs .head h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.jobs .head .sub{font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--ink-soft);max-width:54ch;margin-top:24px;font-weight:var(--fw-body)}
.jobs .list{margin-top:0;border-top:1px solid var(--rule)}
.jobs .job{display:grid;grid-template-columns:1fr 1.5fr 1fr auto;gap:40px;padding:var(--gap-4) 0;border-bottom:1px solid var(--rule);align-items:center;transition:.25s;position:relative}
.jobs .job .name{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title);letter-spacing:var(--ls-title);text-transform:uppercase;line-height:1.1}
/* line-clamp (Teaser-Runde 16.09.2026): Der Teaser ist redaktionell auf
   1–2 Sätze gedacht, die Klammer ist das Sicherheitsnetz — nach drei
   Zeilen schneidet die Darstellung mit „…" ab, egal wie lang der
   eingepflegte Text ist (Vorfall: 831-Zeichen-Rohauszug ergab eine
   437px-Zeile). */
.jobs .job .desc{font-size:var(--fs-text-sm);color:var(--ink-soft);line-height:var(--lh-compact);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jobs .job .where{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-meta);color:var(--muted)}
/* justify-self:start (A11y-Pass F5, 20.08.2026): im mobilen 1fr-Einspalter
   streckte das Grid den Link auf volle Breite — sein border-bottom wurde
   optisch ein zweiter Zeilen-Trenner direkt über dem echten (.job-Border).
   gap:10px gleicht den Pfeil-Abstand an .locs .exp-actions a an (war 8). */
.jobs .job .go{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--ink);display:inline-flex;align-items:center;gap:10px;border-bottom:1px solid var(--ink);padding-bottom:4px;justify-self:start}
/* Stretched Link (A11y-Pass F5, 20.08.2026): macht die ganze Job-Karte zur
   Trefferfläche — löst ein, was der Hover-Einzug längst verspricht, und ersetzt
   den 26px-Streifen als einziges Tap-Ziel. Trägt: .job hat position:relative,
   genau EIN Link pro Karte, Fokus + aria-label bleiben am Link. */
.jobs .job .go::before{content:"";position:absolute;inset:0}
/* Hover bewusst UNGESCOPT (Entscheidung nach Gerätetest 20.08.2026): das
   Sticky-Hover auf Touch — Einzug + blauer Titel bleiben nach dem Tap
   stehen — ist hier GEWOLLTES Feedback. Ein hover:hover-Scoping mit
   :active-Ersatz wurde am selben Tag erprobt und verworfen (zu flüchtig).
   Nicht erneut scopen; gilt genauso für die .locs-Hover.
   Einzug seit 16.09.2026 per transform statt padding-left:24px am .job:
   padding verengte die fr-Spalten, der mehrzeilige Teaser brach bei
   Hover neu um. transform ändert nie die Layoutbreite. .go bewusst
   AUSGENOMMEN: sein ::before ist die Stretched-Link-Fläche (inset:0
   gegen .job) — ein transform machte .go zum containing block und
   schrumpfte die Klickfläche der ganzen Zeile auf den Link (F5-Bruch). */
.jobs .job .name, .jobs .job .desc, .jobs .job .where{transition:transform .25s}
.jobs .job:hover .name, .jobs .job:hover .desc, .jobs .job:hover .where{transform:translateX(24px)}
.jobs .job:hover .name{color:var(--blue)}
.jobs .job:hover .go{color:var(--blue);border-color:var(--blue)}
/* Teaser-Klammer mobil 4 statt 3 Zeilen: die schmale Spalte fasst nur
   ~45 statt ~50 Zeichen je Zeile — 4 Zeilen ≈ dasselbe Zeichenbudget wie
   3 Desktop-Zeilen, die Ellipse greift auf beiden Breiten am selben
   Punkt. clamp ist ein Maximum, kurze Teaser bleiben unverändert. */
@media (max-width:900px){.jobs .head{grid-template-columns:1fr;gap:16px;margin-bottom:var(--gap-5)}.jobs .job{grid-template-columns:1fr;gap:8px}.jobs .job .desc{-webkit-line-clamp:4}}

/* Legal content (Impressum/Datenschutz/Cookie-Richtlinie) */
.legal-content{padding:var(--space-4) 0 var(--space-7);border-top:1px solid var(--rule)}
.legal-content .grid{display:grid;grid-template-columns:280px 1fr;gap:120px;align-items:start}
.legal-content .grid .title{position:sticky;top:140px}
.legal-content .grid .title .label{font-size:var(--fs-label);color:var(--muted);margin-bottom:24px;padding-top:0}
.legal-content .grid h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-panel);line-height:var(--lh-tight);letter-spacing:-.01em;text-transform:uppercase}
.legal-content .grid h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.legal-content .body h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-legal-h3);letter-spacing:var(--ls-expander);text-transform:uppercase;color:var(--ink);margin-bottom:12px;margin-top:var(--gap-5)}
.legal-content .body h3:first-child{margin-top:0}
.legal-content .body h4{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-nav);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;margin-top:28px}
.legal-content .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);margin-bottom:16px;font-weight:var(--fw-body)}
.legal-content .body p strong{color:var(--ink);font-weight:500}
/* overflow-wrap: Die Datenschutz-Redaktion setzt Browser-Hilfe-Links mit
   der URL als Linktext (bis ~725px unumbrechbar) — ohne Umbruch-Erlaubnis
   sprengen sie mobil die Spalte (Befund 15.09.2026, 406px Body im
   371px-Viewport). anywhere bricht nur, wenn nichts anderes passt;
   normale Linktexte bleiben unberührt. */
.legal-content .body a{border-bottom:1px solid var(--rule);transition:.2s;overflow-wrap:anywhere}
.legal-content .body a:hover{color:var(--blue);border-color:var(--blue)}
.legal-content .body ul{margin:0 0 16px 0;padding-left:20px}
.legal-content .body ul li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);font-weight:var(--fw-body);margin-bottom:4px}
.legal-content .body hr{border:0;border-top:1px solid var(--rule);margin:var(--gap-5) 0}
/* Complianz-Cookie-Richtlinie im Legal-Layout (sinc/legal-content mit
   Quelle „Cookie-Richtlinie Complianz", Markup aus [cmplz-document]):
   Das Dokument bringt fünf Überschriftenebenen mit, das Layout kennt
   zwei — Zuordnung auf .cmplz-document gescopet, damit die kuratierten
   Bodys von Impressum/Datenschutz unberührt bleiben (Kontrollgruppe).
   h2 → h3-Optik · h3 → h4-Optik (h4 erbt die h4-Regel oben bereits) ·
   h5/h6 → fett gesetzter Absatz (p- + strong-Rolle) statt eigener
   Stufe, Browser-Defaults für Größe/margin überschrieben
   (Entscheidung Matthias, 18.08.2026). */
.legal-content .body .cmplz-document h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-legal-h3);letter-spacing:var(--ls-expander);text-transform:uppercase;color:var(--ink);margin-bottom:12px;margin-top:var(--gap-5)}
.legal-content .body .cmplz-document h2:first-child{margin-top:0}
.legal-content .body .cmplz-document h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-nav);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;margin-top:28px}
.legal-content .body .cmplz-document h5,
.legal-content .body .cmplz-document h6{font-family:var(--body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);font-weight:500;letter-spacing:0;text-transform:none;margin:0 0 16px}
/* Cookie-Übersicht (#cmplz-cookies-overview): Complianz rendert je
   Dienst ein natives <details class="cmplz-dropdown"> — Optik und
   Verhalten dem Haus-Muster .topics.expander nachgebaut (Zeilenraster,
   blauer Punkt, +/− rechts, Hover/Offen in Blau). Auf- und Zuklappen
   übernimmt das native Element; die Höhen-Animation über
   ::details-content ist Progressive Enhancement (Chrome 131+),
   andere Browser klappen instantan — gleiche Funktion, ohne JS.
   Zweite Einsatzstelle seit 15.09.2026: [cmplz-cookies] im
   Datenschutz-WYSIWYG. Dessen Standalone-Ausgabe hat NUR den
   #cmplz-cookies-overview-Wrapper, kein div.cmplz-document — deshalb
   trägt jede Regel zusätzlich die Variante ohne .cmplz-document-Glied.
   Auf der Cookie-Richtlinie matchen beide Varianten dasselbe Element
   (die Übersicht liegt dort IM .cmplz-document) — wertneutral. */
.legal-content .body .cmplz-document #cmplz-cookies-overview,
.legal-content .body #cmplz-cookies-overview{border-top:1px solid var(--rule);margin-bottom:16px}
.legal-content .body .cmplz-document details.cmplz-dropdown,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown{border-bottom:1px solid var(--rule);interpolate-size:allow-keywords}
.legal-content .body .cmplz-document details.cmplz-dropdown::details-content,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown::details-content{display:block;height:0;overflow:clip;transition:height .35s ease,content-visibility .35s allow-discrete}
.legal-content .body .cmplz-document details.cmplz-dropdown[open]::details-content,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown[open]::details-content{height:auto}
.legal-content .body .cmplz-document details.cmplz-dropdown summary,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary{
  display:flex;align-items:center;gap:16px;padding:18px 0;
  cursor:pointer;list-style:none;color:var(--ink);
  transition:padding-left .25s ease,color .25s;
}
.legal-content .body .cmplz-document details.cmplz-dropdown summary::-webkit-details-marker,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary::-webkit-details-marker{display:none}
.legal-content .body .cmplz-document details.cmplz-dropdown summary::before,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--blue);flex-shrink:0;
  transition:width .35s,height .35s,border-radius .35s;
}
.legal-content .body .cmplz-document details.cmplz-dropdown summary::after,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary::after{
  content:"+";margin-left:auto;font-family:var(--display);font-size:24px;
  font-weight:400;color:var(--muted);line-height:1;flex-shrink:0;transition:color .25s;
}
.legal-content .body .cmplz-document details.cmplz-dropdown[open] summary::after,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown[open] summary::after{content:"−";color:var(--blue)}
.legal-content .body .cmplz-document details.cmplz-dropdown[open] summary::before,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown[open] summary::before{width:10px;height:10px;border-radius:2px}
.legal-content .body .cmplz-document details.cmplz-dropdown summary:hover,
.legal-content .body .cmplz-document details.cmplz-dropdown[open] summary,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary:hover,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown[open] summary{color:var(--blue);padding-left:16px}
.legal-content .body .cmplz-document details.cmplz-dropdown summary > div,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary > div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
/* Dienstname in der Summary = Topic-Btn-Rolle, schlägt die h3→h4-Zuordnung oben */
.legal-content .body .cmplz-document details.cmplz-dropdown summary h3,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary h3{
  font-family:var(--display);font-size:var(--fs-expander);font-weight:var(--fw-display);
  text-transform:uppercase;letter-spacing:var(--ls-expander);line-height:1.25;
  color:inherit;margin:0;
}
/* Kategorie-Zusatz („Funktional") = Meta-Rolle wie .jobs .job .where */
.legal-content .body .cmplz-document details.cmplz-dropdown summary p,
.legal-content .body #cmplz-cookies-overview details.cmplz-dropdown summary p{
  font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-meta);
  color:var(--muted);margin:0;
}
/* Vom Plugin als versteckt gedachte Teile — die zuständigen Klassen
   definiert hier kein geladenes Stylesheet (gleicher Fall wie
   .screen-reader-text im Banner) */
.legal-content .body .cmplz-document .screen-reader-text,
.legal-content .body #cmplz-cookies-overview .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.legal-content .body .cmplz-document input.cmplz-hidden,
.legal-content .body #cmplz-cookies-overview input.cmplz-hidden{display:none}
/* Cookie-Steckbrief (Name/Ablaufdatum/Funktion): Schlüssel/Wert-Raster;
   die h5-Beschriftungen tragen die h4-Optik statt der Absatz-Zuordnung.
   Zebra je Cookie-Eintrag (15.09.2026, Wunsch Matthias nach dem Vorbild
   des Original-Complianz-Tabellen-Looks): Nach dem .purpose-Kopf (Kind 1)
   belegt jeder Cookie exakt 6 Zellen (name-header, name, retention-header,
   retention, function-header, function — kein Wrapper pro Cookie), jeder
   ZWEITE Cookie liegt darum per nth-Formel 12n+8…12n+13 auf einem
   --paper-bright-Band. Damit die Bänder durchgehen, sind die Grid-Gaps in
   Zell-Padding überführt (Spaltenlage unverändert: 184px = alte 160px +
   24px Spalten-gap); der 12px-Seitenüberhang läuft über Padding + Negativ-
   Margin (Haus-Trick der Tap-Target-Runde), Textausrichtung bleibt.
   align-items ist dafür stretch statt baseline: Nur gestreckte Zellen
   füllen das Band lückenlos (unter baseline-kurzen Label-Zellen schien
   --paper als Sliver durch); die Grundlinien-Paarung Label/Wert stellt
   das padding-top:7.5px der Label-Zellen wieder her — empirisch auf
   0,0px gemessen (D-DIN 13/700 vs. Noto 15/300, konstante Metrik,
   gilt darum für jede Zeile inkl. umbrechender Funktions-Texte). */
.legal-content .body .cmplz-document .cookies-per-purpose,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose{
  display:grid;grid-template-columns:184px 1fr;gap:0;
  align-items:stretch;margin-bottom:16px;
}
.legal-content .body .cmplz-document .cookies-per-purpose > div,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose > div{padding:5px 0}
.legal-content .body .cmplz-document .cookies-per-purpose > div:nth-child(2n),
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose > div:nth-child(2n){padding-top:7.5px;padding-left:12px;margin-left:-12px}
.legal-content .body .cmplz-document .cookies-per-purpose > div:nth-child(2n+3),
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose > div:nth-child(2n+3){padding-right:12px;margin-right:-12px}
.legal-content .body .cmplz-document .cookies-per-purpose > div:is(:nth-child(12n+8),:nth-child(12n+9),:nth-child(12n+10),:nth-child(12n+11),:nth-child(12n+12),:nth-child(12n+13)),
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose > div:is(:nth-child(12n+8),:nth-child(12n+9),:nth-child(12n+10),:nth-child(12n+11),:nth-child(12n+12),:nth-child(12n+13)){background:var(--paper-bright)}
.legal-content .body .cmplz-document .cookies-per-purpose .purpose,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose .purpose{grid-column:1/-1;padding:0 0 8px;margin:0}
.legal-content .body .cmplz-document .cookies-per-purpose h4,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose h4{margin:0}
.legal-content .body .cmplz-document .cookies-per-purpose h5,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose h5{
  font-family:var(--display);font-size:var(--fs-label);font-weight:var(--fw-display);letter-spacing:var(--ls-utility);
  text-transform:uppercase;color:var(--muted);margin:0;line-height:var(--lh-compact);
}
.legal-content .body .cmplz-document .cookies-per-purpose .name,
.legal-content .body .cmplz-document .cookies-per-purpose .retention,
.legal-content .body .cmplz-document .cookies-per-purpose .function,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose .name,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose .retention,
.legal-content .body #cmplz-cookies-overview .cookies-per-purpose .function{
  font-size:var(--fs-text-sm);color:var(--ink-soft);font-weight:var(--fw-body);line-height:var(--lh-compact);
}
@media (max-width:900px){.legal-content .grid{grid-template-columns:1fr;gap:32px}.legal-content .grid .title{position:relative;top:0}}
/* Mobil folgt der Absatz-Rolle (siehe 16px-Sammelregel im ≤700-Block);
   der Cookie-Steckbrief stapelt Beschriftung über Wert */
@media (max-width:700px){
  /* Legal-Zwischentitel folgen der Fliesstext-Kurve 19 -> 16 (11.9 A7) */
  .legal-content .body h3,.legal-content .body .cmplz-document h2{font-size:var(--fs-legal-h3-mobile)}
  .legal-content .body .cmplz-document h5,.legal-content .body .cmplz-document h6{font-size:var(--fs-body-mobile)}
  .legal-content .body .cmplz-document .cookies-per-purpose,
  .legal-content .body #cmplz-cookies-overview .cookies-per-purpose{grid-template-columns:1fr;gap:0}
  /* Einspaltig braucht jede Zelle beide Band-Überhänge (sonst fransen die
     Kanten) — :nth-child(n+2) matcht alle Zellen außer dem .purpose-Kopf
     und schlägt als späterer Gleichstand (0-5-1) die 2n/2n+3-Desktopregeln;
     der frühere 10px-Abstand unter den Werten wird Padding, damit das
     Zebra-Band geschlossen bleibt */
  .legal-content .body .cmplz-document .cookies-per-purpose > div:nth-child(n+2),
  .legal-content .body #cmplz-cookies-overview .cookies-per-purpose > div:nth-child(n+2){padding-inline:12px;margin-inline:-12px}
  .legal-content .body .cmplz-document .cookies-per-purpose .name,
  .legal-content .body .cmplz-document .cookies-per-purpose .retention,
  .legal-content .body .cmplz-document .cookies-per-purpose .function,
  .legal-content .body #cmplz-cookies-overview .cookies-per-purpose .name,
  .legal-content .body #cmplz-cookies-overview .cookies-per-purpose .retention,
  .legal-content .body #cmplz-cookies-overview .cookies-per-purpose .function{margin-bottom:0;padding-bottom:10px}
}

/* Contact person (Kontakt) */
.person{padding:var(--space-6) 0;border-top:1px solid var(--rule)}
.person .grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.person .img{aspect-ratio:1/1;background:var(--paper-bright);overflow:hidden;max-width:520px}
.person .img img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.person .info .label{font-size:var(--fs-label);color:var(--muted);margin-bottom:24px}
.person .info h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-person);line-height:var(--lh-hero);letter-spacing:var(--ls-headline);text-transform:uppercase}
.person .info h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.person .info .role{font-family:var(--display);font-size:var(--fs-lede);line-height:var(--lh-compact);color:var(--muted);margin-top:14px;letter-spacing:.04em}
.person .info .row{margin-top:var(--gap-5);display:flex;flex-direction:column;gap:14px;font-size:17px}
.person .info .row a{border-bottom:1px solid var(--rule);transition:.2s}
.person .info .row a:hover{color:var(--blue);border-color:var(--blue)}
.person .info .row .lbl{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted);display:inline-block;width:80px}
@media (max-width:900px){.person .grid{grid-template-columns:1fr;gap:32px}.person .img{max-width:100%;aspect-ratio:4/3}}

/* Contact form (Kontakt) */
.contact-form{padding:var(--space-8) 0;border-top:1px solid var(--rule)}
.contact-form .grid{display:grid;grid-template-columns:280px 1fr;gap:120px;align-items:start}
.contact-form .grid h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-panel);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.contact-form .grid h2 em{font-style:italic;font-weight:400;color:var(--blue)}
.contact-form .grid .label{font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.contact-form form{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px;max-width:720px}
.contact-form form .field{display:flex;flex-direction:column;gap:8px}
.contact-form form .field.full{grid-column:1/-1}
.contact-form form label{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-btn);text-transform:uppercase;color:var(--muted)}
.contact-form form input,.contact-form form textarea,.contact-form form select{font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;font-size:var(--fs-input);width:100%;min-width:0;transition:border-color .2s}
.contact-form form input:focus,.contact-form form textarea:focus,.contact-form form select:focus{outline:none;border-bottom-color:var(--blue)}
/* Platzhalter ans Token-System (ROADMAP 1.8), Gegenstück zur Newsletter-Regel. */
.contact-form form input::placeholder,.contact-form form textarea::placeholder{color:var(--muted);opacity:1}
.contact-form form textarea{min-height:120px;resize:vertical}
.contact-form form .submit{grid-column:1/-1;margin-top:24px}
.contact-form form button{display:inline-flex;align-items:center;gap:14px;padding:18px var(--gap-4);border:1px solid var(--ink);font-family:var(--display);font-size:var(--fs-btn);letter-spacing:var(--ls-btn);text-transform:uppercase;font-weight:var(--fw-ui);background:transparent;color:var(--ink);cursor:pointer;transition:.2s}
.contact-form form button:hover{background:var(--ink);color:var(--paper)}
.contact-form form button::after{content:"→"}
.contact-form form .field-error{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-meta);color:var(--error);min-height:1em}
.contact-form form input[aria-invalid="true"],
.contact-form form textarea[aria-invalid="true"]{border-bottom-color:var(--error)}
.contact-form .grid .intro{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft);max-width:32ch;margin-top:24px;font-weight:var(--fw-body)}
/* CF7-Adapter: Contact-Form-7-Markup auf das POC-Formular-Styling mappen
   (CF7-Default-CSS ist dequeued, siehe functions.php) */
.contact-form form .wpcf7-form-control-wrap{display:contents}
/* Ausnahme Honeypot (CF7 Apps): dessen Wrapper versteckt sich seit einem
   Plugin-Update selbst per Inline-sr-only-Style (position:absolute, 1px,
   clip) — der braucht eine BOX. Mit geerbtem display:contents liefen die
   Versteck-Eigenschaften ins Leere und die .hp-message stand sichtbar im
   Formular (Vorfall 21.08.2026, Staging UND Live). Bewusst KEIN
   display:none: der Honeypot soll für Bots ausfüllbar bleiben, nur
   visuell/sr-only versteckt; der abs-pos-Wrapper stört das Form-Grid nicht. */
.contact-form form .wpcf7-form-control-wrap.cf7apps-honeypot-wrap{display:block}
.contact-form .wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;margin:0;padding:0;border:0;word-wrap:normal}
.contact-form form .hidden-fields-container{display:none}
.contact-form form .wpcf7-not-valid-tip{font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-meta);color:var(--error)}
.contact-form form .wpcf7-spinner{display:none}
/* Meldungsbox: Default VERSTECKT, sichtbar nur in CF7-ENDzuständen. Die alte
   Logik (nur form.init versteckt) ließ im submitting-Fenster zwischen Klick
   und AJAX-Antwort eine leere Box mit dunklem Rahmen stehen (User-Befund
   21.08.2026) — invertiert deckt auch künftige Zwischenzustände ab; ohne JS
   rendert der Server die Statusklasse direkt, der Fallback bleibt intakt.
   Position: seit 21.08.2026 via [response]-Tag am FORMULARANFANG
   (Error-Summary-Muster, s. inc/cf7/kontakt-form.html) — margin-top entfällt,
   das Grid-gap übernimmt; contact-form.js scrollt nach Submit zentriert her. */
.contact-form form .wpcf7-response-output{display:none;grid-column:1/-1;margin:0;padding:14px 18px;border:1px solid currentColor;border-radius:2px;font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-meta);color:var(--ink-soft)}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output,
.contact-form form.sent .wpcf7-response-output{display:block}
/* Erfolgszustand (User-Runde 21.08.2026): „VIELEN DANK." als h3 aus dem
   CF7-Template (.sent-title, nur bei form.sent sichtbar; steht direkt VOR
   [response] — DOM-Reihenfolge = Headline über Meldung,
   s. inc/cf7/kontakt-form.html) + Meldung in Lede darunter.
   font-size:var(--fs-pull) = bewusste Wiederverwendung der 28–40-Skalenstufe
   (eine sichtbare Stufe unter der --fs-h2-panel-h2 links daneben, Token-Name
   ist rollenfremd, aber KEIN neuer Wert); übrige Eigenschaften 1:1 vom
   Newsletter-h3-Muster, em = genau ein italic-blaues Wort (Design-Regel 1).
   Die frühere .sent-Blau-Färbung der Meldung war tot (von der späteren
   Ink-Regel überschrieben) und ist mit diesem Umbau entfernt. */
.contact-form form .sent-title{display:none}
.contact-form form.sent .sent-title{display:block;grid-column:1/-1;font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-pull);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase;color:var(--ink);margin:0}
.contact-form form.sent .sent-title em{font-style:italic;font-weight:400;color:var(--blue)}
/* Dank-Block vertikal mittig zur linken Titelspalte (User-Wunsch 21.08.2026):
   :has am CF7-Wrapper, weil form.sent tiefer liegt — greift so auch im
   no-js-POST-Fall (Wrapper trägt dann no-js statt js). */
.contact-form .grid .wpcf7:has(form.sent){align-self:center}
.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output{color:var(--error)}
/* Senden läuft: Button sichtbar gesperrt (CF7 disabled ihn zusätzlich nativ) */
.contact-form form.submitting button.wpcf7-submit{opacity:.5;cursor:default;pointer-events:none}
/* Erfolg: Formular weicht der Bestätigung in Lede-Größe (CF7 setzt .sent) */
.contact-form form.sent .field,
.contact-form form.sent .submit{display:none}
.contact-form form.sent .wpcf7-response-output{margin-top:0;padding:0;border:0;font-family:var(--body);font-size:var(--fs-lede);line-height:var(--lh-compact);font-weight:var(--fw-body);letter-spacing:0;color:var(--ink);max-width:40ch}
/* DSGVO-Einwilligung ([acceptance]): Fließtext statt Versal-Label.
   Tap-Target F7: der CF7-Input steckt IM Label, das Label ist also bereits
   das volle Toggle-Ziel — es fehlte nur Höhe (~41px Text). padding-block +
   Negativ-Margin (Haus-Muster) heben auf ≥44px; bei Form-gap 24 bleibt
   Abstand zu Nachricht-Feld und Absende-Button, keine Überlappung. */
.contact-form form .consent label{font-family:var(--body);font-size:var(--fs-text-sm);letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:var(--lh-compact);display:flex;gap:12px;align-items:flex-start;padding-block:12px;margin-block:-12px}
.contact-form form .consent input[type="checkbox"]{border:0;padding:0;width:16px;height:16px;flex:none;margin-top:3px;accent-color:var(--blue)}
.contact-form form .consent a{border-bottom:1px solid var(--rule);transition:.2s}
.contact-form form .consent a:hover{color:var(--blue);border-color:var(--blue)}
@media (max-width:900px){.contact-form .grid{grid-template-columns:1fr;gap:32px}.contact-form form{grid-template-columns:1fr}}

/* Contact details bar */
.contact-details{padding:var(--space-4) 0;border-top:1px solid var(--rule);background:var(--paper-bright)}
.contact-details .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:64px}
.contact-details .item .label{font-size:var(--fs-label);color:var(--muted);margin-bottom:16px}
/* Kachel-Titel: Theme rendert div.item-title (keine Gliederungsebene, ROADMAP 1.5), POC behält h4 — beide Selektoren. */
.contact-details .item h4,.contact-details .item .item-title{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-sm);letter-spacing:var(--ls-title);text-transform:uppercase;margin-bottom:10px}
.contact-details .item p{font-size:var(--fs-text-sm);line-height:var(--lh-compact);color:var(--ink-soft)}
.contact-details .item p.link{margin-top:14px}
.contact-details .item a{border-bottom:1px solid var(--rule);transition:.2s}
.contact-details .item a:hover{color:var(--blue);border-color:var(--blue)}
@media (max-width:900px){.contact-details .grid{grid-template-columns:1fr}}

/* ============================================================
   BORDER-RADIUS — global 2px treatment on relevant surfaces
   Subtle enough to feel intentional, not "rounded"
   ============================================================ */
.nav .contact,
.cta .button,
.cta-block .btn,
.contact-form form button,
.contact-form form input,
.contact-form form textarea,
.contact-form form select,
.feature .frame,
.archband .frame,
.locs .item .photo,
.person .img,
.portraits .p .img,
.proof .certs .cert,
.filter .tabs a,
.insights-grid .card,
.sitemap .page,
.sitemap .page .preview,
.alts ul a {
  border-radius:2px;
}
.feature .frame img,
.archband .frame img,
.locs .item .photo img,
.person .img img,
.portraits .p .img img {
  border-radius:2px;
}


/* ============================================================
   SCROLL CHOREOGRAPHY — reveal on enter, staggered groups
   Activated by JS via .in class. Falls back gracefully.
   ============================================================ */
/* no-js-Härtung (20.08.2026): Die Versteck-Zustände hängen an html.js —
   die Klasse setzt ein Inline-Script im <head> (header.php) VOR dem ersten
   Paint. Ohne JS (deaktiviert ODER site.js kommt auf schwacher Verbindung
   nie an) blieb sonst alles .reveal-Markierte dauerhaft bei opacity:0 —
   große Teile jeder Seite unsichtbar. Jetzt: ohne js-Klasse ist alles
   sichtbar, nur eben ohne Animation. Gleiches Muster bei den Accordions
   (.locs, .topics.expander) als html:not(.js)-Overrides. */
html.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
/* .in ebenfalls mit html.js-Prefix: die Klasse kommt nur per JS, und ohne
   Prefix verlöre sie den Spezifitäts-Vergleich gegen html.js .reveal
   ((0,2,0) vs (0,2,1)) — Inhalte blieben nach dem Scroll unsichtbar
   (Staging-Vorfall 20.08.2026). */
html.js .reveal.in{opacity:1;transform:none}

html.js .reveal-stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
}
html.js .reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}
.reveal-stagger.in > *:nth-child(7){transition-delay:480ms}
.reveal-stagger.in > *:nth-child(8){transition-delay:560ms}

@media (prefers-reduced-motion:reduce){
  .reveal, .reveal-stagger > *{transition:none;opacity:1;transform:none}
}

/* Header gets a subtle shadow once scrolled (JS adds .scrolled) */
header.nav.scrolled{
  border-bottom-color:rgba(var(--ink-rgb),.16);
  box-shadow:0 1px 0 rgba(var(--ink-rgb),.04), 0 10px 30px rgba(var(--ink-rgb),.04);
}
header.nav.scrolled::before{
  background:rgba(var(--paper-rgb),.86);
}

/* ============================================================
   HOMEPAGE HERO — off-grid headline + vignette
   ============================================================ */
.home-hero{position:relative}
.home-hero h1{position:relative;z-index:3}
/* Headline can break the column on the right */
.home-hero h1 .break-right{
  display:inline-block;position:relative;
  margin-right:-6vw;
}
/* Vignette photo sitting next to/below the H1 */
.hero-vignette{
  position:absolute;
  right:0;
  top:240px;
  width:clamp(180px, 22vw, 320px);
  aspect-ratio:3/4;
  overflow:hidden;
  border-radius:2px;
  z-index:2;
  border:1px solid var(--rule);
}
.hero-vignette::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(var(--paper-rgb),.55) 100%);
  pointer-events:none;
}
.hero-vignette img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.6) saturate(.7) contrast(1.05);
  transition:filter .8s ease;
}
.hero-vignette:hover img{filter:grayscale(0) saturate(.94) contrast(1.02)}
.hero-vignette .vlabel{
  position:absolute;left:16px;bottom:14px;z-index:2;
  font-family:var(--display);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,0.40);
  -webkit-backdrop-filter:saturate(100%) blur(6px);
  backdrop-filter:saturate(100%) blur(6px);
  padding:5px 10px;
  border-radius:2px;
}
.hero-vignette .vlabel::before{
  content:"";display:inline-block;width:14px;height:1px;background:var(--blue);
  vertical-align:middle;margin-right:8px;transform:translateY(-1px);
}
@media (max-width:900px){
  .home-hero h1 .break-right{margin-right:0}
  .hero-vignette{display:none}
}

/* ============================================================
   FULL-BLEED ARCHITECTURE BAND — escapes wrap on both sides
   ============================================================ */
.archband-bleed{padding:0 0 var(--space-8);overflow:hidden}
.archband-bleed .frame{
  aspect-ratio:32/11;
  position:relative;
  width:100vw;
  left:50%;transform:translateX(-50%);
  overflow:hidden;
  /* full-bleed: no border-radius for cinema feel */
  border-radius:0;
}
.archband-bleed .frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) brightness(1.02) contrast(1.04);
  border-radius:0;
}
.archband-bleed .caption{
  max-width:1320px;margin:24px auto 0;
  padding:0 var(--gap-8);
  font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;
}
.archband-bleed .caption b,.archband-bleed .caption strong{color:var(--ink);font-weight:400}
@media (max-width:900px){
  .archband-bleed .frame{aspect-ratio:16/10}
  .archband-bleed .caption{padding:0 28px}
}

/* ============================================================
   PHOTO TREATMENTS — B/W variant for modulation
   ============================================================ */
.feature.bw .frame img,
.archband.bw .frame img,
.archband-bleed.bw .frame img{
  filter:grayscale(1) saturate(.85) contrast(1.06) brightness(.98);
}

/* Portrait variant (3/4) — text & photo side by side */
.feature.portrait .wrap{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;
}
.feature.portrait .frame{aspect-ratio:3/4;max-height:720px}
.feature.portrait .caption{
  display:flex;flex-direction:column;gap:24px;padding-top:0;
}
.feature.portrait .caption .text{font-size:17px;max-width:42ch}
.feature.portrait .caption .credit{text-align:left}
@media (max-width:1000px){
  .feature.portrait .wrap{grid-template-columns:1fr;gap:32px}
}

/* ============================================================
   STANDORTE PHOTO — parallax follow-cursor (JS sets --photo-y)
   ============================================================ */
.locs .item .photo{
  transform:translateY(calc(-50% + var(--photo-y, 0px))) translateX(0) scale(1);
}
.locs .item:hover .photo{
  transform:translateY(calc(-50% + var(--photo-y, 0px))) translateX(0) scale(1);
}
/* Override original transform to include parallax */
.locs .item .photo{
  transform:translateY(calc(-50% + var(--photo-y, 0px))) translateX(40px) scale(.96);
  transition:opacity .4s ease, transform .25s ease;
}
.locs .item:hover .photo{
  transform:translateY(calc(-50% + var(--photo-y, 0px))) translateX(0) scale(1);
}


/* ============================================================
   MATERIAL SYMBOL · ARROW RIGHT ALT (sharp)
   Reusable inline-block icon via mask. Inherits currentColor.
   ============================================================ */
.icon-arrow{
  display:inline-block;
  width:1.1em;height:1.1em;
  vertical-align:-0.18em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
  transition:transform .25s ease;
  flex-shrink:0;
}

/* Re-skin existing arrow usages with the Material symbol */
.nav .contact::after,
.locs .item .go::after,
.services .item .more::after,
.cta .button::after,
.jobs .job .go::after{
  content:"";display:inline-block;
  width:1.1em;height:1.1em;
  vertical-align:-0.18em;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
  transition:transform .25s ease;
}
.cta .button::after{width:1.4em;height:1.4em}
/* Offener Standort: „Schließen ✕" — gleiche Mask-Technik, Material-close-Pfad
   (26.08.2026). Hover-Verhalten (translateX/gap) bewusst unverändert. */
.locs .item.open .go::after{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
}

/* Hover translations stay as before */
.nav .contact:hover::after,
.locs .item:hover .go::after,
.services .item .more:hover::after,
.cta .button:hover::after,
.jobs .job:hover .go::after{transform:translateX(4px)}


/* ============================================================
   BULLET-POINT VARIANTS for Service Topic Lists — Round 2
   Three robust styles. Each li is a single-line block.
   No soft-hyphen wrapping issues.
   ============================================================ */

/* Reset for all variants */
.service-deep .body .topics[class*=" v"] ul,
.service-deep .body .topics[class^="topics v"] ul,
.service-deep .body .topics.v1 ul,
.service-deep .body .topics.v2 ul,
.service-deep .body .topics.v3 ul{
  list-style:none;display:flex;flex-direction:column;
  hyphens:manual;word-break:normal;overflow-wrap:break-word;
}
.service-deep .body .topics.v1 li,
.service-deep .body .topics.v2 li,
.service-deep .body .topics.v3 li{
  padding-left:0;
}
.service-deep .body .topics.v1 li::before,
.service-deep .body .topics.v2 li::before,
.service-deep .body .topics.v3 li::before{position:static;width:auto;height:auto;background:none}

/* ── V1 — Editorial Numbered Index (newspaper TOC) ─────────── */
.service-deep .body .topics.v1 ul{gap:0;counter-reset:topic;border-top:1px solid var(--rule)}
.service-deep .body .topics.v1 li{
  counter-increment:topic;
  display:flex;align-items:baseline;gap:32px;
  padding:20px 16px 20px 0;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:18px;font-weight:400;
  color:var(--ink);line-height:1.3;letter-spacing:.005em;
  transition:padding-left .3s ease, color .25s, background .25s;
  position:relative;
}
.service-deep .body .topics.v1 li::before{
  content:counter(topic, decimal-leading-zero);
  font-family:var(--display);font-size:13px;letter-spacing:.18em;
  font-weight:400;color:var(--blue);
  min-width:34px;flex-shrink:0;
}
.service-deep .body .topics.v1 li:hover{padding-left:18px;color:var(--blue);background:rgba(var(--blue-rgb),.04)}

/* ── V2 — Bordered Card Grid (2-col, with arrow) ────────────── */
.service-deep .body .topics.v2 ul{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.service-deep .body .topics.v2 li{
  display:flex;align-items:center;gap:14px;
  padding:18px 20px;border:1px solid var(--rule);border-radius:2px;
  background:var(--paper-bright);
  font-family:var(--display);font-size:15px;font-weight:400;
  color:var(--ink);line-height:1.3;letter-spacing:.005em;
  transition:.25s;
}
.service-deep .body .topics.v2 li::before{
  content:"";display:inline-block;
  width:18px;height:18px;flex-shrink:0;
  background-color:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
  transition:transform .25s ease, background-color .25s;
}
.service-deep .body .topics.v2 li:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px)}
.service-deep .body .topics.v2 li:hover::before{background-color:var(--paper);transform:translateX(2px)}

/* ── V3 — Heavy Uppercase List (block stripes) ──────────────── */
.service-deep .body .topics.v3 ul{gap:0;border-top:1px solid var(--rule)}
.service-deep .body .topics.v3 li{
  display:flex;align-items:center;gap:18px;
  padding:18px 24px 18px 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:17px;
  font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  color:var(--ink);line-height:1.2;
  transition:padding-left .35s ease, color .25s, background .25s;
  position:relative;
}
.service-deep .body .topics.v3 li::before{
  content:"";display:inline-block;
  width:6px;height:6px;background:var(--blue);border-radius:50%;
  flex-shrink:0;transition:width .35s, height .35s, border-radius .35s;
}
.service-deep .body .topics.v3 li::after{
  content:"";display:inline-block;
  margin-left:auto;
  width:18px;height:18px;flex-shrink:0;
  background-color:var(--muted);
  opacity:0;transform:translateX(-8px);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/></svg>") no-repeat center / contain;
  transition:opacity .25s, transform .25s, background-color .25s;
}
.service-deep .body .topics.v3 li:hover{padding-left:18px;color:var(--blue);background:rgba(var(--blue-rgb),.04)}
.service-deep .body .topics.v3 li:hover::before{width:14px;height:2px;border-radius:0;background:var(--blue)}
.service-deep .body .topics.v3 li:hover::after{opacity:1;transform:translateX(0);background-color:var(--blue)}

@media (max-width:700px){
  .service-deep .body .topics.v2 ul{grid-template-columns:1fr}
}

/* All variants — heading inside .topics */
.service-deep .body .topics .label,.approach .grid .body .topics .label,.long-text .grid .body .topics .label{margin-bottom:var(--gap-4);display:inline-flex}

/* ============================================================
   MOBILE + TABLET — Comprehensive Responsive Layer
   Breakpoints: 1100 (tablet large), 900 (tablet), 700 (mobile)
   ============================================================ */

/* HAMBURGER MENU BUTTON — hidden on desktop, shows on tablet/mobile */
.nav .burger{
  flex:0 0 auto;   /* nie schrumpfen (21.10.2026): Safari verteilt die Flex-Zeile nach der natürlichen
                      Pixelbreite eines Logo-Bildes und quetschte den Burger bei breiten PNG-Uploads */
  display:none;
  width:40px;height:40px;
  background:transparent;border:1px solid var(--ink);
  border-radius:2px;cursor:pointer;
  padding:0;position:relative;
  transition:.25s;
}
.nav .burger span{
  position:absolute;left:9px;right:9px;height:2px;background:var(--ink);
  transition:.3s;
}
.nav .burger span:nth-child(1){top:13px}
.nav .burger span:nth-child(2){top:19px}
.nav .burger span:nth-child(3){top:25px}
.nav .burger.open span:nth-child(1){top:19px;transform:rotate(45deg)}
.nav .burger.open span:nth-child(2){opacity:0}
.nav .burger.open span:nth-child(3){top:19px;transform:rotate(-45deg)}

/* MOBILE NAV DRAWER — glass over solid paper for full coverage */
.nav .mobile-drawer{
  display:none;
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--paper);
  z-index:49;
  padding:120px 28px 48px;
  /* Slide-In von rechts statt Fade (ROADMAP 2.6). visibility statt opacity:
     hält den geschlossenen Drawer aus Paint und Tab-Reihenfolge (Links in
     einem opacity-0-Overlay blieben fokussierbar); das 0s-Delay lässt den
     Slide-Out zu Ende laufen, bevor der Drawer unsichtbar wird. */
  transform:translateX(100%);
  visibility:hidden;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s;
  overflow-y:auto;
}
.nav .mobile-drawer::before{
  /* subtle glass-tint overlay so the drawer feels like the navbar */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(var(--paper-rgb),.88);
  -webkit-backdrop-filter:saturate(140%) blur(22px);
  backdrop-filter:saturate(140%) blur(22px);
  z-index:-1;
}
.nav .mobile-drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .4s cubic-bezier(.16,1,.3,1), visibility 0s}
@media (prefers-reduced-motion:reduce){
  .nav .mobile-drawer{transition:none}
}
.nav .mobile-drawer ul{list-style:none;display:flex;flex-direction:column;gap:24px}
.nav .mobile-drawer a{
  font-family:var(--display);font-weight:700;font-size:var(--fs-drawer);
  letter-spacing:var(--ls-title);text-transform:uppercase;color:var(--ink);
  display:inline-flex;align-items:center;gap:14px;
}
.nav .mobile-drawer ul a:hover{color:var(--blue)}
.nav .mobile-drawer a.active{color:var(--blue)}
.nav .mobile-drawer a::before{
  content:"";width:20px;height:1px;background:var(--blue);display:inline-block;
}
/* Section labels inside drawer */
.nav .mobile-drawer .drawer-section-label{
  margin-bottom:20px;margin-top:0;padding-top:0;
}
.nav .mobile-drawer ul + .drawer-legal,
.nav .mobile-drawer .drawer-legal + .contact-mob{
  margin-top:var(--gap-5);padding-top:var(--gap-4);border-top:1px solid var(--rule);
}
/* Legal links — footer-size typography */
.nav .mobile-drawer .drawer-legal{display:flex;flex-direction:column;gap:0}
.nav .mobile-drawer .drawer-legal a{
  font-family:var(--display);font-size:var(--fs-btn);letter-spacing:var(--ls-utility);
  text-transform:uppercase;color:var(--muted);
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 0;
  min-height:44px;
  transition:color .2s;
}
.nav .mobile-drawer .drawer-legal a:hover{color:var(--ink)}
.nav .mobile-drawer .drawer-legal a.active{color:var(--blue)}
.nav .mobile-drawer .drawer-legal a::before{width:12px}
/* Navigations-Feedback (UX-Runde 20.08.2026): der getippte Drawer-Link
   bleibt bis zum Eintreffen der neuen Seite blau — der Drawer schließt bei
   Seiten-Navigation bewusst NICHT mehr sofort (site.js; mailto/tel schon).
   Nach den drawer-legal-Regeln platziert, damit die gleichrangige
   Spezifität per Reihenfolge auch dort gewinnt. */
.nav .mobile-drawer a.is-navigating{color:var(--blue)}
/* Contact section */
.nav .mobile-drawer .contact-mob{
  margin-top:var(--gap-5);padding-top:var(--gap-4);border-top:1px solid var(--rule);
}
.nav .mobile-drawer .contact-mob .btns{
  display:flex;flex-direction:row;gap:10px;margin-top:16px;
}
.nav .mobile-drawer .contact-mob a{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 12px;border:1px solid var(--ink);
  font-family:var(--display);font-size:var(--fs-label-sm);letter-spacing:var(--ls-utility);
  font-weight:var(--fw-ui);text-transform:uppercase;color:var(--ink);
  transition:background .2s,color .2s;
}
.nav .mobile-drawer .contact-mob a:hover{background:var(--ink);color:var(--paper)}
/* Generische Linie deaktivieren für Kontakt-Buttons */
.nav .mobile-drawer .contact-mob a::before{content:none}
/* Mail-Icon (Material Symbols Sharp) */
.nav .mobile-drawer .contact-mob .btns a:nth-child(1)::before{
  content:"";display:inline-block;flex-shrink:0;
  width:18px;height:18px;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M80-160v-640h800v640H80Zm400-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M80-160v-640h800v640H80Zm400-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* Call-Icon (Material Symbols Sharp) */
.nav .mobile-drawer .contact-mob .btns a:nth-child(2)::before{
  content:"";display:inline-block;flex-shrink:0;
  width:18px;height:18px;background-color:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M798-120q-125 0-247.5-54T328-328Q228-428 174-550t-54-248v-42h236l37 201-114 115q22 39 49 74t58 65q29 29 63.5 55.5T524-280l116-116 200 41v235h-42ZM241-600l66-66-17-94h-89q5 45 15 84.5t25 75.5Zm358 358q40 17 80.5 27t80.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M798-120q-125 0-247.5-54T328-328Q228-428 174-550t-54-248v-42h236l37 201-114 115q22 39 49 74t58 65q29 29 63.5 55.5T524-280l116-116 200 41v235h-42ZM241-600l66-66-17-94h-89q5 45 15 84.5t25 75.5Zm358 358q40 17 80.5 27t80.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
@media (max-width:700px){
  .nav .mobile-drawer .contact-mob .btns{flex-direction:column}
}

@media (max-width:1100px){
  .nav nav ul{display:none}
  .nav .contact{display:none}
  .nav .burger{display:block}
  .nav .mobile-drawer{display:block}
  /* no-js-Fallback (20.08.2026): ohne JS ist der Drawer unbedienbar — statt
     eines toten Burgers zeigt der Header die Desktop-Linkzeile umbruchfähig
     (plus Kontakt-Button). Bewusst KEIN Checkbox-Hack: der hätte die
     Button/aria-Semantik des Headers verschlechtert. Kein Auf-/Zuklappen
     ohne JS — akzeptierte Restgrenze; Rechtliches steht im Footer. */
  html:not(.js) .nav .burger{display:none}
  html:not(.js) .nav .row{flex-wrap:wrap;row-gap:16px}
  html:not(.js) .nav nav ul{display:flex;flex-wrap:wrap;gap:0 24px}
  /* 44er-Trefferboxen + Abstand in einem (User-Feedback 20.08.2026): hier
     bewusst echtes Padding OHNE Negativ-Margin — im Fallback darf der
     Header wachsen, das Padding liefert Tap-Höhe UND Luft zugleich.
     Logo hat seine 44er-Box aus F8 bereits. */
  html:not(.js) .nav nav a{display:inline-block;padding-top:13px;padding-bottom:13px}
  html:not(.js) .nav .contact{display:inline-flex;min-height:44px}
  /* Drawer offen (Klasse via site.js): Header-Glas-Schicht über den Drawer heben
     (Drawer ist KIND des Headers, z-index 49 — Eltern-Hintergründe malen
     darunter). Gescrollte Menüpunkte tauchen so unter dem Band ab, statt mit
     dem Logo zu kollidieren. Glas-Optik (.72 wie der normale Header, Blur
     erbt die Basis-Regel); ohne backdrop-filter-Support opak, sonst kehrt
     die Kollision als 28%-Durchschein zurück. */
  .nav.drawer-open::before{z-index:50;background:rgba(var(--paper-rgb),.72)}
  .nav.drawer-open .row{z-index:51}
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .nav.drawer-open::before{background:var(--paper)}
  }
}

/* ============================================================
   TABLET (≤ 1100px) — layout shifts but still desktop-ish
   ============================================================ */
@media (max-width:1100px){
  .wrap{padding:0 var(--gap-5)}

  /* Heroes */
  .home-hero{padding-top:var(--space-6);padding-bottom:var(--space-5)}
  .home-hero h1{font-size:var(--fs-hero-home-md)}
  .home-hero h1 .break-right{margin-right:0}
  .hero-vignette{display:none}
  .home-hero .below{grid-template-columns:1fr;gap:40px;margin-top:var(--gap-8)}
  .home-hero .below .meta-list{text-align:left}
  .home-hero .below .meta-list li{justify-content:flex-start}

  .page-hero{padding-top:var(--space-4);padding-bottom:var(--gap-8)}

  /* Section heads */
  section.s .head, .long-text .grid, .approach .grid,
  .contact-form .grid, .notes .grid, .alts .grid{
    grid-template-columns:1fr !important; gap:32px;
  }
  .approach .grid .title, .long-text .grid .title,
  .service-deep .grid .title,
  .notes .grid .title{position:relative !important;top:0}

  /* Service-deep — collapse to one column */
  .service-deep .grid{grid-template-columns:1fr;gap:32px}
  .service-deep h2{position:relative;top:0;max-width:none}

  /* Pull-quote (Ansatz/Service-Deep/Long-Text) */
  .approach .pull,.service-deep .pull,.long-text .pull{padding-left:20px}

  /* Locations expand becomes 1-col */
  .locs .item .expand-inner{grid-template-columns:1fr;gap:24px;padding:8px 0 var(--gap-4) var(--gap-4)}

  /* Feature photo caption stacks */
  .feature .caption{grid-template-columns:1fr;gap:16px}
  .feature .caption .credit{text-align:left}

  /* Insights grid + Newsletter-Band */
  .insights-grid{grid-template-columns:1fr 1fr}
  .newsletter .grid{gap:64px}

  /* Portraits — Zweispalter; die Einleitung wird volle Zeile, ohne Polsterung
     (links steht kein Foto mehr, von dem sie sich absetzen müsste) */
  .portraits .grid{grid-template-columns:1fr 1fr}
  .portraits .grid .intro{grid-column:1 / -1;padding-left:0}
  .portraits .head{grid-template-columns:1fr;gap:16px}

  /* Person card on Kontakt */
  .person .grid{grid-template-columns:1fr;gap:32px}
  .person .img{max-width:100%;aspect-ratio:4/3}

  /* Sitemap (POC overview) */
  .sitemap .pages{grid-template-columns:1fr 1fr}

  /* Footer columns */
  footer .row{grid-template-columns:1fr 1fr;gap:40px}
}

/* ============================================================
   MOBILE (≤ 700px)
   ============================================================ */
@media (max-width:700px){
  .wrap{padding:0 20px}

  /* Body font slightly larger for readability */
  html,body{font-size:var(--fs-body-mobile)}

  /* Fließtext bleibt mobil bei 16px (Desktop: 19px) */
  .services .item p,.locs .item .exp-text p,.legal-content .body p,.legal-content .body ul li,
  .service-deep .body p,.approach .grid .body p,.long-text .grid .body p{font-size:var(--fs-body-mobile)}
  .person .info .row{font-size:16px}

  /* Heroes */
  .home-hero, .page-hero{padding-top:var(--space-3);padding-bottom:var(--gap-6)}
  .home-hero h1, .page-hero h1{font-size:var(--fs-hero-mobile);max-width:none}
  .home-hero .below{margin-top:var(--gap-6);gap:32px}

  /* Labels dürfen mobil umbrechen — nowrap sprengt sonst den Viewport */
  .label{white-space:normal}

  /* Headlines downsize globally.
     Legal auf .title gescopet: .legal-content .grid h2 traefe sonst auch
     die Complianz-Kapitel-h2 im .body (Cookie-Richtlinie, einziger
     Legal-Body mit h2) — das !important schluege deren 16px-Zuordnung
     (Befund 15.09.2026: Kapitel renderten mobil 28px statt 16px). */
  section.s .head h2,
  .locs .head h2,
  .long-text .grid h2,
  .approach .grid h2,
  .contact-form .grid h2,
  .newsletter .grid h2,
  .newsletter .grid h3,
  .person .info h2,
  .legal-content .grid .title h2,
  .notes .grid h2{font-size:var(--fs-h2-mobile) !important}
  .cta h3{font-size:var(--fs-cta-mobile) !important}

  /* Numbers section */
  .proof .nums{grid-template-columns:1fr 1fr}
  .proof .nums .n{padding:var(--gap-4) 16px}
  .proof .nums .n .v{font-size:var(--fs-num-mobile)}

  /* Services grid → 1 col */
  .services{grid-template-columns:1fr !important;gap:32px}
  /* Titel-Segmente auflösen: natürlicher Umbruch statt Waisenzeilen aus dem bewussten Editor-Umbruch */
  .services .item h3 span{display:inline}

  /* Standorte item row — stack */
  .locs{padding:var(--space-3) 0}
  .locs .item .row{
    grid-template-columns:1fr auto !important;
    grid-template-areas:"num go" "name name" "addr addr" "meta meta" !important;
    column-gap:0;row-gap:8px;padding:24px 0;
  }
  .locs .item .name{font-size:var(--fs-title)}
  .locs .item .meta{text-align:left}
  .locs .item .exp-photo{aspect-ratio:4/3}
  .locs .item .expand-inner{padding:8px 0 24px var(--gap-4)}

  /* Values section dl → single col */
  .values-section dl{grid-template-columns:1fr;gap:12px 0}
  .values-section dt{padding-top:24px;font-size:var(--fs-title-sm)}
  .values-section dd{padding-top:14px;font-size:var(--fs-body-mobile)}

  /* Bullet variants on small screens */
  .service-deep .body .topics.v1 li{font-size:16px}
  .service-deep .body .topics.v2 ul{grid-template-columns:1fr !important}
  .service-deep .body .topics.v3 li{font-size:14px;padding:14px 16px 14px 0}

  /* Insights: Karten → 1 col, kompaktere Kacheln, Filter + Pagination */
  .insights-grid{grid-template-columns:1fr !important;gap:20px;margin-top:var(--gap-4)}
  .insights-grid .card{min-height:0;padding:28px 24px 22px}
  .insights-grid .card h2,.insights-grid .card h3{font-size:var(--fs-title-mobile)}
  .insights-filter{padding:20px 0}
  .insights-filter .tabs{font-size:var(--fs-label-sm)}
  .insights-filter .tabs a{padding:7px 12px}
  .insights-pagination{font-size:var(--fs-label-sm)}
  .insights-pagination .pages{gap:0}
  /* margin:0: der Desktop-Negativ-Margin (F6) würde bei gap:0 Überlappung
     erzeugen. padding-inline 16px (User-Entscheidung 21.08.2026, bewusst
     sichtbare Änderung): volle ~44px-Tap-Boxen statt des engen 28er-Pitch —
     mehr Klick-Space mobil. Falls die Pagination je 5+ Seitenzahlen trägt,
     wird die Zeile bei 320px eng — dann ist eine gekürzte Pagination
     (1 … n) das Thema, nicht dieses Padding. */
  .insights-pagination .pages a{padding:12px 16px 14px;margin:0}
  .insights-pagination .pages a::after{left:16px;right:16px}

  /* Portraits → 2 col on smallest */
  .portraits .grid{grid-template-columns:1fr 1fr;gap:20px}
  .portraits .p .meta .name{font-size:var(--fs-title-mobile)} /* 22er-Mobilstufe vereinheitlicht auf 20, 11.9 (f) */

  /* Jobs list → stack */
  .jobs .job{grid-template-columns:1fr;gap:8px}

  /* Footer */
  footer .row{grid-template-columns:1fr;gap:32px}
  footer .legal{flex-direction:column;gap:12px;align-items:flex-start}
  /* Tap-Target F4: mobiler Menü-Pitch ist 37px (16px-Body statt 19 → kleinere
     li-Zeilenbox), Padding entsprechend schmaler als im Desktop-Basiswert */
  footer .col ul a{padding-top:6px;padding-bottom:6px;margin-top:-6px;margin-bottom:-6px}

  /* CTA buttons */
  .cta .button{padding:14px 24px;font-size:var(--fs-btn-mobile)}

  /* Padding reductions on sections */
  section.s, .approach, .long-text, .values-section,
  .feature, .archband-bleed, .proof, .jobs,
  .contact-form, .portraits, .person,
  .insights-section, .newsletter{padding:var(--space-3) 0}

  /* Sitemap pages → 1 col */
  .sitemap .pages{grid-template-columns:1fr}

  /* Filter row */
  .filter{flex-direction:column;align-items:flex-start;gap:16px}
  .filter .tabs{flex-wrap:wrap}

  /* Tap targets — min 44px */
  .nav .burger{width:44px;height:44px}
  .nav .burger span:nth-child(1){top:15px}
  .nav .burger span:nth-child(2){top:21px}
  .nav .burger span:nth-child(3){top:27px}
  .nav .burger.open span:nth-child(1),
  .nav .burger.open span:nth-child(3){top:21px}

  /* Drawer text smaller */
  .nav .mobile-drawer a{font-size:var(--fs-drawer-mobile)}

  /* Form fields */
  .contact-form form{grid-template-columns:1fr !important}

  /* Contact details */
  .contact-details .grid{grid-template-columns:1fr !important;gap:32px}
  /* Kachel-Titel: 22er-Mobilstufe vereinheitlicht auf 20 (vorher stufenlos), 11.9 (f) */
  .contact-details .item h4,.contact-details .item .item-title{font-size:var(--fs-title-mobile)}

  /* Helix size */
  .cta .helix-bg{--hx-size:180%}

  /* Architecture band — taller on mobile */
  .archband-bleed .frame{aspect-ratio:4/3}
}

/* Sehr kleine Geräte (≤359px, z. B. iPhone SE 1. Gen. mit 320px): Logo 28px — die Kopfzeile
   braucht mit 38px-Logo 359px (16 + 187 + 48 + 48 + 44 + 16; das leere nav-Element kostet den
   zweiten gap), darunter rutscht der Burger in den Rand (Staging-Messung 21.10.2026).
   Entscheidung Matthias: für alte Geräte keine perfekte Umsetzung nötig, 28px reicht. */
@media (max-width:359px){
  .nav .logo img{height:28px}
}

/* Tiny screens */
@media (max-width:380px){
  .wrap{padding:0 16px}
  .home-hero h1, .page-hero h1{font-size:var(--fs-hero-mobile)}
  /* Logo bleibt bis 360px auf 38px (21.10.2026, Entscheidung Matthias nach Logo-Testmatrix):
     auf Höhe des Burgers statt 28px; bei 375px bleiben 112px Luft. Darunter eigene Stufe (≤359px). */
  /* Tap-Target F4: Schutz für den UMBRUCH-Fall der Legal-Zeile —
     line-height 44px macht Zeilenbox UND Pitch zu 44, das vertikale
     Padding geht dafür auf 0 (sonst ragten die Boxen in die Nachbarzeile;
     ursprünglich rutschte AGB in Zeile 2, Pitch war 19px). Seit dem
     AGB-Ausbau (15.09.2026, gemessen auf Live) passt die Zeile mit
     Impressum · Datenschutz · Cookie-Richtlinie bis hinab zu 320px in
     EINE Zeile — die Regel bleibt trotzdem: Sie ist ohne Umbruch wirkungs-
     gleich (44er-Boxen so oder so) und schützt, sobald Text-Zoom oder
     längere Labels den Umbruch zurückbringen. */
  footer .legal span:last-of-type{line-height:44px}
  footer .legal a{padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0}
  .proof .nums .n{padding:24px 12px}
  .proof .nums .n .v{font-size:var(--fs-num-xs)}
}

/* ============================================================
   TOPICS EXPANDER — accordion list for service topics
   Replaces v1/v2/v3 as the chosen pattern.
   ============================================================ */
.service-deep .body .topics.expander ul{
  list-style:none;display:flex;flex-direction:column;
  border-top:1px solid var(--rule);
  hyphens:manual;
}
.service-deep .body .topics.expander li{
  border-bottom:1px solid var(--rule);
  padding:0;
}
.service-deep .body .topics.expander li::before{display:none}
.service-deep .body .topics.expander .topic-btn{
  display:flex;width:100%;align-items:center;gap:16px;
  padding:18px 0;background:transparent;border:0;cursor:pointer;
  font:inherit;color:var(--ink);text-align:left;
  font-family:var(--display);font-size:var(--fs-expander);font-weight:700;
  text-transform:uppercase;letter-spacing:var(--ls-expander);line-height:1.25;
  transition:padding-left .25s ease, color .25s, background .25s;
  position:relative;
}
.service-deep .body .topics.expander .topic-btn::before{
  content:"";display:inline-block;
  width:8px;height:8px;border-radius:50%;background:var(--blue);
  flex-shrink:0;transition:width .35s, height .35s, border-radius .35s;
}
.service-deep .body .topics.expander .topic-btn::after{
  content:"+";margin-left:auto;
  font-family:var(--display);font-size:24px;font-weight:400;
  color:var(--muted);line-height:1;flex-shrink:0;
  transition:transform .35s, color .25s;
}
.service-deep .body .topics.expander li.open .topic-btn::after{
  content:"−";color:var(--blue);transform:rotate(0deg)
}
.service-deep .body .topics.expander .topic-btn:hover,
.service-deep .body .topics.expander li.open .topic-btn{
  color:var(--blue);padding-left:16px;
}
/* Topic body: hidden by default, revealed when li.open.
   font-family/letter-spacing: kappen die D-DIN-Erbschaft aus dem
   .topics-li-Sammelselektor — der Klapptext ist Leserolle (Noto), 11.9 A8.
   0fr-Lücke (Fix 21.10.2026, Befund Matthias 20.10., Chrome vs. Firefox): Chrome
   rechnet den margin-bottom des Grid-Kinds (.service-deep .body p = var(--gap-4)
   = 32px) in die 0fr-Spur ein — unter jedem zugeklappten Thema stand 32px
   Leerraum; Firefox/Safari kollabieren die Spur auf 0. Deshalb trägt das Kind
   keinen Rand mehr; der Abstand im offenen Zustand läuft über das ohnehin
   animierte padding-bottom (20 + 32 = 52px). Offen bleibt damit in allen
   Browsern 146px wie vorher, zu ist überall 0. */
.service-deep .body .topics.expander .topic-body{
  display:grid;
  grid-template-rows:0fr;
  overflow:hidden;
  transition:grid-template-rows .35s ease;
  font-family:var(--body);
  letter-spacing:0;
}
.service-deep .body .topics.expander .topic-body > *{
  overflow:hidden;
  margin-bottom:0;
  padding-bottom:0;
  transition:padding-bottom .35s ease;
}
.service-deep .body .topics.expander li.open .topic-body{
  grid-template-rows:1fr;
}
.service-deep .body .topics.expander li.open .topic-body > *{
  padding-bottom:52px;
}
/* no-js-Härtung (20.08.2026): ohne JS sind die topic-btn tot — die Bodies
   wären unerreichbar. Ohne js-Klasse stehen alle Topics offen. */
html:not(.js) .service-deep .body .topics.expander .topic-body{grid-template-rows:1fr}
html:not(.js) .service-deep .body .topics.expander .topic-body > *{padding-bottom:52px}
.service-deep .body .topics.expander li.open .topic-btn::before{
  width:10px;height:10px;border-radius:2px;
}
/* Muss NACH den Expander-Basisregeln stehen (Sektion liegt hinter den globalen Breakpoint-Blöcken) */
@media (max-width:380px){
  .service-deep .body .topics.expander .topic-btn{gap:12px}
}
/* ============================================================
   COMPLIANZ COOKIE-BANNER — Adapter
   Herkunft der Klassen/Variablen: generiertes Plugin-CSS
   banner-1-optin.css, Live-Schnappschuss 18.08.2026,
   Complianz GDPR/CCPA Premium 7.6.3. Prüfseite:
   tools/complianz-harness.html (Eingaben in tools/cmplz-input/).
   REIHENFOLGE: Das Plugin-CSS lädt auf Live NACH site.css.
   :root-Overrides der --cmplz_*-Variablen würden dort verlieren —
   deshalb liegen sie am Container (Vererbungsnähe schlägt :root,
   unabhängig von der Ladereihenfolge); Elementregeln sind
   ID-qualifiziert, um die Klassenketten des Plugins zu schlagen.
   Plugin-Dateien werden nicht gepatcht.
   ============================================================ */

/* Cookie-Wall abschalten: Complianz legt bei offenem Banner die ganze
   Seite still (pointer-events/user-select none auf allem außer dem
   Banner) — die Cookie-Wall aus den Anti-Patterns, nur unsichtbar.
   !important, weil die Plugin-Regel selbst !important trägt; die
   Klassen-Verdopplung hebt die Spezifität eine Stufe über die
   Plugin-Regel, die sonst als spätere Quelle gewinnen würde. */
body.cmplz-banner-active.cmplz-banner-active *:not(.cmplz-cookiebanner):not(.cmplz-cookiebanner *){
  pointer-events:auto !important;
  user-select:auto !important;
}
/* Re-Pins: eigene Zustände, die bewusst pointer-events:none tragen,
   darf die pauschale Freigabe nicht reaktivieren, solange das Banner
   offen ist. Müssen NACH der Freigabe stehen (spätere Quelle gewinnt). */
body.cmplz-banner-active .nav .mobile-drawer:not(.open){pointer-events:none !important}
body.cmplz-banner-active .insights-pagination .step.disabled{pointer-events:none !important}
body.cmplz-banner-active .insights-section.is-loading .insights-pagination{pointer-events:none !important}
body.cmplz-banner-active .contact-form form.submitting button.wpcf7-submit{pointer-events:none !important}
/* Klassen-Tripel: muss die 4-Klassen-Spezifität der Freigabe erreichen */
body.cmplz-banner-active.cmplz-banner-active.cmplz-banner-active .helix-bg{pointer-events:none !important}

/* Theming-Variablen des Plugins überschreiben (Unterstrich-Präfix!).
   #cmplz-manage-consent ist der „Zustimmung verwalten"-Trigger unten
   links (Desktop-Hover; mobil ≤768px per Plugin-Einstellung „Standard"
   ausgeblendet — Widerrufsweg dort ist der Footer-Menüpunkt zur
   Cookie-Richtlinie, Entscheidung 19.08.2026, s. COMPLIANZ-SETUP.md).
   Er hängt an denselben Banner-Variablen, liegt aber außerhalb des
   Banner-Containers. */
#cmplz-cookiebanner-container,
#cmplz-manage-consent,
#cmplz-manage-consent-container{
  /* Dritter Scope: der leere Container auf der Cookie-Richtlinien-
     Seite, den das Plugin-JS zur Laufzeit mit dem Einwilligungs-
     Manager füllt — dieselben Variablen, sonst fiele er auf die
     #3B29FF-Defaults aus dem Plugin-:root zurück. */
  /* Box */
  --cmplz_banner_width:420px;
  --cmplz_banner_background_color:var(--paper-bright);
  --cmplz_banner_border_color:var(--rule);
  --cmplz_banner_border_width:1px;
  --cmplz_banner_border_radius:2px;   /* Design-Maximum; Plugin: 12px */
  /* Typografie */
  --cmplz_title_font_size:13px;
  --cmplz_text_font_size:14px;
  --cmplz_text_line_height:var(--lh-compact);
  --cmplz_text_color:var(--ink);
  --cmplz_hyperlink_color:var(--ink-soft);
  --cmplz_link_font_size:13px;
  --cmplz_category_body_font_size:14px;
  --cmplz_category_header_title_font_size:14px;
  --cmplz_category_header_active_font_size:13px;  /* Plugin 12px; Mobil-Minimum 13px */
  --cmplz_category_header_always_active_color:var(--muted);
  /* Buttons: Akzeptieren + Ablehnen ZWINGEND identisch (DSK-Vorgabe
     gleichwertiger Wahl + Blau-Regel; Plugin liefert Accept gefüllt
     in #3B29FF mit weißer Schrift) */
  --cmplz_button_border_radius:2px;   /* Plugin: 6px */
  --cmplz_button_font_size:13px;
  --cmplz_button_accept_background_color:transparent;
  --cmplz_button_accept_border_color:var(--ink);
  --cmplz_button_accept_text_color:var(--ink);
  --cmplz_button_deny_background_color:transparent;
  --cmplz_button_deny_border_color:var(--ink);
  --cmplz_button_deny_text_color:var(--ink);
  /* „Einstellungen" = dritte, textliche Stufe; Rest der Optik unten */
  --cmplz_button_settings_background_color:transparent;
  --cmplz_button_settings_border_color:transparent;
  --cmplz_button_settings_text_color:var(--muted);
  /* Toggles: derselbe Blau-Gebrauch wie accent-color an den
     Consent-Checkboxen (.contact-form .consent) */
  --cmplz_slider_active_color:var(--blue);
  --cmplz_slider_inactive_color:var(--muted-soft);
  --cmplz_slider_bullet_color:var(--paper-bright);
}

/* Box: unten links (setzt Complianz selbst), Abstand --gap-4.
   Schatten = .cta .button:hover — EINE Schattensprache; statisch
   gesetzt hebelt er zugleich den Hover-Schatten-Lift des Plugins aus. */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  left:var(--gap-4);bottom:var(--gap-4);
  font-family:var(--body);
  box-shadow:0 12px 32px rgba(0,0,0,.12);
}
/* Scrollbalken im Kategorien-Scrollbereich: das Plugin färbt ihn mit
   der Accept-Hintergrundfarbe — die ist jetzt transparent */
#cmplz-cookiebanner-container .cmplz-body::-webkit-scrollbar-thumb{background-color:var(--muted-soft)}

/* Kopfzeile: Titel linksbündig als Label-Rolle, Logo-Slot entfällt */
#cmplz-cookiebanner-container .cmplz-header{grid-template-columns:1fr auto}
#cmplz-cookiebanner-container .cmplz-logo{display:none}
#cmplz-cookiebanner-container .cmplz-title{
  grid-column-start:1;justify-self:start;
  font-family:var(--display);font-weight:400;   /* D-DIN hat kein 500 */
  letter-spacing:var(--ls-utility);text-transform:uppercase;
}
/* Blau-Strich vor dem Titel: als Variante geprüft und am 18.08.2026
   an der Live-Vorschau verworfen — Titel bleibt ohne Marker. */
#cmplz-cookiebanner-container .cmplz-close{color:var(--muted);transition:color .2s}
#cmplz-cookiebanner-container .cmplz-close:hover{color:var(--ink)}

/* Fließtext: exakt die Rolle der Consent-Labels
   (.contact-form form .consent label) — Banner wirkt wie Teil der Site */
#cmplz-cookiebanner-container .cmplz-message{color:var(--ink-soft);font-weight:var(--fw-body)}

/* Links (Cookie-Richtlinie/Datenschutz/Impressum + Links im Text):
   identisch zu .contact-form form .consent a */
#cmplz-cookiebanner-container .cmplz-links .cmplz-link,
#cmplz-cookiebanner-container .cmplz-message a{
  color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--rule);transition:.2s;
}
#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover,
#cmplz-cookiebanner-container .cmplz-message a:hover{color:var(--blue);border-color:var(--blue)}

/* Buttons: Vorbild .cta .button / .contact-form form button.
   Farben/Radius/Größe kommen aus den Variablen oben. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn{
  font-family:var(--display);letter-spacing:var(--ls-btn);text-transform:uppercase;
  font-weight:var(--fw-ui);   /* D-DIN hat kein 500 — 500 wäre wirkungslos */
  padding:14px 22px;cursor:pointer;transition:.2s;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-accept:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-deny:hover{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
/* „Einstellungen ansehen/speichern": dritte, textliche Stufe — leiser
   als die beiden gleichrangigen Einwilligungs-Buttons (Navigation,
   keine Einwilligung). Tap-Target bleibt ≥44px. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences{
  width:auto;flex:none;align-self:center;min-height:44px;
  padding:10px 2px;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  font-family:var(--body);letter-spacing:0;text-transform:none;font-weight:400;
  background:transparent;
}
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover{
  color:var(--blue);border-color:var(--blue);background:transparent;
}

/* Kategorien: Zeilenraster mit feinen Linien statt grauer Karten;
   trägt beliebig viele Zeilen (Tracking-Werkzeug noch offen) */
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category{
  background:transparent;border-top:1px solid var(--rule-soft);
}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category:not(:last-child){margin-bottom:0}
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category:last-child{border-bottom:1px solid var(--rule-soft)}
#cmplz-cookiebanner-container .cmplz-category-header .cmplz-category-title{font-weight:500;color:var(--ink)}   /* Noto 500 = Strong-Rolle */
#cmplz-cookiebanner-container .cmplz-category .cmplz-description{color:var(--ink-soft);font-weight:var(--fw-body);line-height:var(--lh-compact)}

/* Toggles: Rundung aufs Design-Maximum, Fokus im Site-Muster.
   Der Plugin-Fokusring ist ein hartes #245fcc auf :focus — ersetzt
   durch --blue auf :focus-visible (Ring mit Papier-Zwischenraum,
   Pendant zu outline-offset, das an Pseudo-Elementen nicht greift). */
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label::before,
#cmplz-cookiebanner-container .cmplz-banner-checkbox .cmplz-label::after{border-radius:2px}
#cmplz-cookiebanner-container input.cmplz-consent-checkbox:focus + .cmplz-label::before{box-shadow:none}
#cmplz-cookiebanner-container input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before{
  box-shadow:0 0 0 2px var(--paper-bright),0 0 0 4px var(--blue);
}

/* WP-Klasse .screen-reader-text wird von keinem geladenen Stylesheet
   versteckt (Theme kennt nur .sr-only) — Complianz nutzt sie in den
   Toggle-Labels; ohne diese Regel steht der Kategoriename doppelt. */
#cmplz-cookiebanner-container .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Einwilligungs-Manager auf der Cookie-Richtlinien-Seite (Kapitel 6.1):
   Complianz füllt #cmplz-manage-consent-container per JS mit dem
   Kategorien-Markup der Banner-Einstellungen — dessen Plugin-Optik ist
   aber auf .cmplz-cookiebanner gescopet und greift hier nicht (rohe
   Checkboxen). Nachbau der Banner-Einstellungen-Ansicht mit denselben
   Rollen; Erhebung: Live-DOM 18.08.2026, Eingabe
   tools/cmplz-input/manage-consent.html, Prüfseite Sektion 4. */
/* width:auto: das Plugin-CSS setzt .cmplz-categories UNSCOPET auf
   Bannerbreite (calc(var(--cmplz_banner_width) - 42px), ≥768px) —
   im Dokument soll die Liste die volle Spaltenbreite nutzen */
#cmplz-manage-consent-container .cmplz-categories{display:block;width:auto;margin:4px 0 16px;border-top:1px solid var(--rule-soft)}
#cmplz-manage-consent-container .cmplz-category{border-bottom:1px solid var(--rule-soft)}
/* position:relative + auto-Spalte (15.09.2026): Anker für die
   Zeilen-Klickfläche des Toggles (s. u.) und Platz für die 24px-Glyphe */
#cmplz-manage-consent-container .cmplz-category-header{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px;position:relative}
#cmplz-manage-consent-container .cmplz-category-title{font-size:var(--fs-text-sm);font-weight:500;color:var(--ink);line-height:var(--lh-compact)}   /* Noto 500 = Strong-Rolle */
#cmplz-manage-consent-container .cmplz-always-active{font-size:var(--fs-label);font-weight:500;color:var(--muted)}
/* wie im Banner: Funktional ist nicht schaltbar, nur "Immer aktiv" */
#cmplz-manage-consent-container .cmplz-always-active .cmplz-banner-checkbox{display:none}
/* Toggle-Schalter: Checkbox unsichtbar über der Schalterfläche,
   ::before = Fläche (--muted-soft, aktiv --blue), ::after = Knopf —
   dieselben Maße wie im Banner-Plugin-CSS, Rundung Design-Maximum 2px */
#cmplz-manage-consent-container .cmplz-banner-checkbox{display:flex;align-items:center;margin:0;position:relative}
#cmplz-manage-consent-container input.cmplz-consent-checkbox{position:absolute;z-index:1;top:0;left:0;width:40px;height:20px;margin:0;opacity:0;cursor:pointer}
#cmplz-manage-consent-container .cmplz-label{position:relative;padding-left:30px;margin:0}
#cmplz-manage-consent-container .cmplz-label::before{content:"";display:block;position:absolute;left:0;top:-7px;width:28px;height:15px;border-radius:2px;background:var(--muted-soft);transition:background-color .3s}
#cmplz-manage-consent-container .cmplz-label::after{content:"";display:block;position:absolute;left:4px;top:-5px;width:11px;height:11px;border-radius:2px;background:var(--paper-bright);transition:left .3s}
#cmplz-manage-consent-container input.cmplz-consent-checkbox:checked + .cmplz-label::before{background:var(--blue)}
#cmplz-manage-consent-container input.cmplz-consent-checkbox:checked + .cmplz-label::after{left:14px}
#cmplz-manage-consent-container input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--blue)}   /* Seitengrund ist --paper */
/* Aufklapper-Zeile (Angleichung an „Platzierte Cookies", 15.09.2026 —
   erledigt zugleich A11y-Befund F9, Toggle war 15×18px):
   1) Stretched Button (Haus-Muster Jobs-Karte F5): das ::before des
      statischen Buttons spannt sich über den relativen Header — die
      GANZE Zeile klappt. Der Consent-Schalter bleibt bedienbar, sein
      Input liegt mit z-index:1 ÜBER dem Overlay (Mechanik wie F7).
   2) Chevron-SVG versteckt, „+/−" per ::after im Abschnitt-5-Rezept;
      Farben nach Skill-Regel v1.18: Ruhe --muted, Hover --ink (wirkt
      durch das Overlay auf der ganzen Zeile), Offen = aktiv → Blau. */
#cmplz-manage-consent-container .cmplz-category-toggle{background:none;border:0;padding:0;margin:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .2s}
#cmplz-manage-consent-container .cmplz-category-toggle:hover{color:var(--ink)}
#cmplz-manage-consent-container .cmplz-category-toggle::before{content:"";position:absolute;inset:0;cursor:pointer}
#cmplz-manage-consent-container .cmplz-icon.cmplz-open{display:none}
#cmplz-manage-consent-container .cmplz-category-toggle::after{content:"+";font-family:var(--display);font-size:24px;font-weight:400;line-height:1}
#cmplz-manage-consent-container .cmplz-category-toggle[aria-expanded="true"]::after{content:"−";color:var(--blue)}
#cmplz-manage-consent-container .cmplz-description{font-size:var(--fs-text-sm);font-weight:var(--fw-body);line-height:var(--lh-compact);color:var(--ink-soft);padding:0 10px 12px;margin:0}

/* Mobil: volle Breite abzüglich der Seitenränder (20px wie .wrap),
   unten sitzend. Buttons stapelt das Plugin selbst (≤768px). */
@media (max-width:700px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    left:20px;right:20px;bottom:20px;width:auto;min-width:0;max-width:none;
  }
}
/* Plugin blendet den Titel ≤425px aus — zurückholen: der Titel ist
   die Label-Zeile, das Banner soll auch mobil wie die Site wirken */
@media (max-width:425px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header .cmplz-title{display:block}
}

/* Reduced Motion: Einblendung der Kategorien + Manage-Consent-Slide */
@media (prefers-reduced-motion:reduce){
  #cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in{animation:none}
  #cmplz-manage-consent .cmplz-manage-consent{animation:none}
  #cmplz-cookiebanner-container .cmplz-cookiebanner,
  #cmplz-cookiebanner-container .cmplz-cookiebanner *,
  #cmplz-manage-consent-container *{transition:none}
}

/* ============================================================
   INSIGHT SINGLE — Beitragsseite der Insights
   (single-insight-post.php, Artikelseiten-Umbau 15.09.2026)

   BEWUSST OHNE POC-SPIEGELUNG: Der POC kennt diese Seite nicht,
   diese Sektion lebt nur hier (Vermerk in CLAUDE.md). Für die
   KARTEN-Regeln (Sektion INSIGHTS PAGE) gilt die Spiegelung nach
   poc/assets/css/insights-01.css unverändert weiter.

   Nur bestehende Tokens. Rezepte: Lesespalte = .long-text (62ch,
   28px-Absatzrhythmus), h2 = .services .item h3 (--fs-title-xl),
   h3/h4/Listen/hr = .legal-content .body, Links = Fließtext-Link.
   Stellschrauben nach dem Staging-Test (Leitplanke 0.1): Spalten-
   breite und Zwischentitel-Leiter — Block als Ganzes austauschbar.
   ------------------------------------------------------------ */
/* Kopf: page-hero-Muster, eine Stufe kleiner und mehr Zeichenbreite —
   Artikel-Titel sind lang und nicht kuratiert (bis ~102 Zeichen). */
.page-hero.insight-hero h1{font-size:var(--fs-h2-person);max-width:24ch}

/* Lesespalte */
.insight-article{padding:var(--space-4) 0 var(--space-7);border-top:1px solid var(--rule)}
.insight-article .body{max-width:62ch}
.insight-article .body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);font-weight:var(--fw-body);margin-bottom:28px}
.insight-article .body p strong,.insight-article .body p b{color:var(--ink);font-weight:500}
.insight-article .body p em,.insight-article .body p i{color:var(--blue);font-style:italic;font-weight:400}
.insight-article .body a{border-bottom:1px solid var(--rule);transition:.2s}
.insight-article .body a:hover{color:var(--blue);border-color:var(--blue)}

/* Zwischentitel-Leiter — Variante A (Empfehlung): h2 auf --fs-title-xl
   statt der wuchtigen --fs-h2-panel-Stufe der Rechtstexte; h3/h4 nach
   .legal-content .body. Variante B (h2 im Panel-Rezept) wird zur
   Entscheidung am echten Text auf Staging gegenübergestellt. */
.insight-article .body h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-title-xl);line-height:1.05;letter-spacing:var(--ls-title);text-transform:uppercase;color:var(--ink);margin:var(--gap-6) 0 20px}
.insight-article .body h2:first-child{margin-top:0}
.insight-article .body h3{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-legal-h3);letter-spacing:var(--ls-expander);text-transform:uppercase;color:var(--ink);margin:var(--gap-5) 0 12px}
.insight-article .body h4{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-nav);letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--ink-soft);margin:28px 0 8px}

/* Listen und Struktur-Elemente — Rezepte .legal-content .body, aber im
   28px-Rhythmus der Lesespalte; fetter Vorspann je Punkt wie strong */
.insight-article .body ul,.insight-article .body ol{margin:0 0 28px;padding-left:20px}
.insight-article .body li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);font-weight:var(--fw-body);margin-bottom:12px}
.insight-article .body li strong,.insight-article .body li b{color:var(--ink);font-weight:500}
.insight-article .body hr{border:0;border-top:1px solid var(--rule);margin:var(--gap-5) 0}
.insight-article .body blockquote{margin:0 0 28px;padding-left:20px;border-left:2px solid var(--blue);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}

/* Mobil — additiv, kein Eingriff in die bestehende ≤900-Liste */
@media (max-width:900px){
  .insight-article .body p,
  .insight-article .body li{font-size:var(--fs-body-mobile)}
}

/* „Mehr Insights"-Kopf (Nachrunde 6.1, 15.09.2026): Rezept-Kopie von
   .portraits .head — Eyebrow-Label = Kategoriename, h2 eine Stufe unter
   dem Standard-Sektionskopf (--fs-h2-portrait statt --fs-h2, Entscheidung
   Matthias am Staging-Test). Eigener Scope statt Klassen-Leihe: die
   Klasse .portraits brächte die Personenkachel-Regeln mit (Präzedenz für
   Rezept-Kopien mit eigenem Scope: .locs/.jobs .head). */
.insight-related .head{display:grid;grid-template-columns:auto 1fr;gap:80px;align-items:baseline;margin-bottom:var(--space-4)}
/* Label als Block statt des generischen .label-Flex (Grundlinien-Fix,
   Befund Matthias 15.09.2026): Ein Flex-Container exportiert die Baseline
   seines ERSTEN Items — beim .label ist das der textlose 1px-Strich
   (::before), dessen Unterkante mittig zur Versalzeile sitzt. Das Grid
   richtete die h2 daran aus, der Label-Text saß ~5px zu tief (gemessen
   4,6px). Als Block exportiert das Label seine echte Textgrundlinie; der
   Strich rückt per vertical-align:middle + margin an dieselbe optische
   Position (gap entfällt mit dem Flex). Das padding-top:14px des
   Portrait-Rezepts entfällt — bei echter Baseline-Ausrichtung wirkungslos.
   Seit 15.09.2026 (abends) SYSTEMWEIT nachgezogen — derselbe Fix gilt
   für section.s/.portraits/.locs/.jobs .head (Block bei der generischen
   .label-Regel, Entscheidung Matthias); dieser Scope hier war der erste. */
.insight-related .head .label{display:block;font-family:var(--display);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.insight-related .head .label::before{vertical-align:middle;margin-right:14px}
.insight-related .head h2{font-family:var(--display);font-weight:var(--fw-display);font-size:var(--fs-h2-portrait);line-height:var(--lh-tight);letter-spacing:var(--ls-headline);text-transform:uppercase}
.insight-related .head h2 em{font-style:italic;font-weight:400;color:var(--blue)}
@media (max-width:900px){
  .insight-related .head{grid-template-columns:1fr;gap:16px;margin-bottom:var(--gap-5)}
}