/* edwarddonmez.com: Farben und Schriften wie im Media Kit, alles lokal gehostet */
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Big Shoulders";font-weight:800;font-display:swap;src:url(/fonts/big-shoulders-display-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Hanken";font-weight:400;font-display:swap;src:url(/fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Hanken";font-weight:400;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Hanken";font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:"Hanken";font-weight:600;font-display:swap;src:url(/fonts/hanken-grotesk-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-024F,U+1E00-1EFF}
@font-face{font-family:"Instrument";font-style:italic;font-display:swap;src:url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2")}

:root{
  --canvas:#E8EAE8;
  --paper:#F4F5F3;
  --ink:#1C2326;
  --ink-2:#262E32;
  --muted:#5E676B;
  --on-dark:#E6E9E7;
  --on-dark-muted:#A9B1B4;
  --red:#B0242C;
  --red-dark:#8E1C23;
  --hair:rgba(28,35,38,.16);
  --hair-dark:rgba(230,233,231,.16);
  --display:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --text:"Hanken",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument",Georgia,serif;
  --pad:clamp(1rem,5vw,3rem);
  --max:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 1.0625rem/1.6 var(--text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:.95;letter-spacing:.01em;margin:0}
p{margin:0 0 1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--on-dark);padding:.75rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Kopfleiste */
.bar{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:1rem var(--pad);color:var(--on-dark)}
.bar--solid{position:static;background:var(--ink)}
.bar__name{font:800 1.25rem/1 var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.bar nav{display:flex;gap:1.25rem;font-weight:600;font-size:.9375rem}
.bar nav a{text-decoration:none;padding:.5rem 0}
.bar nav a:hover{text-decoration:underline}

/* Kopf mit Foto */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;background:var(--ink);color:var(--on-dark);overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,35,38,.55) 0%,rgba(28,35,38,0) 25%,rgba(28,35,38,0) 45%,rgba(28,35,38,.92) 82%)}
.hero__body{min-width:0;position:relative;z-index:1;padding:0 var(--pad) 2.5rem;max-width:var(--max);margin:0 auto;width:100%}
.hero__kicker{font:italic 1.375rem/1.2 var(--serif);color:var(--on-dark-muted);margin:0 0 .5rem}
.hero h1{font-size:clamp(3.75rem,19vw,10rem)}
.hero__roles{font-weight:600;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;margin:1rem 0 1.5rem}
.hero__roles span{color:var(--red);padding:0 .1em}

/* Desktop: Text links, Foto rechts mit Edward und Feuer im Bild */
@media (min-width:48rem){
  .hero__img{inset:0 0 0 auto;width:62%;object-position:50% 52%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
  .hero::after{background:linear-gradient(180deg,rgba(28,35,38,.5) 0%,rgba(28,35,38,0) 22%,rgba(28,35,38,0) 55%,rgba(28,35,38,.9) 90%)}
  .hero h1{font-size:clamp(3.75rem,9vw,8.5rem)}
}

/* Handy: Name oben, Bild mit Gesicht frei, Knöpfe und Zahlen darunter */
@media (max-width:47.99rem){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:4.5rem}
  .hero::after{display:none}
  .hero__body{display:contents}
  .hero__body>*{padding-left:var(--pad);padding-right:var(--pad)}
  .hero__img{position:relative;order:1;height:auto;aspect-ratio:4/5;object-position:55% 46%;margin-top:-2.5rem;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 82%,transparent 100%)}
  .hero__roles{margin-bottom:0;position:relative;z-index:1}
  .hero h1{position:relative;z-index:1}
  .hero .btns{order:2;margin-top:-1.5rem;position:relative}
  .stats{order:2;margin:1.75rem var(--pad) 2.5rem;padding-left:0;padding-right:0}
  .stat b{font-size:1.75rem}
}

