/*
Theme Name: conSWK
Theme URI: https://github.com/justinbaden9/conswk
Author: NK IT Service, Nikolaj Kinas
Author URI: https://www.nk-it.de
Description: Design "Editorial" fuer conSWK - Dr. phil. Sabine Wegner-Kirchhoff. Beratung, Coaching und Mediation. Inhalte, Bilder und Seiten werden aus einem GitHub-Repository geladen; das Theme haelt sich selbst aktuell.
Version: 1.5.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: Proprietaer - Nutzung nur nach Vereinbarung mit NK IT Service
License URI: https://www.nk-it.de
Text Domain: conswk
Tags: business, coaching, mediation

© 2026 NK IT Service · Nikolaj Kinas · https://www.nk-it.de
Konzeption, Gestaltung, Programmierung und technische Umsetzung
dieser Website: NK IT Service. Alle Rechte vorbehalten.

Texte und Porträtfoto: conSWK · Dr. phil. Sabine Wegner-Kirchhoff.
Logos der Kooperationspartner: jeweilige Rechteinhaber.

Layout, Quelltext, Stilvorlagen und Programmbausteine sind
urheberrechtlich geschützt. Vervielfältigung, Bearbeitung oder
Weitergabe nur mit schriftlicher Zustimmung von NK IT Service.
*/

/**
 * conSWK — Stilvorlage des Themes
 *
 * Beratung · Coaching · Mediation — Dr. phil. Sabine Wegner-Kirchhoff,
 * Baden-Baden. Gestaltungsvariante "Editorial": Fraunces als Display-
 * schrift, Manrope für den Text, roter Akzent, helle Papierflächen.
 *
 * ---------------------------------------------------------------------------
 * conSWK · Dr. phil. Sabine Wegner-Kirchhoff
 * Beratung · Coaching · Mediation — Baden-Baden
 *
 * © 2026 NK IT Service · Nikolaj Kinas · https://www.nk-it.de
 * Konzeption, Gestaltung, Programmierung und technische Umsetzung
 * dieser Website: NK IT Service. Alle Rechte vorbehalten.
 *
 * Texte und Porträtfoto: conSWK · Dr. phil. Sabine Wegner-Kirchhoff.
 * Logos der Kooperationspartner: jeweilige Rechteinhaber.
 *
 * Layout, Quelltext, Stilvorlagen und Programmbausteine sind
 * urheberrechtlich geschützt. Vervielfältigung, Bearbeitung oder
 * Weitergabe nur mit schriftlicher Zustimmung von NK IT Service.
 * ---------------------------------------------------------------------------
 *
 * @package   conswk
 * @author    NK IT Service · Nikolaj Kinas
 * @copyright 2026 NK IT Service · Nikolaj Kinas
 * @license   Proprietär — Nutzung nur nach Vereinbarung mit NK IT Service
 * @link      https://www.nk-it.de
 */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('assets/fonts/manrope-var.woff2') format('woff2');
}

/* ---------- Design Tokens ---------- */
:root {
  /* Farben — direkt aus dem conSWK-Logo gesampelt */
  --ink: #231F20;
  --ink-80: #3C3738;
  --ink-60: #5C5657;
  --ink-40: #8B8485;
  --red: #EF4036;
  --red-deep: #D32F26;
  --red-soft: #FCEAE8;
  /* Aufgehelltes Marken-Rot fuer dunkle Flaechen: --red erreicht auf --ink
     nur 4,24:1, --red-light kommt auf 5,3:1 (WCAG AA fuer Kleintext) */
  --red-light: #FF5A4D;
  /* Abgedunkeltes Marken-Rot fuer helle rote Flaechen (z. B. Abzeichen auf
     --red-soft): --red-deep erreicht dort nur 4,30:1, dieses 6,6:1 */
  --red-ink: #9E241C;
  --paper: #FFFFFF;
  --paper-2: #F6F6F7;
  --sand: #E9E9EB;
  --white: #FFFFFF;
  --line: rgba(35, 31, 32, 0.1);
  --line-strong: rgba(35, 31, 32, 0.18);

  /* Typografie */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  /* Fluid Type Scale */
  --fs-hero: clamp(2.6rem, 1.2rem + 6.2vw, 5.8rem);
  --fs-h2: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --fs-small: 0.86rem;
  --fs-tiny: 0.74rem;

  /* Layout */
  --container: 76rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-pad: clamp(4.5rem, 10vw, 9rem);
  --radius: 1.25rem;
  --radius-lg: 2rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.8s;

  --header-h: 5rem;
  --progress: 0;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  font-feature-settings: 'ss01' on;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--red); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { position: relative; }
.section { padding-block: var(--section-pad); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 140;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: transform 0.45s var(--ease-out), background 0.35s, box-shadow 0.35s;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--line), 0 12px 40px -20px rgba(35, 31, 32, 0.25);
}
.site-header.hidden { transform: translateY(-110%); }
.header-inner {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
}

/* Markenzeichen — typografische Rekonstruktion des Original-Logos */
.brand {
  display: flex; align-items: center; gap: 0.8rem;
  text-decoration: none;
  line-height: 1;
}
.brand-mark {
  display: flex; flex-direction: column;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.brand-con { font-size: 1.5rem; text-transform: lowercase; }
.brand-con .o { color: var(--red); }
.brand-swk { font-size: 1.18rem; letter-spacing: 0.18em; }
.brand-rule { width: 1px; align-self: stretch; background: var(--line-strong); }
.brand-claim {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-60);
  line-height: 1.45;
  text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 0.25rem; }
.main-nav a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-80);
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}
.main-nav a:hover { color: var(--ink); background: rgba(35, 31, 32, 0.05); }
.main-nav a.active { color: var(--red-deep); }
.main-nav a.active::after {
  content: '';
  position: absolute; left: 50%; bottom: 0.15rem;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
  transform: translateX(-50%);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.7rem;
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, background 0.3s, color 0.3s;
  will-change: transform;
}
.btn svg { transition: transform 0.3s var(--ease-spring); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 10px 30px -10px rgba(239, 64, 54, 0.55);
}
.btn-primary:hover {
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(239, 64, 54, 0.6);
}
.btn-ghost {
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.45); }
.header-cta { padding: 0.65rem 1.35rem; font-size: 0.88rem; }

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 6px;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  align-items: center;
  z-index: 130;
}
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* Mobile Overlay */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 110;
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--gutter);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0.45s;
}
.mobile-nav.open { opacity: 1; visibility: visible; }

