:root{
  --ink:#0d0d0d;
  --paper:#ffffff;
  --sand:#f4f3f0;
  --red:#e4002b;
  --red-lift:#ff1f45;
  --muted:#6b6c70;
  --muted-dark:#a1a2a6;
  --line:#e3e3df;
  --line-dark:#2a2a2a;
  --display:'Big Shoulders Display','Haettenschweiler','Arial Narrow',Impact,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
section[id],header[id]{scroll-margin-top:86px;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--red-lift);}
/* 1440 statt 1240 seit 23.09.2026: Bei 1240 stand der Hero-Text auf einem
   1600px-Monitor 244px vom Rand weg, weil zum Rand noch der zentrierte
   Ueberschuss dazukam. Die Fliesstexte haben eigene Breitenbegrenzungen
   (44 bis 60 Zeichen), die Lesbarkeit aendert sich dadurch nicht. */
.shell{max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut);}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:300;}
.skip:focus{left:12px;top:12px;}

/* ---------- type primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:900;
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:0.005em;
  font-size:clamp(2.35rem,6vw,5.4rem);
  overflow-wrap:break-word;
}
.display--sm{font-size:clamp(2.1rem,4.6vw,3.8rem);}
.display--xs{font-size:clamp(1.35rem,2.6vw,1.9rem);}
.tag{
  font-family:var(--mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--red);
}
.on-dark .tag{color:var(--red-lift);}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--muted);max-width:56ch;text-wrap:pretty;}
.on-dark .lede{color:var(--muted-dark);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 30px;
  font-family:var(--mono);font-size:0.8rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:2px;cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.btn--solid{background:var(--red);color:#fff;}
.btn--solid:hover{background:var(--ink);}
.btn--line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55);}
.btn--line:hover{background:#fff;color:var(--ink);border-color:#fff;}
.btn--ink{background:var(--ink);color:#fff;}
.btn--ink:hover{background:var(--red);}
.btn__arrow{display:block;width:16px;height:8px;flex:none;}

/* ---------- pill nav (collapses to a circle on scroll) ---------- */
.navwrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:120;}
.pillnav{
  display:flex;align-items:center;gap:2px;height:52px;
  background:rgba(13,13,13,.86);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.28);overflow:hidden;
  padding:0 6px;max-width:640px;width:auto;
  transition:width .4s cubic-bezier(.22,1,.36,1);cursor:default;
}
.pillnav.is-collapsed{width:52px;padding:0;cursor:pointer;}
/* Kreis innen 50px (52 minus Rahmen), Logo 38px: 6px Rand rundum, sonst sitzt es links (27.09.2026) */
.pillnav.is-collapsed .pillnav__mark{margin-left:6px;}
.pillnav__mark{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:0.9rem;letter-spacing:0.02em;
  margin-left:3px;text-decoration:none;transition:margin-left .4s cubic-bezier(.22,1,.36,1);
}
/* Eigenes Logo (MN-Ligatur, seit 27.09.2026) statt geschriebenem MN */
.pillnav__mark img,.footstack__mark img{display:block;width:100%;height:100%;}
.pillnav__links{
  display:flex;align-items:center;gap:2px;padding:0 6px 0 10px;white-space:nowrap;
  transition:opacity .18s ease;
}
.pillnav.is-collapsed .pillnav__links{opacity:0;pointer-events:none;}
.pillnav__links a{
  font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  text-decoration:none;color:rgba(255,255,255,.78);padding:9px 13px;border-radius:999px;
  transition:color .15s ease,background .15s ease;
}
.pillnav__links a:hover{color:#fff;background:rgba(255,255,255,.08);}
.pillnav__links a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1);}
.pillnav__cta{background:var(--red) !important;color:#fff !important;font-weight:700 !important;}
.pillnav__cta:hover{background:var(--red-lift) !important;}
.pillnav__burger{
  display:none;width:38px;height:38px;background:none;border:none;cursor:pointer;
  align-items:center;justify-content:center;flex:0 0 auto;margin-right:2px;
}
.pillnav__burger span{display:block;width:18px;height:2px;background:#fff;position:relative;}
.pillnav__burger span::before,.pillnav__burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;transition:transform .2s;
}
.pillnav__burger span::before{top:-6px;}
.pillnav__burger span::after{top:6px;}

/* Sprachumschalter DE/EN (seit 27.09.2026). Desktop in der Pille, mobil
   eigener Knopf neben dem Burger, damit Besucher aus dem Ausland ihn ohne
   Menue finden. */
.pillnav__links a.pillnav__lang{border:1px solid rgba(255,255,255,.24);padding:8px 11px;margin:0 4px 0 6px;}
.pillnav__langm{
  display:none;align-items:center;justify-content:center;height:34px;padding:0 11px;margin:0 2px 0 8px;
  border:1px solid rgba(255,255,255,.24);border-radius:999px;
  font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:0.08em;
  color:rgba(255,255,255,.85);text-decoration:none;
}
.pillnav__langm:hover{color:#fff;background:rgba(255,255,255,.08);}

.drawer{
  position:fixed;inset:0;z-index:115;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:0 var(--gut);
  transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.drawer.is-open{transform:translateY(0);}
.drawer a{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(2rem,10vw,3rem);line-height:1.15;color:#fff;text-decoration:none;
  border-bottom:1px solid var(--line-dark);padding:14px 0;
}
.drawer a:hover{color:var(--red-lift);}
.drawer a[aria-current="page"]{color:var(--red-lift);}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding:140px 0 clamp(36px,6vh,72px);overflow:hidden;background:var(--ink);
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;
  /* NICHT spiegeln. Auf dem Bild stehen lesbare Red-Bull-Schriftzuege auf den
     Trikots, gespiegelt stuenden sie verkehrt herum (geaendert 23.09.2026).
     Mario steht dadurch links, der Text sitzt rechts. */
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,6,6,.58) 0%,rgba(6,6,6,.16) 18%,rgba(6,6,6,.52) 42%,rgba(6,6,6,.86) 72%,rgba(6,6,6,.95) 100%),
    linear-gradient(270deg,rgba(6,6,6,.72) 0%,rgba(6,6,6,.12) 68%);
}
.hero__body{position:relative;z-index:2;width:100%;}
.tag--hero{display:flex;align-items:center;gap:12px;color:#fff;}
.hero .tag--hero,.hero h1,.hero .lede{text-shadow:0 1px 26px rgba(0,0,0,.6);}
.tag--hero span{display:block;width:34px;height:3px;background:var(--red);flex:none;}
.hero h1{
  color:#fff;max-width:19ch;margin:18px 0 24px;
  font-size:clamp(1.95rem,5.4vw,5.4rem);
  overflow-wrap:normal;hyphens:none;
}
.hero h1 em{font-style:normal;color:var(--red-lift);}
.hero .lede{color:rgba(255,255,255,.86);max-width:50ch;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.hero__foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22);
  font-family:var(--mono);font-size:0.74rem;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
}
.hero__foot b{color:#fff;font-weight:500;}

/* Text sitzt rechts, damit Mario links im Bild frei bleibt (23.09.2026).
   Unter 900px ist das Bild ohnehin so eng beschnitten, dass die Seite keine
   Rolle mehr spielt, dort bleibt alles linksbuendig. */
@media (min-width:900px){
  .hero h1{max-width:15ch;margin-left:auto;text-align:right;}
  .hero .lede{max-width:44ch;margin-left:auto;text-align:right;}
  .hero .tag--hero{width:fit-content;margin-left:auto;flex-direction:row-reverse;}
  .hero__cta{justify-content:flex-end;}
  .hero__foot{justify-content:flex-end;}
  /* Fotocredit im Hero nach links, sonst stoesst er an die Fusszeile */
  .hero .credit{left:var(--gut,16px);right:auto;}
}

/* ---------- proof strip ---------- */
.proof{background:var(--ink);color:#fff;padding:clamp(48px,7vw,80px) 0;}
.proof__label{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:26px;
}
.proof__list{list-style:none;display:grid;gap:0;}
.proof__list li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:15px 0;border-top:1px solid var(--line-dark);
}
.proof__list li:last-child{border-bottom:1px solid var(--line-dark);}
.proof__ev{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.35rem,3.2vw,2rem);line-height:1;letter-spacing:0.01em;
}
.proof__loc{
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted-dark);margin-left:auto;
}

