/* ============================================================
   Dr. Koch & Kollegen — Design System
   Apple-inspired minimalism. Green is reserved for the logo mark only.
   ============================================================ */

@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root,
[data-theme="light"] {
  /* Surfaces — warm, wood/beige waiting-room palette */
  --color-bg: #fefcf8;
  --color-surface: #f8f4eb;
  --color-surface-2: #fffefc;
  --color-surface-offset: #f3ecdd;
  --color-divider: #e1d3b8;
  --color-border: #d1bf9c;

  /* Text */
  --color-text: #2e2a22;
  --color-text-muted: #756652;
  --color-text-faint: #a5966f;
  --color-text-inverse: #f8f3ea;

  /* Primary accent — warm near-black, Apple pill-button style (NOT green) */
  --color-primary: #2e2a22;
  --color-primary-hover: #17140f;
  --color-primary-active: #17140f;
  --color-text-inverse-on-primary: #ffffff;

  /* Secondary accent — muted sage green (darkened for AA text contrast on light bg) */
  --color-link: #207936;
  --color-link-hover: #185c29;

  /* Logo green — brand mark + link accent share this hue family, warmed toward sage */
  --color-brand-green: #34c759;

  /* Logo-Grün: nur für das Praxislogo, in beiden Modi grün */
  --color-logo-green: #34c759;

  /* CTA button green — deliberately darker than --color-brand-green so white
     button text clears WCAG AA (4.5:1) regardless of color vision. Used only
     for filled button backgrounds (btn-primary, btn-drflex, float-cta), never
     for text/icon accents (those stay on --color-brand-green). */
  --color-cta-green: #34c759;
  --color-cta-green-hover: #2db14f;
  /* Dunkle Schrift auf dem hellen Grün, damit Buttons gut lesbar bleiben */
  --color-cta-text: #0f2e16;

  /* Status */
  --color-success: #1e8a4c;
  --color-error: #b0523d;
  --color-focus: #207936;

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(46, 36, 20, 0.05), 0 1px 1px rgba(46, 36, 20, 0.04);
  --shadow-md: 0 8px 24px rgba(46, 36, 20, 0.10);
  --shadow-lg: 0 20px 60px rgba(46, 36, 20, 0.14);

  /* Plastic/embossed tile bevel — raised-highlight top edge, soft shadow underside only, no full ring (matches approved flag-badge look) */
  --shadow-plastic:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 3px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-plastic-icon:
    inset 0 -2px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --shadow-plastic-inset:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 4px rgba(0, 0, 0, 0.22);

  /* Soft gradients for light surfaces — warm sand tones instead of cool grey */
  --bg-gradient: linear-gradient(180deg, #fffefb 0%, #fbf8f0 100%);
  --surface-gradient: linear-gradient(160deg, #faf7ee 0%, #f6f0e2 100%);
  --card-gradient: linear-gradient(155deg, #fffefc 0%, #f9f4e6 100%);

  color-scheme: light;
}

[data-theme="dark"] {
  /* Charcoal & Bronze: neutrales, dunkles Anthrazit statt Kaffee-/Holzbraun,
     mit warmem Bronze/Gold als durchgängige Akzentfarbe (Vorlage: Referenzbild
     mit Meilenstein-Karten). Text leicht gedimmt statt reinweiß. */
  --color-bg: #1a1918;
  --color-surface: #232120;
  --color-surface-2: #1f1e1c;
  --color-surface-offset: #2a2725;
  --color-divider: #35322f;
  --color-border: #3d3a36;

  --color-text: #f0ece5;
  --color-text-muted: #a8a09c;
  --color-text-faint: #7d766f;
  --color-text-inverse: #232120;

  --color-primary: #f0ece5;
  --color-primary-hover: #ffffff;
  --color-primary-active: #ffffff;
  --color-text-inverse-on-primary: #232120;

  --bg-gradient: var(--color-bg);
  --surface-gradient: var(--color-surface);
  --card-gradient: var(--color-surface-2);

  --color-link: #c9ac86;
  --color-link-hover: #ddc4a3;

  --color-brand-green: #c9ac86;

  /* CTA-Button-Bronze dunkler gehalten als --color-brand-green, damit weißer
     Button-Text zuverlässig über 4.5:1 Kontrast bleibt (WCAG AA), unabhängig
     von Farbsehschwäche. Gilt einheitlich für btn-primary, btn-drflex und
     float-cta (auf Nutzerwunsch: durchgängig Bronze statt separatem Grün). */
  --color-cta-green: #7d6853;
  --color-cta-text: #ffffff;
  --color-logo-green: #30d158;
  --color-cta-green-hover: #695644;

  --color-success: #6fae5e;
  --color-error: #d9776a;
  --color-focus: #c9ac86;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

  --shadow-plastic:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 3px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-plastic-icon:
    inset 0 -2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --shadow-plastic-inset:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.14),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* Kein OS-Media-Query-Override mehr: main.js setzt data-theme beim Laden
   bereits anhand von prefers-color-scheme, und dieser Block hatte höhere
   CSS-Spezifität als [data-theme="dark"] und überschrieb dessen warme
   Wohlfühl-Palette mit hartem Apple-Systemschwarz. Entfernt, damit die
   Wohlfühl-Palette für alle Besucher gilt, unabhängig vom OS-Farbschema. */

/* ---------- Barrierefreie Schwarz/Weiß-Ansicht (Rot-Grün-Sehschwäche) ----------
   Ersetzt alle Grün-/Statusfarben durch neutrale Graustufen und entsättigt
   Fotos/Icons, ohne fixierte Elemente über CSS-Filter zu beeinträchtigen. */
[data-contrast="mono"] {
  --color-link: var(--color-text);
  --color-link-hover: var(--color-text-muted);
  --color-brand-green: var(--color-text);
  --color-focus: var(--color-text);
  --color-success: #3a3a3c;
  --color-error: #1d1d1f;
  /* Neutrales Dunkelgrau statt Grün/Creme als Button-Hintergrund, damit
     weißer Button-Text in beiden Themes lesbar bleibt (behebt: im Dunkel-
     modus wurde --color-brand-green zu --color-text, also fast weiß, und
     der weiße Button-Text darauf war praktisch unsichtbar). */
  --color-cta-green: #3a3a3c;
  --color-cta-text: #ffffff;
  --color-logo-green: var(--color-text);
  --color-cta-green-hover: #2c2c2e;
}
[data-theme="dark"][data-contrast="mono"] {
  --color-success: #d1d1d6;
  --color-error: #f5f5f7;
}
[data-contrast="mono"] img,
[data-contrast="mono"] picture,
[data-contrast="mono"] svg { filter: grayscale(1); }

/* ---------- Type scale ---------- */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --font-body: "General Sans", -apple-system, "Inter", "Segoe UI", sans-serif;
  --max-width: 1200px;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
svg { width: 20px; height: 20px; flex-shrink: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-group .reveal-item {
    opacity: 1 !important;
    transform: none !important;
  }
  img { opacity: 1 !important; }
}

/* Photos fade in the instant they finish decoding, instead of the browser's
   default abrupt pop (which reads as a flicker/glitch on lazy-loaded images).
   JS toggles .is-loaded on load; the (scripting:none) and no-JS paths below
   guarantee images are never left invisible. */
img { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
img.is-loaded, img[data-no-fade] { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  img { transform: none; transition: opacity 0.4s ease; }
}
@media (scripting: none) { img { opacity: 1; transform: none; } }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg-gradient);
  color: var(--color-text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Visible focus states everywhere — WCAG 2.4.7 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  background: var(--color-primary);
  color: var(--color-text-inverse-on-primary);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  font-size: var(--text-sm);
  font-weight: 600;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(var(--space-5), 4vw, var(--space-10));
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-divider);
  transition: border-color 0.3s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  transition: background-color 0.3s ease;
}
.site-header.is-scrolled::before { box-shadow: var(--shadow-sm); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  min-height: 64px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.nav__brand-word { text-transform: uppercase; }
.nav__brand svg { height: 1.45em; width: auto; flex-shrink: 0; }
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.nav__links a {
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-2) 0;
  position: relative;
}
.nav__links a[aria-current="page"] {
  color: var(--color-text);
}
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}
.nav__actions { display: flex; align-items: center; gap: var(--space-3); }

.theme-toggle,
.contrast-toggle {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text);
  flex-shrink: 0;
  box-shadow: var(--shadow-plastic-icon), 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.theme-toggle:hover,
.contrast-toggle:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-plastic-icon), 0 3px 8px rgba(0, 0, 0, 0.12);
}
.theme-toggle svg,
.contrast-toggle svg { width: 18px; height: 18px; }
/* Hell/Dunkel-Umschalter als beschrifteter Button (gut sichtbar):
   im Nachtmodus heller Button "Hell", im hellen Modus dunkler Button "Dunkel". */