/* Bei geöffnetem Menü bleibt der Header (Logo + X-Button) über dem Overlay sichtbar */
body.menu-open .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transform: none !important;
}
body.menu-open .brand-mark { color: var(--paper); }
body.menu-open .brand-claim { color: rgba(250, 247, 242, 0.6); }
body.menu-open .brand-rule { background: rgba(250, 247, 242, 0.25); }
body.menu-open .nav-toggle { border-color: rgba(250, 247, 242, 0.4); }
body.menu-open .nav-toggle span { background: var(--paper); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 500;
  text-decoration: none;
  padding: 0.45rem 0;
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  transition-delay: calc(var(--i) * 60ms);
}
.mobile-nav.open a { opacity: 1; transform: none; }
.mobile-nav a small {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--red);
  font-weight: 700;
}
.mobile-nav .mobile-contact {
  margin-top: 2.5rem;
  font-size: var(--fs-small);
  color: rgba(250, 247, 242, 0.65);
}
.mobile-nav .mobile-contact a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  display: inline;
  color: var(--paper);
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 4rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Weiche Farbwaschungen statt geblurter Kreise (ruhiger, deutlich guenstiger zu rendern) */
.blob {
  position: absolute;
  border-radius: 50%;
}
.blob-1 { width: 54vw; height: 54vw; background: radial-gradient(closest-side, var(--paper-2), transparent 72%); top: -18%; right: -12%; }
.blob-2 { width: 40vw; height: 40vw; background: radial-gradient(closest-side, var(--red-soft), transparent 72%); bottom: -16%; left: -14%; opacity: 0.55; }
.blob-3 { display: none; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  position: relative;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: '';
  width: 2.2rem; height: 1.5px;
  background: var(--red);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: 480;
  font-variation-settings: 'opsz' 144;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin-bottom: 1.8rem;
}
.hero h1 em {
  font-style: italic;
  font-weight: 420;
  color: var(--red);
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .word {
  display: inline-block;
  transform: translateY(110%) rotate(3deg);
  animation: word-up 1.1s var(--ease-out) forwards;
  animation-delay: calc(0.15s + var(--i) * 90ms);
}
@keyframes word-up { to { transform: none; } }

.hero-lead {
  font-size: var(--fs-lead);
  color: var(--ink-60);
  max-width: 34em;
  margin-bottom: 2.4rem;
  font-weight: 500;
}
.hero-lead strong { color: var(--ink); font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  max-width: 36rem;
}
.hero-meta div { font-size: var(--fs-small); color: var(--ink-60); }
.hero-meta strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Hero Portrait */
.hero-visual { position: relative; }
.hero-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 70px -28px rgba(35, 31, 32, 0.4);
}
.hero-portrait::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--red);
}
/* <picture> soll kein eigenes Layout-Kaestchen bilden: das <img> bleibt
   direktes Layout-Kind von .hero-portrait (height:112% bezieht sich darauf) */
.hero-portrait picture { display: contents; }
.hero-portrait img {
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 0;
  /* Kein will-change: transform. Es haelt dauerhaft eine eigene
     Grafikebene fuer ein 1200x1500-Bild vor (rund 7 MB Grafikspeicher),
     auf schwachen Geraeten spuerbar. Der Parallax-Effekt setzt das
     transform ohnehin per JavaScript — der Browser legt die Ebene dann
     von selbst an, und nur solange sie gebraucht wird. */
}

.float-card {
  position: absolute;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.85rem 1.15rem;
  box-shadow: 0 18px 45px -18px rgba(35, 31, 32, 0.3);
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.82rem; font-weight: 700;
  line-height: 1.35;
}
.float-card small { display: block; font-weight: 600; color: var(--ink-60); font-size: 0.72rem; }
.float-card .ic {
  flex: none;
  width: 2.3rem; height: 2.3rem;
  border-radius: 0.7rem;
  display: grid; place-items: center;
  background: var(--red-soft);
  color: var(--red-deep);
}
.float-card-1 { top: 6%; right: -8%; }
.float-card-2 { bottom: 7%; left: -12%; }

/* Solange die NK-IT-Interesse-Leiste eingeblendet ist, wuerde sie den Cue
   verdecken - dann ausblenden (Cue erscheint nach Schliessen/Beantworten) */
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.8rem;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: var(--fs-tiny);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
  text-decoration: none;
}
.scroll-cue i {
  width: 1px; height: 3rem;
  background: linear-gradient(var(--ink-40), transparent);
  overflow: hidden;
  position: relative;
}
.scroll-cue i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--red);
  transform: translateY(-100%);
  animation: cue-drip 2.2s var(--ease-out) infinite;
}
@keyframes cue-drip {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* ---------- Section Headings ---------- */
.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow::before { display: none; }
.sec-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 480;
  font-variation-settings: 'opsz' 100;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.1rem;
}
.sec-head h2 em { font-style: italic; color: var(--red); font-weight: 420; }
.sec-head p:not(.eyebrow) { color: var(--ink-60); font-size: var(--fs-lead); font-weight: 500; }

/* ---------- Intro / Weg ---------- */
.intro { background: var(--paper); }
.intro-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.intro-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
.intro-quote em { font-style: italic; color: var(--red); }
.intro-body p { color: var(--ink-60); margin-bottom: 1.2rem; }
.intro-body p strong { color: var(--ink); }

.stats {
  margin-top: clamp(3rem, 7vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.stat {
  padding: 2rem 1.5rem 0.5rem;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;               /* "seit 1999" bleibt in einer Zeile */
}
.stat b sup { font-size: 0.45em; color: var(--red); font-weight: 600; }
/* "seit" als kleines Praefix neben der Jahreszahl (statt darunter) */
.stat .stat-pre { font-size: 0.4em; font-weight: 600; letter-spacing: 0; }
.stat b .count { font-variant-numeric: tabular-nums; }
/* Die hochzaehlende Jahreszahl in eine feste Box legen: die selbst
   gehostete Fraunces-Schrift hat keine festen Ziffernbreiten, sonst
   "wackeln" Zahl, "seit" und Beschriftung waehrend des Zaehlens.
   2.25em fasst die breiteste 4-stellige Zahl; zentriert = ruhig. */
.stat-pre + .count { display: inline-block; min-width: 2.25em; text-align: center; }
/* Nur die Beschriftung (direktes Kind), nicht die .count-Spans in <b> */
.stat > span { font-size: var(--fs-small); color: var(--ink-60); font-weight: 600; }

/* ---------- Leistungen (Tabs) ---------- */
.services { background: var(--paper-2); border-block: 1px solid var(--line); }

.tabs-nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-80);
  background: transparent;
  transition: all 0.3s var(--ease-out);
}
.tab-btn svg { width: 1.15rem; height: 1.15rem; }
.tab-btn:hover { border-color: var(--ink); transform: translateY(-2px); }
.tab-btn[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  box-shadow: 0 14px 30px -12px rgba(35, 31, 32, 0.5);
}
.tab-btn[aria-selected="true"] svg { color: var(--red); }

