/* =========================================================================
   EWPG — EDITORIAL LAYER v1
   Private-banking journal aesthetic. Drop into Appearance → Customize →
   Additional CSS. Loads new fonts and overrides the existing theme styles
   without touching DOM. All selectors are scoped to the current theme.
   ========================================================================= */

/* Fonts (Spectral + Hanken Grotesk) werden seit dem P1-Fix B2 (06/2026) im Theme
   geladen (functions.php: preload + async stylesheet) — kein @import mehr hier,
   die render-blockierende Kette HTML → custom-css → @import → woff2 entfällt. */

:root {
  /* Type ----------------------------------------------------------------- */
  --ff-display: "Spectral", "Iowan Old Style", Georgia, serif;
  --ff-body:    "Hanken Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Editorial type scale (fluid for marketing surfaces) ------------------ */
  --fs-eyebrow: 0.72rem;
  --fs-meta:    0.78rem;
  --fs-base:    1.0625rem;     /* 17px — body comfort */
  --fs-lede:    1.25rem;
  --fs-section: clamp(2.25rem, 4.2vw, 3.5rem);
  --fs-display: clamp(3.25rem, 9vw, 7.5rem);
  --fs-pullquote: clamp(1.75rem, 3.3vw, 2.75rem);

  /* Spacing (4pt scale) -------------------------------------------------- */
  --sp-1: 0.25rem;   --sp-2: 0.5rem;    --sp-3: 0.75rem;
  --sp-4: 1rem;      --sp-6: 1.5rem;    --sp-8: 2rem;
  --sp-10: 2.5rem;   --sp-12: 3rem;     --sp-16: 4rem;
  --sp-20: 5rem;     --sp-24: 6rem;     --sp-32: 8rem;     --sp-48: 12rem;

  /* Colour — OKLCH for perceptual uniformity ---------------------------- */
  --paper:        oklch(0.985 0.004 85);             /* fast weiss, warmer Hauch (bis 11.06.2026: Cream 0.965/0.012/80) */
  --paper-card:   oklch(0.975 0.006 82);             /* card surface */
  --paper-edge:   oklch(0.95  0.008 82);             /* deepest paper */
  --ink:          oklch(0.18  0.022 250);            /* deep ink */
  --ink-2:        oklch(0.32  0.018 250);            /* secondary text */
  --ink-3:        oklch(0.50  0.014 250);            /* tertiary / labels */
  --ink-4:        oklch(0.62  0.010 250);            /* meta */
  --rule:         oklch(0.18 0.022 250 / 0.12);
  --rule-strong:  oklch(0.18 0.022 250 / 0.28);
  --gold:         oklch(0.66  0.108 76);             /* aged gold */
  --gold-deep:    oklch(0.52  0.115 72);             /* darker gold */
  --gold-tint:    oklch(0.66  0.108 76 / 0.10);
  --marine:       oklch(0.29  0.048 255);            /* dunkle FLÄCHEN: Dark-Sektionen + gefüllte Buttons (11.06.2026; Text bleibt --ink) */

  /* Container ------------------------------------------------------------ */
  --shell:        min(1200px, 100% - 2.5rem);
  --measure:      66ch;
  --measure-narrow: 48ch;
}

/* =========================================================================
   1. RESET & PAPER
   ========================================================================= */
html, body { background: var(--paper) !important; }

body, p, li, td, th, a, span, div, blockquote, .nav, .footer {
  font-family: var(--ff-body) !important;
}
h1, h2, h3, h4, h5, h6,
.hero h1, .comparison-title, .services-title, .blog-headline, .cta-section h2,
.wow-pullquote blockquote, .testimonial-quote, .founder blockquote, .footer-logo {
  font-family: var(--ff-display) !important;
  font-feature-settings: "ss01", "kern", "liga", "calt";
}

body {
  color: var(--ink) !important;
  font-size: var(--fs-base) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p { line-height: 1.62; }

a { color: var(--ink); text-decoration: none; transition: color .22s ease; }
a:hover { color: var(--gold-deep); }

/* Strong typographic apostrophes / dashes – hint */
::selection { background: var(--gold-tint); color: var(--ink); }

/* =========================================================================
   2. NAVIGATION
   ========================================================================= */
.nav {
  background: color-mix(in oklch, var(--paper) 92%, transparent) !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
  border-bottom: 1px solid var(--rule) !important;
  padding-block: 1.05rem !important;
}
.nav.scrolled {
  background: color-mix(in oklch, var(--paper) 97%, transparent) !important;
  border-bottom-color: var(--rule-strong) !important;
}

.nav-logo .mark {
  font-family: var(--ff-display) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  letter-spacing: 0.18em !important;
  font-size: 1.05rem !important;
  color: var(--ink) !important;
}
.nav-logo .full {
  font-family: var(--ff-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-size: 0.66rem !important;
  color: var(--ink-3) !important;
  display: block;
  margin-top: 0.15rem;
}

.nav-links a {
  font-family: var(--ff-body) !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  position: relative;
  padding-bottom: 4px;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--ink) !important;
}
.nav-links a.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}

/* Nav CTA — editorial: minimal outlined.
   .mobile-nav-cta (E4): CTA im Mobile-Overlay erbt denselben Button-Look —
   !important schlägt auch main.css' .mobile-nav-a-Typo (Serif 28px). */
