/* ============================================================
   Bee Communications — main stylesheet
   No build tools required. Pure CSS.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Display-Serif: Newsreader (warm, humanistisch) — REV03, ersetzt DM Serif Display.
   Variable woff2 (opsz 6..72, wght 400..600), self-hosted. */
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/Newsreader-Variable.woff2') format('woff2') tech('variations'),
       url('/assets/fonts/Newsreader-Variable.woff2') format('woff2-variations');
  font-weight: 400 600; font-stretch: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/Newsreader-Italic-Variable.woff2') format('woff2') tech('variations'),
       url('/assets/fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations');
  font-weight: 400 600; font-stretch: normal; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Body-Sans: Geist — self-hosted (REV Task 9, ersetzt Google-Fonts-CDN).
   Googles latin-Variable-woff2 (wght 100..900), byte-identisch zum vorherigen CDN-Font. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Typography — zentraler Display-Serif-Token (REV03: Newsreader statt DM Serif Display) */
  --font-display: 'Newsreader', Georgia, serif;
  /* Color — body bg shifted to warm off-white (was near-white #FEFDFB)
     Gold de-saturated from #F9B233 (sat ~95%) to #E5A93C (sat ~73%) per taste-skill */
  --color-primary: #E5A93C;
  --color-primary-dark: #B8851D;
  --color-primary-light: #F8EBC8;
  /* Signalfarbe — zusätzlich zum Gold auf Rahmen/Akzenten. Default = Gold,
     d.h. die Startseite bleibt unverändert; nur die Farb-Varianten überschreiben diese 3. */
  --color-signal: var(--color-primary);
  --color-signal-strong: var(--color-primary-dark);
  --color-signal-light: var(--color-primary-light);
  --color-neutral-900: #1A1A1A;
  --color-neutral-700: #4A4A4A;
  --color-neutral-400: #9A9590;
  --color-neutral-200: #E2DDD3;
  --color-neutral-100: #EDE8DC;
  --color-neutral-50:  #ECE6D9; /* deeper section bg, keeps separation from body */
  --color-bg:          #F6F1E5; /* warm off-white — no longer eye-burning */
  --color-bg-alt:      #F2EBD9; /* tiny step darker — "ganz dezent" alt section bg */
  --color-surface:     #FBF8F1; /* lifted surface — for cards that read brighter than body */
  --color-accent:      #C67D4A;
  --color-dark-card:   #1F1B17; /* dark card / hover-flip target */
  --section-border:    color-mix(in srgb, var(--color-signal-strong) 12%, transparent); /* subtle hairline — folgt der Signalfarbe (Default Gold) */

  /* Shadow — warm-tinted (was generic black) */
  --shadow-sm: 0 1px 2px rgba(120, 80, 30, .05);
  --shadow-md: 0 4px 12px rgba(120, 80, 30, .07);
  --shadow-lg: 0 12px 32px -8px rgba(120, 80, 30, .12);
  --shadow-xl: 0 24px 48px -16px rgba(120, 80, 30, .16);

  /* Spacing scale (4/8 rhythm) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* Section padding — tighter rhythm, less air per section */
  --section-pad:        clamp(56px, 5.5vw,  96px);
  --section-pad-tight:  clamp(40px, 4vw,    64px); /* between related sections */
  --section-pad-loose:  clamp(80px, 8vw,   128px); /* major narrative breaks */

  /* Z-index scale */
  --z-base:    1;
  --z-content: 2;
  --z-overlay: 10;
  --z-sticky:  30;
  --z-nav:     40;
  --z-modal:   50;
  --z-toast:   60;

  /* Motion */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-out-expo:  cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--color-neutral-900);
  background-color: var(--color-bg);
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-text-size-adjust: 100%;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
::selection { background-color: var(--color-primary); color: var(--color-neutral-900); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
}
h1 { word-break: normal; overflow-wrap: anywhere; hyphens: auto; }

/* ---------- Layout helpers ---------- */
.container-main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.container-narrow { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.section-padding         { padding: var(--section-pad) 0;       position: relative; }
.section-padding--tight  { padding: var(--section-pad-tight) 0; position: relative; }
.section-padding--loose  { padding: var(--section-pad-loose) 0; position: relative; }
/* Bottom optically larger than top — impeccable spacing */
.section-padding--asym   { padding-top: var(--section-pad); padding-bottom: calc(var(--section-pad) * 1.15); position: relative; }

/* Subtle hairline divider between consecutive plain sections.
   Gold-tinted at very low opacity → reads as warmth, not as a hard rule. */
.section-padding + .section-padding::before,
.section-padding + .section-padding--tight::before,
.section-padding--tight + .section-padding::before,
.section-padding--tight + .section-padding--tight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, calc(100% - clamp(40px, 10vw, 128px)));
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--section-border) 12%,
    var(--section-border) 88%,
    transparent
  );
  pointer-events: none;
}

/* Subtle alt-bg sections — "ganz dezent" color separation between adjacent sections */
.section--alt { background: var(--color-bg-alt); }
.text-center { text-align: center; }

/* A11y utility — visually hide but keep for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link — off-screen bis Tastatur-Fokus, dann sichtbar oben links */
.skip-link {
  position: fixed;
  left: 0; top: 0;
  z-index: 10000;
  background: var(--color-neutral-900);
  color: #fff;
  padding: .7rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transform: translateY(-120%);
  transition: transform .18s var(--ease, ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
/* Fokussiertes Sprungziel darf keinen störenden Default-Ring bekommen */
main#main:focus { outline: none; box-shadow: none; }

/* ---------- Section-header / CTA helpers (replace inline styles) ---------- */
.bridge-cta { margin-top: var(--space-8); }
.services-intro { margin-top: var(--space-5); margin-left: auto; margin-right: auto; max-width: 60ch; }
.services-header { text-align: center; max-width: 760px; margin: 0 auto var(--space-12); }
.nutzen-intro { margin-top: var(--space-5); max-width: 52ch; }
.cs-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.cs-cta-row { text-align: center; margin-top: var(--space-9); }
.creds-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }
.formats-header { max-width: 760px; margin: 0 auto; text-align: center; }
.section-header-center { text-align: center; max-width: 760px; margin: 0 auto var(--space-9); }
.about-intro { margin-top: var(--space-6); max-width: 70ch; }
.about-block { max-width: 760px; margin-bottom: var(--space-9); }
.about-h2 { max-width: 760px; margin-bottom: var(--space-8); }
.legal-eyebrow + h1, .legal-eyebrow + .text-display { margin-top: var(--space-4); }
.legal-display { font-size: clamp(32px, 5vw, 64px); }
.section-no-top-pad { padding-top: 0 !important; }
.case-detail-block { max-width: 1000px; margin: 0 auto; }

/* ---------- Type ---------- */
/* Eyebrow as a pill badge (soft-skill spec: rounded-full, microscopic, tracked) */
.eyebrow {
  display: inline-block;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-signal-strong);
  padding: 6px 14px;
  background: color-mix(in srgb, var(--color-signal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-signal) 18%, transparent);
  border-radius: 999px;
  line-height: 1;
}
/* Hero eyebrow stays gold but with frosted-pill BG over photo */
.hero .eyebrow {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .22);
  color: var(--color-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.text-display {
  font-family: var(--font-display);
  font-size: clamp(32px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.text-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.text-h3 {
  font-family: 'Inter', sans-serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  line-height: 1.3;
}
.text-body {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--color-neutral-700);
  max-width: 65ch;
}
.text-lead {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.65;
  color: var(--color-neutral-700);
  max-width: 60ch;
}

/* Heading-to-paragraph rhythm — kills the inline `style="margin-top:18px"` pattern */
.text-h2 + p, h2 + p,
.text-display + p, h1 + p,
.eyebrow + h2, .eyebrow + .text-h2, .eyebrow + h1, .eyebrow + .text-display { margin-top: var(--space-5); }
h3 + p, .text-h3 + p { margin-top: var(--space-3); }
p + p { margin-top: var(--space-5); }
.text-h2, h2 { margin-bottom: 0; }
.eyebrow { margin-bottom: var(--space-4); }

/* ---------- Buttons — pill-shape with button-in-button trailing arrow ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px 12px 28px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
  transition: transform .35s var(--ease-out-quart),
              background-color .35s var(--ease-out-quart),
              box-shadow .35s var(--ease-out-quart),
              color .35s var(--ease-out-quart);
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(0) scale(.98); }

/* Generic .arrow span — inline by default; treated as a "satellite circle" inside .btn */
.arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .35s var(--ease-out-quart);
}
.arrow svg { display: block; transition: transform .35s var(--ease-out-quart); }
.btn .arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  margin-left: var(--space-2);
}
.btn:hover .arrow { transform: translateX(3px); background: rgba(0, 0, 0, .14); }
.btn:hover .arrow svg { transform: translateX(2px) translateY(-1px); }

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-neutral-900);
}
.btn-primary:hover {
  background-color: var(--color-primary-dark);
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 12px 32px -8px rgba(229, 169, 60, .45);
}
.btn-primary .arrow      { background: rgba(0, 0, 0, .14); }
.btn-primary:hover .arrow{ background: rgba(255, 255, 255, .22); color: #fff; }

.btn-secondary {
  background-color: transparent;
  color: var(--color-neutral-900);
  border-color: rgba(20, 20, 20, .14);
}
.btn-secondary:hover {
  border-color: rgba(229, 169, 60, .55);
  transform: translateY(-2px);
  background: rgba(229, 169, 60, .06);
}

.btn-dark {
  background-color: var(--color-neutral-900);
  color: #fff;
}
.btn-dark:hover {
  background: var(--color-dark-card);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .28);
}
.btn-dark .arrow       { background: rgba(255, 255, 255, .12); }
.btn-dark:hover .arrow { background: var(--color-primary); color: var(--color-neutral-900); }

