/* ============================================================
   Carolin Teiz — Aesthetische und regenerative Medizin
   Aufbau nach normalisboring.es/lasolana (Motion, Typo, Header)
   und tecnoarreda.it (Ueber uns, Beispiele).
   ============================================================ */

/* --- Schriften ------------------------------------------------ */

@font-face {
  font-family: 'Gamgote';
  src: url('../assets/fonts/gamgote-light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gamgote';
  src: url('../assets/fonts/gamgote.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gamgote';
  src: url('../assets/fonts/gamgote-light-italic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gamgote';
  src: url('../assets/fonts/gamgote-italic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/libre-franklin-var.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Libre Franklin';
  src: url('../assets/fonts/libre-franklin-italic-var.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

/* --- Tokens --------------------------------------------------- */

:root {
  /* Stein und Creme */
  --stone-100: #f7f4ef;
  --stone-200: #f1eee7;
  --stone-300: #ece8e0;
  --stone-400: #e7e2d8;
  --cream:     #fbf8f3;

  /* Ein Akzent: Cognac */
  --accent:      #9a6a4f;
  --accent-deep: #7d5238;
  --accent-veil: #ece0d6;   /* flaechig, fuer das Menue */

  /* Edles Grau. soft und faint sind auf den Stein gerechnet:
     beide halten >= 4.5:1 auf --stone-300, sonst faellt der
     Kontrast-Check (axe) auf Meta-Zeilen und Fliesstext durch. */
  --ink:       #33302a;
  --ink-soft:  #5f5a51;
  --ink-faint: #6a6358;
  --line:      rgba(90, 84, 74, .2);

  /* Typo */
  --serif: 'Gamgote', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans:  'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
  --script:'Mrs Saint Delafield', 'Gamgote', cursive;

  --t-display: clamp(3.2rem, 12.5vw, 16rem);
  --t-mid:     clamp(2.4rem, 6.8vw, 8.4rem);
  --t-sub:     clamp(1.5rem, 3.4vw, 3.4rem);
  --t-card:    clamp(1.35rem, 1.9vw, 2.1rem);
  --t-body:    clamp(1rem, 1.05vw, 1.2rem);
  --t-meta:    clamp(.72rem, .78vw, .82rem);

  --lh-display: .84;
  --lh-mid:     .9;
  --lh-body:    1.55;

  /* Raster, 4px-Basis */
  --space-1:  .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4:  1rem;    --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;
  --space-12: 3rem;    --space-16: 4rem;   --space-20: 5rem;
  --space-24: 6rem;    --space-32: 8rem;   --space-40: 10rem;
  --space-56: 14rem;

  --gutter: clamp(1.25rem, 3.4vw, 4rem);

  /* Hoehe des Kopfs: zwei Polster plus die Knopfhoehe. Die Hero haelt
     sich diesen Streifen frei, damit der Kopf ihr nicht hineinlaeuft. */
  --head-pad: clamp(1rem, 1.9vw, 1.75rem);
  --head-h: calc(var(--head-pad) * 2 + clamp(2.4rem, 3vw, 3.1rem));

  /* Bewegung, Werte aus der Referenz uebernommen */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);     /* ~ power3.out   */
  --ease-io:   cubic-bezier(.65, 0, .35, 1);    /* ~ power2.inOut */
  --dur-fast:  .35s;
  --dur-mid:   .65s;
  --dur-slow:  1.25s;
}

/* --- Basis ---------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--stone-300);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

/* Links im Fliesstext tragen die Serifenschrift */
main p a, .foot p a {
  font-family: var(--serif);
  font-size: 1.08em;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
main p a:hover, .foot p a:hover { color: var(--accent-deep); border-color: var(--accent); }

::selection { background: var(--accent); color: var(--cream); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--cream); padding: var(--space-3) var(--space-4);
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

/* Titelklassen */
.t-display {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 300;
  letter-spacing: -.01em;
}
.t-mid {
  font-family: var(--serif);
  font-size: var(--t-mid);
  line-height: var(--lh-mid);
  font-weight: 300;
}
/* Ein Wort neben dem angeschnittenen Bild, darf groesser stehen */
.t-gallery {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 9.2vw, 11rem);
  line-height: var(--lh-mid);
  font-weight: 300;
  letter-spacing: -.015em;
}

/* Zeilenmaske fuer den Reveal. Jede .line kappt ihren Inhalt,
   .w faehrt von unten herein (Muster aus scroll.js).
   Polster oben UND unten, jeweils per negativem Rand wieder aus dem
   Fluss genommen: unten fangen wir die Unterlaengen der Serife ab,
   oben die Umlautpunkte — bei line-height .9 ragen sie sonst aus der
   Maske und werden vom overflow abgeschnitten (aus "Ueber uns" wurde
   sichtbar nur "Uber uns"). */
.line {
  display: block;
  overflow: hidden;
  padding-top: .18em;
  margin-top: -.18em;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.line > .w { display: block; will-change: transform; }
.line--right { text-align: right; }

[data-split-lines] .line-mask {
  display: block;
  overflow: hidden;
  padding-top: .14em;
  margin-top: -.14em;
  padding-bottom: .12em;
  margin-bottom: -.12em;
}
[data-split-lines] .line-mask > span { display: block; will-change: transform; }

/* --- Marmor --------------------------------------------------- */

/* z-index 0 statt -1: der Stein muss im selben Stapelkontext
   liegen wie die Wortmarken, sonst hat mix-blend-mode: difference
   dort keinen Untergrund und weisse Schrift bleibt weiss. */
.marble {
  position: fixed; inset: 0; z-index: 0;
  isolation: isolate;
  /* Die Lichtebenen sind 170vmax gross und ragen bewusst ueber den Rand.
     Ohne Clipping schieben sie die Dokumentbreite auf und die Seite
     laesst sich seitlich scrollen. */
  overflow: hidden;
  background: var(--stone-300);
  pointer-events: none;
}
/* overflow auch am SVG selbst: Firefox rechnet die rotierten, weit
   ueberstehenden Filter-Rects sonst in die Dokumentbreite ein. */
.marble > svg { width: 100%; height: 100%; overflow: hidden; }

.marble .light {
  position: absolute; left: 0; top: 0;
  pointer-events: none;
  transform: translate3d(33vw, 24vh, 0);
  will-change: transform;
}
/* Etwas flacher als in der Vorlage: die Seite traegt Inhalt,
   der Stein soll ihn nicht ueberzeichnen. */
.light--shade {
  width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: radial-gradient(closest-side,
    rgba(92,86,75,0) 0%, rgba(92,86,75,.03) 26%, rgba(88,82,71,.13) 55%,
    rgba(82,76,65,.22) 82%, rgba(82,76,65,.26) 100%);
  mix-blend-mode: multiply;
  opacity: calc(.95 * var(--light-strength, 1));
}
.light--core {
  width: 62vmax; height: 62vmax; margin: -31vmax 0 0 -31vmax;
  background: radial-gradient(closest-side,
    rgba(255,251,240,.62) 0%, rgba(255,250,238,.22) 42%, rgba(255,250,238,0) 74%);
  opacity: calc(.75 * var(--light-strength, 1));
}
.light--depth {
  width: 96vmax; height: 96vmax; margin: -48vmax 0 0 -48vmax;
  background: radial-gradient(closest-side,
    rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 78%);
  mix-blend-mode: soft-light;
  opacity: calc(.9 * var(--light-strength, 1));
}
.static-light { display: none; }

/* --- Header --------------------------------------------------- */

/* ueber dem Menue (80), damit der Knopf dort auf "Schliessen"
   umspringt und bedienbar bleibt */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--head-pad) var(--gutter);
  will-change: transform;
}
/* Die Wortmarke steht in Tinte auf dem Stein. Sie laeuft nicht mehr
   auf Differenz: der Kopf haelt sich seinen eigenen Streifen frei
   (--head-h), also liegt nie ein Bild darunter, das sie kippen wuerde. */
.head__brand {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.9vw, 3.1rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--ink);
}
.head__actions { display: flex; align-items: center; gap: var(--space-2); }

/* Pill-Buttons. Milchglas traegt sowohl auf Stein als auch auf Bild,
   ohne dass der Text mit dem Untergrund kippt. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: clamp(2.4rem, 3vw, 3.1rem);
  padding: 0 clamp(1rem, 1.5vw, 1.6rem);
  border: 1px solid rgba(90, 84, 74, .22);
  border-radius: 999px;
  background: rgba(251, 248, 243, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--ink);
  font-family: var(--serif);
  font-size: calc(var(--t-meta) * 1.35);
  font-weight: 400;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.pill > span { display: block; }
.pill:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* Ohne Fuellung: nur Kontur und Tinte. Gefuellt wird erst beim Zeigen. */
.pill--solid {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: var(--ink);
  border-color: var(--ink);
}
.pill--solid:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.pill--line { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pill--line:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* --- Menue ---------------------------------------------------- */

/* Flaechig in einem eigenen Ton, nicht schwarz: die Referenz legt
   das Menue als eigenen Raum an, nicht als Verdunklung. */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--accent-veil);
  color: var(--ink);
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: start;
  column-gap: clamp(2rem, 6vw, 8rem);
  padding: clamp(6rem, 13vh, 10rem) var(--gutter) var(--space-12);
  opacity: 0;
  overflow-y: auto;
}
.menu[hidden] { display: none; }

.menu__side { display: flex; flex-direction: column; height: 100%; }
.menu__media { position: relative; }
/* Fast entfaerbt: nur auf neutralem Grau bleibt die Differenz der
   Wortmarke wirklich neutral, statt ins Kalte zu ziehen. */
.menu__media img {
  width: 100%; height: 34svh; object-fit: cover;
  filter: saturate(.18) brightness(.86);
}
/* Hier bewusst ohne Differenz: auf mittelhellen Bildpartien wuerde
   sie nur grau ausbleichen. Der Effekt bleibt der Hero vorbehalten. */
.menu__mark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 300;
  color: var(--cream);
  text-shadow: 0 1px 20px rgba(30, 27, 24, .5);
}
.menu__minor {
  margin-top: auto; padding-top: var(--space-12);
  display: flex; flex-direction: column; gap: var(--space-1);
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.menu__minor a:hover { color: var(--accent-deep); }

.menu__main { display: flex; flex-direction: column; height: 100%; }
.menu__label {
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-8);
}
.menu__nav { display: flex; flex-direction: column; }
/* Nummer in Klammern, Titel, Zusatz kursiv rechts */
.menu__nav a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-4);
  padding: clamp(.3rem, .8vh, .7rem) 0;
}
.menu__nav em {
  font-family: var(--serif);
  font-size: clamp(.9rem, 1.1vw, 1.15rem);
  font-style: normal;
  color: var(--ink-faint);
}
.menu__nav span {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.4vw, 5.2rem);
  line-height: 1.04;
  font-weight: 300;
  transition: color var(--dur-fast) var(--ease-out);
}
.menu__nav i {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(.85rem, 1.05vw, 1.1rem);
  color: var(--ink-soft);
}
.menu__nav a:hover span { color: var(--accent-deep); }
.menu__contact {
  margin-top: auto; padding-top: var(--space-12);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  color: var(--ink-soft);
}

