@import url("../fonts/fonts.css");

/* ══════════════════════════════════════════════════════════════════════════
   Fußpflege Kifel — Filmfassung
   Farben aus dem Held-Film gemessen: warme Creme, Eiche, gebürstetes Gold.

   Gold braucht ZWEI Stufen. --gold (#C1A167) hat auf Creme nur 2.35:1 und ist
   als Schrift unlesbar — es gehört auf Flächen. Für Schrift und Linien gilt
   --gold-text (#8A6E38, 4.6:1).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --creme:      #FCFAF6;
  --creme-2:    #F5F0E7;
  --creme-3:    #EDE5D8;
  --espresso:   #2B2621;
  --nacht:      #16120E;
  --tinte:      #2B2621;
  --tinte-leise:#6B6156;
  --gold:       #C1A167;
  --gold-text:  #8A6E38;
  /* Dritte Stufe. --gold-text haelt auf --creme 4,61, faellt auf der
     getoenten --creme-2 aber auf 4,24 und damit durch. Ueberall dort,
     wo Gold auf getoentem Grund steht, gehoert diese Stufe hin.
     Stand bisher nur in wegweiser.css; jetzt zentral, damit sie auch
     auf Seiten gilt, die wegweiser.css nicht laden (etwa bogen.html). */
  --gold-tief:  #7E6431;
  --gold-hell:  #D8C39A;
  --linie:      #E4DCCC;
  --linie-stark:#CFC3AC;

  /* Bausteine der UX-Sammlung lesen diese Namen */
  --flaeche:    var(--creme);
  --flaeche-2:  var(--creme-2);
  --akzent:     var(--espresso);
  --akzent-auf: var(--creme);

  --serif:  "Boska", "Iowan Old Style", Georgia, serif;
  --grotesk:"Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:   "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --rand: clamp(1.25rem, 5vw, 5rem);
  --breit: 82rem;
  --schmal: 44rem;

  --auf:  cubic-bezier(.22, 1, .36, 1);
  --weich:cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font: 400 clamp(1rem, .95rem + .25vw, 1.1rem)/1.65 var(--grotesk);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.5vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.mono {
  font: 400 .68rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.lead {
  font-size: clamp(1.08rem, 1rem + .5vw, 1.35rem);
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 38ch;
}

/* ── Fokus: 2 px stark, 2 px Abstand ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 2px;
  border-radius: 3px;
}
.auf-dunkel :focus-visible { outline-color: var(--gold-hell); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.springen {
  position: fixed; top: .6rem; left: .6rem; z-index: 999;
  transform: translateY(-160%);
  background: var(--espresso); color: var(--creme);
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .7rem 1.1rem; border-radius: 8px; text-decoration: none;
  font: 600 .9rem var(--grotesk);
  transition: transform .2s var(--auf);
}
.springen:focus { transform: translateY(0); }

/* ══ Knöpfe ═══════════════════════════════════════════════════════════════ */

.knopf {
  --k-grund: transparent;
  --k-schrift: var(--tinte);
  --k-rand: var(--linie-stark);
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border: 1px solid var(--k-rand);
  border-radius: 999px;
  background: var(--k-grund);
  color: var(--k-schrift);
  font: 500 .95rem/1 var(--grotesk);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color .25s var(--weich), color .25s var(--weich),
              transform .25s var(--auf);
}
.knopf::before {
  content: ""; position: absolute; inset: 0;
  background: var(--espresso);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .35s var(--auf);
}
.knopf > * { position: relative; z-index: 1; }
.knopf:hover { color: var(--creme); border-color: var(--espresso); }
.knopf:hover::before { transform: scaleY(1); }
.knopf:active { transform: translateY(1px); }

.knopf-voll {
  --k-grund: var(--espresso);
  --k-schrift: var(--creme);
  --k-rand: var(--espresso);
}
.knopf-voll::before { background: var(--gold); }
.knopf-voll:hover { color: var(--espresso); border-color: var(--gold); }

.knopf-gold {
  --k-grund: var(--gold);
  --k-schrift: var(--espresso);   /* dunkel auf Gold = 6.1:1 */
  --k-rand: var(--gold);
}
.knopf-gold::before { background: var(--espresso); }
.knopf-gold:hover { color: var(--creme); border-color: var(--espresso); }

.knopf[disabled] { opacity: .4; pointer-events: none; }

/* ══ Kopfzeile ════════════════════════════════════════════════════════════ */

.kopf {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem var(--rand);
  color: var(--creme);
  transition: background .45s var(--weich), color .45s var(--weich),
              padding .45s var(--weich), box-shadow .45s var(--weich);
}
.kopf.fest {
  background: color-mix(in srgb, var(--creme) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--tinte);
  padding-block: .75rem;
  box-shadow: 0 1px 0 var(--linie);
}

.wortmarke {
  min-height: 44px; justify-content: center;
  font: 300 1.25rem/1 var(--serif);
  letter-spacing: .04em;
  text-decoration: none;
  display: flex; flex-direction: column; gap: .18rem;
}
.wortmarke b { font-weight: 400; letter-spacing: .18em; font-size: 1.05em; }
.wortmarke span {
  /* .58rem sind 9,3 px — auf einem iPhone SE zu wenig, auch fuer Versalien.
     Auf .66rem angehoben (10,6 px) und die Sperrung eine Spur enger, damit
     die Zeile trotzdem nicht breiter wird als vorher. */
  font: 400 .66rem/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase;
  opacity: .78;
}

/* ══ Markenzeichen in der Wortmarke ═══════════════════════════════════════
   Die Seerose steht links neben dem zweizeiligen Schriftzug.

   Grid statt Flex: so bleiben die Selektoren .wortmarke span und
   .wortmarke b oben unveraendert gueltig — das Zeichen bekommt einfach
   eine eigene Spalte ueber beide Zeilen, statt dass der Text in einen
   Wrapper muss und jeder Selektor nachgezogen wird.

   Anders als das App-Symbol hat diese Fassung KEINE Fugen in
   Hintergrundfarbe zwischen den Blaettern. Die Kopfzeile wechselt den
   Grund — ueber dem Held-Film ist sie durchsichtig, gescrollt liegt sie
   auf Creme — eine Fuge in fester Farbe waere dort ein sichtbarer Rand.
   Stattdessen trennt eine gestaffelte Deckkraft die drei Blattreihen
   (hinten .55, Mitte .76, vorn 1). Das haelt auf jedem Grund.

   currentColor: das Zeichen traegt die Farbe der Wortmarke mit, also
   creme ueber dem Film und espresso in der festen Kopfzeile. */
.wortmarke {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: .62rem;
  row-gap: .18rem;
}
.wm-zeichen {
  grid-row: 1 / 3; grid-column: 1;
  width: 2.4rem; height: auto;
}
.wortmarke span { grid-column: 2; grid-row: 1; }
.wortmarke b    { grid-column: 2; grid-row: 2; }

/* Aufbluehen — laeuft einmal, wenn die Seite geladen ist.
   Die hintere Reihe zuerst, innerhalb der Reihe von der Mitte nach aussen;
   --r ist die Reihe, --o steht auf 1 in der Mitte und faellt nach aussen.
   Zum Schluss laufen die beiden Wasserlinien aus der Mitte auseinander. */
.wm-zeichen .z-blatt {
  transform-box: view-box; transform-origin: 512px 684px;
  animation: wm-auf .8s cubic-bezier(.18, .9, .28, 1) both;
  animation-delay: calc((var(--r) - 1) * .16s + (1 - var(--o)) * .18s);
}
.wm-zeichen .z-balken {
  transform-box: view-box;
  animation: wm-linie .5s cubic-bezier(.2, .85, .3, 1) both .8s;
}
.wm-zeichen .z-balken.b0 { transform-origin: 384px 733px; }
.wm-zeichen .z-balken.b1 { transform-origin: 640px 733px; }

/* Nur der Anfang ist gesetzt. Das Ziel ist der Wert, den das Element
   ohnehin traegt — bei opacity also das Attribut am Pfad (.55/.76/1). */
@keyframes wm-auf   { from { transform: scale(.10); opacity: 0; } }
@keyframes wm-linie { from { transform: scaleX(0);  opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wm-zeichen .z-blatt, .wm-zeichen .z-balken { animation: none; }
}

/* Auf schmalen Schirmen eine Spur kleiner, damit die Kopfzeile nicht
   umbricht. 44 px Tastflaeche bleibt ueber .wortmarke gewahrt. */
@media (max-width: 30rem) {
  .wm-zeichen { width: 2rem; }
  .wortmarke { column-gap: .5rem; }
  /* Bei 32 px verliert die hintere Reihe mit .55 zu viel. Die Staffelung
     bleibt erhalten, faellt aber flacher aus — sonst liest sich die Bluete
     auf dem Handy nur noch als Fleck. */
  .wm-zeichen .z-blatt.r1 { opacity: .72; }
  .wm-zeichen .z-blatt.r2 { opacity: .88; }
}

.kopf nav {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 2rem);
}
.kopf nav a {
  font: 500 .88rem/1 var(--grotesk);
  text-decoration: none;
  position: relative;
  padding-block: .4rem;
}
.kopf nav a:not(.knopf)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--auf);
}
.kopf nav a:not(.knopf):hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 60rem) { .kopf nav .weg-schmal { display: none; } }

