/* ==========================================================================
   jannik-schaufler.com
   Dunkles Rennsport-Layout, Oswald für Versalien, Inter für Fließtext.
   Akzentfarbe „Ultra" #3D5AFE.
   ========================================================================== */

@import url('fonts.css');

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

:root{
  --bg:        #08080a;
  --surface:   #121216;
  --line:      rgba(255,255,255,.13);
  --ink:       #f2f2f4;
  --muted:     #8b8b93;

  --acc:       #3d5afe;   /* Flächen: Buttons, Hover-Füllung, Linien */
  --acc-text:  #6e85ff;   /* dieselbe Farbe aufgehellt für kleine Schrift */
  --acc-ink:   #ffffff;   /* Schrift auf der Akzentfläche */

  --col:       640px;
  --ease:      cubic-bezier(.2,.7,.3,1);
  color-scheme: dark;
}

/* ---------- Reset ------------------------------------------------------- */

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--acc-text);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

.skip-link{ position:absolute; left:-9999px }
.skip-link:focus{
  left:16px; top:16px; z-index:20;
  padding:10px 14px;
  background:var(--acc); color:var(--acc-ink);
}

/* ---------- Layout ------------------------------------------------------ */

.wrap{ max-width:var(--col); margin:0 auto }
.pad{ padding-inline:20px }
.sec{ margin-top:52px }

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

.hero{ position:relative }

.hero figure{
  margin:0; position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#000;
}
.hero img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:60% 16%;
}
/* Verlauf, der das Foto nach unten in den Seitenhintergrund auflöst.
   Im Bereich des Namenszugs (70-89 %) bewusst flach gehalten, sonst
   verschwindet das Foto hinter dem Schleier. Die Lesbarkeit der Schrift
   sichert stattdessen der Schatten an .hero h1. */
.hero figure::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,8,10,.30) 0%,
    rgba(8,8,10,0)   34%,
    rgba(8,8,10,.30) 74%,
    rgba(8,8,10,.62) 90%,
    var(--bg)        100%);
}

/* „Jannik" sitzt auf Höhe des weißen Ärmel-Logos — das liegt bei 72,5 % der
   Bildhöhe. Prozentwert statt Pixel, damit die Höhe auf jedem Display stimmt. */
.hero .title{
  position:absolute; left:0; right:0; bottom:11.5%;
  padding-inline:20px; z-index:2;
}
.hero h1{
  margin:0;
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:clamp(46px,15vw,84px);
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  /* macht die Schrift unabhängig davon lesbar, wie hell das Foto darunter ist */
  text-shadow:0 2px 18px rgba(8,8,10,.85), 0 1px 4px rgba(8,8,10,.55);
}
.hero h1 span{ display:block }
.hero h1 span:last-child{ color:var(--acc-text) }

.tag{
  display:flex; align-items:center; gap:10px;
  margin-top:16px;
  font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.tag::before{
  content:""; flex:none;
  width:26px; height:2px; background:var(--acc);
}

.claim{
  margin:22px 0 0;
  font-size:19px; line-height:1.45;
  letter-spacing:-.015em;
  max-width:22ch;
}
.claim b{ color:var(--acc-text); font-weight:600 }

.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  margin-top:26px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.stats div{ background:var(--bg); padding:14px 12px 14px 0 }
.stats div + div{ padding-left:18px }   /* Abstand zur Trennlinie */
.stats dt{
  margin:0;
  font-family:'Oswald',sans-serif;
  font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.stats dd{ margin:4px 0 0; font-size:14px; font-weight:500; letter-spacing:-.01em }

.icons{ display:flex; gap:8px; margin-top:22px }
.icons a{
  width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  background:var(--surface);
  transition:background-color .18s var(--ease),
             color .18s var(--ease),
             border-color .18s var(--ease);
}
.icons svg{ width:18px; height:18px; fill:currentColor }
.icons a:hover{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink) }

/* ---------- Section-Kopf ------------------------------------------------ */

.head{ margin-bottom:14px }
/* Variante mit Linie: nur bei „On video" und „Partners" */
.head.rule{ display:flex; align-items:center; gap:12px }
.head.rule::after{ content:""; flex:1; height:1px; background:var(--line) }
.head h2{
  margin:0;
  font-family:'Oswald',sans-serif;
  font-size:13px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
}

/* ---------- Links: nummerierte Zeilen ----------------------------------- */

.rows{ border-top:1px solid var(--line) }

.row{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:20px 20px 20px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .2s var(--ease), color .2s var(--ease);
}
.row::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:var(--acc);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.row>*{ position:relative; z-index:1 }
.row:hover{ padding-left:16px; color:var(--acc-ink) }
.row:hover::before{ transform:scaleX(1) }

.num{
  flex:none; width:26px;
  font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:.1em;
  color:var(--acc-text);
  transition:color .2s var(--ease);
}
.row:hover .num{ color:var(--acc-ink) }

.rtxt{ flex:1; min-width:0 }
.rtxt b{
  display:block;
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:22px; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.15;
}
.rtxt small{
  display:block; margin-top:2px;
  font-size:13px; color:var(--muted);
  transition:color .2s var(--ease);
}
.row:hover .rtxt small{ color:rgba(255,255,255,.78) }

.arw{ flex:none; transition:transform .2s var(--ease) }
.arw svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5 }
.row:hover .arw{ transform:translateX(5px) }