/* ---------- generic section ---------- */
.sec{padding:clamp(72px,10vw,140px) 0;}
.sec--sand{background:var(--sand);}
.sec__head{max-width:60ch;margin-bottom:clamp(38px,5vw,64px);}
.sec__head h2{margin:14px 0 18px;}

/* ---------- ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px);}
.step figure{margin:0;}
.step__shot{
  position:relative;aspect-ratio:4/3;overflow:hidden;background:#e6e5e1;
}
.step__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.step:hover .step__shot img{transform:scale(1.04);}
.step__no{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--red);color:#fff;
  font-family:var(--mono);font-size:0.72rem;font-weight:700;letter-spacing:0.12em;
  padding:7px 12px;
}
.step h3{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;margin:20px 0 10px;
}
.step p{color:var(--muted);font-size:0.96rem;}

/* ---------- rider (signature) ---------- */
.rider{background:var(--ink);color:#fff;padding:clamp(72px,10vw,132px) 0;}
.rider__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px;padding-bottom:26px;border-bottom:2px solid var(--red);
}
.rider__top h2{color:#fff;}
.rider__stamp{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted-dark);text-align:right;line-height:1.9;
}
.rider__shot{margin:34px 0 14px;}
.rider__shot img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;}
.rider__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,72px);}
.rider__row{
  display:grid;grid-template-columns:minmax(120px,0.7fr) 1.3fr;gap:14px;
  padding:17px 0;border-bottom:1px solid var(--line-dark);align-items:baseline;
}
.rider__k{
  font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--red-lift);
}
.rider__v{font-size:0.98rem;color:#fff;}
.rider__v small{display:block;color:var(--muted-dark);font-size:0.84rem;margin-top:3px;}
.rider__note{
  margin-top:34px;padding:22px 24px;border:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.rider__note p{color:var(--muted-dark);font-size:0.95rem;max-width:62ch;}
.rider__note b{color:#fff;font-weight:600;}

/* ---------- porträt-hero (über mich) ---------- */
/* Bild behält sein Seitenverhältnis (3:2), wird nicht beschnitten.
   Ab 900px liegt der Text im Bild rechts, darunter steht er unter dem Bild. */
.portrait{position:relative;background:var(--ink);}
.portrait__img{display:block;width:100%;height:auto;}
.portrait__veil{display:none;}
.portrait__body{padding-top:clamp(28px,5vw,44px);padding-bottom:clamp(36px,6vw,56px);}
.portrait__txt{max-width:56ch;}
.portrait__txt h1{color:#fff;margin:14px 0 20px;}
.portrait__txt p:not(.tag){color:rgba(255,255,255,.86);margin-bottom:16px;}
.portrait__txt a{color:#fff;text-decoration:underline;text-decoration-color:var(--red-lift);text-underline-offset:3px;text-decoration-thickness:2px;white-space:nowrap;}
.portrait__txt a:hover{color:var(--red-lift);}
@media (min-width:900px){
.portrait__veil{
    display:block;position:absolute;inset:0;
    background:linear-gradient(270deg,rgba(6,6,6,.92) 0%,rgba(6,6,6,.76) 32%,rgba(6,6,6,.24) 64%,rgba(6,6,6,0) 100%);
  }
  .portrait__body{
    position:absolute;inset:0;z-index:2;display:flex;align-items:center;
    padding-top:120px;
  }
  .portrait__txt{
    margin-left:auto;max-width:44ch;
    text-shadow:0 1px 26px rgba(0,0,0,.6);
  }
}

/* Bild-Kopf für Unterseiten: Titel liegt immer im Bild, auch am Handy.
   Anders als .portrait, wo ganze Absätze stehen und unter 900px abrutschen. */
/* ---------- achievements / timeline (über mich) ---------- */
.achieve{background:var(--ink);color:#fff;padding:clamp(56px,8vw,96px) 0;}
.achieve__list{list-style:none;margin-top:clamp(28px,4vw,44px);display:grid;gap:0;}
.achieve__list li{
  /* Zahl immer links in fester Spalte, Text bricht rechts daneben um (27.09.2026, vorher rutschten lange Texte einzeln unter die Zahl) */
  display:grid;grid-template-columns:clamp(104px,26vw,180px) minmax(0,1fr);align-items:baseline;gap:0 20px;
  padding:18px 0;border-top:1px solid var(--line-dark);
}
.achieve__list li:last-child{border-bottom:1px solid var(--line-dark);}
.achieve__val{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.3rem,3vw,1.9rem);line-height:1;color:var(--red-lift);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.achieve__desc{font-size:0.95rem;line-height:1.4;color:var(--muted-dark);}

/* ---------- weltrekord + presse (über mich, seit 17.10.2026) ----------
   Ersetzt die alte Liste "In Zahlen" (Zahlen am 17.10.2026 ganz gestrichen). Die Skala am Foto zeigt die Rekordhöhe:
   oben 3,80 m auf Höhe der Palette, unten 0 am Ziel. Striche alle 0,5 m,
   lange Striche jeden Meter. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.record{background:var(--ink);color:#fff;padding:clamp(64px,9vw,120px) 0 clamp(56px,7vw,96px);}
.record__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center;}
.record__shot{position:relative;margin:0;}
.record__frame{position:relative;aspect-ratio:2/3;overflow:hidden;background:#1b1b1b;}
.record__frame--wide{aspect-ratio:3/2;}
/* Hochformat nie höher als der Bildschirm, damit Foto und Skala immer ganz zu sehen sind */
.record__grid:not(.record__grid--flip):not(.record__grid--wide) .record__shot{width:min(100%,calc(84vh * 2 / 3));width:min(100%,calc(84svh * 2 / 3));justify-self:center;}
.record__frame img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;}
/* Skala und AF-Rahmen erst zeigen, wenn das Foto da ist (onload am img setzt .is-loaded).
   Vorher stand die Skala schon auf leerer Fläche, während das Foto noch lud. */
.record__scale,.record__af{opacity:0;transition:opacity .4s ease;}
.record__frame.is-loaded .record__scale,.record__frame.is-loaded .record__af{opacity:1;}
.record__scale{
  position:absolute;right:16px;top:23%;bottom:10%;width:16px;z-index:2;
  border-right:2px solid var(--red-lift);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.65));
}
.record__tick{position:absolute;right:0;width:9px;height:1px;background:rgba(255,255,255,.85);}
.record__tick--m{width:16px;height:2px;background:#fff;}
.record__frame .credit{right:auto;left:12px;}
.record__af{
  position:absolute;left:41%;top:29%;width:23%;height:22%;z-index:2;
  --af:#fff;
  background:
    linear-gradient(var(--af),var(--af)) left top / 18px 2px no-repeat,
    linear-gradient(var(--af),var(--af)) left top / 2px 18px no-repeat,
    linear-gradient(var(--af),var(--af)) right top / 18px 2px no-repeat,
    linear-gradient(var(--af),var(--af)) right top / 2px 18px no-repeat,
    linear-gradient(var(--af),var(--af)) left bottom / 18px 2px no-repeat,
    linear-gradient(var(--af),var(--af)) left bottom / 2px 18px no-repeat,
    linear-gradient(var(--af),var(--af)) right bottom / 18px 2px no-repeat,
    linear-gradient(var(--af),var(--af)) right bottom / 2px 18px no-repeat;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.record + .record{border-top:1px solid var(--line-dark);}
.record__grid--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
.record__grid--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
.record__num.record__num--name{font-size:clamp(2.8rem,5.2vw,5.6rem);white-space:nowrap;}
.record__btn{margin-top:30px;}
.record__mark,.record__zero{
  position:absolute;right:24px;font-family:var(--mono);font-size:0.72rem;font-weight:700;
  letter-spacing:0.08em;white-space:nowrap;line-height:1;
}
.record__mark{top:-9px;background:var(--red);color:#fff;padding:4px 7px;}
.record__zero{bottom:-5px;color:#fff;}
.record__num{font-size:clamp(4.6rem,12vw,9.5rem);line-height:0.85;margin:16px 0 22px;color:#fff;}
.record__title{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--red-lift);margin-bottom:20px;
}
.record__title span{
  display:block;margin-top:6px;font-family:var(--body);font-size:1.08rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:#fff;
}
.record__lede{color:var(--muted-dark);max-width:46ch;text-wrap:pretty;}
.record__facts{display:flex;flex-wrap:wrap;gap:14px 44px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line-dark);}
.record__facts dt{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-dark);}
.record__facts dd{margin:4px 0 0;font-size:1rem;color:#fff;}

.press__list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px);}
@media (max-width:1200px){.press__list{grid-template-columns:repeat(2,minmax(0,1fr));}}
.press__card{display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none;}
.press__shot{position:relative;display:block;overflow:hidden;aspect-ratio:3/2;background:var(--sand);}
.press__shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.press__card:hover .press__shot img{transform:scale(1.03);}
.press__meta{margin-top:20px;font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--red);}
.press__head{
  margin-top:10px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.02;text-wrap:balance;
}
.press__go{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;min-height:44px;
  margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:0.78rem;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;transition:color .18s ease;
}
.press__arrow{width:12px;height:12px;flex:none;transition:transform .18s ease;}
.press__card:hover .press__go{color:var(--red);}
.press__card:hover .press__arrow{transform:translate(2px,-2px);}
@media (prefers-reduced-motion:reduce){
  .press__shot img,.press__arrow{transition:none;}
  .press__card:hover .press__shot img,.press__card:hover .press__arrow{transform:none;}
}
@media (min-width:901px){
  .record__grid--flip .record__shot{order:2;}
}
@media (max-width:900px){
  .record__grid,.record__grid--flip,.record__grid--wide{grid-template-columns:1fr;}
  .record__shot{max-width:520px;}
  .record__grid--flip .record__shot,.record__grid--wide .record__shot{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .record__scale,.record__af{transition:none;}
}
@media (max-width:760px){
  .press__list{grid-template-columns:1fr;}
}

/* ---------- booking ---------- */
.book{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:start;}
.book__side p{color:var(--muted);margin-bottom:18px;}
.book__side .direct{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:0.8rem;letter-spacing:0.04em;line-height:2;
}
.book__side .direct a{color:var(--ink);display:inline-block;padding:5px 0;min-height:26px;}
.book__side .direct a:hover{color:var(--red);}
.book__side .direct span{display:block;color:var(--muted);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;}

form{background:var(--paper);border:1px solid var(--line);padding:clamp(22px,3vw,38px);}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.f-g{display:flex;flex-direction:column;gap:7px;}
.f-g.full{grid-column:1/-1;}
form label{
  font-family:var(--mono);font-size:0.7rem;font-weight:500;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--muted);
}
form input,form select,form textarea{
  font-family:var(--body);font-size:0.97rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;min-height:50px;width:100%;
  transition:border-color .18s ease,box-shadow .18s ease;
}
form textarea{min-height:118px;resize:vertical;line-height:1.6;}
form input:hover,form select:hover,form textarea:hover{border-color:#c9c9c3;}
form input:focus,form select:focus,form textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(228,0,43,.12);outline:none;
}
form input[aria-invalid="true"],form select[aria-invalid="true"]{border-color:var(--red);}
.f-check{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-bottom:18px;}
.f-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red);flex:none;}
.f-check label{font-family:var(--body);font-size:0.92rem;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.55;color:var(--ink);}
.f-check label a{color:inherit;}
.f-check .f-err{grid-column:2;}
.f-hint{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.f-err{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;color:#a8001f;min-height:0;}
.f-submit{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;}
.f-msg{margin-top:18px;padding:15px 18px;border-radius:2px;font-size:0.92rem;display:none;}
.f-msg.is-on{display:block;}
.f-msg--ok{background:rgba(16,122,68,.08);border:1px solid rgba(16,122,68,.35);color:#0f6a3e;}
.f-msg--err{background:rgba(228,0,43,.07);border:1px solid rgba(228,0,43,.35);color:#a8001f;}
.f-summary{
  display:none;margin-bottom:20px;padding:16px 18px;
  border:1px solid var(--red);border-left-width:4px;background:rgba(228,0,43,.05);
}
.f-summary.is-on{display:block;}
.f-summary h3{font-size:0.95rem;margin-bottom:8px;color:#a8001f;}
.f-summary ul{margin:0;padding-left:18px;font-size:0.88rem;}
.f-summary a{color:#a8001f;}

/* ---------- sponsors ---------- */
.sponsors{padding:clamp(30px,4.5vw,48px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sponsors__inner{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;}
.sponsors__names{font-family:var(--mono);font-size:0.85rem;letter-spacing:0.03em;color:var(--muted);}
/* Sponsor-Logos (seit 27.09.2026), in Originalfarbe auf Marios Wunsch */
.sponsors__inner{align-items:center;}
.sponsors__logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(28px,4vw,52px);}
.sponsors__logos img{display:block;height:34px;width:auto;}
/* Seit 30.09.2026 mittig: Schriftzug oben, Logos zentriert darunter */
.sponsors__inner{flex-direction:column;align-items:center;gap:22px;text-align:center;}
.sponsors__logos{justify-content:center;}
@media (max-width:560px){.sponsors__logos{display:grid;grid-template-columns:repeat(2,max-content);justify-content:center;justify-items:center;gap:20px 40px;}.sponsors__logos img{height:28px;}}

/* ---------- social page ---------- */
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);margin-top:clamp(32px,4vw,56px);}
/* YouTube steht oben über die volle Breite, Instagram und TikTok darunter nebeneinander */
.social-card--wide{grid-column:1/-1;}
.yt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px;}
.yt-grid__item{display:flex;flex-direction:column;gap:8px;color:var(--ink);text-decoration:none;}
.yt-grid__shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#e6e5e1;}
.yt-grid__shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.yt-grid__item:hover .yt-grid__shot img{transform:scale(1.05);}
.yt-grid__title{font-size:0.84rem;line-height:1.35;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.yt-grid__item:hover .yt-grid__title{color:var(--red);}@media (max-width:760px){
.yt-grid{grid-template-columns:repeat(2,1fr);}
}@media (prefers-reduced-motion:reduce){
.yt-grid__shot img{transition:none;}
}@media (max-width:640px){
.social-grid{grid-template-columns:1fr;}
}
.social-card{
  display:flex;flex-direction:column;gap:16px;padding:clamp(28px,3vw,40px);
  border:1px solid var(--line);background:var(--sand);
  text-decoration:none;color:var(--ink);transition:border-color .2s ease;
}
.social-card:hover{border-color:var(--red);}
.social-card__icon{
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.social-card__icon svg{width:24px;height:24px;fill:currentColor;}
.social-card h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.6rem;line-height:1;}
.social-card p{color:var(--muted);font-size:0.95rem;}
.social-card__cta{font-family:var(--mono);font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--red);margin-top:auto;}
.social-card--feed{cursor:default;}
.social-card--feed:hover{border-color:var(--line);}
.yt-media{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden;cursor:pointer;}
.yt-media:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.yt-media img{width:100%;height:100%;object-fit:cover;display:block;}
.yt-media iframe{width:100%;height:100%;display:block;border:0;}
.yt-media__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.yt-media__play svg{width:56px;height:56px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));}
.yt-media__loading{color:var(--muted);font-family:var(--mono);font-size:0.78rem;text-align:center;margin:auto;padding:0 20px;}
.yt-video-title{font-size:0.95rem;color:var(--ink);}@media (max-width:760px){
.social-grid{grid-template-columns:1fr;}
}

/* ---------- footer (stacked / circular) ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(56px,7vw,92px) 0 40px;}
.footstack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;}
.footstack__mark{
  width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--red-lift);
  text-decoration:none;
}
.footstack__tag{
  margin-top:-10px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.13em;
  color:var(--muted-dark);text-transform:uppercase;
}
.footstack__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;}
.footstack__nav a{
  font-family:var(--mono);font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;
  text-decoration:none;color:var(--muted-dark);
}
.footstack__nav a:hover{color:#fff;}
.footstack__nav a[aria-current="page"]{color:#fff;}
.footstack__soc{display:flex;gap:10px;}
.footstack__soc a{
  position:relative;width:46px;height:46px;border:1px solid var(--line-dark);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--muted-dark);
  transition:border-color .2s ease,color .2s ease;
}
.footstack__soc a:hover,.footstack__soc a:focus-visible{border-color:var(--red-lift);color:var(--red-lift);}
.footstack__soc svg{width:19px;height:19px;fill:currentColor;}
.footstack__soc-label{
  position:absolute;bottom:calc(100% + 10px);left:50%;
  transform:translate(-50%,4px);
  font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;white-space:nowrap;
  background:var(--red);color:#fff;padding:5px 10px;border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;
}
.footstack__soc a:hover .footstack__soc-label,
.footstack__soc a:focus-visible .footstack__soc-label{opacity:1;transform:translate(-50%,0);}@media (prefers-reduced-motion:reduce){
.footstack__soc-label{transition:none;}
}
.footstack__fine{
  width:100%;margin-top:8px;padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--muted-dark);
  text-transform:uppercase;
}
.footstack__fine a{color:var(--muted-dark);text-decoration:underline;text-underline-offset:3px;}
.footstack__fine a:hover{color:#fff;}

/* ---------- impressum ---------- */
.impressum-sec{background:var(--sand);}
.impressum-sec dl{margin-top:24px;display:grid;gap:14px;max-width:68ch;}
.impressum-sec dl > div{
  display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:14px 20px;
  border-bottom:1px solid var(--line);padding-bottom:12px;
}
.impressum-sec dt{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);line-height:1.5;overflow-wrap:anywhere;}
.impressum-sec dd{margin:0;color:var(--ink);}@media (max-width:520px){
.impressum-sec dl > div{grid-template-columns:1fr;gap:4px;}
}

/* ---------- mobile sticky cta ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(13,13,13,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-dark);
  transform:translateY(110%);transition:transform .3s ease;
}
.dock.is-up{transform:translateY(0);}
.dock .btn{width:100%;}

/* ---------- reveal ---------- */
.rise{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.rise.is-in{opacity:1;transform:none;}

/* ---------- faq (seit 17.10.2026) ----------
   Fragen als <details>, damit die Antworten im Quelltext stehen und von
   Suchmaschinen und KI-Suchen gelesen werden, auch wenn sie zugeklappt sind.
   Gleiche Inhalte stehen als FAQPage im JSON-LD im <head>. */
.faq{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:start;}
.faq__head h2{margin:14px 0 18px;}
.faq__list{border-top:1px solid var(--line);}
.faq__item{border-bottom:1px solid var(--line);}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  min-height:44px;padding:20px 0;font-weight:600;font-size:1.04rem;line-height:1.4;
  transition:color .18s ease;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:"+";flex:none;font-family:var(--mono);font-size:1.25rem;font-weight:500;line-height:1;color:var(--red);
}
.faq__item[open] summary::after{content:"\2013";}
.faq__item summary:hover{color:var(--red);}
.faq__item p{padding:0 0 22px;color:var(--muted);max-width:62ch;text-wrap:pretty;}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .rider__grid{grid-template-columns:1fr;}
  .book{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:34px;}
}@media (max-width:760px){
.pillnav__links{display:none;}
  .pillnav__burger{display:flex;}
  .pillnav__langm{display:flex;}
  .pillnav.is-collapsed{width:auto;}
  .hero{min-height:92svh;}
  .hero__veil{background:linear-gradient(180deg,rgba(6,6,6,.55) 0%,rgba(6,6,6,.20) 13%,rgba(6,6,6,.58) 32%,rgba(6,6,6,.90) 62%,rgba(6,6,6,.97) 100%);}
  .f-row{grid-template-columns:1fr;}
  .proof__loc{margin-left:0;width:100%;}
  .rider__row{grid-template-columns:1fr;gap:4px;}
  .rider__stamp{text-align:left;}
  .dock{display:block;}
  .foot{padding-bottom:96px;}
}@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  .rise{opacity:1;transform:none;}
}

