/* ============================================================
   SYNTHESE — gemeinsames Fundament der fünf Optionen
   „Als hätte Apple das Design für Hermès gebaut."

   Die Trennung, auf der alles beruht:
   Apple liefert die INTERAKTION — Snap, Rails, Pinning, Momentum,
   Trägheit, Daumenreichweite. Nicht die Typografie.
   Hermès und The Row liefern die STIMME — Tenor Sans, Weißraum als
   Hierarchie, Haarlinien statt Rahmen, ein einziger Goldakzent.

   Daraus folgt die Zweiteilung:
   · Querformat  → editorial, ruhig, großzügig. Kein Keynote.
   · Hochformat  → volle Apple-UX. Panels, Rails, Snap, große Ziele.

   Farbwelt und Akzent-Regel kommen aus tokens.css und gelten unverändert:
   Flächen nur paper/ivory/sand/beige. ink/accent/gilt nur Text, Haarlinien,
   kleine Marker — nie Füllfläche.
   ============================================================ */

:root {
  --display: 'Tenor Sans', serif;
  --ui: 'Jost', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-weich: cubic-bezier(.33, 1, .68, 1);
  --raum: clamp(88px, 12vw, 168px);
  --raum-eng: clamp(56px, 8vw, 104px);
  --spalte: min(100% - 2.4rem, 68rem);
  --mass: 32rem;          /* Lesebreite */
  --rand: clamp(1.2rem, 5vw, 3.2rem);
  --r: 20px;
  --r-gross: 28px;
  --schatten:
    0 1px 2px color-mix(in srgb, var(--accent-deep), transparent 94%),
    0 12px 32px color-mix(in srgb, var(--accent-deep), transparent 92%),
    0 40px 88px color-mix(in srgb, var(--accent), transparent 90%);
  --schatten-tief:
    0 2px 6px color-mix(in srgb, var(--accent-deep), transparent 90%),
    0 22px 54px color-mix(in srgb, var(--accent-deep), transparent 86%),
    0 62px 130px color-mix(in srgb, var(--accent), transparent 80%);
}

html {
  scroll-behavior: smooth;
  scrollbar-color: var(--beige) var(--paper);
  scrollbar-width: thin;
  -webkit-text-size-adjust: 100%;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--beige); border: 3px solid var(--paper); border-radius: 10px; }

/* ---------- App-Verhalten statt Browser-Verhalten ----------
   Die Seite soll sich am Telefon wie eine App anfuehlen: kein Zoom, kein
   seitliches Verschieben, kein Ueberdehnen am Rand.
   · overscroll-behavior: none  — kein Gummiband, kein Ziehen-zum-Neuladen
   · touch-action: pan-x pan-y  — Scrollen ja, Aufziehen mit zwei Fingern nein.
     Das Meta-Tag allein genuegt nicht: iOS-Safari ignoriert user-scalable
     seit iOS 10. Zusaetzlich faengt synthese.js die gesture-Ereignisse ab.
   · overflow-x: clip am body verhindert jede waagerechte Verschiebung der
     Seite; die Wischbahnen scrollen weiterhin, weil sie eigene Container sind. */
html {
  overscroll-behavior: none;
}
body {
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  font-family: var(--ui);
  /* Regular statt Light. Der Unterschied zwischen den Fliesstexten und den
     Kurstexten in „Das Handwerk" war nie die Farbe und nie der Kontrast —
     beide stehen auf --muted und messen 4,4:1. Es war allein der Schnitt:
     die Kurstexte setzen 400, alles andere erbte die 300 von hier. Jost
     Light bei 13 bis 15 Pixeln ist an der Grenze des Lesbaren, sobald der
     Grund nicht weiss, sondern creme ist.

     Die Anzeigeschrift bleibt davon unberuehrt: Tenor Sans liegt nur in
     einem Schnitt vor, Ueberschriften und Vorspann aendern sich also
     nicht — betroffen ist genau das, was zu duenn wirkte. */
  font-weight: 400;
  font-size: clamp(.94rem, 1.05vw, 1rem);
  line-height: 1.72;
  letter-spacing: .005em;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, figure, ul, ol { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
main:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--sand); color: var(--accent-deep); }
[id] { scroll-margin-top: 5.5rem; }

