/* Maya Alfaro Beaugrand, Portfolio
   Aufbau nach der Website-Inspiration (inspiration/website_inspo.PNG): schwebende Pillen-Navigation,
   Porträt im Kreis mit Ringen und Chips, Schreibschrift über großem Namen, Statement-Karte über Kartenstapel.
   Bewegung und Material nach Apples Fluid-Interface-Prinzipien: Federn statt fester Kurven,
   Feedback schon beim Drücken, Glas-Material für schwebende Ebenen, Rücksicht auf Reduced Motion/Transparency.
   Ein Akzent (Glut-Orange, angelehnt an Mayas Haarfarbe). Radien: große Flächen 28px, Karten 24px,
   Medien und Felder 12px, Buttons, Chips und Navigation als Pille. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Kaushan Script";
  src: url("/assets/fonts/kaushan-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0e0c0b;
  --surface: #171412;
  --surface-2: #221e1b;
  --line: rgb(255 238 226 / .09);
  --field-line: rgb(255 238 226 / .16);
  --ring: rgb(255 238 226 / .07);
  --text: #f5f0eb;
  --muted: #aaa29b;
  --accent: #ef6a42;
  --accent-hover: #f5805c;
  --accent-soft: rgb(239 106 66 / .13);
  --on-accent: #170a05;
  --danger: #ff7a85;
  --glass: rgb(30 26 24 / .58);
  --glass-heavy: rgb(24 21 19 / .74);
  --glass-edge: inset 0 1px 0 rgb(255 255 255 / .09);

  --font-display: "Archivo", "Arial Narrow", sans-serif;
  --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-script: "Kaushan Script", cursive;

  --r-sheet: 28px;
  --r-card: 24px;
  --r-media: 12px;
  --r-pill: 999px;

  --container: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(88px, 11vw, 144px);

  /* Federn (Apple: Dämpfung 1.0 bzw. 0.8, Response 0.4 s) als CSS-Kurven; Fallback ohne linear() */
  --spring: cubic-bezier(.2, .9, .25, 1);
  --spring-bounce: cubic-bezier(.3, 1.25, .5, 1);
  --spring-time: 560ms;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, 0.0254, 0.0868, 0.1674, 0.2559, 0.3452, 0.4308, 0.51, 0.5816, 0.6452, 0.7009, 0.7491, 0.7905, 0.8257, 0.8555, 0.8806, 0.9016, 0.9191, 0.9336, 0.9456, 0.9556, 0.9638, 0.9705, 0.976, 0.9805, 0.9842, 0.9872, 0.9896, 0.9916, 0.9932, 0.9945, 0.9956, 0.9965, 0.9971, 0.9977, 0.9982, 1);
    --spring-bounce: linear(0, 0.0258, 0.0904, 0.1782, 0.2776, 0.3801, 0.4796, 0.5723, 0.6559, 0.7293, 0.7923, 0.845, 0.8884, 0.9232, 0.9505, 0.9714, 0.987, 0.9983, 1.006, 1.0109, 1.0137, 1.015, 1.0151, 1.0145, 1.0133, 1.0119, 1.0104, 1.0088, 1.0073, 1.006, 1.0048, 1.0037, 1.0028, 1.0021, 1.0015, 1.001, 1);
  }
}

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