/* ---------- Fotocredit im Bild ---------- */
/* Sitzt in einem relativ positionierten Bildcontainer, unten rechts.
   Bewusst klein und zurückhaltend: Der Nachweis gehört dazu, soll aber
   das Bild nicht kommentieren. Der Textschatten hält ihn auch auf hellen
   Bildstellen lesbar. */
.credit{
  position:absolute;right:10px;bottom:8px;z-index:3;
  font-family:var(--mono);font-size:0.58rem;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
  text-shadow:0 1px 4px rgba(0,0,0,.75);
  pointer-events:none;
}
.portrait__shot{position:relative;display:block;}@media (max-width:560px){
.credit{font-size:0.52rem;right:8px;bottom:6px;}
}

/* Porträt am Handy enger anschneiden. Das Original ist eine weite
   Architekturaufnahme, auf 375px Breite waere Mario sonst winzig.
   object-position haelt ihn dabei im Bild (er steht links der Mitte). */
@media (max-width:760px){
  .portrait__shot{aspect-ratio:4/5;overflow:hidden;}
  .portrait__img{height:100%;object-fit:cover;object-position:34% 46%;}
}

/* ---------- showreel (25.10.2026) ---------- */
.btn__time{font-weight:500;opacity:.7;margin-left:2px;}
.reel{background:var(--paper);color:var(--ink);padding:clamp(72px,10vw,140px) 0;}
.reel__head{display:grid;gap:14px;margin-bottom:clamp(24px,4vw,40px);max-width:760px;}
.reel__frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border-radius:2px;}
.reel__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.reel__play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;color:#fff;}
.reel__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.reel__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,13,0) 45%,rgba(13,13,13,.72) 100%);}
.reel__btn{position:absolute;left:50%;top:50%;width:clamp(72px,9vw,104px);aspect-ratio:1;translate:-50% -50%;
  display:grid;place-items:center;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(228,0,43,.55);transition:transform .2s ease,background .2s ease;}
