/* ============================================================
   SinansWoche V2
   Typografie: Archivo (variabel) + JetBrains Mono (variabel)
   Selbst gehostet, keine externen Requests.
   ============================================================ */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(assets/fonts/archivo-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:'Archivo';
  font-style:normal;
  font-weight:100 900;
  font-stretch:62% 125%;
  font-display:swap;
  src:url(assets/fonts/archivo-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:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(assets/fonts/jetbrainsmono-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:'JetBrains Mono';
  font-style:normal;
  font-weight:100 800;
  font-display:swap;
  src:url(assets/fonts/jetbrainsmono-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;
}

/* ---------- Tokens ---------- */
:root{
  --red:#ed1c24;
  --red-bright:#ff3a41;
  --red-deep:#c4111a;
  --ink:#191a1c;
  --ink-deep:#0f1011;
  --paper:#f4f2ed;
  --grey:#9a9da1;

  --on-dark-2:#c9cbcd;
  --on-dark-3:#8f9295;
  --on-light-1:#191a1c;
  --on-light-2:#4d5157;

  --hair-dark:#ffffff26;
  --hair-light:#191a1c26;

  --font-display:'Archivo','Arial Black',Arial,sans-serif;
  --font-body:'Archivo',Arial,Helvetica,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --pad-x:clamp(22px,6vw,112px);
  --nav-h:72px;

  color-scheme:dark;
}

/* ---------- Basis ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0; overflow-x:hidden;
  background:var(--ink); color:#fff;
  font-family:var(--font-body);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
::selection{background:var(--red); color:#fff;}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--red-bright);
  outline-offset:4px;
}
.light :where(a,button,summary):focus-visible{outline-color:var(--red-deep);}

:where(#inhalt,#top,#kanal,#werte,#projekte,#sport,#sinan,#stoizismus){scroll-margin-top:calc(var(--nav-h) + 18px);}

.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-180%);
  background:var(--red); color:#fff;
  padding:13px 18px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.1em;
  transition:transform .3s var(--ease);
}
.skip-link:focus-visible{transform:none;}

.light{background:var(--paper); color:var(--on-light-1);}
.dark-section{background:var(--ink); color:#fff;}

/* Papier- und Filmkorn: fixiert, kein Repaint im Scroll-Container */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.038;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Leseposition, rein per CSS-Scroll-Timeline ---------- */
.read-progress{
  position:fixed; top:0; left:0; z-index:70;
  width:100%; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%;
  pointer-events:none;
}
@keyframes read-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .read-progress{animation:read-progress 1ms linear forwards; animation-timeline:scroll(root block);}
  }
}

/* ---------- Scroll-Reveal ---------- */
.scroll-sentinel{position:absolute; top:0; left:0; width:1px; height:64px; pointer-events:none;}
html.js [data-rv]{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease) var(--rvd,0ms), transform .85s var(--ease) var(--rvd,0ms);
}
html.js [data-rv].rv-in{opacity:1; transform:none;}

/* ---------- Typografie ---------- */
h1,h2,h3,p{margin-top:0;}
h1,h2,h3{font-family:var(--font-display); font-weight:800; text-transform:uppercase;}
h1{
  margin:26px 0;
  font-size:clamp(44px,4.75vw,88px);
  font-stretch:103%;
  line-height:.9; letter-spacing:-.028em;
}
h1 em,.craft h2 em,.follow h2 em,.manifesto h2 em,.sport-feature h2 em,.nature h2 em{
  color:var(--red); font-style:normal;
}
.hero h1>span{display:block;}