/* ══ HELD — der Film ist die Hauptsache ═══════════════════════════════════ */

.held {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--creme);
  isolation: isolate;
  background: var(--nacht);
}

.held-film {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Der Verlauf rechnet vom Text her, nicht in Prozent der Bildhöhe.

   Vorher stand er in Prozent. Auf elf Geräten nachgemessen liegt die
   Ortszeile aber immer 455 bis 583 Pixel über dem unteren Rand — prozentual
   sind das je nach Gerät 1,4 % (iPhone SE) bis 58,7 % (iPad Pro), ein Faktor
   42. Ein Verlauf in Prozent kann beides nicht treffen: auf großen Schirmen
   saß er richtig, auf kleinen rutschte die Schrift in den hellen Teil.
   Gemessen fiel dort die Überschrift auf 1,62 : 1 und die Unterzeile auf
   1,52 : 1 — beide weit unter dem Soll.

   Deshalb zwei Verläufe in festen Maßen: einer von unten für den Textblock,
   einer von oben für die Wortmarke. Beide als S-Kurve gerechnet, keine
   Stufe steiler als 0,51 Deckkraftpunkte je 100 Pixel — sonst macht das Auge
   daraus einen waagerechten Strich quer durchs Bild (Mach-Band). Zwischen
   beiden bleibt der Film frei: auf großen Schirmen viel, auf kleinen wenig.
   Genau so gehört es, denn dort braucht die Schrift den Platz. */
.held::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    /* Textblock: Kapitelleiste 138–170 px, Unterzeile und Knöpfe 324–430,
       Überschrift 432–560, Ortszeile 455–583 — alles über dem unteren Rand. */
    linear-gradient(to top,
      rgba(22,18,14,.88) 0rem,     rgba(22,18,14,.88) 5.6rem,  rgba(22,18,14,.87) 11.25rem,
      rgba(22,18,14,.86) 14.8rem,  rgba(22,18,14,.85) 18.3rem, rgba(22,18,14,.84) 21.9rem,
      rgba(22,18,14,.83) 24.6rem,  rgba(22,18,14,.82) 27.3rem, rgba(22,18,14,.81) 30rem,
      rgba(22,18,14,.79) 32.5rem,  rgba(22,18,14,.76) 35rem,   rgba(22,18,14,.74) 37.5rem,
      rgba(22,18,14,.69) 39.5rem,  rgba(22,18,14,.57) 41.6rem, rgba(22,18,14,.45) 43.6rem,
      rgba(22,18,14,.40) 45.6rem,  rgba(22,18,14,.36) 47.5rem, rgba(22,18,14,.26) 49.4rem,
      rgba(22,18,14,.14) 51.25rem,  rgba(22,18,14,.04) 53.1rem, rgba(22,18,14,0) 55rem),
    /* Wortmarke: steht auf jedem Gerät 20 bis 60 px unter der Oberkante. */
    linear-gradient(to bottom,
      rgba(22,18,14,.80) 0rem,     rgba(22,18,14,.77) 2.2rem,  rgba(22,18,14,.74) 4.4rem,
      rgba(22,18,14,.67) 6rem,     rgba(22,18,14,.53) 7.7rem,  rgba(22,18,14,.46) 9.4rem,
      rgba(22,18,14,.41) 11.1rem,  rgba(22,18,14,.29) 12.8rem, rgba(22,18,14,.17) 14.5rem,
      rgba(22,18,14,.12) 16.25rem, rgba(22,18,14,.09) 17.9rem, rgba(22,18,14,.03) 19.6rem,
      rgba(22,18,14,0)   21.25rem);
}
/* Ab Tabletbreite steht die Schrift linksbündig zwischen 5 und 45 % der
   Breite und der Film hat rechts Platz. Dort kommt der waagerechte Verlauf
   von links dazu — er trägt genau unter der Schrift und ist ab 68 % weg,
   sodass die Handlung im Bild sichtbar bleibt. */