.reel__btn svg{width:42%;height:42%;margin-left:6%;}
.reel__label{position:absolute;left:clamp(16px,3vw,28px);bottom:clamp(14px,2.6vw,24px);
  font-family:var(--mono);font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;}
.reel__dur{color:var(--red-lift);margin-left:8px;}
.reel__play:hover img{transform:scale(1.03);}
.reel__play:hover .reel__btn,.reel__play:focus-visible .reel__btn{transform:scale(1.08);background:var(--red-lift);}
.reel__play:focus-visible{outline:3px solid var(--red-lift);outline-offset:4px;}
.reel__note{margin-top:14px;font-size:0.82rem;color:var(--muted);}
.reel__note a{color:var(--ink);}
@media (prefers-reduced-motion:no-preference){
  .reel__btn{animation:reel-puls 2.4s ease-out 1s 3;}
  @keyframes reel-puls{0%{box-shadow:0 0 0 0 rgba(228,0,43,.55);}100%{box-shadow:0 0 0 26px rgba(228,0,43,0);}}
}
@media (prefers-reduced-motion:reduce){.reel__play img{transition:none;}}
/* Technische Daten: Rest aufklappbar */
.rider__more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:12px;min-height:48px;
  margin-top:18px;font-family:var(--mono);font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#fff;}
.rider__more summary::-webkit-details-marker{display:none;}
.rider__more summary span{color:var(--red-lift);font-size:1rem;transition:transform .2s ease;}
.rider__more[open] summary span{transform:rotate(45deg);}
.rider__more summary:hover{color:var(--red-lift);}
/* Haeufige Fragen bei der Anfrage */
.book{grid-template-areas:"side form" "faq form";}
.book__side{grid-area:side;}
.book > form{grid-area:form;}
.book__faq{grid-area:faq;align-self:start;}
.book__faq .tag{margin-bottom:14px;}
.book__faq .faq__item summary{font-size:1rem;padding:16px 0;}
@media (max-width:960px){.book{grid-template-areas:none;}.book__side,.book > form,.book__faq{grid-area:auto;}}