.nav a.btn, .nav .btn-primary, .nav-cta, .mobile-nav-cta {
  background: var(--marine) !important;
  color: var(--paper) !important;
  border: 1px solid var(--marine) !important;
  border-radius: 0 !important;
  font-family: var(--ff-body) !important;
  font-weight: 500 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.5rem !important;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.nav a.btn:hover, .nav .btn-primary:hover, .nav-cta:hover, .mobile-nav-cta:hover {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: var(--paper) !important;
}

/* =========================================================================
   3. HERO
   ========================================================================= */
.hero {
  padding-block: clamp(7rem, 14vh, 12rem) clamp(4rem, 8vh, 7rem) !important;
  background: var(--paper) !important;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "N° 01 — MMXXVI";
  position: absolute;
  top: 6.5rem;
  right: 2rem;
  /* main.css gibt demselben Pseudo inset:0 + warmen Radial-Gradient mit —
     Property-Merge liess den Gradient fast hero-füllend weiterleben
     (auf Cream unsichtbar, auf Fast-Weiss als Schleier). Explizit toeten. */
  bottom: auto;
  left: auto;
  background: none !important;
  font-family: var(--ff-body);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
@media (max-width: 900px) { .hero::before { display: none; } }

.hero-overline {
  font-family: var(--ff-body) !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem !important;
}
.hero-overline::before {
  content: ""; width: 2.5rem; height: 1px; background: var(--gold);
}

.hero h1 {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-display) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.018em !important;
  color: var(--ink) !important;
  max-width: 18ch !important;
  margin: 0 0 2.25rem 0 !important;
}
.hero h1 .heading-line { display: inline; }
.hero h1 em {
  font-style: italic !important;
  font-weight: 300 !important;
  /* Gold-Moment in Displaygrösse (User 11.06.) — gold-deep statt gold:
     auf Fast-Weiss ist --gold <3:1 (WCAG-Large-Text-Grenze), gold-deep
     ist der etablierte Gold-Ton für Text auf Papier (Hovers, Kartentitel). */
  color: var(--gold-deep) !important;
  display: block;
}

.hero-sub {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  color: var(--ink-2) !important;
  max-width: var(--measure-narrow) !important;
  margin: 0 0 2.75rem 0 !important;
}

/* Hero buttons — editorial: ghost serif + arrow underline */
.hero-buttons {
  display: flex; gap: 2.5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 3rem !important;
}
.hero-buttons a {
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 1rem 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  position: relative;
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.hero-buttons a::after {
  content: "→";
  font-family: var(--ff-display) !important;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0;
  transition: transform .25s ease;
}
.hero-buttons a:hover::after { transform: translateX(4px); }
.hero-buttons a:first-child {
  border-bottom: 1px solid var(--ink) !important;
  padding-bottom: 0.55rem !important;
}
.hero-buttons a:first-child:hover {
  color: var(--gold-deep) !important;
  border-bottom-color: var(--gold) !important;
}
.hero-buttons a:not(:first-child) {
  color: var(--ink-2) !important;
}
.hero-buttons a:not(:first-child)::before {
  content: "—"; color: var(--gold); margin-right: 0.5rem;
}

/* Hero trust-line below buttons */
.hero > .reveal:last-child,
.hero .trust-line,
.hero-trust {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
}

/* =========================================================================
   4. STATS — hanging numerals
   ========================================================================= */
.stats {
  background: var(--paper) !important;
  padding-block: clamp(3rem, 6vh, 5rem) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.stats-inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
}
.stat {
  text-align: left !important;
  padding: 1.5rem 2rem !important;
  position: relative;
}
.stat + .stat::before {
  content: "";
  position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem;
  width: 1px; background: var(--rule-strong);
}
.stat::after {
  content: counter(stat-counter, upper-roman) ".";
  counter-increment: stat-counter;
  position: absolute;
  top: 1.5rem; right: 2rem;
  font-family: var(--ff-display);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
}
.stats-inner { counter-reset: stat-counter; }
.stat-number {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: clamp(2.75rem, 5.5vw, 4.25rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  margin-bottom: 0.85rem !important;
  letter-spacing: -0.02em !important;
  font-feature-settings: "lnum", "tnum";
}
.stat-label {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  max-width: 20ch !important;
  line-height: 1.5 !important;
}

@media (max-width: 760px) {
  /* !important Pflicht: die Basis-Regel oben ist !important und gewinnt
     sonst gegen die eigene Mobile-Query (gleiche Spezifität, Importance
     schlägt Source-Order) — Fehlerklasse Mobile-Audit 11.06. */
  .stats-inner { grid-template-columns: 1fr !important; }
  .stat + .stat::before { display: none; }
  .stat + .stat { border-top: 1px solid var(--rule-strong); }
}

/* =========================================================================
   5. FOUNDER
   ========================================================================= */
.founder {
  background: var(--paper) !important;
  padding-block: clamp(5rem, 12vh, 9rem) !important;
}
.founder-inner {
  display: grid !important;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) !important;
  gap: clamp(2rem, 5vw, 5rem) !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  align-items: start !important;
}
.founder-image {
  position: relative;
  /* Foto an Seiten-Hintergrund anpassen (User-Feedback 11.06.): Das
     Theme gibt dem Container 3:4 + dunklen Verlaufs-Overlay (::after) +
     Schatten — das Editorial-Bild ist aber quadratisch (height:auto),
     das leere untere Containerviertel wurde als graue Karte sichtbar.
     Container hugt jetzt das Bild, Overlay/Schatten/Radius sterben. */
  aspect-ratio: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* overflow:hidden des Themes hat bisher den gedachten Gold-Offset-
     Frame (::before unten) weggeclippt — sichtbar machen. */
  overflow: visible !important;
  /* Backdrop für mix-blend-mode unten: exakt die Sektionsfarbe; deckt
     zugleich die Frame-Segmente (z-index -1) unter dem Bild ab. */
  background: var(--paper) !important;
}
.founder-image::after { content: none !important; }
.founder-image img {
  width: 100% !important;
  height: auto !important;
  display: block;
  filter: contrast(1.04) saturate(0.92);
  border-radius: 0 !important;
  /* Foto-Weiss → Papier: multipliziert mit dem paper-Backdrop des
     Containers verschmilzt der kühle Foto-Hintergrund mit der Seite. */
  mix-blend-mode: multiply;
}
/* Kein Offset-Frame mehr: Das Pseudo-Element war ein Theme/Editorial-
   Mischwesen (Theme-Reste height 2px + Gold-Gradient + opacity .35
   kaskadierten hinein) und schien als Streulinie durchs multiply-Foto —
   die .reveal-Transform macht den Container zum Stacking-Context, darum
   liegt z-index -1 hier ÜBER dem Container-Background. content:none
   killt beide Schichten; das Foto steht seamless auf dem Papier. */
.founder-image::before { content: none !important; }

.founder-content { padding-top: 2rem; }
.founder-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 2rem !important;
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.founder-label::before {
  content: "II"; font-family: var(--ff-display); font-style: italic;
  color: var(--gold); letter-spacing: 0;
}

.founder blockquote {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(1.65rem, 2.6vw, 2.35rem) !important;
  line-height: 1.25 !important;
  color: var(--ink) !important;
  margin: 0 0 2rem 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
  max-width: 32ch;
}
.founder blockquote::before {
  content: "“";
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 200;
  font-size: 7rem;
  line-height: 1;
  color: var(--gold);
  position: absolute;
  left: -3.5rem; top: -2rem;
  pointer-events: none;
}
@media (max-width: 720px) {
  .founder blockquote::before { left: -0.25rem; top: -3rem; font-size: 5rem; }
}

.founder-attribution,
.founder cite,
.founder .attribution {
  display: block;
  font-family: var(--ff-body) !important;
  font-style: normal !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  border-top: 1px solid var(--rule-strong);
  padding-top: 1rem;
  max-width: 28ch;
}

@media (max-width: 820px) {
  /* !important: Basis-Regel (Z. ~362) ist !important — siehe Stats-Fix. */
  .founder-inner { grid-template-columns: 1fr !important; }
}

/* =========================================================================
   6. COMPARISON TABLE
   ========================================================================= */
.comparison {
  background: var(--paper) !important;
  padding-block: clamp(5rem, 12vh, 9rem) !important;
  border-top: 1px solid var(--rule) !important;
}
.comparison-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 0 auto 1.5rem auto !important;
  max-width: var(--shell);
  text-align: left !important;
  display: flex; align-items: center; gap: 0.85rem;
}
.comparison-label::before {
  content: "III"; font-family: var(--ff-display); font-style: italic;
  color: var(--gold); letter-spacing: 0;
}
.comparison-title {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  max-width: var(--shell);
  margin: 0 auto 3.5rem auto !important;
  text-align: left !important;
}

.comp-table {
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  border: 0 !important;
  background: transparent !important;
  border-collapse: collapse !important;
  width: 100%;
}
.comp-table th, .comp-table td {
  padding: 1.15rem 1.5rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule) !important;
  background: transparent !important;
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  color: var(--ink-2) !important;
  text-align: left !important;
  vertical-align: middle !important;
}
.comp-table thead th {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  padding-bottom: 1.5rem !important;
}
.comp-table thead th.highlight {
  color: var(--ink) !important;
  position: relative;
}
.comp-table thead th.highlight::after {
  content: "EWPG";
  display: block;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-deep);
  margin-top: 0.15rem;
  font-style: italic;
}
/* Hide the original "EWPG" text since we generated a styled version via ::after */
.comp-table thead th.highlight { text-indent: -9999px; line-height: 0; }
.comp-table thead th.highlight::after { text-indent: 0; line-height: normal; }

.comp-table tbody td.highlight,
.comp-table .highlight {
  background: var(--gold-tint) !important;
  color: var(--ink) !important;
}
.comp-table tbody td:first-child {
  font-weight: 500 !important;
  color: var(--ink) !important;
}
.comp-table tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong) !important; }

/* Symbol replacement for ja/teilweise/nein */
.comp-table td span,
.comp-table td .check,
.comp-table td .partial,
.comp-table td .no { font-family: var(--ff-display); font-style: italic; }

/* =========================================================================
   7. SERVICES
   ========================================================================= */
.services {
  background: var(--paper) !important;
  padding-block: clamp(5rem, 12vh, 9rem) !important;
  border-top: 1px solid var(--rule) !important;
}
.services-inner {
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  counter-reset: svc-counter;
}
.services-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 1.5rem !important;
  display: flex; align-items: center; gap: 0.85rem;
}
.services-label::before {
  content: "IV"; font-family: var(--ff-display); font-style: italic;
  color: var(--gold); letter-spacing: 0;
}
.services-title {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  margin-bottom: 4rem !important;
  max-width: 22ch;
}

.services-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  counter-reset: svc-counter;
}

/* Service item — handles BOTH variants:
   - Home: .service-item > .service-icon + h3 + p   (compact list)
   - Dienstleistungen: .service-item > .service-icon + .service-content (h3 + p.service-desc + ul.service-bullets) */
.service-item {
  display: grid !important;
  grid-template-columns: 5rem 1fr !important;
  gap: 2rem !important;
  align-items: start !important;
  padding: 3rem 0 !important;
  border-top: 1px solid var(--rule) !important;
  background: transparent !important;
  position: relative;
  /* B4: kein padding-left mehr in der Liste (Layout-Reflow der ganzen
     Grid-Zeile); opacity/transform 0.8s restauriert den Scroll-Reveal,
     den dieses Shorthand vorher totgeschlagen hat (.service-item.reveal). */
  transition: background .3s ease, opacity 0.8s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform 0.8s var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  text-decoration: none !important;
}
/* B4: Hover-Indent GPU-seitig auf den Kindern (inkl. römischer Ziffer),
   Hairline (border-top) und Pfeil (::after) bleiben stehen. */
.service-item::before,
.service-item > h3,
.service-item > p,
.service-item > .service-content {
  transition: transform .3s cubic-bezier(0.23, 1, 0.32, 1);
}
.service-item:hover::before,
.service-item:hover > h3,
.service-item:hover > p,
.service-item:hover > .service-content {
  transform: translateX(1rem);
}
.service-item:last-child { border-bottom: 1px solid var(--rule); }
.service-item::before {
  counter-increment: svc-counter;
  content: counter(svc-counter, upper-roman) ".";
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
  padding-top: 0.25rem;
}
/* Icons replaced by Roman numerals */
.service-item .service-icon { display: none !important; }

/* Home variant: h3 is a direct child of .service-item — center it horizontally */
.service-item > h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.55rem, 2.4vw, 2.05rem) !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 !important;
  letter-spacing: -0.005em !important;
}
.service-item > p {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0.75rem 0 0 0 !important;
  max-width: 56ch;
  grid-column: 2;
}

/* Dienstleistungen variant: .service-content wrapper holds h3, p.service-desc, ul.service-bullets */
.service-item > .service-content { display: block; }
.service-item > .service-content > h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  line-height: 1.15 !important;
  color: var(--ink) !important;
  margin: 0 0 0.85rem 0 !important;
  letter-spacing: -0.005em !important;
}
.service-item .service-desc {
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 0 1.5rem 0 !important;
  max-width: 60ch !important;
}
.service-item .service-bullets {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2rem;
  max-width: 60ch;
}
.service-item .service-bullets li {
  font-family: var(--ff-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  padding-left: 1.2rem !important;
  position: relative;
}
.service-item .service-bullets li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-family: var(--ff-display);
}
@media (max-width: 720px) {
  .service-item .service-bullets { grid-template-columns: 1fr; }
}