.tab-panel { display: none; }
.tab-panel.active { display: block; animation: panel-in 0.6s var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1.4rem;
}
.svc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(35, 31, 32, 0.3);
}
.svc-card:hover::before { opacity: 1; }
.svc-icon {
  width: 3rem; height: 3rem;
  border-radius: 0.9rem;
  display: grid; place-items: center;
  background: var(--red-soft);
  color: var(--red-deep);
}
.svc-icon svg { width: 1.5rem; height: 1.5rem; }
.svc-card h2, .svc-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.svc-card > p:not(.svc-note) { color: var(--ink-60); font-size: 0.97rem; }
.svc-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.25rem; }
.svc-list li {
  display: flex; gap: 0.7rem;
  font-size: 0.93rem;
  color: var(--ink-80);
  font-weight: 500;
}
.svc-list li svg {
  flex: none;
  width: 1.1rem; height: 1.1rem;
  color: var(--red);
  margin-top: 0.22rem;
}
.svc-note {
  margin-top: auto;
  padding-top: 1rem;
  font-size: var(--fs-small);
  color: var(--ink-60);
}
.svc-note a { color: var(--red-deep); font-weight: 700; text-decoration: none; }
.svc-note a:hover { text-decoration: underline; }

/* ---------- Prozess ---------- */
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.5rem);
  counter-increment: step;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.step:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(35, 31, 32, 0.28); }
/* Ruhige Oberkante mit rotem Registerstrich statt grosser Ziffern-Kontur */
.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red) 2.8rem, var(--line) 2.8rem);
}
.step h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 540;
  margin-bottom: 0.8rem;
  letter-spacing: -0.015em;
  max-width: 80%;
}
.step p { color: var(--ink-60); font-size: 0.95rem; }
.step .phase {
  display: inline-block;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 1rem;
}

/* ---------- Haltung (dunkel) ---------- */
.attitude {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.attitude .eyebrow { color: var(--red-light); }
.attitude .sec-head h2 { color: var(--paper); }
.attitude .sec-head p:not(.eyebrow) { color: rgba(250, 247, 242, 0.74); }

.ear {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.ear-card {
  border: 1px solid rgba(250, 247, 242, 0.14);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: linear-gradient(160deg, rgba(250, 247, 242, 0.05), transparent 55%);
  transition: border-color 0.4s, transform 0.4s var(--ease-out), background 0.4s;
}
.ear-card:hover {
  border-color: rgba(239, 64, 54, 0.6);
  transform: translateY(-6px);
  background: linear-gradient(160deg, rgba(239, 64, 54, 0.1), transparent 60%);
}
.ear-card b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 2rem + 4vw, 5.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--red);
  margin-bottom: 0.8rem;
}
.ear-card h3 {
  font-size: var(--fs-h4);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.ear-card p { color: rgba(250, 247, 242, 0.74); font-size: 0.94rem; }

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0;
  border-top: 1px solid rgba(250, 247, 242, 0.14);
}
.principle {
  padding: 2rem 1.8rem 0.5rem;
  border-left: 1px solid rgba(250, 247, 242, 0.14);
}
.principle:first-child { border-left: none; padding-left: 0; }
.principle h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 540;
  margin-bottom: 0.7rem;
  display: flex; align-items: center; gap: 0.7rem;
}
.principle h3 svg { width: 1.25rem; height: 1.25rem; color: var(--red); flex: none; }
.principle p { color: rgba(250, 247, 242, 0.72); font-size: 0.92rem; }

/* ---------- Über mich ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.about-visual { position: sticky; top: calc(var(--header-h) + 2rem); }
.about-portrait {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(35, 31, 32, 0.35);
  position: relative;
}
.about-portrait img { width: 100%; aspect-ratio: 4/4.6; object-fit: cover; object-position: 50% 30%; }
.about-portrait figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 0.9rem;
  padding: 0.9rem 1.2rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-60);
}
.about-portrait figcaption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  font-weight: 600;
}
.about-body > p { color: var(--ink-60); margin-bottom: 1.2rem; font-size: var(--fs-lead); font-weight: 500; }
.about-body > p strong { color: var(--ink); }

.qual-block { margin-top: 2.5rem; }
.qual-block h2, .qual-block h3 {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 1.2rem;
}
.qual-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.qual-list li {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.96rem;
  transition: transform 0.3s var(--ease-out);
}
.qual-list li:hover { transform: translateX(0.6rem); }
.qual-list li i {
  font-style: normal;
  font-family: var(--font-display);
  color: var(--red);
  font-size: 0.85rem;
  flex: none;
  width: 3.2rem;
  font-variant-numeric: tabular-nums;
}
.qual-list li span small { display: block; font-weight: 500; color: var(--ink-60); font-size: var(--fs-small); }

.comp-cols {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.comp-col {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.comp-col h3, .comp-col h4 { font-size: 0.95rem; font-weight: 800; margin-bottom: 0.9rem; }
.comp-col ul { display: grid; gap: 0.55rem; }
.comp-col li {
  display: flex; gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-80);
}
.comp-col li svg { flex: none; width: 1rem; height: 1rem; color: var(--red); margin-top: 0.25rem; }

/* ---------- Buch ---------- */
.book { background: var(--paper-2); border-block: 1px solid var(--line); }
.book-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.book-stage { perspective: 1200px; display: grid; place-items: center; padding: 2rem 0; }
.book-3d {
  position: relative;
  width: min(15rem, 60vw);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transform: rotateY(-24deg) rotateX(4deg);
  transition: transform 0.8s var(--ease-spring);
}
.book-stage:hover .book-3d { transform: rotateY(-8deg) rotateX(2deg) translateY(-8px); }
.book-cover {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(150deg, #2E2A2B 0%, var(--ink) 55%, #1A1718 100%);
  border-radius: 4px 10px 10px 4px;
  padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column;
  color: var(--paper);
  box-shadow: 0 50px 80px -30px rgba(35, 31, 32, 0.6);
  backface-visibility: hidden;
}
.book-cover::after {
  content: '';
  position: absolute; left: 0.65rem; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}
.book-cover .bc-pub {
  font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(250, 247, 242, 0.55);
}
.book-cover .bc-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 540;
  line-height: 1.2;
  margin-top: 1.6rem;
  letter-spacing: -0.01em;
}
.book-cover .bc-title em { color: var(--red); font-style: italic; }
.book-cover .bc-sub {
  font-size: 0.7rem;
  color: rgba(250, 247, 242, 0.6);
  margin-top: 0.7rem;
  line-height: 1.5;
}
.book-cover .bc-author {
  margin-top: auto;
  font-size: 0.74rem;
  font-weight: 700;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(250, 247, 242, 0.2);
}
.book-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2.4rem;
  background: linear-gradient(#191617, #231F20);
  transform: rotateY(-90deg);
  transform-origin: left center;
  border-radius: 3px 0 0 3px;
}
.book-pages {
  position: absolute;
  right: 0; top: 4px; bottom: 4px;
  width: 2.3rem;
  background: repeating-linear-gradient(90deg, #F4EFE6 0 2px, #E4DCCB 2px 4px);
  transform: rotateY(90deg) translateZ(-1.2rem);
  transform-origin: right center;
}
.book-info h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 540;
  margin-bottom: 1rem;
  letter-spacing: -0.015em;
}
.book-info > p { color: var(--ink-60); margin-bottom: 1.2rem; }
.book-points { display: grid; gap: 0.6rem; margin-bottom: 1.8rem; }
.book-points li { display: flex; gap: 0.7rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-80); }
.book-points li svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--red); margin-top: 0.25rem; }

