/* padel-garmisch.de — Seiten-CSS.
   Tokens kommen aus tokens/*.css, hier stehen nur Layout und Komponenten. */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius-border.css");
@import url("tokens/elevation.css");
@import url("tokens/motion.css");
@import url("tokens/semantic.css");
@import url("tokens/base.css");
@import url("lenis.css");

/* ---------------------------------------------------------------- Grundgerüst */

/* Kein scroll-behavior:smooth — das würde gegen Lenis arbeiten. Ohne Lenis
   (kein JS, reduced motion) scrollt der Browser nativ, und das ist richtig so. */
body { overflow-x: hidden; }
img, svg { max-width: 100%; }

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
}
.section--raised { background: var(--surface-raised); border-top: var(--border-hair) solid var(--border-default); }
.section--faq    { background: #16292F; }
.section--brand  { background: var(--surface-brand); border-top: var(--border-hair) solid rgba(0,160,230,.28); }
.section--verlauf {
  background: linear-gradient(180deg, #0E1A20 0%, #0F1F26 42%, #16292F 100%);
  border-top: var(--border-hair) solid var(--border-default);
}

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--grid-gap);
  align-items: center;
}
.split--karte { grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 3vw, 56px); }
.split--cta   { grid-template-columns: 1.1fr .9fr; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }

/* ---------------------------------------------------------------- Typografie */

.kicker {
  font-size: var(--type-kicker);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--text-kicker);
}
.kicker--linie { display: flex; align-items: center; gap: var(--space-3); }
.kicker--linie::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.kicker--auf-brand { color: var(--gruen-300); }

.lead {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  color: var(--text-body);
  max-width: var(--measure-lead);
}
.lead--hell { color: var(--text-hell); max-width: 48ch; }
.lead--kuehl { color: var(--text-body-cool); max-width: 52ch; }
.text { font-size: 17px; line-height: var(--lh-body); color: var(--text-body); max-width: var(--measure-body); }
.text--eng { max-width: 52ch; }
.mono { font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: .04em; color: var(--text-quiet); }

h2 { max-width: 22ch; }

/* ---------------------------------------------------------------- Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-text);
  font-weight: var(--fw-bold);
  font-size: .8125rem;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  padding: 14px 24px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    color var(--dur-ui) var(--ease-out);
}
.btn--sm { padding: 10px 18px; font-size: .75rem; min-height: 36px; }
.btn--lg { padding: 19px 30px; font-size: .9375rem; min-height: 56px; }

.btn--primary {
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  border-color: var(--action-primary-bg);
}
.btn--primary:hover {
  background: var(--action-primary-hover-bg);
  border-color: var(--action-primary-hover-bg);
  color: var(--action-primary-fg);
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-cta);
}
.btn--secondary {
  background: transparent;
  color: var(--action-secondary-fg);
  border-color: var(--ra-petrol);
}
.btn--secondary:hover {
  background: var(--action-secondary-hover-bg);
  border-color: var(--linie-3);
  color: var(--action-secondary-fg);
}
.btn:active { transform: scale(var(--press)); }
.btn__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.aktionen { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------------------------------------------------------------- Kopf- und Fußzeile */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: var(--blur-bar);
  -webkit-backdrop-filter: var(--blur-bar);
  border-bottom: var(--border-hair) solid var(--border-subtle);
}
.kopf__inner {
  display: flex; align-items: center; gap: var(--space-8);
  padding-block: var(--kopf-pad, 26px);
  transition: padding-block .32s var(--ease-out);
}
/* Der Kopf startet großzügig und zieht sich beim Scrollen zusammen: oben steht die
   Marke, ab der ersten Bildschirmhöhe zählt der Platz. Die Werte hängen an zwei
   Variablen, damit Logo und Balken im selben Takt schrumpfen.
   Untergrenze ist nicht Geschmack: die zweizeilige Subline „Garmisch-Partenkirchen“
   wird unter etwa 44 px unleserlich. */
.kopf__logo {
  height: var(--kopf-logo, 82px);
  width: auto; display: block;
  transition: height .32s var(--ease-out);
}
.kopf--klein { --kopf-logo: 50px; --kopf-pad: 12px; }
.kopf__nav { display: flex; gap: var(--space-6); margin-left: auto; }
.navlink {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-hell);
  text-decoration: none;
  border-bottom: none;
}
.navlink:hover { color: var(--gruen-500); }