@media (min-width: 52.0625rem) {
  .held::before {
    background:
      linear-gradient(to right,
        rgba(22,18,14,.80) 0%,  rgba(22,18,14,.74) 30%,
        rgba(22,18,14,.62) 45%, rgba(22,18,14,.28) 58%,
        rgba(22,18,14,0)   68%),
      linear-gradient(to top,
        rgba(22,18,14,.88) 0rem,     rgba(22,18,14,.88) 5.6rem,  rgba(22,18,14,.87) 11.25rem,
        rgba(22,18,14,.86) 14.8rem,  rgba(22,18,14,.85) 18.3rem, rgba(22,18,14,.84) 21.9rem,
        rgba(22,18,14,.83) 24.6rem,  rgba(22,18,14,.82) 27.3rem, rgba(22,18,14,.81) 30rem,
        rgba(22,18,14,.79) 32.5rem,  rgba(22,18,14,.76) 35rem,   rgba(22,18,14,.74) 37.5rem,
        rgba(22,18,14,.69) 39.5rem,  rgba(22,18,14,.57) 41.6rem, rgba(22,18,14,.45) 43.6rem,
        rgba(22,18,14,.40) 45.6rem,  rgba(22,18,14,.36) 47.5rem, rgba(22,18,14,.26) 49.4rem,
        rgba(22,18,14,.14) 51.25rem,  rgba(22,18,14,.04) 53.1rem, rgba(22,18,14,0) 55rem),
      linear-gradient(to bottom,
        rgba(22,18,14,.80) 0rem,     rgba(22,18,14,.77) 2.2rem,  rgba(22,18,14,.74) 4.4rem,
        rgba(22,18,14,.67) 6rem,     rgba(22,18,14,.53) 7.7rem,  rgba(22,18,14,.46) 9.4rem,
        rgba(22,18,14,.41) 11.1rem,  rgba(22,18,14,.29) 12.8rem, rgba(22,18,14,.17) 14.5rem,
        rgba(22,18,14,.12) 16.25rem, rgba(22,18,14,.09) 17.9rem, rgba(22,18,14,.03) 19.6rem,
        rgba(22,18,14,0)   21.25rem);
  }
}