/* ---------- Referenzen ---------- */
.refs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.ref-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.ref-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -25px rgba(35, 31, 32, 0.28); }
.ref-card .quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--red);
  margin-bottom: 1.2rem;
}
.ref-card blockquote {
  font-size: 1.02rem;
  color: var(--ink-80);
  font-weight: 500;
  line-height: 1.75;
}
.ref-card blockquote em { font-family: var(--font-display); font-style: italic; }
.ref-card figcaption {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-60);
  font-weight: 600;
  display: flex; align-items: center; gap: 0.8rem;
}
.ref-card figcaption::before {
  content: '';
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--red);
  flex: none;
}

/* ---------- Partner ---------- */
.partners { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); }
.partners h2 {
  text-align: center;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 2rem;
}
.partner-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem;
}
.partner-logo {
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 1rem 1.8rem;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.partner-logo img {
  height: 3.1rem; width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}
.partner-logo:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 16px 35px -18px rgba(35, 31, 32, 0.3);
}
.partner-logo:hover img, .partner-logo:focus-visible img { filter: none; opacity: 1; }

/* ---------- Kontakt ---------- */
.contact { background: var(--ink); color: var(--paper); overflow: hidden; }
.contact .eyebrow { color: var(--red-light); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 480;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.contact h2 em { font-style: italic; color: var(--red); }
.contact-intro { color: rgba(250, 247, 242, 0.76); font-size: var(--fs-lead); margin-bottom: 2.4rem; }

.contact-items { display: grid; gap: 0.4rem; }
.contact-item {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(250, 247, 242, 0.12);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}
a.contact-item:hover { transform: translateX(0.6rem); }
.contact-item .ic {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 0.8rem;
  display: grid; place-items: center;
  background: rgba(239, 64, 54, 0.15);
  color: var(--red);
}
.contact-item .ic svg { width: 1.2rem; height: 1.2rem; }
.contact-item small {
  display: block;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.45);
}
.contact-item b { font-size: 1.02rem; font-weight: 700; }

.contact-form-wrap {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.6);
}
.contact-form-wrap h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 540;
  margin-bottom: 0.5rem;
}
.contact-form-wrap > p { color: var(--ink-60); font-size: var(--fs-small); margin-bottom: 1.6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--fs-small); font-weight: 700; }
.form-field input, .form-field select, .form-field textarea {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.85rem 1.1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--ink);
  transition: border-color 0.25s, box-shadow 0.25s;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 7.5rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(239, 64, 54, 0.14);
}
.form-status {
  display: none;
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  background: #E7F5EC;
  border: 1px solid #BDE3CB;
  color: #1F6B3C;
  border-radius: 0.8rem;
  font-weight: 600;
  font-size: var(--fs-small);
}
.form-status.show { display: block; }
/* Die Rueckmeldung bekommt nach dem Absenden den Fokus, damit
   Vorleseprogramme sie ausgeben. Sie ist per Tastatur nicht
   anspringbar (tabindex -1), deshalb waere ein Fokusring hier
   irrefuehrend — er entfaellt. */
.form-status[tabindex="-1"]:focus { outline: none; }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Sicherheitsfrage. Bewusst schmal: das Feld nimmt nur eine kleine Zahl
   auf, ein volles Textfeld waere irrefuehrend. Der Hinweis darunter
   erklaert, wozu die Frage dient — sonst wirkt sie wie eine Schikane. */
