/* ============================================================
   FETAI · ÄSTHETISCHE CHIRURGIE — Gestaltungssystem
   Eine Datei für die ganze Website.
   Einbinden mit:
     <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/fetai-styles.css">
   Alle Werte stehen in :root. Wer dort etwas ändert, ändert es
   auf jeder Unterseite. Sonst nirgends Zahlen eintragen.
   ============================================================ */

  :root {
    color-scheme: light only;

    /* ===== Farben: unveraendert uebernommen (Baroque v7) ===== */
    --deep: #030c08;
    --forest-deep: #05120d;
    --forest: #0a1a13;
    --forest-mid: #143828;
    --forest-light: #1e4d35;
    --forest-pale: #2a6346;
    --gold: #c9a96e;
    --gold-bright: #e0c896;
    --gold-deep: #a3844a;
    --gold-pale: rgba(201,169,110,0.10);
    --gold-ghost: rgba(201,169,110,0.045);
    --paper: #fdfcf9;        /* 253 252 249 · Kartenflaeche, fast Papierweiss */
    --cream: #faf8f3;        /* 250 248 243 · Grundflaeche der Website */
    --cream-warm: #f6f3ee;   /* 246 243 238 · leichte Abstufung, Leitsatz */
    --linen: #f2efe8;        /* 242 239 232 · Leinenbahn, nur noch drei Sektionen */
    --cream-dark: #e9e5db;   /* 233 229 219 · Bildplatzhalter */
    --text: #1c1a15;
    --text-muted: #5a564d;
    --text-light: #8a8477;

    /* Jade als Passepartout hinter Bildern. Die goldene Haarlinie darin
       liegt auf Dunkel und bekommt dadurch Tiefe. */
    --mat: linear-gradient(160deg, var(--forest-mid) 0%, var(--forest) 55%, var(--forest-deep) 100%);

    /* Umrandungen sind neutral, nicht golden. Gold ist ab jetzt Akzent,
       nicht Standardrahmen: sonst legt sich ein gelber Schleier ueber alles. */
    --line: rgba(28,26,21,0.09);
    --line-strong: rgba(28,26,21,0.14);
    --border: rgba(10,26,19,0.08);
    --border-gold: rgba(201,169,110,0.32);

    /* ===== Bewegung: eine Kurve, drei Dauern. Mehr braucht die Seite nicht. ===== */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-slow: 0.9s;
    --t-mid: 0.5s;
    --t-fast: 0.32s;

    /* ===== Schriften: eine Antiqua, eine Grotesk. Mehr nicht.
       EB Garamond traegt Ueberschriften und Fliesstext, eine ruhige Buchschrift
       ohne Zierrat. Jost traegt alles Funktionale: Menue, Marken, Schaltflaechen.
       Antiqua und geometrische Grotesk nebeneinander, das ist der leiseste
       und zugleich teuerste Satz, den es gibt. ===== */
    --display: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --body: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --ui: 'Jost', 'Helvetica Neue', Arial, sans-serif;

    /* ===== Typoskala: EB Garamond traegt hoeher als Cormorant, alles darf kleiner stehen ===== */
    /* Antiqua, neun Stufen. Jede Ueberschrift der Website benutzt eine davon. */
    --fs-title:   clamp(31px, 3.5vw, 56px);   /* Seitentitel, Versalien */
    --fs-lead:    clamp(25px, 2.3vw, 34px);   /* Leitzeile, Blockzitat, Kursives */
    --fs-section: clamp(33px, 3.3vw, 46px);   /* Sektionstitel */
    --fs-sub:     clamp(25px, 2.1vw, 30px);   /* Zwischenueberschrift */
    --fs-card:    24px;                       /* Kartentitel */
    --fs-item:    21px;                       /* Frage, kurzes Zitat, Listentitel */
    --fs-body:    18px;   --lh-body: 1.72;    /* Fliesstext */
    --fs-small:   17px;                       /* Kartentext, Fusszeile */
    --fs-note:    15.5px;                     /* Meta, Einwilligung */
    --fs-num:     clamp(38px, 3.2vw, 46px);   /* grosse Zahlen */
    --fs-placeholder: 15px;

    /* Grotesk, fuenf Stufen. Immer Versalien ausser im Untermenue. */
    --fs-nav:   13px;     --ls-nav:   0.15em;
    --fs-label: 12.5px;   --ls-label: 0.22em;
    --fs-cta:   12.5px;   --ls-cta:   0.18em;
    --fs-menu:  14.5px;   --ls-menu:  0.05em;
    --fs-micro: 11px;     --ls-micro: 0.26em;

    /* ===== Raum: ein Takt, abgeleitet aus 8. Alles Weiss der Seite kommt hier her. ===== */
    --gap-xs: 8px;
    --gap-s: 16px;
    --gap-m: 28px;
    --gap-l: 48px;
    --gap-xl: 80px;
    --pad-sec: clamp(88px, 8.5vw, 148px);
    --pad-side: clamp(24px, 4.2vw, 56px);
    --measure: 38em;

    --radius: 2px;

    /* ===== Zwei Tiefen: ruhend und angehoben. Keine dritte. ===== */
    --lift-rest: 0 1px 2px rgba(28,26,21,0.03), 0 14px 32px -20px rgba(28,26,21,0.13);
    --lift-hover: 0 2px 4px rgba(28,26,21,0.04), 0 26px 52px -26px rgba(28,26,21,0.2), 0 0 0 1px rgba(201,169,110,0.42);
    --lift-rest-dark: 0 14px 30px -18px rgba(0,0,0,0.5);
    --lift-hover-dark: 0 26px 52px -24px rgba(0,0,0,0.62), 0 0 0 1px rgba(201,169,110,0.38);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--body); font-weight: 400;
    font-size: var(--fs-body); line-height: var(--lh-body);
    background: var(--cream); color: var(--text);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-feature-settings: "kern", "liga";
    overflow-x: hidden;
  }
  ::selection { background: var(--gold-pale); color: var(--forest); }
  a { color: var(--forest); text-decoration: none; transition: color var(--t-fast) var(--ease); }
  a:hover { color: var(--gold-deep); }
  *:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 4px; }
  img, svg { display: block; }
  h1, h2, h3 { text-wrap: balance; }
  p { text-wrap: pretty; }

  /* ===== Karten: ein Hauch Tiefe, sonst nichts.
     Der frueher mitlaufende Goldschimmer ist entfernt. Ruhe entsteht dadurch,
     dass genau ein Element auf der Seite sich dauerhaft bewegt, nicht sieben. ===== */
  [data-tilt] {
    --rx: 0deg; --ry: 0deg;
    transform: none;
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease),
                border-color var(--t-fast) ease, background-color var(--t-fast) ease;
  }
  [data-tilt]:hover { transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }

  /* ===== Erscheinen beim Scrollen: eine Richtung, eine Dauer, hoechstens drei Stufen ===== */
  .js :where(.rise) { transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease); transition-delay: var(--d, 0ms); }
  @media (prefers-reduced-motion: no-preference) {
    .js :where(.rise):not(.in) { opacity: 0; translate: 0 14px; }
  }
  .js [data-tilt].rise {
    transition-property: opacity, translate, transform, box-shadow, border-color;
    transition-duration: var(--t-slow), var(--t-slow), var(--t-mid), var(--t-mid), var(--t-fast);
    transition-timing-function: var(--ease), var(--ease), var(--ease), var(--ease), ease;
    transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s, 0s;
  }

  /* ===== Auszeichnungen: Kapitaelchen, eine Groesse, eine Sperrung ===== */
  .overline span, .section-label, .fact-label, .voice-meta, .rating-label,
  .footer-col-title, .form-field label, .assoc-label, .bsafe-num, .treatment-flag,
  .event-overline span:last-child, .treatment-cta-label, .sl-tag,
  .sl-legend dt, .reel-tag, .signature-note span {
    font-family: var(--ui); font-weight: 500; text-transform: uppercase;
    font-size: var(--fs-label); letter-spacing: var(--ls-label); line-height: 1.6;
    font-variant-numeric: lining-nums;
  }
  /* Eigennamen und Marken bleiben in ihrer Schreibweise */
  .keep-case, .treatment-flag, .sl-head .overline span { text-transform: none; letter-spacing: 0.1em; }
  .footer-hours, .footer-bottom-inner, .event-meta, .footer-copyright, .rating-label, .fact-number {
    font-variant-numeric: lining-nums tabular-nums;
  }
  .section-title em, .about-sticky h2 em, .about-content h3 em, .bsafe-intro h2 em, .form-intro h2 em,
  .channel-info h2 em, .op-head h2 em, .faq-intro h2 em, .sl-head h2 em {
    font-style: italic; font-weight: 400; color: var(--gold-deep); letter-spacing: 0;
  }

  /* ===== Das Lot: ein senkrechter Goldfaden an jeder Naht zwischen zwei Flaechen ===== */
  .plumb {
    position: absolute; top: 0; left: 50%; width: 1px; height: 52px; transform: translateX(-50%);
    background: linear-gradient(180deg, var(--gold) 0%, transparent 100%); opacity: 0.45; pointer-events: none; z-index: 2;
  }

  /* ===== KOPFZEILE ===== */
  .header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: linear-gradient(180deg, var(--forest-deep) 0%, var(--forest) 70%, rgba(10,26,19,0.97) 100%);
    border-bottom: 1px solid var(--border-gold);
    box-shadow: 0 6px 30px rgba(5,18,13,0.26);
    transition: padding var(--t-mid) var(--ease);
  }
  .header::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 22%, var(--gold-bright) 50%, var(--gold) 78%, transparent 100%);
    opacity: 0.5;
  }
  .header-inner { max-width: 1440px; margin: 0 auto; padding: 18px var(--pad-side); display: flex; align-items: center; justify-content: space-between; gap: 40px; transition: padding var(--t-mid) var(--ease); }
  .header.scrolled .header-inner { padding: 12px var(--pad-side); }
  .logo img { height: 44px; width: auto; filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(10deg); opacity: 0.92; transition: height var(--t-mid) var(--ease), opacity var(--t-fast) ease; }
  .header.scrolled .logo img { height: 38px; }
  .logo:hover img { opacity: 1; }
  .logo-word { display: none; font-family: var(--display); font-size: var(--fs-item); font-weight: 500; text-transform: uppercase; letter-spacing: 0.3em; color: var(--cream); }
  .mainnav { display: flex; align-items: center; gap: 36px; flex: 1 1 auto; margin-left: 24px; }
  .nav-link {
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-nav); letter-spacing: var(--ls-nav);
    color: rgba(242,240,234,0.92); display: flex; align-items: center; gap: 9px;
    position: relative; padding: 10px 0; line-height: 1;
  }
  .nav-link::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
  }
  .nav-link:hover { color: var(--gold-bright); }
  .nav-link:hover::after, .submenu:focus-within .nav-link::after { transform: scaleX(1); }
  .nav-link svg { color: var(--gold); opacity: 0.9; transition: transform var(--t-mid) var(--ease); }
  .nav-link:hover svg { transform: rotate(180deg); }
  .submenu { position: relative; display: block; }
  .submenu-panel { position: fixed; top: 66px; left: 0; right: 0; padding-top: 20px; display: none; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-mid) ease, transform var(--t-mid) ease; }
  .submenu:hover .submenu-panel, .submenu:focus-within .submenu-panel { display: block; opacity: 1; transform: translateY(0); }
  .submenu-inner {
    display: block; background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    border-bottom: 1px solid var(--border-gold); box-shadow: 0 32px 64px rgba(0,0,0,0.42); position: relative;
  }
  .submenu-inner::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent 100%);
    opacity: 0.45;
  }
  .submenu-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0 var(--gap-l); max-width: 1440px; margin: 0 auto; padding: 36px var(--pad-side) 48px; }
  .submenu-col { display: flex; flex-direction: column; }
  .submenu-title {
    display: block; padding: 12px 20px; margin-bottom: 10px; position: relative;
    font-family: var(--ui); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--ls-micro);
    text-transform: uppercase; color: var(--gold-bright); border-bottom: 1px solid rgba(201,169,110,0.18);
  }
  .submenu-title::after { content: ''; position: absolute; bottom: -1px; left: 20px; width: 28px; height: 1px; background: var(--gold); }
  .submenu-item { display: block; padding: 10px 20px; font-family: var(--ui); font-weight: 400; font-size: 16px; letter-spacing: 0.04em; line-height: 1.4; color: rgba(242,240,234,0.82); white-space: nowrap; transition: color var(--t-fast) ease; }
  .submenu-item:hover { color: var(--gold-bright); }
  .submenu-flat { display: block; min-width: 268px; background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%); border: 1px solid rgba(201,169,110,0.25); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.5); padding: 10px 0; }
  .submenu-flat .submenu-item { padding: 12px 24px; }
  .header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
  .icon-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: transparent; cursor: pointer; border: 1px solid rgba(201,169,110,0.45); border-radius: 50%; color: var(--cream); transition: border-color var(--t-fast) ease, color var(--t-fast) ease; }
  .icon-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .lang-btn {
    display: flex; align-items: center; gap: 9px; background: transparent;
    border: 1px solid rgba(201,169,110,0.45); border-radius: var(--radius); padding: 10px 18px;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta);
    color: var(--cream); cursor: pointer; line-height: 1; transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
  }
  .lang-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
  .lang-btn svg { color: var(--gold); }

  /* ===== Suche: eine Lade, die sich oeffnet, nicht ein Fenster, das sich davorstellt ===== */
  .search-panel {
    position: fixed; top: 0; left: 0; right: 0; z-index: 46;
    background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    border-bottom: 1px solid var(--border-gold);
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    transform: translateY(-102%); transition: transform var(--t-slow) var(--ease);
  }
  .search-panel.open { transform: none; }
  .search-inner { max-width: 940px; margin: 0 auto; padding: 118px var(--pad-side) 46px; }
  .search-row { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid rgba(201,169,110,0.45); padding-bottom: 16px; }
  .search-row > svg { color: var(--gold); flex: 0 0 auto; }
  #site-search {
    flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; padding: 0;
    color: var(--cream); font-family: var(--display); font-style: italic; font-weight: 400;
    font-size: var(--fs-sub); line-height: 1.3;
  }
  #site-search::placeholder { color: rgba(242,240,234,0.38); }
  #site-search::-webkit-search-cancel-button { display: none; }
  .search-close { background: transparent; border: 0; padding: 6px; cursor: pointer; color: rgba(242,240,234,0.55); flex: 0 0 auto; transition: color var(--t-fast) ease; }
  .search-close:hover { color: var(--gold-bright); }
  .search-results { margin-top: 26px; max-height: 52vh; overflow-y: auto; }
  .search-results a { display: flex; align-items: baseline; gap: 24px; padding: 15px 0; border-bottom: 1px solid rgba(201,169,110,0.12); color: rgba(242,240,234,0.88); }
  .search-results a:last-child { border-bottom: 0; }
  .search-results a:hover, .search-results a.on { color: var(--gold-bright); }
  .r-kind { font-family: var(--ui); font-weight: 400; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: var(--gold-deep); flex: 0 0 34%; line-height: 1.9; }
  .r-name { font-family: var(--display); font-size: var(--fs-item); line-height: 1.3; }
  .search-empty { font-family: var(--body); font-style: italic; font-size: var(--fs-small); color: rgba(242,240,234,0.5); padding: 18px 0; }
  @media (max-width: 760px) {
    .search-inner { padding: 96px 24px 32px; }
    .search-results a { flex-direction: column; gap: 4px; padding: 13px 0; }
    .r-kind { flex: none; line-height: 1.5; }
    .r-name { font-size: 18px; }
  }

  /* ===== HERO ===== */
  .hero {
    position: relative;
    min-height: 100vh; min-height: min(100svh, calc(1.3 * 100vw - 800px));
    display: flex; align-items: center; justify-content: flex-start;
    overflow: hidden; isolation: isolate;
    background: var(--cream);
    /* Heldenbild pro Seite setzen, z. B. im <head>:
       <style>.hero{--hero-img:url("/assets/hero-start.jpg")}</style> */
    --hero-img: url("/assets/hero-start.jpg");
  }
  .hero-photo {
    position: absolute; inset: 0; z-index: 0;
    background-image: var(--hero-img);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: right top;
    background-color: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.34) 27%, #000 54%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.34) 27%, #000 54%);
    animation: photoIn 1.8s var(--ease) both;
  }
  .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
  .hero::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 170px;
    background: linear-gradient(to top, var(--cream), transparent);
    z-index: 2; pointer-events: none;
  }
  .hero-content {
    position: relative; z-index: 3; text-align: left;
    width: min(780px, calc(100vw - 0.72 * 100vh));
    min-width: 500px;
    padding: 150px 24px 180px clamp(28px, 7vw, 150px);
  }
  /* Der Hero ist eine Namenstafel, kein Absatz: Fachrichtung und Ort in
     Versalien, darunter in einer Zeile die Spezialisierung, dann der Name.
     Erklaert wird hier nichts, das uebernimmt die Sektion darunter. */
  .hero h1 {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: var(--fs-title); line-height: 1.1; letter-spacing: 0.075em;
    margin: 0 0 26px; color: var(--forest);
  }
  .hero h1 span { display: block; }
  .hero-spec {
    position: relative; padding-top: 24px; margin: 0 0 12px; max-width: 22em;
    font-family: var(--display); font-style: italic; font-weight: 400;
    font-size: var(--fs-lead); line-height: 1.32; color: var(--gold-deep);
  }
  .hero-spec::before { position: absolute; top: 0; left: 0; }
  .hero-meta {
    font-family: var(--body); font-style: italic; font-weight: 500;
    font-size: var(--fs-small); line-height: 1.5; color: var(--text-muted); margin: 0 0 var(--gap-l);
  }
  .hero-actions { display: flex; align-items: center; gap: var(--gap-s) var(--gap-m); flex-wrap: wrap; }

  /* ===== Schaltflaechen ===== */
  .cta-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    border: 1px solid var(--forest); background: transparent;
    color: var(--forest); padding: 18px 36px; border-radius: var(--radius);
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta);
    letter-spacing: var(--ls-cta); line-height: 1.35; text-align: center; cursor: pointer;
    transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease),
                border-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
    position: relative;
  }
  .cta-primary::after {
    content: ''; position: absolute; inset: 4px; border: 1px solid transparent; border-radius: 1px;
    transition: border-color var(--t-mid) ease; pointer-events: none;
  }
  .cta-primary:hover {
    background: var(--forest); color: var(--cream); border-color: var(--forest);
    box-shadow: 0 16px 36px -16px rgba(10,26,19,0.42); transform: translateY(-2px);
  }
  .cta-primary:hover::after { border-color: rgba(201,169,110,0.6); }
  .cta-primary svg { transition: transform var(--t-mid) var(--ease); }
  .cta-primary:hover svg { transform: translateX(5px); }
  .cta-primary.solid { background: var(--forest); color: var(--cream); border-color: var(--forest); }
  .cta-primary.solid:hover { background: var(--forest-mid); border-color: var(--forest-mid); }

  .cta-quiet {
    display: inline-flex; align-items: center; gap: 10px; position: relative;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta);
    color: var(--forest); padding-bottom: 4px;
  }
  .cta-quiet::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); }
  .cta-quiet:hover::after { transform: scaleX(1); }
  .cta-quiet svg { transition: transform var(--t-mid) var(--ease); }
  .cta-quiet:hover svg { transform: translateX(4px); }

  @keyframes riseIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes photoIn { from { opacity: 0; } to { opacity: 1; } }
  .hero-content > * { animation: riseIn 1.1s var(--ease) both; }
  .hero-content > :nth-child(1) { animation-delay: 0.30s; }
  .hero-content > :nth-child(2) { animation-delay: 0.48s; }
  .hero-content > :nth-child(3) { animation-delay: 0.62s; }
  .hero-content > :nth-child(4) { animation-delay: 0.84s; }

  @media (max-width: 1100px) and (min-aspect-ratio: 1/1) {
    .hero-content { padding: 120px 24px 150px 56px; }
  }

  /* Hochformat: Kopf oben, Text darunter auf Jade */
  @media (max-width: 900px), (max-aspect-ratio: 1/1) {
    .hero { min-height: 100vh; min-height: 100svh; background: var(--forest-deep); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
    .hero-photo { background-size: cover; background-position: 50% 0; background-color: var(--forest-deep); -webkit-mask-image: none; mask-image: none; }
    .hero::before { display: block; background: linear-gradient(180deg, transparent 48%, rgba(5,18,13,0.42) 57%, rgba(5,18,13,0.86) 66%, rgba(5,18,13,0.97) 76%, var(--forest-deep) 100%); }
    .hero::after { height: 100px; }
    .hero-content { width: auto; min-width: 0; max-width: 640px; margin: 55vh auto 0; margin-top: 55svh; padding: 0 24px 64px; text-align: center; }
    .hero h1 { color: #ffffff; font-size: clamp(23px, 6vw, 33px); letter-spacing: 0.08em; margin-bottom: 20px; text-shadow: 0 2px 14px rgba(0,0,0,0.35); }
    .hero-spec { color: var(--gold-bright); font-size: 22px; margin: 0 auto 12px; max-width: none; padding-top: 20px; }
    .hero-spec::before { left: 50%; transform: translateX(-50%); }
    .hero-meta { color: rgba(255,255,255,0.78); font-size: var(--fs-note); margin-bottom: var(--gap-m); }
    .meta-more { display: none; }
    .hero-actions { justify-content: center; }
    .hero .cta-primary {
      border-color: var(--gold); color: var(--gold);
      background: rgba(5,18,13,0.35); backdrop-filter: blur(4px);
      padding: 15px 18px; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); width: 100%; max-width: 340px;
    }
    .hero .cta-primary:hover { border-color: var(--gold-bright); color: var(--forest); background: var(--gold); }
    .hero .cta-quiet { color: var(--gold-bright); }
  }
  @media (max-width: 900px) and (max-height: 680px), (max-aspect-ratio: 1/1) and (max-height: 680px) {
    .hero-content { margin-top: 54vh; margin-top: 54svh; padding-bottom: 40px; }
    .hero h1 { font-size: 24px; margin-bottom: 14px; }
    .hero-spec { font-size: 19px; padding-top: 16px; }
    .hero-meta { font-size: 14.5px; margin-bottom: 20px; }
  }

  /* ===== Seitenleiste rechts ===== */
  .float-bar { position: fixed; right: 0; top: 52%; transform: translateY(-50%); z-index: 45; display: flex; flex-direction: column; gap: 1px; filter: drop-shadow(-6px 12px 28px rgba(0,0,0,0.36)); }
  .float-btn {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    color: var(--cream-warm); padding: 16px 22px 16px 20px;
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); line-height: 1;
    border-left: 1px solid rgba(201,169,110,0.45);
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
  }
  .float-btn:first-child { border-radius: var(--radius) 0 0 0; }
  .float-btn:last-child { border-radius: 0 0 0 var(--radius); }
  .float-btn:hover { background: var(--forest-mid); color: #fff; border-left-color: var(--gold); }
  .float-btn svg { color: var(--gold); flex: 0 0 auto; }
  .float-bar.on-dark .float-btn { background: var(--paper); color: var(--forest); border-left-color: rgba(201,169,110,0.55); }
  .float-bar.on-dark .float-btn svg { color: var(--gold-deep); }
  .float-bar.on-dark .float-btn:hover { background: #fffdf9; color: var(--forest); border-left-color: var(--gold); }

  /* ===== Sektionen ===== */
  .section { max-width: 1440px; margin: 0 auto; padding: var(--pad-sec) var(--pad-side); position: relative; }
  .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: var(--gap-m); border-bottom: 1px solid var(--border-gold); margin-bottom: var(--gap-xl); position: relative; }
  .section-header::after { position: absolute; bottom: -4px; left: 0; }
  .section-title, .about-sticky h2, .bsafe-intro h2, .form-intro h2, .channel-info h2, .op-head h2, .faq-intro h2, .sl-head h2 {
    font-family: var(--display); font-weight: 400; font-size: var(--fs-section); line-height: 1.1; letter-spacing: -0.014em; margin: 0; color: var(--forest);
    font-feature-settings: "kern", "liga", "dlig";
  }
  .section-label { color: var(--text-light); white-space: nowrap; }
  .overline { color: var(--gold-deep); margin-bottom: var(--gap-m); display: flex; align-items: center; gap: 18px; }
  /* ===== Das Siegel =====
     Ein Jadequadrat von sieben Punkten, aus dem eine Goldlinie laeuft.
     Es markiert jeden Sektionskopf. So steht das Gruen auch dort, wo die
     Flaeche hell bleibt, und die Goldlinie bekommt einen Anfang. */
  .overline::before, .hero-spec::before, .section-header::after,
  .voices-head::after, .about-content h3::after {
    content: ''; width: 46px; height: 7px; flex: 0 0 auto;
    background:
      linear-gradient(var(--forest), var(--forest)) left center / 7px 7px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat;
  }
  /* Auf Jade waere das Quadrat unsichtbar, dort traegt es Gold */
  .sl-head .overline::before, .event-overline span:first-child {
    background:
      linear-gradient(var(--gold-bright), var(--gold-bright)) left center / 7px 7px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right center / 32px 1px no-repeat;
  }
  .event-overline span:first-child { width: 46px; height: 7px; }
  .about-text, .bsafe-intro p, .form-intro p, .channel-info p, .op-head p, details p, .sl-head p, .voices-head p {
    font-family: var(--body); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text);
  }

  /* =========================================================
     SIGNATUR: DIE SICHTLINIE
     Der einzige Ort der Seite, an dem sich dauerhaft etwas bewegt.
     Ein Schallfenster wandert langsam durch den Gewebeschnitt.
     ========================================================= */
  .sl-section {
    background: radial-gradient(ellipse at 22% 0%, rgba(30,77,53,0.42) 0%, transparent 52%),
                linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    color: var(--cream-warm); position: relative; overflow: hidden;
  }
  .sl-section::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 5%, var(--gold) 50%, transparent 95%); opacity: 0.5;
  }
  .sl-grid { display: grid; grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
  .sl-head .overline { color: var(--gold); }
  .sl-head h2 { color: var(--cream); margin: 0 0 var(--gap-m); }
  .sl-head h2 em { color: var(--gold-bright); }
  .sl-head p { color: rgba(242,240,234,0.84); max-width: 27em; margin: 0 0 var(--gap-s); }
  .sl-head p:last-of-type { margin-bottom: var(--gap-m); }
  .sl-head .cta-primary { border-color: rgba(201,169,110,0.6); color: var(--gold-bright); }
  .sl-head .cta-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--forest); box-shadow: 0 16px 36px -16px rgba(0,0,0,0.6); }

  .sl-stage { position: relative; }
  /* Die Seitenleiste liegt fest rechts. Der Gewebeschnitt traegt Beschriftung
     genau dort, also bekommt nur diese Sektion zusaetzlichen Rand. */
  @media (min-width: 1101px) { .sl-section .section { padding-right: calc(var(--pad-side) + 152px); } }
  .sl-frame {
    position: relative; border: 1px solid rgba(201,169,110,0.28); border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(3,12,8,0.72) 0%, rgba(5,18,13,0.9) 100%);
    padding: 10px; box-shadow: var(--lift-rest-dark);
  }
  .sl-frame::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201,169,110,0.18); border-radius: 1px; pointer-events: none; z-index: 3; }
  .sl-svg { width: 100%; height: auto; display: block; border-radius: 1px; }

  .sl-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
  .sl-tag { color: var(--gold); }
  .sl-note { font-family: var(--body); font-style: italic; font-size: var(--fs-note); color: rgba(242,240,234,0.5); }

  .sl-scan { transform-box: view-box; transform-origin: 0 0; }
  @media (prefers-reduced-motion: no-preference) {
    .sl-scan { animation: slSweep 9s cubic-bezier(0.45,0,0.55,1) infinite; }
  }
  @keyframes slSweep {
    0%   { transform: translateX(0px);   opacity: 0; }
    10%  { opacity: 0.95; }
    50%  { transform: translateX(196px); opacity: 0.95; }
    90%  { opacity: 0.95; }
    100% { transform: translateX(0px);   opacity: 0; }
  }

  /* Beschriftung ausserhalb der Grafik, sobald es eng wird */
  .sl-legend { display: none; margin-top: var(--gap-m); border-top: 1px solid rgba(201,169,110,0.2); }
  .sl-legend div { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(201,169,110,0.12); }
  .sl-legend dt { color: var(--gold); flex: 0 0 40%; display: flex; align-items: center; }
  .sw { flex: 0 0 auto; width: 15px; height: 15px; margin-right: 14px; }
  .sw-haut { background: #1e4d35; }
  .sw-fett { background: #12291b; box-shadow: inset 0 0 0 1px rgba(201,169,110,0.7); }
  .sw-faszie { height: 6px; background: var(--gold-bright); }
  .sw-muskel { background: #050b0e; box-shadow: inset 0 0 0 1px #2c4f45;
    background-image: repeating-linear-gradient(45deg, transparent 0 4px, #2c4f45 4px 5px); }
  .sl-legend dd { font-family: var(--body); font-size: var(--fs-small); line-height: 1.6; color: rgba(242,240,234,0.8); }

  /* ===== Drei Belege, direkt unter dem Motto ===== */
  .facts-bar { position: relative; z-index: 4; background: var(--cream); padding: 0 var(--pad-side); }
  .facts-inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: stretch; perspective: 1600px; padding: var(--gap-xl) 0 0; }
  .fact-item {
    padding: 42px 38px; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift-rest);
  }
  .fact-item:hover { box-shadow: var(--lift-hover); }
  .fact-icon-wrap { width: 46px; height: 46px; border: 1px solid var(--border-gold); border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px; transition: border-color var(--t-fast) ease; }
  .fact-item:hover .fact-icon-wrap { border-color: var(--gold); }
  .fact-label { color: var(--text-light); }
  .fact-number { font-family: var(--display); font-size: var(--fs-num); line-height: 1.05; font-weight: 400; letter-spacing: -0.02em; color: var(--forest); }
  .fact-desc { font-size: var(--fs-small); line-height: 1.65; color: var(--text-muted); margin-top: 2px; }
  .fact-item.featured { background: linear-gradient(180deg, var(--forest-mid) 0%, var(--forest) 55%, var(--forest-deep) 100%); border-color: rgba(201,169,110,0.3); box-shadow: var(--lift-rest-dark); }
  .fact-item.featured:hover { box-shadow: var(--lift-hover-dark); }
  .fact-item.featured::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.7; }
  .fact-item.featured .fact-icon-wrap { border-color: rgba(201,169,110,0.4); }
  .fact-item.featured .fact-label { color: rgba(242,240,234,0.6); }
  .fact-item.featured .fact-number { color: var(--cream); }
  .fact-item.featured .fact-desc { color: rgba(242,240,234,0.82); }

  /* ===== Mein Versprechen ===== */
  .about-grid { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(48px, 6vw, 100px); align-items: start; }
  .about-sticky { position: sticky; top: 130px; min-width: 0; }
  .about-sticky h2 { margin: 0 0 var(--gap-m); }
  .portrait-frame {
    position: relative; width: 100%; aspect-ratio: 3/4;
    background: var(--mat);
    border: 1px solid var(--forest); border-radius: var(--radius); padding: 10px;
    box-shadow: var(--lift-rest); overflow: hidden;
  }
  .portrait-frame:hover { box-shadow: var(--lift-hover); }
  .portrait-frame::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.55); border-radius: 1px; pointer-events: none; z-index: 2; transition: border-color var(--t-mid) ease; }
  .portrait-frame:hover::before { border-color: rgba(201,169,110,0.68); }
  .portrait-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; filter: saturate(0.92) contrast(1.03); transition: filter var(--t-slow) ease; }
  .portrait-frame:hover img { filter: saturate(1) contrast(1.05); }
  .about-content h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-sub); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--gap-m); color: var(--forest); position: relative; padding-bottom: 20px; }
  .about-content h3::after { position: absolute; bottom: -3px; left: 0; }
  .about-text { max-width: var(--measure); text-align: left; }
  .about-text p { margin: 0 0 20px; }
  .about-text p:last-child { margin-bottom: 0; }
  .about-cta { margin-top: var(--gap-l); padding-top: var(--gap-m); border-top: 1px solid var(--border-gold); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .about-sig { font-family: var(--display); font-style: italic; font-size: var(--fs-item); color: var(--gold-deep); }

  /* ===== Fachgesellschaften ===== */
  /* Nahtstellen: eine Haarlinie oben und unten an jeder abgesetzten Flaeche */
  .treatments-section, .form-section, .contact-cta, .voices-section {
    box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
  }
  /* Ein schmales Jadeband zwischen zwei hellen Sektionen. Es gibt der Seite
     einen Atemzug Dunkel, ohne eine ganze Sektion zu verdunkeln. */
  .assoc-bar { background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%); position: relative;
    box-shadow: inset 0 1px 0 rgba(201,169,110,0.28), inset 0 -1px 0 rgba(201,169,110,0.28); }
  .assoc-bar .assoc-label { color: rgba(242,240,234,0.62); }
  .assoc-bar .logo-placeholder { border-color: rgba(201,169,110,0.4); }
  .assoc-bar .logo-placeholder::after { color: rgba(242,240,234,0.45); }
  .assoc-bar .logo-placeholder:hover { border-color: var(--gold); background: rgba(201,169,110,0.09); }
  .assoc-bar::before, .assoc-bar::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 1px; height: 52px; opacity: 0.45; }
  .assoc-bar::before { top: 0; background: linear-gradient(180deg, var(--gold), transparent); }
  .assoc-bar::after { bottom: 0; background: linear-gradient(180deg, transparent, var(--gold)); }
  .assoc-inner { max-width: 1440px; margin: 0 auto; padding: 72px var(--pad-side); display: flex; align-items: center; gap: var(--gap-xl); flex-wrap: wrap; }
  .assoc-label { color: var(--text-light); flex: 0 0 auto; max-width: 220px; line-height: 1.7; }
  .assoc-logos { flex: 1 1 520px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; align-items: center; justify-items: center; }
  .logo-placeholder { width: 100%; max-width: 160px; height: 60px; border: 1px solid var(--line-strong); border-radius: var(--radius); display: grid; place-items: center; transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease; }
  .logo-placeholder::after { content: 'Logo'; font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: var(--text-light); }
  .logo-placeholder:hover { border-color: var(--gold); background: var(--gold-ghost); }

  /* ===== Behandlungen ===== */
  .treatments-section { background: var(--linen); position: relative; }
  .treatments-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 40px; perspective: 1600px; }
  .treatment-card { display: flex; flex-direction: column; gap: 18px; padding-bottom: 30px; color: inherit; position: relative; }
  .treatment-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--t-slow) var(--ease); }
  .treatment-card:hover::after { width: 100%; }
  .treatment-img-wrap {
    position: relative; width: 100%; aspect-ratio: 4/5;
    background: var(--cream-dark);
    border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
    box-shadow: var(--lift-rest);
    transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
  }
  .treatment-card:hover .treatment-img-wrap { box-shadow: var(--lift-hover); transform: perspective(1400px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px); }
  .treatment-img-wrap::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.28); border-radius: 1px; pointer-events: none; z-index: 2; transition: border-color var(--t-mid) ease; }
  .treatment-card:hover .treatment-img-wrap::before { border-color: rgba(201,169,110,0.55); }
  .treatment-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: var(--text-light); }
  .treatment-meta { display: flex; flex-direction: column; gap: 6px; }
  .treatment-name { font-family: var(--display); font-size: var(--fs-card); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--text); transition: color var(--t-mid) ease; }
  .treatment-card:hover .treatment-name { color: var(--forest); }
  .treatment-flag {
    position: absolute; left: 18px; bottom: 18px; z-index: 3;
    background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%);
    border: 1px solid rgba(201,169,110,0.45); border-radius: var(--radius);
    padding: 8px 14px; color: var(--gold-bright); white-space: nowrap;
    box-shadow: 0 10px 24px -14px rgba(5,18,13,0.7);
  }
  .treatment-desc { font-size: var(--fs-note); line-height: 1.6; color: var(--text-muted); }

  .treatment-cta-wrap { background: linear-gradient(160deg, var(--forest-mid) 0%, var(--forest) 55%, var(--forest-deep) 100%); border-color: rgba(201,169,110,0.35); box-shadow: var(--lift-rest-dark); display: flex; align-items: flex-end; }
  .treatment-card:hover .treatment-cta-wrap { box-shadow: var(--lift-hover-dark); }
  .treatment-cta-wrap::before { border-color: rgba(201,169,110,0.3); }
  .treatment-card:hover .treatment-cta-wrap::before { border-color: rgba(201,169,110,0.55); }
  .treatment-cta-inner { padding: 34px 28px; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
  .treatment-cta-label { color: var(--gold); }
  .treatment-cta-title { font-family: var(--display); font-size: var(--fs-card); line-height: 1.25; color: var(--cream); }
  .treatment-cta-title em { font-style: italic; font-weight: 400; color: var(--gold-bright); }
  .treatment-cta-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); color: var(--cream); margin-top: 4px; }
  .treatment-cta-link svg { transition: transform var(--t-mid) var(--ease); }
  .treatment-card:hover .treatment-cta-link svg { transform: translateX(5px); }

  /* ===== B·Safe ===== */
  .bsafe-section { background: var(--cream); position: relative; }
  .bsafe-grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(48px, 6vw, 100px); align-items: start; }
  .bsafe-intro h2 { margin: 0 0 var(--gap-m); }
  .bsafe-intro p { margin: 0; max-width: 26em; color: var(--text-muted); }
  .bsafe-cards { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; perspective: 1600px; }
  .bsafe-card {
    background: var(--paper); padding: 40px 34px;
    display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift-rest);
  }
  .bsafe-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease); z-index: 4; }
  .bsafe-card:hover::before { transform: scaleX(1); }
  .bsafe-card:hover { box-shadow: var(--lift-hover); }
  .bsafe-num { align-self: flex-start; background: var(--forest); color: var(--gold-bright);
    padding: 7px 13px 6px; border-radius: var(--radius); margin-bottom: 4px; }
  .bsafe-title { font-family: var(--display); font-size: var(--fs-card); font-weight: 400; letter-spacing: -0.01em; line-height: 1.2; color: var(--forest); }
  .bsafe-desc { font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.7; color: var(--text-muted); }

  /* ===== Stimmen und Geschichten: eine Sektion statt zwei ===== */
  .voices-section { background: var(--cream); position: relative; }
  .voices-head { display: grid; grid-template-columns: minmax(0,0.75fr) minmax(0,1.25fr); gap: var(--gap-m) clamp(36px, 4vw, 72px); align-items: end; padding-bottom: var(--gap-m); border-bottom: 1px solid var(--border-gold); margin-bottom: var(--gap-xl); position: relative; }
  .voices-head::after { position: absolute; bottom: -4px; left: 0; }
  .voices-head p { margin: 0; max-width: 34em; color: var(--text-muted); }
  .voices-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; perspective: 1600px; margin-bottom: var(--gap-xl); }
  .voice-card {
    display: flex; flex-direction: column; gap: 18px; padding: 20px; position: relative; overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--lift-rest);
  }
  .voice-card:hover { box-shadow: var(--lift-hover); }
  .voice-img { width: 100%; height: 210px; background: var(--cream-dark); border-radius: 1px; border: 1px solid var(--line); overflow: hidden; position: relative; }
  .voice-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: var(--text-light); }
  .voice-quote { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--fs-item); line-height: 1.5; margin: 0; color: var(--forest); position: relative; padding-left: 20px; }
  .voice-quote::before { content: '\201C'; position: absolute; left: 0; top: -0.06em; font-size: 32px; line-height: 1; color: var(--gold); opacity: 0.75; font-family: var(--display); font-style: normal; }
  .voice-meta { color: var(--gold-deep); letter-spacing: 0.16em; }

  .reels-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px; perspective: 1600px; }
  .reel-card { border: 1px solid var(--forest); border-radius: var(--radius); overflow: hidden; position: relative; background: var(--mat); box-shadow: var(--lift-rest-dark); }
  .reel-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.32); border-radius: 1px; pointer-events: none; z-index: 2; transition: border-color var(--t-mid) ease; }
  .reel-card:hover { box-shadow: var(--lift-hover-dark); }
  .reel-card:hover::before { border-color: rgba(201,169,110,0.6); }
  .reel-placeholder { width: 100%; aspect-ratio: 9/16; background: transparent; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: rgba(242,240,234,0.45); }
  .reel-play { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(201,169,110,0.55); border-radius: 50%; color: var(--gold); transition: border-color var(--t-mid) ease, color var(--t-mid) ease, transform var(--t-mid) var(--ease); }
  .reel-card:hover .reel-play { border-color: var(--gold-bright); color: var(--gold-bright); transform: scale(1.06); }
  .reels-label { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 18px; margin-bottom: calc(-1 * var(--gap-s)); }
  .reels-label::before { content: ''; width: 40px; height: 1px; background: var(--gold); flex: 0 0 auto; align-self: center; }
  .reel-tag { color: var(--text-light); }

  /* ===== Bewertungen ===== */
  .ratings-bar { background: var(--cream); position: relative; }
  .ratings-inner { max-width: 1440px; margin: 0 auto; padding: 76px var(--pad-side); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 28px; perspective: 1600px; }
  .rating-item {
    display: flex; align-items: center; gap: 34px; padding: 34px 38px 34px 44px;
    border: 1px solid var(--line); border-radius: var(--radius); position: relative; overflow: hidden;
    background: var(--paper); box-shadow: var(--lift-rest);
  }
  .rating-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
    background: linear-gradient(180deg, var(--forest-mid) 0%, var(--forest-deep) 100%); }
  .rating-item:hover { box-shadow: var(--lift-hover); }
  .rating-score { font-family: var(--display); font-size: calc(var(--fs-num) * 1.28); line-height: 1; font-weight: 400; letter-spacing: -0.02em; color: var(--forest); font-variant-numeric: tabular-nums; position: relative; padding-bottom: 12px; }
  .rating-score::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 1px; background: var(--gold); }
  .rating-info { display: flex; flex-direction: column; gap: 10px; }
  .rating-label { color: var(--text-muted); }
  .rating-stars { color: var(--gold-deep); letter-spacing: 0.2em; font-size: 16px; line-height: 1; }

  /* ===== Leitsatz ===== */
  .contact-cta { text-align: center; padding: clamp(96px, 10vw, 150px) var(--pad-side); background: var(--cream-warm); position: relative; }
  .contact-cta::before { content: ''; position: absolute; inset: 40px; border: 1px solid rgba(201,169,110,0.38); pointer-events: none; }
  .contact-cta::after { content: ''; position: absolute; inset: 46px; border: 1px solid rgba(201,169,110,0.14); pointer-events: none; }
  .contact-cta p { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--fs-lead); line-height: 1.42; color: var(--forest); margin: 0 auto var(--gap-l); max-width: 20em; position: relative; }

  /* ===== OP Raeume ===== */
  .op-section { background: var(--cream); position: relative; }
  .op-head { display: grid; grid-template-columns: minmax(0,0.7fr) minmax(0,1.3fr); gap: clamp(48px, 6vw, 100px); align-items: start; margin-bottom: var(--gap-xl); }
  .op-head p { margin: 0; max-width: var(--measure); }
  .op-images { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; max-width: 960px; perspective: 1600px; }
  .op-img-wrap {
    position: relative; width: 100%; aspect-ratio: 4/3;
    background: var(--mat); padding: 10px;
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--lift-rest-dark); border: 1px solid var(--forest);
  }
  .op-img-wrap:hover { box-shadow: var(--lift-hover-dark); }
  .op-img-wrap::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.5); border-radius: 1px; pointer-events: none; z-index: 2; transition: border-color var(--t-mid) ease; }
  .op-img-wrap:hover::before { border-color: rgba(201,169,110,0.55); }
  .op-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--cream-dark); font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: var(--text-light); }

  /* ===== Kanal und Infoabend ===== */
  .channel-section { background: var(--cream); position: relative; }
  .channel-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, var(--border-gold) 50%, transparent 95%); }
  .channel-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(48px, 5vw, 80px); align-items: stretch; perspective: 1600px; }
  .channel-info { display: flex; flex-direction: column; justify-content: center; gap: var(--gap-m); max-width: 34em; }
  .channel-info .overline { margin-bottom: 0; }
  .channel-info p { margin: 0; }
  .channel-info .cta-primary { align-self: flex-start; }
  .event-card {
    background: linear-gradient(135deg, var(--forest-mid) 0%, var(--forest) 45%, var(--forest-deep) 100%);
    color: var(--cream-warm); border-radius: var(--radius); padding: 56px 52px;
    display: flex; flex-direction: column; gap: var(--gap-m); justify-content: center; position: relative; overflow: hidden;
    border: 1px solid rgba(201,169,110,0.28); box-shadow: var(--lift-rest-dark);
  }
  .event-card:hover { box-shadow: var(--lift-hover-dark); }
  .event-card::before { content: ''; position: absolute; top: -140px; right: -140px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(201,169,110,0.1) 0%, transparent 65%); pointer-events: none; }
  .event-overline { display: flex; align-items: center; gap: 18px; }
  .event-overline span:first-child { display: block; flex: 0 0 auto; }
  .event-overline span:last-child { color: var(--gold); }
  .event-card h3 { font-family: var(--display); font-style: italic; font-weight: 400; font-size: var(--fs-sub); line-height: 1.2; margin: 0; color: var(--cream); }
  .event-card p { margin: 0; font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.75; color: rgba(242,240,234,0.84); max-width: 27em; }
  .event-meta { display: flex; flex-wrap: wrap; gap: 10px 36px; padding-top: 4px; font-family: var(--body); font-weight: 400; font-size: var(--fs-note); letter-spacing: 0.04em; color: rgba(242,240,234,0.66); }
  .cta-outline {
    display: inline-flex; align-items: center; gap: 14px; align-self: flex-start;
    border: 1px solid rgba(242,240,234,0.38); color: var(--cream); padding: 16px 30px; border-radius: var(--radius);
    font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta); letter-spacing: var(--ls-cta); line-height: 1.35;
    position: relative; transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
  }
  .cta-outline::after { content: ''; position: absolute; inset: 4px; border: 1px solid transparent; transition: border-color var(--t-mid) ease; pointer-events: none; }
  .cta-outline:hover { border-color: var(--cream); background: var(--cream); color: var(--forest); }
  .cta-outline:hover::after { border-color: rgba(201,169,110,0.6); }
  .cta-outline svg { transition: transform var(--t-mid) var(--ease); }
  .cta-outline:hover svg { transform: translateX(4px); }

  /* ===== Anfrage ===== */
  .form-section { background: var(--linen); position: relative; }
  .form-grid { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: clamp(48px, 6vw, 100px); align-items: start; }
  .form-intro h2 { margin: 0 0 var(--gap-m); }
  .form-intro p { margin: 0 0 var(--gap-s); max-width: 24em; color: var(--text-muted); }
  .contact-form { display: flex; flex-direction: column; gap: var(--gap-m); max-width: 640px; }
  .form-field { display: flex; flex-direction: column; gap: 10px; }
  .form-field label { color: var(--text-light); }
  .form-field input, .form-field select, .form-field textarea {
    font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.4; color: var(--text);
    background: #fffdf9; border: 1px solid rgba(10,26,19,0.14); border-radius: var(--radius); padding: 16px 20px;
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  }
  .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-light); font-style: italic; }
  .form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: rgba(201,169,110,0.5); }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-pale); outline: none; }
  .form-field select { appearance: none; cursor: pointer; padding-right: 52px; width: 100%; }
  .select-wrap { position: relative; }
  .select-wrap svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--forest); }
  .form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-m); }
  .checkbox-field { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; max-width: 600px; }
  .checkbox-field input { appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 4px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fffdf9; cursor: pointer; position: relative; transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease; }
  .checkbox-field input:checked { background: var(--forest); border-color: var(--forest); }
  .checkbox-field input:checked::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
  .checkbox-field span { font-family: var(--body); font-weight: 400; font-size: var(--fs-note); line-height: 1.65; color: var(--text-muted); }
  .checkbox-field a { color: var(--forest); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,169,110,0.7); }
  .checkbox-field a:hover { color: var(--gold-deep); }

  /* ===== Fragen an Dr. Fetai ===== */
  .faq-section { background: var(--cream); position: relative; }
  .faq-grid { display: grid; grid-template-columns: minmax(0,0.7fr) minmax(0,1.3fr); gap: clamp(48px, 6vw, 100px); align-items: start; }
  .faq-intro { position: sticky; top: 130px; }
  .faq-intro h2 { margin: 0 0 var(--gap-m); }
  .faq-portrait { position: relative; width: 100%; max-width: 320px; aspect-ratio: 4/5; border: 1px solid var(--forest); border-radius: var(--radius); padding: 10px; background: var(--mat); box-shadow: var(--lift-rest-dark); }
  .faq-portrait::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(201,169,110,0.55); border-radius: 1px; pointer-events: none; z-index: 2; }
  .faq-portrait-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: var(--cream-dark); font-family: var(--body); font-style: italic; font-size: var(--fs-placeholder); color: var(--text-light); }
  .faq-list { border-top: 1px solid var(--border-gold); }
  details { border-bottom: 1px solid var(--line); position: relative; }
  details::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--gold); opacity: 0; transition: opacity var(--t-fast) ease; }
  details[open]::before { opacity: 0.8; }
  summary {
    font-family: var(--display); font-size: var(--fs-item); font-weight: 400; letter-spacing: -0.01em; line-height: 1.35;
    color: var(--text); padding: 28px 56px 28px 0; cursor: pointer; list-style: none; position: relative;
    transition: color var(--t-fast) ease, padding var(--t-mid) var(--ease);
  }
  summary::-webkit-details-marker { display: none; }
  summary:hover { color: var(--forest); }
  details[open] summary { padding-left: 20px; }
  summary svg { position: absolute; right: 6px; top: 48px; transform: translateY(-50%); pointer-events: none; transition: transform var(--t-mid) var(--ease); color: var(--gold); }
  details[open] summary svg { transform: translateY(-50%) rotate(180deg); }
  details p { margin: 0 0 32px 20px; max-width: 40em; font-size: var(--fs-body); color: var(--text-muted); }
  details p a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,169,110,0.7); }

  /* ===== Fusszeile ===== */
  footer { background: linear-gradient(180deg, var(--forest) 0%, var(--forest-deep) 100%); color: var(--cream-warm); position: relative; border-top: 1px solid rgba(201,169,110,0.2); }
  footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 10%, var(--gold) 50%, transparent 90%); opacity: 0.4; }
  .footer-inner { max-width: 1440px; margin: 0 auto; padding: 92px var(--pad-side) 52px; display: grid; grid-template-columns: minmax(0,1.2fr) repeat(4, minmax(0,1fr)); gap: 56px; }
  .footer-logo img { height: 68px; width: auto; opacity: 0.88; transition: opacity var(--t-fast) ease; }
  .footer-logo img:hover { opacity: 1; }
  .footer-col { display: flex; flex-direction: column; gap: 12px; }
  .footer-col-title { font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: rgba(242,240,234,0.6); margin-bottom: 8px; position: relative; padding-bottom: 10px; }
  .footer-col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 1px; background: var(--gold); opacity: 0.6; }
  .footer-col a { font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.4; color: rgba(242,240,234,0.86); position: relative; display: inline-block; width: fit-content; }
  .footer-col a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--t-mid) ease; }
  .footer-col a:hover { color: var(--cream); }
  .footer-col a:hover::after { width: 100%; }
  .footer-hours { display: grid; grid-template-columns: auto auto; gap: 10px 22px; white-space: nowrap; font-family: var(--body); font-weight: 400; font-size: var(--fs-small); line-height: 1.4; color: rgba(242,240,234,0.86); }
  .footer-hours span:nth-child(odd) { color: rgba(242,240,234,0.5); }
  .footer-bottom { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-side); }
  .footer-bottom-inner {
    border-top: 1px solid rgba(242,240,234,0.1); padding: 36px 0; display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center; text-align: center; gap: 16px 40px;
    font-family: var(--body); font-weight: 400; font-size: var(--fs-small);
  }
  .footer-bottom-inner a, .footer-bottom-inner span { display: inline-flex; align-items: center; gap: 10px; color: rgba(242,240,234,0.78); position: relative; }
  .footer-bottom-inner svg { color: var(--gold); flex: 0 0 auto; }
  .footer-bottom-inner a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--gold); transition: width var(--t-mid) ease; }
  .footer-bottom-inner a:hover { color: var(--cream); }
  .footer-bottom-inner a:hover::after { width: 100%; }
  .footer-divider { width: 1px; height: 18px; background: rgba(242,240,234,0.15); display: block; }
  .footer-copyright { max-width: 1440px; margin: 0 auto; padding: 26px var(--pad-side) 46px; border-top: 1px solid rgba(242,240,234,0.08); font-family: var(--ui); font-weight: 400; text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--ls-micro); color: rgba(242,240,234,0.45); text-align: center; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 1180px) {
    .sl-grid { grid-template-columns: minmax(0,1fr); gap: var(--gap-xl); }
    .sl-head p { max-width: none; }
  }
  @media (max-width: 1100px) {
    .mainnav { display: none; }
    .logo-word { display: block; }
    .about-grid, .bsafe-grid, .form-grid, .channel-grid, .faq-grid, .op-head, .voices-head { grid-template-columns: minmax(0,1fr); gap: var(--gap-xl); }
    .about-sticky, .faq-intro { position: static; max-width: 420px; }
    .treatments-grid, .voices-grid, .reels-strip, .footer-inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .ratings-inner { grid-template-columns: minmax(0,1fr); gap: 32px; }
    .facts-inner, .voices-grid, .reels-strip, .treatments-grid, .bsafe-cards, .ratings-inner, .op-images, .channel-grid { perspective: none; }
    .float-bar { top: 50%; }
    .float-btn { padding: 14px; gap: 0; }
    .float-label { display: none; }
  }
  @media (max-width: 980px) {
    .sl-labels { display: none; }
    .sl-legend { display: block; }
    /* Die Beschriftungsspalte faellt weg, also zeigen wir nur den Schnitt und
       lassen den leeren rechten Rand aus dem Rahmen laufen. */
    .sl-frame { overflow: hidden; }
    .sl-svg { width: 149%; max-width: none; }
  }
  @media (max-width: 900px) {
    .facts-inner { grid-template-columns: minmax(0,1fr); }
  }
  @media (max-width: 760px) {
    :root { --fs-label: 11.5px; --fs-micro: 10.5px; --fs-body: 17px; --fs-small: 16px; --fs-note: 15px;
             --fs-cta: 12px; --fs-card: 21px; --fs-item: 19px; --gap-xl: 56px; }
    .header-inner, .header.scrolled .header-inner { padding: 14px 20px; }
    .logo img, .header.scrolled .logo img { height: 38px; }
    .float-bar { top: auto; bottom: 22px; transform: none; opacity: 0; pointer-events: none; transition: opacity var(--t-mid) ease; }
    .float-bar.show { opacity: 1; pointer-events: auto; }
    .hero-actions { align-items: center; }
    .float-btn { padding: 13px 12px; }
    .cta-primary { padding: 15px 24px; width: 100%; max-width: 340px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .section { padding: 76px 24px; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 44px; }
    .voices-head { margin-bottom: 44px; }
    .voices-grid, .bsafe-cards, .op-images, .footer-inner { grid-template-columns: minmax(0,1fr); }
    .treatments-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 16px; }
    .treatment-card { gap: 12px; padding-bottom: 20px; }
    .treatment-name { font-size: var(--fs-item); }
    .treatment-desc { display: none; }
    .treatment-cta-inner { padding: 20px 16px; gap: 10px; }
    .treatment-cta-title { font-size: var(--fs-item); }
    .treatment-cta-label, .treatment-cta-link { font-size: var(--fs-cta); }
    .reels-strip { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .form-row { grid-template-columns: minmax(0,1fr); }
    .footer-inner { gap: 32px; padding: 68px 24px 40px; }
    .footer-bottom { padding: 0 24px; }
    .footer-bottom-inner { flex-direction: column; gap: 14px; }
    .footer-divider { display: none; }
    .footer-copyright { padding: 24px 24px 38px; }
    .contact-cta::before { inset: 14px; }
    .contact-cta::after { inset: 20px; }
    .facts-inner { padding-top: 44px; }
    .fact-item { padding: 34px 26px; }

    .rating-item { flex-direction: column; align-items: flex-start; gap: 14px; padding: 28px 24px; }

    .event-card { padding: 38px 26px; }
    .portrait-frame, .faq-portrait { max-width: 320px; margin: 0 auto; }
    .bsafe-card { padding: 34px 26px; }
    .assoc-inner { padding: 54px 24px; gap: 32px; }
    .assoc-logos { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
    summary { padding: 24px 44px 24px 0; }
    summary svg { top: 42px; }
    details[open] summary { padding-left: 14px; }
    details p { margin-left: 14px; }
    .about-text { max-width: none; }
    .sl-frame { padding: 7px; }
  }
  @media (max-width: 380px) {
    .cta-primary { padding: 13px 18px; }
  }

  /* Touch: keine Neigung, nur ruhiges Anheben */
  @media (hover: none) {
    [data-tilt], [data-tilt]:hover { transform: none; }
  }
  /* Bewegung nur, wenn erwuenscht */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    [data-tilt], [data-tilt]:hover { transform: none; }
    .hero-photo, .hero-content > * { animation: none; }
  }