/* ═══════════════════════════════════════════════════════════════════
   TESSAR · OPTIK-KANON (verbindlich, alle Seiten) — Stand 2026-07-07
   Referenz: index.html. Diese Datei NACH allen bestehenden Stylesheets
   UND nach jedem seiteneigenen <style>-Block einbinden (also unmittelbar
   vor </head>). Sie neutralisiert den alten Anti-Kanon (dunkle Hero,
   dunkle Nav, Vollflächen-Anthrazit außerhalb der Anker), der auf den
   Subseiten inline dupliziert liegt — mit expliziter Spezifität + gezielt
  , damit sie nicht auf Ladereihenfolge allein angewiesen ist.

   Anthrazit bleibt ausschließlich Anker: #verguetung, #kontakt, Footer,
   Nav-Kontrast (Hover/Invert), .island-Karten. NIE Vollflächen-Hintergrund.
   Bordeaux ≤5% nur Akzent. 0-Radius, keine Schatten. Fraunces = Display,
   Fließtext = Geist. TE-Ankerlinie bleibt.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · SURFACE: Hero wird Pearl (war dunkle „hero-v2"-Bühne) ────── */
.hero.hero-v2 {
  background: var(--brand-paper);
  color: var(--grau-700);
  padding-bottom: 0;
}
.hero.hero-v2 .hero-grid { display: none; }
.hero.hero-v2::after { background: rgba(31, 30, 28, 0.12); }
.hero.hero-v2 .hero-h1 { color: var(--brand-anthrazit); }
.hero.hero-v2 .hero-h1 em,
.hero.hero-v2 .hero-sub em { color: var(--brand-accent); }
/* Satzzeichen im em-tail IMMER Ink/Anthrazit — nie Bordeaux (Bordeaux nur das
   Akzentwort selbst). Der em-tail liegt au\u00dferhalb des <em>. !important, damit
   keine seiteneigene Rest-Regel ihn wieder einf\u00e4rbt. */
.hero-h1 .em-tail { color: var(--brand-anthrazit) !important; }
.hero.hero-v2 .hero-h1 em.with-line::after { background: var(--brand-anchor); }
.hero.hero-v2 .hero-overline { color: var(--grau-500); }
.hero.hero-v2 .hero-sub { color: var(--grau-700); }

/* Primär-CTA gefüllt Anthrazit (Default-Stil). */
.hero.hero-v2 .btn-magnetic { background: var(--brand-anthrazit); color: var(--brand-paper); }
.hero.hero-v2 .btn-magnetic:hover { background: var(--brand-accent); color: var(--brand-paper); }
/* Ein-CTA-Purist: Sekundär-CTA (Outline „Wie wir arbeiten") entfällt auf ALLEN
   Subseiten — nur der eine primäre, gefüllte CTA bleibt (wie finale Index, wo der
   Sekundär vom Risiko-Kasten absorbiert wurde). Kein Risiko-Island hier
   (index-/angebotsseiten-only). */
.hero.hero-v2 .hero-cta-row .btn-ghost { display: none; }