html {
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

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

.container {
  width: min(calc(100% - 2 * var(--gutter)), var(--container));
  margin-inline: auto;
}

.i { width: 20px; height: 20px; flex: none; }

/* Typografie: Laufweite je Größe, große Schrift eng, kleine Schrift leicht gesperrt */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: .88;
}
.script { font-family: var(--font-script); font-weight: 400; text-transform: none; letter-spacing: 0; }
.label {
  margin-bottom: 22px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

.skip {
  position: absolute; left: 16px; top: -120px; z-index: 40;
  padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Buttons: Feedback beim Drücken, Rückweg als Feder ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 26px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  font: 600 1rem/1 var(--font-body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s, scale var(--spring-time) var(--spring);
}
.btn .i { width: 18px; height: 18px; transition: translate var(--spring-time) var(--spring); }
.btn:active { scale: .97; transition: scale .1s ease-out; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:hover .i { translate: 3px 0; }
.btn--ghost { border-color: rgb(255 238 226 / .24); color: var(--text); }
.btn--ghost:hover { border-color: rgb(255 238 226 / .5); background: rgb(255 238 226 / .04); }
.btn--sm { height: 40px; padding: 0 18px; font-size: .875rem; letter-spacing: 0; }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { opacity: .72; cursor: progress; }

/* ---------- Scroll-Kante: weicher Übergang unter der schwebenden Navigation statt Trennlinie ---------- */
.edge {
  position: fixed; inset: 0 0 auto; height: 92px; z-index: 15; pointer-events: none;
  background: linear-gradient(to bottom, rgb(14 12 11 / .92), rgb(14 12 11 / 0));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent);
  mask-image: linear-gradient(to bottom, #000 35%, transparent);
}

/* ---------- Navigation: Glas-Pille ---------- */
.nav {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 4px; padding: 6px;
  border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgb(255 238 226 / .08);
  box-shadow: var(--glass-edge), 0 12px 32px -8px rgb(0 0 0 / .55);
}
.nav__menu {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: var(--r-pill);
  background: rgb(255 238 226 / .07); cursor: pointer;
  font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  transition: background-color .2s, scale var(--spring-time) var(--spring);
}
.nav__menu:hover { background: rgb(255 238 226 / .12); }
.nav__menu:active { scale: .96; transition: scale .1s ease-out; }
.nav__menu .i { width: 18px; height: 18px; }
.nav__icon-close { display: none; }
.nav.is-open .nav__icon-open { display: none; }
.nav.is-open .nav__icon-close { display: block; }
.nav__mark {
  padding: 0 14px; text-decoration: none;
  font: 800 1.375rem/1 var(--font-display); font-stretch: 75%; letter-spacing: .01em;
}
@media (max-width: 420px) {
  .nav__long { display: none; }
}

/* Menü: entsteht aus der Pille heraus (Ursprung oben), gleicher Weg hinein und hinaus */
.menu {
  pointer-events: auto;
  width: min(380px, calc(100vw - 32px)); margin-top: 8px; padding: 10px;
  border-radius: var(--r-sheet);
  background: var(--glass-heavy);
  -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgb(255 238 226 / .1);
  box-shadow: var(--glass-edge), 0 30px 80px -12px rgb(0 0 0 / .7);
  transform-origin: 50% 0;
  opacity: 0; transform: translateY(-10px) scale(.96); filter: blur(8px); visibility: hidden;
  transition: opacity .2s ease, transform var(--spring-time) var(--spring), filter .3s ease, visibility 0s linear var(--spring-time);
}
.nav.is-open .menu {
  opacity: 1; transform: none; filter: none; visibility: visible;
  transition: opacity .2s ease, transform var(--spring-time) var(--spring), filter .3s ease, visibility 0s;
}
.menu__links a {
  display: block; padding: 10px 16px; border-radius: 18px; text-decoration: none;
  font: 800 1.75rem/1.05 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.005em;
  transition: background-color .15s, color .15s;
}
.menu__links a:hover { background: rgb(255 238 226 / .07); color: var(--accent); }
.menu__links a:active { background: rgb(255 238 226 / .12); }
.menu__social {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 8px;
  border-radius: 18px; background: rgb(255 238 226 / .04);
}
.menu__social a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--muted); text-decoration: none;
}
.menu__social a:hover { color: var(--text); background: rgb(255 238 226 / .06); }
.menu__social .i { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.hero {
  --disc: clamp(230px, 28vw, 380px);
  position: relative; overflow-x: clip;
  padding-top: clamp(88px, 9vw, 112px);
}
.hero__stage {
  position: relative; margin-inline: auto;
  width: min(100%, 1200px); height: calc(var(--disc) * 1.26);
}
.hero__rings {
  position: absolute; left: 50%; top: calc(var(--disc) * .56);
  width: 1700px; height: 1700px; translate: -50% -50%;
  pointer-events: none;
  background:
    linear-gradient(var(--ring), var(--ring)) center / 100% 1px no-repeat,
    linear-gradient(var(--ring), var(--ring)) center / 1px 100% no-repeat,
    repeating-radial-gradient(circle, transparent 0 calc(var(--disc) * .5 + 89px), var(--ring) calc(var(--disc) * .5 + 89px) calc(var(--disc) * .5 + 90px));
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 58%);
  mask-image: radial-gradient(circle, #000 18%, transparent 58%);
}
.hero__disc {
  position: absolute; left: 50%; top: calc(var(--disc) * .06);
  width: var(--disc); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background:
    radial-gradient(60% 60% at 50% 42%, rgb(239 106 66 / .55), transparent 72%),
    repeating-linear-gradient(135deg, rgb(255 238 226 / .045) 0 1px, transparent 1px 8px),
    #1a1512;
  box-shadow: inset 0 0 0 1px rgb(255 238 226 / .08);
}
.hero__portrait {
  position: absolute; left: 50%; bottom: 0;
  width: calc(var(--disc) * 1.18); translate: -50% 0;
  /* unten und am rechten Bildrand (ausgestreckter Arm) weich auslaufen lassen */
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 95%), linear-gradient(to left, transparent, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 95%), linear-gradient(to left, transparent, #000 16%);
  mask-composite: intersect;
}

/* Chips: angebunden an ihren Platz, lassen sich ziehen und federn zurück (main.js) */
.chip {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 11px; border-radius: var(--r-pill);
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgb(255 238 226 / .1);
  box-shadow: var(--glass-edge), 0 10px 26px -10px rgb(0 0 0 / .6);
  font-size: .875rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: scale .1s ease-out, box-shadow .2s;
}
.chip .i { width: 18px; height: 18px; color: var(--accent); }
.chip.is-grabbed {
  z-index: 3; cursor: grabbing; scale: 1.06;
  box-shadow: var(--glass-edge), 0 22px 40px -12px rgb(0 0 0 / .75);
}
.chip--fight { left: calc(50% - var(--disc) * .98); top: calc(var(--disc) * .2); }
.chip--life { left: calc(50% + var(--disc) * .62); top: calc(var(--disc) * .52); }
.chip--views { left: calc(50% - var(--disc) * 1.08); top: calc(var(--disc) * .84); }
.hero__coords {
  position: absolute; left: calc(50% + var(--disc) * .66); top: calc(var(--disc) * .1);
  font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.hero__intro {
  position: relative; z-index: 2; container-type: inline-size;
  margin-top: calc(var(--disc) * -.2);
  text-align: center;
}
.hero__hello {
  display: inline-block; rotate: -5deg; margin-bottom: -.1em;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.1;
  text-shadow: 0 4px 24px rgb(14 12 11 / .8);
}
.hero__name {
  color: var(--accent); white-space: nowrap;
  font-size: min(8.5rem, 8.9cqi); letter-spacing: -.012em; line-height: .86;
}
@container (max-width: 760px) {
  .hero__name { font-size: 16.2cqi; }
  .hero__name span { display: block; }
}
.hero__about {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 40px; align-items: start;
  max-width: 980px; margin: clamp(32px, 4vw, 52px) auto 0;
  text-align: left;
}
.hero__place {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 4px;
  font: 800 1.5rem/1 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: .01em;
}
.hero__place .i { width: 52px; height: 52px; color: var(--muted); }
.hero__bio {
  font: 700 clamp(1.2rem, 2vw, 1.65rem)/1.2 var(--font-display); font-stretch: 75%;
  text-transform: uppercase; letter-spacing: .004em;
}
.hero__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 760px) {
  .hero__about { grid-template-columns: 1fr; gap: 20px; }
  .hero__place { flex-direction: row; justify-content: flex-start; font-size: 1.25rem; padding-top: 0; }
  .hero__place .i { width: 28px; height: 28px; }
}
@media (max-width: 640px) {
  .hero { --disc: 210px; }
  .chip { padding: 7px 13px 7px 9px; font-size: .8125rem; }
  .chip .i { width: 16px; height: 16px; }
  .chip--fight { left: 12px; top: calc(var(--disc) * .16); }
  .chip--life { left: auto; right: 12px; top: calc(var(--disc) * .6); }
  .chip--views { left: 12px; top: calc(var(--disc) * .88); }
  .hero__coords { left: auto; right: 12px; top: -6px; font-size: .6875rem; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__rings { animation: fade 1.4s ease-out both; }
  .hero__disc { animation: materialize .9s var(--spring) both; }
  .hero__portrait { animation: materialize .9s var(--spring) .08s both; }
  .chip, .hero__coords { animation: pop var(--spring-time) var(--spring-bounce) both; }
  .chip--fight { animation-delay: .38s; }
  .chip--life { animation-delay: .46s; }
  .chip--views { animation-delay: .54s; }
  .hero__coords { animation-delay: .62s; }
  .hero__hello { animation: rise .8s var(--spring) .2s both; }
  .hero__name { animation: rise .8s var(--spring) .26s both; }
  .hero__about { animation: rise .8s var(--spring) .34s both; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__stage, .hero__intro { animation: fade .4s ease both; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes materialize { from { opacity: 0; transform: scale(.94); filter: blur(10px); } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---------- Abschnitte ---------- */
.section { padding-top: var(--section); }
.section__head { margin-bottom: clamp(28px, 4vw, 48px); }
.section__title { font-size: clamp(2.75rem, 6vw, 4.75rem); }
.section__lead { margin-top: 18px; max-width: 56ch; font-size: 1.125rem; line-height: 1.55; color: var(--muted); }
.note { margin-top: 20px; font-size: .875rem; letter-spacing: .005em; color: var(--muted); }

/* ---------- In Zahlen ---------- */
.numbers__layout {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
}
.numbers__statement {
  position: relative; z-index: 2; margin-right: -3.5rem; rotate: -1.5deg;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-sheet);
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 40px 80px -24px rgb(0 0 0 / .8);
}
.numbers__statement h2 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.numbers__statement p { margin-top: 18px; max-width: 30ch; font-size: 1.125rem; font-weight: 500; line-height: 1.45; }
.numbers__stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat-card {
  container-type: inline-size;
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px;
  min-height: 190px; padding: 28px;
  border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--glass-edge), 0 20px 40px -24px rgb(0 0 0 / .7);
}
.stat-card:nth-child(odd) { padding-left: calc(28px + 3.5rem); }
/* Größe an der Kartenbreite ausgerichtet: die längste Zahl („1,33 Mio.“, 3,63 em) passt immer */
.stat-card dd { font-size: min(4rem, 26cqi); white-space: nowrap; }
.stat-card dd span { color: var(--accent); }
.stat-card dt { font-size: .9375rem; line-height: 1.4; color: var(--muted); }

@media (max-width: 860px) {
  .numbers__layout { grid-template-columns: minmax(0, 1fr); }
  .numbers__statement { margin: 0 0 -28px; rotate: -1deg; }
  .stat-card:nth-child(odd) { padding-left: 20px; }
  .stat-card { min-height: 140px; padding: 20px; }
  .stat-card:nth-child(-n + 2) { padding-top: 48px; }
  .stat-card dt { font-size: .875rem; }
}

/* ---------- Kanäle (Bento) ---------- */
.channels { display: grid; gap: 16px; }
.channel {
  display: grid; gap: 24px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet);
  box-shadow: var(--glass-edge);
  text-decoration: none;
  transition: border-color .25s, background-color .25s, translate var(--spring-time) var(--spring), scale var(--spring-time) var(--spring);
}
.channel:hover { border-color: rgb(239 106 66 / .45); background: #1b1815; translate: 0 -3px; }
.channel:active { scale: .985; transition: scale .1s ease-out; }
.channel__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.platform { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 500; letter-spacing: .005em; }
.tag {
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--muted); font-size: .8125rem; font-weight: 500; letter-spacing: .01em;
}
.channel__handle {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; color: var(--muted);
}
.channel__handle .i { width: 16px; height: 16px; transition: translate var(--spring-time) var(--spring), color .25s; }
.channel:hover .channel__handle .i { translate: 2px -2px; color: var(--accent); }
.channel__count { margin-top: 6px; font-size: .9375rem; color: var(--muted); }
.channel__count .display { margin-right: 6px; font-size: clamp(2.5rem, 4vw, 3.25rem); color: var(--text); }
.channel__topics { margin-top: 8px; font-size: .9375rem; color: var(--muted); }
.kpis { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpis div { padding: 12px 14px; border-radius: var(--r-media); background: var(--surface-2); }
.kpis dt { font-size: .8125rem; letter-spacing: .01em; color: var(--muted); }
.kpis dd { margin-top: 2px; font-size: 1.125rem; font-weight: 600; }
.kpis .kpis__wide { grid-column: 1 / -1; }
.channel__media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-self: end; }
.channel__media img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--r-media); background: var(--surface-2);
}

@media (min-width: 960px) {
  .channels {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    grid-template-areas: "fight tiktok" "life tiktok";
  }
  .channel--fight { grid-area: fight; }
  .channel--life { grid-area: life; }
  .channel--tiktok { grid-area: tiktok; align-content: space-between; }
  .channel--fight, .channel--life { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; }
}

/* ---------- Top-Videos ---------- */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
.video { display: flex; flex-direction: column; gap: 14px; text-decoration: none; }
.video__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: var(--r-media); background: var(--surface-2);
  transition: scale var(--spring-time) var(--spring);
}
.video:active .video__frame { scale: .97; transition: scale .1s ease-out; }
.video__frame img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--spring); }
.video:hover .video__frame img { scale: 1.05; }
.video__play {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgb(14 12 11 / .5); color: #fff;
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  transition: background-color .25s, color .25s, scale var(--spring-time) var(--spring-bounce);
}
.video__play .i { width: 20px; height: 20px; margin-left: 3px; }
.video:hover .video__play { background: var(--accent); color: var(--on-accent); scale: 1.1; }
.video__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.platform--sm { font-size: .8125rem; letter-spacing: .01em; color: var(--muted); }
.platform--sm .i { width: 16px; height: 16px; color: var(--text); }
.video__views { font-size: .875rem; color: var(--muted); }
.video__views .display { margin-right: 4px; font-size: 2rem; color: var(--text); }
.video__title { font-weight: 500; line-height: 1.35; }
.video__likes { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--muted); }
.video__likes .i { width: 14px; height: 14px; color: var(--accent); }

