/* ============================================================
   ELJÉ Aesthetics · Helles Theme (v2)

   Abgeleitet aus dem Einrichtungs-Rendering der Kundin: warmes Creme,
   Greige-Wand, poliger heller Boden, goldene Buchstaben, warmes indirektes
   Licht. Die Goldfamilie bleibt unverändert - es war nie die Farbe falsch,
   sondern die Helligkeit.

   AUFBAU
   Die Datei überschreibt nur die Farb-Tokens aus :root. Layout, Typografie und
   Abstände bleiben unangetastet. Sie muss NACH dem Haupt-CSS geladen werden.

   KONTRASTE (gerechnet, nicht geschätzt)
     --ink       #2E241A auf --bg #F4EEE7 ....... 13.18:1  AAA
     --ink-mid   #5A4A38 auf --bg ............... 7.38:1   AAA
     --gold-text #775C24 auf --bg ............... 5.46:1   AA
     --gold-text #775C24 auf --bg-soft #EAE0D6 .. 4.83:1   AA
     --ink-soft  #6E5D48 auf --bg-soft ......... 4.86:1   AA
     --gold-em   #8A6D33 auf --bg (>=24px) ..... 4.22:1   AA
   Das helle Gold #C9A961 erreicht auf Creme nur 1.95:1 und ist deshalb
   ausschliesslich Fläche, Linie und Zierrat - niemals Text. Genau so wird es
   im Rendering auch eingesetzt: als Material, nicht als Schrift.

   DUNKLE BÄNDER
   Das Hero ist HELL - es ist das Erste, was man sieht, und entscheidet den
   Gesamteindruck. Dunkel bleiben nur das Zitat-Band, die Eröffnungs-Sektion
   und der Footer, als Rhythmus zwischen den hellen Flächen.
   ============================================================ */

:root {
  /* Die Seite ist bewusst einfarbig hell - die Marke ist es. Ohne diese
     Ansage stellt der Browser im Dunkelmodus native Teile dunkel: die
     Textmarke im Eingabefeld, den Hintergrund einer automatisch ausgefüllten
     Zeile, Scrollbalken. Auf den hellen Feldern des Buchungsformulars sieht
     das nach Fehler aus. Das <meta name="color-scheme"> im Kopf sagt dasselbe
     und gilt schon, bevor diese Datei da ist. */
  color-scheme: light;

  /* --- Helle Flächen --- */
  --bg:        #F4EEE7;   /* Grundfläche: Creme wie Theke und Boden */
  --bg-soft:   #EAE0D6;   /* Greige wie die Wand, für abgesetzte Bänder */
  --bg-warm:   #FBF7F2;   /* fast Weiss, für Karten und Kacheln */

  /* --- Schrift --- */
  --ink:       #2E241A;   /* warmes Dunkelbraun statt Schwarz */
  --ink-mid:   #5A4A38;   /* Sekundärtext, Fliesstext-Grau */
  --ink-soft:  #6E5D48;   /* Beschriftungen, Eyebrows - 4.86:1 auf --bg-soft */

  /* --- Bestehende Tokens auf die helle Welt umgelegt --- */
  --black:        var(--bg);
  --bronze-deep:  var(--bg-soft);
  --bronze:       var(--bg-warm);
  --bronze-light: #DED2C5;
  --bronze-glow:  #D3C4B3;

  --text:      var(--ink);
  --text-mute: var(--ink-mid);
  --text-dim:  var(--ink-soft);

  /* Gold: Fläche hell, Text dunkel. Beide aus derselben Familie wie das Logo. */
  --gold:        #B08F4C;   /* Linien, Rahmen, Zierrat */
  --gold-bright: #C9A961;   /* Glanzlicht, Flächen - wie im Logo */
  --gold-soft:   #C0A468;
  --gold-dark:   #775C24;   /* dunkelste Stufe, AA-fest */
  --gold-text:   #775C24;   /* Gold als Schrift: 5.46:1 auf --bg */

  --champagne:  #8A7350;
  --warm-white: var(--ink);  /* war Schrift auf dunkel -> jetzt dunkel auf hell */
}

/* Grundfläche und Grundschrift */
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); }

/* ------------------------------------------------------------
   Dunkle Akzentbänder - bewusst erhalten für Rhythmus
   Diese Sektionen setzen die Tokens lokal auf die Originalwerte zurück.
   ------------------------------------------------------------ */
.bridge,
.s-hero,
.p-hero {
  --bg:        #0a0805;
  --bg-soft:   #16100a;
  --bg-warm:   #251a10;
  --ink:       #e8dcc4;
  --ink-mid:   #a8957a;
  --ink-soft:  #95825f;
  --text:      #e8dcc4;
  --text-mute: #a8957a;
  --text-dim:  #95825f;
  --warm-white: #f8f2e4;
  --gold:        #c9a961;
  --gold-bright: #e5c77e;
  --gold-dark:   #8c6f37;
  --gold-text:   #a8894e;
  --black:       #0a0805;
  --bronze-deep: #16100a;
  --bronze:      #251a10;
  background-color: #0a0805;
  color: #e8dcc4;
}

/* Die Navigation liegt über dem dunklen Hero und bleibt dunkel getönt. */
.nav {
  background: rgba(10, 8, 5, 0.82);
}
.nav a,
.nav .nav__link,
.nav__brand-text,
.nav__links a,
.lang button {
  color: #e8dcc4;
}
.lang button.active { color: #e5c77e; }
.nav__cta { color: #e5c77e; border-color: rgba(201, 169, 97, 0.5); }

/* ------------------------------------------------------------
   Stellen mit hart codierten Farben, die den Tokens nicht folgen
   ------------------------------------------------------------ */

/* Services-Sektion war schon hell - jetzt an die neue Palette angeglichen,
   damit sie sich nicht mehr vom Rest absetzt. */
.services {
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg-soft) 100%);
  color: var(--ink);
}
.services__head .title-l { color: var(--ink); }
.services__head .title-l em { color: var(--gold-text); }
.services__head .body-lead { color: var(--ink-mid); }
.service {
  background: #FFFDFA;
  border-color: rgba(176, 143, 76, 0.28);
}
.service__title { color: var(--ink); }
.service__desc { color: var(--ink-mid); }
.service__tag { color: var(--gold-text); }
.service__num { color: var(--ink-soft); }
.services__all { color: var(--gold-text); border-bottom-color: rgba(119, 92, 36, 0.45); }
.services__all:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Preistabellen */
.s-pricing { background: var(--bg-soft); }
.s-pricing__list { border-top-color: rgba(119, 92, 36, 0.28); }
.s-pricing__row { border-bottom-color: rgba(119, 92, 36, 0.16); }
.s-pricing__row:hover { background: rgba(176, 143, 76, 0.07); }
.s-pricing__name { color: var(--ink); }
.s-pricing__name small { color: var(--ink-mid); }
.s-pricing__price { color: var(--gold-text); }
.s-pricing__num { color: var(--ink-soft); }
.s-pricing__duration { color: var(--ink-soft); }
.s-pricing__group h3 { color: var(--gold-text); }
.s-pricing__group span { color: var(--ink-soft); }
.s-pricing__note { color: var(--ink-mid); border-left-color: rgba(119, 92, 36, 0.4); }

/* Preisseite */
.p-main { background: var(--bg); }
.p-block { border-bottom-color: rgba(119, 92, 36, 0.14); }
.p-block__title { color: var(--ink); }
.p-block__no { color: var(--ink-soft); }
.p-block__tag { color: var(--ink-soft); }
.p-block__intro { color: var(--ink-mid); }
.p-block__more { color: var(--gold-text); border-bottom-color: rgba(119, 92, 36, 0.45); }
.p-block__more:hover { color: var(--ink); border-bottom-color: var(--ink); }
.p-toc {
  background: rgba(244, 238, 231, 0.94);
  border-top-color: rgba(119, 92, 36, 0.22);
  border-bottom-color: rgba(119, 92, 36, 0.22);
}
.p-toc__label { color: var(--gold-text); }
.p-toc__links a { color: var(--ink-mid); }
.p-toc__links a:hover { color: var(--gold-text); border-bottom-color: var(--gold-text); }

/* Rechtstexte */
.l-page { background: var(--bg); }
.l-page__title { color: var(--ink); }
.l-page__lead { color: var(--ink-mid); }
.l-page__updated { color: var(--ink-soft); }
.l-section h2 { color: var(--gold-text); }
.l-section p { color: var(--ink-mid); }
.l-section strong { color: var(--ink); }
.l-section a { color: var(--gold-text); border-bottom-color: rgba(119, 92, 36, 0.4); }
.l-notice {
  background: rgba(176, 143, 76, 0.12);
  border-color: rgba(119, 92, 36, 0.5);
  color: var(--ink);
}
.l-notice strong { color: var(--gold-text); }
.l-notice em { color: var(--gold-text); }
.l-flag { background: rgba(176, 143, 76, 0.09); border-left-color: var(--gold-dark); }