/* ---------- Typografie ---------- */
.d1, .d2, .d3 { font-family: var(--display); font-weight: 400; letter-spacing: -.014em; }
.d1 { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.1; }
.d2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.14; }
.d3 { font-size: clamp(1.1rem, 1.9vw, 1.35rem); line-height: 1.28; letter-spacing: -.008em; }

.lead {
  font-family: var(--display);
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  line-height: 1.86; letter-spacing: .01em; color: var(--ink);
}
.klein { font-size: .84rem; line-height: 1.76; color: var(--muted); }

/* Gesperrtes Kleinlabel — die Stimme von Stille */
.label {
  display: inline-block;
  font-size: .58rem; font-weight: 400;
  letter-spacing: .38em; text-transform: uppercase; color: var(--muted);
}
.label--gold { color: var(--gilt); }
.nr {
  display: block; font-size: .55rem; letter-spacing: .34em;
  color: var(--gilt); margin-bottom: 1.1rem;
}

/* ---------- Layout ---------- */
.wrap { width: var(--spalte); margin-inline: auto; }
.wrap--eng { width: min(100% - 2.4rem, 44rem); margin-inline: auto; }
.sek { padding-block: var(--raum); position: relative; }
.sek--eng { padding-block: var(--raum-eng); }
.mitte { text-align: center; }
.auf-elfenbein { background: var(--ivory); }
.mass { max-width: var(--mass); }
.kopf { max-width: 46rem; margin-inline: auto; text-align: center; }
.kopf .label { margin-bottom: 1.4rem; }
.kopf .lead { margin-top: 1.3rem; }

hr.linie {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--hairline) 20%, var(--hairline) 80%, transparent);
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper), transparent 14%);
  -webkit-backdrop-filter: saturate(1.3) blur(20px);
  backdrop-filter: saturate(1.3) blur(20px);
  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 40%);
}
.nav__in {
  width: var(--spalte); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  height: 58px;
}
/* Das Signet steht jetzt links neben der Wortmarke. Zwei Dinge daran
   sind bewusst so:

   Erstens die Ausrichtung. Die Zeile stand auf align-items: baseline —
   sinnvoll, solange nur Schrift darin steht, weil „NūrGlow" und
   „Institut" damit auf einer Schriftlinie sitzen. Ein Bild hat aber
   keine Grundlinie und waere daran unten haengen geblieben. Deshalb
   richtet die aeussere Zeile jetzt mittig aus, und die beiden Woerter
   behalten ihre gemeinsame Grundlinie in einer eigenen Gruppe.

   Zweitens die Groesse. 30 px bei 58 px Leistenhoehe — das Zeichen
   begleitet hier, es fuehrt nicht. Im Hero fuehrt es (152 px), auf der
   Visitenkarte ebenfalls; in einer Bedienleiste waere dieselbe Geste
   aufdringlich. */