.held-text {
  align-self: end;
  padding: 0 var(--rand) clamp(1.5rem, 3vh, 2.5rem);
  max-width: 64rem;
}
.held-text .mono { color: var(--gold-hell); }
.held h1 {
  margin: .6rem 0 0;
  text-shadow: 0 2px 40px rgba(22,18,14,.5);
}
.held h1 em {
  font-style: italic; font-weight: 700;
  color: var(--gold-hell);
}
.held-unterzeile {
  margin-top: 1.1rem;
  max-width: 34ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  color: color-mix(in srgb, var(--creme) 88%, transparent);
  text-shadow: 0 1px 24px rgba(22,18,14,.6);
}
.held-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.held .knopf { --k-schrift: var(--creme); --k-rand: color-mix(in srgb, var(--creme) 45%, transparent); }
.held .knopf::before { background: var(--creme); }
.held .knopf:hover { color: var(--espresso); border-color: var(--creme); }
.held .knopf-gold { --k-schrift: var(--espresso); --k-rand: var(--gold); }

/* ── Kapitelleiste: „so läuft es ab" ─────────────────────────────────────── */

.kapitel {
  padding: 0 var(--rand) clamp(1.1rem, 2.5vh, 2rem);
  display: grid;
  gap: .75rem;
}

.kapitel-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 0; margin: 0;
  list-style: none;
}
@media (max-width: 52rem) {
  .kapitel-spur {
    grid-auto-columns: minmax(9.5rem, 1fr);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 0;
  }
  .kapitel-spur::-webkit-scrollbar { display: none; }
  .kapitel-spur li { scroll-snap-align: start; }
}

.kapitel-knopf {
  width: 100%;
  display: grid; gap: .4rem;
  padding: .7rem .2rem .1rem;
  background: none; border: 0;
  color: color-mix(in srgb, var(--creme) 62%, transparent);
  text-align: left;
  cursor: pointer;
  font-family: var(--grotesk);
  transition: color .3s var(--weich);
}
.kapitel-knopf:hover { color: var(--creme); }
.kapitel-knopf[aria-current="true"] { color: var(--creme); }

.kapitel-nr {
  font: 400 .62rem/1 var(--mono);
  letter-spacing: .18em;
  opacity: .75;
}
.kapitel-name {
  font-size: clamp(.8rem, .74rem + .25vw, .95rem);
  font-weight: 500;
  line-height: 1.25;
}
.kapitel-balken {
  height: 2px;
  background: color-mix(in srgb, var(--creme) 24%, transparent);
  border-radius: 2px;
  overflow: hidden;
  margin-top: .15rem;
}
.kapitel-balken i {
  display: block; height: 100%; width: 100%;
  background: var(--gold-hell);
  transform: scaleX(0); transform-origin: left;
}
.kapitel-knopf[aria-current="true"] .kapitel-balken i {
  transform: scaleX(var(--anteil, 0));
}
.kapitel-knopf[data-vorbei="1"] .kapitel-balken i {
  transform: scaleX(1);
  background: color-mix(in srgb, var(--gold-hell) 40%, transparent);
}