.service-item::after {
  content: "→";
  position: absolute;
  right: 0; top: 3rem;
  font-family: var(--ff-display);
  font-size: 1.2rem;
  color: var(--ink-3);
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.service-item:hover {
  background: linear-gradient(to right, transparent, var(--gold-tint)) !important;
}
.service-item:hover::after {
  opacity: 1;
  transform: translateX(4px);
  color: var(--gold-deep);
}
.service-item:hover > h3,
.service-item:hover > .service-content > h3 { color: var(--gold-deep) !important; }

@media (max-width: 800px) {
  .service-item { grid-template-columns: 3.5rem 1fr !important; padding: 2rem 0 !important; gap: 1rem !important; }
  .service-item::before { font-size: 1.5rem; }
}

/* =========================================================================
   8. TESTIMONIALS
   ========================================================================= */
.testimonials {
  background: var(--paper-card) !important;
  padding-block: clamp(5rem, 12vh, 9rem) !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}
.testimonials-inner {
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  text-align: center;
}
.testimonials-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 3rem !important;
  display: inline-flex !important; align-items: center; gap: 0.85rem;
}
.testimonials-label::before {
  content: "V"; font-family: var(--ff-display); font-style: italic;
  color: var(--gold); letter-spacing: 0;
}

.testimonial-quote {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: var(--fs-pullquote) !important;
  line-height: 1.28 !important;
  color: var(--ink) !important;
  max-width: 28ch !important;
  margin: 0 auto 2rem auto !important;
}

.testimonial-cite,
.testimonial-dash + *,
.testimonials .author,
.testimonial-author {
  font-family: var(--ff-body) !important;
  font-style: normal !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
}
.testimonial-dash {
  width: 2.5rem !important;
  height: 1px !important;
  background: var(--gold) !important;
  margin: 1.5rem auto !important;
  /* B8: width-Hover aus main.css ist durch das !important hier tot —
     Geste als scaleX übersetzen (1.4 ≈ Original 28→40px), opacity-Sprung
     0.7→1 (main.css) kommt mit in die Transition-Liste. center, weil der
     Dash per margin:auto zentriert ist. */
  transform-origin: center;
  transition: transform .4s cubic-bezier(0.23, 1, 0.32, 1), opacity .4s ease;
}
.testimonial-slide:hover .testimonial-dash {
  transform: scaleX(1.4);
  opacity: 1;
}

/* =========================================================================
   9. WOW PULLQUOTE
   ========================================================================= */
.wow-pullquote {
  background: var(--paper) !important;
  padding-block: clamp(5rem, 14vh, 10rem) !important;
  text-align: center !important;
  position: relative;
}
.wow-pullquote::before {
  content: "“";
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(8rem, 16vw, 14rem);
  color: var(--gold-tint);
  line-height: 0.6;
  position: absolute;
  top: 4rem; left: 50%; transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}
.wow-pullquote blockquote {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-style: italic !important;
  font-size: clamp(2rem, 4vw, 3.4rem) !important;
  line-height: 1.18 !important;
  color: var(--ink) !important;
  max-width: 24ch !important;
  margin: 0 auto 2rem auto !important;
  border: 0 !important;
  padding: 0 !important;
  position: relative; z-index: 1;
}
.wow-attribution {
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  position: relative; z-index: 1;
}
.wow-attribution::before {
  content: ""; display: inline-block; width: 1.75rem; height: 1px;
  background: var(--gold); vertical-align: middle; margin-right: 0.85rem;
}

/* =========================================================================
   10. BLOG SECTION
   ========================================================================= */
.blog-section {
  background: var(--paper) !important;
  padding-block: clamp(5rem, 12vh, 9rem) !important;
  border-top: 1px solid var(--rule) !important;
}
.blog-inner {
  max-width: var(--shell) !important;
  margin-inline: auto !important;
}
.blog-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 1.5rem !important;
  display: flex; align-items: center; gap: 0.85rem;
}
.blog-label::before {
  content: "VI"; font-family: var(--ff-display); font-style: italic;
  color: var(--gold); letter-spacing: 0;
}
.blog-headline {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.012em !important;
}
.blog-headline span {
  font-style: italic !important;
  color: var(--ink-2) !important;
  font-weight: 300 !important;
  background: transparent !important;
  -webkit-text-fill-color: var(--ink-2) !important;
}
.blog-subtitle {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 52ch !important;
  margin-bottom: 4rem !important;
  line-height: 1.55 !important;
}

.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
}
.blog-card {
  background: transparent !important;
  padding: 2.5rem 1.75rem 2.5rem 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  /* Theme-Karten-Schatten töten — malt sonst faint Kanten um die
     transparenten Karten (sichtbar als Geisterlinien am Grid-Rand). */
  box-shadow: none !important;
  position: relative;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}
/* !important nötig — sonst verliert :last-child gegen die importante
   border-right-Basis oben und Karte 3 behält ihre rechte Linie. */
.blog-card:last-child { border-right: 0 !important; }
.blog-card::before {
  content: counter(blog-counter, decimal-leading-zero);
  counter-increment: blog-counter;
  position: absolute;
  top: 2.5rem; right: 1.5rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0;
}
.blog-grid { counter-reset: blog-counter; }