.theme-toggle {
  width: auto;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  background: #1d1d1f;
  color: #ffffff;
  border-color: #1d1d1f;
}
.theme-toggle .theme-toggle__to-light { display: none; }
[data-theme="dark"] .theme-toggle {
  background: #f3ede4;
  color: #1d1d1f;
  border-color: #f3ede4;
}
[data-theme="dark"] .theme-toggle .theme-toggle__to-light { display: inline; }
[data-theme="dark"] .theme-toggle .theme-toggle__to-dark { display: none; }
.contrast-toggle[aria-pressed="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-plastic-icon), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn-primary {
  background: var(--color-cta-green);
  color: var(--color-cta-text);
  border-color: transparent;
  box-shadow: var(--shadow-plastic);
}
.btn-primary:hover { background: var(--color-cta-green-hover); color: var(--color-cta-text); }
.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface); color: var(--color-text); }

/* Dr. Flex "Termin online buchen" CTAs: intentionally distinct from the
   site's own black CTA per Dr. Flex's own integration guidance (the booking
   CTA should visually stand out from the rest of the site's design). Uses
   the practice's existing accent green so it still feels on-brand.
   LIVE seit 17.09.2026 – diese Buttons öffnen das echte Dr. Flex
   Buchungsfenster (embed.js + toggleDrFlexAppointments, siehe templates.py). */
