/* ============================================================
   TILO RIETSCHEL — DER PROFESSOR
   ============================================================ */

/* ---------- SELF-HOSTED FONTS ----------
   Anton and Instrument Serif, both SIL Open Font Licence 1.1.
   Served from /fonts so no visitor data ever reaches Google.
   See fonts/OFL.txt. -------------------------------------- */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Instrument Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/instrument-serif-normal-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  --ink:      #0B0B0D;
  --ink-2:    #121216;
  --ink-3:    #1B1B21;
  --bone:     #F2EDE4;
  --bone-2:   #C9C3B8;
  --bone-3:   #7C776F;
  --signal:   #FF3D1F;
  --chalk:    #93AECD;
  --line:     rgba(242,237,228,.13);

  /* Two faces only — the same pair as the hero lockup. */
  --f-disp:  "Anton", Impact, sans-serif;               /* headings, labels */
  --f-body:  "Instrument Serif", Georgia, serif;        /* everything read */
  --f-label: "Anton", Impact, sans-serif;               /* small caps meta */

  --pad: clamp(20px, 5vw, 80px);
  --maxw: 1500px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  /* Several decorative layers are deliberately wider than their parents: the
     card glows at 168%, the chalk SVGs, the grain. Without this they make the
     page horizontally scrollable on phones — pinch out and you see a bare
     strip of nav and video beside the content. `clip` trims them at the
     viewport edge WITHOUT creating a scroll container, so position:fixed and
     position:sticky keep working. `hidden` first as a fallback for old Safari. */
  overflow-x:hidden;
  overflow-x:clip;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(17px,1.2vw,20px);
  line-height:1.5;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1em; }
ol,ul,dl{ margin:0; padding:0; list-style:none; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--signal); color:#fff; padding:14px 22px; font:500 14px/1 var(--f-label); }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- SCROLLBALL ----------
   Replaces the scrollbar on pointer devices. The class is added by JS, so
   touch devices and no-JS keep the native bar. */
html.has-scrollball{ scrollbar-width:none; }
html.has-scrollball::-webkit-scrollbar{ width:0; height:0; }

.scroller{
  position:fixed; z-index:600; right:16px; top:104px; bottom:38px; width:30px;
  pointer-events:none;
}
.scroller__track{
  position:absolute; left:50%; top:0; bottom:0; width:1px; translate:-50% 0;
  background:linear-gradient(transparent, var(--line) 10%, var(--line) 90%, transparent);
}
.scroller__ball{
  position:absolute; left:50%; top:0; width:28px; height:28px;
  margin:-14px 0 0 -14px;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-radius:50%;
  box-shadow:0 4px 14px rgba(0,0,0,.6);
  pointer-events:auto; cursor:grab; touch-action:none;
  will-change:transform;
}
.scroller__ball:active{ cursor:grabbing; }
/* invisible padding so a thumb can actually grab it */
.scroller__ball::after{ content:""; position:absolute; inset:-11px; border-radius:50%; }

/* the ball floats above the open mobile menu otherwise */
body.is-locked .scroller{ opacity:0; pointer-events:none; }
.scroller{ transition:opacity .3s var(--ease); }


/* ---------- GRAIN ---------- */
.grain{
  position:fixed; inset:-8%; z-index:9000; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  animation:grain 700ms steps(2,end) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)}
}

/* ---------- LOADER ---------- */
.loader{
  position:fixed; inset:0; z-index:8000; background:var(--ink);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__inner{ text-align:center; padding:0 24px; }
.loader__name{ display:block; font:500 11px/1 var(--f-label); letter-spacing:.42em; color:var(--bone-3); margin-bottom:18px; }
.loader__word{
  display:block; font-family:var(--f-disp); font-size:clamp(28px,7vw,64px);
  letter-spacing:.02em; line-height:1; color:var(--bone);
}
.loader__bar{ width:min(240px,60vw); height:2px; background:var(--line); margin:26px auto 0; overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--signal); transition:width .45s linear; }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; gap:28px;
  padding:18px var(--pad);
  transition:background .4s var(--ease), padding .4s var(--ease);
}
.nav.is-stuck{
  /* This bar slides out going down and back in going up. A backdrop-filter on
     a transforming element is the classic source of a one-frame black flash,
     and saturate() visibly shifts a near-black backdrop. Nearly-opaque plate
     + plain blur looks the same and cannot flicker. */
  background:rgba(11,11,13,.92); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-block:12px;
}
.nav.is-hidden{ transform:translateY(-102%); }
.nav{ transition:transform .45s var(--ease), background .4s var(--ease), padding .4s var(--ease); }