.blog-card-meta,
.blog-card-date,
.blog-card .meta {
  font-family: var(--ff-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin-bottom: 1.5rem !important;
}

.blog-card-title {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.55rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 1.25rem 0 !important;
  letter-spacing: -0.005em !important;
  transition: color .25s ease;
  max-width: 22ch;
}
.blog-card:hover .blog-card-title { color: var(--gold-deep) !important; }

.blog-card-excerpt {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.62 !important;
  color: var(--ink-2) !important;
  max-width: 36ch !important;
  margin-bottom: 1.5rem !important;
}

/* Der Theme-Link «Mehr erfahren» (.blog-card-link) ist der echte,
   klickbare CTA — hier auf den editorialen Look gebracht. Das frühere
   dekorative .blog-card::after («Weiterlesen →») erzeugte einen DOPPELTEN,
   nicht klickbaren CTA unter dem echten Link (Bug, entdeckt 11.06.).
   Der Pfeil kommt weiterhin aus main.css (.blog-card-link::after ' →'). */
.blog-card-link {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  display: inline-block !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  padding-bottom: 0.35rem !important;
  text-decoration: none !important;
  transition: color .25s, border-color .25s;
}
/* Hover braucht !important, sonst ist die importante Basis hover-resistent
   (P1-Lehre B1/E2). Card-Hover färbt den Link mit. */
.blog-card-link:hover,
.blog-card:hover .blog-card-link {
  color: var(--gold-deep) !important;
  border-bottom-color: var(--gold) !important;
}

@media (max-width: 900px) {
  /* !important: Basis-Regel (Z. ~926) ist !important — siehe Stats-Fix. */
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-card { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; padding: 2rem 0 !important; }
}

/* =========================================================================
   11. CTA SECTION
   ========================================================================= */
.cta-section {
  background: var(--paper) !important;
  padding-block: clamp(6rem, 14vh, 10rem) !important;
  text-align: center !important;
  border-top: 1px solid var(--rule) !important;
  position: relative;
}
.section-divider, .section-divider--center {
  /* 9rem = der live abgenommene Look (vorher zufällig: 2.5rem Breite +
     main.css' padding-inline füllte der Gold-Background mit — wäre
     viewport-abhängig gewesen). padding:0 macht die Breite explizit. */
  width: 9rem !important;
  height: 1px !important;
  background: var(--gold) !important;
  margin: 0 auto 2.5rem auto !important;
  padding: 0 !important;
}
/* Theme zeichnet die sichtbare Linie als ::after (animiert auf 200/240px)
   — die überläuft den hier auf 1.5–2.5rem geschrumpften Container nach
   RECHTS (margin:auto löst bei Overflow nicht mehr mittig auf) → Strich
   sass rechts der Mitte (User-Feedback 11.06.). Im Editorial-Layer ist
   das ELEMENT selbst die Linie — Pseudo töten, auf allen Seiten. */
.section-divider::after, .section-divider--center::after {
  content: none !important;
}
.cta-label {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 1.5rem !important;
}
.cta-section h2 {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.015em !important;
  color: var(--ink) !important;
  max-width: 22ch !important;
  margin: 0 auto 1.5rem auto !important;
}
.cta-section h2 .heading-line { display: block; }
.cta-section h2 .heading-line + .heading-line,
.cta-section h2 > :last-child {
  font-style: italic; color: var(--ink-2);
}
.cta-section p {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 48ch !important;
  margin: 0 auto 3rem auto !important;
  line-height: 1.55 !important;
}
.cta-section a, .cta-section .btn {
  display: inline-block;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  background: var(--marine) !important;
  color: var(--paper) !important;
  border: 1px solid var(--marine) !important;
  border-radius: 0 !important;
  padding: 1.1rem 2.25rem !important;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.cta-section a:hover, .cta-section .btn:hover {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: var(--paper) !important;
}

/* =========================================================================
   12. FOOTER
   ========================================================================= */
.footer {
  background: var(--paper) !important;
  color: var(--ink-2) !important;
  border-top: 1px solid var(--rule-strong) !important;
  padding: 4rem 0 2rem 0 !important;
}
.footer-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
  gap: 3rem !important;
  max-width: var(--shell) !important;
  margin-inline: auto !important;
  padding-bottom: 3rem !important;
  border-bottom: 1px solid var(--rule) !important;
}
.footer-logo {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.2em !important;
  color: var(--ink) !important;
  margin-bottom: 0.5rem !important;
}
.footer-divider {
  width: 1.5rem !important;
  height: 1px !important;
  background: var(--gold) !important;
  margin: 0.75rem 0 1rem 0 !important;
}
.footer-tagline {
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  line-height: 1.7 !important;
  color: var(--ink-2) !important;
}
.footer-claim {
  font-family: var(--ff-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-top: 0.25rem; display: inline-block;
}
.footer h4 {
  font-family: var(--ff-body) !important;
  font-weight: 600 !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 0 0 1.25rem 0 !important;
}
.footer a {
  display: block !important;
  font-family: var(--ff-body) !important;
  font-size: 0.88rem !important;
  color: var(--ink-2) !important;
  text-decoration: none !important;
  padding: 0.3rem 0 !important;
  transition: color .22s ease;
}
.footer a:hover { color: var(--gold-deep) !important; }
.footer-bottom {
  max-width: var(--shell) !important;
  margin: 1.5rem auto 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  font-family: var(--ff-body) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
}

@media (max-width: 900px) {
  /* !important: Basis-Regel (Z. ~1114) ist !important — siehe Stats-Fix. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
}

/* =========================================================================
   13. UNIVERSAL SECTION DEFAULTS (covers untyped sections across the site)
   ========================================================================= */
main > section {
  background: var(--paper);
  padding-block: clamp(4rem, 10vh, 7.5rem);
}
main > section + section { border-top: 1px solid var(--rule); }

/* Universal section label / title patterns — covers both naming styles.
   NOTE: theme markup uses multi-class strings like "section-label reveal visible",
   so [class$="-label"] won't match (ends with the last class, not "-label").
   Use class-list match (~=) AND fallback direct class selectors. */
main > section .section-label,
main > section [class~="comparison-label"],
main > section [class~="services-label"],
main > section [class~="blog-label"],
main > section [class~="testimonials-label"],
main > section [class~="founder-label"],
main > section [class~="promises-label"],
main > section [class~="values-label"],
main > section [class~="principles-label"],
main > section [class~="approach-label"],
main > section [class~="regulation-label"],
main > section [class~="partnerships-label"],
main > section [class~="process-label"],
main > section [class~="location-label"],
main > section [class~="contact-section-label"],
main > section [class~="contact-form-section-label"] {
  font-family: var(--ff-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin: 0 auto 1.5rem auto !important;
  max-width: var(--shell);
  display: flex; align-items: center; gap: 0.85rem;
}
main > section .section-title,
main > section [class~="comparison-title"],
main > section [class~="services-title"],
main > section [class~="blog-headline"],
main > section [class~="principles-title"],
main > section [class~="values-title"],
main > section [class~="promises-title"],
main > section [class~="approach-title"],
main > section [class~="regulation-title"],
main > section [class~="partnerships-title"],
main > section [class~="process-title"] {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  max-width: 22ch;
  margin: 0 auto 3rem auto !important;
  text-align: left !important;
}

/* H2 inside generic sections that don't follow the *-title pattern */
main > section > h2,
main > section > .section-inner > h2,
main > section > div > h2 {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  max-width: var(--shell);
  margin: 0 auto 2rem auto !important;
}

/* Paragraphs inside untyped sections */
main > section > p,
main > section > div > p {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 56ch !important;
  line-height: 1.6 !important;
}

/* =========================================================================
   14. HERO VARIANTS — across sub-pages
   ========================================================================= */
.hero--compact {
  padding-block: clamp(5rem, 10vh, 8rem) clamp(3rem, 6vh, 5rem) !important;
}
.hero--compact h1 {
  font-size: clamp(2.75rem, 6.5vw, 5.5rem) !important;
}

.hero-quote {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  max-width: 50ch !important;
  margin: 2rem 0 1.5rem 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
}
.hero-quote::before {
  content: "“";
  position: absolute;
  left: -1.85rem; top: -1rem;
  font-family: var(--ff-display);
  font-size: 4rem;
  font-style: italic;
  font-weight: 200;
  color: var(--gold);
  line-height: 1;
}
.hero-attribution {
  font-family: var(--ff-body) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-2) !important;
  display: inline-block;
  border-top: 1px solid var(--rule-strong);
  padding-top: 1rem;
}

/* =========================================================================
   15. WOW-SECTION (stat highlight on Dienstleistungen)
   ========================================================================= */
.wow-section:not(.wow-pullquote) {
  background: var(--paper-card) !important;
  padding-block: clamp(4rem, 10vh, 7rem) !important;
  text-align: center;
}
.wow-stat-number {
  font-family: var(--ff-display) !important;
  font-weight: 200 !important;
  font-size: clamp(4rem, 9vw, 8rem) !important;
  color: var(--ink) !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  margin: 0 auto 1rem auto !important;
  font-feature-settings: "lnum";
}
.wow-stat-label {
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  max-width: 36ch;
  margin: 0 auto !important;
  line-height: 1.5;
}

/* =========================================================================
   16. PRIMARY BUTTON (used outside the nav/cta sections too)
   ========================================================================= */
.btn-primary,
a.btn-primary,
button.btn-primary {
  display: inline-block;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  background: var(--marine) !important;
  color: var(--paper) !important;
  border: 1px solid var(--marine) !important;
  border-radius: 0 !important;
  padding: 1.1rem 2.25rem !important;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1) !important;
  text-decoration: none !important;
}
.btn-primary:hover {
  background: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: var(--paper) !important;
}

.btn-secondary,
a.btn-secondary {
  display: inline-block;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 0.85rem 0 0.5rem 0 !important;
  text-decoration: none !important;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.btn-secondary:hover {
  color: var(--gold-deep) !important;
  border-bottom-color: var(--gold) !important;
}

/* =========================================================================
   17. EDITORIAL GRID SECTIONS (promises, values, principles, approach, regulation, partnerships)
   Common pattern: section label + title + grid of cards
   Excludes .process because its markup uses .process-steps + explicit .process-number.
   ========================================================================= */
.promises, .values, .principles, .partnerships, .approach, .regulation {
  padding-inline: clamp(1.5rem, 4vw, 3rem) !important;
}
.promises > *, .values > *, .principles > *, .partnerships > *, .approach > *, .regulation > * {
  max-width: var(--shell);
  margin-inline: auto;
}

/* Grid containers (theme uses ".X-grid" + ".X-inner" patterns) */
.promises-grid, .values-grid, .principles-grid, .partnerships-grid,
.approach-grid, .regulation-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  margin-top: 2rem !important;
  counter-reset: edit-counter;
}

/* Each card — theme uses ".X-card" suffix */
.promise-card, .value-card, .principle-card, .partner-card,
.approach-card, .regulation-card,
.promise, .value, .principle, .partner-item, .approach-item, .regulation-item {
  /* Symmetrisches Zell-Padding (User-Feedback 11.06.): padding-left 0
     liess den Text an der border-right der Nachbar-Zelle kleben. Flush-
     First-Column geht hier nicht — auto-fit-Grids brechen um (values/
     principles: 2 Reihen), Spalte 1 der Folgereihe muss bündig bleiben. */
  padding: 2.5rem 1.5rem !important;
  border-right: 1px solid var(--rule) !important;
  background: transparent !important;
  position: relative;
}
.promises-grid > *:last-child, .values-grid > *:last-child,
.principles-grid > *:last-child, .partnerships-grid > *:last-child,
.approach-grid > *:last-child, .regulation-grid > *:last-child {
  border-right: 0 !important;
}

/* Numbered prefix for grid cards (counts within each grid) */
.promise-card::before, .value-card::before, .principle-card::before,
.approach-card::before, .regulation-card::before,
.promise::before, .value::before, .principle::before,
.approach-item::before, .regulation-item::before {
  counter-increment: edit-counter;
  content: counter(edit-counter, decimal-leading-zero);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0;
  display: block;
  margin-bottom: 1.25rem;
}

/* Icons inside cards (.promise-icon etc.) — hide; numerals replace them */
.promise-card .promise-icon,
.value-card .value-icon,
.principle-card .principle-icon,
.partner-card .partner-icon,
.approach-card .approach-icon,
.regulation-item .regulation-icon,
.regulation-card .regulation-icon { display: none !important; }

.promise-card h3, .value-card h3, .principle-card h3, .partner-card h3,
.approach-card h3, .regulation-card h3,
.promise h3, .value h3, .principle h3, .partner-item h3,
.approach-item h3, .regulation-item h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 1rem 0 !important;
  letter-spacing: -0.005em !important;
}
.promise-card p, .value-card p, .principle-card p, .partner-card p,
.approach-card p, .regulation-card p,
.promise p, .value p, .principle p, .partner-item p,
.approach-item p, .regulation-item p {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: 38ch !important;
}

/* Partner cards — currently text-only; if logos appear, treat them as logo strip */
.partnerships img, .partner-card img, .partner-item img {
  max-width: 140px !important;
  height: auto !important;
  filter: grayscale(1) brightness(0.7);
  opacity: 0.7;
  transition: opacity .25s, filter .25s;
}
.partnerships img:hover, .partner-card img:hover, .partner-item img:hover {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Cross-link as inline element (inside values section on Über uns) */
.values .cross-link,
.values-inner .cross-link {
  margin-top: 3rem !important;
  text-align: left !important;
  background: transparent !important;
  padding-block: 0 !important;
}
/* Halber Override repariert (User-Feedback 11.06.): Die Basisregel
   (Sektion 18, .cross-link p) zentriert die 50ch-Box per margin:auto —
   in der Links-Variante schwebte der Text dadurch mittig, während der
   Link links sass. Box ebenfalls links ausrichten, Lead + Link bilden
   wieder EINE Einheit. (0,2,1) schlägt die (0,1,1)-Basisregel. */
.values .cross-link p,
.values-inner .cross-link p {
  margin-inline: 0 !important;
}

/* =========================================================================
   17a. APPROACH SECTION — 3 numbered steps (Philosophie)
   Markup: .approach > .section-label + .section-title + .approach-steps > .approach-step (with .step-number, .step-icon, h3, p)
   Same pattern as Process but different class names.
   ========================================================================= */
.approach { padding-inline: clamp(1.5rem, 4vw, 3rem) !important; }
.approach > * { max-width: var(--shell); margin-inline: auto; }

.approach-steps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  margin-top: 2rem !important;
}
.approach-step {
  /* Symmetrisch statt rechts-only (User-Feedback 11.06.) — Inhalt sass
     sonst an der linken Hairline bzw. links der Spaltenmitte. */
  padding: 2.5rem 1.75rem !important;
  border-right: 1px solid var(--rule) !important;
  position: relative;
  background: transparent !important;
}
.approach-step:last-child { border-right: 0 !important; }
.approach-step .step-number {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 2.5rem !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: 0 !important;
  display: block;
}
.approach-step .step-icon { display: none !important; }
.approach-step h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 0.85rem 0 !important;
  letter-spacing: -0.005em !important;
}
.approach-step p {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: 36ch !important;
}
@media (min-width: 800px) {
  .approach-step:not(:last-child) .step-number::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 5rem;
    width: calc(100% - 5rem);
    height: 1px;
    background: var(--gold);
    opacity: 0.4;
  }
}