/* Knöpfe */
.btns{display:flex;flex-wrap:wrap;gap:.625rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:3rem;padding:.75rem 1.125rem;border-radius:.375rem;border:1px solid currentColor;font-weight:600;font-size:1rem;text-decoration:none;background:transparent;color:inherit;cursor:pointer}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn:not(.btn--red):hover{background:rgba(255,255,255,.08)}
.btn small{font-weight:400;opacity:.75}
.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.5rem;margin-top:1.75rem;padding-top:1.25rem;border-top:1px solid var(--hair-dark)}
.stat{margin:0}
.stat b{display:block;font:800 2rem/1 var(--display)}
@media (min-width:48rem){.stats{grid-template-columns:repeat(4,auto);justify-content:start;gap:2.5rem}}
.stat span{font-size:.875rem;color:var(--on-dark-muted)}

/* Bereiche */
.section{padding:clamp(3.5rem,10vw,6.5rem) 0}
.section--dark{background:var(--ink);color:var(--on-dark)}
.section--paper{background:var(--paper)}
.eyebrow{display:block;font-weight:600;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.75rem}
.section--dark .eyebrow{color:#E0565D}
.section h2{font-size:clamp(2.75rem,12vw,5.5rem);margin-bottom:1.25rem}
.lead{font-size:1.1875rem;max-width:38rem}
.muted{color:var(--muted)}
.section--dark .muted{color:var(--on-dark-muted)}

.split{display:grid;gap:2rem}
@media (min-width:48rem){.split{grid-template-columns:1fr 1fr;align-items:center;gap:3.5rem}}

/* Ring */
.ring{position:relative;overflow:hidden}
.ring__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;filter:grayscale(1)}
.ring .wrap{position:relative}
.ring__pics{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:1fr 1fr;gap:.625rem}
.ring__pics img{width:100%;height:100%;object-fit:cover;border-radius:.375rem}
.ring__pics img:first-child{grid-row:span 2;aspect-ratio:3/5}

/* Platzhalter: nur in der Vorschau, vor dem Livegang ersetzen (test_website.py --live) */
.platzhalter{border:2px dashed var(--red);border-radius:.375rem;padding:1rem 1.125rem;background:rgba(176,36,44,.06);font-size:.9375rem}
.platzhalter::before{content:"Platzhalter";display:block;font-weight:600;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:.25rem}
.section--dark .platzhalter{background:rgba(224,86,93,.08);border-color:#E0565D}
.section--dark .platzhalter::before{color:#E0565D}

/* Film */
.film{position:relative;overflow:hidden}
.film__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.film::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--ink) 0%,rgba(28,35,38,.6) 35%,var(--ink) 100%)}
.film .wrap{position:relative;z-index:2}
.episodes{display:grid;grid-auto-flow:column;grid-auto-columns:56%;gap:.75rem;margin:2rem calc(-1*var(--pad));padding:0 var(--pad) .75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.ep{scroll-snap-align:start}
@media (min-width:48rem){.episodes{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));margin:2rem 0;padding:0;overflow:visible}}
.ep{background:var(--ink-2);border:1px solid var(--hair-dark);border-radius:.375rem;overflow:hidden}
.ep__frame{aspect-ratio:9/16;display:grid;place-items:center;position:relative;background:#11171A}
.ep__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ep__play{appearance:none;border:0;background:none;color:var(--on-dark);display:grid;place-items:center;gap:.5rem;width:100%;height:100%;font:600 .875rem var(--text);cursor:pointer}
.ep__play[disabled]{cursor:default;color:var(--on-dark-muted)}
.ep__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ep__play svg{width:3.5rem;height:3.5rem;position:relative;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.ep__meta{padding:.875rem 1rem}
.ep__meta h3{font-size:1.375rem;margin-bottom:.25rem}
.ep__meta p{margin:0;font-size:.875rem;color:var(--on-dark-muted)}
.note{font-size:.875rem;color:var(--on-dark-muted);margin-top:1rem}

/* Style: Bildstrecke */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:72%;gap:.625rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) .75rem;margin-top:2rem;scrollbar-width:thin}
.strip figure{margin:0;scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.375rem}
@media (min-width:48rem){.strip{grid-auto-columns:calc((100% - 3*.625rem - 2*var(--pad))/4)}}
@media (min-width:80rem){.strip{max-width:var(--max);margin-left:auto;margin-right:auto}}