/* Der Knopf wechselt die Beschriftung, statt ein zweites Kreuz zu setzen */
.pill--toggle [data-label-close] { display: none; }
.menu-open .pill--toggle [data-label-open] { display: none; }
.menu-open .pill--toggle [data-label-close] { display: block; }

/* Die Wortmarke traegt ihre Farbe inzwischen ueberall selbst —
   im Menue ist nichts mehr umzuschalten. */

/* --- 1 · Hero ------------------------------------------------- */

/* Bewusst ohne z-index: die Hero darf keinen eigenen Stapelkontext
   aufmachen, sonst verliert der Name den Stein als Untergrund. */
.hero {
  position: relative;
  /* Der Kopfstreifen kommt OBEN DRAUF, statt die Hero zu stauchen: innen
     bleiben exakt die 100svh, auf die Bildhoehe, Namensversatz und
     Scrollhinweis gerechnet sind. Die Hoehe traegt das Polster darum
     selbst — content-box waere der kuerzere Weg, wuerde aber auch die
     Breite um zwei Rinnsteine aufblaehen und die Seite querscrollen. */
  height: calc(100svh + var(--head-h));
  display: flex; align-items: center;
  padding: var(--head-h) var(--gutter) 0;
}
/* Kein transform und kein will-change auf dieser Ebene: beides
   erzeugt einen Stapelkontext und schneidet den Namen vom Stein
   ab. Das Zuruecktreten passiert darum auf den Kindern. */