.btn-ghost-dark {
  background: transparent;
  border-color: rgba(26,26,26,.3);
  color: var(--color-neutral-900);
}
.btn-ghost-dark:hover { border-color: var(--color-neutral-900); }

/* ---------- Decorative ---------- */
.honeycomb-bg {
  position: absolute; inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23F9B233' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 60px 70px;
  pointer-events: none;
}
.glow-amber {
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: var(--color-primary-light);
  opacity: .3;
  filter: blur(100px);
  pointer-events: none;
}
.glow-amber-strong {
  position: absolute;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: .1;
  filter: blur(120px);
  pointer-events: none;
}

/* ============================================================
   Navigation — transparent on hero, opaque on scroll
   ============================================================ */
/* Fluid Island Nav — floating glass pill detached from top edge */
.nav {
  position: fixed;
  top: clamp(12px, 2vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - clamp(20px, 4vw, 56px));
  max-width: 1200px;
  z-index: var(--z-nav);
  background-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow:
    0 12px 36px -12px rgba(15, 15, 15, .18),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-color .4s var(--ease-out-quart),
              border-color .4s var(--ease-out-quart),
              box-shadow .4s var(--ease-out-quart),
              transform .4s var(--ease-out-quart);
}
.nav.is-scrolled {
  background-color: rgba(254, 251, 245, .82);
  border-color: rgba(20, 20, 20, .08);
  box-shadow:
    0 16px 40px -12px rgba(15, 15, 15, .22),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
.nav.is-open {
  background-color: rgba(254, 251, 245, .92);
  border-color: rgba(20, 20, 20, .08);
}

/* On a hero page (transparent nav over dark photo): white links */
.nav:not(.is-scrolled):not(.is-open) .nav-link {
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.nav:not(.is-scrolled):not(.is-open) .nav-link:hover,
.nav:not(.is-scrolled):not(.is-open) .nav-link.is-active {
  color: var(--color-primary);
}
.nav:not(.is-scrolled):not(.is-open) .nav-toggle span {
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* Logo: invert to white on transparent nav */
.nav:not(.is-scrolled):not(.is-open) .nav-logo img {
  filter: brightness(0) invert(1);
}
/* Sprachumschalter auf transparentem Foto-Hero: weiss wie die Nav-Links, damit die
   inaktive Sprache nicht dunkel-auf-Foto verschwindet. Aktive Sprache bleibt gold.
   Wird beim Scrollen (is-scrolled -> heller Nav-Grund) automatisch wieder dunkel. */
.nav:not(.is-scrolled):not(.is-open) .lang-switch-link {
  color: #fff; opacity: .82; text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.nav:not(.is-scrolled):not(.is-open) .lang-switch-link.is-active {
  color: var(--color-primary); opacity: 1;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 var(--space-4) 0 var(--space-6);
}
@media (min-width: 1024px) { .nav-inner { height: 64px; padding: 0 var(--space-3) 0 var(--space-7); } }
.nav .container-main { max-width: none; padding: 0; }
.nav-logo { display: block; flex-shrink: 0; position: relative; z-index: var(--z-nav); }
/* Logo ist sehr breit (1850x246 = 7.5:1). Auf schmalen Phones sonst kein Platz mehr
   fuer DE/EN-Umschalter + Burger in der Pill -> Hoehe skaliert mit, bleibt aber
   ab ~516px bei 32px (Desktop unveraendert, >=1024px 38px per Regel unten). */
.nav-logo img { height: clamp(22px, 6.2vw, 32px); width: auto; }
@media (min-width: 1024px) { .nav-logo img { height: 38px; } }

.nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-700);
  transition: color .2s var(--ease);
  padding: 8px 0;
}
.nav-link:hover, .nav-link.is-active { color: var(--color-primary-dark); }

.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0;
  padding-top: 8px;
  visibility: hidden; opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-dropdown-inner {
  background: rgba(254, 253, 251, .78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 12px;
  box-shadow:
    0 24px 48px -16px rgba(15, 15, 15, .18),
    0 1px 0 rgba(255, 255, 255, .6) inset;
  padding: 8px;
  min-width: 280px;
}
.nav-dropdown-inner a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--color-neutral-700);
  border-radius: 8px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav-dropdown-inner a:hover {
  background: rgba(249, 178, 51, .14);
  color: var(--color-neutral-900);
}

.nav-cta { display: none; }
@media (min-width: 1024px) { .nav-cta { display: inline-flex; padding: 12px 22px; font-size: 14px; } }

.nav-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 40px; height: 40px; gap: 5px;
  position: relative; z-index: var(--z-nav);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--color-neutral-900);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ============================================================
   Mobile drawer — true glassmorphism, centered, premium
   ============================================================ */
.nav-mobile {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: var(--z-modal);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* True frosted-glass surface — translucent + heavy backdrop blur */
  background: rgba(254, 250, 240, .55);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s var(--ease-out-quart), visibility 0s linear .4s;
}
.nav-mobile.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .4s var(--ease-out-quart), visibility 0s linear 0s;
}

/* Dedicated close X inside drawer (sits in drawer's own stacking context, above the glass) */
.nav-mobile-close {
  position: absolute;
  top: max(clamp(20px, 4vw, 36px), env(safe-area-inset-top));
  right: clamp(20px, 4vw, 36px);
  width: 48px; height: 48px;            /* slightly larger tap target */
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .85); /* opaque-ish — drop the nested backdrop-filter (iOS bug) */
  border: 1px solid rgba(229, 169, 60, .35);
  border-radius: 50%;
  color: var(--color-neutral-900);
  cursor: pointer;
  z-index: 10;
  padding: 0;
  pointer-events: auto;
  touch-action: manipulation;           /* kills the 300ms tap delay + prevents gesture cancellation */
  -webkit-tap-highlight-color: rgba(229, 169, 60, .35);
  transition: background-color .25s var(--ease-out-quart),
              border-color .25s var(--ease-out-quart),
              transform .25s var(--ease-out-quart),
              color .25s var(--ease-out-quart);
}
.nav-mobile-close:hover {
  background: var(--color-dark-card);
  border-color: var(--color-dark-card);
  color: #fff;
  transform: rotate(90deg);
}
.nav-mobile-close svg { display: block; pointer-events: none; }

/* Ambient honeycomb decoration — minimal, glass already provides texture */
.nav-mobile-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-base);
}
.nav-mobile-hex {
  position: absolute;
  color: var(--color-primary);
  opacity: .07;
}
.nav-mobile-hex--1 { top: 10%;  right: -30px; transform: rotate(10deg); }
.nav-mobile-hex--2 { bottom: -70px; left: -50px; transform: rotate(-8deg); opacity: .04; }
.nav-mobile-hex--3 { display: none; }
.nav-mobile-hex--4 { top: 56%; right: -64px; transform: rotate(14deg); opacity: .04; }

.nav-mobile-inner {
  position: relative;
  z-index: var(--z-content);
  min-height: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 120px 28px 48px;
  display: flex; flex-direction: column;
  gap: var(--space-7);
  text-align: center;
  align-items: center;
}

.nav-mobile-links {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  align-items: center;
  width: 100%;
}
.nav-mobile-group {
  display: flex; flex-direction: column;
  align-items: center;
  width: 100%;
}
/* details element resets — remove default disclosure triangle */
details.nav-mobile-group > summary { list-style: none; cursor: pointer; }
details.nav-mobile-group > summary::-webkit-details-marker { display: none; }

.nav-mobile-summary {
  gap: 10px;
}
.nav-mobile-chevron {
  transition: transform .35s var(--ease-out-quart);
  color: var(--color-primary-dark);
  opacity: .8;
}
details.nav-mobile-group[open] > summary .nav-mobile-chevron {
  transform: rotate(180deg);
}
.nav-mobile-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(26px, 6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-neutral-900);
  padding: var(--space-3) var(--space-6);
  min-height: 48px;
  border-radius: 999px;
  transition: color .3s var(--ease-out-quart),
              background-color .3s var(--ease-out-quart),
              transform .3s var(--ease-out-quart);
  /* staggered-reveal initial state */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
}
.nav-mobile.is-open .nav-mobile-link {
  animation: drawer-link-in .55s var(--ease-out-quart) forwards;
}
.nav-mobile.is-open .nav-mobile-group .nav-mobile-link  { animation-delay:  60ms; }
.nav-mobile.is-open .nav-mobile-link:nth-of-type(2)     { animation-delay: 120ms; }
.nav-mobile.is-open .nav-mobile-link:nth-of-type(3)     { animation-delay: 180ms; }
.nav-mobile.is-open .nav-mobile-link:nth-of-type(4)     { animation-delay: 240ms; }
.nav-mobile.is-open .nav-mobile-link:nth-of-type(5)     { animation-delay: 300ms; }

@keyframes drawer-link-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.nav-mobile-link:hover,
.nav-mobile-link:active,
.nav-mobile-link.is-active {
  color: var(--color-primary-dark);
  background: rgba(229, 169, 60, .12);
  transform: scale(1.02);
}

/* Children sub-menu — only visible when <details> is open */
.nav-mobile-children {
  display: flex; flex-direction: column;
  align-items: center;
  margin: var(--space-1) 0 var(--space-3);
  padding: var(--space-2) 0;
  width: 100%;
  animation: drawer-link-in .35s var(--ease-out-quart) both;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
}
details.nav-mobile-group[open] > .nav-mobile-children {
  animation: drawer-link-in .35s var(--ease-out-quart) forwards;
}
.nav-mobile-children a {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-neutral-700);
  padding: 8px 14px;
  min-height: 36px;
  letter-spacing: -0.005em;
  transition: color .2s var(--ease-out-quart);
}
.nav-mobile-children a:hover { color: var(--color-primary-dark); }