.btn-drflex {
  background: var(--color-cta-green);
  color: var(--color-cta-text);
  border-color: transparent;
  box-shadow: var(--shadow-plastic);
}
.btn-drflex:hover { background: var(--color-cta-green-hover); color: var(--color-cta-text); }

.float-cta {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full, 999px);
  background: var(--color-cta-green);
  color: var(--color-cta-text);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
  box-shadow: var(--shadow-plastic), var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.float-cta:hover { background: var(--color-cta-green-hover); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.22); }
.float-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Mobil: gut sichtbare Pille mit Text statt kleinem Symbol, immer unten
   rechts erreichbar (auch über der iPhone-Home-Leiste). */
@media (max-width: 640px) {
  .float-cta {
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), calc(env(safe-area-inset-bottom) + var(--space-2)));
    padding: var(--space-3) var(--space-5);
    min-height: 48px;
    font-size: var(--text-sm);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), var(--shadow-plastic);
  }
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  color: var(--color-text);
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-8) var(--space-6);
    gap: var(--space-5);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    overflow-y: auto;
  }
  .nav__links a { font-size: var(--text-lg); }
  .site-header.nav-open .nav__links {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav__actions .btn-primary, .nav__actions .btn-drflex { display: none; }
  .nav__links a.nav__cta-mobile {
    display: inline-flex;
    color: var(--color-text-inverse-on-primary);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    margin-top: var(--space-3);
    align-self: flex-start;
  }
  .nav__links a.nav__cta-mobile.btn-drflex { color: var(--color-cta-text); }
}
@media (min-width: 861px) {
  .nav__cta-mobile { display: none; }
}

/* Kopfzeile über die volle Breite: "Termin online buchen" oben steht
   rechtsbündig über dem schwebenden Button unten rechts. */
.site-header .nav {
  max-width: none;
  padding-inline: var(--space-5);
}
@media (min-width: 861px) {
  .site-header .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header .nav__actions { justify-self: end; }
}
@media (max-width: 640px) {
  .site-header .nav {
    padding-inline: max(var(--space-4), env(safe-area-inset-right));
    gap: var(--space-2);
  }
  .site-header .nav__actions { gap: var(--space-2); }
  .site-header .nav__brand { font-size: var(--text-sm); letter-spacing: 0.03em; }
  .site-header .theme-toggle { padding-inline: var(--space-3); font-size: var(--text-xs); }
  .site-header .theme-toggle,
  .site-header .contrast-toggle,
  .site-header .nav-toggle { width: 36px; height: 36px; }
  .site-header .theme-toggle { width: auto; }
}

/* ---------- Sections ---------- */
main { display: block; }
.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}
.section--tight { padding-block: clamp(var(--space-10), 5vw, var(--space-20)); }
.section--surface { background: var(--surface-gradient); }
.section__eyebrow svg { width: 16px; height: 16px; }
.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.section__title {
  font-size: var(--text-2xl);
  max-width: 26ch;
}
.section__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-top: var(--space-4);
  font-weight: 400;
}
.section__head { margin-bottom: var(--space-12); }
.section__head--center { text-align: center; margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(var(--space-16), 10vw, var(--space-24));
  padding-bottom: clamp(var(--space-16), 8vw, var(--space-24));
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-12);
  align-items: center;
}
.hero__title {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}
.hero__title .accent { color: var(--color-text-muted); font-weight: 400; }
.hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  max-width: 46ch;
  font-weight: 400;
}
.hero__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
  background: var(--color-surface-offset);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-plastic-inset);
  pointer-events: none;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}
.hero__stat strong { display: block; font-size: var(--text-xl); font-weight: 700; }
.hero__stat span { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; aspect-ratio: 16/10; }
}