.nav__mark{ display:flex; align-items:baseline; gap:.30em; margin-right:auto; white-space:nowrap; }
.nav__mark-a{
  font-family:var(--f-body); font-style:italic; font-size:21px; line-height:1;
  letter-spacing:-.005em; color:var(--bone);
}
.nav__mark-b{
  font-family:var(--f-disp); font-size:17px; line-height:1;
  text-transform:uppercase; letter-spacing:.015em; color:var(--bone);
}

.nav__links{ display:flex; gap:26px; }
.nav__links a{
  position:relative; font:400 19px/1 var(--f-body); letter-spacing:.005em;
  color:var(--bone-2); transition:color .3s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--signal); transform:scaleX(0); transform-origin:100% 50%; transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav__burger{
  display:none; width:40px; height:40px; background:none; border:0;
  cursor:pointer; padding:0; position:relative;
}
.nav__burger span{
  position:absolute; left:11px; width:18px; height:1.5px; background:var(--bone);
  transition:transform .35s var(--ease), opacity .2s;
}
.nav__burger span:nth-child(1){ top:16px; }
.nav__burger span:nth-child(2){ top:22px; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:450; background:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad);
}
.mobilemenu[hidden]{ display:none; }
.mobilemenu a{
  font-family:var(--f-body); font-style:italic; font-size:clamp(38px,10vw,64px);
  line-height:1.16; letter-spacing:-.01em; color:var(--bone);
  opacity:0; transform:translateY(22px); animation:mmIn .5s var(--ease) forwards;
}
.mobilemenu a:nth-child(1){animation-delay:.05s} .mobilemenu a:nth-child(2){animation-delay:.1s}
.mobilemenu a:nth-child(3){animation-delay:.15s} .mobilemenu a:nth-child(4){animation-delay:.2s}
.mobilemenu a:nth-child(5){animation-delay:.25s} .mobilemenu a:nth-child(6){animation-delay:.3s; color:var(--signal)}
@keyframes mmIn{ to{ opacity:1; transform:none; } }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--signal); color:#fff; border:1px solid var(--signal);
  font:500 12px/1 var(--f-label); letter-spacing:.14em; text-transform:uppercase;
  padding:14px 22px; transition:background .3s, color .3s, transform .3s var(--ease);
}
.btn:hover{ background:transparent; color:var(--signal); transform:translateY(-2px); }
.btn--sm{ padding:11px 18px; font-size:11px; }
/* "Schreib mir" buttons set like the PROFESSOR wordmark: big, tight Anton */
.nav__cta, .kontakt__act .btn{ font-family:var(--f-disp); font-weight:400; letter-spacing:.01em; }
.nav__cta{ font-size:19px; padding:9px 18px 8px; }
.kontakt__act .btn{ font-size:clamp(22px,2vw,28px); padding:16px 30px 14px; }
.btn--big{ padding:20px 34px; font-size:13px; }
.btn--ghost{ background:rgba(242,237,228,.09); color:var(--bone); border-color:transparent; }
.btn--ghost:hover{ background:rgba(242,237,228,.17); color:var(--bone); }

/* ---------- HERO ---------- */
.hero{
  position:relative; z-index:1; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; padding-bottom:clamp(20px,3vh,40px);
}
/* Fixed to the viewport, not to the hero: the page scrolls over it.
   It can only be seen through .hero, because .page below is opaque. */
.hero__video{ position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--ink); }
/* Not opaque: a veil, so the fixed video stays faintly visible behind the
   whole page instead of being cut off after the hero. .84 keeps the brightest
   part of the footage at ~rgb(27,28,30), which body text sits on safely.
   Higher = calmer, lower = more video. */
