@font-face{font-family:"Georama";src:url(fonts/Georama.ttf) format("truetype");font-weight:100 900;font-stretch:62.5% 150%;font-display:swap}
@font-face{font-family:"Chivo";src:url(fonts/Chivo.ttf) format("truetype");font-weight:100 900;font-display:swap}

:root{
  --grund:#0b0b0c;
  --text:#ece8e1;
  --text-2:rgba(236,232,225,.62);
  --linie:rgba(236,232,225,.14);
  --akzent:#d0452f;
  --gut:clamp(20px,4.6vw,80px);
  --anzeige:"Georama",system-ui,sans-serif;
  --schrift:"Chivo",system-ui,sans-serif;
  color-scheme:dark;
}
body{font-size:17px}
::selection{background:var(--text);color:var(--grund)}

/* ---------- Kopf: durchsichtig über dem Bild, beim Scrollen fest mit Milchglas ---------- */
.kopf{position:fixed;z-index:50;padding:20px var(--gut);transition:background .4s,padding .4s,box-shadow .4s}
.kopf.fest{padding-top:12px;padding-bottom:12px;background:rgba(11,11,12,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--linie)}
.marke svg{width:30px;height:30px}
.marke span{display:grid;font:780 15px/1 var(--anzeige);font-stretch:118%;letter-spacing:.16em;text-transform:uppercase}
.marke small{margin-top:5px;font-size:9px;font-weight:600;letter-spacing:.62em;color:var(--text-2)}
.kopf nav a,.sprache a{font:620 12.5px/1 var(--anzeige);font-stretch:110%;letter-spacing:.2em;text-transform:uppercase}
.kopf nav a{position:relative;padding:6px 0;color:var(--text-2);transition:color .25s}
.kopf nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.kopf nav a:hover,.kopf nav a[aria-current]{color:var(--text)}
.kopf nav a:hover::after{transform:none}

/* ---------- Bühne: Szenenbild randlos, langsamer Rückzug der Kamera ---------- */
.buehne{position:relative;height:100svh;min-height:560px;overflow:hidden}
.buehne-bild{position:absolute;inset:0}
.buehne-bild img{width:100%;height:100%;object-fit:cover;object-position:62% 50%;transform:scale(1.14);transition:transform 9s cubic-bezier(.15,.6,.2,1)}
.bereit .buehne-bild img{transform:scale(1.02)}
.buehne::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--grund) 0%,rgba(11,11,12,.72) 26%,rgba(11,11,12,.15) 62%,rgba(11,11,12,.35) 100%),
             linear-gradient(to right,rgba(11,11,12,.7),rgba(11,11,12,0) 55%)}
.buehne-text{position:absolute;z-index:1;left:var(--gut);right:var(--gut);bottom:clamp(64px,12vh,130px)}
.buehne h1{margin:0;font:800 clamp(68px,13.5vw,232px)/.82 var(--anzeige);font-stretch:72%;letter-spacing:-.005em;text-transform:uppercase}
.zeile{display:block;overflow:hidden;padding-bottom:.04em}
.zeile>span{display:block;transform:translateY(108%);transition:transform 1.3s cubic-bezier(.16,.8,.2,1)}
.zeile+.zeile>span{transition-delay:.12s}
.bereit .zeile>span{transform:none}
.unter{max-width:30em;margin:clamp(20px,3vh,30px) 0 clamp(26px,4vh,40px);font-size:clamp(17px,1.4vw,20px);color:var(--text-2);opacity:0;transition:opacity 1.2s .6s}
.buehne .knopf{opacity:0;transition:opacity 1.2s .8s,background .3s,color .3s,border-color .3s}
.bereit .unter,.bereit .buehne .knopf{opacity:1}
.bildzeile{position:absolute;z-index:1;right:var(--gut);bottom:28px;margin:0;font:600 11px/1 var(--anzeige);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}

/* Knopf */
.knopf{display:inline-flex;align-items:center;gap:14px;padding:15px 24px;border:1px solid rgba(236,232,225,.42);text-decoration:none;
  font:650 12.5px/1 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s}
.knopf::after{content:"";width:22px;height:1px;background:currentColor;transition:width .3s}
.knopf:hover{background:var(--text);border-color:var(--text);color:var(--grund)}
.knopf:hover::after{width:34px}

/* ---------- Leitsatz ---------- */
.leitsatz{max-width:1480px;margin:0 auto;padding:clamp(110px,15vw,230px) var(--gut)}
.gross{margin:0;max-width:24em;font:460 clamp(30px,4.1vw,68px)/1.13 var(--anzeige);letter-spacing:-.022em}
.leise{color:var(--text-2)}