/* Page (interior) hero — smaller banner for subpages */
.page-hero {
  padding-block: clamp(var(--space-12), 7vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider);
}
.page-hero__eyebrow a { color: var(--color-text-muted); }
.page-hero__tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-link);
  margin-top: var(--space-3);
}
.page-hero__title { font-size: var(--text-2xl); margin-top: var(--space-3); max-width: 30ch; }
.page-hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); margin-top: var(--space-4); max-width: 60ch; font-weight: 400; }

/* ---------- Values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.value-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-plastic);
}
.value-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-plastic-icon);
}
.value-card__icon svg { width: 24px; height: 24px; stroke: var(--color-text); }
.value-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.value-card p { color: var(--color-text-muted); }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.service-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: var(--shadow-plastic);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), var(--shadow-plastic);
  border-color: var(--color-text-faint);
}
.service-card__icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-offset);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-plastic-icon);
}
.service-card__icon svg { width: 28px; height: 28px; stroke: var(--color-text); fill: none; stroke-width: 1.5; }
.service-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.service-card p { color: var(--color-text-muted); font-size: var(--text-sm); flex-grow: 1; }
.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.service-card__link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.service-card:hover .service-card__link svg { transform: translateX(3px); }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews / testimonials ---------- */
.review-highlight {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-plastic);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-8);
}
.review-highlight__score {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.review-highlight__stars { display: flex; gap: 2px; margin-bottom: var(--space-2); }
.review-highlight__stars .star-icon,
.review-card__stars .star-icon { width: 18px; height: 18px; stroke: none; fill: var(--color-border); }
.review-highlight__stars .star-icon--full,
.review-card__stars .star-icon--full { fill: #f0a92e; }
.review-highlight p { color: var(--color-text-muted); }
.review-highlight a { font-weight: 600; color: var(--color-text); text-decoration: none; }
.review-highlight a:hover { text-decoration: underline; }
.review-highlight a svg { width: 14px; height: 14px; stroke: currentColor; vertical-align: -2px; }
@media (max-width: 640px) { .review-highlight { flex-direction: column; align-items: flex-start; text-align: left; } }

/* ---------- Testimonial rotator ---------- */
.testimonial-rotator {
  position: relative;
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-plastic);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-8) var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.testimonial-rotator__icon { width: 32px; height: 32px; color: var(--color-brand-green); opacity: 0.85; }
.testimonial-rotator__icon svg { width: 100%; height: 100%; }
.testimonial-rotator__viewport { min-height: 6.5em; }
.testimonial-slide {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text);
  font-style: normal;
  animation: testimonial-fade-in 0.4s ease;
}
@keyframes testimonial-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.testimonial-rotator__controls {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-3);
  background: #1d1d1f;
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  max-width: 100%;
}
[data-theme="dark"] .testimonial-rotator__controls { background: #2c2c2e; }
.testimonial-rotator__scrubber {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.testimonial-rotator__seg {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.testimonial-rotator__seg-track {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
  overflow: hidden;
  position: relative;
  transition: width 0.25s ease, background 0.25s ease;
}
.testimonial-rotator__seg:hover .testimonial-rotator__seg-track { background: rgba(255, 255, 255, 0.55); }
.testimonial-rotator__seg-fill {
  position: absolute;
  inset: 0;
  background: #ffffff;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
}
.testimonial-rotator__seg.is-active .testimonial-rotator__seg-track { width: 26px; background: rgba(255, 255, 255, 0.28); }
.testimonial-rotator__seg.is-active .testimonial-rotator__seg-fill { animation: testimonial-seg-fill 7s linear forwards; }
.testimonial-rotator.is-paused .testimonial-rotator__seg-fill { animation-play-state: paused; }
@keyframes testimonial-seg-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.testimonial-rotator__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.testimonial-rotator__play:hover { background: rgba(255, 255, 255, 0.26); }
.testimonial-rotator__play svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .testimonial-rotator { padding: var(--space-6) var(--space-5) var(--space-5); }
  .testimonial-slide { font-size: var(--text-base); }
  .testimonial-rotator__controls { padding: 6px 6px 6px 14px; gap: var(--space-2); }
  .testimonial-rotator__scrubber { gap: 5px; }
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 340px));
  justify-content: center;
  gap: var(--space-6);
}
.review-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: var(--shadow-plastic);
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-plastic); border-color: var(--color-text-faint); }
.review-card h3 { font-size: var(--text-base); }
.review-card__stars { display: flex; gap: 2px; }
.review-card__rating { font-weight: 600; font-size: var(--text-sm); }
.review-card__count { color: var(--color-text-muted); font-size: var(--text-sm); }
.review-card__link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; font-size: var(--text-sm); font-weight: 600; }
.review-card__link svg { width: 14px; height: 14px; stroke: currentColor; }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: minmax(0, 340px); } }