.nav__marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.nav__signet { display: block; width: 30px; height: auto; opacity: .9; flex-shrink: 0; }
.nav__wort { display: flex; align-items: baseline; gap: .55rem; }
.nav__marke b {
  font-family: var(--display); font-weight: 400; font-size: .95rem;
  letter-spacing: .28em; text-transform: uppercase;
}
.nav__marke i {
  font-style: normal; font-size: .52rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted);
}
.nav__links { display: flex; gap: clamp(.9rem, 2.2vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  font-size: .78rem; color: var(--muted); text-decoration: none;
  transition: color .3s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
@media (max-width: 900px) { .nav__links { display: none; } }

/* ---------- Schaltflächen ---------- */
.pille {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ui); font-size: .8rem; font-weight: 400; letter-spacing: .06em;
  min-height: 44px; padding: .7rem 1.6rem;               /* 44px = Apples Mindest-Trefferfläche */
  border-radius: 999px; text-decoration: none; cursor: pointer;
  color: var(--accent); background: transparent;
  border: 1px solid color-mix(in srgb, var(--gilt), transparent 50%);
  transition: background-color .4s var(--ease), border-color .4s var(--ease),
              color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pille:hover {
  background: var(--tint-warm);
  border-color: color-mix(in srgb, var(--gilt), transparent 16%);
  color: var(--accent-deep); transform: translateY(-1px);
  box-shadow: 0 16px 40px -26px color-mix(in srgb, var(--accent), transparent 60%);
}
.pille:active { transform: none; }
.pille svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Textlink mit wachsender Haarlinie — der einzige Akzent aus Stille */
.tlink {
  position: relative; display: inline-block; text-decoration: none;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent); padding-bottom: .55rem; min-height: 34px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 1px;
  background: var(--gilt); transition: width .7s var(--ease);
}
.tlink:hover::after { width: 4rem; }
.mitte .tlink::after { left: 50%; transform: translateX(-50%); }

.aktionen { display: flex; flex-wrap: wrap; gap: .7rem; }
.mitte .aktionen { justify-content: center; }

/* ---------- Bildflächen ---------- */
.bild { position: relative; overflow: hidden; background: var(--tint); }
.bild > .ph { position: absolute; inset: 0; }
.bild--4x3 { aspect-ratio: 4/3; }
.bild--3x4 { aspect-ratio: 3/4; }
.bild--16x9 { aspect-ratio: 16/9; }
.bild--quad { aspect-ratio: 1/1; }
.rund { border-radius: var(--r); }
.rund-gross { border-radius: var(--r-gross); }

/* ---------- Karten ---------- */
.karte {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.karte::after {   /* Lichtstreif beim Zeigen */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(112deg, transparent 34%,
    color-mix(in srgb, var(--paper), transparent 55%) 50%, transparent 66%);
  transform: translateX(-36%);
  transition: opacity .6s var(--ease), transform 1.1s var(--ease);
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-tief); border-color: var(--hairline); }
.karte:hover::after { opacity: 1; transform: translateX(36%); }
.karte__text { padding: clamp(18px, 2.2vw, 28px); }
.karte__text h3 { margin: .8rem 0 .6rem; }
.karte__text p { font-size: .86rem; line-height: 1.72; color: var(--muted); }

.gitter { display: grid; gap: clamp(16px, 2vw, 26px); }
.gitter--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gitter--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) { .gitter--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gitter--2, .gitter--3 { grid-template-columns: 1fr; } }

/* ---------- Zweispalter ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Schritte auf einer Haarlinie ---------- */
.schritte { list-style: none; margin: 0; padding: 0; position: relative; }
.schritte::before {
  content: ""; position: absolute; left: 4px; top: .7rem; bottom: .7rem; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--hairline) 8%, var(--hairline) 92%, transparent);
}
.schritt { position: relative; padding-left: clamp(2.2rem, 4.4vw, 3.4rem); }
.schritt + .schritt { margin-top: clamp(2.2rem, 4vw, 3.4rem); }
.schritt::before {
  content: ""; position: absolute; left: 1px; top: .82rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--paper); border: 1px solid var(--gilt);
}
.schritt h3 { margin: .6rem 0 .5rem; }
.schritt p { font-size: .88rem; line-height: 1.76; color: var(--muted); max-width: 38rem; }

/* ---------- Fragen ---------- */
.fragen { border-top: 1px solid var(--line); }
.frage { border-bottom: 1px solid var(--line); }
.frage > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.35rem 0; min-height: 56px;
  font-family: var(--display); font-size: clamp(.98rem, 1.6vw, 1.1rem); line-height: 1.42;
  transition: color .3s var(--ease);
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:hover { color: var(--accent); }
.zeichen { flex: 0 0 auto; width: 14px; height: 14px; margin-top: .34rem; position: relative; }
.zeichen::before, .zeichen::after {
  content: ""; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1px;
  background: var(--gilt); transition: transform .45s var(--ease);
}
.zeichen::after { transform: rotate(90deg); }
.frage[open] .zeichen::after { transform: rotate(0deg); }
.frage__a { padding: 0 0 1.5rem clamp(0px, 2vw, 2rem); max-width: 42rem; }
.frage__a p { font-size: .88rem; line-height: 1.8; color: var(--muted); }
.frage__a p + p { margin-top: .8rem; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--line); background: var(--ivory); padding-block: clamp(48px, 6vw, 78px) clamp(26px, 3vw, 40px); }
.fuss__oben { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 52px); }
@media (max-width: 800px) { .fuss__oben { grid-template-columns: 1fr; gap: 2rem; } }
.fuss__marke b { font-family: var(--display); font-weight: 400; font-size: .98rem; letter-spacing: .26em; text-transform: uppercase; }
/* „Institut" unter der Wortmarke — dieselbe Ordnung wie in der Kopfzeile
   und im Hero: Name gross, Gattung klein und weit gesperrt darunter. */