/* ---------- Spiele: je Spiel ein randloses Banner ---------- */
.titel{margin:0;padding:0 var(--gut) clamp(28px,3.4vw,52px);font:800 clamp(52px,8.4vw,148px)/.86 var(--anzeige);font-stretch:72%;text-transform:uppercase;letter-spacing:-.005em}
.werk{position:relative;display:grid;align-items:end;min-height:min(94svh,980px);overflow:hidden}
.werk+.werk{margin-top:3px}
.werk-bild{position:absolute;inset:-8% 0;will-change:transform;transform:translate3d(0,calc(var(--p,0)*-7%),0)}
.werk-bild img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.werk:hover .werk-bild img{transform:scale(1.08)}
.werk.pixel .werk-bild img{image-rendering:pixelated;object-position:50% 30%}
/* Motiv oben im Bild (Emberclaim: Kopf am oberen Rand) – sonst schneidet das Banner auf breiten Bildschirmen den Kopf ab */
/* Motiv am oberen Bildrand (Kopf, Flügel): Bild oben anlegen, Zoom von oben, Parallaxe flacher –
   bei -8 %/7 % schob die Verschiebung den Kopf beim Hereinscrollen aus dem Rahmen */
.werk.oben .werk-bild{inset:-3% 0;transform:translate3d(0,calc(var(--p,0)*-2.5%),0)}
.werk.oben .werk-bild img{object-position:50% 0%;transform-origin:50% 0}
.werk::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,var(--grund) 0%,rgba(11,11,12,.78) 24%,rgba(11,11,12,.12) 62%,rgba(11,11,12,.45) 100%)}
.werk-text{position:relative;z-index:1;max-width:660px;padding:clamp(40px,6vw,96px) var(--gut)}
.werk:nth-of-type(even) .werk-text{justify-self:end;text-align:right}
.werk:nth-of-type(even) .daten{justify-content:flex-end}
.werk h3{margin:0 0 22px}
.werk-logo{width:min(500px,78vw);height:auto;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6))}
.werk:nth-of-type(even) .werk-logo{margin-left:auto}
.werk-name{font:800 clamp(46px,6.2vw,104px)/.86 var(--anzeige);font-stretch:72%;text-transform:uppercase}
.werk-text p{margin:0 0 22px;font-size:clamp(17px,1.35vw,20px);color:rgba(236,232,225,.82)}
.daten{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0 0 32px;padding:0;font:620 11.5px/1 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.daten li:last-child{color:var(--akzent)}

/* ---------- Kontakt ---------- */
.kontakt{padding:clamp(120px,15vw,230px) 0 0}
.kontakt>div{padding:0 var(--gut)}
.kontakt>div p{max-width:24em;margin:0;font:420 clamp(24px,2.6vw,40px)/1.25 var(--anzeige);letter-spacing:-.015em;color:var(--text-2)}
.mail{white-space:nowrap;font:760 clamp(18px,6.6vw,92px)/1 var(--anzeige);font-stretch:96%;letter-spacing:-.02em}

/* ---------- Fuß ---------- */
.fuss{display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px 40px;margin-top:clamp(120px,15vw,230px);padding:clamp(56px,7vw,110px) var(--gut) 30px;border-top:1px solid var(--linie);font-size:inherit}
.fuss-marke{display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);text-decoration:none!important}
.fuss-marke svg{width:clamp(44px,5vw,76px);height:auto}
.fuss-marke span{font:800 clamp(28px,4.4vw,72px)/1 var(--anzeige);font-stretch:120%;letter-spacing:.06em;text-transform:uppercase}
.fuss-spalten{display:flex;gap:clamp(36px,5vw,90px)}
.fuss-spalten div{display:grid;gap:12px;align-content:start}
.fuss-spalten a{font:620 12.5px/1 var(--anzeige);font-stretch:110%;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.fuss-spalten a:hover{color:var(--text);text-decoration:none}
.fuss-zeile{grid-column:1/-1;margin:0;padding-top:24px;border-top:1px solid var(--linie);font-size:13px;color:var(--text-2)}

@media (max-width:820px){
  .buehne-text{bottom:clamp(54px,9vh,90px)}
  .bildzeile{left:var(--gut);right:auto;bottom:22px}
  .buehne-bild img{object-position:72% 50%}
  .werk{min-height:82svh}
  .werk:nth-of-type(even) .werk-text{justify-self:start;text-align:left}
  .werk:nth-of-type(even) .daten{justify-content:flex-start}
  .werk:nth-of-type(even) .werk-logo{margin-left:0}
  .fuss{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .buehne-bild img,.zeile>span,.unter,.buehne .knopf{transition:none}
  .werk-bild,.werk.oben .werk-bild{transform:none}
}

/* ---------- Rechtstexte ---------- */
.recht{padding-top:clamp(130px,15vw,200px)}
.recht+.fuss{margin-top:clamp(70px,9vw,140px)}
.recht h1{font-family:var(--anzeige);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:clamp(34px,9vw,110px);line-height:.9}
.recht h2{hyphens:auto;overflow-wrap:break-word;margin:2.2em 0 .7em;font:620 12.5px/1.5 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
@media (min-width:821px){
  .recht{max-width:1240px;display:grid;grid-template-columns:minmax(0,20em) minmax(0,44rem);column-gap:clamp(40px,6vw,110px);align-items:start}
  .recht>h1,.recht>.hinweis{grid-column:1/-1}
  .recht>h2{grid-column:1}
  .recht>:not(h1):not(.hinweis):not(h2){grid-column:2}
  .recht>h2,.recht>h2+*{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--linie)}
  .recht>h2+*+p{margin-top:1em}
}
.recht p,.recht li,.recht address{color:var(--text-2)}
.recht a{color:var(--text)}

/* ---------- Presse ---------- */
.presse{padding-top:clamp(120px,15vw,230px)}
.presse-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,110px);padding:0 var(--gut)}
.fakten{margin:0;border-top:1px solid var(--linie)}
.fakten div{display:grid;grid-template-columns:minmax(0,9em) 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font:620 11.5px/1.6 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.fakten dd{margin:0;line-height:1.5}
.logos{display:grid;gap:14px;align-content:start}
.logo-kachel{margin:0;border:1px solid var(--linie)}
.logo-kachel img{display:block;width:100%;height:auto;padding:clamp(36px,6vw,80px) clamp(28px,5vw,72px);box-sizing:border-box}
.logo-kachel.hell{background:var(--text);border-color:var(--text)}
.logo-kachel figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:14px 18px;background:var(--grund);border-top:1px solid var(--linie);font-size:14px;color:var(--text-2)}
.logo-kachel figcaption>span{margin-right:auto}
.logo-kachel a{font:650 11.5px/1 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.logos p{margin:6px 0 0;font-size:14px}
.presse+.kontakt{padding-top:clamp(100px,12vw,180px)}
@media (max-width:820px){.presse-raster{grid-template-columns:1fr}.logo-kachel figcaption>span{flex-basis:100%}}

/* ---------- Kontaktformular ---------- */
.formular{scroll-margin-top:100px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(24px,3vw,48px);max-width:900px;margin:clamp(70px,9vw,140px) var(--gut) 0}
.formular h2,.formular .breit{grid-column:1/-1}
.formular h2{margin:0;font:620 12.5px/1 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.formular label{display:grid;gap:10px}
.formular label>span{font:620 11.5px/1 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.formular input,.formular textarea{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid rgba(236,232,225,.3);border-radius:0;background:transparent;color:var(--text);font:400 19px/1.45 var(--schrift);transition:border-color .25s}
.formular textarea{resize:vertical;min-height:150px}
.formular input:focus,.formular textarea:focus{outline:none;border-color:var(--text)}
.formular input:focus-visible,.formular textarea:focus-visible{box-shadow:0 1px 0 var(--text)}
.formular p{margin:0;font-size:14px}
.formular .knopf{justify-self:start;background:none;color:inherit;cursor:pointer}
.honig{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{display:none;max-width:900px;margin:clamp(40px,5vw,70px) var(--gut) 0;padding:16px 20px;border-left:2px solid var(--text);background:rgba(236,232,225,.06);font-size:18px;scroll-margin-top:120px}
.meldung:target{display:block}
.meldung.fehler{border-color:var(--akzent)}
@media (max-width:820px){.formular{grid-template-columns:1fr}}

/* ---------- Über uns ---------- */
.ueber{padding-top:clamp(120px,15vw,230px)}
.ueber .gross{padding:0 var(--gut);margin-bottom:clamp(56px,7vw,110px)}
.ueber-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,72px);padding:0 var(--gut)}
.ueber-raster section{padding-top:22px;border-top:1px solid var(--linie)}
.ueber-raster h2{margin:0 0 14px;font:620 12.5px/1.5 var(--anzeige);font-stretch:112%;letter-spacing:.2em;text-transform:uppercase}
.ueber-raster p{margin:0;max-width:30em;color:var(--text-2)}
.ueber-raster a{color:var(--text)}
.ueber+.kontakt{padding-top:clamp(100px,12vw,180px)}
@media (max-width:820px){.ueber-raster{grid-template-columns:1fr}}