.page{ position:relative; z-index:1; background:rgba(11,11,13,.84); }
.hero__video-el{
  width:100%; height:100%; object-fit:cover; object-position:center 36%;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero__video-el.is-ready{ opacity:1; }
/* keep the lower half dark enough for the wordmark, whatever the footage does */
.hero__video::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(11,11,13,.52) 0%, rgba(11,11,13,.12) 30%,
                    rgba(11,11,13,.12) 70%, rgba(11,11,13,.34) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 22%, rgba(11,11,13,.58) 92%);
}

.hero__glow{
  position:absolute; z-index:0; left:50%; top:44%; translate:-50% -50%;
  width:min(1250px,135vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,61,31,.17) 0%, rgba(255,61,31,.06) 32%, transparent 66%);
  filter:blur(20px);
}
.hero::after{
  content:""; position:absolute; z-index:1; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(11,11,13,.62) 0%, transparent 22%, transparent 74%, rgba(11,11,13,.84) 100%);
}

.hero__stage{
  position:relative; flex:1; display:grid; place-items:end center;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 var(--pad);
  min-height:0;
}
.hero__title{
  position:absolute; z-index:2; inset:auto 0 11%; line-height:.8;
  display:flex; justify-content:center; will-change:transform;
}
/* lockup box is sized by the big word; "Der" hangs off its top-left corner
   so it never disappears behind the athlete */
.hero__lock{ position:relative; display:inline-block; }
.hero__der{
  position:absolute; left:.05em; top:0; translate:0 -92%;
  font-family:var(--f-body); font-style:italic; font-weight:400;
  font-size:clamp(30px,5.4vw,84px); color:var(--bone); line-height:1;
  white-space:nowrap;
}
.hero__prof{
  display:block; font-family:var(--f-disp); color:var(--bone);
  font-size:clamp(58px,16.4vw,296px); letter-spacing:-.004em; line-height:.84;
  white-space:nowrap;
}
.hero__prof .ch{ display:inline-block; will-change:transform; }

.hero__athlete{
  position:relative; z-index:3;
  height:min(82svh,820px); width:auto; max-width:none;
  object-fit:contain; object-position:bottom center;
  /* off-centre to the right, still in front of the wordmark; `translate`
     rather than `transform`, which the pointer parallax in main.js owns */
  translate:clamp(0px,18vw,340px) 0;
  will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom, #000 76%, rgba(0,0,0,.55) 92%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 76%, rgba(0,0,0,.55) 92%, transparent 100%);
}




/* ---------- RED GLOW ----------
   Soft signal-red haze behind the blocks that carry the key messages.
   Same language as the glow behind the cut-outs, just fainter. */
.stmt .wrap, .grund, .kpi__hl{ position:relative; isolation:isolate; }
.stmt .wrap::before, .grund::before, .kpi__hl::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%; width:110%; height:150%;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255,61,31,.18) 0%, rgba(255,61,31,.07) 42%, transparent 72%);
  filter:blur(10px);
}
.kpi__hl::before{ left:24%; width:80%; height:260%; }

/* ---------- SECTION PRIMITIVES ---------- */
.sec{ position:relative; padding-block:clamp(92px,13vh,190px); }


.h2{
  font-family:var(--f-disp); font-size:clamp(40px,7.4vw,112px); line-height:.88;
  text-transform:uppercase; letter-spacing:-.006em; margin:0 0 30px;
}
.h2 span{ display:block; }
.h2 em{
  display:block; font-family:var(--f-body); font-style:italic; font-weight:400;
  text-transform:none; letter-spacing:-.012em; font-size:1.16em; line-height:.94;
  margin-top:.02em;
}
.h2--xl{ font-size:clamp(44px,8.6vw,132px); }

.sub{ font-size:clamp(18px,1.7vw,24px); line-height:1.45; color:var(--bone-2); max-width:46ch; text-wrap:pretty; }
.sub--wide{ max-width:68ch; }

