/* heydenny.de · CI Privat „Ich“ in der Bewerbungs-Linie B
   Schwarz/Anthrazit/Koralle, Archivo Black Italic (schmal), Archivo, Geist Mono.
   Alle Schriften lokal und statisch, keine externen Anfragen. */

@font-face{font-family:"Archivo Display";font-style:italic;font-weight:900;font-stretch:62%;font-display:swap;src:url(fonts/Archivo-italic-62-900.ttf) format("truetype")}
@font-face{font-family:"Archivo Display";font-style:italic;font-weight:800;font-stretch:62%;font-display:swap;src:url(fonts/Archivo-italic-62-800.ttf) format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Archivo-normal-100-400.ttf) format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Archivo-normal-100-500.ttf) format("truetype")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Archivo-normal-100-600.ttf) format("truetype")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/GeistMono-400.ttf) format("truetype")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/GeistMono-500.ttf) format("truetype")}

:root{
  --bg:#0A0A0B; --tile:#17181B; --tile-2:#1C1D21; --line:#2C2D32;
  --fg:#ECEAE6; --muted:#8E8C88; --accent:#FF6B5E; --hint:#E9C46A;
  --display:"Archivo Display","Archivo",sans-serif;
  --font:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(16px,5vw,72px);
  --max:1296px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color:var(--line) var(--bg);
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 17px/1.55 var(--font);
  font-kerning:normal; text-rendering:optimizeLegibility;
}
::selection{background:var(--accent); color:#0A0A0B}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
button,a,[role="button"]{touch-action:manipulation}
button{font:inherit; color:inherit}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.muted{color:var(--muted)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:9; background:var(--fg); color:var(--bg); padding:8px 12px}

/* Kopf */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:16px;
}
.top .home{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none}
.top nav{display:flex; gap:24px}
.top nav a{font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:12px 0}
.top nav a.nur-gross{display:none}
@media (min-width:760px){.top nav a.nur-gross{display:inline}}

/* Hero = das Deckblatt, aufgeschlagen */
.hero{position:relative; overflow:hidden; padding-block:clamp(8px,4vh,56px) clamp(24px,5vh,72px)}
.name{
  font:900 italic clamp(4rem,18vw,8.5rem)/.86 var(--display);
  font-stretch:62%; text-transform:uppercase; letter-spacing:-.01em;
  margin:0; padding-right:.06em;
}
.rolle{margin:clamp(20px,4vh,40px) 0 0}
.rolle .r1{color:var(--accent); display:block}
.rolle .r2{display:block; margin-top:8px; color:var(--fg)}
.rolle .r2 span{display:block}
.rolle .r2 .sep{display:none}
@media (min-width:560px){.rolle .r2 span{display:inline}.rolle .r2 .sep{display:inline}}
.strich{display:block; width:96px; height:10px; background:var(--accent); transform:skewX(-24deg); margin:clamp(18px,3vh,28px) 0 clamp(16px,3vh,24px) 4px}
.satz{
  font:900 italic clamp(2.3rem,12vw,4.6rem)/.98 var(--display);
  font-stretch:62%; text-transform:uppercase; margin:0;
  position:relative; z-index:1;
}
.satz em{font-style:inherit; color:var(--accent)}
.schraffur{position:absolute; right:-40px; bottom:-30px; width:min(46vw,420px); height:auto; pointer-events:none; opacity:.95}
@media (min-width:1200px){
  .hero-grid{display:grid; grid-template-columns:1.5fr 1fr; align-items:end; gap:48px}
  .satz{font-size:clamp(2.4rem,4vw,3.8rem); white-space:nowrap}
  .schraffur{right:-30px; bottom:-30px; width:min(20vw,280px)}
}