@media (min-width: 1100px) {
  .videos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Mobil: native Wisch-Leiste mit Einrasten (Schwung und Gummiband-Effekt liefert das System) */
@media (max-width: 719px) {
  .videos {
    display: flex; gap: 12px;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .videos::-webkit-scrollbar { display: none; }
  .videos > li { flex: 0 0 64%; scroll-snap-align: start; }
}

/* ---------- Über mich ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.about__media { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.about__fig--life { margin-top: 72px; }
.about__fig img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-card); background: var(--surface-2);
}
.about__fig--fight img { object-position: 50% 62%; }
.about__fig figcaption { margin-top: 10px; rotate: -3deg; font-size: 1.6rem; line-height: 1.2; }
.about__copy .section__title { margin-bottom: 10px; }
.about__copy p { margin-top: 18px; max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.highlights { margin-top: 32px; display: grid; gap: 10px; }
.highlights li {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  font-weight: 500;
}
.highlights .i { width: 22px; height: 22px; color: var(--accent); }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
}

/* ---------- Kompetenzen ---------- */
.skills__grid {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px;
}
.skills__grid li { display: flex; align-items: center; gap: 16px; font-size: 1.125rem; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.skills__icon {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; background: var(--accent-soft); color: var(--accent);
}
.skills__icon .i { width: 24px; height: 24px; }
.skills__meta {
  margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px;
  padding: clamp(24px, 3.5vw, 36px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet);
  box-shadow: var(--glass-edge);
}
.skills__label { margin-bottom: 16px; font-size: 1rem; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 8px 16px; border-radius: var(--r-pill); background: var(--surface-2); font-size: .9375rem; font-weight: 500; }
.langs { display: grid; gap: 10px; }
.langs div { display: flex; justify-content: space-between; gap: 16px; font-size: .9375rem; }
.langs dt { font-weight: 600; }
.langs dd { color: var(--muted); text-align: right; }

@media (max-width: 900px) {
  .skills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .skills__grid { grid-template-columns: 1fr; gap: 20px; }
  .skills__meta { grid-template-columns: 1fr; }
}

/* ---------- Kontakt ---------- */
.contact {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px); align-items: start;
  padding-bottom: var(--section);
}
.contact__title { font-size: clamp(3rem, 6.4vw, 5.5rem); }
.contact__intro > p:not(.label) { margin-top: 22px; max-width: 40ch; font-size: 1.125rem; color: var(--muted); }
.socials { margin-top: 32px; display: grid; gap: 12px; justify-items: start; }
.socials a {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; text-decoration: none; transition: color .2s;
}
.socials a:hover { color: var(--accent); }
.contact__panel {
  padding: clamp(20px, 3.5vw, 40px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet);
  box-shadow: var(--glass-edge);
}

.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; align-content: start; }
.field > label { font-size: .875rem; font-weight: 500; letter-spacing: .005em; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input,
.field select,
.field textarea {
  width: 100%; padding: 13px 14px;
  background: var(--bg); border: 1px solid var(--field-line); border-radius: var(--r-media);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: rgb(255 238 226 / .28); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(239 106 66 / .25);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: .875rem; color: var(--danger); }
.field__error:empty { display: none; }

.select { position: relative; }
.select select { appearance: none; padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}

.check { display: flex; align-items: flex-start; gap: 12px; }
.check input {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--accent); cursor: pointer;
}
.check label { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.check a { color: var(--text); text-underline-offset: 3px; }
.check a:hover { color: var(--accent); }

.form__status { font-size: .9375rem; }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--danger); }