/* Presse */
.press{display:block;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);padding:1.5rem 0;max-width:42rem}
.press__src{font-weight:600;font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.press__title{font:italic 1.75rem/1.2 var(--serif);margin:.5rem 0}

/* Kooperationen */
.mail{font:800 clamp(1.5rem,7vw,2.75rem)/1.1 var(--display);text-transform:lowercase;word-break:break-all;color:var(--red);text-decoration:none}
.mail:hover{text-decoration:underline}

/* Fuß */
.foot{background:var(--ink);color:var(--on-dark-muted);padding:2.5rem 0;font-size:.9375rem}
.foot .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.foot a{color:var(--on-dark);text-decoration:none;padding:.375rem 0}
.foot a:hover{text-decoration:underline}

/* Textseiten: Impressum, Datenschutz */
.doc{padding:3rem 0 4rem}
.doc .wrap{max-width:46rem}
.doc h1{font-size:clamp(2.75rem,12vw,4.5rem);margin-bottom:2rem}
.doc h2{font-size:1.75rem;margin:2.25rem 0 .75rem}
.doc h3{font:600 1.0625rem/1.4 var(--text);text-transform:none;margin:1.5rem 0 .5rem}
.doc address{font-style:normal;margin-bottom:1rem}
.doc ul{padding-left:1.25rem;margin:0 0 1rem}

/* Link-Seite */
.links-page{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;color:var(--on-dark);background:var(--ink)}
.links-page::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,30rem);aspect-ratio:2/3;background:url(/img/kopf-960.webp) 50% 0/100% auto no-repeat;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 95%),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 55%,transparent 95%),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.links-page>*{position:relative}
.links-page main{flex:1;width:100%;max-width:28rem;margin:0 auto;padding:min(28rem,92vw) 1rem 2rem;text-align:center}
.links-page .avatar{display:none}
.avatar{width:7.5rem;height:7.5rem;border-radius:50%;object-fit:cover;object-position:50% 20%;margin:0 auto 1rem;border:2px solid var(--red)}
.links-page h1{font-size:2.75rem}
.links-page .roles{color:var(--on-dark-muted);margin:.5rem 0 2rem;font-size:.9375rem}
.linklist{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.linklist a{display:flex;flex-direction:column;justify-content:center;min-height:3.5rem;padding:.75rem 1rem;border-radius:.5rem;background:var(--ink-2);border:1px solid var(--hair-dark);text-decoration:none;font-weight:600}
.linklist a:hover{border-color:var(--on-dark-muted)}
.linklist a.primary{background:var(--red);border-color:var(--red);color:#fff}
.linklist small{font-weight:400;font-size:.8125rem;opacity:.75}
.links-page .foot{background:transparent;padding:1.5rem 0}
.links-page .foot .wrap{justify-content:center}

/* Links-Seite am breiten Bildschirm: Foto links, Knöpfe rechts */
@media (min-width:64rem){
  .links-page::before{left:0;transform:none;width:54%;height:100%;aspect-ratio:auto;background:url(/img/kopf-1333.webp) 55% 40%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,#000 60%,transparent);-webkit-mask-composite:source-over;mask-image:linear-gradient(90deg,#000 60%,transparent);mask-composite:add}
  .links-page main{margin-left:calc(54% + (46% - 28rem) / 2);margin-right:0;padding-top:4.5rem}
}

/* Kampfbilanz */
.record{margin:1.5rem 0 0;display:grid;gap:.875rem}
.record div{border-left:3px solid var(--red);padding-left:1rem}
.record dt{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,inherit);opacity:.75}
.record dd{margin:.125rem 0 0;font-size:1.25rem}
.record b{font-family:var(--display);font-weight:800;font-size:1.75rem;letter-spacing:.01em}