/* LED-Bande: das Original von 2017, läuft wie in der Halle */
.bande{position:relative; border-block:1px solid var(--line); background:#000}
.bande-fenster{overflow:hidden; height:clamp(64px,9.2vw,132px); position:relative}
.bande-spur{display:flex; width:max-content; height:100%; animation:lauf 46s linear infinite}
.bande-spur img{height:100%; width:auto; max-width:none; flex:none}
.bande-fenster::after{ /* LED-Raster */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%,transparent 52%,rgba(0,0,0,.5) 72%) 0 0/3px 3px;
}
.bande.steht .bande-spur{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bande-spur{animation:none}}
.bande-zeile{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:10px}
.bande-zeile .mono{font-size:11px}
.knopf-leise{
  background:none; border:0; padding:8px 0 8px 12px; cursor:pointer;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  user-select:none; -webkit-user-select:none;
}

/* Abschnitte */
.abschnitt{padding-block:clamp(56px,10vw,128px) 0}
.h2{
  font:900 italic clamp(3.2rem,13vw,7rem)/.9 var(--display);
  font-stretch:62%; text-transform:uppercase; margin:0; text-wrap:balance;
}
.unterzeile{font-size:clamp(18px,2.2vw,22px); line-height:1.4; margin:16px 0 0; max-width:34ch; text-wrap:balance; color:var(--fg)}
.h3{font:800 italic clamp(1.9rem,6vw,3rem)/.95 var(--display); font-stretch:62%; text-transform:uppercase; margin:0; text-wrap:balance}
.case-kopf{margin-top:clamp(40px,6vw,72px); display:grid; gap:12px}
@media (min-width:900px){.case-kopf{grid-template-columns:1fr 1.1fr; align-items:end; gap:48px}}
.case-kopf p{margin:0; max-width:52ch; text-wrap:pretty}
.case-kopf .mono{margin-top:12px}

/* Filme */
.filme{display:grid; gap:28px; margin-top:28px}
@media (min-width:900px){
  .filme{grid-template-columns:repeat(12,1fr); gap:24px; align-items:start}
  .f-promo{grid-column:span 9}
  .f-signage{grid-column:span 3}
  .f-bande,.f-breit{grid-column:1 / -1}
}
.film{margin:0}
.film-bild{position:relative; background:var(--tile-2); overflow:hidden; border-radius:2px}
.film-bild img,.film-bild video{width:100%; height:100%; object-fit:cover; display:block}
.f-promo .film-bild{aspect-ratio:16/9}
.f-signage .film-bild{aspect-ratio:9/16}
.f-bande .film-bild,.f-breit .film-bild{aspect-ratio:16/9}
@media (max-width:899px){
  .f-signage{display:grid; grid-template-columns:52% 1fr; gap:16px; align-items:end}
}
.play{
  position:absolute; inset:0; width:100%; border:0; padding:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  user-select:none; -webkit-user-select:none;
}
.play-icon{
  width:68px; height:68px; display:grid; place-items:center;
  background:rgba(10,10,11,.74); color:var(--fg);
  transform:skewX(-12deg); transition:background 160ms var(--ease), transform 160ms var(--ease);
}
.play-icon svg{transform:skewX(12deg) translateX(2px)}
.play:active .play-icon{transform:skewX(-12deg) scale(.95)}
@media (hover:hover) and (pointer:fine){
  .play:hover .play-icon{background:var(--accent); color:#0A0A0B}
}
.dauer{position:absolute; left:12px; bottom:12px; background:rgba(10,10,11,.8); padding:5px 8px; font-size:11px}
.film figcaption{padding-top:12px}
.film .titel{font-weight:500; font-size:17px; line-height:1.35; margin:0; text-wrap:balance}
.film .meta{margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.6}

/* Passwort-Bereich, Teaser */
.tresor{
  margin-top:clamp(56px,8vw,96px); background:var(--tile); border-top:2px solid var(--line);
  display:grid; gap:28px; padding:clamp(24px,4vw,48px);
}
@media (min-width:900px){.tresor{grid-template-columns:1fr 1fr; align-items:center; gap:56px}}
.tresor p{margin:12px 0 0; max-width:44ch; text-wrap:pretty}
.kacheln{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.kachel{
  aspect-ratio:9/16; background:
    repeating-linear-gradient(-62deg,transparent 0 9px,rgba(255,255,255,.035) 9px 10px),var(--tile-2);
  display:grid; place-items:center; color:var(--muted); border:1px solid var(--line);
}
.kachel span{font-size:10px; letter-spacing:.1em}

/* Buttons */
.knopf{
  display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px;
  font:600 15px/1 var(--font); text-decoration:none; border:0; cursor:pointer; border-radius:8px;
  background:var(--accent); color:#0A0A0B; margin-top:24px;
  transition:transform 120ms var(--ease), background 160ms var(--ease);
  user-select:none; -webkit-user-select:none;
}
.knopf:active{transform:scale(.97)}
.knopf.zweit{background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line)}
@media (hover:hover) and (pointer:fine){
  .knopf:hover{background:#ff8378}
  .knopf.zweit:hover{background:var(--tile-2)}
}

/* Kurz-Portfolio */
.heft{display:grid; gap:28px; align-items:center}
@media (min-width:760px){.heft{grid-template-columns:minmax(180px,300px) 1fr; gap:56px}}
.heft > a{display:block; width:fit-content}
.heft-cover{width:min(56vw,300px); box-shadow:0 18px 40px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); transform:rotate(-2deg); border-radius:2px}
.heft-breit > a{width:100%}
.heft-mockup{display:block; width:100%; height:auto; border-radius:2px}
@media (min-width:760px){.heft-breit{grid-template-columns:minmax(0,1.6fr) minmax(220px,1fr); gap:48px}}
.heft p{margin:16px 0 0; max-width:46ch; text-wrap:pretty}

/* Kontakt */
.kontakt{padding-bottom:clamp(56px,8vw,96px)}
.mail{
  display:inline-block; margin-top:24px; text-decoration:none;
  font:900 italic clamp(1.75rem,7.2vw,2.75rem)/1.05 var(--display); font-stretch:62%;
  overflow-wrap:anywhere; border-bottom:3px solid var(--accent); padding-bottom:3px;
}
.kontakt-zeilen{display:flex; flex-wrap:wrap; gap:12px 32px; margin-top:28px; align-items:center}
.kontakt-zeilen a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; padding:10px 0; font-size:17px}
@media (hover:hover) and (pointer:fine){
  .mail:hover{color:var(--accent)}
  .kontakt-zeilen a:hover{text-decoration:underline}
}