.eyebrow,.kicker{
  font-family:var(--font-mono);
  font-size:11px; line-height:1.65;
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
}
.eyebrow{display:flex; gap:14px; align-items:center; color:#f0a7aa;}
.eyebrow>span{width:28px; height:2px; background:var(--red); flex:none;}
.kicker{color:var(--on-light-2);}
.dark-section .kicker,.nature .kicker,.hero .kicker,.footer-claim .kicker{color:var(--on-dark-3);}
.kicker.red,.eyebrow.red,.red{color:var(--red-bright);}
.dark-section .kicker.red,.nature .kicker.red,.footer-claim .kicker.red{color:var(--red-bright);}

.lead{
  max-width:60ch; color:var(--on-dark-2);
  font-size:clamp(16.5px,1.15vw,19.5px); line-height:1.65;
}

/* ---------- Kopfzeile ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav-h); padding:0 var(--pad-x);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
html[data-scrolled] .topbar{
  background:#0f1011d9;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:#ffffff1f;
}
/* Ohne JavaScript gibt es keinen Scroll-Zustand: Kopfzeile bleibt lesbar. */
html:not(.js) .topbar{
  background:#0f1011e0;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:#ffffff1f;
}
@media (prefers-reduced-transparency:reduce){
  html[data-scrolled] .topbar,html:not(.js) .topbar{background:var(--ink-deep); backdrop-filter:none; -webkit-backdrop-filter:none;}
}

.wordmark{
  display:flex; width:max-content;
  font-family:var(--font-display); font-size:14px; font-weight:800; font-stretch:108%;
  letter-spacing:-.01em; line-height:1;
}
.wordmark span,.wordmark strong{padding:8px 9px; transition:transform .35s var(--ease);}
.wordmark span{background:var(--red); color:#fff;}
.wordmark strong{background:#fff; color:var(--ink);}
.wordmark:hover span{transform:translateX(-2px);}
.wordmark:hover strong{transform:translateX(2px);}

nav{display:flex; gap:clamp(18px,2.2vw,32px);}
nav a{
  position:relative; padding:6px 0;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#c6c8ca;
  transition:color .25s var(--ease);
}
nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease);
}
nav a:hover,nav a[aria-current]{color:#fff;}
nav a:hover::after,nav a[aria-current]::after{transform:scaleX(1); transform-origin:left;}

.nav-actions{justify-self:end; display:flex; gap:9px; align-items:center;}
.nav-cta{
  justify-self:end; padding:11px 15px;
  border:1px solid #ffffff38;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:#fff;
  white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{background:var(--red); border-color:var(--red); color:#fff;}
.nav-cta-secondary{color:#c6c8ca; border-color:#ffffff25;}
.nav-cta-secondary:hover{background:#ffffff14; border-color:#ffffff55; color:#fff;}
.mobile-menu{display:none;}

/* ---------- Buttons und Links ---------- */
.button{
  position:relative; padding:16px 18px; min-width:180px;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  border:1px solid #ffffff3a; color:#fff;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.button>span{display:inline-block; transition:transform .35s var(--ease);}
.button:hover{transform:translate(-3px,-3px);}
.button:hover>span{transform:translateX(4px);}
.button.primary{background:var(--red); border-color:var(--red);}
.button.primary:hover{background:var(--red-bright); border-color:var(--red-bright); box-shadow:6px 6px 0 #ffffff26;}
.button.ghost:hover,.bio-button:hover{border-color:#fff; box-shadow:6px 6px 0 var(--red);}
.button.ghost:hover>span{transform:translateY(3px);}
.dark-button{
  margin-top:28px; width:max-content;
  color:#fff; background:var(--ink); border-color:var(--ink);
}
.dark-button:hover{background:var(--ink-deep); box-shadow:6px 6px 0 var(--red);}

.text-link{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between;
  gap:26px; padding:9px 0 11px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
}
.text-link::before{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red); opacity:.4;}
.text-link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.text-link:hover::after{transform:scaleX(1);}
.text-link>span{display:inline-block; transition:transform .35s var(--ease);}
.text-link:hover>span{transform:translateX(4px);}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:clamp(690px,88svh,900px);
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(360px,.84fr);
  align-items:start;
  padding:calc(var(--nav-h) + 34px) var(--pad-x) 62px;
}
.hero-grid{
  position:absolute; inset:0; opacity:.18;
  background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px);
  background-size:100% 168px,8.333% 100%;
  -webkit-mask-image:radial-gradient(125% 92% at 24% 42%,#000 22%,transparent 78%);
  mask-image:radial-gradient(125% 92% at 24% 42%,#000 22%,transparent 78%);
}
.hero::before{
  content:"?"; position:absolute; left:-2.5vw; bottom:-26vh;
  color:transparent; -webkit-text-stroke:1px #ffffff12;
  font-family:var(--font-display); font-size:74vw; line-height:.8; font-weight:800;
  pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(130% 78% at 50% 108%,#00000057,transparent 60%);
}
.hero-copy{position:relative; z-index:1; align-self:start; min-width:0; max-width:820px; padding-top:clamp(28px,5vh,60px);}
.hero-actions{display:flex; gap:12px; margin-top:34px;}

.hero-portrait{
  position:relative; z-index:1; align-self:start;
  display:flex; align-items:flex-end; justify-content:center;
  margin-top:clamp(8px,2vh,24px);
}
.portrait-frame{width:min(47vw,760px); flex-shrink:0; aspect-ratio:1280/1061; position:relative;}
.portrait-frame img{display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;}
.portrait-note{
  position:absolute; right:-20px; bottom:46px; z-index:2;
  background:var(--paper); color:var(--ink);
  padding:15px 18px; margin:0; border-left:5px solid var(--red);
  font-family:var(--font-mono); font-size:10px; line-height:1.7; font-weight:600;
  text-transform:uppercase; letter-spacing:.04em;
  box-shadow:10px 10px 0 #00000030;
}
.hero-foot{
  position:absolute; z-index:2; bottom:30px;
  left:var(--pad-x); right:var(--pad-x);
  display:flex; align-items:center; gap:18px;
  color:var(--on-dark-3);
  font-family:var(--font-mono); font-size:10px; font-weight:500; line-height:1; letter-spacing:.13em;
}
.hero-foot .line{height:1px; background:#ffffff24; flex:1;}

@keyframes hero-line{
  from{clip-path:inset(0 0 108% 0); transform:translateY(.2em);}
  to{clip-path:inset(-30% -12% -30% -12%); transform:none;}
}
@keyframes hero-rise{from{opacity:0; transform:translateY(18px);}to{opacity:1; transform:none;}}
@keyframes hero-portrait{from{opacity:0; transform:translateY(24px) scale(.985);}to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:no-preference){
  html.js .hero .eyebrow{opacity:0; animation:hero-rise .8s var(--ease) .1s forwards;}
  html.js .hero h1>span{animation:hero-line 1s var(--ease) backwards;}
  html.js .hero h1>span:nth-child(1){animation-delay:.2s;}
  html.js .hero h1>span:nth-child(2){animation-delay:.31s;}
  html.js .hero h1>span:nth-child(3){animation-delay:.42s;}
  html.js .hero .lead{opacity:0; animation:hero-rise .85s var(--ease) .56s forwards;}
  html.js .hero-actions{opacity:0; animation:hero-rise .85s var(--ease) .66s forwards;}
  html.js .hero-portrait{opacity:0; animation:hero-portrait 1.1s var(--ease) .26s forwards;}
  html.js .hero-foot{opacity:0; animation:hero-rise .8s var(--ease) .9s forwards;}
  html.js .profile-hero .eyebrow{opacity:0; animation:hero-rise .8s var(--ease) .1s forwards;}
  html.js .profile-hero h1{opacity:0; animation:hero-rise .9s var(--ease) .22s forwards;}
  html.js .profile-hero-copy>p:last-child{opacity:0; animation:hero-rise .9s var(--ease) .36s forwards;}
}

/* ---------- Abschnittsmarke ---------- */
.section-index{
  grid-column:1/-1;
  display:flex; align-items:baseline; gap:18px;
  padding-bottom:26px; margin-bottom:56px;
  border-bottom:1px solid var(--hair-light);
}
.section-index>span{
  font-family:var(--font-display); font-weight:800; font-stretch:104%;
  font-size:clamp(31px,3.5vw,52px); line-height:.85; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.5px var(--red);
}
.section-index>b{
  font-family:var(--font-mono); font-weight:600;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-light-2);
}
.section-index.on-dark{border-color:var(--hair-dark);}
.section-index.on-dark>b{color:var(--on-dark-3);}

/* ---------- 01 Der Kanal ---------- */
.manifesto{display:grid; grid-template-columns:1.45fr .55fr; gap:0 8vw; padding:96px var(--pad-x) 118px;}
.manifesto h2,.projects h2,.transparency h2{
  margin:20px 0 0;
  font-size:clamp(42px,4.85vw,82px); font-stretch:103%;
  line-height:.92; letter-spacing:-.028em;
}
.values h2{
  margin:20px 0 0;
  font-size:clamp(38px,4.1vw,68px); font-stretch:103%;
  line-height:.94; letter-spacing:-.028em;
}
.manifesto-text{align-self:end; font-size:16.5px; line-height:1.72; padding-bottom:5px; max-width:460px;}
.manifesto-text p{color:var(--on-light-2);}
.manifesto-text .dropcap:first-letter{
  float:left; color:var(--red);
  font-family:var(--font-display); font-weight:800; font-stretch:112%;
  font-size:74px; line-height:.72; padding:10px 10px 0 0;
}

/* ---------- Das Prinzip SinansWoche ---------- */
.craft{padding:112px clamp(35px,5.4vw,104px) 104px;}
.craft-copy{display:flex; flex-direction:column; justify-content:center; max-width:780px;}

/* Vorher-Nachher: der sichtbare Beleg fuer "alles in Eigenregie". */
.glowup{margin:60px 0 0;}
.glowup-rahmen{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border:1px solid #ffffff1f; background:var(--ink-deep); touch-action:none;
}
.glowup-bild{display:block; width:100%; height:100%; object-fit:cover;}
.glowup-oben{position:absolute; inset:0; clip-path:inset(0 0 0 var(--pos));}
.glowup-linie{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:var(--red);}
.glowup-griff{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--red); border:2px solid #fff; box-shadow:0 6px 20px #00000059;
}
.glowup-griff::before,.glowup-griff::after{
  content:""; position:absolute; top:50%; width:0; height:0; margin-top:-5px;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.glowup-griff::before{left:11px; border-right:7px solid #fff;}
.glowup-griff::after{right:11px; border-left:7px solid #fff;}
.glowup-marke{
  position:absolute; bottom:16px; padding:7px 11px;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:#fff;
  background:#0f1011c4; border:1px solid #ffffff2b;
}
.glowup-links{left:16px;}
.glowup-rechts{right:16px;}
.glowup-regler{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0;
  opacity:0; cursor:ew-resize; background:transparent;
  -webkit-appearance:none; appearance:none;
}
.glowup-regler::-webkit-slider-thumb{-webkit-appearance:none; width:1px; height:100%;}
.glowup-regler::-moz-range-thumb{width:1px; height:100%; border:0; background:transparent;}
.glowup-rahmen:has(.glowup-regler:focus-visible){outline:2px solid #fff; outline-offset:3px;}
.glowup figcaption{margin-top:20px; max-width:780px; color:var(--on-dark-2); font-size:14.5px; line-height:1.68;}
.craft h2,.bio h2,.follow h2{
  margin:24px 0 34px;
  font-size:clamp(46px,5vw,88px); font-stretch:104%;
  line-height:.88; letter-spacing:-.03em;
}
.craft-copy>p:not(.kicker){color:var(--on-dark-2); line-height:1.72; max-width:650px;}
blockquote{
  margin:32px 0; padding:6px 0 6px 26px;
  border-left:4px solid var(--red);
  font-family:var(--font-display); font-weight:700; font-stretch:104%;
  font-size:clamp(20px,2vw,29px); line-height:1.34; letter-spacing:-.015em;
}
.stats{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair-dark); margin-top:28px;}
.stats div{position:relative; padding:26px 12px 0 0;}
.stats div::before{content:""; position:absolute; top:-2px; left:0; width:26px; height:3px; background:var(--red);}
.stats strong{
  display:block;
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(36px,3.5vw,52px); line-height:1; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.stats span{
  display:block; margin-top:11px; color:var(--on-dark-3);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em;
}

/* ---------- 02 Werte ---------- */
.values{display:grid; grid-template-columns:.85fr 1.15fr; gap:0 8vw; padding:96px var(--pad-x) 104px;}
.manifesto>*,.values>*,.transparency>*{min-width:0;}

/* Beleg statt Behauptung: Kennzahlen und echte Folgen im eigenen Stil.
   Ein YouTube-Screenshot waere fremdes Interface im eigenen Layout,
   nicht verlinkbar und fuer Suchmaschinen ein stummes Bild. */
.kanal-beleg{grid-column:1/-1; margin-top:74px;}
.kanal-zahlen{display:grid; grid-template-columns:repeat(3,1fr); max-width:720px; border-top:1px solid var(--hair-light);}
.kanal-zahlen div{position:relative; padding:26px 14px 0 0;}
.kanal-zahlen div::before{content:""; position:absolute; top:-2px; left:0; width:26px; height:3px; background:var(--red);}
.kanal-zahlen strong{
  display:block; font-family:var(--font-mono); font-weight:700;
  font-size:clamp(21px,2.4vw,34px); line-height:1; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.kanal-zahlen span{
  display:block; margin-top:11px; color:var(--on-light-2);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em;
}

.kanal-videos{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px); margin-top:52px;}
@media (max-width:359px){
  .kanal-zahlen{grid-template-columns:1fr;}
  .kanal-zahlen div{padding:20px 0 0;}
  .kanal-zahlen div:first-child{padding-top:26px;}
}
@media (max-width:860px){
  .kanal-videos{grid-template-columns:1fr; max-width:520px;}
  .kanal-video h3{font-size:18px;}
}
.kanal-video{display:flex; flex-direction:column;}
.kanal-video figure{position:relative; margin:0; overflow:hidden; background:var(--ink);}
.kanal-video img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .55s var(--ease);}
.kanal-video:hover img,.kanal-video:focus-visible img{transform:scale(1.045);}
.kanal-play{
  position:absolute; left:14px; bottom:14px; width:40px; height:40px;
  border-radius:50%; background:var(--red); display:grid; place-items:center;
  transition:background .3s var(--ease);
}
.kanal-play::before{
  content:""; margin-left:3px; width:0; height:0;
  border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.kanal-video:hover .kanal-play{background:var(--red-bright);}
.kanal-video h3{margin:17px 0 0; font-size:17px; font-stretch:104%; letter-spacing:-.02em; line-height:1.32; transition:color .25s var(--ease);}
.kanal-video:hover h3{color:var(--red);}
.kanal-video p{margin:7px 0 0; color:var(--on-light-2); font-size:14.5px; line-height:1.55;}
.values-intro>p:last-child{margin-top:28px; max-width:500px; color:var(--on-light-2); font-size:17px; line-height:1.68;}
.value-list article{
  position:relative;
  display:grid; grid-template-columns:52px .85fr 1.15fr; gap:26px; align-items:start;
  padding:34px 0;
  border-top:1px solid var(--hair-light);
  transition:padding-left .45s var(--ease);
}
.value-list article::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.value-list article:hover{padding-left:14px;}
.value-list article:hover::before{transform:scaleX(1);}
.value-list article>span{
  font-family:var(--font-display); font-weight:800; font-stretch:104%;
  font-size:23px; line-height:1; letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1.3px var(--red);
}
.value-list h3{margin:0; font-size:clamp(25px,2.3vw,37px); font-stretch:102%; line-height:1; letter-spacing:-.025em;}
.value-list p{margin:0; color:var(--on-light-2); line-height:1.65; font-size:16px;}
.gwup-note{
  grid-column:1/-1; margin-top:60px; padding-top:24px;
  border-top:1px solid var(--hair-light);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.07em; line-height:2;
  color:var(--on-light-2);
}
.gwup-note a{color:var(--red-deep); font-weight:700; white-space:nowrap;}
.gwup-note a:hover{text-decoration:underline; text-underline-offset:4px;}

/* ---------- 03 Entdecken (dunkler Auftakt) ---------- */
.nature{position:relative; overflow:hidden; min-height:620px; color:#fff;}
.nature-bg,.nature-overlay{position:absolute; inset:0; width:100%; height:100%;}
.nature-bg{object-fit:cover;}
.nature-overlay{
  /* Drei Lagen: von links abdunkeln (dort steht der Text), von unten
     abdunkeln (dort endet der Abschnitt) und eine flache Grundlage,
     damit auch die helle rechte Bildhaelfte nie den Text ueberstrahlt. */
  background:
    linear-gradient(90deg,#0d0e10f7 0%,#0d0e10e8 40%,#0d0e1099 64%,#0d0e102e 100%),
    linear-gradient(0deg,#0b0c0ecc,#0b0c0e00 52%),
    #0b0c0e1f;
}
.nature-content{
  position:relative; z-index:1; min-height:620px;
  padding:96px var(--pad-x) 104px;
  display:grid; grid-template-columns:1fr .8fr; gap:0 10vw; align-content:start;
}
.nature-content>div:nth-child(2){max-width:700px;}
.nature h2{
  margin:22px 0 34px;
  font-size:clamp(44px,4.65vw,84px); font-stretch:103%;
  line-height:.88; letter-spacing:-.03em;
}
.nature-content p:not(.kicker){max-width:570px; color:#d2d3d4; line-height:1.72;}
/* Kraeftigerer Knopf als der uebliche: mehr Hoehe, mehr Schrift, eigener Schatten. */
.nature-button{width:max-content; margin-top:38px; padding:21px 24px; min-width:236px;
  font-size:12px; letter-spacing:.09em; box-shadow:5px 5px 0 #0b0c0e59;}
.nature-button:hover{box-shadow:9px 9px 0 #0b0c0e59;}

/* ---------- 04 Projekte ---------- */
.projects{padding:96px var(--pad-x) 124px;}
.projects-title{display:grid; grid-template-columns:.5fr 1.5fr; align-items:start; margin-bottom:70px;}
.projects-title h2{margin:0;}
.project-grid{display:grid; grid-template-columns:1.16fr .92fr .92fr; gap:16px;}
.project-card{
  position:relative; overflow:hidden;
  min-height:580px; padding:30px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#dedbd4; color:#fff;
  isolation:isolate;
}
.project-card>img,.podcast-cover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
.project-card:hover>img,.project-card:hover .podcast-cover{transform:scale(1.045);}
.music-card>img{object-position:55% 38%; filter:brightness(.38) saturate(.72);}
.podcast-cover{object-position:center; filter:brightness(.43) saturate(.8);}
.sport-card>img{object-position:center 20%; filter:brightness(.43) saturate(.65);}
.project-card::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg,#0d0e11f5 0%,#0d0e1140 70%);
  transition:opacity .5s var(--ease);
}
.project-card:hover::after{opacity:.86;}
.project-card>div,.project-card>.card-no{position:relative; z-index:1;}
.project-card h3{margin:0 0 14px; font-size:clamp(31px,2.8vw,48px); font-stretch:102%; line-height:.94; letter-spacing:-.03em;}
.project-card p{margin:0; line-height:1.68; font-size:15px; color:#c9cbcd;}
.card-no{
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.13em; color:#fff;
  transition:color .3s var(--ease);
}
.project-card:hover .card-no{color:var(--red-bright);}
.link-stack{display:flex; flex-direction:column; align-items:flex-start; margin-top:22px;}
.link-stack a{
  position:relative; width:100%; padding:11px 0;
  border-bottom:1px solid #ffffff42;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  transition:padding-left .35s var(--ease), color .3s var(--ease);
}
.link-stack a:hover{padding-left:10px; color:var(--red-bright);}
.podcast-card .text-link,.sport-card .text-link{margin-top:20px;}

/* ---------- 05 Sport ---------- */
.sport-feature{padding:96px var(--pad-x) 96px; overflow:hidden;}
.sport-story{display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; margin-bottom:70px;}
.sport-feature h2{
  margin:22px 0 0;
  font-size:clamp(46px,5.2vw,92px); font-stretch:104%;
  line-height:.88; letter-spacing:-.03em;
}
.sport-text{max-width:650px;}
.sport-text>p{color:#c2c4c6; font-size:16.5px; line-height:1.72;}
.sport-tags{display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 24px;}
.sport-tags span{
  padding:9px 12px; border:1px solid #ffffff33; color:#d7d8d9;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
}
.sport-club-link{color:#fff;}
.sport-gallery{display:grid; grid-template-columns:1.05fr .75fr .8fr; grid-template-rows:250px 350px; gap:12px;}
.sport-shot{position:relative; margin:0; overflow:hidden; background:#282a2d;}
.sport-shot::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px #00000038; pointer-events:none;}
.sport-shot img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.8) contrast(1.05);
  transition:transform .7s var(--ease), filter .6s var(--ease);
}
.sport-shot:hover img{transform:scale(1.045); filter:saturate(1) contrast(1.05);}
.sport-shot-1{grid-row:1/3;}
.sport-shot-1 img{object-position:center 38%;}
.sport-shot-2{grid-column:2/4;}
.sport-shot-2 img{object-position:center 25%;}
.sport-shot-3 img{object-position:center 18%;}
.sport-shot-4 img{object-position:center 22%;}
.sport-footnote{
  display:flex; align-items:center; gap:14px; margin:24px 0 0;
  color:var(--on-dark-3);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
}
.sport-footnote::before{content:""; width:32px; height:3px; background:var(--red);}

/* ---------- Sinan Kurtulus ---------- */
.bio{display:grid; grid-template-columns:1.05fr .95fr; min-height:900px;}
.bio-images{position:relative; overflow:hidden; min-height:800px;}
.bio-wide{width:100%; height:100%; object-fit:cover; object-position:47% center; filter:brightness(.74) saturate(.75);}
.bio-small{
  position:absolute; z-index:1; left:45px; bottom:45px; width:290px; height:auto;
  border:9px solid var(--paper); transform:rotate(-2deg);
  box-shadow:0 22px 50px #00000059;
}
.bio-images>span{
  position:absolute; z-index:1; left:315px; bottom:42px; padding:8px 11px;
  background:var(--red);
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.04em;
}
.bio-copy{padding:104px clamp(35px,7vw,125px);}
.bio-copy>p:not(.kicker){color:var(--on-dark-2); max-width:570px; font-size:17px; line-height:1.65;}

/* Zeitleiste mit durchgehender Schiene statt Haarlinie pro Zeile */
.timeline{position:relative; margin-top:46px; padding-left:26px;}
.timeline::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:1px;
  background:linear-gradient(180deg,#ffffff4d,#ffffff12);
}
.timeline div{position:relative; display:grid; grid-template-columns:96px 1fr; gap:0 16px; padding:15px 0;}
.timeline div::before{
  content:""; position:absolute; left:-29px; top:21px; width:7px; height:7px;
  background:var(--red);
}
.timeline b{
  color:var(--red-bright);
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.timeline p{margin:0; color:#a9abad; line-height:1.6; font-size:13.5px;}
.bio-button{width:max-content; margin-top:36px;}

/* ---------- Transparenz ---------- */
.transparency{display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; padding:114px var(--pad-x);}
.transparency>div:last-child{align-self:end; color:var(--on-light-2); line-height:1.72; max-width:500px; font-size:16.5px;}
.support-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;}
.support-actions .button{margin-top:0;}

/* Bankverbindung eingeklappt: der Regelweg ist PayPal, die Ueberweisung
   soll erreichbar sein, ohne den Abschnitt zu beschweren. */
.bankdaten{margin-top:26px; border-top:1px solid var(--hair-light);}
.bankdaten summary{
  list-style:none; cursor:pointer; padding:16px 0 0;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--on-light-2);
  transition:color .25s var(--ease);
}
.bankdaten summary::-webkit-details-marker{display:none;}
.bankdaten summary:hover{color:var(--ink);}
.bankdaten summary>span{display:inline-block; width:14px; color:var(--red); font-weight:700;}
.bankdaten[open] summary>span{transform:rotate(45deg);}
.bankdaten-feld{display:grid; gap:14px; padding:18px 0 4px;}
.bankdaten-feld span{
  display:block; color:var(--on-light-2);
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.09em;
}
.bankdaten-feld strong{display:block; margin-top:4px; font-size:16px; letter-spacing:-.01em;}
.bankdaten-feld .iban{font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; overflow-wrap:break-word;}

/* ---------- Folgen ---------- */
.follow{padding:114px var(--pad-x);}
.follow h2{font-size:clamp(54px,6.8vw,116px);}
.social-grid{display:grid; grid-template-columns:repeat(2,1fr); margin-top:70px;}
.social-grid a{
  position:relative; min-height:128px; padding:28px 0;
  border-top:1px solid #ffffff32;
  display:grid; grid-template-columns:1fr auto; align-items:center;
  font-family:var(--font-display); font-weight:800; font-stretch:106%;
  font-size:clamp(23px,2.85vw,42px); letter-spacing:-.03em;
  transition:padding-left .45s var(--ease);
}
.social-grid a::before{
  content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.social-grid a:nth-child(odd){padding-right:35px;}
.social-grid a:nth-child(even){padding-left:35px; border-left:1px solid #ffffff32;}
.social-grid a:hover{padding-left:52px;}
.social-grid a:nth-child(odd):hover{padding-left:17px;}
.social-grid a:hover::before{transform:scaleX(1);}
.social-grid a>span:last-child{transition:transform .4s var(--ease);}
.social-grid a:hover>span:last-child{transform:translate(5px,-5px);}
.social-grid small{
  grid-column:1; margin-top:4px; color:var(--on-dark-3);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
}
.social-grid a:hover>span:first-child{color:var(--red-bright);}

/* ---------- Fußzeile ---------- */
footer{
  background:var(--ink-deep); color:#fff;
  padding:84px var(--pad-x) 32px;
  display:grid; grid-template-columns:.3fr .7fr; gap:7vw;
}
.footer-brand p{
  margin-top:26px; color:#7d8083;
  font-family:var(--font-mono); font-size:11px; line-height:1.9;
  text-transform:uppercase; letter-spacing:.07em;
}
.footer-bottom{
  grid-column:1/-1; display:flex; gap:30px; justify-content:space-between;
  border-top:1px solid #ffffff24; margin-top:44px; padding-top:26px;
  color:#7b7e81;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.08em;
}
.footer-bottom a:hover{color:#fff;}
.compact-footer{grid-template-columns:.55fr .45fr; padding-top:70px;}
.footer-claim{max-width:560px; justify-self:end; color:#9d9fa2; font-size:14.5px; line-height:1.75;}
.footer-claim .kicker{margin-bottom:16px;}
.footer-claim .text-link{color:#fff;}

/* ---------- Unterseiten ---------- */
.subpage{background:var(--ink);}
.profile-hero{
  position:relative; overflow:hidden;
  min-height:clamp(720px,90svh,940px);
  display:flex; align-items:flex-end;
  padding:calc(var(--nav-h) + 70px) var(--pad-x) 92px;
}
.profile-hero>img,.profile-hero-overlay{position:absolute; inset:0; width:100%; height:100%;}
.profile-hero>img{object-fit:cover; object-position:64% 42%;}
.profile-hero-overlay{
  background:
    linear-gradient(90deg,#111214f5 0%,#111214b5 42%,#1112141a 76%),
    linear-gradient(0deg,#111214b5,transparent 52%);
}
.profile-hero-copy{position:relative; z-index:1; max-width:800px;}
.profile-hero h1{margin:26px 0 24px; font-size:clamp(58px,7.8vw,142px); font-stretch:104%; line-height:.86;}
.profile-hero h1 em{color:var(--red); font-style:normal;}
.profile-hero-copy>p:last-child{max-width:560px; color:#dcdddf; font-size:19px; line-height:1.62;}

.profile-intro{padding:96px var(--pad-x) 118px; display:grid; grid-template-columns:1fr 1.1fr; gap:0 8vw;}
.profile-intro>*,.profile-career>*{min-width:0;}
.profile-career-title h2{
  margin:22px 0 0;
  font-size:clamp(38px,4.5vw,76px); font-stretch:103%;
  line-height:.94; letter-spacing:-.028em;
}
/* Langer Satz als Headline: Groesse folgt der Textlaenge, nicht dem Maximum. */
.profile-intro-heading h2{
  margin:22px 0 0;
  font-size:clamp(31px,3.5vw,56px); font-stretch:102%;
  line-height:1; letter-spacing:-.025em;
}
.profile-prose{padding-top:8px; color:var(--on-light-2); font-size:17px; line-height:1.78; max-width:760px;}
.profile-prose p:first-child{color:var(--on-light-1); font-size:20px; line-height:1.62;}

.profile-statement{display:grid; grid-template-columns:1fr 1fr; min-height:880px;}
.profile-statement-image{position:relative; min-height:760px; overflow:hidden;}
.profile-statement-image img{width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.03);}
.profile-statement-copy{padding:104px clamp(34px,7vw,125px); align-self:center;}
.profile-statement-copy h2,.profile-gallery-copy h2{
  margin:24px 0 32px;
  font-size:clamp(42px,4.8vw,82px); font-stretch:103%;
  line-height:.9; letter-spacing:-.03em;
}
.profile-statement-copy>p:not(.kicker),.profile-gallery-copy>p:not(.kicker){color:var(--on-dark-2); font-size:16.5px; line-height:1.74;}

.profile-career{padding:96px var(--pad-x) 124px; display:grid; grid-template-columns:.72fr 1.28fr; gap:0 8vw;}
.profile-career-list{position:relative; padding-left:26px;}
.profile-career-list::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:1px;
  background:linear-gradient(180deg,#191a1c4d,#191a1c12);
}
.profile-career-list article{
  position:relative; display:grid; grid-template-columns:126px 1fr; gap:0 24px;
  padding:26px 0; border-top:0;
  transition:padding-left .45s var(--ease);
}
.profile-career-list article::before{
  content:""; position:absolute; left:-29px; top:33px; width:7px; height:7px; background:var(--red);
}
.profile-career-list article:hover{padding-left:10px;}
.profile-career-list article>b{
  color:var(--red-deep);
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
}
.profile-career-list h3{margin:0 0 10px; font-size:clamp(22px,1.95vw,31px); font-stretch:102%; letter-spacing:-.025em;}
.profile-career-list p{margin:0; color:var(--on-light-2); font-size:15px; line-height:1.68;}

.profile-gallery{display:grid; grid-template-columns:.8fr 1.2fr; min-height:800px;}
.profile-gallery>div:first-child{position:relative; overflow:hidden;}
.profile-gallery>div:first-child img{width:100%; height:100%; object-fit:cover; object-position:center 28%; filter:saturate(.82);}
.profile-gallery-copy{padding:104px clamp(35px,8vw,150px); align-self:center;}
.profile-gallery-copy .button{margin-top:36px; width:max-content;}

.profile-stoicism{
  display:grid; grid-template-columns:1.14fr .86fr;
  min-height:940px;
}
.profile-stoicism-copy{
  min-width:0; align-self:center;
  padding:96px clamp(34px,7vw,125px) 110px var(--pad-x);
}
.profile-stoicism .section-index{margin-bottom:58px;}
.profile-stoicism h2{
  margin:24px 0 38px;
  color:var(--on-light-1);
  font-size:clamp(48px,6vw,104px); font-stretch:104%;
  line-height:.88; letter-spacing:-.032em;
}
.profile-stoicism-prose{max-width:800px;}
.profile-stoicism-prose p{
  margin:0 0 22px;
  color:var(--on-light-2); font-size:16.5px; line-height:1.78;
}
.profile-stoicism-prose p:first-child{
  color:var(--on-light-1); font-size:20px; line-height:1.62;
}
.profile-stoicism-prose p:last-child{margin-bottom:0;}
.profile-stoicism-image{
  position:relative; min-height:760px; overflow:hidden; margin:0;
  background:var(--ink-deep);
}
.profile-stoicism-image::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 62%,#0f10114d 100%);
}
.profile-stoicism-image img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  filter:saturate(.82) contrast(1.03);
}
.profile-stoicism-image figcaption{
  position:absolute; right:0; bottom:54px; z-index:1;
  max-width:calc(100% - 42px); padding:18px 24px 18px 30px;
  border-left:5px solid var(--red); background:var(--paper); color:var(--ink);
  box-shadow:-8px 8px 0 #00000024;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  line-height:1.5; text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- Rechtliche Seiten ---------- */
.legal-page-content{
  min-height:calc(100vh - 220px);
  padding:calc(var(--nav-h) + 78px) clamp(24px,8vw,150px) 120px;
  display:grid; grid-template-columns:.65fr 1.35fr; gap:0 9vw;
}
.legal-page-content>.section-index{grid-column:1/-1;}
.legal-page-content>.section-index>span{
  align-self:center;
  font-family:var(--font-mono); font-weight:600; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  -webkit-text-stroke:0; color:var(--red-deep);
}

/* Rechtstexte starten direkt auf Papier: Kopfzeile bleibt hier immer deckend. */
.legal-page .topbar{
  background:#0f1011e0;
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:#ffffff1f;
}
@media (prefers-reduced-transparency:reduce){
  .legal-page .topbar{background:var(--ink-deep); backdrop-filter:none; -webkit-backdrop-filter:none;}
}
.legal-page-intro{position:sticky; top:calc(var(--nav-h) + 26px); align-self:start;}
.legal-page-intro h1{
  color:var(--ink); margin:22px 0 28px;
  font-size:clamp(40px,4.7vw,78px); font-stretch:103%;
  line-height:.94; letter-spacing:-.028em; hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;
}
.legal-page-intro>p:last-child{color:var(--on-light-2); max-width:480px; font-size:16px; line-height:1.72;}
.privacy-content article,.imprint-content article{padding:30px 0; border-top:1px solid var(--hair-light);}
.privacy-content h2,.imprint-content h2{margin-bottom:14px; font-size:19px; font-stretch:104%; letter-spacing:-.02em;}
.privacy-content p,.imprint-content p{max-width:780px; color:var(--on-light-2); font-size:14.5px; line-height:1.78;}
.privacy-content a,.imprint-content a{text-decoration:underline; text-underline-offset:3px;}
.privacy-content a:hover,.imprint-content a:hover{color:var(--red-deep);}
.privacy-link{color:var(--on-light-1); font-weight:700;}
.privacy-date{
  margin-top:34px; color:#82868a;
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
}
.impressum-page-content{min-height:800px;}

/* ============================================================
   Breakpoints
   ============================================================ */
@media (max-width:1000px){
  .topbar{grid-template-columns:1fr auto;} nav{display:none;}
  .nav-actions,.topbar>.nav-cta{display:none;}
  .mobile-menu{display:block; justify-self:end; position:relative;}
  /* Knopf und Klappfeld sind immer dunkel. Die Schriftfarbe muss deshalb
     fest hell sein und darf nicht von der Seite geerbt werden: auf hellen
     Seiten wie der Projektuebersicht steht sonst dunkle Schrift auf
     dunklem Grund und ist praktisch unlesbar. */
  .mobile-menu summary{
    list-style:none; cursor:pointer; color:#f4f2ed;
    border:1px solid #ffffff45; padding:10px 13px;
    font-family:var(--font-mono); font-size:10px; font-weight:600;
    text-transform:uppercase; letter-spacing:.1em;
  }
  .mobile-menu summary::-webkit-details-marker{display:none;}
  .mobile-menu div{
    position:absolute; right:0; top:44px; width:216px; padding:8px 20px;
    background:#111214f2;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border:1px solid #ffffff30;
    display:flex; flex-direction:column;
  }
  .mobile-menu div a{
    padding:14px 0; color:#f4f2ed; border-bottom:1px solid #ffffff1f;
    font-family:var(--font-mono); font-size:10.5px; font-weight:600;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .mobile-menu div a:last-child{border-bottom:0;}
  .hero{grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 42px);}
  .hero-copy{padding-top:20px; padding-bottom:400px;}
  .hero-portrait{position:absolute; bottom:55px; right:-12px; opacity:.92;}
  .portrait-frame{width:440px;}
  .manifesto,.values,.transparency{grid-template-columns:minmax(0,1fr); gap:55px;}
  .bio{grid-template-columns:1fr;}
  .bio-images{height:680px; min-height:0;}
  .sport-story{grid-template-columns:1fr; gap:35px;}
  .project-grid{grid-template-columns:1fr 1fr;} .sport-card{grid-column:1/-1;}
  .projects-title{grid-template-columns:1fr; gap:20px;}
  .nature-content{grid-template-columns:1fr;}
  /* Hier steht der Text ueber die volle Breite, also auch rechts abdunkeln. */
  .nature-overlay{background:
    linear-gradient(90deg,#0d0e10f2 0%,#0d0e10e0 55%,#0d0e10cf 100%),
    linear-gradient(0deg,#0b0c0ed9,#0b0c0e00 58%),
    #0b0c0e42;}
  footer{grid-template-columns:1fr;}
  .profile-intro,.profile-career,.legal-page-content{grid-template-columns:1fr; gap:55px;}
  .profile-statement,.profile-gallery{grid-template-columns:1fr;}
  .profile-stoicism{grid-template-columns:1fr;}
  .profile-stoicism-image{height:760px; min-height:0;}
  .profile-statement-image{height:680px; min-height:0;}
  .profile-gallery>div:first-child{height:720px;}
  .legal-page-intro{position:static;}
  .compact-footer .footer-claim{justify-self:start;}
}

@media (max-width:650px){
  :root{--nav-h:64px; --pad-x:20px;}
  .topbar{height:var(--nav-h);}

  /* Genau ein Bildschirm. Der Text bekommt, was er braucht, das Portraet
     den Rest und wird unten beschnitten. So sieht man immer das Gesicht,
     und der Anschnitt wirkt gewollt statt abgehackt. */
  .hero{
    padding:calc(var(--nav-h) + 26px) 20px 0;
    height:100svh; min-height:0;
    display:flex; flex-direction:column;
  }
  .eyebrow{display:block; position:relative; max-width:100%; padding-left:42px; font-size:10px; line-height:1.75;}
  .eyebrow>span{position:absolute; left:0; top:.72em;}
  h1{max-width:100%; font-size:clamp(30px,10.8vw,50px); line-height:.96; letter-spacing:-.025em;}
  .lead{max-width:100%; font-size:15.5px;}
  .hero-actions{flex-direction:column; width:min(230px,100%);}
  .hero-copy{flex:0 0 auto; padding-top:16px; padding-bottom:6px;}
  .hero-portrait{
    position:relative; right:auto; bottom:auto; margin:0;
    flex:1 1 auto; min-height:0; align-items:flex-start; justify-content:flex-end;
  }
  .portrait-frame{width:min(calc(100vw - 24px),410px); height:100%; aspect-ratio:auto;}
  .portrait-frame img{object-fit:contain; object-position:center bottom;}

  /* Die Notiz ist 64px hoch und lag bei knappem Platz mitten im Gesicht.
     Dieselbe Aussage steht weiter unten im Abschnitt "Ein Werk". */
  .portrait-note{display:none;}

  /* Auf kurzen Bildschirmen bleibt fuer das Portraet zu wenig uebrig.
     Dort traegt die Typografie den Auftakt allein. */
  @media (max-height:730px){
    .hero{height:auto; min-height:100svh;}
    .hero-portrait{display:none;}
    .hero-copy{padding-bottom:0;}
  }
  .portrait-note{right:12px; bottom:20px; box-shadow:6px 6px 0 #00000030;}
  .hero-foot{display:none;}

  .section-index{gap:14px; padding-bottom:20px; margin-bottom:38px;}
  .section-index>span{font-size:30px;}
  .manifesto,.values,.projects,.transparency,.follow{padding:70px 20px;}
  .manifesto h2,.values h2,.projects h2{font-size:clamp(34px,10.5vw,43px);}
  .transparency h2{font-size:clamp(27px,8vw,38px); overflow-wrap:normal; word-break:normal;}
  .manifesto-text .dropcap:first-letter{font-size:60px;}
  .craft{padding:70px 20px;}
  .craft-copy,.bio-copy{min-width:0;}
  .bio-copy{padding:70px 20px;}
  .craft h2,.bio h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .glowup{margin-top:42px;}
  .glowup-griff{width:38px; height:38px;}
  .glowup-griff::before{left:7px;}
  .glowup-griff::after{right:7px;}
  .glowup-marke{bottom:10px; padding:5px 8px; font-size:8.5px; letter-spacing:.07em;}
  .glowup-links{left:10px;}
  .glowup-rechts{right:10px;}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));}
  .stats strong{font-size:30px;}
  .stats span{hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word; font-size:9.5px; letter-spacing:.06em;}
  .value-list article{grid-template-columns:38px minmax(0,1fr); gap:14px;}
  .value-list h3,.value-list p{hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .value-list p{grid-column:2;}
  .nature,.nature-content{min-height:0;}
  .nature-content{padding:70px 20px 78px;}
  .nature h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .project-grid{grid-template-columns:1fr;} .sport-card{grid-column:auto;}
  .project-card{min-height:520px; padding:26px;}
  .project-card h3{font-size:clamp(30px,9.2vw,40px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .sport-feature{padding:70px 20px;}
  .sport-feature h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .sport-gallery{grid-template-columns:1fr 1fr; grid-template-rows:390px 240px 280px;}
  .sport-shot-1{grid-row:1; grid-column:1/3;}
  .sport-shot-2{grid-column:1/3; grid-row:2;}
  .sport-shot-3{grid-column:1; grid-row:3;}
  .sport-shot-4{grid-column:2; grid-row:3;}
  .sport-club-link{line-height:1.6;}
  .bio-images{height:560px;} .bio-wide{object-position:center;}
  .bio-small{width:190px; left:20px; bottom:20px;}
  .bio-images>span{left:190px; bottom:17px;}
  .timeline{padding-left:22px;}
  .timeline div{grid-template-columns:80px 1fr;}
  .timeline div::before{left:-25px;}
  .text-link{max-width:100%; gap:14px; line-height:1.6; white-space:normal;}
  .social-grid{grid-template-columns:1fr;}
  .social-grid a:nth-child(n){padding:24px 0; border-left:0;}
  .social-grid a:hover,.social-grid a:nth-child(odd):hover{padding-left:14px;}
  .follow h2{font-size:clamp(32px,11vw,50px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .footer-bottom{flex-direction:column; gap:12px;}
  .compact-footer{grid-template-columns:minmax(0,1fr); padding:60px 20px 26px; gap:35px;}
  .compact-footer>*{min-width:0;}

  .profile-hero{min-height:720px; padding:calc(var(--nav-h) + 44px) 20px 56px; align-items:flex-end;}
  .profile-hero>img{object-position:62% center;}
  .profile-hero-overlay{background:linear-gradient(0deg,#111214f5 0%,#11121496 58%,#1112141c 100%);}
  .profile-hero h1{max-width:100%; font-size:clamp(44px,13vw,58px); letter-spacing:-.03em;}
  .profile-hero-copy>p:last-child{font-size:16px;}
  .profile-intro,.profile-career{padding:70px 20px;}
  .profile-career-title h2{font-size:clamp(32px,10.5vw,46px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .profile-intro-heading h2{font-size:clamp(27px,8.4vw,38px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .profile-prose{font-size:16px;}
  .profile-prose p:first-child{font-size:18px;}
  .profile-statement-image{height:480px;}
  .profile-statement-copy,.profile-gallery-copy{padding:70px 20px;}
  .profile-statement-copy h2,.profile-gallery-copy h2{font-size:clamp(32px,10.5vw,48px); hyphens:manual; -webkit-hyphens:manual; overflow-wrap:break-word;}
  .profile-career-list{padding-left:22px;}
  .profile-career-list article{grid-template-columns:1fr; gap:10px;}
  .profile-career-list article::before{left:-25px; top:30px;}
  .profile-gallery>div:first-child{height:560px;}
  .profile-stoicism-copy{padding:70px 20px 78px;}
  .profile-stoicism .section-index{margin-bottom:42px;}
  .profile-stoicism h2{font-size:clamp(38px,11vw,50px); overflow-wrap:normal;}
  .profile-stoicism-prose p{font-size:16px; line-height:1.72;}
  .profile-stoicism-prose p:first-child{font-size:18px;}
  .profile-stoicism-image{height:570px;}
  .profile-stoicism-image figcaption{right:0; bottom:24px; max-width:calc(100% - 28px);}
  .legal-page-content{padding:calc(var(--nav-h) + 46px) 20px 70px; gap:45px;}
  .legal-page-intro h1{font-size:clamp(36px,11.5vw,52px);}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js [data-rv]{opacity:1; transform:none; transition:none;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Druck ---------- */
@media print{
  body{background:#fff; color:#000;}
  body::after,.read-progress,.topbar,.hero-grid,.nature-overlay{display:none !important;}
  .dark-section,.nature,footer{background:#fff !important; color:#000 !important;}
  h1,h2,h3{page-break-after:avoid;}
  a[href^="http"]::after{content:" (" attr(href) ")"; font-size:9px; word-break:break-all;}
}