.fuss__inst {
  display: block; margin-top: .5rem; font-style: normal;
  font-family: var(--ui); font-size: .52rem; letter-spacing: .48em;
  text-indent: .48em; text-transform: uppercase; color: var(--muted);
}
.fuss__marke p { margin-top: .8rem; font-size: .84rem; line-height: 1.74; color: var(--muted); max-width: 24rem; }
.fuss h4 { margin: 0 0 .9rem; font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt); font-weight: 400; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.fuss a { color: var(--muted); text-decoration: none; font-size: .84rem; transition: color .3s var(--ease); }
.fuss a:hover { color: var(--ink); }
.fuss__unten {
  margin-top: clamp(30px, 4vw, 52px); padding-top: 1.3rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; justify-content: space-between; align-items: center;
}
.fuss__unten span { font-size: .7rem; color: var(--muted); }

.skip {
  position: absolute; top: .5rem; left: 50%; z-index: 90; transform: translate(-50%, -250%);
  padding: .8rem 1.5rem; background: var(--paper); border: 1px solid var(--hairline);
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent);
  text-decoration: none; transition: transform .4s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

/* ============================================================
   BEWEGUNG — Grundlage
   Alles ist an den Scrollstand gekoppelt. Nichts läuft von allein.
   ============================================================ */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.an { opacity: 1; transform: none; }
.rv--1 { transition-delay: .07s; }
.rv--2 { transition-delay: .14s; }
.rv--3 { transition-delay: .21s; }

/* Ohne JavaScript kein IntersectionObserver — dann muss alles sichtbar sein. */
html:not(.js) .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .schiene { scroll-snap-type: none; }
}

/* ============================================================
   APPLE-UX-BAUSTEINE — greifen im Hochformat
   ============================================================ */

/* Waagerechte Schiene mit Anschnitt: die klassische Apple-Mobilgeste.
   Am Desktop bleibt derselbe Inhalt ein editorial gesetztes Raster. */
.schiene {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-inline: var(--rand); margin-inline: calc(-1 * var(--rand));
  scrollbar-width: none;
  /* Ohne das kann eine leicht diagonale Wischbewegung (fast jede echte)
     die Karten beim ersten Kontakt kurz auch senkrecht mitziehen, bevor
     die waagerechte Snap-Achse "gewinnt". touch-action nimmt dem Browser
     diese Mehrdeutigkeit sofort ab: nur waagerecht, nie senkrecht. */
  touch-action: pan-x;

  /* Und der Riegel dahinter. touch-action allein reichte nicht, weil die
     Bahn ueberhaupt senkrecht scrollbar WAR: overflow-x: auto zwingt die
     Gegenachse von visible auf auto — die Bahn hatte damit stillschweigend
     auch eine senkrechte Achse. Nachgemessen liessen sich genau 10 px
     scrollen. Die Karten haben keine Schatten, hier wird also nichts
     abgeschnitten. */
  overflow-y: hidden;
}

/* Und die Ursache dieser 10 px: die Karten blenden mit .rv ein, und .rv
   startet mit transform: translateY(10px). In einer waagerechten Bahn
   vergroessert dieser Versatz die scrollbare Flaeche nach unten — solange
   die Karten noch nicht eingeblendet sind. Genau deshalb passierte es nur
   beim ersten Wischen und danach nie wieder: nach der Einblendung steht
   der Versatz auf 0 und der Ueberlauf verschwindet.
   In einer Bahn blenden Karten deshalb ohne Hub ein, nur ueber die
   Deckkraft. Der Hub ist ohnehin eine senkrechte Geste — in einem
   waagerechten Element ist er auch gestalterisch fehl am Platz. */