.hero__inner {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center;
}
.hero__media, .hero__name, .hero__meta { transform-origin: 50% 50%; }

/* Bild links, 42% Breite auf 90vh */
.hero__media {
  position: relative;
  flex: 0 0 42%;
  height: 90svh;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
/* Gedaempft und leicht abgedunkelt. Das haelt den Differenzeffekt
   des Namens neutral, statt ihn ueber dem Hautton ins Kalte zu
   ziehen, und gibt dem Bild den ruhigeren, redaktionellen Ton. */
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(.62) brightness(.9);
  will-change: transform;
}

/* Name startet innerhalb des Bildes: die ersten Buchstaben
   ueberlappen. Tinte statt Differenz: auf dem hellen Portraet
   bleicht der Differenzeffekt aus ("Teiz" war kaum lesbar),
   dunkle Schrift traegt auf Anzug wie auf Stein. */
.hero__name {
  position: absolute;
  left: 36%;
  top: 50%;
  /* eigenstaendiges translate, damit GSAP transform fuer die
     Skalierung nutzen kann, ohne die Position zu ueberschreiben */
  translate: 0 -54%;
  z-index: 1;          /* unter .film (2), damit das Video darueber laeuft */
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: 300;
  letter-spacing: -.015em;
  color: var(--ink);
  pointer-events: none;
}