.form-captcha input {
  max-width: 8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.form-hinweis {
  margin: 0.1rem 0 0;
  font-size: var(--fs-tiny);
  color: var(--ink-60);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #1B1819;
  color: rgba(250, 247, 242, 0.72);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: var(--fs-small);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(250, 247, 242, 0.1);
}
.site-footer .brand-claim { color: rgba(250, 247, 242, 0.5); }
.site-footer .brand-mark { color: var(--paper); }
.footer-about { max-width: 24rem; margin-top: 1rem; }
.site-footer h3, .site-footer h4 {
  color: var(--paper);
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.site-footer ul { display: grid; gap: 0.55rem; }
.site-footer a { color: rgba(250, 247, 242, 0.7); text-decoration: none; transition: color 0.25s; }
.site-footer a:hover { color: var(--red); }
/* ---------- Fusszeile: Abschlusszeile ----------
   Drei Elemente: Urheberrecht der Betreiberin, Pflichtangaben, Signatur
   des Erbauers. Grund der Flaeche ist #1B1819 aus .site-footer; alle
   Farbwerte unten sind dagegen gerechnet. Die Link-Regeln tragen den
   Vorsatz .site-footer, weil .site-footer a (Spezifitaet 0,1,1) jede
   reine Klassenregel schlaegt. */
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem 2.5rem;
  padding-top: 1.8rem;
  font-size: var(--fs-tiny);
  line-height: 1.65;
  color: rgba(250, 247, 242, 0.72);   /* 8,93:1 (vorher 0.58 = 6,24:1) */
}

.footer-owner { max-width: 42rem; }

/* Die Pflichtangaben bleiben optisch beim Urheberrecht: das auto-Mass
   schluckt den freien Raum, die Signatur wandert an den rechten Rand.
   Bricht die Zeile um, greift wieder space-between. */
.footer-legal {
  margin-right: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.site-footer .footer-legal a {
  color: rgba(250, 247, 242, 0.72);                  /* 8,93:1 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 247, 242, 0.42);  /* Linie 3,89:1 */
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease-out),
              text-decoration-color 0.25s var(--ease-out);
}
.site-footer .footer-legal a:hover,
.site-footer .footer-legal a:focus-visible {
  color: var(--red-light);            /* 5,71:1; --red kaeme nur auf 4,58:1 */
  text-decoration-color: var(--red-light);
}

/* Signatur. Das Zeichen davor ist dieselbe Haarlinie, die das Theme in
   .legal-body ul li::before setzt (0,42rem breit, 1px hoch) — kein neues
   Ornament, kein Bild, kein Abzeichen, kein Seitenstreifen. */
.footer-sign {
  position: relative;
  margin: 0;
  padding-left: 1.35rem;
  text-align: right;
}
.footer-sign::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.72em;
  width: 0.42rem;
  height: 1px;
  background: var(--red-light);       /* 5,71:1, Grenze fuer Nichttext 3:1 */
}
/* Kontrastachse des Themes: Serif kursiv gegen Sans — dieselbe Geste wie
   .sec-head h2 em. Fraunces-Kursiv ist ueber die Seitenkoepfe ohnehin
   geladen, es entsteht kein zusaetzlicher Schriftabruf. */
.footer-sign-label {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: 0.005em;
  color: rgba(250, 247, 242, 0.62);   /* 7,15:1 */
}
.site-footer .footer-sign-name {
  color: rgba(250, 247, 242, 0.92);   /* 14,06:1 */
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 247, 242, 0.42);  /* 3,89:1 */
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease-out),
              text-decoration-color 0.25s var(--ease-out);
}
.site-footer .footer-sign-name:hover,
.site-footer .footer-sign-name:focus-visible {
  color: var(--red-light);
  text-decoration-color: var(--red-light);
}

/* Der globale Fokusring nutzt var(--red) und erreicht auf dem Fussgrund
   nur 4,58:1; --red-light kommt auf 5,71:1. Gilt fuer die ganze Fusszeile. */
.site-footer :focus-visible { outline-color: var(--red-light); }

@media (max-width: 48rem) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .footer-legal { margin-right: 0; }
  .footer-sign { text-align: left; }
}
/* ---------- Datenschutz-Hinweis (kein Einwilligungsbanner) ----------
   Fester Abschnitt zwischen letztem Inhalt und Fusszeile, nichts
   Schwebendes: er verdeckt nichts und schiebt nichts weg.

   Zur Flaechenwahl: auf der Startseite steht darueber .contact (Zeile
   1123, background var(--ink)), auf Unterseiten .contact-cta (Zeile
   1756, ebenfalls var(--ink)). Ein heller Streifen zwischen dieser
   dunklen Flaeche und der dunklen Fusszeile waere ein Leuchtband.
   Der Grund ist deshalb #1B1819 aus .site-footer (Zeile 1240); der
   Hinweis liest sich als deren oberste Zeile, ein Kolophon.

   #231F20 und #1B1819 trennen nur 1,08:1 — die Abgrenzung nach oben
   leistet allein die Haarlinie. Sie ist damit bedeutungstragend, nicht
   schmueckend, und haelt deshalb die 3:1-Grenze: 3,42:1 gegen den
   eigenen Grund, 3,16:1 gegen .contact darueber. (Ein Wert von 0.26
   haette nur 2,28:1 bzw. 2,11:1 ergeben und die Grenze verfehlt.)

   Alle Farbwerte sind gegen #1B1819 nach WCAG 2.1 gerechnet und gegen
   die im Theme bereits dokumentierten Werte gegengeprueft: 0.92 = 14,06:1
   wie in .site-footer .footer-sign-name, 0.42 = 3,89:1 wie dort,
   --red-light = 5,73:1 (die Datei notiert 5,71:1). */