.schiene > .rv { transform: none; }
.schiene::-webkit-scrollbar { display: none; }
.schiene > * { scroll-snap-align: center; }
.schiene::after { content: ""; width: 1px; }   /* Endanschlag, damit die letzte Karte zentriert einrastet */

/* Fortschrittspunkte zur Schiene */
.punkte { display: flex; gap: 7px; justify-content: center; margin-top: 1.4rem; }
.punkte b {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line);
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.punkte b.ist { background: var(--gilt); transform: scale(1.5); }

/* Griffleiste — signalisiert Wischbarkeit ohne Text */
.griff {
  width: 34px; height: 3px; border-radius: 3px; margin: 0 auto 1.1rem;
  background: color-mix(in srgb, var(--gilt), transparent 62%);
}

@media (min-width: 901px) {
  /* Im Querformat wird aus der Schiene ein ruhiges Raster. */
  .schiene {
    grid-auto-flow: row; grid-template-columns: repeat(var(--sp, 3), minmax(0, 1fr));
    grid-auto-columns: auto; overflow: visible; scroll-snap-type: none;
    padding-inline: 0; margin-inline: 0; gap: clamp(16px, 2vw, 26px);
  }
  .punkte, .griff { display: none; }
}

/* Volle Bildschirmhöhe für Panels */
.panel { min-height: 100svh; display: grid; place-items: center; position: relative; overflow: hidden; }

/* Sichere Bereiche auf dem Telefon */
@supports (padding: max(0px)) {
  .fuss__unten { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* iOS-Zoomschutz */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px; }
}

/* Am Telefon großzügigere Trefferflächen und etwas engerer Rhythmus */
@media (max-width: 640px) {
  :root { --raum: clamp(72px, 16vw, 104px); --raum-eng: clamp(48px, 11vw, 68px); }
  .nav__in { height: 54px; }
  .tlink { min-height: 44px; padding-bottom: .8rem; }
  /* Die Wortmarke ist am Telefon der Weg nach oben — also eine echte Trefferfläche. */
  .nav__marke { min-height: 44px; align-items: center; }
}

/* ============================================================
   STAND 2026/27 — was der Browser inzwischen selbst kann.
   Jeder Block steht hinter @supports: wo die Engine ihn kennt,
   übernimmt sie ihn und der JavaScript-Ersatz entfällt.
   ============================================================ */

:root { interpolate-size: allow-keywords; }   /* Höhen auf auto animierbar */

/* Aufklappen nativ: Höhe UND Sichtbarkeit werden mitanimiert */
@supports selector(details::details-content) {
  details::details-content {
    block-size: 0; overflow: clip;
    transition: block-size .42s var(--ease-weich), content-visibility .42s allow-discrete;
  }
  details[open]::details-content { block-size: auto; }
}

/* CSS-Karussell: der Browser zeichnet die Punkte und kennt die mittige Karte */
@supports selector(::scroll-marker-group) {
  .schiene { scroll-marker-group: after; }
  .schiene::scroll-marker-group { display: flex; gap: 6px; justify-content: center; margin-top: 1.2rem; }
  .schiene > *::scroll-marker {
    content: ""; width: 5px; height: 5px; border-radius: 50%; border: 0;
    background: var(--line);
    transition: background-color .35s var(--ease), transform .35s var(--ease);
  }
  .schiene > *::scroll-marker:target-current { background: var(--gilt); transform: scale(1.5); }
  .punkte { display: none; }
  @media (min-width: 901px) { .schiene::scroll-marker-group { display: none; } }
}

.schiene > * { scroll-snap-stop: always; }
.schiene { overscroll-behavior-inline: contain; scroll-padding-inline: var(--rand); }

/* Zeilenumbruch: Überschriften ausgewogen, Fließtext ohne Schusterjungen */
.d1, .d2, .d3, h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ============================================================
   ERGÄNZUNGEN 26.09. — Sandra-Feedback
   „Terminanfrage präsenter" · „Events — Gemeinschaft"
   ============================================================ */