/* Regulation: section has an intro paragraph between title and grid */
.regulation-text {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 60ch !important;
  margin: 0 0 2rem 0 !important;
  line-height: 1.6 !important;
}

/* =========================================================================
   17b. PROCESS SECTION — 4 numbered steps (Dienstleistungen)
   Markup: .process > .process-inner > .section-label + .section-title + .process-steps > .process-step (with .process-number, h3, p)
   ========================================================================= */
.process { padding-inline: clamp(1.5rem, 4vw, 3rem) !important; }
.process-inner { max-width: var(--shell); margin-inline: auto; }

.process-steps {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  margin-top: 2rem !important;
}
.process-step {
  /* Symmetrisch statt rechts-only (User-Feedback 11.06.) — wie .approach-step. */
  padding: 2.5rem 1.5rem !important;
  border-right: 1px solid var(--rule) !important;
  position: relative;
  background: transparent !important;
}
.process-step:last-child { border-right: 0 !important; }

.process-step .process-number {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 2.5rem !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 1.25rem !important;
  letter-spacing: 0 !important;
  display: block;
}
.process-step h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.45rem !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  margin: 0 0 0.85rem 0 !important;
  letter-spacing: -0.005em !important;
}
.process-step p {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: 32ch !important;
}

/* Connecting line between steps (editorial detail) */
@media (min-width: 800px) {
  .process-step:not(:last-child) .process-number::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 5rem;
    width: calc(100% - 5rem);
    height: 1px;
    background: var(--gold);
    opacity: 0.4;
  }
}

/* =========================================================================
   18. CONTACT PAGE — sections, form, actions, location
   Real markup is complex. We override against the actual class names.
   ========================================================================= */
.contact-section, .contact-form-section, .contact-actions-section, .location {
  padding-inline: clamp(1.5rem, 4vw, 3rem) !important;
}
.contact-inner, .contact-form-inner, .contact-actions-inner, .location-inner {
  max-width: var(--shell);
  margin-inline: auto;
}

/* --- .contact-section: 3-card grid (Standort / Telefon / E-Mail) --- */
.contact-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  margin-top: 2rem !important;
  counter-reset: contact-counter;
}
.contact-card {
  padding: 2.5rem 1.5rem 2.5rem 0 !important;
  border-right: 1px solid var(--rule) !important;
  position: relative;
  background: transparent !important;
}
.contact-grid > .contact-card:last-child { border-right: 0 !important; }
.contact-card .contact-icon { display: none !important; }
.contact-card::before {
  counter-increment: contact-counter;
  content: counter(contact-counter, decimal-leading-zero);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1.25rem;
}
.contact-card h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  color: var(--ink) !important;
  margin: 0 0 1rem 0 !important;
  letter-spacing: -0.005em !important;
}
.contact-card p, .contact-card .card-note {
  font-family: var(--ff-body) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 0 0.4rem 0 !important;
}
/* Text-Links in den Karten — Buttons (.btn-primary/.btn-secondary) ausgenommen,
   sonst gewinnt color:ink per Source-Order gegen .btn-primary und der
   «Jetzt anrufen»-Button wird Ink-auf-Ink unsichtbar (Design-Review E2). */
.contact-card a:not(.btn-primary):not(.btn-secondary) {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.15rem;
  transition: color .22s, border-color .22s;
}
.contact-card a:not(.btn-primary):not(.btn-secondary):hover { color: var(--gold-deep) !important; border-bottom-color: var(--gold); }
/* CTA-Höhenangleich: Das Theme gibt nur .btn-secondary («E-Mail senden») margin-top:20px,
   .btn-primary («Jetzt anrufen») bekam 0 → die Box sass höher als der E-Mail-Link.
   Beiden denselben Abstand geben, damit die Karten-CTAs auf gleicher Höhe stehen. */
.contact-card .btn-primary { margin-top: 20px !important; }

/* --- .contact-form-section: header + .contact-form with .form-row/.form-group --- */
.contact-form-header { margin-bottom: 2.5rem; }
.contact-form-title {
  font-family: var(--ff-display) !important;
  font-weight: 300 !important;
  font-size: var(--fs-section) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em !important;
  color: var(--ink) !important;
  max-width: 26ch !important;
  margin: 0 0 1rem 0 !important;
}
.contact-form-description {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 56ch !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}

.contact-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  max-width: 720px;
  margin: 0 !important;
}
.contact-form .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1.5rem !important;
}
.contact-form .form-row.form-row--single,
.contact-form .form-row:has(> .form-group:only-child) {
  grid-template-columns: 1fr !important;
}
.contact-form .form-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.contact-form label {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 0.4rem !important;
}
/* E3: Consent-Checkbox — main.css macht .form-checkbox zu display:flex,
   wodurch die nackten Textknoten («Ich habe die» / Link / Resttext) zu
   anonymen Flex-Items werden: 3 schmale Spalten, rechts abgeschnitten.
   Block-Layout + absolut positionierte Checkbox = ein umbrechender
   Fliesstext. Zudem: Einwilligungssatz ist Fliesstext, kein Feld-Label —
   Uppercase/Tracking der Regel oben hier wieder aufheben. */
.contact-form label.form-checkbox {
  display: block !important;
  position: relative !important;
  padding-left: 2rem !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: 60ch;
}
.contact-form label.form-checkbox input[type="checkbox"] {
  position: absolute !important;
  left: 0 !important;
  top: 0.15em !important;
  width: 1.05rem !important;
  height: 1.05rem !important;
  margin: 0 !important;
  accent-color: var(--gold-deep) !important;
}
.contact-form label.form-checkbox a {
  color: var(--gold-deep) !important;
  border-bottom: 1px solid var(--gold) !important;
  transition: color .22s ease, border-color .22s ease !important;
}
/* Hover MUSS ebenfalls !important sein, sonst ist die importante Basis-
   Deklaration hover-resistent und die Transition oben toter Code. */
.contact-form label.form-checkbox a:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--gold-deep) !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  border-radius: 0 !important;
  padding: 0.6rem 0 !important;
  font-family: var(--ff-body) !important;
  font-size: 1rem !important;
  color: var(--ink) !important;
  /* B10: box-shadow mitfaden — main.css setzt :focus einen 3px-Gold-Ring,
     der sonst instant poppt, während die Border 220ms fadet. Ein Focus-
     Moment, nicht zwei getrennte Ereignisse. */
  transition: border-color .22s ease, box-shadow .22s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: 0;
  border-bottom-color: var(--gold) !important;
}
/* --- Select-Feinschliff (User-Feedback 11.06.) ------------------------ */
/* «Bitte auswählen» ist ein Hint, kein Wert: solange nichts gewählt ist
   (required + leere Erst-Option → :invalid), kleiner und heller rendern.
   Nach der Wahl gilt wieder der normale Wert-Look (1rem ink). */
.contact-form select:invalid {
  font-size: 0.9rem !important;
  color: var(--ink-3) !important;
}
/* Natives Dropdown (OS-Weiss + Blau-Highlight) auf CI bringen — via
   Customizable-Select-API (Chrome 135+); andere Browser behalten das
   OS-Menü (progressive enhancement, Verhalten unverändert). */
.contact-form select,
.contact-form select::picker(select) {
  appearance: base-select;
}
.contact-form select::picker(select) {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  box-shadow: 0 16px 40px oklch(0.18 0.022 250 / 0.10);
  padding: 0.35rem 0;
}
.contact-form select option {
  font-family: var(--ff-body);
  font-size: 0.92rem;
  color: var(--ink-2);
  background: var(--paper);
  padding: 0.5rem 0.9rem;
}
.contact-form select option:hover,
.contact-form select option:focus {
  background: var(--paper-card);
  color: var(--ink);
}
.contact-form select option:checked { color: var(--gold-deep); }
.contact-form select option[value=""] { color: var(--ink-4); }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form button[type="submit"],
.contact-form .submit-btn {
  align-self: start;
  margin-top: 1rem;
  background: var(--marine) !important;
  color: var(--paper) !important;
  border: 0 !important;
  padding: 1rem 2.25rem !important;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background .22s ease;
}
.contact-form button[type="submit"]:hover,
.contact-form .submit-btn:hover { background: var(--gold-deep) !important; }
@media (max-width: 600px) {
  .contact-form .form-row { grid-template-columns: 1fr !important; }
}