.hinweis {
  background: #1B1819;
  border-top: 1px solid rgba(250, 247, 242, 0.38);  /* 3,42:1 / 3,16:1 */
  color: rgba(250, 247, 242, 0.72);                 /* 8,98:1 */
  font-size: var(--fs-small);
  line-height: 1.7;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.hinweis.is-verborgen { display: none; }
.hinweis.is-geht { opacity: 0; transform: translateY(0.5rem); }

/* Dieselbe Reihe wie .footer-bottom darunter: ein Flexlauf an der
   Grundlinie, der beim Umbruch zur Spalte wird — kein neues
   Layoutprinzip, keine Karte, kein Raster. */
.hinweis-inner {
  padding-block: clamp(1.3rem, 3vw, 1.9rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
}

.hinweis-text {
  flex: 1 1 30rem;
  max-width: 68ch;            /* haelt die Zeilenlaenge im Lesebereich */
  margin: 0;
  text-wrap: pretty;
}

/* Kontrastachse des Themes: Fraunces kursiv gegen Manrope — dieselbe
   Geste wie .sec-head h2 em und .footer-sign-label. Kein Eyebrow, keine
   getrackten Versalien, kein Nummern-Marker. Fraunces-Kursiv ist ueber
   die Seitenkoepfe ohnehin geladen, es entsteht kein weiterer Abruf. */
.hinweis-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 450;
  font-size: 1.14em;
  letter-spacing: 0.005em;
  color: var(--paper);               /* 17,63:1 */
}

/* Linkmuster der Fusszeile, unveraendert uebernommen. .site-footer a
   greift hier nicht — der Hinweis steht VOR <footer>, nicht darin. */
.hinweis-text a {
  color: rgba(250, 247, 242, 0.92);                  /* 14,06:1 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(250, 247, 242, 0.42);  /* Linie 3,89:1 */
  text-underline-offset: 0.22em;
  transition: color 0.25s var(--ease-out),
              text-decoration-color 0.25s var(--ease-out);
}
.hinweis-text a:hover,
.hinweis-text a:focus-visible {
  color: var(--red-light);       /* 5,73:1; var(--red) kaeme nur auf 4,58:1 */
  text-decoration-color: var(--red-light);
}

.hinweis-aktion {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

/* Von .btn (Zeile 298) nur Form, Gewicht und Uebergaenge. Bewusst kein
   .btn-primary: eine rote Pille mit box-shadow 0 10px 30px -10px
   rgba(239,64,54,.55) zoege mehr Aufmerksamkeit als der Satz daneben und
   machte aus dem Hinweis eine Aufforderung. .btn-ghost scheidet aus,
   dessen color: var(--ink) und --line-strong sind fuer helle Flaechen
   gerechnet. Zwei Klassen im Selektor (0,2,0), damit die Regeln
   unabhaengig von der Reihenfolge gegen .btn (0,1,0) gewinnen. */
.hinweis .hinweis-ok {
  padding: 0.5rem 1.3rem;
  font-size: var(--fs-small);
  color: rgba(250, 247, 242, 0.92);             /* 14,06:1 */
  background: transparent;
  /* Einzige Kante des Knopfes, traegt die Erkennbarkeit: 3,89:1,
     Grenze fuer Bedienelemente 3:1 (WCAG 1.4.11). */
  border: 1px solid rgba(250, 247, 242, 0.42);
  will-change: auto;                            /* .btn legt sonst eine unnoetige Compositor-Ebene an */
  transition: color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out);
}
.hinweis .hinweis-ok:hover {
  color: var(--paper);                          /* 17,63:1 */
  border-color: var(--paper);
  background: rgba(250, 247, 242, 0.08);
}

.hinweis-merk {
  font-size: var(--fs-tiny);
  color: rgba(250, 247, 242, 0.62);             /* 6,96:1 */
}

/* Der globale Fokusring (Zeile 160) nutzt var(--red) und erreicht auf
   dieser Flaeche nur 4,58:1; --red-light kommt auf 5,73:1. Gleiche
   Korrektur wie .site-footer :focus-visible in Zeile 1358. */
.hinweis :focus-visible { outline-color: var(--red-light); }

/* Nach dem Schliessen setzt das Skript den Fokus auf die Fusszeile,
   damit die Tastaturposition nicht auf <body> zurueckfaellt. Ein Rahmen
   um die halbe Fusszeile waere dabei irritierend — der Bereich ist nur
   Haltepunkt, kein Bedienelement. Das Skript entfernt das Attribut
   wieder, sobald der Fokus weiterwandert. */
.site-footer[tabindex="-1"]:focus { outline: none; }

@media (max-width: 48rem) {
  .hinweis-inner { flex-direction: column; align-items: flex-start; }
}

/* Auf Papier hat ein wegklickbarer Hinweis nichts verloren. */
@media print { .hinweis { display: none; } }

/* Der Hinweis entsteht nie durch Bewegung — er ist von Anfang an
   vollstaendig sichtbar. Bewegt wird nur das Verschwinden, und auch das
   faellt bei Bewegungsvorbehalt weg. Der globale Block am Dateiende
   (Zeile 2023) kuerzt Uebergaenge zwar per !important auf 0,001 s; diese
   Regel macht die Absicht an der Stelle lesbar, an der sie gilt. */
@media (prefers-reduced-motion: reduce) {
  .hinweis { transition: none; }
  .hinweis.is-geht { transform: none; }
}

/* ---------- Reveal Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .main-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 26rem; margin-top: 1.5rem; }
  .float-card-1 { right: -4%; }
  .float-card-2 { left: -4%; }
  .scroll-cue { display: none; }
  .intro-grid, .about-grid, .book-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-visual { position: static; max-width: 26rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(odd) { border-left: none; padding-left: 0; }
  .stat:nth-child(-n+2) { padding-top: 1rem; }
  .process-steps, .ear { grid-template-columns: 1fr; }
  .refs-grid { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr 1fr; }
  .principle:nth-child(odd) { border-left: none; padding-left: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
  .form-grid { grid-template-columns: 1fr; }
  .principles, .footer-grid { grid-template-columns: 1fr; }
  .principle { border-left: none; padding-left: 0; }
  .comp-cols { grid-template-columns: 1fr; }
  .hero-meta { gap: 1.2rem 1.8rem; }
  .float-card { padding: 0.65rem 0.9rem; font-size: 0.74rem; }
}

/* ============================================================
   Schwerpunkt Gesundheitswesen — Registerzeilen statt Kartenraster
   ============================================================ */
.health-rows {
  border-top: 1px solid var(--line-strong);
  margin-bottom: clamp(3rem, 7vw, 5rem);
}
.health-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  padding-block: clamp(1.8rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--line);
}
.health-area {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
  padding-top: 0.5rem;
}
.health-main h2, .health-main h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.22;
  margin-bottom: 0.7rem;
}
.health-main p { color: var(--ink-60); font-size: 0.97rem; }
.health-topics { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.5rem; }
.health-topics li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-80);
}
.health-topics li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 0.55rem; height: 2px;
  background: var(--red);
}

/* Mediation im Krankenhaus — dunkles Panel als Anker der Sektion */
.med-panel {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.med-panel .eyebrow { color: var(--red-light); }
.med-copy h2, .med-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.med-copy h2 em, .med-copy h3 em { font-style: italic; color: var(--red); }
.med-copy p { color: rgba(250, 247, 242, 0.76); font-size: 0.99rem; }
.med-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.6rem; }
.med-list li {
  display: flex; gap: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(250, 247, 242, 0.88);
}
.med-list li svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--red); margin-top: 0.2rem; }

/* ============================================================
   Aktuelles — Fallbeispiele aus Kliniken (aufklappbare Falldossiers)
   ============================================================ */