/* Untertitel und Button: eigene Zeile unter "Teiz",
   nach rechts versetzt an dessen Ende.
   Der Name laeuft zweizeilig und ragt um rund .77 der Displaygroesse
   unter die Mittellinie. Der Versatz stand exakt auf dieser Kante, also
   schnitt der Untertitel ins "Teiz" — knapp ueber ein Grad Luft. */
.hero__meta {
  position: absolute;
  left: 36%;
  top: 50%;
  z-index: 1;
  margin-top: calc(var(--t-display) * .95);
  padding-left: clamp(1rem, 11vw, 14rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-5);
}
.hero__claim {
  font-family: var(--sans);
  font-size: clamp(.85rem, 1.15vw, 1.15rem);
  line-height: 1.35;
  font-weight: 350;
  letter-spacing: .01em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
}

/* --- 2 · Film ------------------------------------------------- */

/* Der Film liegt eine Ebene ueber der Hero und greift mit dem
   negativen Rand in deren unteres Zehntel. Beim Scrollen schiebt
   er sich darueber, waehrend die Hero zurueckskaliert. */
.film {
  position: relative; z-index: 2;
  margin-top: -10svh;
  /* Volle Breite, kein Rinnstein: der Film laeuft von Kante zu Kante
     und schiebt sich beim Scrollen ueber das untere Zehntel der Hero. */
  padding: 0 0 var(--space-32);
}
.film__frame {
  position: relative;
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.film__video {
  width: 100%; height: 88svh;
  object-fit: cover;
  background: var(--ink);
}
.film__cue {
  position: absolute; left: var(--space-8); bottom: var(--space-8);
  display: flex; align-items: center; gap: var(--space-3);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: .04em;
}
.film__cue svg {
  width: 2.6rem; height: 2.6rem;
  padding: .7rem;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  fill: #fff;
  transition: background var(--dur-fast) var(--ease-out);
}
.film__frame:hover .film__cue svg { background: rgba(255,255,255,.18); }

/* --- 3 · Leistungen ------------------------------------------- */

/* Die Sektion wird fixiert, darum muss sie in einen Bildschirm
   passen: Titelblock oben, darunter die Bahn mit 70svh Karten. */
.services {
  position: relative; z-index: 2;
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 4vh, 3.5rem);
  overflow: hidden;
}
.services__head { padding: 0 var(--gutter); }
/* Etwas zurueckgenommen gegenueber --t-mid: drei Zeilen und eine
   70svh-Bahn muessen zusammen in einen Bildschirm passen. */