/* --- .contact-actions-section: vCard / Outlook / Map quick links --- */
.contact-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--rule-strong) !important;
  border-bottom: 1px solid var(--rule-strong) !important;
  margin-top: 2rem !important;
  counter-reset: action-counter;
}
.contact-action-card {
  padding: 2.5rem 1.5rem 2.5rem 0 !important;
  border-right: 1px solid var(--rule) !important;
  background: transparent !important;
  position: relative;
}
.contact-actions-grid > .contact-action-card:last-child { border-right: 0 !important; }
.contact-action-card .contact-action-icon { display: none !important; }
.contact-action-card::before {
  counter-increment: action-counter;
  content: counter(action-counter, decimal-leading-zero);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--gold);
  display: block;
  margin-bottom: 1.25rem;
}
.contact-action-card h3 {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  font-size: 1.3rem !important;
  color: var(--ink) !important;
  margin: 0 0 0.85rem 0 !important;
}
.contact-action-card p {
  font-family: var(--ff-body) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  margin: 0 0 1.5rem 0 !important;
  max-width: 30ch;
}
.contact-action-card > a {
  display: inline-block;
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  padding: 0.5rem 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  transition: color .22s, border-color .22s;
}
.contact-action-card > a:hover {
  color: var(--gold-deep) !important;
  border-bottom-color: var(--gold) !important;
}

/* --- .location: text intro + iframe map + detail rows --- */
.location-text {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 56ch !important;
  margin: 0 0 2.5rem 0 !important;
  line-height: 1.6 !important;
}
.location-map {
  margin: 0 0 2.5rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.location-map iframe,
.location iframe,
.location img {
  width: 100% !important;
  height: 420px !important;
  display: block;
  border: 0 !important;
  filter: grayscale(1) contrast(1.05);
}
.location-details {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 1.5rem 2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5rem;
}
.location-detail {
  font-family: var(--ff-body) !important;
  font-size: 0.92rem !important;
  color: var(--ink-2) !important;
  line-height: 1.55 !important;
}

/* Cross-link CTA between pages */
.cross-link {
  background: var(--paper-card) !important;
  padding-block: clamp(3rem, 6vh, 5rem) !important;
  text-align: center;
}
.cross-link p {
  font-family: var(--ff-body) !important;
  font-size: var(--fs-lede) !important;
  font-weight: 300 !important;
  color: var(--ink-2) !important;
  max-width: 50ch;
  margin: 0 auto 1.5rem auto !important;
}

/* =========================================================================
   19. UTILITIES — fix anything that referenced old fonts
   ========================================================================= */
* { font-family: inherit; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

/* Cookie banner — light editorial tweak */
.cky-consent-bar, .cky-modal {
  border-radius: 0 !important;
  font-family: var(--ff-body) !important;
}
.cky-btn { border-radius: 0 !important; font-family: var(--ff-body) !important; letter-spacing: 0.1em; }
.cky-btn-accept { background: var(--gold-deep) !important; border-color: var(--gold-deep) !important; }

/* B9 (Design-Review 06/2026): Reduced-motion-Block ans DATEIENDE verschoben
   (Sektion 22.2) — die dortige Re-Clamp-Regel muss per Source-Order NACH
   den !important-Button-Transitions der Sektionen 20/21 stehen. */

/* =========================================================================
   20. EDITORIAL v2 — REFINEMENTS (2026-05-27)
   Audit findings layered on top of v1:
   – fix invisible comparison-table glyphs (theme uses 10×10 dot + faint dash)
   – soften CTA solid-ink pill into editorial arrow link
   – hero trust-bar gets gold em-dash separators
   – stats get Roman overlines + tighter rules
   – blog grid breaks 3-equal sameness into asymmetric editorial layout
   – footer picks up gold hairline + masthead chip
   ========================================================================= */

/* --- 20.1  COMPARISON TABLE — visible glyphs ------------------------- */
/* Theme: .check = 10×10 gold dot, .x-mark::after = "—" in grey-light.
   Override with strong typographic marks centered in the cell. */
.comp-table tbody td:not(:first-child) {
  text-align: center !important;
  white-space: nowrap;
}
.comp-table thead th:not(:first-child) {
  text-align: center !important;
}
.comp-table td .check,
.comp-table td .x-mark {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 0 !important;          /* hide any inner text */
  color: transparent !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}
.comp-table td .check::before {
  content: "✓";
  font-family: var(--ff-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 1.35rem !important;
  color: var(--gold-deep) !important;
  letter-spacing: 0;
  display: inline-block;
}
.comp-table tbody td.highlight .check::before {
  color: var(--gold-deep) !important;
}
.comp-table td .x-mark::before {
  content: "—";
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: 1.35rem !important;
  color: var(--ink-4) !important;
  letter-spacing: 0;
  display: inline-block;
}
/* Suppress the theme's own ::after on .x-mark to avoid double glyph */
.comp-table td .x-mark::after {
  content: none !important;
  display: none !important;
}

/* Tighten the highlighted EWPG column visually */
.comp-table tbody td.highlight {
  background: color-mix(in oklch, var(--gold) 9%, transparent) !important;
}
.comp-table thead th.highlight {
  background: color-mix(in oklch, var(--gold) 12%, transparent) !important;
  padding-top: 1.5rem !important;
}

/* --- 20.2  CTA SECTION — editorial arrow link ------------------------ */
/* Replace the solid deep-ink pill with an underlined Spectral-style link
   that matches the hero buttons' editorial idiom. */
.cta-section a,
.cta-section .btn,
.cta-section .btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  padding: 0.85rem 0 0.55rem 0 !important;
  color: var(--ink) !important;
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  transition: color .22s ease, border-color .22s ease, transform .16s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative;
}
.cta-section a::after,
.cta-section .btn::after,
.cta-section .btn-primary::after {
  content: "→" !important;
  /* Theme's .btn-primary::after positions absolutely (slide-shine effect);
     reset to static so our arrow appears inline next to the label. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  pointer-events: auto !important;
  font-family: var(--ff-display) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 1.15rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: inherit !important;
  display: inline-block !important;
  transition: transform .25s ease !important;
}
.cta-section a:hover::after,
.cta-section .btn:hover::after,
.cta-section .btn-primary:hover::after {
  left: auto !important;          /* prevent theme's hover slide */
}
.cta-section a:hover,
.cta-section .btn:hover,
.cta-section .btn-primary:hover {
  background: transparent !important;
  color: var(--gold-deep) !important;
  border-bottom-color: var(--gold) !important;
}
.cta-section a:hover::after,
.cta-section .btn:hover::after,
.cta-section .btn-primary:hover::after {
  transform: translateX(5px);
}

/* Make the .section-divider above the CTA feel intentional.
   Breite kommt aus der Basisregel (Sektion 12, 9rem = abgenommener
   Look) — hier nur der grössere Abstand zum CTA-Label. */
.cta-section .section-divider,
.cta-section .section-divider--center {
  margin-bottom: 3rem !important;
}

/* --- 20.3  HERO TRUST-BAR — masthead em-dashes ---------------------- */
.trust-bar,
.hero .trust-bar {
  display: inline-flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding-top: 2.5rem !important;
  border-top: 1px solid var(--rule) !important;
  max-width: 32rem !important;
}
.trust-bar .trust-item {
  font-family: var(--ff-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  padding: 0 0.9rem !important;
}
.trust-bar .trust-item:first-child { padding-left: 0 !important; }
.trust-bar .trust-item:last-child  { padding-right: 0 !important; }
.trust-bar .trust-item + .trust-item::before {
  content: "—";
  font-family: var(--ff-display);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0;
  margin-right: 0.9rem;
  margin-left: -0.9rem;
}

/* --- 20.4  STATS — gold under-rule under each number ---------------- */
/* v1 already provides Roman numerals at top-right and vertical dividers
   between stats; only adding a discreet gold hairline below each number. */
.stat-number {
  position: relative;
  padding-bottom: 0.85rem !important;
  margin-bottom: 0.6rem !important;
}
.stat-number::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}

/* --- 20.5  BLOG GRID — asymmetric editorial layout ------------------ */
/* KOMPLETT auf ≥901px begrenzt (Mobile-Audit 11.06.): dieser späte
   !important-Block übersteuerte sonst die Mobile-Stapel-Query (Z. ~1020)
   — Blog-Karten standen mobil 3-spaltig und liefen aus dem Viewport.
   Mobil gelten die uniformen Karten-Regeln aus Sektion 10. */
@media (min-width: 901px) {
  .blog-grid {
    grid-template-columns: 1.45fr 1fr 1fr !important;
  }
  .blog-card { padding: 2.75rem 2rem 2.5rem 0 !important; }
  /* Text nicht an die Hairline kleben (User-Feedback 11.06.): Karten 2+3
     starten sonst direkt an der border-right der Vorgänger-Karte. */
  .blog-card:not(:first-child) { padding-left: 2rem !important; }
  .blog-card:first-child {
    padding-right: 3rem !important;
  }
  .blog-card:first-child .blog-card-title {
    font-size: 1.95rem !important;
    max-width: 24ch !important;
    line-height: 1.15 !important;
  }
  .blog-card:first-child .blog-card-excerpt {
    max-width: 42ch !important;
    font-size: 1rem !important;
  }
  .blog-card:first-child::before {
    font-size: 1.4rem !important;
    top: 2rem !important;
    right: 2.25rem !important;
  }
  .blog-card:not(:first-child) .blog-card-title {
    font-size: 1.35rem !important;
    max-width: 18ch !important;
  }
  .blog-card:not(:first-child) .blog-card-excerpt {
    max-width: 30ch !important;
  }
}

/* On mid-widths fall back to even 3-column to avoid cramping */
@media (max-width: 1100px) and (min-width: 901px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .blog-card:first-child { padding-right: 2rem !important; }
  .blog-card:first-child .blog-card-title { font-size: 1.55rem !important; }
}

/* --- 20.6  FOOTER — editorial overlines + gold hairline ------------- */
.footer {
  border-top: 0 !important;
  position: relative;
  /* Service-Zone: seit Fast-Weiss-Paper (11.06.) ist ink-2 hier zu schwer
     (~12:1) — eine Stufe heller, ~5.7:1, bleibt über WCAG AA 4.5:1. */
  color: var(--ink-3) !important;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: var(--shell);
  max-width: var(--shell);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0,
    var(--rule-strong) 8%,
    var(--rule-strong) 92%,
    transparent 100%);
}
.footer-logo {
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  font-size: 1.5rem !important;
  color: var(--ink) !important;
}
.footer-divider {
  width: 2rem !important;
  height: 1px !important;
  background: var(--gold) !important;
  margin: 1rem 0 1.25rem 0 !important;
}
.footer-tagline {
  font-family: var(--ff-body) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  line-height: 1.6 !important;
}
.footer-claim {
  font-family: var(--ff-display) !important;
  font-style: italic !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.92rem !important;
  color: var(--gold-deep) !important;
}
.footer h4 {
  font-family: var(--ff-body) !important;
  font-weight: 500 !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--ink-4) !important;
  margin: 0 0 1.5rem 0 !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid var(--rule) !important;
}
.footer a {
  display: block;
  font-family: var(--ff-body) !important;
  font-size: 0.88rem !important;
  color: var(--ink-3) !important;
  padding: 0.32rem 0 !important;
  transition: color .22s ease;
}
.footer a:hover { color: var(--gold-deep) !important; }