/* ---------- Termin-Zeile am Ende des Ablaufs ----------
   Der Ablauf endet mit „Begleitung" — genau dort, wo die Leserin
   entscheidet. Die Zeile nimmt den Gedanken auf, statt zu werben. */
.weiter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem;
  margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--hairline);
}
.weiter p { margin: 0; font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: var(--ink); }
.weiter p span { color: var(--muted); }

/* ---------- Terminanfrage: Text links, Formular rechts ---------- */
.anfrage { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.anfrage__text { position: sticky; top: 7rem; }
.zusagen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0; }
.zusagen li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: baseline;
  padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; line-height: 1.6; color: var(--muted);
}
.zusagen li:first-child { border-top: 1px solid var(--line); }
.zusagen b { font-weight: 400; color: var(--ink); }
.zusagen svg { width: 15px; height: 15px; fill: none; stroke: var(--gilt); stroke-width: 1.4; transform: translateY(2px); }
.anfrage__mail { display: inline-block; margin-top: 1.6rem; font-size: .84rem; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--hairline); padding-bottom: .15rem; }
.anfrage__mail:hover { border-color: var(--gilt); }

.formular {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-gross);
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
  box-shadow: 0 30px 70px -48px color-mix(in srgb, var(--accent), transparent 55%);
}
.formular__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; }
.feld { display: grid; gap: .45rem; margin-bottom: 1.25rem; min-width: 0; }
.feld > label, .feld > legend {
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); padding: 0;
}
.feld .opt { letter-spacing: .12em; text-transform: none; color: color-mix(in srgb, var(--muted), transparent 30%); }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 16px;            /* 16px: kein iOS-Zoom beim Antippen */
  color: var(--ink); background: var(--ivory);
  border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 12px;
  padding: .8rem .95rem; min-height: 48px;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.feld textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B0925E' stroke-width='1.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; padding-right: 2.6rem;
}
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; background-color: var(--paper); border-color: var(--hairline); border-bottom-color: var(--gilt);
}
.feld input:user-invalid, .feld select:user-invalid { border-bottom-color: #A8573F; }
.feld__fehler { display: none; font-size: .78rem; color: #A8573F; }
.feld input:user-invalid ~ .feld__fehler, .feld select:user-invalid ~ .feld__fehler { display: block; }

fieldset.feld { border: 0; margin: 0 0 1.25rem; padding: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px; font-size: .84rem; color: var(--muted);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.wahl input:checked + span { border-color: var(--gilt); background: var(--tint-warm); color: var(--accent-deep); }
.wahl input:focus-visible + span { outline: 2px solid var(--gilt); outline-offset: 2px; }

.einwilligung { display: grid; grid-template-columns: 22px 1fr; gap: .8rem; align-items: start; margin: .4rem 0 1.6rem; }
.einwilligung input {
  width: 20px; height: 20px; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer;
}
.einwilligung label { font-size: .8rem; line-height: 1.65; color: var(--muted); }
.einwilligung a { color: var(--accent); }

.formular__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.formular__fuss .pille { font-size: .84rem; }
.formular__notiz { margin: 0; font-size: .74rem; line-height: 1.6; color: var(--muted); flex: 1 1 14rem; }
.formular__danke {
  display: none; margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: 14px;
  background: var(--tint); font-size: .86rem; line-height: 1.65; color: var(--ink);
}
.formular.gesendet .formular__danke { display: block; }

@media (max-width: 900px) {
  .anfrage { grid-template-columns: 1fr; }
  .anfrage__text { position: static; }
}
@media (max-width: 560px) {
  .formular__reihe { grid-template-columns: 1fr; }
  .formular { border-radius: var(--r); }
}

/* ---------- Gemeinschaft ---------- */
.formate { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
.formate li { padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.formate li:first-child { border-top: 1px solid var(--line); }
.formate h3 { margin: 0 0 .3rem; }
.formate p { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--muted); }

/* ---------- Leistungen: Stand 07.11. (Sandra) ----------
   Medical Beauty bleibt sichtbar, ist aber erkennbar derzeit nicht im
   Angebot: hell überlegt, ohne Hover-Anhebung, mit leisem Vermerk. */
.karte--ruht { background: color-mix(in srgb, var(--paper), var(--ivory) 40%); }
.karte--ruht .bild::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--paper), transparent 38%);
}
.karte--ruht .karte__text h3, .karte--ruht .karte__text p { opacity: .62; }
.karte--ruht:hover { transform: none; box-shadow: none; }
.karte--ruht:hover::after { opacity: 0; }
.karte__hinweis {
  display: table; margin: .7rem 0 0; padding: .28rem .65rem; border-radius: 999px;
  font-size: .5rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--hairline); background: var(--paper); vertical-align: middle;
}
.karte__weiter {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; color: var(--accent);
  min-height: 34px;
}
.karte__weiter svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.karte__weiter:hover { color: var(--accent-deep); }
.formate p a { color: var(--accent); }