.kapitel-fuss {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font: 400 .68rem/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--creme) 55%, transparent);
}
.film-schalter {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 34px; padding: 0 .8rem;
  background: color-mix(in srgb, var(--creme) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--creme) 26%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--creme) 88%, transparent);
  font: 400 .64rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--weich), color .25s var(--weich);
}
.film-schalter:hover { background: color-mix(in srgb, var(--creme) 22%, transparent); color: var(--creme); }
.film-schalter svg { width: 11px; height: 11px; fill: currentColor; }
/* Die Pille bleibt 34 px hoch, die Trefferfläche wächst auf 44 px.
   Sonst müsste der Knopf klobig werden, nur damit der Daumen ihn trifft. */
.film-schalter { position: relative; }
.film-schalter::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* ══ Abschnitte ═══════════════════════════════════════════════════════════ */

.abs {
  padding: clamp(4.5rem, 11vh, 9rem) var(--rand);
  position: relative;
}
.abs-dunkel {
  background: var(--nacht);
  color: var(--creme);
}
.abs-dunkel .lead { color: color-mix(in srgb, var(--creme) 72%, transparent); }
.abs-dunkel .mono { color: var(--gold-hell); }
.abs-creme { background: var(--creme-2); }

.mitte { max-width: var(--breit); margin-inline: auto; }
.schmal { max-width: var(--schmal); margin-inline: auto; }

.abs-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
@media (max-width: 54rem) { .abs-kopf { grid-template-columns: 1fr; gap: 1.2rem; } }
.abs-kopf h2 { margin-top: .5rem; }

/* ── Einblenden beim Scrollen ────────────────────────────────────────────── */
[data-auf] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--auf), transform .7s var(--auf);
  transition-delay: var(--verzug, 0ms);
}
[data-auf].da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-auf] { opacity: 1; transform: none; }
}

/* ══ Zahlenreihe ══════════════════════════════════════════════════════════ */

.zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--linie);
  border-block: 1px solid var(--linie);
}
.zahlen > div { background: var(--creme); padding: clamp(1.8rem, 4vw, 2.8rem); }
.zahlen .n {
  font: 300 clamp(2.6rem, 5vw, 3.6rem)/1 var(--serif);
  color: var(--gold-text);
  display: flex; align-items: baseline; gap: .1em;
}
.zahlen .n sup { font-size: .42em; }
.zahlen h3 { font-size: 1.05rem; margin: .7rem 0 .3rem; font-family: var(--grotesk); font-weight: 600; }
.zahlen p { font-size: .92rem; color: var(--tinte-leise); }

/* ══ Leistungen ═══════════════════════════════════════════════════════════ */

/* Feste Spaltenzahlen statt auto-fit: bei vier Kacheln würde auto-fit je nach
   Fensterbreite drei nebeneinander stellen und die vierte allein darunter. */
.leistungen {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 40rem) { .leistungen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 92rem) { .leistungen { grid-template-columns: repeat(4, 1fr); } }

.leistung {
  position: relative;
  display: grid;
  color: inherit;
  text-decoration: none;
  grid-template-rows: auto 1fr;
  background: var(--creme);
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .4s var(--auf), box-shadow .4s var(--auf),
              border-color .4s var(--weich);
}
.leistung:hover {
  transform: translateY(-8px);
  border-color: var(--linie-stark);
  box-shadow: 0 18px 40px -18px rgba(43,38,33,.28);
}
.leistung-film {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--creme-3);
  position: relative;
}
.leistung-film video, .leistung-film img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--auf);
}
.leistung:hover .leistung-film video,
.leistung:hover .leistung-film img { transform: scale(1.05); }

.leistung-text { padding: clamp(1.3rem, 2.5vw, 1.8rem); display: grid; align-content: start; gap: .5rem; }
.leistung-text h3 { font-family: var(--grotesk); font-weight: 600; font-size: 1.15rem; letter-spacing: 0; }
.leistung-text p { font-size: .93rem; color: var(--tinte-leise); margin: 0; }
.leistung-marke {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: .9rem; margin-top: .3rem;
  border-top: 1px solid var(--linie);
}
.leistung-preis { font: 400 1.35rem/1 var(--serif); color: var(--gold-text); }
.leistung-dauer { font: 400 .66rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-leise); }