.fuss { position: relative; background: var(--bg-tief); border-top: var(--border-strong) solid var(--gruen-500); padding: var(--section-y-tight) 0 var(--space-8); }
.fuss__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: var(--grid-gap); }
.fuss__logo { height: 62px; width: auto; display: block; }
.fuss__spalte { display: flex; flex-direction: column; gap: var(--space-3); }
.fuss__titel {
  margin: 0 0 var(--space-1);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gruen-500);
}
.fuss__link { font-size: 15px; color: var(--text-body); text-decoration: none; border-bottom: none; }
.fuss__link:hover { color: var(--gruen-500); }
.fuss__adresse { font-style: normal; font-size: 15px; line-height: 1.7; color: var(--text-leise); }
.fuss__leiste {
  max-width: var(--wrap);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--gutter) 0;
  border-top: var(--border-hair) solid var(--border-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.fuss__hinweis { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text-leise); }
.fuss__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen-500); flex: 0 0 auto; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.fuss__recht a, .fuss__recht span { font-size: 13px; color: var(--text-leise); text-decoration: none; border-bottom: none; }
.fuss__recht a:hover { color: var(--gruen-500); }

/* ---------------------------------------------------------------- Hero */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg-base);
}
.hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 46%, rgba(0,64,92,.55) 0%, rgba(0,64,92,.16) 42%, rgba(14,26,32,0) 72%);
}
.hero__inner {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding-top: clamp(16px, 2vw, 32px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
.hero h1 {
  max-width: 18ch;
  color: var(--weiss);
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
}
.hero__buehne {
  position: relative;
  align-self: stretch;
  min-height: min(84vh, 780px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-right: 2%;
}
.hero__zahlen {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-10);
  border-top: var(--border-hair) solid var(--border-default);
  padding-top: var(--space-6);
}
.hero__weiter {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: clamp(40px, 5vw, 72px);
  text-decoration: none;
  border: 0;
  line-height: 0;
  display: inline-flex;
}

/* Bergketten */
.ra-ridge { will-change: transform; position: absolute; bottom: 0; }
.ra-ridge-back  { left: -7%; right: -7%; height: 54%; opacity: calc(.28 + var(--sp, 0) * .34);
                  transform: translate3d(0, calc(96px - var(--sp, 0) * 96px), 0) scale(1.04); transform-origin: bottom center; }
.ra-ridge-front { left: -5%; right: -5%; height: 52%; opacity: .62;
                  transform: translate3d(0, calc(var(--sp, 0) * 34px), 0); }
@keyframes ra-drift { from { transform: translate3d(0,0,0) } to { transform: translate3d(var(--drift, 3%), 0, 0) } }
.ra-drift { position: absolute; inset: 0; animation: ra-drift 46s cubic-bezier(.42,0,.58,1) infinite alternate; }

/* Zeileneinflug der H1 */
@keyframes ra-in-left {
  0%   { opacity: 0; transform: translateX(-42%) }
  62%  { opacity: 1; transform: translateX(3.5%) }
  82%  { transform: translateX(-1.2%) }
  100% { opacity: 1; transform: translateX(0) }
}
.ra-line { display: block; opacity: 0; animation: ra-in-left 1s var(--ease-out) forwards; }

/* Court-Linien — gezeichnet wird per GSAP, hier steht nur der Ausgangszustand */
/* Figuren */
@keyframes ra-player-in {
  0%   { opacity: 0; transform: translate3d(56px, 42px, 0) scale(.94) }
  70%  { opacity: 1 }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1) }
}
.ra-player { position: relative; opacity: 0; animation: ra-player-in 1.1s var(--ease-out) forwards; will-change: transform; flex: 0 0 auto; align-self: flex-end; }
.ra-player-a { animation-delay: .5s;  z-index: 2; width: 60%; max-width: 520px; margin-right: -6%; filter: drop-shadow(0 30px 60px rgba(6,12,16,.65)); }
.ra-player-b { animation-delay: .72s; z-index: 3; width: 70%; max-width: 590px; margin-left: -8%; margin-bottom: -2%; filter: drop-shadow(0 30px 60px rgba(6,12,16,.7)); }
/* Maus-Parallaxe: die beiden laufen gegeneinander. Maus nach links lässt sie
   aufeinander zugehen, nach rechts driften sie auseinander; senkrecht ebenso.
   Gleiche Beträge, umgekehrte Vorzeichen — bei --mx 16px / --my 12px sind das
   höchstens rund 9 bzw. 5 px, absichtlich knapp unter der Wahrnehmungsschwelle. */