/* Footer bleibt dunkel - rahmt die helle Seite unten sauber ab. */
.footer {
  background: #16100a;
  color: #e8dcc4;
}
.footer a { color: #d8c9ac; }
.footer a:hover { color: #e5c77e; }
.footer__brand { color: #e5c77e; }
.footer__tag { color: #a8957a; }
.footer h3, .footer h4 { color: #e5c77e; }

/* ------------------------------------------------------------
   Lange deutsche Wörter dürfen nirgends aus ihrem Kasten laufen

   Deutsch bildet Komposita, die in einer schmalen Spalte nicht umbrechen
   können: "Laser-Haarentfernung", "Wimpernkranzverdichtung",
   "Gesichtsbehandlung". Der Standardwert overflow-wrap: normal bricht nur an
   Leerzeichen - das Wort läuft dann über, und weil die Karten
   overflow: hidden tragen, wird es abgeschnitten.

   Aufgefallen am 05.09.2026 bei 200 % Textgrösse (WCAG 1.4.4 verlangt, dass
   die Seite das aushält): Auf der Startseite kappten vier Stellen,
   .service__desc verlor sichtbar Text. An drei Einzelstellen war die Regel
   schon gesetzt - hier gilt sie jetzt überall.

   break-word statt anywhere: Es greift nur, wenn das Wort sonst überliefe,
   und lässt normale Zeilen unverändert. Kein hyphens: auto - das würde jeden
   Absatz auf der Seite anders setzen, und darum geht es hier nicht.
   ------------------------------------------------------------ */
body { overflow-wrap: break-word; }


/* ------------------------------------------------------------
   Kopfleiste bei stark vergrösserter Schrift

   Bei 200 % Textgrösse - die WCAG 1.4.4 verlangt - passte die Kopfleiste
   nicht mehr in ein Telefon. Gemessen am 05.09.2026 auf einem iPhone 13
   (390px): Der Sprachumschalter kam auf 185px, .nav__right insgesamt auf
   245px, dazu die Wortmarke. Zusammen drückten sie die Ansicht auf 486px
   auseinander - die ganze Seite liess sich seitwärts schieben, auf jeder
   Unterseite.

   Die Abfrage steht in em, damit sie auf dasselbe reagiert, was das Problem
   erzeugt: die Schriftgrösse. Statt die Schrift am Wachsen zu hindern - das
   wäre gegen den Sinn der Einstellung - darf die Leiste umbrechen und wird
   enger gesetzt.

   Warum 19em und nicht 23em oder 26em: Die Abfrage soll NUR bei vergrösserter
   Schrift greifen, nicht auf schmalen Geräten mit normaler Schrift. In em
   gerechnet ist eine Ansicht umso schmaler, je grösser die Grundschrift ist:
     390px bei 16px Grundschrift = 24.4em    -> greift nicht
     320px bei 16px Grundschrift = 20.0em    -> greift nicht
     390px bei 32px Grundschrift = 12.2em    -> greift
     320px bei 32px Grundschrift = 10.0em    -> greift
   Mit 23em stapelte die Preisliste auch auf einem normalen iPhone SE, was
   nicht gewollt war. 19em trennt die beiden Fälle sauber.
   ------------------------------------------------------------ */
@media (max-width: 19em) {
  .nav {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .nav__right { gap: 0.35rem; flex-shrink: 0; }
  .lang { font-size: 0.72rem; }
  .lang button { padding: 0.75rem 0.5rem; }
  .nav__brand, .nav__wordmark { min-width: 0; }
}


/* ------------------------------------------------------------
   Rasterspalten und Polster bei stark vergrösserter Schrift

   Zwei Dinge laufen bei 200 % Textgrösse aus dem Ruder, und beide sind
   Nebenwirkungen davon, dass Masse in rem stehen - was für Schrift richtig
   ist, für Polster aber nicht immer:

   1. Polster wachsen mit. Eine Ablauf-Karte hat 3rem/2rem Innenabstand; bei
      32px Grundschrift sind das 128px waagerecht auf einem 390px-Gerät. Für
      den Text bleiben 200px, lange Wörter drücken die Karte auf 438px.
   2. Eine Rasterspalte mit 1fr hat implizit min-width: auto. Passt der Inhalt
      nicht, wächst die SPALTE - und mit ihr die Seite. Gemessen am
      05.09.2026: /laser kam so auf 486px Breite bei 390px Ansicht, /preise
      auf 469px. Die Seite liess sich seitwärts schieben.

   min-width: 0 stellt das Verhältnis um: Nicht die Spalte wächst, sondern
   der Text bricht - zusammen mit dem globalen overflow-wrap weiter oben.
   ------------------------------------------------------------ */
@media (max-width: 19em) {
  .s-process__grid > *,
  .faq__inner > *,
  .s-faq__inner > *,
  .s-cross__grid > *,
  .services__grid > *,
  .founder__solo > *,
  .p-block > * {
    min-width: 0;
  }
  .s-process__step { padding: 1.5rem 1.1rem; }
  .service { padding: 1.5rem 1.2rem; }
  .s-cross__card { padding: 1.2rem; }

  /* anywhere statt break-word - und das ist hier der ganze Unterschied.
     break-word bricht ein zu langes Wort zwar um, verkleinert aber die
     MINDESTBREITE des Elements nicht: Eine 1fr-Spalte bemisst sich weiter am
     längsten Wort und wächst mit. anywhere zählt für die Mindestbreite mit,
     die Spalte bleibt in der Ansicht. Global bleibt es bei break-word, damit
     bei normaler Schrift keine Zeile anders umbricht als bisher. */
  body { overflow-wrap: anywhere; }
}


/* Buttons */
.btn--primary { background: var(--gold-dark); color: #FBF7F2; border-color: var(--gold-dark); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); }

/* Restliche Sektionen: Fliesstext und Titel auf hell */
.ritual, .faq, .cta-final,
.s-overview, .s-process, .s-faq, .s-cross, .s-cta {
  background: var(--bg);
  color: var(--ink);
}
.title-l, .title-m, .s-hero__title, .cta-final__title { color: var(--ink); }
.title-l em, .title-m em { color: var(--gold-text); }
.eyebrow { color: var(--gold-text); }
.body-lead { color: var(--ink-mid); }
.faq__q { color: var(--ink); }
.faq__a { color: var(--ink-mid); }
.s-faq__q { color: var(--ink); }
.s-faq__a { color: var(--ink-mid); }

/* Der Marquee-Streifen: dunkle Schrift auf Creme */
.marquee { background: var(--bg-soft); }
.marquee__item { color: var(--ink-soft); }

/* Founder-Sektion */
.founder { background: var(--bg); color: var(--ink); }
.founder__name { color: var(--ink); }
.founder__role { color: var(--gold-text); }
.founder__bio { color: var(--ink-mid); }
.founder__lead { color: var(--gold-text); }

/* Werdegang: Die Linien sind auf Creme nur mit dem dunklen Gold zu sehen -
   #C9A961 bei 22 % Deckung verschwindet auf #F4EEE7 praktisch. Der Punkt
   wird ebenfalls dunkler; er ist Zierrat, aber Zierrat, das man sieht. */
.cv__title { color: var(--ink); border-bottom-color: rgba(119, 92, 36, 0.28); }
.cv__list { border-left-color: rgba(119, 92, 36, 0.22); }
.cv__item::before { background: var(--gold-text); }
.cv__when { color: var(--gold-text); }
.cv__what { color: var(--ink); }
.cv__where { color: var(--ink-soft); }
.cv__note { color: var(--ink-mid); }

/* Warmes indirektes Licht statt Goldglühen auf Schwarz */
.founder__portrait,
.service {
  box-shadow: 0 18px 50px -28px rgba(70, 52, 28, 0.35);
}


/* ------------------------------------------------------------
   Nachtrag nach dem axe-Durchlauf - vier belegte Kontrastfehler

   Gemessen, nicht vermutet. Die Ursachen im Einzelnen:
   1. --gold (#B08F4C) war als KLEINER Text im Einsatz (.pillar__num,
      .s-cta__pre): 2.65:1. Diese Elemente bekommen --gold-text.
   2. --gold-bright (#C9A961) stand in grossen Kursivtiteln: 1.95:1 bei
      nötigen 3:1. Dafür gibt es jetzt --gold-em (#8A6D33, 4.22:1).
   3. --ink-soft war mit #7A6852 auf --bg-soft nur bei 4.11:1 - abgedunkelt.
   4. Footer und dunkle Bänder erbten die HELL-Tokens, obwohl sie dunkel
      bleiben: dort werden die Tokens jetzt zurückgesetzt.
   ------------------------------------------------------------ */

:root {
  --gold-em: #8A6D33;   /* Gold in grossen Titeln (>=24px), 4.22:1 auf --bg */
}

/* 1 · Gold als kleiner Text */
.s-cta__pre,
.cta-final__pre,
.ritual__num,
.s-process__num {
  color: var(--gold-text);
}

/* 2 · Gold in grossen Kursivtiteln */
.s-cta__title em,
.cta-final__title em,
.title-l em,
.title-m em,
.p-hero__title em,
.p-block__title em {
  color: var(--gold-em);
}

/* 4 · Dunkle Bereiche: Tokens auf die Original-Dunkelpalette zurücksetzen,
       sonst gilt dort das helle --ink-soft und reisst den Kontrast. */
.footer {
  --ink:       #e8dcc4;
  --ink-mid:   #a8957a;
  --ink-soft:  #95825f;   /* 5.07:1 auf #16100a */
  --text:      #e8dcc4;
  --text-mute: #a8957a;
  --text-dim:  #95825f;
  --gold-text: #d8c9ac;
  --gold-em:   #e5c77e;
}
.footer__bottom,
.footer__bottom span,
.footer__tag,
.footer p[data-i18n="footer.note"] {
  color: #a8957a;
}
.footer__bottom a { color: #d8c9ac; }

/* Auch die dunklen Bänder brauchen das eigene Gold-Token */
.bridge, .s-hero, .p-hero {
  --gold-em: #e5c77e;
}


/* ============================================================
   HELLES HERO

   Der erste Eindruck muss hell sein - vorher war das Hero ein dunkles
   Akzentband, wodurch die Seite trotz heller Unterseiten dunkel wirkte.

   BILD
   Vollflächiges Studio-Interieur in der Palette des Rendings (siehe unten).
   Das linke Drittel des Motivs ist leer, dort steht die Wortmarke.

   SOBALD ELIS AUFNAHMEN DA SIND
   Nur --hero-image in .hero__bg-portrait austauschen.
   ============================================================ */

.hero {
  background-color: var(--bg);
  color: var(--ink);
  /* Warmes Licht: ein Saum von links oben, ein weicher Kern rechts -
     nachempfunden der indirekten Beleuchtung im Studio. */
  background-image:
    radial-gradient(120% 90% at 78% 42%, rgba(232, 205, 160, 0.42) 0%, rgba(244, 238, 231, 0) 62%),
    radial-gradient(80% 70% at 6% 8%, rgba(255, 250, 242, 0.9) 0%, rgba(244, 238, 231, 0) 55%),
    linear-gradient(160deg, #FBF7F2 0%, #F4EEE7 48%, #EDE3D8 100%);
}

/* ------------------------------------------------------------
   Vollflächiges Hero-Motiv

   Elis Logofigur als goldenes Wandrelief (build_relief.py), rechts im Bild,
   links freie Fläche für die Wortmarke. Die eigentliche Zuweisung steht bei
   .hero--entwurf weiter unten; die Voreinstellung hier ist dasselbe Relief.

   PFAD ABSICHTLICH ABSOLUT (/assets/…), nicht relativ:
   Ein url() in einer CSS-Variablen wird dort aufgelöst, wo var() BENUTZT wird,
   nicht wo die Variable deklariert ist. Sobald eine Variantenseite
   `background-image: var(--hero-image)` in einem <style>-Block im HTML setzt,
   wandert die Auflösung vom Stylesheet- in den Seitenordner - aus
   ../img/gen/… wurde /img/gen/… und damit ein 404. Absolute Pfade sind
   kontextunabhängig.

   Bis zum 13.09.2026 stand hier ein Frauenmotiv als Voreinstellung für die
   Varianten unter /v2/. Die Varianten gibt es nicht mehr, ihre Motive auch
   nicht.
   ------------------------------------------------------------ */
.hero__bg-portrait {
  --hero-image: url('/assets/img/gen/hero-relief-w2400.jpg');
  position: absolute;
  inset: 0;
  width: auto; height: auto;
  aspect-ratio: auto;
  border: none;
  box-shadow: none;
  background-image: var(--hero-image);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  filter: none;
  z-index: 0;
}

/* Sanfter Creme-Verlauf von links: gibt der Schrift Grund, ohne das Bild
   abzudunkeln. Das Motiv ist dort ohnehin fast leer, deshalb genügt wenig. */
.hero__bg-portrait::after {
  background: linear-gradient(100deg,
    rgba(244, 238, 231, 0.92) 0%,
    rgba(244, 238, 231, 0.78) 26%,
    rgba(244, 238, 231, 0.40) 44%,
    rgba(244, 238, 231, 0.08) 62%,
    rgba(244, 238, 231, 0) 100%);
}

@media (max-width: 900px) {
  /* Schmal liegt der Text über dem Bild - von oben deckend, sonst reisst
     der Kontrast. Bildausschnitt auf die Theke statt auf die leere Wand. */
  .hero__bg-portrait { background-position: 72% center; }
  .hero__bg-portrait::after {
    background: linear-gradient(180deg,
      rgba(244, 238, 231, 0.95) 0%,
      rgba(244, 238, 231, 0.88) 42%,
      rgba(244, 238, 231, 0.70) 68%,
      rgba(244, 238, 231, 0.52) 100%);
  }
}

/* Wortmarke: dunkles Gold, warmer statt glühender Schatten */
.hero__brand {
  color: var(--gold-em);
  text-shadow: 0 6px 34px rgba(119, 92, 36, 0.14);
}
.hero__claim { color: var(--ink); }
.hero__sub   { color: var(--ink-mid); }
.hero__pre   { color: var(--gold-text); }
.hero__scroll { color: var(--ink-soft); }

/* Meta-Kacheln: helle Karten statt dunkler Glasflächen */
.hero__meta {
  background: rgba(251, 247, 242, 0.82);
  border-color: rgba(119, 92, 36, 0.26);
  box-shadow: 0 22px 48px -26px rgba(70, 52, 28, 0.28);
}
.hero__meta-label { color: var(--gold-text); }
.hero__meta-value { color: var(--ink); }

/* Der goldene Bogen ist für Schwarz gezeichnet - auf Creme nur als zarte
   Lichtkante, sonst liegt ein grauer Schleier über der Fläche. */
.hero__arc { opacity: 0.28; }

/* Buttons im Hero */
.hero .btn--primary { background: var(--gold-dark); color: #FBF7F2; border-color: var(--gold-dark); }
.hero .btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.hero .btn--ghost { color: var(--gold-text); border-color: rgba(119, 92, 36, 0.45); }
.hero .btn--ghost:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------
   Navigation auf hellem Grund

   ACHTUNG bei künftigen Änderungen: Die Basis kennt einen ZWEITEN Zustand.
   Beim Scrollen setzt JavaScript die Klasse .scrolled, und die Regel
   `.nav.scrolled { background: rgba(10,8,5,0.85) }` ist spezifischer als ein
   blosses `.nav { … }`. Wird sie hier nicht mit überschrieben, wird die Leiste
   beim Scrollen dunkel, während die Schrift dunkel bleibt - gemessen 1,07:1,
   also faktisch unlesbar. Beide Zustände gehören deshalb immer zusammen
   gepflegt.
   ------------------------------------------------------------ */
.nav,
.nav.scrolled {
  background: rgba(251, 247, 242, 0.88);
  border-bottom: 1px solid rgba(119, 92, 36, 0.14);
}
.nav.scrolled {
  background: rgba(251, 247, 242, 0.94);
  border-bottom-color: rgba(119, 92, 36, 0.20);
  box-shadow: 0 10px 30px -24px rgba(70, 52, 28, 0.45);
}
.nav a,
.nav .nav__link,
.nav__brand-text,
.nav__links > li > a { color: var(--ink); }
.nav .lang button { color: var(--ink-mid); }
.nav .lang button.active { color: var(--gold-text); }
.nav .lang__sep { color: var(--ink-soft); }
.nav__cta { color: var(--gold-text); border-color: rgba(119, 92, 36, 0.45); }
.nav__cta:hover { background: var(--gold-dark); color: #FBF7F2; border-color: var(--gold-dark); }
.nav__caret { color: var(--ink-mid); }
.nav__burger span { background: var(--ink); }

/* Aufklapp-Menü der Navigation */
.nav__submenu { background: rgba(251, 247, 242, 0.98); border-color: rgba(119, 92, 36, 0.18); }
.nav__sub-title { color: var(--ink); }
.nav__sub-tag { color: var(--ink-mid); }
.nav__sub-no { color: var(--ink-soft); }
.nav__submenu-foot { color: var(--ink-mid); border-top-color: rgba(119, 92, 36, 0.16); }
.nav__submenu-all { color: var(--gold-text); }
.mobile-menu { background: rgba(244, 238, 231, 0.98); }
.mobile-menu a { color: var(--ink); }

/* Der Ladebildschirm war schwarz - auf einer hellen Seite blitzt das unschön. */
.loader { background: var(--bg); }
.loader__mark span { color: var(--gold-em); }


/* ============================================================
   LOGO AUF HELLEM GRUND

   Zwei Ursachen machten die Figur vorher fast unsichtbar:

   1. Die Datei. logo_silhouette_*.png war eine Strichzeichnung in HELLEM Gold
      (#d1b78d) für schwarzen Grund, zu 94 % leere Pixel. Auf Creme blieb davon
      ein Geist übrig. Jetzt logo_mark_light_*, aus dem Originallogo abgeleitet
      und in der AA-festen dunklen Goldstufe (siehe build_logo.py).

   2. Die Filter. Beide Logo-Elemente trugen brightness(1.35) bzw. (1.4) plus
      goldene drop-shadow-Glühen - für dunklen Grund gedacht. Auf Creme schiebt
      brightness() das helle Gold Richtung Weiss, und das Goldglühen wird zu
      einem schmutzigen Hof. Beides hier ersetzt durch einen zurückhaltenden
      warmen Schatten, der die feinen Striche trägt statt sie zu überstrahlen.
   ============================================================ */

.hero__brandmark {
  filter: drop-shadow(0 6px 16px rgba(70, 52, 28, 0.16));
}
.nav__brand-icon {
  filter: drop-shadow(0 2px 5px rgba(70, 52, 28, 0.14));
}


/* Mobile-Menü: liegt vollflächig über der Seite und braucht denselben
   hellen Grund samt dunkler Schrift wie die Leiste. */
.mobile-menu { background: rgba(244, 238, 231, 0.98); }
.mobile-menu a { color: var(--ink); }
.mobile-menu a:hover { color: var(--gold-text); }
.nav__burger span { background: var(--ink); }


/* ============================================================
   ERSTER BILDSCHIRM - alles Wesentliche ohne Scrollen

   Gemessen war das Hero 959–1212 px hoch bei Fenstern von 820–900 px; die
   Kennzahlen und teils die Knöpfe lagen unterhalb der Kante. Auf einer
   Vorschauseite ist das fatal: Wer nicht scrollt, sieht keinen Handlungsaufruf.

   Gekürzt wird der Weissraum, nicht der Inhalt. Reihenfolge der Eingriffe:
   Aussenabstände, dann Abstände zwischen den Blöcken, zuletzt Schriftgrade -
   damit die Wirkung erhalten bleibt.

   svh statt vh: Auf Mobilgeräten rechnet vh die Browserleiste mit, das Hero
   wäre dort immer zu hoch für den sichtbaren Bereich.
   ============================================================ */

.hero {
  min-height: 100svh;
  padding-top: clamp(6rem, 11vh, 8rem);
  padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.hero__pre { margin-bottom: clamp(0.8rem, 1.6vh, 1.5rem); }
.hero__wordmark { margin-bottom: clamp(1rem, 2.2vh, 2rem); }
.hero__claim { margin-bottom: clamp(0.8rem, 1.8vh, 1.5rem); }
.hero__sub { margin-bottom: clamp(1.2rem, 2.8vh, 2.2rem); }
.hero__meta { margin-top: clamp(1.2rem, 3vh, 2.5rem); }
.hero__meta-cell { padding: clamp(0.7rem, 1.6vh, 1.2rem) 1.4rem; gap: 0.35rem; }

@media (max-width: 700px) {
  /* Kennzahlen-Kacheln auf dem Telefon kompakter. */
  .hero__meta-cell { padding: 0.7rem 0.6rem; }
  .hero__meta-label { font-size: 0.58rem; letter-spacing: 0.16em; }
  .hero__meta-value { font-size: 0.8rem; line-height: 1.35; }
}






/* ============================================================
   Variante "entwurf" - nach der Vorlage der Kundin (10.08.2026)
   ------------------------------------------------------------
   Drei Dinge unterscheiden sie von den übrigen Varianten:

   1. Das Hero-Bild ist keine Person, sondern Elis eigene Logofigur
      als vergoldetes Wandrelief in einem hellen Raum. Damit fällt
      die Frage "Frau oder Mann im Bild?" weg - es steht die Marke
      da, nicht ein Modell. Erzeugt von build_relief.py aus
      assets/logo.png, also der echten Datei, nicht nachgebaut.

   2. Statt der Kennzahlen (Studio / Fokus / Sprachen) steht unten
      ein Band mit den sechs Behandlungen. Es ist zugleich Navigation.

   3. Alles liegt auf dem ersten Bildschirm - kein Scroll-Hinweis.
   ------------------------------------------------------------ */

.hero--entwurf .hero__bg-portrait {
  --hero-image: url('/assets/img/gen/hero-relief-w2400.jpg');
  /* Die Figur sitzt bei 62 % der Bildbreite. Mit cover landet sie so
     rechts der Mitte und lässt die linke Hälfte für den Text frei. */
  background-position: center center;
}

/* Der Verlauf darf hier flacher sein als bei den Personenbildern:
   Die Wand ist ohnehin fast leer, und die Reliefkanten sollen sichtbar
   bleiben. Deckung links bleibt hoch genug für --ink auf --bg (14.2:1). */
.hero--entwurf .hero__bg-portrait::after {
  background: linear-gradient(100deg,
    rgba(244, 238, 231, 0.94) 0%,
    rgba(244, 238, 231, 0.86) 30%,
    rgba(244, 238, 231, 0.52) 46%,
    rgba(244, 238, 231, 0.10) 60%,
    rgba(244, 238, 231, 0) 100%);
}

/* Das Band steht im Fluss, nicht absolut positioniert.
   ------------------------------------------------------------
   Zuerst war es position:absolute mit bottom:0 und einem unteren Innenabstand
   als Platzhalter. Das war zweimal falsch: Der Bezugsrahmen war .hero__inner
   (transformiert durch die Reveal-Animation), das Band lag also mitten über
   den Knöpfen. Und danach war die reservierte Höhe geraten - im gebündelten
   Chromium wuchs der Text um wenige Pixel und überlappte erneut.

   Als zweite Gitterzeile kann das nicht mehr passieren: Zeile 1 nimmt den
   Rest ein und zentriert den Inhalt, Zeile 2 ist genau so hoch wie das Band.
   Überlappung ist damit strukturell ausgeschlossen, nicht rechnerisch knapp. */
/* Die Gitter-Aufteilung hängt am BAND, nicht am Motiv: Sobald ein Hero das
   Leistungsband trägt, braucht es die zweite Zeile - gleich, welches Bild
   dahinter liegt. Deshalb .hero--band getrennt von .hero--entwurf. */
.hero--band {
  grid-template-rows: 1fr auto;
  /* minmax(0, 1fr) statt der Vorgabe: Eine Gitterspalte ist voreingestellt
     mindestens so breit wie ihr min-content. Auf 320 px zwang der längste
     unteilbare Textteil im Hero die Spalte auf 275 px statt der verfügbaren
     272 - mit den negativen Aussenabständen des Bandes ragte das 4 px über
     den Bildschirmrand. Gemessen, nicht geschätzt. */
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 0;
}
.hero--band .hero__content { max-width: 620px; }
.hero--band .hero__scroll { display: none; }
.hero--entwurf .hero__particles { display: none; }

/* --- Leistungsband ---------------------------------------- */

.hero__leistungen {
  align-self: end;
  /* über die Innenabstände des Heros hinaus bis an beide Kanten */
  margin: 0 calc(var(--gutter) * -1);
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid rgba(138, 109, 51, 0.24);
  /* 86 % plus Unschärfe: Das Relief schimmert durch, ohne die Beschriftungen
     zu kosten - nachgemessen an den Bildpunkten mit tests/kontrast-bild.js. */
  background: rgba(251, 247, 242, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__leistung {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: clamp(0.9rem, 2.4vh, 1.6rem) 0.5rem;
  text-decoration: none;
  color: var(--ink);            /* 14.2:1 auf --bg-warm */
  border-left: 1px solid rgba(138, 109, 51, 0.16);
  transition: background-color 0.25s ease, color 0.25s ease;
  min-width: 0;
}
.hero__leistung:first-child { border-left: none; }
.hero__leistung:hover,
.hero__leistung:focus-visible { background: rgba(232, 205, 160, 0.34); }

.hero__leistung-icon {
  display: block;
  color: var(--gold-em);        /* 4.56:1 auf --bg-warm, > 3:1 für Grafik (1.4.11) */
}
.hero__leistung-icon svg {
  width: clamp(22px, 3.4vh, 30px);
  height: auto;
  display: block;
}

/* Beide Beschriftungen teilen sich die Typografie - sonst steht die kurze
   Fassung in Gemischtschreibung neben der langen in Versalien. */
.hero__leistung-name,
.hero__leistung-kurz {
  font-size: clamp(0.66rem, 1.45vh, 0.78rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  /* Sechs Spalten sind schmal nicht lesbar - zwei Reihen à drei.
     Die Trennlinie der ersten Spalte jeder Reihe entfällt. */
  .hero__leistungen { grid-template-columns: repeat(3, 1fr); }
  .hero__leistung:nth-child(3n+1) { border-left: none; }
  .hero__leistung:nth-child(n+4) { border-top: 1px solid rgba(138, 109, 51, 0.16); }
  .hero--entwurf .hero__bg-portrait { background-position: 62% center; }
}

@media (max-width: 520px) {
  /* Zweispaltig wären es drei Reihen - gemessen 235 px hoch, das drückte den
     Handlungsaufruf unter die Kante. Dreispaltig bleibt es bei zwei Reihen;
     stattdessen schrumpfen Symbol, Schrift und Innenabstand. */
  .hero__leistung { gap: 0.35rem; padding: 0.7rem 0.25rem; }
  .hero__leistung-icon svg { width: 20px; }
  .hero__leistung-name { font-size: 0.58rem; letter-spacing: 0.06em; line-height: 1.3; }
}

@media (max-width: 359px) {
  /* 320x640 ist der engste geprüfte Fall. Zweispaltig braucht das Band dort
     drei Reihen (183 px) und das Hero wuchs auf 734 px - knapp 100 px über die
     Kante. Dreispaltig bleibt es bei zwei Reihen; die Namen brechen dann
     mitten im Wort um, was bei dieser Grösse hinnehmbar ist. Den Rest holen
     die Kürzungen darunter: Vorzeile einzeilig, Wortmarke und Text kleiner.

     Alle Werte gemessen, nicht geschätzt - die Summe muss unter 640 bleiben. */
  .hero__leistung { padding: 0.6rem 0.15rem; gap: 0.3rem; }
  .hero__leistung-icon svg { width: 17px; }
  .hero__leistung-name { font-size: 0.52rem; letter-spacing: 0.02em; line-height: 1.25; }

}

@media (max-width: 520px) and (max-height: 720px) {
  /* Nicht die Breite entscheidet hier, sondern die HÖHE: Auf 360x640 passte
     alles nebeneinander, aber nicht übereinander. Gekürzt wird in derselben
     Reihenfolge wie oben - erst Weissraum, dann Schriftgrade. Geprüfte Fälle:
     320x568, 320x640, 360x640, 375x667. */
  /* 0.58rem wären 9,3 px. Die Laufweite trägt hier die Kürzung, nicht
     der Schriftgrad - die Zeile bleibt dadurch einzeilig. */
  .hero--band .hero__pre { font-size: 0.69rem; letter-spacing: 0.04em; }
  .hero--band .hero__brandmark { height: clamp(40px, 5.5vh, 60px); }
  .hero--band .hero__brand { font-size: clamp(2.1rem, 6vh, 3rem); }
  .hero--band .hero__wordmark { margin-bottom: 0.5rem; }
  .hero--band .hero__claim { font-size: clamp(1.05rem, 2.6vh, 1.4rem); margin-bottom: 0.6rem; }
  .hero--band .hero__sub { font-size: 0.82rem; line-height: 1.45; margin-bottom: 0.9rem; }
  .hero--band .hero__cta-row { gap: 0.55rem; }
  .hero--band .hero__cta-row .btn { padding-top: 0.8rem; padding-bottom: 0.8rem; }
}

@media (max-width: 700px) {
  /* Wie bei den übrigen Varianten: Weissraum und Schriftgrade zurücknehmen,
     damit Überschrift, Text, Knöpfe und Band gemeinsam auf den ersten
     Bildschirm passen. Auf 375x667 ragte das Hero sonst 172 px darüber. */
  .hero--band .hero__claim { font-size: clamp(1.2rem, 3vh, 1.7rem); }
  .hero--band .hero__sub { font-size: 0.9rem; margin-bottom: clamp(0.8rem, 1.8vh, 1.3rem); }
  .hero--band .hero__wordmark { margin-bottom: clamp(0.6rem, 1.4vh, 1.2rem); }
  .hero--band .hero__pre { margin-bottom: clamp(0.5rem, 1.2vh, 1rem); }
  .hero--band .hero__brandmark { height: clamp(50px, 6.5vh, 80px); }
}

@media (max-width: 700px) and (max-height: 700px) {
  /* Kleine Telefone (iPhone SE, 375x667): dort fehlten zuletzt noch 18 px.
     Der obere Aussenabstand ist die unschädlichste Stelle - die Navigation
     ist 72 px hoch, 76 px Abstand halten den Text weiterhin frei darunter. */
  .hero--band { padding-top: clamp(4.75rem, 10vh, 6rem); }
}

@media (max-width: 520px) and (max-height: 600px) {
  /* Letzte Stufe für sehr kurze Telefone (320x568, iPhone SE der ersten
     Generation). Dort fehlten noch 30 px. Wieder nur Weissraum - die Vorzeile
     mit dem Eröffnungsdatum bleibt stehen, sie ist der Grund für den Besuch. */
  .hero--band { padding-top: clamp(4.25rem, 9vh, 5rem); }
  .hero--band .hero__pre { margin-bottom: 0.4rem; }
  .hero--band .hero__sub { margin-bottom: 0.7rem; }
  .hero--band .hero__cta-row { gap: 0.45rem; }
  .hero--band .hero__cta-row .btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  .hero--band .hero__leistung { padding: 0.5rem 0.15rem; gap: 0.25rem; }
  .hero--band .hero__leistung-icon svg { width: 15px; }
}

/* ============================================================
   TELEFON - Lesbarkeit und Treffsicherheit
   ------------------------------------------------------------
   Gemessen auf acht Geräteformaten von 320x568 bis 768x1024, jede Seite,
   beide Sprachen. Zwei Arten von Befunden blieben übrig:

   1  Schrift unter 11 px. Auf einem Telefon ist das die Grenze, ab der
      Grossbuchstaben mit weiter Laufweite mühsam werden. Der schlimmste Fall
      war das Leistungsband mit 9,3 px - ausgerechnet die Hauptnavigation.
   2  Tippziele unter 24 px Höhe (WCAG 2.5.8). Betroffen waren die Verweise in
      der Fusszeile und der Zurück-Verweis, alle rund 19 px hoch. Verweise im
      Fliesstext sind davon ausdrücklich ausgenommen und bleiben, wie sie sind.
   ============================================================ */

/* Die kurze Beschriftung ist die Ausnahme, nicht die Regel. */
.hero__leistung-kurz { display: none; }

@media (max-width: 700px) {
  /* Sechs Kacheln nebeneinander: "Sculptural Face Lifting" braucht dort drei
     Zeilen. Kurzform einzeilig bei lesbaren 11 px statt lang bei 9,3 px. */
  .hero__leistung-name { display: none; }
  .hero__leistung-kurz { display: block; }
  .hero__leistung-name,
  .hero__leistung-kurz { font-size: 0.69rem; letter-spacing: 0.05em; }
}

@media (max-width: 900px) {
  /* Untergrenze 11 px für alle Beschriftungen und Bezeichner. Bis 900 px,
     nicht bis 700: Das Tablet im Hochformat (768 px) ist ebenso ein
     Finger-Gerät, dort galten die Kürzel sonst weiter mit 9,6 px. */
  .service__tag,
  .s-cross__tag,
  .p-block__tag { font-size: 0.7rem; }
  .s-process__duration { font-size: 0.72rem; }
  .p-toc__label { font-size: 0.72rem; }
  .nav__sub-tag { font-size: 0.7rem; letter-spacing: 0.18em; }
  .hero__scroll span,
  .s-hero__scroll span { font-size: 0.7rem; }
  .service__cta-arrow { font-size: 0.85rem; }
}

@media (max-width: 900px) {
  /* 44 px Mindesthöhe - der Wert, den die Layout-Prüfung dieses Projekts
     schon vorher für alle Tippziele verlangt hat (Apple und Google empfehlen
     dasselbe; WCAG 2.5.8 fordert nur 24).
     Über min-height statt über gerechnete Innenabstände: Ein Abstand, der zu
     einem Schriftgrad passt, passt zum nächsten nicht mehr - gemessen kamen
     so 36 px statt der verlangten 44 heraus. inline-flex hält den Verweis im
     Textfluss und zentriert die Zeile darin. */
  /* In der Fusszeile steht jeder Verweis auf einer eigenen Zeile. Er muss die
     Zeile ganz einnehmen - als inline-flex schrumpfte die Trefferfläche auf
     die Textbreite, „Glow" war damit 35 px breit statt der verlangten 44. */
  .footer__col a,
  .footer__col a.lat {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Der Zurück-Verweis steht dagegen in einer Zeile mit weiterem Text und
     bleibt deshalb inline. */
  .s-hero__pre a,
  a[data-i18n="back.home"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* ============================================================
   MOBILE NAVIGATION
   ------------------------------------------------------------
   Vollständig hier, nicht in den einzelnen Seiten: Die Regeln standen bisher
   nur im eingebetteten CSS der Startseite. Die Unterseiten hatten deshalb
   weder Burger noch Menü - im Kopf stand auf dem Telefon nur das Logo, und
   ohne das `display: none` wäre der jetzt eingebaute Burger dort umgekehrt
   auch auf dem Desktop erschienen.

   Elf Punkte passen bei 2 rem Schriftgrad auf kein Telefon. Deshalb die
   Behandlungen als kleinere zweite Ebene, engere Abstände und ein Menü, das
   notfalls scrollt.
   ============================================================ */

.nav__burger {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1100px) {
  .nav__links { display: none; }
  .nav__burger {
    display: block;
    width: 44px; height: 44px;      /* Tippziel, Apple-Empfehlung */
    position: relative;
  }
  .nav__burger span {
    position: absolute; left: 50%;
    width: 24px; height: 1px;
    background: var(--ink);          /* 14.2:1 auf dem hellen Kopf */
    transform: translateX(-50%);
    transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
  }
  .nav__burger span:nth-child(1) { top: 16px; }
  .nav__burger span:nth-child(2) { top: 22px; }
  .nav__burger span:nth-child(3) { top: 28px; }

  /* Offen wird der Burger zum Kreuz - sonst ist unklar, dass derselbe Knopf
     wieder schliesst. */
  .nav__burger.open span:nth-child(1) { top: 22px; transform: translateX(-50%) rotate(45deg); }
  .nav__burger.open span:nth-child(2) { opacity: 0; }
  .nav__burger.open span:nth-child(3) { top: 22px; transform: translateX(-50%) rotate(-45deg); }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bg-warm);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Unter dem Kopf beginnen, und den Systembereich unten aussparen -
     viewport-fit=cover ist gesetzt, ohne env() läge der letzte Punkt sonst
     hinter dem Home-Indikator. */
  /* 6.25rem statt 5.5rem: Die Kopfleiste ist 82 px hoch, mit 5.5rem (88 px)
     blieben nur 6 px darunter - die erste Beschriftung klebte an der Linie.
     Jetzt 18 px, gerade genug zum Atmen, ohne den Inhalt spürbar nach unten
     zu schieben. */
  padding: calc(6.25rem + env(safe-area-inset-top)) var(--gutter)
           calc(2rem + env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  justify-items: center;
}
.mobile-menu.open { opacity: 1; visibility: visible; }

/* Solange das Menü offen ist, muss die Kopfleiste decken.
   Sie ist im Ruhezustand durchsichtig und wird erst beim Scrollen der SEITE
   hinterlegt - das Menü scrollt aber in sich selbst. Ohne diese Regel schob
   sich "Behandlungen" beim Scrollen sichtbar hinter die Wortmarke. */
.nav:has(.nav__burger.open) {
  background: var(--bg-warm);
  border-bottom-color: rgba(176, 143, 76, 0.22);
}

/* Aufbau des Mobilmenüs
   ------------------------------------------------------------------
   Vorher: zehn Verweise mittig untereinander, die fünf Behandlungen in
   serifenlosen Grossbuchstaben zwischen Serifenzeilen. Das las sich wie zwei
   aneinandergeklebte Menüs; "Behandlungen" war zugleich Überschrift und
   Verweis; die Behandlungsnamen standen ohne jede Erklärung da ("Sculpt" -
   was ist das?); und auf dem iPhone SE lief der erste Eintrag unter die
   Kopfleiste, während der Knopf unten angeschnitten war.

   Jetzt linksbündig wie jeder andere Abschnitt der Seite, zwei benannte
   Gruppen, die Behandlungen mit Nummer und Kurzbeschreibung - dieselbe
   Sprache wie im Untermenü am Schreibtisch und in der Preisliste. Der Inhalt
   beginnt oben statt mittig: Ab dem iPhone SE passt er sonst nicht, und ein
   Menü, das man erst zurechtscrollen muss, ist keins. */

.mobile-menu__inner {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
}
/* Etwas weniger Rand als der Seitenraster - die Karten brauchen die Breite. */
.mobile-menu { padding-left: 1rem; padding-right: 1rem; }

/* Der Reset steht VOR den Abstandsregeln.
   .mobile-menu ul und .mobile-menu__label + ul haben dieselbe Spezifität
   (je eine Klasse plus ein Typ) - dann entscheidet die Reihenfolge. Stand der
   Reset danach, setzte sein margin: 0 den Gruppenabstand wieder auf null, und
   "Studio" klebte an der letzten Behandlung. */
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.mobile-menu li { margin: 0; }

.mobile-menu__label {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 0.7rem;
}
/* Auf ein iPhone 13 (844 px) passt das Menü damit ohne Scrollen - gemessen
   853 px vorher, 844 danach. Auf kleineren Geräten scrollt es, und das ist in
   Ordnung: Erreichbar ist alles. */
.mobile-menu__label + ul { margin-bottom: 1.2rem; }
/* Luft vor der zweiten Gruppe: Die Kurzbeschreibung der letzten Behandlung
   reicht bis dicht an die Beschriftung heran. */
.mobile-menu__label + ul + .mobile-menu__label { margin-top: 0.4rem; }

/* --- Die fünf Behandlungen als Bildkarten --- */

.mobile-menu__welten { display: grid; gap: 0.55rem; }

.mobile-menu a.mm-welt {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  align-items: center;
  gap: 0 1rem;
  min-height: 64px;
  padding: 0.55rem 0.9rem 0.55rem 0.55rem;
  background: #FFFDFA;
  border: 1px solid rgba(176, 143, 76, 0.22);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.mobile-menu a.mm-welt:active { background: rgba(176, 143, 76, 0.08); }
.mobile-menu a.mm-welt[aria-current="page"] {
  border-color: var(--gold-dark);
  background: rgba(119, 92, 36, 0.06);
}
.mm-welt__bild {
  width: 4.4rem;
  height: 4.4rem;
  object-fit: cover;
  display: block;
  /* Bis das Bild da ist, eine Fläche in der Farbe der Wand - kein Sprung,
     kein weisser Kasten. */
  background: var(--bg-soft);
  filter: brightness(0.96) saturate(1.05);
}
.mm-welt__text { min-width: 0; }
.mm-welt__no {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold-text);
  margin-bottom: 0.15rem;
}
.mm-welt__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.15;
  color: var(--ink);
}
.mm-welt__tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-top: 0.25rem;
}
.mm-welt__pfeil {
  font-size: 1.1rem;
  color: var(--gold-text);
  opacity: 0.7;
}

/* --- Die vier übrigen Seiten --- */

.mobile-menu__seiten li + li { border-top: 1px solid rgba(176, 143, 76, 0.16); }
.mobile-menu__seiten a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu__seiten a::after {
  content: '→';
  font-size: 1rem;
  color: var(--gold-text);
  opacity: 0.55;
}
.mobile-menu__seiten a[aria-current="page"] { color: var(--gold-text); }

/* --- Fuss: Anfrage und direkter Draht --- */

.mobile-menu__fuss {
  margin-top: 0.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(176, 143, 76, 0.28);
}
.mobile-menu a.mobile-menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bg-warm);
  background: var(--gold-em);       /* 4.56:1 - Text darauf ist hell */
  text-decoration: none;
}
.mobile-menu__direkt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: 0.55rem;
}
.mobile-menu a.mobile-menu__direkt-knopf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 54px;
  padding: 0.55rem 0.5rem;
  border: 1px solid rgba(119, 92, 36, 0.35);
  background: #FFFDFA;
  text-decoration: none;
}
.mobile-menu__direkt-art {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.mobile-menu__direkt-wert {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--ink);
  white-space: nowrap;
}

/* --- Einblenden: die Zeilen kommen nacheinander --- */
.mobile-menu.open .mobile-menu__label,
.mobile-menu.open .mobile-menu__welten > li,
.mobile-menu.open .mobile-menu__seiten > li,
.mobile-menu.open .mobile-menu__fuss {
  animation: mm-auf 0.4s var(--ease-out, ease-out) both;
}
/* Die Verzögerungen folgen der Reihenfolge auf dem Bildschirm: erst die
   Navigation, dann die Behandlungskarten, zuletzt der Fuss. */
.mobile-menu.open .mobile-menu__seiten > li:nth-child(1) { animation-delay: 0.04s; }
.mobile-menu.open .mobile-menu__seiten > li:nth-child(2) { animation-delay: 0.07s; }
.mobile-menu.open .mobile-menu__seiten > li:nth-child(3) { animation-delay: 0.10s; }
.mobile-menu.open .mobile-menu__seiten > li:nth-child(4) { animation-delay: 0.13s; }
.mobile-menu.open .mobile-menu__welten > li:nth-child(1) { animation-delay: 0.17s; }
.mobile-menu.open .mobile-menu__welten > li:nth-child(2) { animation-delay: 0.20s; }
.mobile-menu.open .mobile-menu__welten > li:nth-child(3) { animation-delay: 0.23s; }
.mobile-menu.open .mobile-menu__welten > li:nth-child(4) { animation-delay: 0.26s; }
.mobile-menu.open .mobile-menu__welten > li:nth-child(5) { animation-delay: 0.29s; }
.mobile-menu.open .mobile-menu__fuss { animation-delay: 0.33s; }
@keyframes mm-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Der Systembereich unten gilt auch für das Leistungsband: Es sitzt am
   untersten Rand des Heros, also genau dort, wo der Home-Indikator liegt. */
.hero__leistungen { padding-bottom: env(safe-area-inset-bottom); }

/* ============================================================
   QUERFORMAT AUF DEM TELEFON
   ------------------------------------------------------------
   844x390 und 667x375: Gemessen lag der Handlungsaufruf 119 px unter der
   Kante, das Band 270 px. In dieser Höhe passt der aufrechte Aufbau nicht -
   also wird umgeräumt statt weiter geschrumpft:

     * Die Wortmarke entfällt. Sie steht bei dieser Höhe nur im Weg, und das
       Logo ist ohnehin oben links im Kopf.
     * Die Knöpfe nebeneinander statt untereinander - quer ist Breite da.
     * Das Band einreihig und flach.

   Der Bereich ist bewusst über die HÖHE gefasst, nicht über die Ausrichtung
   allein: Ein Tablet im Querformat hat genug Höhe und soll das nicht sehen.
   ============================================================ */

@media (orientation: landscape) and (max-height: 460px) {
  .hero--band { padding-top: 4.5rem; }
  .hero--band .hero__wordmark { display: none; }
  /* 0.6rem wären 9,6 px - unter der Untergrenze; quer ist Breite genug. */
  .hero--band .hero__pre { margin-bottom: 0.4rem; font-size: 0.7rem; }
  .hero--band .hero__claim {
    font-size: clamp(1.1rem, 5vh, 1.6rem);
    margin-bottom: 0.4rem;
  }
  .hero--band .hero__sub {
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0.7rem;
    /* Zwei Zeilen genügen, um die Leistung zu benennen; der Rest steht
       einen Bildschirm weiter unten. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero--band .hero__cta-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .hero--band .hero__cta-row .btn {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  /* Einreihig: quer ist genug Breite für sechs Kacheln.
     Und die KURZE Beschriftung, obwohl 844 px breit sind: Die Umschaltung
     hängt sonst an der Breite, und quer brachen die langen Namen neben dem
     Symbol auf zwei Zeilen um. Hier entscheidet die Höhe. */
  .hero__leistung-name { display: none; }
  .hero__leistung-kurz { display: block; }
  .hero__leistungen { grid-template-columns: repeat(6, 1fr); }
  .hero__leistung {
    flex-direction: row;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.3rem;
    border-top: none;
  }
  .hero__leistung:nth-child(n) { border-left: 1px solid rgba(138, 109, 51, 0.16); }
  .hero__leistung:first-child { border-left: none; }
  .hero__leistung-icon svg { width: 16px; }
  /* 0.62rem wären 9,9 px - unter der Untergrenze. Quer ist Breite da,
     also 0.7rem = 11,2 px, einzeilig geprüft bis hinunter zu 667 px. */
  .hero__leistung-kurz { font-size: 0.7rem; letter-spacing: 0.04em; }

  /* Das Menü hat quer kaum Höhe - dort wird gescrollt statt zentriert. */
  .mobile-menu { align-content: start; padding-top: calc(4.5rem + env(safe-area-inset-top)); }
  /* Am Ende der Liste nicht auf die Seite dahinter durchziehen. Der Körper ist
     zwar festgestellt, aber iOS zieht sonst trotzdem am Hintergrund. */
  .mobile-menu { overscroll-behavior: contain; }
  /* Auch quer bleiben die 44 px stehen - das Menü scrollt dann eben. */
  .mobile-menu a { font-size: 1.15rem; }
  .mobile-menu__sub a { font-size: 0.8rem; }
}

/* ============================================================
   TEXT ÜBER DEM RELIEF - Kontrast auf dem Telefon
   ------------------------------------------------------------
   Der Verlauf der Entwurfs-Variante verläuft von LINKS: Am Schreibtisch steht
   der Text in der linken Hälfte, die Figur rechts, das passt. Auf dem Telefon
   nimmt der Text fast die ganze Breite ein und liegt damit mitten auf dem
   Relief - und die Überschreibung stand ausserhalb jeder Medienabfrage, galt
   also auch dort.

   Gemessen wurde nicht die Tokenfarbe, sondern die tatsächlichen Bildpunkte
   hinter jedem Textkasten: .hero__sub kam auf 1,98:1, die Vorzeile auf 2,75:1
   - verlangt sind 4,5:1. Automatische Zugänglichkeitstests finden das nicht,
   sie kennen nur Hintergrundfarben, keine Hintergrundbilder.

   Deshalb hier ein Verlauf von OBEN, deckend im Textbereich und nach unten
   öffnend, damit die Figur unter dem Text weiterhin zu sehen ist.
   ============================================================ */

@media (max-width: 900px) {
  .hero--entwurf .hero__bg-portrait::after {
    background: linear-gradient(180deg,
      rgba(248, 243, 236, 0.97) 0%,
      rgba(248, 243, 236, 0.95) 46%,
      rgba(248, 243, 236, 0.88) 62%,
      rgba(246, 240, 232, 0.62) 78%,
      rgba(244, 238, 231, 0.34) 100%);
  }
}

/* ------------------------------------------------------------
   DIE FIGUR AUF DEM TELEFON (Rückmeldung der Kundin, 13.09.2026)

   Der Verlauf von oben löste den Kontrast, kostete aber die Figur: Unter
   95 % Creme war vom Relief auf dem Telefon nichts mehr zu erkennen - und
   die Figur ist für die Kundin der Kern der visuellen Identität.

   Jetzt dieselbe Aufteilung wie am Schreibtisch, nur enger: Text links in
   einer Spalte von rund zwei Dritteln, die Figur rechts daneben. Der
   Verlauf kommt wieder von LINKS und ist bis zur rechten Kante der
   Textspalte (62 %) deckend; erst dahinter öffnet er sich. Die Knöpfe
   dürfen breiter sein als die Spalte - sie sind gedeckte Flächen, kein
   Text über dem Bild.

   Bildlage: Die Figur steht bei 59 % der Bildbreite. Mit cover und 52 %
   liegt ihre Achse auf 360-430 px breiten Telefonen bei rund 80 % der
   Breite, auf dem Tablet etwas weiter links - gemessen an Bildschirmfotos,
   nicht gerechnet.

   Gemessene Folgen der schmaleren Spalte (Unterkante Knöpfe, vorher →
   nachher): 390x844 601 → 629 px, 375x667 468 → 502, 360x640 453 → 486.
   Das Band bleibt überall auf dem ersten Bildschirm.

   Seit dem 13.09.2026 nur noch für das Tablet (701-900 px): Auf dem
   Telefon gilt "HERO AUF DEM TELEFON" weiter unten, mit einem eigenen
   Hochformat-Motiv. Quer gilt die eigene Regel darunter weiter (Text
   ohnehin links und schmal).
   ------------------------------------------------------------ */
@media (min-width: 701px) and (max-width: 900px) and (min-height: 461px) {
  .hero--entwurf .hero__bg-portrait { background-position: 52% center; }
  .hero--entwurf .hero__bg-portrait::after {
    background: linear-gradient(90deg,
      rgba(248, 243, 236, 0.97) 0%,
      rgba(248, 243, 236, 0.95) 52%,
      rgba(248, 243, 236, 0.88) 62%,
      rgba(246, 240, 232, 0.42) 73%,
      rgba(244, 238, 231, 0.10) 85%,
      rgba(244, 238, 231, 0) 100%);
  }
  .hero--band .hero__claim { max-width: 62%; }
  .hero--band .hero__sub   { max-width: 64%; }
}

/* ------------------------------------------------------------
   HERO AUF DEM TELEFON - Hochformat-Relief, ohne Wortmarke (13.09.2026)

   Dritter Anlauf, Diegos Wahl. Die beiden davor:
     ELJ-12   das Querformat-Relief angeschnitten: Auf 390 px blieb von der
              Figur ein Streifen, halb hinter dem Text. "Nicht gut genug."
     bd4904f  freigestellte Figur auf leerem Grund, Titel - Figur - Knopf:
              wirkte aufgeklebt, zurückgenommen mit 9679f88.

   Jetzt ein eigenes Hochformat-Motiv: dieselbe Wand, neu aufgebaut
   (build_images.py kulisse-wand-hoch), Elis echte Figur hineingesetzt
   (build_relief.py hoch) - rechts, ganz, hoch an der Wand neben dem Titel.
   Rechtsbündig angeschnitten, damit die Figur auf schlanken (390x844) und
   kurzen Telefonen (375x667) gleich weit rechts steht: ab rund 62 %.

   Die Wortmarke entfällt im Hero - das Logo steht oben im Kopf -, dafür ist
   der Titel grösser. Nur OPTISCH ausgeblendet: Das h1 darin bleibt für
   Vorlesegeräte und Suchmaschinen erhalten (tests/textzoom.spec.js und
   tests/layout.spec.js kennen das Muster).

   Ab 360 px: Auf 320x568 (iPhone SE der ersten Generation) war die
   Textspalte 186 px schmal - der Titel brach in fünf Zeilen, rutschte unter
   die Navigation, und der WhatsApp-Knopf lag auf dem Hauptknopf. Dort, quer
   und auf dem Tablet bleibt das Querformat-Relief. Dieselben Grenzen stehen
   in den preload-Zeilen von index.html und in der Inline-Regel aus
   build_hell.py - sonst lädt ein Gerät beide Bilder.

   Die Bildadresse trägt den Inhalts-Hash (?v=...): Cloudflare hielt eine
   404 für diese Datei fest, abgefragt während des Ausrollens (DEPLOY.md).
   Wird das Relief neu erzeugt, den Hash hier UND im preload von index.html
   nachziehen.
   ------------------------------------------------------------ */
@media (min-width: 360px) and (max-width: 700px) and (min-height: 461px) {
  .hero--entwurf .hero__bg-portrait {
    background-image: url('/assets/img/gen/hero-relief-hoch-w1080.jpg?v=37bd82a7e1');
    background-position: 100% 100%;
  }
  /* Verlauf von links: deckend bis zur Textspalte, dahinter offen.

     Gemessen an den Bildpunkten: Mit 50 % Deckung bei 54 % der Breite kam der
     Untertitel auf den schlanken Telefonen (360-430 px) nur auf 3,8-4,1:1 -
     die Zeilenenden lagen schon über der dunkleren rechten Wandhälfte.
     Deshalb deckend bis 50 %, bei 58 % noch 70 %. Knappster Wert danach
     4,82:1 auf 360x780. */
  .hero--entwurf .hero__bg-portrait::after {
    background: linear-gradient(90deg,
      rgba(248, 243, 236, 0.94) 0%,
      rgba(248, 243, 236, 0.88) 50%,
      rgba(248, 243, 236, 0.70) 58%,
      rgba(246, 240, 232, 0.22) 66%,
      rgba(244, 238, 231, 0) 74%);
  }
  .hero--entwurf .hero__wordmark {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Titel 33,5 px auf 390 px Breite (Diegos Wunsch). Die Titelspalte darf bis
     62 % reichen - er steht oben neben dem Kopf der Figur, dort ist mehr frei
     als tiefer neben Arm und Zweig, wo der Untertitel bei 58 % bleibt.

     Gemessen auf 360-430 px: überall vier Zeilen, rechte Kante höchstens bei
     59 %. Grösser (36 px) brach der Titel auf dem iPhone SE in sechs Zeilen
     und stiess oben an die Navigation; bei 58 % Spalte wurden es schon mit
     33 px fünf Zeilen. */
  .hero--entwurf .hero__claim {
    font-size: clamp(1.95rem, 8.6vw, 2.55rem);
    line-height: 1.12;
    max-width: 62%;
  }
  .hero--entwurf .hero__sub { max-width: 58%; }
}

@media (orientation: landscape) and (max-height: 460px) {
  /* Quer steht der Text links und schmal - dort genügt ein Verlauf von links,
     aber deckender als am Schreibtisch: gemessen 2,11:1 auf .hero__sub. */
  .hero--entwurf .hero__bg-portrait::after {
    background: linear-gradient(95deg,
      rgba(248, 243, 236, 0.98) 0%,
      rgba(248, 243, 236, 0.97) 52%,
      rgba(248, 243, 236, 0.90) 68%,
      rgba(244, 238, 231, 0.34) 84%,
      rgba(244, 238, 231, 0) 100%);
  }
}

/* ============================================================
   TELEFON - Luft (Rückmeldung der Kundin, 02.09.2026)
   ------------------------------------------------------------
   „Im Moment wirkt vieles noch etwas eng und zusammengedrängt."
   Gemessen war das Folgende die Ursache - durchweg Desktop-Werte, die auf dem
   Telefon unverändert weitergalten:

     Karten          36 px Innenabstand und min-height: 480px auf einer
                     342 px breiten Karte. Vom Bildschirm blieben 268 px
                     Textbreite, also 36 Zeichen pro Zeile.
     Fliesstext      14,7 px - Desktop-Grösse auf einer Drittel so breiten Spalte.
     Überschriften   Zeilenabstand 1,10 bei 38 px. Am Schreibtisch steht die
                     Zeile allein, auf dem Telefon bricht sie drei Mal um.
     Knöpfe          0,3em Laufweite: „Eröffnungsberatung sichern" passte
                     deshalb nicht in eine Zeile und wurde 75 px hoch.
     Ritual          vier Bilder im Format 4:5, je 425 px - allein 1700 px.
     Fusszeile       eine Spalte, 1204 px. Dazu überlappten sich die Tippziele
                     um 5 px: 44 px Anker in einer 43,6 px hohen Zeile.
   ============================================================ */

@media (max-width: 700px) {
  /* --- Karten: Innenabstand an die Bildschirmbreite anpassen --- */
  .service {
    padding: 1.6rem 1.25rem 1.5rem;
    min-height: 0;                  /* 480 px erzwangen Leerraum unter kurzen Karten */
  }

  /* --- Fliesstext auf Telefongrösse --- */
  .service__desc,
  .founder__bio,
  .faq__a,
  .ritual__step p { font-size: 1rem; line-height: 1.65; }

  /* --- Überschriften brauchen beim Umbruch mehr Durchschuss --- */
  .title-l { line-height: 1.16; }
  .service__title { line-height: 1.2; }

  /* --- Knöpfe: einheitlich hoch, einzeilig --- */
  .btn {
    letter-spacing: 0.16em;         /* 0.3em sprengte jede zweite Beschriftung */
    padding: 1rem 1.4rem;
    min-height: 52px;
    justify-content: center;
    text-align: center;
  }

  /* --- Ritual: querformatige Bilder statt Hochformat --- */
  .ritual__img { aspect-ratio: 3/2; }
}

@media (min-width: 400px) and (max-width: 700px) {
  /* --- Fusszeile: zwei Spalten statt einer langen Kette ---
     Erst ab 400 px. Darunter blieben je Spalte 124 px, und die Überschrift
     „BEHANDLUNGEN" braucht mit ihrer Laufweite rund 175 px - sie wurde
     abgeschnitten. Auf sehr schmalen Geräten bleibt es einspaltig. */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 1.5rem;
    margin-bottom: 2.5rem;
  }
  .footer__top > :first-child { grid-column: 1 / -1; }   /* Markenblock */
  /* Die letzte Spalte nur dann über die volle Breite, wenn sie sonst allein
     bliebe. Die Startseite hat vier Blöcke (Marke + drei Spalten), die
     Rechtstexte nur drei. Ohne :nth-child(even) stünde auf den Rechtstexten
     stattdessen die ERSTE Spalte allein - der Fehler wäre nur verschoben. */
  .footer__col:last-child:nth-child(even) { grid-column: 1 / -1; }

  /* Die Tippziele überlappten sich: Der Anker ist 44 px hoch, die Zeile war
     34 px plus 9,6 px Aussenabstand - 43,6 px. Jetzt trägt der Anker die
     ganze Zeilenhöhe, der Aussenabstand entfällt. */
  .footer__col li { margin-bottom: 0; }
  .footer__col a,
  .footer__col a.lat { display: flex; }
  .footer__col li.lat { min-height: 44px; display: flex; align-items: center; }
}


/* ============================================================
   PORTRÄT DER INHABERIN
   ------------------------------------------------------------
   Beide Regeln stammen aus der dunklen Fassung und waren für ein Stockfoto
   gedacht. Auf ein echtes Porträt angewandt sind sie falsch:

     filter: brightness(0.92)   dunkelt ihr Gesicht um 8 % ab
     ::after                    legt einen schwarzen Verlauf über das untere
                                Drittel - auf hellem Grund ein Schmutzschleier

   Das Bild kommt unbearbeitet zur Geltung; Zuschnitt und Schärfe macht
   build_portrait.py, nicht der Browser.
   ============================================================ */

.founder__portrait {
  filter: none;
}
.founder__solo:hover .founder__portrait {
  filter: none;
}
.founder__portrait::after {
  /* Statt des schwarzen Verlaufs nur eine leise warme Kante nach unten,
     damit das Bild nicht hart gegen den Creme-Grund stösst. */
  background: linear-gradient(180deg, transparent 72%, rgba(110, 93, 72, 0.12) 100%);
}

/* ============================================================
   WHATSAPP-KNOPF (Wunsch der Kundin, 02.09.2026)
   ------------------------------------------------------------
   „Dauerhaft sichtbar unten in einer Ecke, Desktop und Mobile."

   Farbe: nicht das Markengrün #25D366. Das gibt dem weissen Symbol nur
   1,98:1 und dem Knopf 1,72:1 gegen den Creme-Grund - beides unter der
   3:1-Schwelle für grafische Elemente (WCAG 1.4.11). #17944A liefert
   3,91:1 beziehungsweise 3,39:1 und passt zudem besser zur gedeckten
   Palette der Seite als das Neongrün.

   Ebene 90: unter dem Mobilmenü (95) und dem Buchungsdialog (9500+),
   damit er nicht über einem offenen Dialog schwebt.

   Auf der Startseite sitzt das Leistungsband genau dort, wo der Knopf hin
   will. Statt ihn auszublenden - die Kundin will ihn dauerhaft sehen -
   rutscht er nach oben, solange das Band im Bild ist. Seine Höhe misst das
   Skript in build_nav.py zur Laufzeit; sie liegt je nach Format zwischen
   64 und 213 px.
   ============================================================ */

.wa-knopf {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 90;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #17944A;
  color: #fff;
  box-shadow: 0 10px 28px -8px rgba(23, 148, 74, 0.55),
              0 2px 6px rgba(40, 30, 18, 0.18);
  transition: transform 0.25s var(--ease-out, ease), bottom 0.35s ease,
              box-shadow 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.wa-knopf svg { width: 30px; height: 30px; display: block; }

.wa-knopf:hover,
.wa-knopf:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 14px 34px -8px rgba(23, 148, 74, 0.6),
              0 3px 8px rgba(40, 30, 18, 0.22);
}
.wa-knopf:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Über dem Leistungsband, solange dieses im Bild ist. */
.wa-knopf--hoch {
  bottom: calc(var(--band-hoehe, 0px) + 1rem + env(safe-area-inset-bottom));
}

@media (max-width: 700px) {
  .wa-knopf { width: 52px; height: 52px; right: max(1rem, env(safe-area-inset-right)); }
  .wa-knopf svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-knopf { transition: none; }
  .wa-knopf:hover, .wa-knopf:focus-visible { transform: none; }
}

/* ============================================================
   „VIER WEITERE WELTEN" auf den Behandlungsseiten
   ------------------------------------------------------------
   Zwei Fehler an derselben Stelle:

   1  Drei Spalten bei vier Karten. Die vierte stand allein in einer zweiten
      Reihe. Es sind immer genau vier - fünf Behandlungswelten minus der, auf
      der man gerade ist -, also vier Spalten. Damit kann keine Karte
      vereinzeln, auf keiner Bildschirmbreite.

   2  Die Karte trug den dunklen Verlauf aus der ursprünglichen Fassung
      (rgba(10, 8, 5, 0.85) nach unten), während die Schrift für das helle
      Theme auf dunkles Braun umgestellt wurde. Dunkel auf dunkel über einem
      hellen Bild - die Beschriftungen waren praktisch unsichtbar.
      Jetzt läuft das Bild nach unten in den Creme-Ton der Seite aus, die
      dunkle Schrift steht darauf.
   ============================================================ */

.s-cross__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

/* Bei vier Spalten ist die Karte rund 355 px breit. Gemessen mit einem
   Bereich über den Textknoten (nicht mit getClientRects auf dem Element -
   das liefert bei einem Block immer 1 und verschweigt den Umbruch): 28 px
   ist der grösste Grad, bei dem auch „Permanent Make-up" einzeilig bleibt. */
.s-cross__title { font-size: clamp(1.2rem, 1.9vw, 1.75rem); }

@media (max-width: 1100px) {
  .s-cross__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 460px) and (max-width: 900px) {
  /* Überschreibt die Einspaltigkeit aus sub.css: Zwei Spalten halten den
     Abschnitt kurz und lassen trotzdem keine Karte allein.

     Erst ab 460 px. Darunter bleiben je Karte nur 86 px Textbreite, und ein
     einzelnes Wort der Bezeichnung braucht mit seiner Laufweite bis zu 129 px
     — "SCULPTURAL" wurde abgeschnitten. Einspaltig stehen dann vier Karten
     untereinander; auch das lässt keine allein. */
  .s-cross__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (max-width: 700px) {
  /* Auf schmalen Karten die Laufweite zurücknehmen, sonst reisst die
     Bezeichnung auch zweispaltig noch aus. */
  .s-cross__tag { letter-spacing: 0.16em; }
}

@media (max-width: 459px) {
  /* Muss NACH der 1100-px-Regel stehen, sonst gewinnt deren Zweispaltigkeit
     auch hier: Gleiche Spezifität, spätere Regel setzt sich durch. */
  .s-cross__grid { grid-template-columns: 1fr; }
}

.s-cross__card::after {
  background: linear-gradient(180deg,
    rgba(248, 243, 236, 0) 32%,
    rgba(248, 243, 236, 0.72) 58%,
    rgba(248, 243, 236, 0.96) 82%,
    rgba(248, 243, 236, 1) 100%);
}
/* ------------------------------------------------------------
   Ablauf-Karten: Rest aus der dunklen Fassung

   .s-process__step trug in sub.css einen Verlauf von rgba(58,39,22,0.3) nach
   rgba(22,16,10,0.4) - gedacht als Abdunklung ÜBER einem Foto. Im hellen
   Entwurf gibt es dort kein Foto mehr, also lag die Abdunklung direkt auf dem
   Cremegrund. Ergebnis: graubraune Kästen, die nicht zum übrigen Entwurf
   passen, und dunkler Text darauf.

   Gemessen am 04.09.2026 auf /pakete, gegen die gemischte Fläche gerechnet
   (Verlauf über #F4EEE7), am unteren Kartenrand:
     .s-process__text     14,7px  2,87:1  statt 4,5:1
     .s-process__duration 11,5px  2,13:1  statt 4,5:1
     .s-process__num      38,4px  2,13:1  statt 3:1
   axe meldet davon nichts: Ein linear-gradient ist ein background-IMAGE, die
   berechnete Hintergrundfarbe bleibt durchsichtig, und die Prüfung überspringt
   den Fall - dieselbe Lücke wie bei Text über einem Foto.

   Die Karten bekommen jetzt dieselbe helle Fläche wie .service.
   ------------------------------------------------------------ */
.s-process__step {
  background: #FFFDFA;
  border-color: rgba(176, 143, 76, 0.28);
}
.s-process__step:hover { border-color: rgba(176, 143, 76, 0.5); }

.s-cross__card { border-color: rgba(138, 109, 51, 0.18); }
.s-cross__card:hover { border-color: rgba(138, 109, 51, 0.4); }

@media (max-width: 1100px) {
  /* Bei halber Kartenbreite passt der Titel sonst nicht mehr in eine Zeile. */
  .s-cross__title { font-size: clamp(1.2rem, 3.2vw, 1.6rem); }
  .s-cross__body { padding: 1.25rem; }
}

/* ============================================================
   UNTERMENÜ „BEHANDLUNGEN"
   ------------------------------------------------------------
   Fünf Behandlungswelten in einem Vierer-Raster: „Pakete" stand allein in
   einer zweiten Reihe. Es sind immer genau fünf, also fünf Spalten.

   Der Titel „Permanent Make-up" bricht dabei zweizeilig um - in JEDER
   geprüften Kombination aus Panelbreite und Schriftgrad, weil er an seinem
   Leerzeichen bricht. Ihn immer weiter zu verkleinern wäre der falsche Weg
   (17 px Serif sind in einer Navigation schon klein). Stattdessen sitzen die
   Bezeichnungen jetzt am unteren Kartenrand: Die Karten sind als Rasterfelder
   ohnehin gleich hoch, damit stehen alle Bezeichnungen auf einer Linie,
   gleich ob der Titel ein- oder zweizeilig ist. Genau das sah vorher unruhig
   aus, nicht der Umbruch selbst.
   ============================================================ */

/* Die Breite muss auch dann ins Fenster passen, wenn das Panel erst bei
   1101 px auftaucht (darunter ist die Hauptnavigation ausgeblendet). Es hängt
   mit left:0 am Menüpunkt "Behandlungen", beginnt also rund 150 px vom linken
   Rand. 1040 px ragten damit bis 1280 px Fensterbreite rechts hinaus. */
.nav__submenu { width: min(1040px, calc(100vw - 18rem)); }
.nav__submenu-inner { grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.nav__sub-item { padding: 0.75rem; }
.nav__sub-title { font-size: 1.25rem; }
.nav__sub-tag {
  margin-top: auto;          /* an den unteren Rand, Grundlinien fluchten */
  padding-top: 0.4rem;
  letter-spacing: 0.14em;    /* 0.25em sprengte die schmalere Karte */
}


@media (min-width: 601px) and (max-width: 900px) {
  /* Zwischen 601 und 900 px ist die Fusszeile zweispaltig. Auf den
     Rechtstexten stehen dort nur drei Blöcke, "Kontakt" blieb damit allein in
     der zweiten Reihe (337 von 707 px). Dieselbe Aufteilung wie schmaler. */
  .footer__top > :first-child { grid-column: 1 / -1; }
  .footer__col:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* ============================================================
   SOCIAL-MEDIA-VERWEISE (Wunsch der Kundin, 02.09.2026)
   ------------------------------------------------------------
   "Instagram, Facebook und TikTok gut sichtbar im Footer bzw. im
   Kontaktbereich verlinken."

   In der Kontaktspalte der Fusszeile, damit sie auf allen zehn Seiten mit
   Fusszeile stehen - 404.html hat bewusst keine.

   Farbe wie die übrigen Verweise der Fusszeile (rgb 216,201,172): 11,57:1
   gegen den Grund rgb(22,16,10), also weit über der 3:1-Schwelle für
   grafische Elemente. Beim Überfahren das hellere Gold der Überschriften.

   Tippziel 44 px, wie überall auf dieser Seite. Die Symbole selbst sind mit
   22 px kleiner - der Abstand darum gehört zur Fläche, nicht zum Bild.
   ============================================================ */

.social {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.25rem;
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--text-mute, #D8C9AC);
  border-radius: 50%;
  transition: color 0.3s ease, background-color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.social__link svg { width: 22px; height: 22px; display: block; }

.social__link:hover,
.social__link:focus-visible {
  color: var(--gold-bright, #E5C77E);
  background: rgba(229, 199, 126, 0.1);
}
.social__link:focus-visible {
  outline: 2px solid var(--gold-bright, #E5C77E);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  /* In der zweispaltigen Fusszeile sitzt die Kontaktspalte über die volle
     Breite - die Symbole bekommen dort etwas mehr Luft. */
  .social { gap: 0.4rem; margin-top: 1rem; }
}