/* Faktenzeile (Hero-Metrics) hell */
.hero.hero-v2 .hero-metrics { background: transparent; color: var(--brand-anthrazit); border-top: 1px solid #CCCCCC; }
.hero.hero-v2 .hero-metrics .metric-mini .v { color: var(--brand-anthrazit); }
.hero.hero-v2 .hero-metrics .metric-mini .l { color: var(--grau-500); }

/* Stimme / #inhaber: Pearl statt Anthrazit (kein Anker — Anker sind nur
   #verguetung, #kontakt, Footer, Nav, .island). */
.stimme { background: var(--brand-paper); color: var(--grau-700); }
.stimme::before, .stimme::after { display: none; }
.stimme .section-overline { color: var(--grau-500); }
.stimme .section-overline::before { background: var(--brand-accent); }
.stimme-quote { color: var(--brand-anthrazit); }
.stimme-quote em,
.stimme-quote p::before { color: var(--brand-accent); }
.stimme-bullets, .stimme-bullets li { color: var(--grau-700); }
.stimme-bullets li::before { background: var(--brand-accent); }
.stimme-anchor { background: rgba(31, 30, 28, 0.12); }
.stimme-anchor::after { background: rgba(31, 30, 28, 0.22); }

/* ── 2 · HERO PURIST ──────────────────────────────────────────────
   Overline und die alte Promise-/Langzeile (.hero-bullets) IMMER aus —
   nie wiederbeleben. Die kanonische KURZE Sub der Seite ist nur mit
   body.hero-keep-intro sichtbar (Subseiten); die index läuft ohne →
   reiner Purist ohne Sub. */
.hero.hero-v2 .hero-overline,
.hero.hero-v2 .hero-bullets { display: none; }
.hero.hero-v2 .hero-sub { display: none; }
body.hero-keep-intro .hero.hero-v2 .hero-sub { display: block; }

/* ── 3 · KOPFZEILE: Pearl + Fade-on-Scroll ────────────────────────
   Dunkle Nav → Pearl, dunkles Logo/Links, „Erstgespräch" als Nav-Link
   (nicht gefüllt), Bordeaux-Trennstrich. nav-fade.js toggelt .is-hidden. */
.nav[data-over-hero="true"],
.nav[data-over-hero="false"],
.nav[data-scrolled="true"],
.nav[data-scrolled="false"] {
  background: rgba(246, 244, 238, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 0;
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--brand-anchor);
}
.nav .nav-wordmark { color: var(--brand-anthrazit); }
.nav .nav-links a { color: var(--grau-500); }
.nav .nav-links a:hover { color: var(--brand-anthrazit); }
.nav .nav-links a::after { background: var(--brand-accent); }
.nav .nav-cta {
  background: transparent; color: var(--grau-500);
  border: 0; padding: 6px 0; position: relative;
}
.nav .nav-cta:hover { background: transparent; color: var(--brand-anthrazit); }
.nav .nav-cta .arrow { display: none; }
.nav .nav-cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--brand-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
}
.nav .nav-cta:hover::after { transform: scaleX(1); }
.nav {
  transition: transform 340ms ease, opacity 340ms ease,
              background 240ms ease-out, border-color 240ms ease-out, padding 240ms ease-out;
}
.nav.is-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

/* ── 4 · STATISCHE H1 (Subseiten-Pflicht) ─────────────────────────
   Ohne den Homepage-Token-Builder bleibt die Reveal-H1 sonst unsichtbar.
   Endzustand erzwingen. Homepage nutzt data-hero-h1 (Token-Builder) und
   trägt KEIN data-static-headline → hier bewusst nicht getroffen. */
.hero-h1[data-static-headline] .word > span { opacity: 1 !important; transform: none !important; }
.hero-h1[data-static-headline] em.with-line::after { transform: scaleX(1) !important; }

/* ── 5 · GLOBAL: 0-Radius, keine Schatten ─────────────────────────── */
.card-base, .btn-magnetic, .btn-ghost, .kontakt-form, .kontakt-submit,
.step, .netz-card, .segment-card, .money-step-marker, .branchen-tag,
.nav-cta, .hero-island {
  border-radius: 0;
}
.card-base, .card-base.featured, .cards-3 .card-base, .step, .segment-card {
  box-shadow: none;
}

/* ── 6 · BREADCRUMB auf Pearl-Hero ────────────────────────────────
   Die seiteneigene Inline-Regel färbt den Breadcrumb hell (für die alte
   dunkle Bühne) — auf Pearl unsichtbar. Kanon lädt danach → dunkler Text,
   Bordeaux-Hover. Kein !important nötig (gleiche Spezifität, spätere Regel). */
.breadcrumb a { color: var(--grau-500); }
.breadcrumb a:hover { color: var(--brand-anthrazit); }
.breadcrumb .sep { color: rgba(31, 30, 28, 0.35); }
.breadcrumb [aria-current="page"] { color: var(--brand-anthrazit); }

/* ── 7 · HERO-BREADCRUMB visuell aus ──────────────────────────────
   Die Brotkrümel-Zeile im Hero wird site-weit ausgeblendet (Wunsch:
   „Tabanzeige weg"). Das BreadcrumbList-JSON-LD-Schema bleibt für die
   Suchmaschine erhalten — nur die sichtbare Zeile entfällt. */
.hero.hero-v2 .breadcrumb { display: none; }