.cases { background: var(--paper-2); border-block: 1px solid var(--line); }
.case-list { display: flex; flex-direction: column; gap: 1rem; }
.case {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.35s, border-color 0.35s;
}
.case[open] { box-shadow: 0 26px 55px -28px rgba(35, 31, 32, 0.3); border-color: var(--line-strong); }
.case summary {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.3rem, 3vw, 2.2rem);
  cursor: pointer;
  list-style: none;
}
.case summary::-webkit-details-marker { display: none; }
.case summary:hover .case-title { color: var(--red-deep); }
.case-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.case-tag {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.case-org { font-size: var(--fs-small); font-weight: 600; color: var(--ink-60); }
.case-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 540;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.25s;
}
.case-toggle {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-80);
}
.case-toggle svg { width: 1.1rem; height: 1.1rem; transition: transform 0.35s var(--ease-out); }
.case[open] .case-toggle { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.case[open] .case-toggle svg { transform: rotate(180deg); }
.case-body {
  padding: 0 clamp(1.3rem, 3vw, 2.2rem) clamp(1.6rem, 3.5vw, 2.4rem);
  border-top: 1px solid var(--line);
}
.case-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
}
.case-narrative h2, .case-results h2,
.case-narrative h3, .case-results h3 {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 0.55rem;
}
.case-narrative h2, .case-narrative h3 { margin-top: 1.3rem; }
.case-narrative h2:first-child, .case-narrative h3:first-child { margin-top: 0; }
.case-narrative p { color: var(--ink-60); font-size: 0.96rem; }
.case-results {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  align-self: start;
}
.case-results ul { display: flex; flex-direction: column; gap: 0.7rem; }
.case-results li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-80);
}
.case-results li::before {
  content: '';
  position: absolute; left: 0; top: 0.32em;
  width: 0.85rem; height: 0.5rem;
  border-left: 2.5px solid var(--red);
  border-bottom: 2.5px solid var(--red);
  transform: rotate(-45deg) scale(0.82);
}

/* ---------- Buch: Faktenzeile ---------- */
p.book-facts {
  font-size: var(--fs-small);
  color: var(--ink-60);
  font-weight: 600;
  margin-bottom: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: 34rem;
}

/* ============================================================
   Mehrseiten-Struktur: Seitenkopf, Wegweiser, Kontakt-CTA-Band
   ============================================================ */
/* Kopf der Unterseiten (kompakt, kein 100vh-Hero) */
.page-head {
  padding: calc(var(--header-h) + clamp(3rem, 8vw, 5rem)) 0 clamp(2.6rem, 6vw, 4.2rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.page-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.3rem + 3.8vw, 4.4rem);
  font-weight: 480;
  font-variation-settings: 'opsz' 120;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.page-head h1 em { font-style: italic; color: var(--red); font-weight: 420; }
.page-head .page-lead {
  margin-top: 1.2rem;
  color: var(--ink-60);
  font-size: var(--fs-lead);
  font-weight: 500;
  max-width: 46rem;
}

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal-body { max-width: 68ch; }
.legal-body > * + * { margin-top: 1.1rem; }
.legal-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  font-weight: 480;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal-body h3 {
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -0.005em;
  margin-top: 1.9rem;
  color: var(--ink);
}
.legal-body p, .legal-body li { color: var(--ink-60); line-height: 1.72; }
.legal-body strong { color: var(--ink); font-weight: 620; }
.legal-body a { color: var(--red-ink, var(--red)); text-decoration: underline; text-underline-offset: 0.18em; }
.legal-body a:hover { text-decoration-thickness: 2px; }
.legal-body ul { list-style: none; padding-left: 0; }
.legal-body ul li { position: relative; padding-left: 1.35rem; margin-top: 0.55rem; }
.legal-body ul li::before {
  content: "";
  position: absolute; left: 0.1rem; top: 0.72em;
  width: 0.42rem; height: 1px;
  background: var(--red);
}
.legal-address {
  margin-top: 1.1rem;
  padding: 1.4rem 1.6rem;
  background: var(--paper-2);
  border-left: 1px solid var(--line-strong, var(--line));
  font-style: normal;
  line-height: 1.75;
  color: var(--ink-60);
}
.legal-address strong { display: block; color: var(--ink); }
.legal-updated { margin-top: 2.6rem; font-size: var(--fs-tiny); color: var(--ink-50, var(--ink-60)); }

/* ---------- Impressum: Gestaltung und technische Umsetzung ----------
   Kein Kasten, kein Rahmen, keine Kachel: die Trennung leistet bereits
   der border-top von .legal-body h2. Kontraste auf --paper #FFFFFF:
   --ink 16,30:1 (strong), --ink-60 7,24:1 (Fliesstext, geerbt aus
   .legal-body p), --red-ink 7,71:1 (Verweise). Das Logo ist #0E4E96 auf
   transparent = 8,24:1 und braucht deshalb KEINE dunkle Platte. */
/* Der Urhebervermerk soll den Rechtstext nicht ueberstimmen: kleineres
   Zeichen, gedaempfte Schrift, ein Absatz statt dreier. Er steht am Ende
   des Impressums und ist eine Fussnote, keine Visitenkarte. */
.legal-body .legal-credit {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.legal-body .legal-credit__logo {
  flex: 0 0 auto;
  display: block;
  width: 2.4rem;                        /* zuvor bis 4,5rem — deutlich zurueckgenommen */
  margin-top: 0.15rem;                  /* sitzt auf der ersten Textzeile */
  line-height: 0;
  text-decoration: none;                /* schlaegt .legal-body a */
  opacity: 0.72;                        /* tritt hinter den Text zurueck */
  transition: opacity 0.25s var(--ease-out);
}
.legal-body .legal-credit__logo:hover,
.legal-body .legal-credit__logo:focus-visible { opacity: 1; }
.legal-credit__logo img { display: block; width: 100%; height: auto; }

.legal-body .legal-credit__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.62;
  color: var(--ink-60);
}

@media (max-width: 30rem) {
  .legal-body .legal-credit { gap: 0.75rem; }
  .legal-body .legal-credit__logo { width: 2rem; }
}

/* Aktive Seite in der Navigation */
.main-nav a[aria-current="page"] { color: var(--red-deep); }
.main-nav a[aria-current="page"]::after {
  content: '';
  position: absolute; left: 50%; bottom: 0.15rem;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--red);
  transform: translateX(-50%);
}
.mobile-nav a[aria-current="page"] { color: var(--red); }