/* --- 20.7  HERO POLISH — sub deck breathing room -------------------- */
.hero-sub {
  font-size: 1.18rem !important;
  line-height: 1.6 !important;
  max-width: 36ch !important;
  color: var(--ink-2) !important;
}

/* --- 20.8  COMPARISON SECTION — title alignment ---------------------- */
/* Pull the title left-aligned to match section labels above it */
.comparison-title {
  text-align: left !important;
  max-width: 22ch !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.comparison-label {
  text-align: left !important;
  margin-left: 0 !important;
}
.comparison {
  padding-inline: max(2rem, calc((100% - var(--shell)) / 2)) !important;
}
.comparison > .comparison-label,
.comparison > .comparison-title {
  margin-left: 0 !important;
}
/* But keep table itself fully shell-wide and centered */
.comparison > .comp-table {
  margin-inline: 0 !important;
  margin-top: 1rem !important;
}

/* =========================================================================
   21. P1-FIXES AUS DEM DESIGN-REVIEW 2026-06-11 (Emil-Kowalski-Methodik)
   ========================================================================= */

/* --- 21.1  B1 — Press-Feedback auf allen Pressables ------------------- */
/* Emil: "Buttons must feel responsive to press." Beim Drücken kurz (.1s)
   auf 98% skalieren; Release federt über die .16s-transform-Transition der
   Basisregeln zurück. Gewinnt gegen main.css-:active per Source-Order. */
.nav a.btn:active, .nav .btn-primary:active, .nav-cta:active,
.mobile-nav-cta:active,
.btn-primary:active, .btn-secondary:active,
.cta-section a:active, .cta-section .btn:active {
  transform: scale(0.98) !important;
  transition-duration: .1s !important;
}

/* --- 21.2  E1 — Theme-Cookie-Banner stillgelegt ------------------------ */
/* Entscheid Design-Review E1: CookieYes ist das einzige Consent-System
   (echtes CMP mit Script-Blocking). Der kosmetische Theme-Banner
   (#cookieBanner, footer.php + main-v2.js) ist zusätzlich per JS
   deaktiviert — diese Regel ist der CSS-Sicherheitsgurt. */
#cookieBanner { display: none !important; }

/* --- 21.3  E1 — CookieYes auf CI-Farben ------------------------------- */
/* CookieYes setzt seine Dashboard-Farben als Inline-Styles (#1863DC Blau,
   #0056A7 Float-Button, #FFFFFF Banner) — Stylesheet-!important gewinnt
   gegen Inline-Styles. Accept-Button war schon gold (Sektion 19). */
.cky-consent-bar {
  background-color: var(--paper) !important;
  border-color: var(--rule-strong) !important;
}
.cky-consent-container .cky-title,
.cky-preference-center .cky-preference-title {
  color: var(--ink) !important;
  font-family: var(--ff-display) !important;
  font-weight: 400 !important;
}
.cky-consent-container .cky-notice-des,
.cky-consent-container .cky-notice-des p,
.cky-preference-center .cky-preference-content-wrapper {
  color: var(--ink-2) !important;
  font-family: var(--ff-body) !important;
}
.cky-btn.cky-btn-customize,
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-preferences {
  color: var(--ink) !important;
  border-color: var(--ink) !important;
  background-color: transparent !important;
}
.cky-btn.cky-btn-accept {
  background-color: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
  color: #fff !important;
}
.cky-preference-center { background-color: var(--paper) !important; }
.cky-consent-container a, .cky-preference-center a,
.cky-show-desc-btn { color: var(--gold-deep) !important; }
/* Blauer Float-Button: Ink statt Off-Brand-Blau, und UNTER das
   Mobile-Menue (z-index 9995 in main.css) statt darueber. */
.cky-btn-revisit-wrapper {
  background-color: var(--ink) !important;
  z-index: 9990 !important;
}
/* P4: Toggle-Switches + Focus-Outline trugen noch das Dashboard-Blau
   (#1863dc, Plugin-CSS). Aktiv-Zustand auf Aged Gold, Focus auf gold-deep
   (5.4:1 auf Paper). Plugin-Regeln ohne !important → !important gewinnt. */
.cky-switch input[type="checkbox"]:checked {
  background: var(--gold-deep) !important;
}
.cky-switch input[type="checkbox"]:focus-visible,
.cky-footer-wrapper a:focus-visible,
.cky-btn:focus-visible {
  outline-color: var(--gold-deep) !important;
}

/* =========================================================================
   22. P3-FIXES AUS DEM DESIGN-REVIEW 2026-06-11 (Emil-Kowalski-Methodik)
   ========================================================================= */

/* --- 22.1  E4 — Mobile-CTA Touch-Target ------------------------------- */
/* Die Button-Basisregel (Sektion 2) ergibt nur ~39px Höhe; auf Mobile ist
   das der wichtigste Conversion-Button → Block-Padding auf ~48px Touch-
   Target anheben (Report-Hypothese #8). (0,2,0) schlägt die (0,1,0)-Basis. */
.mobile-nav .mobile-nav-cta {
  padding-block: 1rem !important;
}

/* --- 22.2  B9 — Reduced motion: weniger und sanfter, nicht null -------- */
/* Emil: «keep opacity and color transitions that aid comprehension».
   Animationen und Bewegung (transform, Layout-Properties, smooth scroll)
   sterben; Farb-/Opacity-/Schatten-Fades bleiben kurz erhalten. visibility
   begleitet opacity, damit Overlay-/Modal-Exits faden statt hart zu
   schneiden; box-shadow ist paint-only und gehört zum Focus-Moment (B10).
   ZWEISTUFIG (Report-Caveat 6): transition-duration MUSS re-deklariert
   werden, weil main.css unter reduced-motion 0.01ms !important auf
   *, *::before, *::after setzt — gleiche Spezifität (deshalb die Pseudo-
   Elemente auch hier im Selektor), Customizer-CSS gewinnt per Source-Order.
   main.css' .reveal-Sichtbarkeits-Pins (opacity: 1) bleiben bestehen. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, box-shadow, opacity, visibility !important;
    transition-duration: 0.18s !important;
    transition-delay: 0s !important;
  }
  /* Re-Clamp: Die !important-Transition-Shorthands der Sektionen 2/13/20/21
     (Klassen-Selektoren) schlagen die *-Regel oben per Spezifität — deshalb
     hier mit identischen Selektoren re-deklarieren. Diese Regel steht am
     Dateiende und gewinnt per Source-Order. Das :active-scale(0.98) aus
     21.1 bleibt als STATE erhalten, snappt aber instant statt zu animieren
     (Feedback ja, Bewegung nein). */
  .nav a.btn, .nav .btn-primary, .nav-cta, .mobile-nav-cta,
  .cta-section a, .cta-section .btn, .cta-section .btn-primary,
  .btn-primary, a.btn-primary, button.btn-primary,
  .btn-secondary, a.btn-secondary,
  .contact-form label.form-checkbox a,
  .cta-section a::after, .cta-section .btn::after, .cta-section .btn-primary::after {
    transition-property: color, background-color, border-color, box-shadow, opacity !important;
    transition-duration: 0.18s !important;
    transition-delay: 0s !important;
  }
}

/* =========================================================================
   23. DARK KONTRAPUNKTE — Pullquote + Schluss-CTA invertiert (11.06.2026)
   -------------------------------------------------------------------------
   Zwei Sektionen der Startseite wechseln auf dunkles Ink: das grosse
   Founder-Zitat (.wow-pullquote) und der Schluss-CTA (.cta-section).
   Bestehende Palette, keine neue Farbe — Gold trägt auf Dunkel deutlich
   mehr als auf Cream. Steht NACH Sektion 22 am Dateiende
   (gleiche Spezifität + !important → Source-Order entscheidet).
   Keine neuen transition:…!important-Regeln → Re-Clamp-Liste (22.2)
   braucht keine Pflege.
   ========================================================================= */