/* ---------- Locations grid ---------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.location-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: var(--shadow-plastic);
}
.location-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), var(--shadow-plastic); }
.location-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface-offset); }
.location-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: var(--shadow-plastic-inset);
  pointer-events: none;
}
.location-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.location-card:hover .location-card__media img { transform: scale(1.06); }
.location-card__body { padding: var(--space-6); flex-grow: 1; display: flex; flex-direction: column; }
.location-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.location-card__addr { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.location-card__tag {
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}
.location-card__link {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.location-card__link svg { width: 14px; height: 14px; }
@media (max-width: 980px) { .locations-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .locations-grid { grid-template-columns: 1fr; } }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.team-card { text-align: center; display: flex; flex-direction: column; }
.team-card__avatar {
  width: 100%;
  aspect-ratio: 1/1;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  background: var(--color-surface-offset);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  overflow: hidden;
  position: relative;
}
.team-card__trigger {
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.team-card__trigger:focus-visible {
  outline: 2px solid var(--color-brand-green);
  outline-offset: 2px;
}
.team-card__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-plastic-inset);
  pointer-events: none;
}
.team-card__avatar svg { width: 42%; height: 42%; stroke: var(--color-text-faint); fill: none; stroke-width: 1.2; }
.team-card__avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; }
.team-card:hover .team-card__avatar img { transform: scale(1.08); }
.team-card__note {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  right: var(--space-2);
  font-size: 0.65rem;
  text-align: center;
  color: var(--color-text-faint);
  background: color-mix(in srgb, var(--color-surface-2) 85%, transparent);
  border-radius: var(--radius-sm);
  padding: 2px 4px;
}
.team-card h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.team-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }

.team-subhead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  margin-top: var(--space-12);
  margin-bottom: var(--space-6);
}
.team-subhead:first-of-type { margin-top: 0; }
.team-subhead svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--color-brand-green); }
.team-card__parental {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.team-card__hint {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--color-brand-green) 65%, black 25%);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  pointer-events: none;
  transition: transform 0.25s ease;
}
.team-card__hint svg { width: 12px; height: 12px; stroke: #fff; }
.team-card__trigger:hover .team-card__hint,
.team-card__trigger:focus-visible .team-card__hint {
  transform: translateX(-50%) translateY(-2px);
}
.team-card__langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  margin-top: auto;
}
.badge--flag-sm {
  font-size: 0.65rem;
  padding: 3px var(--space-2);
  gap: 4px;
}
.badge--flag-sm .flag-circle { width: 14px; height: 14px; }
.team-photo-note {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
}

/* ---------- Team detail modal ---------- */
.team-modal[hidden] { display: none; }
.team-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.team-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.team-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
}
.team-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-text);
  cursor: pointer;
}
.team-modal__close svg { width: 18px; height: 18px; }
.team-modal__close:hover { background: var(--color-surface-offset); }
.team-modal__photo {
  width: 128px;
  height: 128px;
  margin: 0 auto var(--space-4);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: center;
}
.team-modal__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-modal__photo svg { width: 46%; height: 46%; stroke: var(--color-text-faint); fill: none; stroke-width: 1.2; }
.team-modal__name { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.team-modal__role { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.team-modal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.team-modal__meta p:empty { display: none; }
.team-modal__meta a { color: var(--color-brand-green); font-weight: 600; }
.team-modal__bio {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}
.team-modal__cta:empty { display: none; }
.team-modal__cta .btn { width: 100%; justify-content: center; }
@media (max-width: 480px) {
  .team-modal__dialog { padding: var(--space-6) var(--space-4) var(--space-5); }
}

/* ---------- Team location sub-groups (Prophylaxe, Assistenz) ---------- */
.team-location-block + .team-location-block { margin-top: var(--space-8); }
.team-location-block__title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ---------- Map embed (2-click consent) ---------- */
.map-embed {
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
}
.map-embed__placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-4);
  padding: var(--space-8);
}
.map-embed__placeholder svg { width: 32px; height: 32px; stroke: var(--color-text-faint); }
.map-embed__placeholder p {
  max-width: 480px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.map-embed__placeholder p a { color: var(--color-link); }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .map-embed { aspect-ratio: 4/3; } }