/* Wegweiser auf der Startseite: verlinkte Registerzeilen */
.way-rows { border-top: 1px solid var(--line-strong); }
.way-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.8rem);
  padding-block: clamp(1.5rem, 3.5vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.way-label {
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.way-main h3 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 0.35rem;
  transition: color 0.25s;
}
.way-main p { color: var(--ink-60); font-size: 0.95rem; }
.way-arrow {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-80);
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.way-arrow svg { width: 1.05rem; height: 1.05rem; }
.way-row:hover .way-main h3 { color: var(--red-deep); }
.way-row:hover .way-arrow {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  transform: translateX(4px);
}

/* Kontakt-CTA-Band am Ende der Unterseiten */
.contact-cta { background: var(--ink); color: var(--paper); }
.contact-cta-inner {
  padding-block: clamp(3.2rem, 8vw, 5.5rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
}
.contact-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3rem);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.contact-cta h2 em { font-style: italic; color: var(--red); }
.contact-cta .cta-note { margin-top: 0.7rem; color: rgba(250, 247, 242, 0.76); font-size: 0.98rem; max-width: 34rem; }
.contact-cta-actions { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.contact-cta-actions .cta-tel {
  color: var(--paper); text-decoration: none; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-bottom: 1.5px solid rgba(250, 247, 242, 0.35);
  padding-bottom: 0.15rem;
  transition: border-color 0.25s;
}
.contact-cta-actions .cta-tel:hover { border-color: var(--red); }

@media (max-width: 64rem) {
  .way-row { grid-template-columns: minmax(0, 1fr) auto; }
  .way-label { grid-column: 1 / -1; margin-bottom: -0.4rem; }
}

/* ============================================================
   Häufige Fragen (FAQ) — Fragen aus der Praxis + Antworten
   ============================================================ */

/* Fragen, die Führungskräfte stellen: als Zitate, bewusst ohne Antwort */
.ask-band { background: var(--ink); color: var(--paper); }
.ask-band .eyebrow { color: var(--red-light); }
.ask-band .sec-head h2 { color: var(--paper); }
.ask-band .sec-head p:not(.eyebrow) { color: rgba(250, 247, 242, 0.76); }
.ask-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.4rem;
}
.ask-card {
  border: 1px solid rgba(250, 247, 242, 0.16);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: linear-gradient(160deg, rgba(250, 247, 242, 0.05), transparent 60%);
  display: flex; flex-direction: column; gap: 0.9rem;
}
.ask-card .ask-q {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.3rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--paper);
}
.ask-card .ask-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 0.5;
  color: var(--red);
}
.ask-note {
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
  color: rgba(250, 247, 242, 0.76);
  font-size: var(--fs-lead);
  max-width: 52rem;
}
.ask-note strong { color: var(--paper); }

/* Antworten-Akkordeon */
.faq-list { display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.faq-item[open] { border-color: var(--line-strong); box-shadow: 0 22px 45px -28px rgba(35, 31, 32, 0.28); }
.faq-item summary {
  display: flex; align-items: center; gap: 1.2rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 2rem);
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  font-weight: 540;
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color 0.25s;
}
.faq-item summary:hover .faq-q { color: var(--red-deep); }
.faq-toggle {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-80);
}
.faq-toggle svg { width: 1rem; height: 1rem; transition: transform 0.35s var(--ease-out); }
.faq-item[open] .faq-toggle { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.faq-item[open] .faq-toggle svg { transform: rotate(180deg); }
.faq-a {
  padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.3rem, 3vw, 1.9rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.1rem, 2.5vw, 1.5rem);
}
.faq-a p { color: var(--ink-60); font-size: 0.98rem; }
.faq-a p + p { margin-top: 0.9rem; }
.faq-a a { color: var(--red-deep); font-weight: 700; }
/* Vom Kunden als besonders wichtig markierte Passage: typografisch
   betont (dunkler, etwas groesser) statt farbigem Seitenstreifen */
.faq-a .faq-key {
  color: var(--ink);
  font-size: 1.04rem;
  font-weight: 500;
  line-height: 1.65;
}
.faq-terms { display: grid; gap: 0.9rem; margin-top: 0.4rem; }
.faq-terms div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.3rem 1.2rem; }
.faq-terms dt {
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--red-deep);
  padding-top: 0.15rem;
}
.faq-terms dd { color: var(--ink-60); font-size: 0.98rem; }
/* Kennzeichnung der besonders wichtigen Fragen */
.faq-flag {
  flex: none;
  font-size: var(--fs-tiny);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-ink);
  background: var(--red-soft);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

@media (max-width: 40rem) {
  .faq-terms div { grid-template-columns: 1fr; }
  .faq-flag { display: none; }
}

/* ============================================================
   NK-IT Interesse-Banner (fixe Verkaufsleiste, conSWK-Palette)
   ============================================================ */
.ib-done { justify-content: center; }
.ib-status {
  margin: 0; display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.98rem; line-height: 1.5; color: var(--paper); max-width: 78ch;
}
.ib-status:focus { outline: none; }
.ib-status svg { width: 20px; height: 20px; flex: none; color: var(--red); margin-top: 0.15rem; }
.ib-status a { color: var(--red); }
.ib-status a:hover { color: #fff; }
.ib-err strong { color: #fff; }
.ib-close {
  flex: none; background: transparent; position: relative;
  border: 1.5px solid rgba(250, 247, 242, 0.4);
  color: var(--paper); border-radius: 50%; width: 34px; height: 34px;
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ib-close:hover { border-color: var(--red); color: #fff; }
/* Trefferflaeche des Schliessen-Buttons auf ~48px erweitern (Optik bleibt) */
.ib-close::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.ib-privacy { margin: 0.55rem 0 0; font-size: 0.78rem; color: rgba(250, 247, 242, 0.66); }

/* ---------- Responsive: neue Sektionen ---------- */
@media (max-width: 64rem) {
  .health-row { grid-template-columns: 1fr; gap: 0.9rem; }
  .health-area { padding-top: 0; }
  .health-topics { padding-top: 0.2rem; }
  .med-panel { grid-template-columns: 1fr; }
  .case summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta toggle" "title toggle"; }
  .case-meta { grid-area: meta; flex-direction: row; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
  .case-title { grid-area: title; }
  .case-toggle { grid-area: toggle; }
  .case-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .ib-wrap { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .ib-benefits { display: none; }               /* mobil kompakt halten */
  .ib-title { margin-bottom: 0.15rem; padding-right: 2.6rem; }
  .ib-contact { font-size: 0.85rem; }
  .ib-actions { text-align: left; }
  .ib-question { margin-bottom: 0.35rem; }
  .ib-buttons { flex-wrap: wrap; }
  .ib-btn { flex: 1 1 auto; }
  .ib-wrap.ib-start { position: relative; }
  .ib-wrap.ib-start .ib-close { position: absolute; top: 0.8rem; right: var(--gutter); }
}
/* Offenes Mobile-Menue darf nicht vom Banner verdeckt werden */
@media (max-width: 64rem) {
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero h1 .word { transform: none; animation: none; }
  .hero-portrait img { transform: none !important; }
  .ib-btn:hover { transform: none; }
}