/* Contact section — uniform pill-stack, centered, glass-light */
.nav-mobile-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(229, 169, 60, .18);
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
}
.nav-mobile.is-open .nav-mobile-contact {
  animation: drawer-link-in .55s var(--ease-out-quart) 360ms forwards;
}
.nav-mobile-contact-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(229, 169, 60, .22);
  color: var(--color-neutral-900);
  transition: transform .25s var(--ease-out-quart),
              background .25s var(--ease-out-quart),
              border-color .25s var(--ease-out-quart),
              color .25s var(--ease-out-quart);
  min-height: 40px;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.nav-mobile-contact-item:hover,
.nav-mobile-contact-item:active {
  background: var(--color-dark-card);
  border-color: var(--color-dark-card);
  color: #fff;
  transform: translateY(-1px);
}
.nav-mobile-contact-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(229, 169, 60, .25);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ease-out-quart), color .25s var(--ease-out-quart);
}
.nav-mobile-contact-item:hover .nav-mobile-contact-icon {
  background: var(--color-primary);
  color: var(--color-neutral-900);
}
.nav-mobile-contact-icon svg { width: 14px; height: 14px; }
/* Hide the big label, only show the value (compact pill) */
.nav-mobile-contact-text { display: inline-flex; align-items: baseline; gap: 6px; }
.nav-mobile-contact-label { display: none; }
.nav-mobile-contact-value { font: inherit; }

.nav-mobile-cta {
  justify-content: center;
  margin: var(--space-3) auto 0;
  padding: 14px 20px;
  font-size: 15px;
  width: 100%;
  max-width: 320px;
  align-self: center;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
}
.nav-mobile.is-open .nav-mobile-cta {
  animation: drawer-link-in .55s var(--ease-out-quart) 440ms forwards;
}

@media (prefers-reduced-motion: reduce) {
  .nav-mobile-link, .nav-mobile-children, .nav-mobile-contact, .nav-mobile-cta {
    opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
  }
}

/* ============================================================
   Hero — Fullscreen background slideshow with overlay text
   (used on every page, like petranieckchen.com)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh; /* verhindert Layout-Sprung auf iOS-Safari (dynamic viewport) */
  display: flex; align-items: center;
  /* overflow visible so the siegel can hang half into the next section */
  color: #fff;
}
/* keep image / illustration overscan contained inside the bg layer */
.hero-bg { overflow: hidden; }
.hero--short { min-height: 78vh; min-height: 78dvh; }
@media (max-width: 768px) {
  .hero { min-height: 92vh; min-height: 92dvh; }
  .hero--short { min-height: 92vh; min-height: 92dvh; }
  /* REV03-Feinschliff: Text unten verankern statt vertikal zentrieren —
     der Textblock lag sonst über Gerlindes Gesicht (Fotos: Gesicht oben/mittig). */
  .hero { align-items: flex-end; }
  .hero .hero-content { padding-top: 110px; padding-bottom: 56px; }
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero-bg-slide.is-active { opacity: 1; }
.hero-bg-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* slow zoom for active slide */
  transform: scale(1);
  transition: transform 8s linear;
}
.hero-bg-slide.is-active img { transform: scale(1.06); }

/* Illustrated hero (Hexagon-Wabenmuster) — used on leistungen subpages */
.hero-illustration {
  position: absolute;
  inset: 0;
  /* hell & warm statt fast-schwarz (Feedback „zu düster") */
  background: linear-gradient(135deg, #FBF8F1 0%, #F1E9D8 100%);
  overflow: hidden;
}
.hero-illustration-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero--illustrated .hero-bg { z-index: 0; }
.hero--illustrated .hero-content { padding-bottom: 96px; }
.hero--illustrated h1 { text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.hero--illustrated .hero-subline { text-shadow: 0 1px 8px rgba(0,0,0,.4); }
/* i18n: illustrated hero uses fixed line breaks, not the 18ch cap, so DE and EN keep
   the same line count and the hero stays the same height in both languages. Desktop
   only (mobile hides the br and wraps freely). */
@media (min-width: 768px) {
  .hero.hero--illustrated h1 {
    max-width: none;
    text-wrap: nowrap;
    white-space: nowrap;
    hyphens: manual;
  }
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, rgba(26,26,26,.65) 0%, rgba(26,26,26,.35) 55%, rgba(26,26,26,.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15), transparent 35%, transparent 65%, rgba(0,0,0,.25));
  pointer-events: none;
}

/* Hero container — mirrors the floating nav pill so hero text aligns with the logo,
   and the right-anchored siegel aligns with the Erstgespräch CTA. */
.hero-container {
  width: calc(100% - clamp(20px, 4vw, 56px));
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-6);   /* matches .nav-inner left padding on mobile */
  padding-right: var(--space-4);  /* matches .nav-inner right padding on mobile */
}
@media (min-width: 1024px) {
  .hero-container {
    padding-left: var(--space-7);  /* matches .nav-inner left padding on desktop */
    padding-right: var(--space-3); /* matches .nav-inner right padding on desktop */
  }
}

.hero-content {
  position: relative; z-index: 2;
  padding-top: 132px;
  padding-bottom: 80px;
}
@media (min-width: 1024px) { .hero-content { padding-top: 160px; } }

.hero-content--left { text-align: left; }
.hero-content--center { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-content--right { text-align: right; }
.hero-content--right > * { margin-left: auto; }

.hero .eyebrow {
  color: var(--color-primary);
  font-size: 13px;
  letter-spacing: .15em;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.hero h1 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-7);
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  max-width: 18ch;
  text-wrap: balance;
}
@media (min-width: 1024px) { .hero h1 { line-height: 1.02; } }
/* REV03 P1: Mobile-Hero — Headline lief rechts aus dem Bild (max-width 18ch > verfügbare
   Breite) und die Eyebrow-Pille wurde abgeschnitten. Auf Mobile kleiner + garantiert im Bild. */
@media (max-width: 767px) {
  .hero h1,
  .hero .hero-rota .hero-rota-item { font-size: clamp(28px, 7.6vw, 42px); max-width: 100%; }
  .hero .eyebrow { letter-spacing: 0.1em; font-size: 10px; max-width: 100%; }
  /* REV03 P2: „bisschen weniger Füße" — die Portrait-Fotos zeigen mobil die volle
     Bildhöhe (Kopf bis Füße). Oben verankert hineinzoomen schneidet den unteren
     Bildrand (Füße/Boden) weg, Kopf bleibt unter der Nav. Sanfter Zoom bleibt aktiv. */
  .hero-bg-slide img { transform: scale(1.22); transform-origin: top center; }
  .hero-bg-slide.is-active img { transform: scale(1.28); transform-origin: top center; }
}
.hero-content--center h1 { margin-left: auto; margin-right: auto; }
.hero-content--right h1 { margin-left: auto; }
.hero-subline {
  color: rgba(255,255,255,.94);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.6;
  max-width: 580px;
  margin-bottom: 40px;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.hero-content--center .hero-subline { margin-left: auto; margin-right: auto; }
.hero-content--right .hero-subline { margin-left: auto; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-content--center .hero-ctas { justify-content: center; }
.hero-content--right .hero-ctas { justify-content: flex-end; }

/* Hero CTAs override against dark backdrop */
.hero .btn-secondary {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.4);
  backdrop-filter: blur(4px);
}
.hero .btn-secondary:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
}