/* ---------- Essays ------------------------------------------------------ */

.books{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  /* Deckel so gewählt, dass ein Cover ungefähr dieselbe Fläche einnimmt wie
     eine Video-Kachel - sonst wirken zwei Bücher schwerer als sechs Videos.
     Nebeneffekt: Handy und Desktop zeigen fast identische Größen. */
  max-width:358px;
}
.book img{
  width:100%; height:auto;
  aspect-ratio:63/100; object-fit:cover;   /* alle Cover exakt gleich hoch */
  border:1px solid var(--line);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             border-color .25s var(--ease);
}
.book:hover img{
  transform:translateY(-3px);
  border-color:var(--line-strong, rgba(255,255,255,.28));
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.bmeta{ display:block; padding-top:11px }
.bmeta b{
  display:block;
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:15px; letter-spacing:.04em; text-transform:uppercase; line-height:1.2;
}
.bmeta small{
  display:block; margin-top:3px;
  font-size:12.5px; line-height:1.4; color:var(--muted);
}

/* ---------- Videos ------------------------------------------------------ */

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:270px; gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:14px 20px 12px;
  margin-inline:-20px;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.rail::-webkit-scrollbar{ height:6px }
.rail::-webkit-scrollbar-thumb{ background:var(--line) }

.vid{
  scroll-snap-align:start;
  display:block; border:0; padding:0;
  background:none; text-align:left; cursor:pointer;
}
.vth{
  display:block; position:relative;
  aspect-ratio:16/9; overflow:hidden;
  background:#000; border:1px solid var(--line);
}
.vth img{
  width:100%; height:100%; object-fit:cover; opacity:.82;
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.vid:hover .vth img{ transform:scale(1.04); opacity:1 }

.vth .pl{
  position:absolute; left:12px; bottom:12px;
  width:38px; height:38px;
  display:grid; place-items:center;
  background:var(--acc); color:var(--acc-ink);
  transition:transform .2s var(--ease);
}
.vid:hover .vth .pl{ transform:scale(1.1) }
.vth .pl svg{ width:14px; height:14px; fill:currentColor; margin-left:2px }

.vth .tc{
  position:absolute; right:0; bottom:0;
  background:var(--bg); color:var(--acc-text);
  font-family:'Oswald',sans-serif;
  font-size:12px; letter-spacing:.08em;
  padding:4px 8px;
}

.vmeta{ display:block; padding-top:10px }
.vmeta b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13.5px; font-weight:500; line-height:1.35; letter-spacing:-.01em;
  /* feste Höhe von zwei Zeilen, damit alle Kacheln gleich hoch sind */
  min-height:2.7em;
}
.vmeta small{
  display:block; margin-top:3px;
  font-family:'Oswald',sans-serif;
  font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}
.vid iframe{ display:block; width:100%; aspect-ratio:16/9; border:0 }

/* ---------- Partner ----------------------------------------------------- */

/* Sponsorenband: feste Zeilen, jede für sich zentriert. Die Logos sind über
   die Höhe vereinheitlicht; reine Wortmarken sind in der Breite gedeckelt,
   damit sie neben kompakten Marken nicht erschlagend wirken. */
.logos{ display:grid; gap:26px; margin-top:24px; padding:0 }
.logo-row{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:center;
  gap:16px 28px;
}
.logo{ display:block; line-height:0 }
.logo img{
  /* wächst mit der Displaybreite bis 42 px; auf sehr schmalen Handys
     etwas kleiner, damit die dreiteilige Zeile nicht umbricht */
  height:clamp(34px, 11vw, 42px); width:auto;
  filter:brightness(0) invert(1);
  opacity:.8;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.logo:hover img{ opacity:1; transform:scale(1.06) }

/* ---------- Rabattcodes ------------------------------------------------- */

.perks{ margin-top:36px; border-top:1px solid var(--line) }
.perks-lead{
  margin:16px 0 0;
  font-family:'Oswald',sans-serif;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
}
.perks-lead span{ color:var(--muted); letter-spacing:.14em }

.perk{
  display:flex; align-items:center; gap:12px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.perk:last-child{ border-bottom:0; padding-bottom:0 }

.perk-main{
  display:flex; align-items:center; gap:14px;
  flex:1; min-width:0;
  transition:opacity .18s var(--ease);
}
.perk-main:hover{ opacity:.7 }
.perk-main img{
  flex:none; height:26px; width:auto; max-width:64px;
  object-fit:contain; object-position:left center;
  filter:brightness(0) invert(1); opacity:.85;
}
.perk-txt{ min-width:0 }
.perk-txt b{ display:block; font-size:15px; font-weight:500; letter-spacing:-.015em }
.perk-txt small{
  display:block; margin-top:1px;
  font-size:12.5px; line-height:1.4; color:var(--muted);
}

.perk-code{
  flex:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 12px;
  border:1px dashed color-mix(in srgb, var(--acc-text) 55%, transparent);
  background:color-mix(in srgb, var(--acc) 12%, transparent);
  color:var(--acc-text);
  font-family:'Oswald',sans-serif;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer;
  transition:background-color .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease);
}
.perk-code svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.perk-code:hover{
  background:var(--acc); border-color:var(--acc); color:var(--acc-ink);
  border-style:solid;
}
.perk-code.copied{
  background:var(--acc); border-color:var(--acc); color:var(--acc-ink);
  border-style:solid;
}

/* erst auf sehr schmalen Displays untereinander */
@media (max-width:359px){
  .perk{ flex-wrap:wrap; gap:10px }
  .perk-main{ flex-basis:100% }
  .perk-code{ margin-left:40px }
}

/* ---------- Kontakt ----------------------------------------------------- */

.cta{ margin-top:52px; padding-top:26px; border-top:2px solid var(--acc) }
.cta h3{
  margin:0;
  font-family:'Oswald',sans-serif; font-weight:600;
  text-transform:uppercase;
  font-size:clamp(28px,8vw,44px); line-height:1; letter-spacing:.01em;
}
.cta p{ margin:12px 0 22px; max-width:36ch; font-size:14.5px; color:var(--muted) }

.btns{ display:flex; flex-wrap:wrap; gap:8px }
.b{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 22px;
  font-family:'Oswald',sans-serif;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  transition:transform .18s var(--ease),
             background-color .18s var(--ease),
             border-color .18s var(--ease),
             color .18s var(--ease);
}
.b svg{ width:15px; height:15px; fill:currentColor }
.b:hover{ transform:translateY(-2px) }
.b1{ background:var(--acc); color:var(--acc-ink) }
.b1:hover{ background:#2f49e0 }
.b2{ border:1px solid var(--line) }
.b2:hover{ border-color:var(--acc-text); color:var(--acc-text) }

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

.site-footer{
  /* padding-block, damit die Seitenränder aus .pad erhalten bleiben */
  margin-top:52px; padding-block:22px 44px;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.site-footer nav{ display:flex; gap:18px }
.site-footer a:hover{ color:var(--acc-text) }

/* ---------- Rechtstexte ------------------------------------------------- */

/* Gleiche Bausteine wie auf der Startseite: Oswald-Versalien für die
   Überschrift, der kurze Akzentstrich als wiederkehrendes Motiv, Inter
   für den Text. */
.legal{ padding:56px 20px 40px }
.legal h1{
  margin:0 0 30px;
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:clamp(28px,8vw,44px); line-height:1;
  text-transform:uppercase; letter-spacing:.01em;
}
.legal h1::after{
  content:""; display:block;
  width:26px; height:2px; margin-top:16px;
  background:var(--acc);
}
.legal h2{
  margin:36px 0 10px;
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.legal p{ margin:0 0 12px; max-width:62ch; font-size:14.5px; color:#c9c9d1 }
.legal p:last-of-type{ margin-bottom:0 }
/* nur Links im Fließtext werden unterstrichen - Zurück-Link und Footer
   bleiben wie auf der Startseite */
.legal p a{ color:var(--acc-text); text-decoration:underline; text-underline-offset:2px }
.back{
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom:26px;
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.back:hover{ color:var(--acc-text) }
.legal .site-footer{ margin-top:52px }

/* ---------- Breakpoints ------------------------------------------------- */

@media (min-width:620px){
  /* Foto, Namenszug und Partnerband bleiben am Desktop identisch zum Handy —
     nur die Video-Kacheln dürfen etwas breiter werden. */
  .rail{ grid-auto-columns:288px }
}

@media (max-width:360px){
  .rtxt b{ font-size:20px }
  .rail{ grid-auto-columns:250px }
}