/* Film-Unterzeile: steht seit dem Wegfall des Labels allein */
.film__unter:first-child { margin-top: 0; }

/* Lange Wörter in schmalen Karten (vier Spalten): nur an gesetzten
   Trennstellen (­) — automatische Trennung zerlegte die englischen
   Namen falsch („Balan-ce“). */
.karte__text h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; }

/* ══ 08.11. — Runde Sandra 3 ══ */

/* Kartenclaim: kurze Leitzeile unter dem Titel („Wissen. Präzision.
   Ästhetik.") — in der Display-Schrift, eine Stufe ruhiger als der Titel,
   damit sie als Untertitel liest und nicht als zweiter Absatz. */
.karte__text p.karte__claim {
  font-family: var(--display); font-size: .95rem; line-height: 1.45;
  color: var(--accent); margin: -.15rem 0 .6rem; letter-spacing: .01em;
  text-wrap: balance;
}

/* Apparative Kosmetik: eigenes Motiv GERAET-01 (tokens.css) — ein scharfer
   Ausschnitt aus dem RAUM-03-Master, nah am Handstück mit Kabel. */

/* Beauty & Begegnung: Sandras Stichwortzeile als drei ruhige Merkmale —
   getönt und ohne Kontur, damit nur der Anfrage-Knopf wie ein Knopf aussieht. */
.stichworte {
  list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.stichworte li {
  padding: .5rem .95rem; border-radius: 999px;
  font-size: .56rem; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); background: var(--tint-warm);
  border: 1px solid transparent;
}

/* Themen-Workshops unter Beauty & Begegnung (Liste wie .formate) */
.themen__titel {
  margin: 2.2rem 0 0; font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gilt);
}
.formate--themen { margin-top: .9rem; }
.formate--themen + .karte__weiter { display: flex; width: fit-content; }

/* Medical Beauty „In Vorbereitung": Vermerk steht rechts in der Nummernzeile,
   der Titel fluchtet mit den Nachbarkarten. Gedämpft werden nur Bild und
   Titel — Sandras Text bleibt voll lesbar (vorher ≈2,3:1 Kontrast). */
.karte--ruht .karte__text { position: relative; }
.karte--ruht .karte__hinweis {
  position: absolute; top: clamp(18px, 2.2vw, 28px); right: clamp(18px, 2.2vw, 28px); margin: -.3rem 0 0;
}
.karte--ruht .karte__text p { opacity: 1; }

/* Kopfleiste am Rechner: 8 Ziele. Nie umbrechen; zwischen 901 und 1000 px
   weicht „Ablauf" (steht auch im Fuß und im Menü). Im Hochformat führen
   Burger und Blatt-Menü — die Linkzeile hätte dort keinen Platz. */
.nav__links a { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1000px) {
  .nav__links { gap: .9rem; }
  .nav__neben { display: none; }
}
@media (max-aspect-ratio: 1/1) { .nav__links { display: none; } }


/* Instagram-Link (Fuß, Kontakt): Lucide-Symbol vor dem Namen */
.fuss a.insta, .anfrage__insta { display: inline-flex; align-items: center; gap: .5rem; }
.fuss a.insta svg, .anfrage__insta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.anfrage__insta { margin-top: .6rem; margin-left: 0; }