/* Slideshow dots — 44×44 hit area, slim 4px visual dot */
.hero-dots {
  position: absolute; left: 50%;
  transform: translateX(-50%);
  bottom: var(--space-5); z-index: var(--z-content);
  display: flex; gap: 0;
}
.hero-dots button {
  position: relative;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hero-dots button::before {
  content: '';
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transition: width .3s var(--ease-out-quart), background .3s var(--ease-out-quart), border-radius .3s var(--ease-out-quart);
}
.hero-dots button:hover::before { background: rgba(255,255,255,.85); }
.hero-dots button.is-active::before {
  background: var(--color-primary);
  width: 22px; height: 4px;
  border-radius: 2px;
}

/* Certification badge — anchored to the lower edge, pulled inward toward center,
   gently drifting in place */
.hero-siegel {
  position: absolute;
  right:  clamp(60px, 10vw, 180px);   /* tucked inward — sits right of center, not flush with the edge */
  /* Half in hero, half in next section — bottom is negative ≈ half the siegel size */
  bottom: calc(-1 * clamp(60px, 7vw, 100px));
  width:  clamp(120px, 14vw, 200px);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  z-index: 4;
  filter:
    drop-shadow(0 18px 36px rgba(0, 0, 0, .35))
    drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
  transform-origin: center;
  animation:
    siegel-in    1.1s var(--ease-out-quart) .35s both,
    siegel-drift 14s  ease-in-out 1.6s infinite;
  transition: transform .4s var(--ease-out-quart);
  will-change: transform;
}
@media (max-width: 768px) {
  /* On mobile: tuck closer to the right edge, still half-overlapping the next section */
  .hero-siegel {
    right: clamp(16px, 4vw, 32px);
    bottom: calc(-1 * clamp(50px, 14vw, 80px));
  }
}
.hero-siegel:hover { animation-play-state: paused; transform: rotate(-4deg) scale(1.04); }

@keyframes siegel-in {
  from { opacity: 0; transform: rotate(-14deg) scale(.7); }
  to   { opacity: 1; transform: rotate(0)      scale(1);  }
}
/* Multi-stop subtle drift — moves around like floating in gentle water,
   range ±5px X / ±5px Y / ±2° rotation. "Nur ganz leicht." */
@keyframes siegel-drift {
  0%   { transform: translate(0,    0)    rotate(0deg);    }
  20%  { transform: translate(-3px, -3px) rotate(-1.2deg); }
  40%  { transform: translate(-5px,  2px) rotate(-2deg);   }
  55%  { transform: translate(-2px,  4px) rotate(-0.6deg); }
  70%  { transform: translate(3px,   1px) rotate(1.4deg);  }
  85%  { transform: translate(2px,  -4px) rotate(0.8deg);  }
  100% { transform: translate(0,    0)    rotate(0deg);    }
}
@media (prefers-reduced-motion: reduce) {
  .hero-siegel { animation: siegel-in 1.1s var(--ease-out-quart) .35s both; }
}

/* ============================================================
   Storytelling — "Wie die Honigbiene" Editorial-Split
   ============================================================ */
.storytelling { background: var(--color-bg); }
.storytelling-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (min-width: 900px) {
  .storytelling-grid { grid-template-columns: 1.05fr 1fr; gap: var(--space-11); }
}
.storytelling-text .eyebrow { margin-bottom: var(--space-4); }
.storytelling-text .text-lead {
  margin-top: var(--space-5);
  font-weight: 500;
  color: var(--color-neutral-900);
  max-width: 56ch;
}
.storytelling-text .text-body {
  margin-top: var(--space-5);
  max-width: 60ch;
}

.storytelling-figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 32px 60px -20px rgba(120, 80, 30, .22),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.storytelling-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.storytelling-figure-deco {
  position: absolute;
  bottom: -36px;
  right: -36px;
  width: 200px;
  height: 230px;
  color: var(--color-primary);
  opacity: .35;
  pointer-events: none;
  animation: storytelling-float 12s ease-in-out infinite;
}
.storytelling-figure-deco svg { width: 100%; height: 100%; display: block; }
@keyframes storytelling-float {
  0%, 100% { transform: rotate(0)    translate(0, 0); }
  50%      { transform: rotate(-4deg) translate(-4px, -6px); }
}
@media (prefers-reduced-motion: reduce) {
  .storytelling-figure-deco { animation: none; }
}

/* Illustration variant of the storytelling figure (replaces photo) */
.storytelling-figure--illustration {
  background: radial-gradient(120% 100% at 50% 30%, #FBF6E8 0%, #F2EBD9 60%, #EAE0C5 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 40px);
  box-shadow:
    0 32px 60px -20px rgba(120, 80, 30, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
.honeybee-illustration {
  width: 100%;
  height: 100%;
  display: block;
  animation: bee-float 14s ease-in-out infinite;
  transform-origin: center;
}
@keyframes bee-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .honeybee-illustration { animation: none; }
}

/* ============================================================
   Pain Points — inline listing (no cards), 2-col on desktop
   ============================================================ */
.pain { background: var(--color-neutral-50); position: relative; }
.pain-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }

.pain-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 768px) {
  .pain-list { grid-template-columns: 1fr 1fr; gap: var(--space-9) var(--space-10); }
}

.pain-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
}
.pain-row-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--color-primary-light);
  border-radius: 50%;
  transition: transform .35s var(--ease-out-quart), background .35s var(--ease-out-quart);
}
.pain-row:hover .pain-row-icon { background: var(--color-primary); transform: scale(1.06); }
.pain-row-icon svg { width: 24px; height: 24px; stroke: var(--color-primary-dark); transition: stroke .35s var(--ease-out-quart); }
.pain-row:hover .pain-row-icon svg { stroke: var(--color-neutral-900); }
.pain-row-title {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}
.pain-row-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  max-width: 50ch;
}

/* ============================================================
   Quote breaker — parallax image with overlay text
   ============================================================ */
.breaker {
  position: relative;
  min-height: 75vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.breaker-bg {
  position: absolute; inset: -15% 0 -15% 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  will-change: transform;
  /* JS sets translateY for parallax */
}
/* REV03 P2: Breaker-Fotos (Treppen-Shot) mobil oben verankert leicht zoomen →
   Füße/Boden am unteren Rand raus, Kopf bleibt (position top schneidet nie oben). */
@media (max-width: 767px) {
  .breaker-bg { background-size: auto 122%; background-position: center top; }
}
/* Fallback: CSS-only parallax via background-attachment fixed (skipped on mobile/reduced-motion) */
@supports (background-attachment: fixed) {
  @media (min-width: 1024px) and (hover: hover) {
    .breaker-bg.parallax-fixed {
      position: absolute; inset: 0;
      background-attachment: fixed;
    }
  }
}
.breaker::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.breaker--dark::before { background: linear-gradient(180deg, rgba(26,26,26,.55) 0%, rgba(26,26,26,.7) 50%, rgba(26,26,26,.55) 100%); }
.breaker--golden::before { background: linear-gradient(135deg, rgba(229,169,60,.70), rgba(184,133,29,.84)); }
.breaker-quote {
  position: relative; z-index: 2;
  text-align: center;
  font-family: var(--font-display);
  /* REV02: max 46px, damit „…nicht von selbst," am Desktop in eine Zeile passt (fester <br> danach) */
  font-size: clamp(24px, 3.6vw, 46px);
  line-height: 1.2;
  padding: 0 24px;
  max-width: 940px;
  letter-spacing: -0.01em;
  text-wrap: balance; /* REV03: fester Umbruch nur noch Desktop (.hidden-md), Mobile bricht sauber selbst um */
}
.breaker--dark .breaker-quote { color: #fff; }
.breaker--golden .breaker-quote { color: var(--color-neutral-900); }
.breaker-eyebrow {
  position: relative; z-index: 2;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: 13px; font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
.breaker--dark .breaker-eyebrow { color: var(--color-primary); }

/* ============================================================
   Solution / Bridge
   ============================================================ */
.bridge {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.bridge h2 { color: var(--color-neutral-900); margin-bottom: 24px; }
.bridge p { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; color: var(--color-neutral-700); }

/* ============================================================
   Services Grid — Bento (Text-only, 2x2, erste Karte dark)
   ============================================================ */
.services { position: relative; }
/* .services-header — see top tokens block (de-duped) */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}
@media (min-width: 1200px) {
  .services-grid { gap: var(--space-7); }
}

.service-card {
  /* Double-Bezel (Doppelrand): outer shell ::before with hairline ring + 6px inset
     to a smaller inner core. Concentric radii: outer 32, inner calc(32 - 6) = 26 */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 280px;
  padding: var(--space-8);
  border-radius: 26px;       /* inner core radius */
  background: var(--color-surface);
  color: var(--color-neutral-900);
  text-decoration: none;
  margin: 6px;                /* leaves room for outer shell */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),  /* inner highlight */
    0 0 0 1px rgba(31, 27, 23, .12);          /* core hairline — visible but quiet */
  transition:
    transform .4s var(--ease-out-quart),
    box-shadow .4s var(--ease-out-quart),
    background-color .4s var(--ease-out-quart),
    color .4s var(--ease-out-quart);
}
.service-card::before {
  /* Outer shell — fakes the bezel ring */
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 32px;
  background: color-mix(in srgb, var(--color-signal) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-signal) 22%, transparent);
  pointer-events: none;
  z-index: -1;
  transition: background-color .4s var(--ease-out-quart), border-color .4s var(--ease-out-quart);
}
.service-card:hover::before {
  background: color-mix(in srgb, var(--color-signal) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-signal) 40%, transparent);
}
@media (min-width: 1024px) {
  .service-card { min-height: 320px; padding: var(--space-9); gap: var(--space-7); }
}

/* All cards flip cream → dark on hover (uniform behaviour) */
.service-card:hover {
  background: var(--color-dark-card);
  color: rgba(255, 255, 255, .82);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35);
}
.service-card:hover .service-card-title { color: #FFFFFF; }
.service-card:hover .service-card-desc  { color: rgba(255, 255, 255, .74); }
.service-card:hover .service-card-eyebrow,
.service-card:hover .service-card-link  { color: var(--color-primary); }
.service-card:hover .service-card-link svg { transform: translateX(4px); }

.service-card:active { transform: translateY(0) scale(.99); }


.service-card-eyebrow {
  display: inline-block;
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  line-height: 1;
  padding: 6px 14px;
  background: rgba(229, 169, 60, .14);
  border: 1px solid rgba(229, 169, 60, .22);
  border-radius: 999px;
  transition: color .4s var(--ease-out-quart), background-color .4s var(--ease-out-quart), border-color .4s var(--ease-out-quart);
  width: fit-content;
}
.service-card:hover .service-card-eyebrow {
  background: rgba(229, 169, 60, .22);
  border-color: rgba(229, 169, 60, .42);
  color: var(--color-primary);
}

.service-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--color-neutral-900);
  margin-top: var(--space-5);
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: color .4s var(--ease-out-quart);
}

.service-card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  max-width: 46ch;
  margin-top: var(--space-5);
  transition: color .4s var(--ease-out-quart);
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: auto;
  padding-top: 8px;
  transition: color .4s var(--ease-out-quart);
}
.service-card-link svg { transition: transform .35s var(--ease-out-quart); }
.service-card:hover .service-card-link svg { transform: translateX(4px); }

.service-card--dark .service-card-link { color: var(--color-primary); }

/* Body wrapper retained for compatibility */
.service-card-body { display: contents; }

/* ============================================================
   Granulare Angebots-Tiles — 4x2 Bento, kompakter als Service-Cards
   Cream by default, flip to dark on hover (matching design system)
   ============================================================ */