/* ---------- Location detail page ---------- */
.location-detail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-16);
  align-items: start;
}
.location-detail__gallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface-offset); }
.location-detail__gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-plastic-inset);
  pointer-events: none;
}
.location-detail__gallery img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: opacity 0.5s ease; }
.info-list { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.info-item { display: flex; gap: var(--space-4); }
.info-item__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-plastic-icon);
}
.info-item__icon svg { width: 20px; height: 20px; stroke: var(--color-text); fill: none; stroke-width: 1.5; }
.info-item h4 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.info-item p, .info-item address { font-size: var(--text-sm); color: var(--color-text-muted); font-style: normal; margin: 0; }
.hours-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; }
.hours-table td { padding: var(--space-1) 0; color: var(--color-text-muted); }
.hours-table td:first-child { color: var(--color-text); font-weight: 500; width: 40%; }
@media (max-width: 900px) { .location-detail { grid-template-columns: 1fr; } }

/* ---------- Standort-Impressionen ---------- */
.impressions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.impression { margin: 0; }
.impression__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-offset);
  box-shadow: var(--shadow-md);
}
.impression__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-plastic-inset);
  pointer-events: none;
}
.impression__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.impression:hover .impression__media img { transform: scale(1.03); }
.impression figcaption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (max-width: 640px) { .impressions-grid { grid-template-columns: 1fr; } }

/* ---------- Career ---------- */
.perks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.perk-card {
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: var(--shadow-plastic);
}
.perk-card h3 { font-size: var(--text-base); margin-bottom: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.perk-card h3 svg { width: 20px; height: 20px; }
.perk-card p { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 860px) { .perks-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perks-grid { grid-template-columns: 1fr; } }

.job-list { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-8); }
.job-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  background: var(--card-gradient);
  flex-wrap: wrap;
  box-shadow: var(--shadow-plastic);
}
.job-item__title { font-size: var(--text-base); font-weight: 600; }
.job-item__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-16);
}
.contact-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-plastic);
}
.contact-card h3 { font-size: var(--text-base); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.contact-card h3 svg { width: 18px; height: 18px; }
.contact-card a { color: var(--color-text); font-weight: 500; }
.contact-card address { font-style: normal; color: var(--color-text-muted); }

.form-field { margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.form-field label { font-size: var(--text-sm); font-weight: 600; }
.form-field .hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-focus);
}
fieldset { border: none; padding: 0; margin: 0; }
.required { color: var(--color-error); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand-green) 55%, black 45%);
  color: #ffffff;
  padding: clamp(var(--space-10), 6vw, var(--space-16));
  text-align: center;
}
.cta-banner h2 { font-size: var(--text-xl); color: inherit; }
.cta-banner p { color: inherit; opacity: 0.85; margin-top: var(--space-3); max-width: 50ch; margin-inline: auto; }
.cta-banner .hero__actions { justify-content: center; margin-top: var(--space-8); }
.cta-banner .btn-secondary { border-color: rgba(255, 255, 255, 0.45); color: inherit; }
.cta-banner .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.7); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-16);
  background: var(--color-surface);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-10);
}
.footer-brand__link { color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.06em; font-size: var(--text-base); }
.footer-brand svg { height: 1.45em; width: auto; flex-shrink: 0; }
.footer-brand p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-4); max-width: 32ch; }
.footer-col h4 { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a { color: var(--color-text-muted); font-size: var(--text-sm); }
.footer-col a:hover { color: var(--color-text); }
.footer-col a.footer-col__cta,
.footer-col a.footer-col__cta:hover { color: var(--color-cta-text); }
.footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Breadcrumb / back link ---------- */
.back-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.back-link svg { width: 14px; height: 14px; }
.back-link:hover { color: var(--color-text); }

/* ---------- Legal / prose pages ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--text-lg); margin-top: var(--space-10); margin-bottom: var(--space-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--space-4); color: var(--color-text-muted); }
.prose ul { margin-bottom: var(--space-4); padding-left: var(--space-6); list-style: disc; }
.prose li { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.prose strong { color: var(--color-text); }
.prose a { text-decoration: underline; }

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 72ch; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-8); }
.faq-item {
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-plastic);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-base);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.3em;
  line-height: 1;
  color: var(--color-brand-green);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---------- Utility layout ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
.badge-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.badge--flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1.5px 2px rgba(0, 0, 0, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 5px 12px rgba(0, 0, 0, 0.09);
}
.badge--flag .flag-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.badge--flag .flag-circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  max-width: none;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* ---------- Scroll reveal (fade + translateY, Apple-product-page style) ---------- */
/* Text fades in and shifts up shortly after its section enters the viewport.
   Single elements use .reveal; grouped text (eyebrow/title/lead) uses
   .reveal-group on the wrapper and .reveal-item on each child so the group
   triggers once and children stagger in via nth-child delays. */
.reveal,
.reveal-group .reveal-item {
  --reveal-offset: 26px;
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.15s;
  will-change: opacity, transform;
}
.reveal.is-visible,
.reveal-group.is-visible .reveal-item {
  opacity: 1;
  transform: translateY(0);
}
.reveal-group .reveal-item:nth-child(2) { transition-delay: 0.27s; }
.reveal-group .reveal-item:nth-child(3) { transition-delay: 0.39s; }
.reveal-group .reveal-item:nth-child(4) { transition-delay: 0.51s; }
.reveal-group .reveal-item:nth-child(n+5) { transition-delay: 0.63s; }

@media (max-width: 640px) {
  .reveal,
  .reveal-group .reveal-item { --reveal-offset: 16px; }
}

/* Dunkelmodus: warme Sand-Karten (Variante „Sand hell") für alle
   Karten und Boxen der Seite. Die Karten setzen lokal helle Farbtokens,
   damit Text, Icons und Links darin automatisch dunkel und kontrastreich
   dargestellt werden. */
[data-theme="dark"] .value-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .review-highlight,
[data-theme="dark"] .testimonial-rotator,
[data-theme="dark"] .review-card,
[data-theme="dark"] .perk-card,
[data-theme="dark"] .job-item,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .photo-notice,
[data-theme="dark"] .team-card {
  --color-text: #2e2a22;
  --color-text-muted: #6b5d49;
  --color-text-faint: #8a7a60;
  --color-surface-offset: #e3d6bf;
  --color-surface-2: #f3ebdd;
  --color-surface: #fbf6ec;
  --color-border: #d1bf9c;
  --color-link: #7d6853;
  --color-link-hover: #5f4f3f;
  --color-brand-green: #7d6853;
  --color-focus: #7d6853;
  --shadow-plastic-icon:
    inset 0 -2px 3px rgba(120, 95, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  background: linear-gradient(155deg, #f3ebdd 0%, #eadfca 100%);
  border-color: #d1bf9c;
  color: var(--color-text);
}
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .team-card h3 { color: #2e2a22; }
[data-theme="dark"] .location-card h3 { color: #6e5a45; }
[data-theme="dark"] .faq-item summary { color: #2e2a22; }

/* Teamkarten: Foto und Text bilden eine gemeinsame Karte. Das Foto behält
   seine volle Breite, die Karte verlängert sich nur nach unten. */
.team-card {
  background: var(--card-gradient);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-plastic);
  padding-bottom: var(--space-5);
}
.team-card__avatar {
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: var(--space-4);
}
.team-card > :not(.team-card__avatar) { padding-inline: var(--space-3); }

/* Bei Platzhalterportraits sitzt der „Details"-Hinweis oben, damit der
   PLATZHALTER-Schriftzug unten vollständig sichtbar bleibt. */
.team-card__avatar:has(img[src*="platzhalter"]) .team-card__hint,
.team-card__avatar:has(.team-card__note) .team-card__hint {
  bottom: auto;
  top: var(--space-2);
}

/* Hinweis Fotoshooting (Teamseite) */
.photo-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 0 var(--space-10);
  padding: var(--space-5) var(--space-6);
  background: var(--card-gradient);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-plastic);
  color: var(--color-text);
}
.photo-notice__icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-surface-offset);
  color: var(--color-brand-green);
}
.photo-notice__icon svg { width: 22px; height: 22px; }
.photo-notice h2 { font-size: var(--text-base); font-weight: 600; margin: 0 0 var(--space-1); color: var(--color-text); }
.photo-notice p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 640px) {
  .photo-notice { padding: var(--space-4); gap: var(--space-3); }
}