/* animation:none ist Pflicht — eine laufende Keyframe-Animation mit forwards schlägt
   jede normale transform-Deklaration, der Maus-Versatz käme sonst nie an. */
.ra-player.ra-live { animation: none; opacity: 1; transition: transform .9s var(--ease-out); }
.ra-player-a.ra-live { transform: translate3d(calc(var(--mx,0px) * -0.55), calc(var(--my,0px) * -0.45), 0); }
.ra-player-b.ra-live { transform: translate3d(calc(var(--mx,0px) *  0.55), calc(var(--my,0px) *  0.45), 0); }
.ra-player img { display: block; width: 100%; height: auto; filter: brightness(.62) contrast(1.06) saturate(.9); transition: filter .45s var(--ease-out); }
.ra-player:hover img { filter: brightness(.668) contrast(1.056) saturate(.916); }
.ra-spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s var(--ease-out);
  background: radial-gradient(circle 190px at var(--px,50%) var(--py,40%),
    rgba(213,241,167,.85) 0%, rgba(165,226,68,.34) 34%, rgba(178,232,255,.12) 58%, rgba(255,255,255,0) 76%);
  mix-blend-mode: screen;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;  mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
}
.ra-player:hover .ra-spot { opacity: .2; }

/* Pfeil nach unten */
@keyframes ra-chev { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(7px) } }
.ra-chev {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid var(--linie-3);
  color: var(--gruen-500);
  background: rgba(14,26,32,.35);
  animation: ra-chev 2.2s var(--ease-out) infinite;
  transition: border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
}
.ra-chev:hover { border-color: var(--gruen-500); box-shadow: 0 0 24px rgba(165,226,68,.28); }

/* ---------------------------------------------------------------- StatCounter */

.stat { display: flex; flex-direction: column; gap: var(--space-2); }
.stat__wert {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--type-stat);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--weiss);
}
.stat__label {
  font-family: var(--font-text);
  font-size: var(--type-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--petrol-100);
  opacity: .8;
}

/* ---------------------------------------------------------------- Bildplatte */

.plate {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-erhoben);
  border: var(--border-hair) dashed var(--border-default);
}
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plate--leer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,64,92,.34), rgba(14,26,32,.9));
}
.plate__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-6);
}
.plate__marke { font-family: var(--font-mono); font-size: var(--type-caption); color: var(--petrol-300); letter-spacing: .04em; }
.plate__motiv { font-size: var(--type-body-s); color: var(--text-body); max-width: 44ch; line-height: 1.5; }

/* KI-Kennzeichnung. Bewusst im Markup und nicht ins Bild gebrannt: die Platten
   schneiden mit object-fit zu, ein eingebranntes Overlay wäre je nach Seitenformat
   halb weg. So bleibt der Hinweis immer vollständig, ist auswählbar und wird
   vorgelesen. Eingebrannte Fassungen für Social liegen in bilder/halle/gekennzeichnet/. */
.plate--ki { position: relative; border-style: solid; }
.plate__ki {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: rgba(14,26,32,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: var(--border-hair) solid var(--linie-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-hell);
  line-height: 1;
}
.plate__ki::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gruen-500); flex: 0 0 auto; }

figure.bild { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
figure.bild figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-quiet); }

/* ---------------------------------------------------------------- Vorteils-Blöcke */

.vorteile {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
  margin-top: clamp(48px, 6vw, 88px);
  border-top: var(--border-hair) solid var(--border-default);
  padding-top: clamp(32px, 4vw, 56px);
}
.vorteil { display: flex; flex-direction: column; gap: var(--space-5); }
.vorteil .plate { aspect-ratio: 16 / 10; }
.vorteil h3 {
  margin: 0;
  font-size: var(--type-d3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--gruen-500);
}
.vorteil p { font-size: 17px; line-height: var(--lh-body); color: var(--text-body); max-width: 46ch; }

/* ---------------------------------------------------------------- Vorzüge */