/* Die ganze Karte ist ein Link in die Buchung — diese Zeile sagt es sichtbar. */
.leistung-buchen {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem;
  font: 400 .68rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold-text);
}
.leistung-buchen svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--auf);
}
.leistung:hover .leistung-buchen svg,
.leistung:focus-visible .leistung-buchen svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .leistung-buchen svg { transition: none; }
}

/* ══ Ablauf ═══════════════════════════════════════════════════════════════ */

/* Vier Schritte, jeder mit eigenem Bild. Zwei Spalten ab 52rem — bei vier
   Karten nie auto-fit, sonst steht eine allein in der zweiten Reihe. */
.schritte {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
}
@media (min-width: 52rem) { .schritte { grid-template-columns: repeat(2, 1fr); } }

.schritt { display: grid; gap: 1.1rem; align-content: start; }

.schritt-bild {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--creme) 8%, transparent);
  aspect-ratio: 8 / 5;
}
.schritt-bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--auf);
}
.schritt:hover .schritt-bild img { transform: scale(1.04); }

/* Die Nummer liegt auf dem Bild — dunkle Platte darunter, damit sie auf
   jedem Motiv lesbar bleibt, auch auf dem hellen Fenster in Bild 01. */
.schritt-nr {
  position: absolute; top: .8rem; left: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nacht) 72%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font: 400 .7rem/1 var(--mono);
  letter-spacing: .06em;
  color: var(--gold-hell);
}

.schritt-text h3 {
  font-family: var(--grotesk); font-weight: 500; font-size: 1.2rem;
  margin-bottom: .45rem;
}
.schritt-text p {
  font-size: .95rem; margin: 0;
  color: color-mix(in srgb, var(--creme) 72%, transparent);
  max-width: 46ch;
}

/* ══ Vorher / Nachher ═════════════════════════════════════════════════════ */

/* Drei Karten, deshalb nie auto-fit: bei mittleren Breiten ergibt das zwei
   Spalten, die dritte Karte steht allein und rechts daneben klafft ein Loch.
   Entweder alle drei nebeneinander oder alle untereinander. */
.ba-reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.6rem);
}
@media (min-width: 58rem) { .ba-reihe { grid-template-columns: repeat(3, 1fr); } }
.ba {
  /* figure bringt vom Browser margin: 1em 40px mit. Ohne diese Zeile sind die
     Karten links und rechts um 40 px eingerueckt, stehen schmaler als alles
     andere im Abschnitt und die Luecken dazwischen sind dreimal zu breit. */
  margin: 0;
  border: 1px solid var(--linie);
  border-radius: 14px;
  overflow: hidden;
  background: var(--creme);
}
.ba-bild {
  position: relative;
  aspect-ratio: 4 / 3;
  cursor: ew-resize;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}
.ba-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-bild .nachher { clip-path: inset(0 0 0 var(--stelle, 50%)); }
.ba-griff {
  position: absolute; top: 0; bottom: 0;
  left: var(--stelle, 50%);
  width: 2px; background: var(--creme);
  box-shadow: 0 0 0 1px rgba(43,38,33,.18);
  pointer-events: none;
}
.ba-griff::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 42px; height: 42px; transform: translate(-50%, -50%);
  border: 2px solid var(--creme); border-radius: 50%;
  background: color-mix(in srgb, var(--espresso) 30%, transparent);
  backdrop-filter: blur(3px);
}
.ba-marke {
  position: absolute; bottom: .7rem;
  font: 400 .6rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--creme);
  /* 66 % statt 55 %: die Vergleichsfotos sind hell, bei 55 % kam die Plakette
     nur auf 4,1:1 und die 0,6-rem-Schrift war zu schwach. */
  background: color-mix(in srgb, var(--nacht) 66%, transparent);
  backdrop-filter: blur(4px);
  padding: .4rem .65rem; border-radius: 999px;
  pointer-events: none;
}
.ba-marke.links  { left: .7rem; }
.ba-marke.rechts { right: .7rem; }
.ba-fuss { padding: 1rem 1.2rem; }
.ba-fuss h3 { font-family: var(--grotesk); font-weight: 600; font-size: 1rem; }
.ba-fuss p { font-size: .88rem; color: var(--tinte-leise); margin: .3rem 0 0; }

/* Der Rechtshinweis schliesst den Abschnitt ab. Er laeuft ueber die volle
   Breite des Kartenrasters, sonst steht er allein unter der ersten Spalte und
   zwei Drittel darunter bleiben leer. */
.hinweis.ba-fussnote {
  max-width: none;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}
@media (min-width: 58rem) {
  .hinweis.ba-fussnote { padding: 1.1rem 1.4rem; }
}

/* ══ Preistafel ═══════════════════════════════════════════════════════════ */