/* ── 8 · E1-Hero · zweispaltig mit Risiko-Kasten (Subseiten-Kanon) ──
   Greift automatisch, sobald eine .hero-cols einen .hero-island enthält.
   Statement-Nomen + 4. Häkchen sind pro Seite im Markup (Intent-Slot). */
.hero.hero-v2 .hero-cols:has(.hero-island) { grid-template-columns: 1.2fr 0.8fr !important; column-gap: 56px; align-items: stretch; }
/* E1-Docking (nur Subseiten): linke Spalte an Kasten-Höhe gekoppelt — H1 oben, Sub unten,
   flexibler Freiraum dazwischen; Overline über dem Rahmen; CTA freistehend darunter.
   PRIORITÄT (Fix 2026-07-08): Der Mindestabstand oben gewinnt immer. Zwischen H1-Ende
   und Sub-Anfang bleibt stets >= eine Zeilenhöhe der Sub-Größe frei (padding-top:1lh der
   Sub). Die Bündigkeit unten (Sub-Unterkante = Kasten-Unterkante) ist nur noch ein
   Nice-to-have: margin-top:auto dockt die Sub nach unten, solange Platz ist; reicht er
   nicht (lange H1 + lange Sub), kollabiert das auto-Margin auf 0, der 1lh-Mindestabstand
   bleibt, und die Sub rutscht von der Unterkante ab (CTA bleibt 28px direkt darunter). */
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-left { min-width: 0; display: flex; flex-direction: column; }
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-overline { display: block !important; margin-bottom: 18px; }
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-h1 .hero-line { white-space: normal; overflow-wrap: normal; }
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-h1.h1-sm { font-size: clamp(46px, 4.6vw, 62px) !important; line-height: 1.04; margin: 0; }
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-sub { margin-top: auto; margin-bottom: 0; padding-top: 1.55rem; padding-top: 1lh; }
.hero.hero-v2 .hero-cols:has(.hero-island) .hero-cta-row { margin-top: 28px; }
@media (max-width: 1080px) {
  .hero.hero-v2 .hero-cols:has(.hero-island) { align-items: start; }
  .hero.hero-v2 .hero-cols:has(.hero-island) .hero-sub { margin-top: 16px; padding-top: 0; }
}
@media (max-width: 1080px) {
  .hero.hero-v2 .hero-cols:has(.hero-island) { grid-template-columns: 1fr !important; column-gap: 0; }
  .hero-island { max-width: none !important; justify-self: stretch !important; }
}
.hero-island { display: flex; flex-direction: column; gap: 18px; align-self: center; justify-self: end; max-width: 520px; background: var(--brand-anthrazit); color: var(--brand-paper); padding: 34px 36px; position: relative; }
/* Bordeaux-Oberkante am Kasten entfernt (Wunsch) — keine Akzentlinie auf der Box. */
.hero-island-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,244,238,0.62); }
.hero-island-label .tick { color: var(--brand-accent-soft); font-size: 13px; }
.hero-island-statement { font-family: var(--font-display); font-weight: 600; font-variation-settings: "opsz" 40, "wght" 600, "SOFT" 60, "WONK" 0; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: var(--brand-paper); margin: 0; }
.hero-island-statement em { color: var(--brand-accent-soft); }
.hero-island-sub { font-size: 14.5px; line-height: 1.55; color: rgba(246,244,238,0.74); margin: 0; }
.hero-island-list { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid rgba(246,244,238,0.14); display: flex; flex-direction: column; gap: 12px; }
.hero-island-list li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; font-size: 13.5px; line-height: 1.45; color: rgba(246,244,238,0.82); }
.hero-island-list li::before { content: "✓"; color: var(--brand-accent-soft); font-size: 12px; line-height: 1.5; }
.hero-island-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--brand-paper); }
.hero-island-link .arrow { display: inline-block; width: 20px; height: 1px; background: currentColor; position: relative; }
.hero-island-link .arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.hero-island-link:hover { color: var(--brand-accent-soft); }
/* Schild-Trust-Marker (BD-Schild + Haken, Grün #243A2E) — zentral, site-weit */
.hero-island-label .tick { font-size: 0; display: inline-block; width: 15px; height: 17px; background: url(schild-trust.svg) center/contain no-repeat; }
.hero-island-list li::before { content: ""; width: 14px; height: 16px; background: url(schild-trust.svg) center/contain no-repeat; align-self: start; margin-top: 1px; }