.offerings-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-11);
}
.offerings-intro {
  margin-top: var(--space-5);
  margin-left: auto;
  margin-right: auto;
  max-width: 60ch;
}

.offerings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px)  { .offerings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .offerings-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }

.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: 22px;
  margin: 6px;
  background: var(--color-surface);
  color: var(--color-neutral-900);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(20, 20, 20, .04);
  transition:
    transform .35s var(--ease-out-quart),
    box-shadow .35s var(--ease-out-quart),
    background-color .35s var(--ease-out-quart),
    color .35s var(--ease-out-quart);
}
.offer-card::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 28px;
  background: rgba(229, 169, 60, .04);
  border: 1px solid rgba(20, 20, 20, .04);
  pointer-events: none;
  z-index: -1;
  transition: background-color .35s var(--ease-out-quart), border-color .35s var(--ease-out-quart);
}
.offer-card:hover {
  background: var(--color-dark-card);
  color: rgba(255, 255, 255, .82);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .35);
}
.offer-card:hover::before {
  background: rgba(229, 169, 60, .14);
  border-color: rgba(229, 169, 60, .3);
}

.offer-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(229, 169, 60, .15);
  color: var(--color-primary-dark);
  transition: background-color .35s var(--ease-out-quart), color .35s var(--ease-out-quart), transform .35s var(--ease-out-quart);
}
.offer-card:hover .offer-card-icon {
  background: var(--color-primary);
  color: var(--color-neutral-900);
  transform: scale(1.06);
}

.offer-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: inherit;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.offer-card-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  margin: 0;
  transition: color .35s var(--ease-out-quart);
}
.offer-card:hover .offer-card-desc { color: rgba(255, 255, 255, .72); }

/* Subtle stagger entrance — cascades by index */
.offer-card.reveal { transition-delay: calc(var(--i, 0) * 50ms); }

/* ============================================================
   Ihr Nutzen — bullet list + honeycomb
   ============================================================ */
.nutzen {
  background: var(--color-neutral-50);
  position: relative;
  overflow: hidden;
}
/* Subtle honeycomb watermark */
.nutzen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(249,178,51,.06) 0, transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(249,178,51,.05) 0, transparent 32%);
  pointer-events: none;
  z-index: var(--z-base);
}
.nutzen .container-main { position: relative; z-index: var(--z-content); }
.nutzen-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
@media (min-width: 1024px) {
  .nutzen-grid { grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; }
}

.nutzen-text .eyebrow { color: var(--color-signal-strong); margin-bottom: 14px; }
.nutzen-text h2 { color: var(--color-neutral-900); }

.nutzen-list {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}
.nutzen-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 20, 20, .06);
}
.nutzen-item:last-child { border-bottom: 0; }
.nutzen-marker {
  display: block;
  width: 8px; height: 8px;
  background: var(--color-signal);
  margin-top: 9px;
}
.nutzen-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 4px;
  line-height: 1.4;
}
.nutzen-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-700);
}
.nutzen-link {
  display: inline-flex;
  margin-top: 28px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nutzen-link:hover { color: var(--color-primary); }

/* Honeycomb */
.nutzen-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.honeycomb {
  --s: 1;
  position: relative;
  width:  calc(434px * var(--s));
  height: calc(280px * var(--s));
  max-width: 100%;
  filter: drop-shadow(0 12px 32px rgba(217, 145, 30, .18));
}
@media (min-width: 768px)  { .honeycomb { --s: 1.15; } }
@media (min-width: 1024px) { .honeycomb { --s: 1.32; } }
@media (min-width: 1280px) { .honeycomb { --s: 1.5;  } }
@media (max-width: 520px)  { .honeycomb { --s: .82;  } }

.honey-hex {
  position: absolute;
  left: calc(var(--x) * 1px * var(--s));
  top:  calc(var(--y) * 1px * var(--s));
  width:  calc(100px * var(--s));
  height: calc(115px * var(--s));
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, #FBC65A 0%, #F5A623 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(12px * var(--s)) calc(10px * var(--s));
  font-size: calc(11px * var(--s));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #2A2014;
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.honey-hex span { display: block; }
.honey-hex {
  /* Stagger-reveal — delay scales by index via custom prop set in PHP */
  animation: honey-rise .9s var(--ease-out-expo) backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}
.honey-hex:hover { transform: scale(1.06); z-index: var(--z-overlay); filter: brightness(1.05); }

/* Subtle idle float — alternating phase per row for natural feel */
.honey-hex { animation: honey-rise .9s var(--ease-out-expo) backwards, honey-float 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms + 200ms), calc(var(--i, 0) * 80ms + 1.2s); }

@keyframes honey-rise {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);  }
}
@keyframes honey-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.honey-hex--star { animation-duration: .9s, 6.4s; }
@media (prefers-reduced-motion: reduce) {
  .honey-hex { animation: none; }
}
.honey-hex--star {
  background: linear-gradient(160deg, #F5A623 0%, #D4881A 100%);
  color: #1B1207;
  font-weight: 700;
  font-size: calc(12.5px * var(--s));
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

/* ============================================================
   Process — Horizontal Timeline (replaces 5 cards)
   ============================================================ */
.process { background: var(--color-neutral-50); position: relative; overflow: hidden; }
.process-inner { position: relative; z-index: var(--z-content); }
.process-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-12); }

.timeline {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  padding: 0;
  margin: 0;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .timeline {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-5);
    padding-top: var(--space-7);
    position: relative;
  }
  /* Connecting line behind the dots */
  .timeline::before {
    content: '';
    position: absolute;
    top: calc(var(--space-7) + 23px);
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-primary) 8%,
      var(--color-primary) 92%,
      transparent
    );
    opacity: .35;
    z-index: var(--z-base);
  }
}

.timeline-step {
  position: relative;
  text-align: center;
  z-index: var(--z-content);
}
@media (max-width: 767px) {
  .timeline-step { text-align: left; padding-left: var(--space-9); }
}

.timeline-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-signal);
  color: var(--color-signal-strong);
  font-family: 'Geist', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-5);
  transition: transform .3s var(--ease-out-quart), background .3s var(--ease-out-quart);
}
.timeline-num::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--color-signal);
  opacity: 0;
  animation: timeline-pulse 2.6s var(--ease-out-quart) infinite;
}
.timeline-step:nth-child(2) .timeline-num::after { animation-delay: .5s; }
.timeline-step:nth-child(3) .timeline-num::after { animation-delay: 1s; }
.timeline-step:nth-child(4) .timeline-num::after { animation-delay: 1.5s; }
.timeline-step:nth-child(5) .timeline-num::after { animation-delay: 2s; }
@keyframes timeline-pulse {
  0%   { opacity: .55; transform: scale(.95); }
  70%  { opacity: 0;   transform: scale(1.45); }
  100% { opacity: 0;   transform: scale(1.45); }
}
@media (prefers-reduced-motion: reduce) {
  .timeline-num::after { animation: none; opacity: 0; }
}
.timeline-step:hover .timeline-num {
  background: var(--color-signal);
  color: #fff;
  transform: scale(1.06);
}
@media (max-width: 767px) {
  .timeline-num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
}

.timeline-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}
.timeline-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-700);
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .timeline-desc { max-width: 50ch; margin-left: 0; margin-right: 0; }
}

/* ============================================================
   Testimonials — 3-up grid with photos (matches her original site)
   ============================================================ */
.tm {
  background: var(--color-neutral-50);
  position: relative;
  overflow: hidden;
}
.tm-heading {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 auto 72px;
  max-width: 920px;
  color: var(--color-neutral-900);
  word-break: keep-all;
  hyphens: none;
}
/* Carousel rail (horizontal, scroll-snap) */
.tm-rail-wrap {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 8px;
}
.tm-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 12px 4px 28px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.tm-rail::-webkit-scrollbar { display: none; }
@media (min-width: 768px)  { .tm-rail { grid-auto-columns: calc((100% - 24px) / 2);  gap: 24px; } }
@media (min-width: 1100px) { .tm-rail { grid-auto-columns: calc((100% - 64px) / 3); gap: 32px; } }

.tm-card {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  scroll-snap-align: start;
  padding: var(--space-7) var(--space-6) var(--space-7);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(20, 20, 20, .04);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s var(--ease-out-quart), box-shadow .35s var(--ease-out-quart);
}
.tm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -12px rgba(120, 80, 30, .15);
}

/* Arrows */
.tm-arrow {
  position: absolute; top: 80px;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(254, 253, 251, .85);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(20, 20, 20, .08);
  box-shadow: 0 8px 24px -8px rgba(15, 15, 15, .14);
  color: var(--color-neutral-900);
  cursor: pointer;
  z-index: 5;
  transition: transform .25s var(--ease), background .25s var(--ease), opacity .25s var(--ease);
}
.tm-arrow:hover { background: var(--color-primary); transform: scale(1.05); }
.tm-arrow:disabled { opacity: 0; pointer-events: none; }
.tm-arrow--prev { left: -8px; }
.tm-arrow--next { right: -8px; }
@media (min-width: 1100px) {
  .tm-arrow { top: 100px; width: 52px; height: 52px; }
  .tm-arrow--prev { left: -28px; }
  .tm-arrow--next { right: -28px; }
}