.services__head .t-mid { font-size: clamp(2.1rem, 5.6vw, 6.6rem); }
/* Zeile eins und zwei enden knapp hinter der Mitte,
   die dritte setzt rechtsbuendig dagegen. */
.services__head .line { max-width: 58%; }
.services__head .line--right { max-width: none; }

.services__rail { overflow: visible; }
.services__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2.2vw, 2.5rem);
  padding: 0 var(--gutter);
  width: max-content;
  will-change: transform;
}

/* 25vw breit, 70svh hoch. Etwa dreieinhalb Karten stehen im Bild.
   Bei flachen Fenstern weicht die Hoehe zurueck, damit der
   Titelblock darueber nicht abgeschnitten wird. */
.card {
  flex: 0 0 25vw;
  height: min(70svh, calc(100svh - 21.5rem));
  display: flex; flex-direction: column;
}
.card__media {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body { flex: 0 0 auto; padding-top: var(--space-5, 1.25rem); }
.card__num {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-meta);
  font-style: italic;
  color: var(--accent-deep);
  margin-bottom: var(--space-2);
}
.card__title {
  font-family: var(--serif);
  font-size: var(--t-card);
  line-height: 1.05;
  font-weight: 300;
  margin-bottom: var(--space-3);
  hyphens: auto;
}
.card__body p {
  font-size: clamp(.88rem, .95vw, 1rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* --- 4 · Ueber uns -------------------------------------------- */

.about {
  position: relative; z-index: 2;
  display: grid;
  /* 1fr statt 50%: zwei 50%-Spuren PLUS column-gap laufen ueber die
     Containerbreite hinaus (bei 1920 um 32px) und machten die Seite
     querscrollbar. fr-Spuren teilen den Platz nach Abzug der Rinne. */
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: var(--space-40) var(--gutter) var(--space-32);
  column-gap: clamp(2rem, 5vw, 6rem);
}

.about__portrait { position: relative; grid-column: 1; }
.about__media {
  height: 78svh;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }

/* Unterschrift, ragt ueber den rechten Bildrand hinaus */
.about__sign {
  position: absolute;
  right: 0; bottom: clamp(2rem, 6vh, 5rem);
  transform: translateX(38%);
  font-family: var(--script);
  font-size: clamp(3rem, 6.5vw, 7rem);
  line-height: 1;
  color: var(--cream);
  text-shadow: 0 1px 24px rgba(51, 48, 42, .35);
  white-space: nowrap;
  pointer-events: none;
}

/* Textspalte, um 10% der Bildhoehe nach unten versetzt */
.about__text {
  grid-column: 2;
  padding-top: 7.8svh;
  max-width: 46ch;
}
.about__text .t-mid { margin-bottom: var(--space-8); }
.about__text p { color: var(--ink-soft); }

/* Bild von beiden, mit Abstand darunter auf etwa 70% Hoehe.
   Die Breite folgt dem Hochformat der Aufnahme (795x1200): cover auf
   Spaltenbreite schnitt rund ein Drittel der Hoehe weg und damit die
   Gesichter an. Ungeschnitten in eigener Proportion statt gezoomt. */
.about__duo {
  grid-column: 2;
  margin-top: var(--space-24);
  height: 70svh;
  width: fit-content;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.about__duo img { width: auto; height: 100%; }

/* Pfeil-Link, Muster aus tecnoarreda */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-8);
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.link-arrow svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  transform: rotate(90deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--accent-deep); }
.link-arrow:hover svg { transform: rotate(90deg) translate(3px, 3px); }

/* --- 5 · Beispiele -------------------------------------------- */

.gallery { position: relative; z-index: 2; padding-bottom: var(--space-32); }

.gallery__head {
  display: grid;
  grid-template-columns: 22vw 1fr;
  align-items: center;
  column-gap: clamp(2rem, 5vw, 6rem);
  padding-bottom: var(--space-12);
}
/* Bild links, am Seitenrand angeschnitten */
.gallery__crop {
  margin-left: calc(var(--gutter) * -1);
  height: 62svh;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.gallery__crop img { width: 100%; height: 100%; object-fit: cover; }
.gallery__intro { padding-right: var(--gutter); }

/* Nur die Bahn wird fixiert, der Kopf laeuft normal durch. */
.gallery__rail {
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  padding: 0 var(--gutter);
  height: 74svh;
  width: max-content;
  will-change: transform;
}
.shot {
  flex: 0 0 clamp(16rem, 26vw, 30rem);
  height: 50svh;
  overflow: hidden;
  clip-path: inset(var(--clipPath, 0% 0% 0% 0%));
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
/* Hoehenversatz, damit die Reihe atmet */
.shot--a { align-self: flex-start; }
.shot--b { align-self: center; }
.shot--c { align-self: flex-end; }

/* --- Footer --------------------------------------------------- */

.foot {
  position: relative; z-index: 2;
  background: var(--cream);
  padding: var(--space-24) var(--gutter) var(--space-8);
  border-top: 1px solid var(--line);
  /* Fangnetz gegen die nowrap-Wortmarke: laufen Fallback-Metriken
     (Palatino, bevor Gamgote lädt) breiter, clippt der Fuss, statt
     die Seite querscrollbar zu machen. */
  overflow: hidden;
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-bottom: var(--space-24);
}
.foot__label {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-meta);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}
.foot__col p { font-size: clamp(.9rem, 1vw, 1.05rem); line-height: 1.6; }
.foot__col--cta { display: flex; align-items: flex-start; justify-content: flex-end; }

.foot__pending { color: var(--ink-faint); }

/* Wortmarke gross am Fuss, wie in der Referenz: sie soll die
   Satzbreite ausfuellen, darum am Zeichenmass ausgerichtet. */
.foot__mark {
  font-family: var(--serif);
  /* 17.2vw statt 18.2vw: "Carolin Teiz" laeuft in Gamgote auf rund
     5.2em Breite — bei 18.2vw stand der Zug 20-32px ueber der
     Satzbreite und die Seite wurde querscrollbar. */
  font-size: clamp(3.5rem, 17.2vw, 22rem);
  line-height: .82;
  font-weight: 300;
  letter-spacing: -.03em;
  color: var(--ink);
  white-space: nowrap;
  padding-bottom: var(--space-6);
}
.foot__legal {
  display: flex; gap: var(--space-6);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
  font-size: var(--t-meta);
  color: var(--ink-faint);
}
.foot__legal a:hover { color: var(--accent-deep); }

/* --- Player --------------------------------------------------- */

.player {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 18, 16, .94);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(3rem, 8vh, 7rem) var(--gutter);
  opacity: 0;
}
.player[hidden] { display: none; }
.player__close {
  position: absolute; top: var(--gutter); right: var(--gutter);
  width: clamp(2.8rem, 3.6vw, 3.8rem); height: clamp(2.8rem, 3.6vw, 3.8rem);
  border: 0; background: transparent; cursor: pointer; padding: 0;
  transition: transform var(--dur-fast) var(--ease-out);
}
.player__close svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.5; }
.player__close:hover { transform: rotate(90deg); }
.player__stage { width: min(100%, 1400px); will-change: transform, opacity; }
.player__video { width: 100%; max-height: 82svh; background: #000; }

/* ============================================================
   Mobil. Die Referenz loest die horizontalen Bahnen auf
   (is_mobile-Zweig in scroll.js) und stapelt vertikal.
   ============================================================ */

@media (max-width: 950px) {

  :root {
    --t-display: clamp(2.8rem, 16vw, 6rem);
    --t-mid:     clamp(2rem, 11vw, 4rem);
    --lh-display: .92;
  }

  /* Hero: Bild oben, der Name schneidet nur dessen Unterkante an
     und laeuft auf den Stein hinaus. Derselbe Gedanke wie am
     Desktop, nur ueber die Waagerechte statt die Senkrechte. */
  .hero { position: relative; height: auto; padding: 0; }
  .hero__inner { flex-direction: column; height: auto; padding-top: 15svh; }
  .hero__media { flex: none; width: 78%; height: 54svh; align-self: flex-start; margin-left: 0; }

  .hero__name {
    position: relative; left: auto; top: auto; translate: none;
    margin: -5svh 0 0 var(--gutter);
    align-self: flex-start;
  }
  .hero__meta {
    position: relative; left: auto; top: auto;
    margin: var(--space-8) var(--gutter) 0;
    padding-left: 0;
  }
  /* Video haengt direkt an, ohne Ueberlappung */
  .film { margin-top: var(--space-16); padding-bottom: var(--space-20); }
  .film__video { height: 62svh; }
  .film__cue { left: var(--space-4); bottom: var(--space-4); }

  /* Bahnen werden zu Wischleisten mit Snap */
  .services { padding-top: var(--space-16); }
  .services__head { padding-bottom: var(--space-12); }
  .services__head .line { max-width: none; }
  .services__head .line--right { text-align: left; }

  .services__rail, .gallery__rail {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .services__rail::-webkit-scrollbar, .gallery__rail::-webkit-scrollbar { display: none; }
  .services__track, .gallery__track { transform: none !important; }
  .card { flex-basis: 72vw; scroll-snap-align: start; }
  .card__media { height: 52svh; }

  /* Ueber uns: einspaltig */
  .about {
    grid-template-columns: 1fr;
    padding: var(--space-20) var(--gutter) var(--space-16);
    row-gap: var(--space-12);
  }
  .about__portrait, .about__text, .about__duo { grid-column: 1; }
  .about__media { height: 62svh; }
  .about__sign { transform: translateX(12%); font-size: clamp(2.4rem, 13vw, 4rem); }
  .about__text { padding-top: 0; max-width: none; }
  .about__duo { margin-top: 0; height: 52svh; }

  /* Beispiele: Titel ueber dem angeschnittenen Bild */
  .gallery__head {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
    padding-bottom: var(--space-12);
  }
  .gallery__crop { height: 40svh; width: 62%; }
  .gallery__intro { padding-right: 0; padding-left: var(--gutter); }
  .gallery__track { height: auto; padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .shot { flex-basis: 68vw; height: 44svh; scroll-snap-align: center; }
  .shot--a, .shot--b, .shot--c { align-self: auto; }

  /* Menue: einspaltig, das Bild rueckt hinter die Liste */
  .menu {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
    padding-top: clamp(5rem, 11vh, 7rem);
  }
  .menu__side { order: 2; height: auto; }
  .menu__main { order: 1; height: auto; }
  .menu__media img { height: 24svh; }
  .menu__minor { margin-top: var(--space-8); padding-top: var(--space-6); }
  .menu__nav a { grid-template-columns: 2.2rem 1fr; }
  .menu__nav i { display: none; }
  .menu__contact { margin-top: var(--space-8); padding-top: var(--space-6); }

  /* Footer */
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-16); }
  .foot__col--cta { grid-column: 1 / -1; justify-content: flex-start; }
  .foot__mark { font-size: clamp(2.6rem, 17vw, 5rem); }
}

@media (max-width: 560px) {
  .head__brand { font-size: 1.15rem; }
  .pill { height: 2.25rem; padding: 0 .85rem; font-size: .7rem; }
  .hero__media { width: 88%; height: 52svh; }
  .card { flex-basis: 82vw; }
  .shot { flex-basis: 80vw; }
  .foot__grid { grid-template-columns: 1fr; }
}

/* --- Bewegung aus ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marble .light { transition: none; }
  .line > .w, [data-split-lines] .line-mask > span { transform: none !important; }
  .card__media img { transition: none; }
}