/* ---------- STATEMENT ---------- */
.stmt{ padding-block:clamp(96px,15vh,200px); text-align:center; }
.stmt .wrap{ display:flex; flex-direction:column; align-items:center; }
.stmt__line{
  font-family:var(--f-disp); font-weight:400; text-transform:none;
  font-size:clamp(25px,3.7vw,56px); line-height:1.08; letter-spacing:-.004em;
  max-width:min(1020px,94%); margin:0 auto; color:var(--bone);
  text-wrap:balance;
}
.stmt__line em{
  font-family:var(--f-body); font-style:italic; font-weight:400;
  font-size:1.14em; letter-spacing:-.01em; color:var(--signal);
}
.stmt__sig{
  font-family:var(--f-body); font-style:italic;
  font-size:clamp(30px,3.2vw,48px); line-height:1; color:var(--bone-3);
  margin:clamp(30px,4vw,52px) 0 0;
}

/* reveal */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .grain,}

/* chalk annotations */
.chalk{ position:absolute; pointer-events:none; overflow:visible; }
.chalk path, .chalk ellipse{
  fill:none; stroke:var(--chalk); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  opacity:.5; stroke-dasharray:var(--len,1200); stroke-dashoffset:var(--len,1200);
  transition:stroke-dashoffset 1.5s var(--ease);
}
.is-in .chalk path, .is-in .chalk ellipse, .chalk.is-in path, .chalk.is-in ellipse{ stroke-dashoffset:0; }

/* ---------- PROFIL ---------- */
.profil__grid{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(32px,6vw,96px); align-items:start; }
.profil__media{ position:relative; position:sticky; top:120px; }
.frame{ position:relative; margin:0; }
.frame img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 22%; filter:grayscale(.15) contrast(1.05); }
.frame__cap{
  display:flex; gap:9px; margin-top:13px;
  font:italic 400 15px/1.5 var(--f-body); letter-spacing:0; color:var(--bone-3);
}
.frame__cap span{ color:var(--signal); font-style:normal; font-family:var(--f-label);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding-top:3px; }
.chalk--circle{ inset:-6% -8% auto -8%; width:116%; aspect-ratio:1; --len:820; }

.profil__text{ max-width:700px; }
.profil__text .lede p{ font-size:clamp(18px,1.55vw,23px); line-height:1.5; color:var(--bone-2); margin-bottom:1.05em; }
.profil__text .lede em{ font-style:italic; color:var(--bone); }
.profil__text .lede strong{ color:var(--bone); font-weight:400; font-style:italic; }

.steck{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(24px,2.6vw,34px) clamp(26px,2.8vw,40px); margin-top:clamp(40px,4.5vw,58px); }
.steck > div{ padding:0; }
.steck dt{ font:400 9px/1 var(--f-label); letter-spacing:.24em; text-transform:uppercase; color:var(--bone-3); margin-bottom:8px; }
.steck dd{ margin:0; font-size:19px; line-height:1.3; color:var(--bone); }

/* ---------- PALMARÈS ---------- */
.erfolge{ padding-bottom:clamp(60px,9vh,120px); }
.pal{ position:relative; margin-top:10px; }
.pal__row{
  position:relative; isolation:isolate; display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,.9fr) 40px;
  align-items:center; gap:18px; padding:clamp(20px,2.6vw,34px) 0;
  cursor:default;
}
.pal__row::before{
  content:""; position:absolute; left:-2vw; right:-2vw; top:0; bottom:0; z-index:-1;
  background:var(--ink-2); opacity:0; transition:opacity .4s var(--ease);
}
.pal__row:hover::before{ opacity:1; }
.pal__y{ font:500 12px/1 var(--f-label); letter-spacing:.16em; color:var(--signal); }
.pal__t{
  font-family:var(--f-disp); font-size:clamp(24px,3.7vw,54px); line-height:1;
  text-transform:uppercase; letter-spacing:-.004em; transition:transform .45s var(--ease), color .35s;
}
.pal__row:hover .pal__t{ transform:translateX(14px); }
.pal__d{ font:italic 400 19px/1.4 var(--f-body); letter-spacing:0; color:var(--bone-2); }
.pal__a{ justify-self:end; color:var(--bone-3); font-size:20px; opacity:0; transform:translateX(-10px); transition:all .4s var(--ease); }
.pal__row:hover .pal__a{ opacity:1; transform:none; color:var(--signal); }