/* Dots — 44×44 hit area, visible dot via inner pseudo */
.tm-dots {
  display: flex; justify-content: center; gap: 0;
  margin-top: var(--space-6);
}
.tm-dots button {
  position: relative;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.tm-dots button::before {
  content: '';
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(20, 20, 20, .18);
  transition: background .25s var(--ease), width .25s var(--ease), border-radius .25s var(--ease);
}
.tm-dots button.is-active::before {
  background: var(--color-signal);
  width: 24px;
  border-radius: 4px;
}
.tm-dots button:hover::before { background: var(--color-signal-strong); }
.tm-dots button.is-active:hover::before { background: var(--color-signal); }
.tm-photo {
  width: 120px; height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-5);
  filter: grayscale(100%);
  transition: filter .4s var(--ease-out-quart), transform .4s var(--ease-out-quart);
  box-shadow: var(--shadow-md);
}
.tm-card:hover .tm-photo { filter: grayscale(0); transform: scale(1.03); }
.tm-photo img { width: 100%; height: 100%; object-fit: cover; }

.tm-name {
  font-family: 'Inter', sans-serif;
  font-size: 19px; font-weight: 700;
  color: var(--color-neutral-900);
  margin-bottom: 8px;
}
.tm-role {
  font-style: italic;
  font-size: 14px;
  color: var(--color-neutral-700);
  line-height: 1.4;
  margin-bottom: 4px;
}
.tm-company {
  font-style: italic;
  font-size: 14px;
  color: var(--color-neutral-700);
  margin-bottom: 22px;
}
.tm-quote {
  font-style: italic;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-700);
  max-width: 340px;
  margin: 0 auto;
}
.tm-quote::before { content: '„'; }
.tm-quote::after { content: '"'; }


/* ============================================================
   Case Study Teaser
   ============================================================ */
.cs-teaser-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  max-width: 1080px; margin: 0 auto;
}
@media (min-width: 768px) { .cs-teaser-grid { grid-template-columns: repeat(3, 1fr); } }
.cs-card {
  position: relative;
  background: var(--color-surface);
  border-radius: 22px;      /* inner core */
  padding: var(--space-7);
  margin: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 1px rgba(20, 20, 20, .04);
  transition:
    transform .4s var(--ease-out-quart),
    box-shadow .4s var(--ease-out-quart),
    background-color .4s var(--ease-out-quart),
    color .4s var(--ease-out-quart);
  display: flex; flex-direction: column;
  color: var(--color-neutral-900);
}
.cs-card::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 28px;
  background: color-mix(in srgb, var(--color-signal) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-signal) 18%, transparent);
  pointer-events: none;
  z-index: -1;
  transition: background-color .4s var(--ease-out-quart), border-color .4s var(--ease-out-quart);
}
.cs-card:hover::before {
  background: color-mix(in srgb, var(--color-signal) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-signal) 35%, transparent);
}
.cs-card:hover {
  background: var(--color-dark-card);
  color: rgba(255, 255, 255, .82);
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .35);
}
.cs-card-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-signal-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
  transition: background-color .4s var(--ease-out-quart);
}
.cs-card:hover .cs-card-icon { background: color-mix(in srgb, var(--color-signal) 22%, transparent); }
.cs-card h3 {
  font-family: var(--font-display);
  font-size: 22px; line-height: 1.25;
  margin-bottom: var(--space-4);
  transition: color .4s var(--ease-out-quart);
}
.cs-card:hover h3 { color: #FFFFFF; }
.cs-card p {
  font-size: 14px;
  color: var(--color-neutral-700);
  line-height: 1.6;
  flex: 1;
  transition: color .4s var(--ease-out-quart);
}
.cs-card:hover p { color: rgba(255, 255, 255, .74); }
.cs-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); }
.cs-tag {
  font-size: 11px; font-weight: 500;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--color-signal) 16%, transparent);
  color: var(--color-signal-strong);
  border-radius: 999px;
  transition: background-color .4s var(--ease-out-quart), color .4s var(--ease-out-quart);
}
.cs-card:hover .cs-tag { background: color-mix(in srgb, var(--color-signal) 24%, transparent); color: var(--color-signal); }

/* ============================================================
   Credentials
   ============================================================ */
.creds {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .creds { grid-template-columns: repeat(3, 1fr); } }
.cred {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  background: var(--color-neutral-50);
  border-radius: 14px;
  transition: transform .3s var(--ease);
}
.cred:hover { transform: translateY(-2px); }
.cred-logo {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.cred-logo img { width: 60%; height: 60%; object-fit: contain; }
.cred-name { font-size: 15px; font-weight: 600; color: var(--color-neutral-900); margin-bottom: 4px; }
.cred-desc { font-size: 13px; color: var(--color-neutral-700); line-height: 1.5; }

/* ============================================================
   CTA Section
   ============================================================ */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
/* Tile-able hex pattern */
.cta::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23ffffff' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 72px 84px;
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}
/* Large statement hex outlines as corner decoration */
.cta::after {
  content: '';
  position: absolute;
  top: -40px; right: -60px;
  width: 280px; height: 322px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 115' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,2 96,28 96,87 50,113 4,87 4,28' fill='none' stroke='%23ffffff' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .14;
  pointer-events: none;
  transform: rotate(12deg);
  z-index: 0;
}
.cta-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}
.cta h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.cta p {
  color: rgba(26,26,26,.78);
  max-width: 560px;
  margin: 0 auto var(--space-8);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}
.cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ============================================================
   Page Hero (subpages)
   ============================================================ */
.page-hero {
  position: relative;
  padding-top: 132px; padding-bottom: 64px;
}
@media (min-width: 1024px) { .page-hero { padding-top: 160px; } }
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(249,178,51,.12), transparent);
  pointer-events: none;
}
.page-hero > * { position: relative; }

/* ============================================================
   Service Detail
   ============================================================ */
.service-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-primary-dark);
  margin-bottom: 24px;
  transition: opacity .2s var(--ease);
}
.service-back:hover { opacity: .7; }

.problem-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 960px;
}
@media (min-width: 768px) { .problem-grid { grid-template-columns: repeat(2, 1fr); } }
.problem-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px;
  background: var(--color-neutral-50);
  border-radius: 12px;
}
.problem-bullet {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(249,178,51,.2);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.problem-item p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

.formats-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 600px) { .formats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .formats-grid { grid-template-columns: repeat(4, 1fr); } }
.format-item {
  padding: 20px;
  background: var(--color-neutral-50);
  border-radius: 12px;
  font-size: 15px; color: var(--color-neutral-700);
}

/* ============================================================
   Schwarmwissen / Network
   ============================================================ */
.network-intro { max-width: 760px; }
.network-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .network-grid { grid-template-columns: repeat(2, 1fr); } }
.network-card {
  background: var(--color-neutral-50);
  border-radius: 18px;
  padding: 32px;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.network-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.network-card-head {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-neutral-200);
}
.network-card-bee {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.network-card h2 {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2;
  color: var(--color-neutral-900);
}
.network-card-company { font-size: 13px; color: var(--color-primary-dark); margin-top: 4px; }
.network-card-text { font-size: 15px; line-height: 1.7; color: var(--color-neutral-700); flex: 1; }
.network-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px;
  font-size: 13px; font-weight: 600;
  color: var(--color-primary-dark);
  transition: gap .3s var(--ease);
}
.network-card-link:hover { gap: 10px; }

/* ============================================================
   About / Über mich
   ============================================================ */
.about-hero-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 1024px) { .about-hero-grid { grid-template-columns: 1fr 1fr; } }
.about-photo {
  position: relative;
  width: 100%; max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about-photo-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 24px;
  background: linear-gradient(180deg, transparent, rgba(26,26,26,.55));
  color: #fff;
  font-size: 14px; font-weight: 500;
}

.about-intro p { margin-bottom: 16px; }

.values {
  background: var(--color-neutral-50);
}
.values-claim {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 48px);
  color: var(--color-neutral-900);
  line-height: 1.15;
  margin-bottom: 56px;
}
.values-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card {
  background: var(--color-bg);
  border-radius: 16px;
  padding: 32px;
  border-top: 4px solid var(--color-primary);
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: 26px; line-height: 1.2;
  color: var(--color-primary-dark);
  margin-bottom: 14px;
}
.value-card p { font-size: 15px; color: var(--color-neutral-700); line-height: 1.65; }

.strengths-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px) { .strengths-grid { grid-template-columns: repeat(2, 1fr); } }
.strength-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 22px;
  background: var(--color-neutral-50);
  border-radius: 12px;
}
.strength-bullet {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.strength-item p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-900); }

.vita-list { max-width: 760px; }
.vita-item {
  display: flex; gap: 24px; padding: 0;
  margin-bottom: 32px;
}
.vita-bar {
  flex-shrink: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 2px;
}
.vita-period {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-primary-dark);
  margin-bottom: 6px;
}
.vita-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: 6px;
}
.vita-text { font-size: 15px; color: var(--color-neutral-700); line-height: 1.6; }

/* ============================================================
   Kontakt
   ============================================================ */
.kontakt-grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 64px);
}
@media (min-width: 1024px) { .kontakt-grid { grid-template-columns: 1.2fr .8fr; } }

.kontakt-photo {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-md);
}
.kontakt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  font-size: 14px; font-weight: 500;
  color: var(--color-neutral-900);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  color: var(--color-neutral-900);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  background: #fff;
}
/* Formularfelder: klarer dunkler Outline-Ring, aber ohne den schweren Gold-Halo
   (User-Entscheidung). Bei Text-Inputs matcht :focus-visible Maus UND Tastatur. */
.form-field input:focus-visible,
.form-field textarea:focus-visible {
  box-shadow: none;
}
.form-field textarea { resize: vertical; min-height: 140px; }

/* DSGVO-Checkbox: Checkbox + Label inline, ohne die 100%-Breite/Padding der
   Text-Inputs zu erben (sonst reißt es Häkchen und Text auseinander). */