.preise { border-top: 1px solid var(--linie); }
.preis-zeile {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--linie);
}
.preis-zeile b { font-weight: 500; font-size: 1.08rem; }
.preis-zeile small { display: block; font-size: .85rem; color: var(--tinte-leise); margin-top: .15rem; }
.preis-zeile .v { font: 400 1.4rem/1 var(--serif); color: var(--gold-text); white-space: nowrap; }

/* ══ Fragen (Ausklapper) ══════════════════════════════════════════════════ */

.fragen { border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer;
  padding: 1.3rem 3rem 1.3rem 0;
  position: relative;
  font: 500 1.06rem/1.4 var(--grotesk);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; position: absolute; right: .3rem; top: 50%;
  width: 12px; height: 12px; margin-top: -6px;
  border-right: 1.5px solid var(--gold-text);
  border-bottom: 1.5px solid var(--gold-text);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .35s var(--auf);
}
.frage[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.frage-inhalt { padding-bottom: 1.4rem; max-width: 60ch; color: var(--tinte-leise); }
.frage[open] .frage-inhalt { animation: aufklappen .35s var(--auf); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } }

/* ══ Anfahrt ══════════════════════════════════════════════════════════════ */

.anfahrt-bau {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 58rem) { .anfahrt-bau { grid-template-columns: 1fr; } }
.anfahrt-bild { border-radius: 14px; overflow: hidden; border: 1px solid var(--linie); }
.anfahrt-bild img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.anfahrt-bild figcaption {
  padding: .8rem 1.1rem; font: 400 .68rem/1 var(--mono);
  letter-spacing: .13em; text-transform: uppercase; color: var(--tinte-leise);
  background: var(--creme);
}
.kontakt-liste { display: grid; gap: 1.4rem; margin-top: 2rem; }
.kontakt-liste > div { display: grid; gap: .3rem; }
.kontakt-liste b { font-weight: 500; font-size: 1.1rem; }
.kontakt-liste a { text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* ══ Fußzeile ═════════════════════════════════════════════════════════════ */

.fuss {
  background: var(--nacht); color: var(--creme);
  padding: clamp(3rem, 7vh, 5rem) var(--rand) 2rem;
}
.fuss-bau {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 2rem; max-width: var(--breit); margin-inline: auto;
}
.fuss h4 { font: 400 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
           color: var(--gold-hell); margin-bottom: .9rem; }
.fuss a { color: color-mix(in srgb, var(--creme) 80%, transparent); text-decoration: none; }
.fuss a:hover { color: var(--creme); text-decoration: underline; text-underline-offset: 3px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: .93rem; }
/* Am Handy sind Fußzeilen-Links sonst 18 px hoch und kaum zu treffen. */
.fuss ul a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 46rem) { .fuss ul { gap: .5rem; } .fuss ul a { min-height: 0; } }
.fuss-unten {
  max-width: var(--breit); margin: 3rem auto 0; padding-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--creme) 14%, transparent);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font: 400 .72rem/1.6 var(--mono); letter-spacing: .06em;
  color: color-mix(in srgb, var(--creme) 52%, transparent);
}

/* ══ Hinweiskasten (KI-Bilder, Platzhalter) ═══════════════════════════════ */

.hinweis {
  border: 1px solid var(--linie-stark);
  border-left: 3px solid var(--gold);
  background: var(--creme-2);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  font-size: .88rem;
  line-height: 1.6;
  color: var(--tinte-leise);
  max-width: 60ch;
}
.abs-dunkel .hinweis {
  background: color-mix(in srgb, var(--creme) 7%, transparent);
  border-color: color-mix(in srgb, var(--creme) 20%, transparent);
  border-left-color: var(--gold);
  color: color-mix(in srgb, var(--creme) 72%, transparent);
}
.hinweis b { color: var(--tinte); font-weight: 600; }