.pal__peek{
  position:fixed; z-index:400; width:270px; height:340px; object-fit:cover;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.9) rotate(-3deg);
  transition:opacity .35s var(--ease), transform .45s var(--ease);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.pal__peek.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(-3deg); }

/* ---------- BANNER ---------- */
.banner{ position:relative; height:clamp(320px,62vh,620px); overflow:hidden; }
.banner img{ position:absolute; top:-15%; left:0; width:100%; height:130%; object-fit:cover; filter:grayscale(.45) contrast(1.08) brightness(.42); will-change:transform; }
.banner::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(11,11,13,.62) 0%, rgba(11,11,13,.2) 55%, transparent 78%),
    linear-gradient(var(--ink),transparent 26%,transparent 74%,var(--ink));
}
.banner__quote{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  padding:0 var(--pad); text-align:center;
}
.banner__quote p{
  margin:0; font-family:var(--f-body); font-style:italic;
  font-size:clamp(23px,3.5vw,54px); line-height:1.24; max-width:min(980px,94%); color:var(--bone);
  text-wrap:balance;
  text-shadow:0 4px 30px rgba(0,0,0,.55);
}
.banner__quote em{
  font-family:var(--f-disp); font-style:normal; text-transform:uppercase;
  font-size:.86em; letter-spacing:-.004em; color:var(--signal);
}

/* ---------- LEHRE ---------- */
.lekt{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(34px,4vw,60px); margin-top:clamp(40px,6vw,72px); }
.lekt__card{
  /* isolate so the glow below can sit at z-index:-1 behind this card's own
     content without falling behind .page's veil */
  position:relative; isolation:isolate; padding:0;
  transition:transform .5s var(--ease);
}
.lekt__card:hover{ transform:translateY(-6px); }

/* The glow used to be the image box's background, so it was cut off square at
   that box's edges. It is its own, larger layer now: wider than the card and
   reaching down past the heading, fading out well before its own edges so
   there is nothing to clip. */
.lekt__card::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; translate:-50% 0; top:-46px;
  width:168%; height:372px;
  background:radial-gradient(ellipse 50% 50% at 50% 52%,
              rgba(255,61,31,.26) 0%, rgba(255,61,31,.11) 36%, transparent 72%);
}

.lekt__img{
  height:262px; margin:0 0 26px;
  display:flex; align-items:flex-end; justify-content:center;
  padding:14px 14px 0;
}
.lekt__img img{
  max-height:100%; max-width:100%; width:auto; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.5));
  transition:transform .6s var(--ease); transform-origin:50% 100%;
}
.lekt__card:hover .lekt__img img{ transform:scale(1.05); }
.lekt__no{ font:500 10px/1 var(--f-label); letter-spacing:.28em; text-transform:uppercase; color:var(--signal); margin:0 0 12px; }
.lekt__card h3{ font-family:var(--f-disp); font-size:clamp(28px,3.2vw,44px); line-height:1; text-transform:uppercase; margin:0 0 14px; }
.lekt__card p{ font-size:19px; line-height:1.5; color:var(--bone-2); margin:0; }
.chalk--arrow,.chalk--angle,.chalk--dots{ right:14px; bottom:10px; width:118px; opacity:.55; --len:520; }