.vorzuege {
  display: grid;
  /* Vier Vorzüge seit 18.09.2026 — die Kachel „Sport und Spa" ist auf Kundenwunsch
     raus, weil der Zugang für Padel-Gäste nicht geklärt ist. */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(40px, 5vw, 72px);
}
.vorzug {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}
/* Rundes Zeichen. Gedeckte Fläche statt Signalgrün — fünf leuchtende Kreise
   nebeneinander würden dem Buchen-Button die Aufmerksamkeit wegnehmen. */
.vorzug__zeichen {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-pill);
  background: rgba(165, 226, 68, .08);
  border: var(--border-hair) solid var(--linie-gruen);
  color: var(--gruen-500);
  flex: 0 0 auto;
  transition: background var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out);
}
.vorzug:hover .vorzug__zeichen { background: rgba(165, 226, 68, .14); border-color: var(--gruen-500); }
.vorzug h3 {
  margin: 0;
  font-size: var(--type-d3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--gruen-500);
  /* Zwei Zeilen Platz halten, auch wenn der Titel nur eine braucht — sonst
     starten die Texte der fünf Spalten auf unterschiedlichen Höhen. */
  min-height: calc(2 * var(--lh-heading) * 1em);
  display: flex;
  align-items: center;
}
.vorzug p {
  margin: 0;
  font-size: var(--type-body-s);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 32ch;
}

/* ---------------------------------------------------------------- Karte */

.karte { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.karte img { display: block; width: 100%; height: auto; border: var(--border-hair) solid var(--border-default); border-radius: var(--radius-lg); }
.karte figcaption { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-quiet); }
.karte figcaption a { color: var(--text-quiet); }

.daten {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px var(--space-5);
  align-items: baseline;
  border-top: var(--border-hair) solid var(--border-default);
  padding-top: var(--space-5);
}
.daten dt { margin: 0; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--text-quiet); }
.daten dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-hell); }
.daten dd a { color: var(--text-hell); text-decoration: none; border-bottom: var(--border-hair) solid var(--linie-3); }

/* ---------------------------------------------------------------- Rechtstexte
   Impressum und Datenschutz sind eigene Seiten ohne Ladeschirm und ohne 3D — ein
   Rechtstext braucht keine Show, er muss lesbar sein. Der Kopf startet dort direkt
   in der kleinen Fassung (`kopf--klein` im Markup), weil es nichts zu inszenieren
   gibt. */

.seite--recht .kopf { position: static; }
/* „DATENSCHUTZERKLÄRUNG" ist ein Wort und sprengt die Display-Größe der Startseite —
   auf den Rechtsseiten deshalb kleiner und mit erlaubtem Umbruch. */
.seite--recht h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.rechtstext { max-width: 68ch; }
.rechtstext h2 {
  margin: var(--space-10) 0 var(--space-3);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  color: var(--weiss);
}
.rechtstext h2:first-child { margin-top: var(--space-6); }
.rechtstext h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-hell);
}
.rechtstext p,
.rechtstext li { color: var(--text-body); line-height: 1.7; }
.rechtstext p { margin: 0 0 var(--space-4); }
.rechtstext ul { margin: 0 0 var(--space-4); padding-left: 1.2em; }
.rechtstext li { margin-bottom: var(--space-2); }
.rechtstext a { color: var(--text-hell); text-decoration: none; border-bottom: var(--border-hair) solid var(--linie-3); }
.rechtstext a:hover { border-bottom-color: var(--gruen-500); }
.rechtstext strong { color: var(--text-hell); }

/* ---------------------------------------------------------------- Team vor Ort */

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 64px);
}
.person { display: flex; flex-direction: column; gap: var(--space-3); }
/* Hochformat statt der 4:3-Platten: ein Porträt schneidet im Querformat den Kopf an.
   Die Breite ist gedeckelt — über die halbe Spaltenbreite laufend wird aus dem
   Teamfoto ein Plakat, und die Kontaktdaten rutschen aus dem Bild. */
.person__bild { aspect-ratio: 4 / 5; max-width: 340px; margin-bottom: var(--space-4); }
.person__name { margin: 0; }
.person__rolle {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gruen-500);
}
.person__text { margin: 0; color: var(--text-body); max-width: 46ch; }
.person__kontakt {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-4);
  border-top: var(--border-hair) solid var(--border-default);
}
.person__kontakt dt {
  margin: 0;
  font-size: 11px; font-weight: var(--fw-bold);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-quiet);
  align-self: center;
}
.person__kontakt dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-hell); }
.person__kontakt dd a { color: var(--text-hell); text-decoration: none; border-bottom: var(--border-hair) solid var(--linie-3); }