/* Honeypot für Spam-Bots, für Menschen unsichtbar */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form-done { display: grid; justify-items: start; gap: 14px; padding-block: 16px; }
.form-done:focus { outline: none; }
.form-done .i { width: 44px; height: 44px; color: var(--accent); }
.form-done h3 { font: 800 2.25rem/1 var(--font-display); font-stretch: 75%; text-transform: uppercase; letter-spacing: -.01em; }
.form-done p { max-width: 40ch; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .form-done:not([hidden]) { animation: materialize var(--spring-time) var(--spring) both; }
}

@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.footer { background: linear-gradient(to bottom, transparent, rgb(255 238 226 / .025)); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 28px; font-size: .875rem; color: var(--muted);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__links a { text-decoration: none; transition: color .2s; }
.footer__links a:hover { color: var(--text); }

/* ---------- Unterseiten (Datenschutz, Danke, 404) ---------- */
.page { padding-block: clamp(120px, 14vw, 168px) var(--section); }
.page__title { font-size: clamp(2.75rem, 7vw, 5rem); }
.page__lead { margin-top: 20px; max-width: 52ch; font-size: 1.125rem; color: var(--muted); }
.page .btn { margin-top: 32px; }
.prose { max-width: 72ch; }
.prose h2 { margin-top: 48px; font-size: 1.375rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.25; }
.prose h2 + p { margin-top: 12px; }
.prose p, .prose ul { margin-top: 14px; color: var(--muted); }
.prose ul { padding-left: 20px; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--text); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }

/* ---------- Scroll-gekoppelte Bewegung (nur wo Scroll-Timelines unterstützt werden) ----------
   Die Bewegung hängt direkt an der Scrollposition: sie folgt dem Finger, lässt sich jederzeit
   anhalten und umkehren. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    /* Kartenstapel: die vier Zahlen liegen erst übereinander und fächern sich beim Scrollen auf */
    .numbers__stack { view-timeline: --deal block; }
    .stat-card {
      animation: deal linear both;
      animation-timeline: --deal;
      animation-range: entry 10% cover 48%;
    }
    .stat-card:nth-child(1) { --pile: translate(calc(50% + 8px), calc(50% + 8px)) rotate(-8deg); }
    .stat-card:nth-child(2) { --pile: translate(calc(-50% - 8px), calc(50% + 8px)) rotate(5deg); }
    .stat-card:nth-child(3) { --pile: translate(calc(50% + 8px), calc(-50% - 8px)) rotate(-3deg); }
    .stat-card:nth-child(4) { --pile: translate(calc(-50% - 8px), calc(-50% - 8px)) rotate(7deg); }
    /* In der horizontalen Video-Leiste gibt es keine vertikale Timeline */
    @media (max-width: 719px) {
      .videos > li[data-reveal] { animation: none; }
    }
  }
}
@keyframes reveal {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: none; }
}
@keyframes deal {
  from { transform: var(--pile); }
  to { transform: none; }
}

/* ---------- Barrierefreiheit: weniger Transparenz, mehr Kontrast ---------- */
@media (prefers-reduced-transparency: reduce) {
  .nav__pill, .menu, .chip, .video__play { background: #1f1b19; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .edge { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #d2cbc5; --line: rgb(255 238 226 / .3); --field-line: rgb(255 238 226 / .45); --ring: rgb(255 238 226 / .14); }
  .nav__pill, .menu, .chip { background: #1f1b19; border-color: rgb(255 238 226 / .5); }
}