/* ---------- Leistungskacheln mit Bild (Variante B) ----------
   Bild füllt die Kachel, Text liegt unten auf einem dunklen Verlauf.
   Gilt in Hell- und Dunkelmodus gleich, damit der Text immer lesbar bleibt. */
.service-card.service-card--image,
[data-theme="dark"] .service-card.service-card--image {
  position: relative;
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
  min-height: 420px;
  aspect-ratio: 4 / 5;
  height: auto;
  background: #16110d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.service-card--image .service-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: -2;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-card--image .service-card__bg.is-loaded { transform: none; }
.service-card--image:hover .service-card__bg { transform: scale(1.05); }
.service-card--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(20, 17, 13, 0.96) 0%,
    rgba(20, 17, 13, 0.9) 42%,
    rgba(20, 17, 13, 0.5) 60%,
    rgba(20, 17, 13, 0) 78%);
}
.service-card--image .service-card__body {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}
.service-card.service-card--image h3,
[data-theme="dark"] .service-card.service-card--image h3 { color: #fbf6ec; }
.service-card.service-card--image p,
[data-theme="dark"] .service-card.service-card--image p { color: #efe6d6; flex-grow: 0; }
.service-card.service-card--image .service-card__link,
[data-theme="dark"] .service-card.service-card--image .service-card__link { color: #f3ebdd; }
.service-card--image:focus-visible { outline: 2px solid #e3d6bf; outline-offset: 3px; }
@media (max-width: 640px) {
  .service-card.service-card--image,
  [data-theme="dark"] .service-card.service-card--image { aspect-ratio: 1 / 1; min-height: 360px; }
}

/* ---------- Handy: Leistungskacheln 3 nebeneinander, nur Titel ---------- */
@media (max-width: 640px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .service-card.service-card--image,
  [data-theme="dark"] .service-card.service-card--image { aspect-ratio: 3 / 4; min-height: 0; border-radius: 12px; }
  .service-card--image .service-card__body { padding: 8px; }
  .service-card.service-card--image h3 { font-size: 12px; line-height: 1.2; margin: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  .service-card.service-card--image p,
  .service-card.service-card--image .service-card__link { display: none; }
  .service-card--image::before {
    background: linear-gradient(to top, rgba(20,17,13,.95) 0%, rgba(20,17,13,.7) 25%, rgba(20,17,13,0) 50%);
  }
}

/* ---------- Handy: Standorte 2 nebeneinander (wie Zahnärzte) ---------- */
@media (max-width: 640px) {
  .locations-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .location-card__media { aspect-ratio: 1 / 1; }
  .location-card__body { padding: 10px 10px 12px; }
  .location-card__tag { font-size: 10px; padding: 2px 6px; margin-bottom: 6px; }
  .location-card h3 { font-size: 14px; line-height: 1.2; margin-bottom: 4px; hyphens: auto; -webkit-hyphens: auto; }
  .location-card__addr { font-size: 12px; line-height: 1.35; }
  .location-card__link { font-size: 12px; margin-top: 6px; }
}
@media (max-width: 640px) {
  .locations-grid > .location-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .locations-grid > .location-card:last-child:nth-child(odd) .location-card__media { aspect-ratio: 2 / 1; }
}

/* ---------- Dunkelmodus „Mokka“: alle Karten warmes Mittelbraun ----------
   Ersetzt die hellen Sand-Karten im Dunkelmodus. Die Leistungskacheln mit
   Bild bekommen denselben Mokka-Ton (in beiden Modi gleich). */
[data-theme="dark"] .value-card,
[data-theme="dark"] .location-card,
[data-theme="dark"] .service-card:not(.service-card--image),
[data-theme="dark"] .review-highlight,
[data-theme="dark"] .testimonial-rotator,
[data-theme="dark"] .review-card,
[data-theme="dark"] .perk-card,
[data-theme="dark"] .job-item,
[data-theme="dark"] .contact-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .photo-notice,
[data-theme="dark"] .team-card {
  --color-text: #f3ebdd;
  --color-text-muted: #d6c8b0;
  --color-text-faint: #b8a88e;
  --color-surface-offset: #4a3e34;
  --color-surface-2: #3f352c;
  --color-surface: #463a30;
  --color-border: #6b5a48;
  --color-link: #e3d6bf;
  --color-link-hover: #fbf6ec;
  --color-brand-green: #e3d6bf;
  --color-focus: #e3d6bf;
  --shadow-plastic-icon: inset 0 -2px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  background: linear-gradient(155deg, #4b3f35 0%, #3a3028 100%);
  border-color: rgba(227, 214, 191, 0.22);
  color: #f3ebdd;
}
[data-theme="dark"] .value-card h3,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .team-card h3,
[data-theme="dark"] .location-card h3,
[data-theme="dark"] .faq-item summary { color: #fbf6ec; }
[data-theme="dark"] .location-card__tag { background: rgba(227, 214, 191, 0.14); color: #e3d6bf; }
.service-card.service-card--image,
[data-theme="dark"] .service-card.service-card--image { background: #3a3028; border-color: rgba(227, 214, 191, 0.22); }
.service-card--image::before {
  background: linear-gradient(to top,
    rgba(58, 48, 40, 0.97) 0%,
    rgba(58, 48, 40, 0.9) 42%,
    rgba(58, 48, 40, 0.5) 60%,
    rgba(58, 48, 40, 0) 78%);
}
@media (max-width: 640px) {
  .service-card--image::before {
    background: linear-gradient(to top, rgba(58,48,40,.96) 0%, rgba(58,48,40,.72) 25%, rgba(58,48,40,0) 50%);
  }
}
[data-theme="dark"] .location-card__tag { align-self: flex-start; width: fit-content; padding: 2px 8px; border-radius: 999px; }