.form-check label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; font-weight: 400; line-height: 1.5;
  margin-bottom: 0; cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: auto; flex: 0 0 auto;
  margin: 2px 0 0; padding: 0; min-height: 0;
  accent-color: var(--color-primary);
}
.form-check a { text-decoration: underline; }

.contact-block { margin-bottom: 28px; }
.contact-block h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 600;
  margin-bottom: 14px;
  color: var(--color-neutral-900);
}
.contact-block p { font-size: 15px; color: var(--color-neutral-700); line-height: 1.6; margin-bottom: 6px; }
.contact-block a { transition: color .2s var(--ease); }
.contact-block a:hover { color: var(--color-primary-dark); }

.kontakt-card {
  background: var(--color-primary-light);
  border-radius: 14px;
  padding: 24px;
}
.kontakt-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px; font-weight: 600;
  margin-bottom: 8px;
}
.kontakt-card p { font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); }

.success {
  background: var(--color-primary-light);
  padding: 40px;
  border-radius: 18px;
  text-align: center;
}
.success-bee { font-size: 48px; margin-bottom: 16px; }
.success h2 { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 600; margin-bottom: 12px; }

/* ============================================================
   Fallbeispiele list
   ============================================================ */
.cases-list { max-width: 1000px; display: flex; flex-direction: column; gap: 24px; }
.case-article {
  background: var(--color-neutral-50);
  border-radius: 18px;
  padding: 32px;
}
@media (min-width: 768px) { .case-article { padding: 48px; } }
.case-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 16px; }
.case-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.case-tag {
  font-size: 12px; font-weight: 500;
  padding: 4px 12px;
  background: rgba(249,178,51,.15);
  color: var(--color-primary-dark);
  border-radius: 999px;
}
.case-article h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.2; margin-bottom: 28px;
}
.case-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  margin-top: var(--space-12);  /* 96px — overrides global `.text-h2 { margin-bottom: 0 }` */
}
/* Specificity-bump: .case-detail-block .about-h2 also gets explicit bottom-spacing
   so the override of the global `.text-h2 { margin-bottom: 0 }` happens at heading level too. */
.case-detail-block .about-h2 { margin-bottom: var(--space-10); }

/* Stock photo block on /leistungen/* subpages — sits between „Mein Ansatz" and „Formate". */
.service-stock-section {
  padding: 0 0 var(--space-9);
  background: var(--color-bg-alt);
}
.service-stock-figure {
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow:
    0 32px 60px -24px rgba(31, 27, 23, .22),
    0 0 0 1px rgba(31, 27, 23, .06);
  transform: translateY(-40px);
}
.service-stock-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease-out-quart);
}
.service-stock-figure:hover img { transform: scale(1.03); }
@media (max-width: 768px) {
  .service-stock-figure { border-radius: 20px; transform: translateY(-24px); }
}
@media (min-width: 768px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-col h3 {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.case-col p { font-size: 15px; line-height: 1.6; color: var(--color-neutral-700); }

/* ============================================================
   Footer — warm cream + hex watermark + geist typography
   ============================================================ */
.footer {
  background: var(--color-neutral-100);
  color: var(--color-neutral-900);
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  margin-top: var(--space-9);
  position: relative;
  overflow: hidden;
  font-family: 'Geist', 'Inter', sans-serif;
}
.footer::before {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='70' viewBox='0 0 60 70' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23E5A93C' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 72px 84px;
  opacity: .07;
  pointer-events: none;
}
.footer::after {
  /* Large statement hex outline as decoration */
  content: '';
  position: absolute;
  bottom: -120px;
  right: -80px;
  width: 320px; height: 368px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 115' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50,2 96,28 96,87 50,113 4,87 4,28' fill='none' stroke='%23E5A93C' stroke-width='1.3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .12;
  pointer-events: none;
  transform: rotate(8deg);
}

.footer-inner {
  padding-top: var(--space-12);
  padding-bottom: var(--space-7);
  /* horizontal padding inherits from .container-main → clamp(20px, 5vw, 64px) */
  position: relative;
  z-index: var(--z-content);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-9);
  margin-bottom: var(--space-11);
}
@media (min-width: 768px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-8); } }

.footer-brand img { height: 36px; margin-bottom: var(--space-5); }
.footer-brand p {
  font-size: 14px;
  color: var(--color-neutral-700);
  line-height: 1.7;
  max-width: 320px;
}
.footer-claim {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--color-primary-dark);
  margin-top: var(--space-4);
}

.footer-social {
  display: flex; gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(229, 169, 60, .15);
  border: 1px solid rgba(229, 169, 60, .22);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-primary-dark);
  transition: background .3s var(--ease-out-quart),
              transform .3s var(--ease-out-quart),
              border-color .3s var(--ease-out-quart),
              color .3s var(--ease-out-quart);
}
.footer-social a:hover {
  background: var(--color-dark-card);
  border-color: var(--color-dark-card);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.footer h4 {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-5);
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); padding: 0; }
.footer ul a {
  font-size: 14px;
  color: var(--color-neutral-700);
  transition: color .25s var(--ease-out-quart);
  line-height: 1.5;
}
.footer ul a:hover { color: var(--color-primary-dark); }
.footer ul li.contact-line {
  font-size: 14px; color: var(--color-neutral-700);
  display: flex; align-items: flex-start; gap: var(--space-3);
  line-height: 1.5;
}
.footer ul li.contact-line svg {
  flex-shrink: 0;
  color: var(--color-primary-dark);
  margin-top: 3px;
}

.footer-bottom {
  padding-top: var(--space-6);
  border-top: 1px solid rgba(184, 133, 29, .14);
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: var(--space-3);
}
.footer-bottom p {
  font-size: 12px;
  color: var(--color-neutral-700);
  opacity: .7;
}
.footer-bottom .footer-legal a {
  font-size: 12px;
  color: var(--color-neutral-700);
  margin-left: var(--space-5);
  transition: color .25s var(--ease-out-quart);
  opacity: .8;
}
.footer-bottom .footer-legal a:first-of-type { margin-left: 0; }
.footer-bottom .footer-legal a:hover { color: var(--color-primary-dark); opacity: 1; }

/* ============================================================
   Reveal animations (CSS-only, IntersectionObserver-driven)
   Content stays visible — only a subtle slide-in for elements
   that enter the viewport. Always readable as a fallback.
   ============================================================ */
.reveal { transition: transform .7s var(--ease-out-quart), opacity .7s var(--ease-out-quart); }
.js .reveal:not(.is-visible) { transform: translateY(20px); opacity: .8; }

/* Stronger cinematic reveal on section-headers + service/cs cards (with blur resolution) */
.services-header.reveal,
.pain-header.reveal,
.process-header.reveal,
.cs-header.reveal,
.creds-header.reveal,
.nutzen-text.reveal,
.tm-heading.reveal {
  transition: transform .9s var(--ease-out-quart), opacity .9s var(--ease-out-quart), filter .9s var(--ease-out-quart);
}
.js .services-header.reveal:not(.is-visible),
.js .pain-header.reveal:not(.is-visible),
.js .process-header.reveal:not(.is-visible),
.js .cs-header.reveal:not(.is-visible),
.js .creds-header.reveal:not(.is-visible),
.js .nutzen-text.reveal:not(.is-visible),
.js .tm-heading.reveal:not(.is-visible) {
  filter: blur(8px);
  opacity: 0;
  transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-visible) { transform: none; opacity: 1; filter: none; }
  .js .reveal { transition: none; }
}

/* ============================================================
   Legal pages
   ============================================================ */
.legal {
  max-width: 820px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-neutral-700);
}
.legal h2 {
  font-family: var(--font-display);
  font-size: 26px;
  margin: 36px 0 16px;
  color: var(--color-neutral-900);
}
.legal h3 {
  font-family: 'Inter', sans-serif;
  font-size: 17px; font-weight: 600;
  margin: 24px 0 8px;
  color: var(--color-neutral-900);
}
.legal p, .legal ul { margin-bottom: 14px; }
.legal ul { padding-left: 22px; }
.legal a { color: var(--color-primary-dark); text-decoration: underline; }

/* ============================================================
   Misc utility
   ============================================================ */
.hidden-md { display: none; }
@media (min-width: 768px) { .hidden-md { display: initial; } }
.bg-cream { background: var(--color-neutral-50); }
.bg-white { background: var(--color-bg); }

/* ============================================================
   404 Error page
   ============================================================ */
.error-page {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 160px 0 var(--space-12);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(229, 169, 60, .14), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(184, 133, 29, .10), transparent 56%),
    var(--color-bg);
}
.error-deco { position: absolute; inset: 0; pointer-events: none; }
.error-deco .error-hex {
  position: absolute;
  color: var(--color-primary);
}
.error-hex--lg { top: 8%;   right: -60px; width: 240px; height: 276px; opacity: .14; transform: rotate(8deg); }
.error-hex--md { bottom: 12%; left: -40px; width: 180px; height: 207px; opacity: .10; transform: rotate(-6deg); }
.error-hex--sm { top: 56%;  right: 18%;   width:  90px; height: 104px; opacity: .08; transform: rotate(-12deg); }

.error-inner {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
}
.error-inner .text-display {
  font-size: clamp(40px, 6vw, 76px);
  margin-top: var(--space-5);
  text-wrap: balance;
}
.error-inner .text-lead {
  margin: var(--space-6) auto 0;
  max-width: 56ch;
}
.error-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-9);
}
.error-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-10);
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(184, 133, 29, .14);
}
.error-links a {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-700);
  letter-spacing: -0.005em;
  transition: color .25s var(--ease-out-quart);
}
.error-links a:hover { color: var(--color-primary-dark); }