/* Verweise in den Hinweiskästen sollen als Verweis erkennbar bleiben. */
.hinweis a { color: var(--gold-tief); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.hinweis a:hover { color: var(--tinte); }

/* Die Kleinzeile über jeder Überschrift steht auf cremefarbenen Flächen zu
   hell: --gold-text haelt auf --creme 4,61 : 1, faellt auf der getoenten
   --creme-2 aber auf 4,24 und damit durch. Gilt fuer ALLE .abs-creme-
   Sektionen. Stand bis zum 27.08.2026 in wegweiser.css und fehlte deshalb
   auf jeder Seite, die dieses Blatt nicht laedt. Gemessen mit --gold-tief:
   4,93 : 1. */
.abs-creme .mono { color: var(--gold-tief); }
.abs-dunkel .hinweis b { color: var(--creme); }

/* ══ Handy-Leiste unten ═══════════════════════════════════════════════════ */

.leiste {
  position: fixed; inset: auto 0 0; z-index: 80;
  display: none;
  gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform .4s var(--auf);
}
.leiste.da { transform: none; }
.leiste a {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 56px;
  background: var(--creme); color: var(--tinte);
  font: 500 .9rem/1 var(--grotesk); text-decoration: none;
}
.leiste a.haupt { background: var(--espresso); color: var(--creme); }
/* Die Leiste liegt fest über dem Seitenende. Ohne eigenen Fußraum verschwindet
   die letzte Zeile der Fußzeile dahinter — gemessen 25 px, auch ganz unten
   gescrollt. 56 px Knopfhöhe + 1 px Rahmen + Gerätesaum, plus etwas Luft. */
@media (max-width: 46rem) {
  .leiste { display: flex; }
  body { padding-bottom: calc(57px + env(safe-area-inset-bottom) + 1rem); }
}

/* Handy im Querformat: der Hero-Inhalt passt sonst nicht in die Hoehe.

   Auf einem iPhone 16 quer bleiben 393 Punkte. Ortszeile, zweizeilige
   Ueberschrift, dreizeilige Unterzeile, Knoepfe und Kapitelleiste brauchen
   zusammen rund 620 — der Block quoll oben aus dem Bild heraus, die
   Ortszeile lag komplett hinter der Kopfzeile und von "Sehen Sie," war nur
   die untere Haelfte zu sehen. Gemessen kam die Ueberschrift dort auf
   1,17 : 1 statt der geforderten 3,0.

   Deshalb hier alles eine Stufe kompakter und die Kapitelleiste weg. Sie
   ist Beiwerk: dieselben vier Schritte stehen weiter unten noch einmal
   ausfuehrlich. Gilt nur fuer flache Schirme — ein iPad quer hat 1024
   Punkte Hoehe und faellt nicht darunter. */
@media (orientation: landscape) and (max-height: 34rem) {
  .held-text {
    padding-top: 4.6rem;                 /* unter der festen Kopfzeile durch */
    padding-bottom: clamp(1rem, 2.5vh, 1.6rem);
    align-self: center;
  }
  .held h1 { font-size: clamp(1.9rem, 4.4vh, 2.9rem); margin-top: .35rem; }
  .held-unterzeile {
    margin-top: .7rem;
    font-size: clamp(.9rem, 2.1vh, 1.02rem);
    max-width: 44ch;
  }
  .held-knoepfe { margin-top: 1rem; }
  .kapitel { display: none; }
  .kopf { padding-block: .7rem; }
}

/* Schmale Handys: die Ueberschrift muss in zwei Zeilen passen.

   Seit dem 27.08.2026 heisst sie "Kosmetische Fußpflege in Neuss" statt
   "Sehen Sie, wie es ablaeuft" — laenger, und auf 320 Punkten Breite brach
   sie in drei Zeilen um. Der Hero wurde dadurch 620 Punkte hoch bei einem
   568 Punkte hohen Bildschirm: der Block quoll oben heraus, die Ortszeile
   lag hinter der cremefarbenen Kopfzeile und kam auf 1,41 : 1.

   Deshalb hier eine Stufe kleiner, damit "Kosmetische Fußpflege" auf eine
   Zeile passt. Gemessen an einem iPhone SE der ersten Reihe. */
@media (max-width: 24.5rem) {
  .held h1 { font-size: clamp(1.6rem, 8.2vw, 2.1rem); }
  .held-unterzeile { font-size: .95rem; margin-top: .8rem; }
  .held-knoepfe { margin-top: 1.1rem; gap: .5rem; }
}

/* Flache Handys: der Hero-Inhalt braucht mehr Hoehe, als der Bildschirm
   hat. Die Kapitelleiste ist hier der groesste Posten (182 Punkte) und
   zugleich der entbehrlichste — dieselben vier Schritte stehen weiter unten
   noch einmal ausfuehrlich. Erst schrumpft sie, dann faellt sie weg. */
@media (max-height: 42rem) and (orientation: portrait) {
  .kapitel { padding-bottom: .6rem; gap: .4rem; }
  .kapitel-spur { grid-auto-columns: minmax(8rem, 1fr); }
  .kapitel-knopf { padding: .45rem .2rem .1rem; }
  .kapitel-name { font-size: .78rem; }
  .held-text { padding-bottom: clamp(.8rem, 2vh, 1.4rem); }
}
@media (max-height: 36rem) and (orientation: portrait) {
  .kapitel { display: none; }
}