/* Fuß */
.fuss{border-top:1px solid var(--line); padding-block:20px calc(20px + env(safe-area-inset-bottom,0px))}
.fuss .wrap{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px}
.fuss .wrap > span{padding:8px 0}
.fuss a{text-decoration:none; color:var(--muted); padding:8px 0; display:inline-block}
.fuss nav{display:flex; gap:24px}

/* Textseiten (Impressum, Datenschutz, Filme) */
.text{padding-block:clamp(24px,6vw,72px) clamp(56px,8vw,96px)}
.text > *{max-width:68ch}
.notiz{font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--muted); margin-top:48px}
.text h1{font:900 italic clamp(3rem,12vw,6rem)/.9 var(--display); font-stretch:62%; text-transform:uppercase; margin:0 0 32px; text-wrap:balance}
.text h2{font:600 19px/1.3 var(--font); margin:40px 0 8px}
.text p,.text li{text-wrap:pretty}
.text address{font-style:normal}

/* Passwort-Formular */
.schloss{display:grid; gap:10px; margin-top:28px; max-width:420px}
.schloss label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.schloss input{
  font:400 16px/1.2 var(--font); color:var(--fg); background:var(--tile-2);
  border:1px solid var(--line); border-radius:8px; height:52px; padding:0 16px; width:100%;
}
.schloss input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.schloss input[aria-invalid="true"]{border-color:var(--accent)}
.fehler{color:var(--accent); font-size:15px; margin:4px 0 0; min-height:1.4em}
.spots{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:32px}
@media (min-width:900px){.spots{grid-template-columns:repeat(4,1fr); gap:16px}}
.spots .film-bild{aspect-ratio:9/16}