/* ============================================================
   Reduced-motion safety net — neutralizes any animation that
   wasn't explicitly handled. Per-component rules above still
   apply (more specific). Last-resort guard for accessibility.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   V2-Feedback (GO, 26.05.) — Wärme & Lesbarkeit
   ============================================================ */

/* Illustrations-Heroes (Kontakt + Leistungs-Detailseiten): heller, warmer
   Hintergrund → dunkler Text statt weiß (Feedback „zu düster"). */
.hero--illustrated { color: var(--color-neutral-900); }
.hero--illustrated h1 {
  color: var(--color-neutral-900);
  text-shadow: none;
}
.hero--illustrated .hero-subline {
  color: var(--color-neutral-700);
  text-shadow: none;
}
.hero--illustrated .eyebrow {
  color: var(--color-primary-dark);
  text-shadow: none;
}
/* Sekundär-Button auf hellem Hero: dunkle Outline statt Glas-auf-Dunkel */
.hero--illustrated .btn-secondary {
  background: transparent;
  color: var(--color-neutral-900);
  border-color: rgba(26,26,26,.28);
  backdrop-filter: none;
}
.hero--illustrated .btn-secondary:hover {
  background: rgba(26,26,26,.04);
  border-color: var(--color-neutral-900);
}

/* Werte-Kacheln wirkten „etwas kühl" → Icon in weicher Honey-Kachel */
.value-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--color-primary-light);
  margin-bottom: 18px;
}

/* Netzwerk-Karten nutzen jetzt h3 (vormals h2) — gleiche Typo behalten */
.network-card h3 {
  font-family: var(--font-display);
  font-size: 24px; line-height: 1.2;
  color: var(--color-neutral-900);
}

/* Seiten mit hellem Illustrations-Hero: Nav von Anfang an dunkel/lesbar
   (sonst weißes Logo + weiße Links unsichtbar auf hellem Grund). */
body.light-hero .nav {
  background-color: rgba(254, 251, 245, .82);
  border-color: rgba(20, 20, 20, .08);
  box-shadow:
    0 16px 40px -12px rgba(15, 15, 15, .18),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
body.light-hero .nav:not(.is-scrolled):not(.is-open) .nav-link {
  color: var(--color-neutral-700);
  text-shadow: none;
}
body.light-hero .nav:not(.is-scrolled):not(.is-open) .nav-link:hover,
body.light-hero .nav:not(.is-scrolled):not(.is-open) .nav-link.is-active {
  color: var(--color-primary-dark);
}
body.light-hero .nav:not(.is-scrolled):not(.is-open) .nav-toggle span {
  background: var(--color-neutral-900);
  box-shadow: none;
}
body.light-hero .nav:not(.is-scrolled):not(.is-open) .nav-logo img {
  filter: none;
}
/* Light-Hero: Nav ist von Anfang an hell -> Umschalter dunkel halten (nicht weiss). */
body.light-hero .nav:not(.is-scrolled):not(.is-open) .lang-switch-link {
  color: var(--color-neutral-700); opacity: .6; text-shadow: none;
}
body.light-hero .nav:not(.is-scrolled):not(.is-open) .lang-switch-link.is-active {
  color: var(--color-primary-dark); opacity: 1;
}

/* Rotierende Hero-Botschaft (pro Slide eine Aussage) — gestapelt, Cross-Fade */
.hero-messages {
  position: relative;
  min-height: 3.4em;
  max-width: 580px;
  margin-bottom: 40px;
}
.hero-content--center .hero-messages { margin-left: auto; margin-right: auto; }
.hero-content--right .hero-messages { margin-left: auto; }
.hero-message {
  position: absolute;
  inset: 0;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s var(--ease-out-quart), transform .7s var(--ease-out-quart);
}
.hero-message.is-active {
  opacity: 1;
  transform: none;
}
@media (max-width: 768px) { .hero-messages { min-height: 4.2em; } }

/* Rotierende Hero-Headline (wechselt synchron mit Bild + Absatz) — nur transform/opacity (GPU) */
.hero-rota { position: relative; }
.hero-rota--headline { margin-bottom: var(--space-7); }
.hero .hero-rota-item {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
  max-width: 18ch;
  text-wrap: balance;
  transition: opacity .8s var(--ease-out-quart), transform .8s var(--ease-out-quart);
  will-change: opacity, transform;
}
@media (min-width: 1024px) { .hero .hero-rota-item { line-height: 1.02; } }
.hero-content--right .hero-rota-item { margin-left: auto; }
.hero-content--center .hero-rota-item { margin-left: auto; margin-right: auto; }
/* erstes Item bleibt im Fluss und gibt die Höhe vor (längste Headline); Rest liegt absolut darüber */
.hero-rota--headline > .hero-rota-item:first-child { position: relative; }
.hero-rota--headline > .hero-rota-item:not(:first-child) { position: absolute; top: 0; left: 0; right: 0; }
.hero-content--left .hero-rota--headline > .hero-rota-item:not(:first-child) { right: auto; }
.hero-rota-item:not(.is-active) { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hero-rota-item.is-active { opacity: 1; transform: none; }

/* Buchungs-Block (2. Kontaktweg neben dem Formular) */
.booking-block { margin-top: 20px; }
.booking-block .btn { margin-top: 14px; }

/* ============================================================
   REV02 (Feedback Gerlinde, 28.06.2026)
   ============================================================ */

/* Werte-Claim „Kreativität. Wirksamkeit. Verbindung." einzeilig am Desktop */
.values .about-block { max-width: none; }
@media (min-width: 900px) {
  .values-claim { white-space: nowrap; }
}

/* Über-mich-Hero: Bild tiefer setzen, damit die Nav nicht über dem Kopf liegt */
.page-about .hero-bg-slide img { object-position: center top; }

/* REV03 P3: „Gerlinde Oberndorfer." mobil einzeilig (bricht sonst auf 2 Zeilen /
   läuft über). Skaliert mit dem Viewport, damit es 320–767px immer in eine Zeile passt. */
@media (max-width: 767px) {
  .page-about .hero h1 {
    white-space: nowrap;
    max-width: none;
    /* 8vw hält „Gerlinde Oberndorfer." auch mit dem breiteren Georgia-Fallback
       (font-display:swap) in einer Zeile ohne horizontalen Überlauf. */
    font-size: clamp(24px, 8vw, 40px);
  }
}

/* ---------- Globaler Tastatur-Fokus-Ring (WCAG 2.4.7) ---------- */
/* Doppel-Ring: dunkler Kern + goldene Halo -> sichtbar auf hell UND dunkel. */
:focus-visible {
  outline: 2px solid var(--color-neutral-900);
  outline-offset: 2px;
  /* Achtung: box-shadow ist nicht additiv — dieser Halo ERSETZT bei Tastatur-Fokus
     einen etwaigen eigenen box-shadow des Elements. Im Bestand unkritisch (interaktive
     Schatten liegen nur auf :hover); bei neuen fokussierbaren Komponenten mit Ruhe-Schatten
     ggf. den Fokus-Schatten kombinieren. */
  box-shadow: 0 0 0 4px var(--color-primary);
}
/* Maus-/Programm-Fokus ohne Tastatur bekommt keinen Ring (nur :focus-visible). */
:focus:not(:focus-visible) { outline: none; }

/* ---------- Cookie-Hinweis (Info-Box, kein Tracking) ---------- */
.cookie-notice {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9999;
  max-width: 720px; margin: 0 auto;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
  color: var(--color-neutral-900);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.cookie-notice[hidden] { display: none; } /* Attribut muss echt verstecken — .cookie-notice{display:flex} überschreibt sonst das UA-[hidden]{display:none} */
.cookie-notice.is-open { opacity: 1; transform: translateY(0); }
.cookie-notice p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-700); flex: 1 1 320px; }
.cookie-notice a { color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice__buttons { flex: 0 0 auto; }
/* Info-Box-Button hat kein Pfeil-Icon → Bees asymmetrisches .btn-Padding (28px links) zentrieren */
.cookie-notice__buttons .btn { justify-content: center; padding-left: 24px; padding-right: 24px; }
@media (max-width: 560px) {
  .cookie-notice { flex-direction: column; align-items: stretch; }
  .cookie-notice__buttons .btn { width: 100%; }
}

/* ---------- Footer-Backlink (optionale Agentur-Attribution) ---------- */
.footer-backlink { margin: var(--space-4) 0 0; text-align: center; font-size: 12px; color: var(--color-neutral-400); }
.footer-backlink a { color: var(--color-neutral-400); text-decoration: none; }
.footer-backlink a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ---- Sprachumschalter (DE | EN) ---- */
.lang-switch { display: inline-flex; align-items: center; gap: .25rem; margin-left: .75rem; }
.lang-switch-link {
  font-size: .8rem; font-weight: 600; letter-spacing: .03em; text-decoration: none;
  color: var(--color-ink, #2a2320); opacity: .55; padding: .15rem .35rem; border-radius: 4px;
  transition: opacity .15s ease, color .15s ease;
}
.lang-switch-link:hover { opacity: .85; }
.lang-switch-link.is-active { opacity: 1; color: var(--color-primary, #E5A93C); cursor: default; }
.lang-switch--mobile { margin: 1rem 0 0; gap: .5rem; }
.lang-switch--mobile .lang-switch-link { font-size: 1rem; padding: .3rem .5rem; opacity: .72; }
/* Im hellen Menue-Panel besser lesbar: kraeftigeres Gold fuer aktiv, dunkler fuer inaktiv. */
.lang-switch--mobile .lang-switch-link.is-active { color: var(--color-primary-dark, #B8851D); opacity: 1; }