@media (max-width: 860px) {
  .team { grid-template-columns: 1fr; }
  /* Das Hochformat bleibt auch einspaltig stehen. Die Porträts sind 2:3; in eine
     4:3-Platte gezwungen verlieren sie oben und unten je rund ein Viertel — auf dem
     Telefon war dem Trainer damit der Kopf abgeschnitten. */
  .person__bild { max-width: 100%; }
}

/* Cover schneidet den Überschuss sonst mittig weg, also gleich viel von Stirn und
   Brust. Bei einem Porträt ist die Stirn das Teure: der Schnitt sitzt deshalb hoch. */
.person__bild img,
.person__bild video { object-position: 50% 18%; }

/* Bewegtes Porträt beim Überfahren. Das Video liegt über dem Standbild und wird nur
   eingeblendet, wenn es wirklich läuft — sonst sieht man beim ersten Überfahren ein
   schwarzes Rechteck, während die Datei noch lädt. Eingehängt wird es von
   initBewegtbild(); ohne JS bleibt schlicht das Foto stehen. */
.person__bild video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
  z-index: 1;                 /* über dem Standbild … */
}
.person__bild .plate__ki { z-index: 2; }  /* … aber nie über der KI-Kennzeichnung */
.person__bild video.laeuft { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .person__bild video { display: none; }
}

/* Auf Touch laufen die Clips von selbst — dort darf das Standbild nicht durch eine
   Hover-Regel wieder hervorkommen, und der Wechsel soll ruhiger sein als am Zeiger. */
@media (hover: none) {
  .person__bild video { transition: opacity .7s var(--ease-out); }
}

/* ---------------------------------------------------------------- Markenzeichen über dem FAQ */

.marke {
  position: relative;
  display: grid;
  place-items: center;
  width: min(480px, 88vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto -8%;
}
.marke__ring { position: absolute; inset: 0; }
.marke__kreis { transform-origin: 50% 50%; }
.marke__logo {
  position: relative;
  width: min(340px, 62vw);
  height: auto;
  will-change: transform, opacity, filter;
}

/* Ausgangszustand nur, wenn die Bewegung auch läuft */
.js-motion .marke__logo { opacity: 0; }
.js-motion .marke__kreis { opacity: 0; }

@media (max-width: 640px) {
  .marke { width: min(340px, 92vw); margin-bottom: -12%; }
  .marke__logo { width: min(260px, 72vw); }
}

@media (prefers-reduced-motion: reduce) {
  .marke__logo, .marke__kreis { opacity: 1; transform: none; filter: none; }
  .marke__kreis--innen { opacity: .55; }
}

/* ---------------------------------------------------------------- Akkordeon */

.akk { display: flex; flex-direction: column; }
.akk__item { border-top: var(--border-hair) solid var(--border-default); }
.akk__item:last-child { border-bottom: var(--border-hair) solid var(--border-default); }
.akk__frage { margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; line-height: 1.3; }
.akk__btn {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6) 0;
  background: transparent; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--type-d3);
  text-transform: uppercase;
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  transition: color var(--dur-ui) var(--ease-out);
  min-height: var(--tap-min);
}
.akk__btn[aria-expanded="true"] { color: var(--gruen-500); }
.akk__btn > span { flex: 1; }
.akk__chev { color: var(--petrol-300); transition: transform var(--dur-med) var(--ease-out), color var(--dur-ui) var(--ease-out); flex: 0 0 auto; }
.akk__btn[aria-expanded="true"] .akk__chev { transform: rotate(180deg); color: var(--gruen-500); }
.akk__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-med) var(--ease-out); overflow: hidden; }
.akk__item.ist-offen > .akk__panel { grid-template-rows: 1fr; }
.akk__panel > div { overflow: hidden; }
.akk__antwort { padding-bottom: var(--space-8); max-width: 62ch; font-size: 17px; line-height: var(--lh-body); color: var(--text-body); }

/* ---------------------------------------------------------------- Buchen-Karte */