/* ---------- GALERIE ---------- */
.gal__head{ display:block; }
.gal{
  display:flex; gap:clamp(12px,1.4vw,22px); margin-top:clamp(28px,4vw,54px);
  padding-inline:var(--pad); padding-bottom:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--bone-3) transparent;
  cursor:grab;
}
.gal.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.gal.is-drag *{ pointer-events:none; }
.gal::-webkit-scrollbar{ height:3px; }
/* the ball track below replaces the native bar */
html.has-galball .gal{ scrollbar-width:none; }
html.has-galball .gal::-webkit-scrollbar{ height:0; }
.galscroll{ position:relative; height:30px; margin-top:clamp(18px,2.4vw,30px); }
.galscroll__track{
  position:absolute; left:0; right:0; top:50%; height:1px; translate:0 -50%;
  background:linear-gradient(90deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.galscroll__ball{ top:50%; left:0; }
.gal::-webkit-scrollbar-thumb{ background:var(--bone-3); }
.gal::-webkit-scrollbar-track{ background:var(--line); }
.gal__item{ position:relative; flex:none; margin:0; scroll-snap-align:center; width:clamp(260px,38vw,520px); }
.gal__item--tall{ width:clamp(210px,26vw,370px); }
.gal__item img{ width:100%; height:clamp(300px,52vh,560px); object-fit:cover; filter:grayscale(.2) contrast(1.04); transition:filter .5s var(--ease), transform .7s var(--ease); }
.gal__item:hover img{ filter:none; transform:scale(1.02); }
.gal__item figcaption{
  position:absolute; left:12px; bottom:12px;
  font:500 10px/1 var(--f-label); letter-spacing:.2em; text-transform:uppercase;
  background:rgba(11,11,13,.88); padding:8px 11px; color:var(--bone);
}

/* ---------- PARTNER ---------- */
.kpi{ margin-top:clamp(56px,7vw,96px); }
.kpi + .kpi{ margin-top:clamp(40px,5vw,64px); }
.kpi__head{
  display:flex; align-items:center; gap:16px; margin:0 0 clamp(24px,3vw,38px);
  font:500 11px/1 var(--f-label); letter-spacing:.24em; text-transform:uppercase; color:var(--signal);
}
.kpi__hl{
  display:flex; align-items:center; gap:clamp(18px,2.6vw,40px); flex-wrap:wrap;
  margin:clamp(34px,4.4vw,60px) 0 0;
}
.kpi__hl b{ font-family:var(--f-disp); font-weight:400; font-size:clamp(56px,8vw,120px); line-height:.9; color:var(--signal); }
.kpi__hl span{
  flex:1 1 280px; font-family:var(--f-body); font-style:italic;
  font-size:clamp(24px,2.6vw,38px); line-height:1.15; color:var(--bone); text-wrap:balance;
}
.kpi__src{ margin:clamp(24px,3vw,34px) 0 0; font-size:14px; line-height:1.4; color:var(--bone-3); }
.reach{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:clamp(28px,3.4vw,46px); }
.reach--tour{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:clamp(30px,3.6vw,50px); }
@media (max-width:860px){ .reach--tour{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.reach__plus{
  display:block; margin-top:10px; font:500 clamp(13px,1.1vw,15px)/1.3 var(--f-label); font-style:normal;
  letter-spacing:.14em; text-transform:uppercase; color:var(--signal);
}
.reach__item{ padding:0; }
.reach__item b{ display:block; font-family:var(--f-disp); font-weight:400; font-size:clamp(30px,4.4vw,58px); line-height:1; color:var(--bone); margin-bottom:10px; }
.reach__item span{ font:400 10px/1.5 var(--f-label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3); }

/* the two big promises under the partner intro */
.grund{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(40px,5vw,84px); margin-top:clamp(56px,7vw,96px); }
.grund__item{ position:relative; }
.grund__item h3{
  font-family:var(--f-disp); text-transform:uppercase; font-size:clamp(32px,4vw,58px);
  line-height:.92; letter-spacing:-.004em; margin:0 0 20px;
}
.grund__item h3 em{
  display:block; font-family:var(--f-body); font-style:italic; text-transform:none;
  font-size:1.14em; letter-spacing:-.01em; color:var(--signal);
}
.grund__item p{ margin:0; font-size:clamp(18px,1.5vw,21px); line-height:1.5; color:var(--bone-2); max-width:46ch; text-wrap:pretty; }

.pak{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(34px,4vw,58px); margin-top:clamp(46px,6vw,78px); }
.pak__card{ position:relative; padding:0; }
.pak__no{ font:500 10px/1 var(--f-label); letter-spacing:.2em; color:var(--signal); }
.pak__card h3{ font-family:var(--f-disp); font-size:clamp(22px,2.4vw,32px); text-transform:uppercase; line-height:1; margin:14px 0 14px; }
.pak__card p{ margin:0; font-size:19px; line-height:1.5; color:var(--bone-2); }

/* Aktuelle Partner: freie Logo-Reihe, einfarbig, leuchten beim Hover auf */
.plog__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(28px,3.4vw,46px);
}
/* Logo-Reihe genau mittig zwischen Zitat und „Warum Professor?":
   oben der Abstand des Zitat-Blocks, unten derselbe Abstand */
.profil--logos{ padding-top:0; }
.plog--top{ margin-bottom:clamp(96px,15vh,200px); }
.plog__cell{
  position:relative; display:flex; align-items:center; justify-content:flex-start;
  height:clamp(90px,9vw,130px);
}
.plog__cell img{
  width:var(--w,60%); max-height:62%; object-fit:contain; object-position:left center;
  transform-origin:left center;
  opacity:.55; transition:opacity .5s var(--ease), transform .6s var(--ease);
}
.plog__name{
  position:absolute; left:0; bottom:-6px;
  font:400 10px/1.5 var(--f-label); letter-spacing:.14em; text-transform:uppercase; color:var(--bone-3);
  opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.plog__cell:hover img, .plog__cell:focus-visible img{ opacity:1; transform:scale(1.04); }
.plog__cell:hover .plog__name, .plog__cell:focus-visible .plog__name{ opacity:1; transform:none; }
@media (hover:none){ .plog__cell img{ opacity:.8; } }
/* Ohne JS / bei reduzierter Bewegung: Logos brechen in Zeilen um */
@media (max-width:1100px){ .plog__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){
  .plog__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:8px; }
  .plog:not(.is-marquee) .plog__grid > li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .plog:not(.is-marquee) .plog__grid > li:last-child:nth-child(odd) img{ width:calc(var(--w,60%) / 1.8); }
}
/* Laufband: passt nicht jedes Logo nebeneinander, läuft die Reihe endlos
   von rechts nach links (main.js setzt .is-marquee und verdoppelt die Liste) */
.plog{ --cell:210px; --cell-gap:40px; }
@media (max-width:560px){ .plog{ --cell:170px; --cell-gap:28px; } }
.plog.is-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.plog.is-marquee .plog__grid{
  display:flex; width:max-content; gap:0;
  animation:plog-slide var(--dur,30s) linear infinite;
}
.plog.is-marquee .plog__grid > li{ flex:0 0 var(--cell); margin-right:var(--cell-gap); }
.plog.is-marquee:hover .plog__grid{ animation-play-state:paused; }
@keyframes plog-slide{ to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){
  .plog__cell img, .plog__name{ transition:none; }
}

/* ---------- SPLIT: text beside a cut-out (Partner + Kontakt) ---------- */
.split{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
        gap:clamp(26px,5vw,80px); align-items:center; }
.split__text{ min-width:0; }
.split__fig{
  position:relative; isolation:isolate; margin:0;
  display:flex; justify-content:center; align-items:flex-end;
}
/* same warm pool as the Werte cards, unclipped */
.split__fig::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:50%; top:50%; translate:-50% -50%;
  width:150%; height:118%;
  background:radial-gradient(ellipse 50% 50% at 50% 54%,
              rgba(255,61,31,.26) 0%, rgba(255,61,31,.11) 36%, transparent 72%);
}
.split__fig img{
  width:auto; height:auto; max-width:100%;
  max-height:clamp(330px,44vw,580px);
  object-fit:contain;
  /* these cut-outs end mid-thigh; fade the bottom so the crop reads as
     intentional rather than as a hard edge */
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 93%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 78%, rgba(0,0,0,.5) 93%, transparent 100%);
}

/* ---------- KONTAKT ---------- */
.kontakt{ position:relative; overflow:hidden; }
.kontakt__act{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.social{ display:flex; gap:26px; flex-wrap:wrap; margin-top:44px; }
.social a{ font:500 11px/1 var(--f-label); letter-spacing:.22em; text-transform:uppercase; color:var(--bone-2); transition:color .3s; }
.social a:hover{ color:var(--signal); }

/* ---------- FOOTER ---------- */
.foot{ position:relative; z-index:1; background:rgba(11,11,13,.84); padding-block:clamp(40px,5vw,64px); }
.foot__in{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 34px; }
.foot__mark{ font-family:var(--f-body); font-style:italic; font-size:22px; margin-right:auto; }
.foot p{ margin:0; font:400 15px/1.7 var(--f-body); letter-spacing:0; color:var(--bone-3); }
.foot__legal{ display:flex; gap:18px; font-family:var(--f-label) !important; font-size:10px !important;
  letter-spacing:.18em; text-transform:uppercase; }
.foot__legal a{ transition:color .3s; }
.foot__legal a:hover{ color:var(--bone); }

/* ============================================================
   PLACEHOLDER MARKER  —  see TODO.md
   Marks fields still empty in inhalt.js. They disappear on their
   own as soon as a value is filled in, so nothing to delete here.
   ============================================================ */
.todo{
  outline:1px dashed #E8B33D; outline-offset:3px;
  color:#E8B33D !important; background:rgba(232,179,61,.07);
}
.todo::after{ content:" ✎"; font-size:.8em; }

/* ---------- IMPRESSUM & DATENSCHUTZ ---------- */
.legalpage{ min-height:100vh; display:flex; flex-direction:column; }
.legal__bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px var(--pad); max-width:var(--maxw); width:100%; margin-inline:auto;
}
.legal__back{ font:400 19px/1 var(--f-body); color:var(--bone-2); transition:color .3s; }
.legal__back:hover{ color:var(--signal); }
.legal{ flex:1; max-width:820px; padding-block:clamp(60px,10vh,120px) clamp(80px,12vh,140px); }
.legal h1{ margin-bottom:clamp(30px,4vw,50px); }
.legal h2{
  font-family:var(--f-disp); font-size:clamp(20px,2vw,26px); text-transform:uppercase;
  line-height:1.1; margin:clamp(34px,4vw,48px) 0 12px;
}
.legal p{ font-size:clamp(17px,1.3vw,19px); line-height:1.6; color:var(--bone-2); }
.legal a{ color:var(--bone); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--signal); }
.legal a:hover{ color:var(--signal); }
.legal__lede{ font-size:clamp(20px,1.8vw,24px) !important; color:var(--bone) !important; }
.legal__stand{ margin-top:clamp(40px,5vw,60px); font-size:15px !important; color:var(--bone-3) !important; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .split{ grid-template-columns:1fr; gap:clamp(24px,4vw,44px); }
  .split__fig img{ max-height:clamp(280px,50vw,420px); }
  .profil__grid{ grid-template-columns:1fr; }
  .profil__media{ position:relative; top:0; max-width:440px; }
  .pal__row{ grid-template-columns:76px minmax(0,1fr) 30px; }
  .pal__d{ grid-column:2; grid-row:2; }
}
@media (max-width:860px){
  .scroller{ right:9px; top:118px; bottom:26px; width:26px; }
  .scroller__ball{ width:24px; height:24px; margin:-12px 0 0 -12px; }
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:block; }
  /* Narrow screens: same idea as desktop, the figure stands in front of the
     lower part of the wordmark, "Der" and the left letters stay clear. */
  .hero__athlete{ height:min(74svh,680px); }
  .hero__title{ inset:auto 0 9%; }
      .pal__peek{ display:none; }
  .banner__quote p{ max-width:min(560px,94%); }
}
@media (max-width:560px){
  .hero{ min-height:94svh; }
  .hero__prof{ font-size:19vw; }
  .hero__der{ font-size:10.5vw; }
  .hero__athlete{ height:min(62svh,540px); translate:9vw 0; }
  /* low enough that the figure only covers its torso, not "Der" */
  .hero__title{ inset:auto 0 3%; }
      .steck{ grid-template-columns:1fr 1fr; }
  .gal__item, .gal__item--tall{ width:78vw; }
  .gal__item img{ height:56vh; }
  .kontakt__act{ flex-direction:column; align-self:stretch; }
  .kontakt__act .btn{ width:100%; }
  .lekt__img{ height:210px; }
}