.wow-pullquote,
.cta-section {
  /* --marine ist seit Button-Angleichung in :root definiert (Sektion 2).
     Hintergrund: --ink (L 0.18) las sich als Schwarz — User-Feedback 11.06. */
  --on-dark:   oklch(0.955 0.014 80);          /* cream auf Marine */
  --on-dark-2: oklch(0.955 0.014 80 / 0.78);   /* sekundär */
  --on-dark-3: oklch(0.955 0.014 80 / 0.55);   /* labels/meta */
}

/* --- 23.1  PULLQUOTE dunkel ------------------------------------------- */
.wow-pullquote {
  background: var(--marine) !important;
}
.wow-pullquote::before {
  /* Riesen-Anführungszeichen: Gold-Tint auf Dunkel leicht kräftiger,
     sonst säuft es ab (auf Cream reichen 10%). */
  color: oklch(0.66 0.108 76 / 0.18);
}
.wow-pullquote blockquote {
  color: var(--on-dark) !important;
}
.wow-attribution {
  color: var(--on-dark-3) !important;
}
/* Gold-Linie vor der Attribution bleibt --gold: trägt auf Dunkel. */

/* --- 23.2  SCHLUSS-CTA dunkel ------------------------------------------ */
.cta-section {
  background: var(--marine) !important;
  border-top: 0 !important;        /* Hairline unnötig — Flächenwechsel trennt */
}
/* Theme-Glow (main.css ::before, radial rgba(255,252,245,.6)) war auf Cream
   unsichtbar — auf Ink wird er zum grauen Halo. Töten. */
.cta-section::before {
  content: none !important;
}
.cta-label {
  color: var(--on-dark-3) !important;
}
.cta-section h2 {
  color: var(--on-dark) !important;
}
/* Italic-Zeile («Bereit für ein»): Gold statt ink-2 — der eine
   Gold-Moment in Displaygrösse, den die Seite bisher nicht hat. */
.cta-section h2 .heading-line + .heading-line,
.cta-section h2 > :last-child {
  color: var(--gold) !important;
}
.cta-section p {
  color: var(--on-dark-2) !important;
}
/* Arrow-Link (Sektion 20.2): Cream-Text, Hairline halbtransparent,
   Hover → helles Gold (gold-deep ist auf Ink zu dunkel). */
.cta-section a,
.cta-section .btn,
.cta-section .btn-primary {
  color: var(--on-dark) !important;
  border-bottom-color: oklch(0.955 0.014 80 / 0.4) !important;
}
.cta-section a:hover,
.cta-section .btn:hover,
.cta-section .btn-primary:hover {
  color: var(--gold) !important;
  border-bottom-color: var(--gold) !important;
}

/* =========================================================================
   24. MOBILE & TABLET (Mobile-First-Pass 11.06.2026)
   Kontext: editorial.css wurde desktop-zentriert entwickelt; die
   strukturellen Grid-Fixes stecken direkt in den Sektions-Queries
   (Stats 4, Founder 5, Blog 10/20.5, Footer 12 — !important-Pflicht).
   Hier: alles, was eine EIGENE Mobile-/Tablet-Behandlung braucht.
   KEINE transition:!important-Regeln hier (sonst Re-Clamp 22.2 pflegen).
   ========================================================================= */

/* 24.1  Horizontal-Overflow-Guard — overflow-x:clip statt hidden:
   killt die horizontale Scroll-/Paint-Fläche komplett (CookieYes'
   verstecktes Preference-Center liegt 845px breit im Flow), ohne
   einen Scroll-Container zu erzeugen (position:fixed/sticky bleibt ok). */
html, body { overflow-x: clip !important; }

/* 24.2  Comparison-Table ≤700px — kompakt statt abgeschnitten.
   4 Spalten (Kriterium + Grossbank + EWPG + MFO) passen mit reduzierten
   Paddings und kleinerer Type in 390px; .comparison scrollt als
   Fallback horizontal (unsichtbar, wenn die Tabelle passt). */
@media (max-width: 700px) {
  .comparison { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* main.css:3723 erzwingt min-width:520px (Theme-Scroll-Pattern) —
     mit der Kompakt-Type unten passt die Tabelle aber in 390px. */
  .comp-table { min-width: 0 !important; }
  .comp-table th, .comp-table td {
    padding: 0.9rem 0.5rem !important;
  }
  .comp-table thead th {
    font-size: 0.62rem !important;
    letter-spacing: 0.12em !important;
  }
  .comp-table tbody td:first-child {
    font-size: 0.74rem !important;
    letter-spacing: 0.08em !important;
  }
  .comp-table td { font-size: 0.85rem !important; }
  /* KEIN hyphens:auto — der Tabellen-Algorithmus rechnet die Trennstellen
     in die min-content-Breite ein und bricht dann «Unabhängi-ge» mitten
     im Wort, obwohl ganze Wörter passen. Wortweiser Umbruch genügt. */
  .comp-table tbody td, .comp-table thead th {
    overflow-wrap: break-word;
  }
}

/* 24.3  Stats gestapelt (≤760, Sektion 4): römische Ziffer rückt mit
   dem kompakteren Padding ein; Nummern eine Stufe kleiner. */
@media (max-width: 760px) {
  .stat { padding: 1.4rem 1.5rem !important; }
  .stat::after { right: 1.5rem; top: 1.4rem; }
}

/* 24.4  Service-Items ≤480px: Roman-Spalte schrumpft weiter, Pfeil
   (::after) kollidiert sonst mit dem Titel. */
@media (max-width: 480px) {
  .service-item { grid-template-columns: 2.75rem 1fr !important; gap: 0.85rem !important; }
  .service-item::before { font-size: 1.6rem; }
  .service-item::after { top: 2.1rem; }
}

/* 24.5  CookieYes Preference-Center: auf Schmal-Viewports nie breiter
   als der Schirm (Default-Box ist 845px). */
@media (max-width: 900px) {
  .cky-preference-center { max-width: calc(100vw - 16px) !important; }
}

/* 24.6  Mobile-Nav Close: 18×32px Hit-Area (main.css: nacktes ×, font-size 32)
   → 44×44 Touch-Target via Padding, Glyphe bleibt optisch gleich gross.
   top/right kompensieren das Padding, damit das × an der Position bleibt. */
.mobile-nav-close {
  padding: 12px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  top: 20px !important;
  right: calc(var(--pad-x) - 12px) !important;
}

/* 24.7  Step-/Karten-Grids gestapelt (≤700): umgebrochene Zellen behalten
   sonst ihre border-right als Streu-Hairline an der rechten Aussenkante —
   gestapelt trennt die horizontale Linie. */
@media (max-width: 700px) {
  .approach-step, .process-step, .contact-action-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
  .approach-step:last-child,
  .process-step:last-child,
  .contact-action-card:last-child { border-bottom: 0 !important; }
}

/* 24.8  Tablet-Balance der Step-Grids (701–900): auto-fit bricht sonst
   unmotiviert 3+1 (Process, 4 Schritte) bzw. 2+1 (Approach, 3 Schritte).
   Process → 2×2; Approach → 2 + letzter Schritt volle Breite. */
@media (min-width: 701px) and (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr 1fr !important; }
  .process-step:nth-child(2n) { border-right: 0 !important; }
  .process-step:nth-child(-n+2) { border-bottom: 1px solid var(--rule) !important; }
  .approach-steps { grid-template-columns: 1fr 1fr !important; }
  .approach-step:nth-child(2n) { border-right: 0 !important; }
  .approach-step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--rule);
  }
}

/* 24.9  Nav auf Tablet/Laptop-Schmalbreiten: Sektion 2 stellt den
   Logo-Claim permanent an (display:block, Z. ~114) und fixiert Link-Typo
   per !important — beides übersteuerte main.css' ≤1200/≤1024-Verschlankung,
   der Nav-CTA lief bei 1024 aus dem Viewport (rechts abgeschnitten). */
@media (max-width: 1200px) {
  .nav-logo .full { display: none !important; }
}
@media (max-width: 1100px) {
  .nav-links a { font-size: 0.72rem !important; letter-spacing: 0.12em !important; }
  .nav-cta { padding: 0.7rem 1.1rem !important; }
}

/* =========================================================================
   25. FOCUS-RING — WCAG 1.4.11 Kontrast (Post-Launch P4, 2026-06-13)
   -------------------------------------------------------------------------
   Theme setzt *:focus-visible{outline:2px solid var(--gold);offset:4px}.
   Gemessen: --gold auf Paper nur 3.02:1 (grenzwertig an der 3:1-Grenze),
   --gold-deep 5.40:1. Auf den Dark-Sektionen (Marine) kehrt sich's um:
   --gold-deep nur 2.50:1, --gold 4.47:1. Darum: gold-deep als Default
   (helle Flächen), --gold in den Dark-Kontrapunkten. Nur outline-COLOR
   umgefärbt — Breite/Style/Offset erbt vom Theme. Editorial lädt nach
   main.css → gleiche Spezifität, Source-Order gewinnt (kein !important,
   damit die Formular-:focus-Regeln aus Sektion 18 ihren outline:0 behalten
   und weiter den B10-Box-Shadow-Ring statt doppeltem Outline tragen). */
*:focus-visible {
  outline-color: var(--gold-deep);
}
.wow-pullquote *:focus-visible,
.cta-section *:focus-visible {
  outline-color: var(--gold);
}