.karte-kurz {
  border: var(--border-hair) solid var(--linie-gruen);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  background: var(--surface-card-brand);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.karte-kurz h3 { font-weight: var(--fw-bold); color: var(--gruen-500); font-size: var(--type-d3); letter-spacing: -.02em; }
.karte-kurz ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.karte-kurz li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--weiss); }
.karte-kurz li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen-500); margin-top: 9px; flex: 0 0 auto; }
.karte-kurz .platzhalter { font-family: var(--font-mono); font-size: 12px; color: var(--gruen-300); }

/* ---------------------------------------------------------------- Ladeschirm */

.ladeschirm {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--bg-base);
  transition: opacity .6s var(--ease-out), visibility .6s;
}
/* Abdunkeln kurz vor der Überblendung — der Wert kommt aus drei.js */
.ladeschirm::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-tief);
  opacity: var(--dunkel, 0);
  pointer-events: none;
}
.ladeschirm canvas { display: block; }
.ladeschirm__leiste {
  position: absolute;
  left: 50%;
  bottom: clamp(64px, 12vh, 140px);
  transform: translateX(-50%);
  width: min(320px, 62vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
}
/* Rahmen statt Strich: die Umrandung steht von Anfang an, gefüllt wird sie mit
   gedecktem Grün. Der helle CTA-Ton bleibt dem Buchen-Button vorbehalten. */
.ladeschirm__fortschritt {
  width: 100%;
  height: 14px;
  border: var(--border-hair) solid var(--linie-gruen);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 2px;
}
.ladeschirm__fortschritt span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: rgba(124, 181, 44, .55);
  box-shadow: 0 0 14px rgba(165, 226, 68, .22);
  transform: scaleX(0);
  transform-origin: left center;
}
.ladeschirm__zahl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--text-quiet);
}
.ladeschirm__weg {
  position: absolute;
  bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--text-quiet);
  opacity: .55;
}
.ladeschirm.ist-weg { opacity: 0; visibility: hidden; }
/* Solange der Schirm liegt, darf nichts dahinter scrollen */
html.laedt, html.laedt body { overflow: hidden; }

/* ---------------------------------------------------------------- Court-Modell */

.court3d {
  position: relative;
  width: 100%;
  height: clamp(300px, 46vh, 540px);
  margin-block: 0 clamp(16px, 2.5vw, 36px);
  display: grid;
  place-items: center;
  cursor: grab;
  touch-action: pan-y;          /* Wischen scrollt weiter, Drehen mit zwei Fingern */
}
.court3d.wird-gedreht { cursor: grabbing; }

/* Mobilfassung: abgefilmter Loop statt 3D. Nichts zu greifen, also auch kein
   Greif-Cursor, und Wischen soll ungehindert scrollen. */
.court3d.zeigt-film { cursor: default; touch-action: auto; }
.court3d__film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .8s var(--ease-out);
  /* MP4 kennt keine Transparenz, der Clip bringt also einen schwarzen Rand mit.
     "lighten" nimmt je Pixel den helleren Wert von Video und Untergrund — Schwarz
     ist dunkler als der Seitenhintergrund und verschwindet damit vollständig, und
     zwar unabhängig davon, wie der Browser die Videofarben umrechnet. Der Versuch,
     die Hintergrundfarbe im Video nachzubauen, ging genau daran schief: Das
     Rechteck blieb als hellerer Kasten sichtbar.
     "screen" statt "lighten": lighten ersetzt jeden Bildpunkt, der dunkler als der
     Untergrund ist — damit verschwanden die Glasflächen des Courts mit, und übrig
     blieb ein Drahtgitter. screen hellt statt zu ersetzen, hält Schwarz ebenso
     unsichtbar und lässt die Flächen stehen. */
  mix-blend-mode: screen;
}
.court3d.ist-da .court3d__film { opacity: 1; }
.court3d canvas { display: block; opacity: 0; transition: opacity .8s var(--ease-out); }
.court3d.ist-da canvas { opacity: 1; }

.court3d__hinweis, .court3d.ist-fehlgeschlagen::after {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-quiet);
}
.court3d.ist-fehlgeschlagen::after { content: "3D-Modell nicht verfügbar"; }

.masse {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  border-top: var(--border-hair) solid var(--border-default);
  padding-top: var(--space-6);
}
.masse dt { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--text-quiet); margin-bottom: var(--space-2); }
.masse dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--type-d3);
  letter-spacing: -.02em;
  color: var(--weiss);
}

/* ---------------------------------------------------------------- Aktuelles */

/* Beitragskarten: auf der Startseite die neuesten drei, auf /aktuelles/ alle.
   Die ganze Karte ist der Link — ein kleiner „Weiterlesen"-Link wäre auf dem
   Handy ein zu kleines Ziel. */
.beitraege {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.beitrag {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.beitrag .plate { aspect-ratio: 4 / 3; border-style: solid; margin-bottom: var(--space-2); }
.beitrag .plate img { transition: transform var(--dur-med) var(--ease-out); }
.beitrag:hover .plate img { transform: scale(1.03); }
.beitrag__datum { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--petrol-300); }
.beitrag__titel { margin: 0; font-size: var(--type-d2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); transition: color var(--dur-ui) var(--ease-out); }
.beitrag:hover .beitrag__titel { color: var(--gruen-500); }
.beitrag__text { margin: 0; color: var(--text-body); max-width: 46ch; }

/* Artikelseite — wie die Rechtstexte ohne Ladeschirm, 3D und Scroll-Show. */
.seite--artikel .kopf { position: static; }
.seite--artikel h1 {
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  overflow-wrap: break-word;
  hyphens: auto;
}
.artikel__titelbild { aspect-ratio: 16 / 9; border-style: solid; }
.artikel__text > * { max-width: 68ch; }
.artikel__text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: var(--space-10) 0 var(--space-4); }
.artikel__text p { margin: 0 0 var(--space-5); color: var(--text-body); font-size: 18px; line-height: 1.7; }
.artikel__text p.lead { color: var(--text-hell); font-size: clamp(1.15rem, 1.6vw, 1.35rem); }
.artikel__breit { margin: var(--space-10) 0; }
.artikel__breit img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: var(--border-hair) solid var(--border-default); }
.artikel figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--text-quiet);
}

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.galerie .plate { aspect-ratio: 3 / 4; border-style: solid; }

/* Videos laufen nie von selbst — Steuerung liegt beim Besucher, auch bei
   prefers-reduced-motion gibt es damit nichts stillzulegen. preload="none" im
   Markup: geladen wird erst beim Abspielen. */
.clips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
  gap: var(--space-6);
  margin: var(--space-8) 0;
}
.clip { margin: 0; }
.clip video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--bg-erhoben);
  border-radius: var(--radius-lg);
  border: var(--border-hair) solid var(--border-default);
}

.artikel__zurueck { margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--border-hair) solid var(--border-default); }

@media (max-width: 900px) {
  .beitraege { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .beitraege { grid-template-columns: 1fr; gap: var(--space-10); }
  .galerie { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .clips { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .beitrag .plate img { transition: none; }
  .beitrag:hover .plate img { transform: none; }
}

/* ---------------------------------------------------------------- Scroll-Reveal */

/* Ausgangszustand nur, wenn JavaScript läuft — sonst bliebe die Seite ohne JS leer.
   Die Bewegung fährt GSAP, deshalb hier keine transition (die würde dagegenhalten). */
.js .reveal { opacity: 0; }
.js .reveal.ist-da { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- Responsiv */

@media (max-width: 1180px) {
  .vorzuege { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-10); }
}
@media (max-width: 1000px) {
  .fuss__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero__inner, .split, .split--karte, .split--cta, .vorteile { grid-template-columns: 1fr; }
  .vorzuege { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-5); }
  .hero { min-height: auto; }
  .hero__buehne { min-height: min(60vh, 520px); margin-top: var(--space-8); }
  .hero__zahlen { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .split--karte .karte { order: 2; }
}
@media (max-width: 640px) {
  .kopf__nav { display: none; }
  .kopf { --kopf-logo: 66px; --kopf-pad: 16px; }
  .kopf--klein { --kopf-logo: 50px; --kopf-pad: 10px; }
  .masse { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
  .vorzuege { grid-template-columns: 1fr; gap: var(--space-8); }
  .fuss__grid { grid-template-columns: 1fr; }
  .fuss__leiste { flex-direction: column; align-items: flex-start; }
  .aktionen .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ra-line, .ra-player, .ra-chev { animation: none; opacity: 1; transform: none; }
  .ra-ridge-back, .ra-ridge-front { transform: none; }
  .ra-drift { animation: none; }
  .ra-player.ra-live { transform: none; }
  .reveal { opacity: 1; transform: none; }
  .kopf__inner, .kopf__logo { transition: none; }
}