/* =============================================================
   HFC – Startseite premium (04.11.2026)
   Gilt nur innerhalb von .hp (die neue Startseite). Farben, Schrift
   und Radien aus style.css: Gold auf Schwarz, Cormorant + Jost, fast eckig.
   ============================================================= */
.hp{ --hp-rand:clamp(20px,6vw,120px); overflow-x:clip; }
.hp .cd__num,.hp .hp-termin__tag,.hp .hp-schritte b,.hp .hp-hero__titel{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.hp .hp-zeile{ font:500 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
.hp .hp-lead{ font-size:clamp(16px,1.6vw,18px); line-height:1.65; color:var(--muted); max-width:56ch; margin:16px 0 0; }
.hp .hp-knoepfe{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hp .hp-mitte{ text-align:center; margin-top:28px; }
.hp .hp-link{ background:none; border:0; padding:8px 0; min-height:40px; font:500 11px/1.2 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); cursor:pointer; text-decoration:none; border-bottom:1px solid transparent; }
.hp .hp-link:hover,.hp .hp-link:focus-visible{ color:var(--cream); border-bottom-color:var(--gold-deep); }
.hp .hp-plain{ background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; cursor:pointer;
  border-bottom:1px solid rgba(231,213,168,.35); }
.hp .hp-plain:hover{ color:var(--cream); }

/* ============================ KOPF: Event-Plakat (Runde 2) ============================
   Das Plakat kommt je Veranstaltung von HFC und wechselt. Es wird nie beschnitten und nie
   mit Text überdeckt (Ausnahme Handy: höchstens das untere Drittel, dort liegt der Verlauf).
   Breite Bildschirme füllt das Plakat selbst: unscharf, abgedunkelt, darüber Rauch/Glut. */
.hero.hp-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vh,34px); text-align:center; padding:calc(var(--nav-h) + clamp(10px,2.2vh,30px)) var(--hp-rand2) clamp(20px,3.6vh,46px);
  background:#060403; overflow:hidden; isolation:isolate; --hp-rand2:clamp(16px,3vw,96px); --hp-ton:rgb(194,163,94); }
.hp-hero__grund{ position:absolute; inset:0; z-index:-3; overflow:hidden; background:#060403; pointer-events:none; }
.hp-hero__unscharf{ position:absolute; left:-6%; top:-6%; width:112%; height:112%; object-fit:cover; filter:blur(46px) saturate(1.1) brightness(.4);
  opacity:0; transition:opacity 1.4s ease; will-change:transform; }
.hp-plakat-da .hp-hero__unscharf{ opacity:1; }
.hp-hero__grund::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 46%, rgba(6,4,3,0) 0, rgba(6,4,3,.5) 72%, rgba(6,4,3,.86) 100%),
             linear-gradient(180deg, rgba(6,4,3,.78) 0, rgba(6,4,3,0) 16%, rgba(6,4,3,0) 74%, rgba(6,4,3,.96) 100%); }
/* Rauch & Glut: echter Film (Higgsfield), in der Farbe des Plakats getönt, aufgehellt (screen) */
.hp-hero__rauch{ position:absolute; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:screen; isolation:isolate; opacity:0; transition:opacity 2.4s ease; }
.hp-hero__rauch video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hp-hero__rauch::after{ content:""; position:absolute; inset:0; background:var(--hp-ton); mix-blend-mode:multiply; }
.hp-hero__rauch:has(video.laeuft){ opacity:.34; }
.hp-hero[data-modus="seite"] .hp-hero__rauch:has(video.laeuft){ opacity:.4; }
/* Plakat im goldenen Rahmen */
.hp-plakat{ margin:0; position:relative; z-index:0; order:-1; flex:0 0 auto; max-width:100%; }
.hp-plakat[hidden]{ display:none; }
.hp-plakat__knopf{ display:block; padding:0; margin:0; border:0; background:none; cursor:zoom-in; color:inherit; }
.hp-plakat__innen{ display:block; position:relative; overflow:hidden; border-radius:1px;
  box-shadow:0 0 0 1px rgba(231,213,168,.6), 0 0 0 7px rgba(6,4,3,.62), 0 0 0 8px rgba(194,163,94,.3),
             0 50px 120px -40px rgba(0,0,0,.95), 0 0 180px -30px var(--hp-ton); }
.hp-plakat__bild{ display:block; max-width:100%; height:auto; object-fit:contain; background:#0d0907; }
.hp-plakat__film{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:fill; opacity:0; transition:opacity 1.4s ease; pointer-events:none; }
.hp-plakat__film.laeuft{ opacity:1; }
.hp-plakat__knopf:focus-visible .hp-plakat__innen{ outline:2px solid var(--gold); outline-offset:10px; }
@media (prefers-reduced-motion:no-preference){
  .hp-plakat__innen{ animation:hpNah 24s ease-in-out infinite alternate; }
}
@keyframes hpNah{ from{ transform:scale(1); } to{ transform:scale(1.02); } }
/* Text */
.hp-hero__text{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center; min-width:0; gap:clamp(12px,1.8vh,22px); }
.hp-hero__titelblock{ display:flex; flex-direction:column; align-items:inherit; min-width:0; max-width:100%; }
.hp-hero__zeichen{ display:none; position:relative; }
.hp-hero__zeichen svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 6px 22px rgba(0,0,0,.6)); }
.hp-hero__datum{ margin:0 0 6px; text-shadow:0 2px 10px rgba(0,0,0,.85); }
.hp-hero__datum span{ color:var(--cream); }
.hp-hero__titel{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,6vw,64px); line-height:1.04; letter-spacing:.01em; margin:0;
  text-shadow:0 4px 24px rgba(0,0,0,.8); overflow-wrap:anywhere; max-width:100%; }
.hp-hero__sub{ margin:8px 0 0; font:500 12px/1.5 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); text-shadow:0 2px 10px rgba(0,0,0,.9); }
.hp-hero .hp-cd{ display:flex; gap:clamp(14px,3.4vw,40px); justify-content:center; margin:0; background:none; border:0; padding:4px 10px; color:var(--cream); cursor:pointer; font:inherit; }
.hp-hero .hp-cd:hover .cd__num,.hp-hero .hp-cd:focus-visible .cd__num{ color:var(--gold); }
.hp-hero .cd{ min-width:0; }
.hp-hero .cd__num{ font-size:clamp(34px,5vw,54px); }
.hp-hero .cd__lbl{ font-size:11px; margin-top:6px; }
.hp-hero__knoepfe{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.hp-hero__knoepfe .btn{ min-width:180px; }
/* Licht geht an: einmal beim Öffnen, nur Deckkraft */
.hp-hero__licht{ position:absolute; inset:0; z-index:3; background:#060403; opacity:1; pointer-events:none; }
.hp-licht-an .hp-hero__licht{ opacity:0; transition:opacity 1.9s cubic-bezier(.3,.1,.2,1) .15s; }

/* --- Modus "oben": Plakat groß, darunter eine Programmzeile (Desktop/Tablet) --- */
@media (min-width:1000px){
  .hp-hero[data-modus="oben"] .hp-hero__text{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(18px,2.6vw,64px);
    width:max(900px, var(--hp-plakat-b, 900px)); max-width:100%; border-top:1px solid rgba(231,213,168,.24); padding-top:clamp(14px,2vh,26px); text-align:left; }
  .hp-hero[data-modus="oben"] .hp-hero__titelblock{ align-items:flex-start; justify-self:start; }
  .hp-hero[data-modus="oben"] .hp-cd{ justify-self:center; }
  .hp-hero[data-modus="oben"] .hp-hero__knoepfe{ justify-self:end; flex-wrap:nowrap; }
  .hp-hero[data-modus="oben"] .hp-hero__titel{ font-size:clamp(28px,2.3vw,100px); }
  .hp-hero[data-modus="oben"] .hp-hero__datum{ font-size:clamp(11px,.62vw,24px); }
  .hp-hero[data-modus="oben"] .hp-hero__sub{ font-size:clamp(11px,.6vw,22px); }
  .hp-hero[data-modus="oben"] .cd__lbl{ font-size:clamp(11px,.5vw,18px); }
  .hp-hero[data-modus="oben"] .hp-hero__knoepfe .btn{ font-size:clamp(12px,.52vw,20px); padding:clamp(14px,.9vw,34px) clamp(22px,1.7vw,66px); }
  .hp-hero[data-modus="oben"] .cd__num{ font-size:clamp(34px,2.6vw,112px); }
  .hp-hero[data-modus="oben"] .hp-hero__knoepfe .btn{ min-width:0; }
}
@media (min-width:1000px) and (max-width:1439px){
  .hp-hero[data-modus="oben"] .hp-hero__text{ grid-template-columns:minmax(0,1fr) auto; }
  .hp-hero[data-modus="oben"] .hp-hero__knoepfe{ grid-column:1 / -1; justify-self:center; }
}
/* --- Modus "seite": Breitbild (21:9) oder Hochformat-Plakat am Desktop: Text links, Plakat rechts --- */
.hp-hero[data-modus="seite"]{ flex-direction:row; justify-content:center; align-items:center; gap:clamp(36px,4.2vw,170px); text-align:left;
  padding-left:clamp(28px,4vw,160px); padding-right:clamp(28px,4vw,160px); padding-top:calc(var(--nav-h) + clamp(18px,3.4vh,60px)); padding-bottom:clamp(22px,4vh,60px); }
.hp-hero[data-modus="seite"] .hp-plakat{ order:2; }
.hp-hero[data-modus="seite"] .hp-hero__text{ align-items:flex-start; flex:1 1 0; max-width:min(1150px,40vw); gap:clamp(14px,2.4vh,40px); }
.hp-hero[data-modus="seite"] .hp-hero__titelblock{ align-items:flex-start; }
.hp-hero[data-modus="seite"] .hp-hero__zeichen{ display:block; width:clamp(120px,8vw,330px); margin:0 0 clamp(2px,.6vh,10px); }
.hp-hero[data-modus="seite"] .hp-hero__titel{ font-size:clamp(46px,3.9vw,168px); }
.hp-hero[data-modus="seite"] .hp-hero__datum{ font-size:clamp(12px,.7vw,24px); margin-bottom:clamp(6px,1vh,18px); }
.hp-hero[data-modus="seite"] .hp-hero__sub{ font-size:clamp(12px,.68vw,22px); margin-top:clamp(8px,1.2vh,20px); }
.hp-hero[data-modus="seite"] .hp-cd{ justify-content:flex-start; margin-left:-10px; gap:clamp(18px,1.9vw,72px); }
.hp-hero[data-modus="seite"] .cd__num{ font-size:clamp(40px,3vw,120px); }
.hp-hero[data-modus="seite"] .cd__lbl{ font-size:clamp(11px,.52vw,18px); margin-top:clamp(6px,.5vw,14px); }
.hp-hero[data-modus="seite"] .hp-hero__knoepfe{ justify-content:flex-start; gap:clamp(12px,.8vw,26px); }
.hp-hero[data-modus="seite"] .hp-hero__knoepfe .btn{ font-size:clamp(12px,.56vw,19px); padding:clamp(15px,1vw,32px) clamp(26px,2vw,68px); min-width:clamp(180px,8.6vw,340px); }
/* --- Modus "handy": Plakat oben über die Breite, Text darunter (überdeckt höchstens das untere Drittel) --- */
.hp-hero[data-modus="handy"]{ justify-content:flex-start; padding:var(--nav-h) 0 calc(var(--tab-h) + 18px); gap:0; }
.hp-hero[data-modus="handy"] .hp-plakat__innen{ box-shadow:0 0 0 1px rgba(231,213,168,.4), 0 30px 80px -30px rgba(0,0,0,.9); animation:none; }
.hp-hero[data-modus="handy"] .hp-plakat::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,4,3,0), rgba(6,4,3,.55) 55%, rgba(6,4,3,.82)); }
.hp-hero[data-modus="handy"] .hp-hero__text{ padding:0 16px; margin-top:auto; }
.hp-hero[data-modus="handy"] .hp-hero__titel,.hp-hero[data-modus="handy"] .hp-hero__sub{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hp-hero[data-modus="handy"] .hp-hero__datum .hp-sep{ display:none; }
.hp-hero[data-modus="handy"] .hp-hero__datum .hp-ort{ display:block; margin-top:4px; }
/* --- ohne Plakat (Bild fehlt): ruhiger Kopf mit Zeichen --- */
.hp-hero[data-modus="ohne"] .hp-hero__zeichen{ display:block; width:clamp(120px,22vw,260px); margin:0 auto 10px; }
@media (max-width:860px){ .hero.hp-hero:not([data-modus="handy"]){ padding-bottom:calc(var(--tab-h) + 20px); } }
@media (max-width:520px){ .hp-hero__knoepfe{ width:100%; flex-wrap:nowrap; gap:10px; } .hp-hero__knoepfe .btn{ flex:1 1 0; min-width:0; padding:15px 10px; letter-spacing:.14em; }
  .hp-hero__datum .hp-sep{ display:none; } .hp-hero__datum .hp-ort{ display:block; margin-top:4px; } }
@media (max-width:400px){ .hp-hero__sub{ letter-spacing:.18em; } }
@media (max-height:700px) and (max-width:860px){ .hp-hero .cd__num{ font-size:32px; } .hp-hero__text{ gap:10px; } }

/* Menü am Breitbild: nur auf der Startseite größer (andere Seiten unverändert) */
@media (min-width:2200px){
  html.hp-start{ --nav-h:84px; }
  html.hp-start .nav__logo img{ height:36px; }
  html.hp-start .nav__links{ gap:clamp(24px,1.3vw,44px); }
  html.hp-start .nav__links a{ font-size:clamp(13.5px,.5vw,19px); }
  html.hp-start .nav__cta{ font-size:13px; }
  html.hp-start .nav__lang button{ font-size:13px; padding:8px 13px; }
}
/* App-Hinweise: auf der Startseite erst nach dem Kopf, am Desktop in der Ecke statt mitten auf dem Plakat */
html.hp-start.hp-imkopf .installbar{ opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,16px); }
html.hp-start .installbar{ transition:opacity .4s ease, transform .4s ease, visibility 0s linear .4s; }
html.hp-start:not(.hp-imkopf) .installbar{ transition:opacity .4s ease, transform .4s ease, visibility 0s; }
@media (min-width:861px){
  html.hp-start .installbar{ left:auto; right:20px; transform:none; width:min(400px,calc(100% - 40px)); bottom:20px; }
  html.hp-start .installbar.nlbar{ bottom:calc(20px + var(--hp-ib, 0px)); }
  html.hp-start.hp-imkopf .installbar{ transform:translateY(16px); }
}

/* WebFX lichtlogo: Zeichen ruht in Gold, solange es wartet, damit nie eine leere Stelle bleibt */
.hp-hero__zeichen.fx-ll-wartet .fx-ll-flaeche{ opacity:.0; }

/* ============================ PAY-PER-VIEW ============================ */
.hp-ppv{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,#16110b,#0d0b08 70%); }
.hp-ppv__in{ display:flex; gap:24px 40px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding-top:clamp(26px,4vw,40px); padding-bottom:clamp(26px,4vw,40px); }
.hp-ppv__txt{ flex:1 1 420px; min-width:0; }
.hp-ppv__txt h2{ font-size:clamp(26px,3.4vw,38px); margin:0 0 8px; }
.hp-ppv__txt p{ color:var(--muted); margin:0; line-height:1.6; }
.hp-ppv__akt{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; flex:0 1 auto; min-width:0; }
.hp-ppv__akt .vm-box{ min-width:min(100%,420px); }

/* ============================ FIGHT CARD (Nebel) ============================ */
.hp-fc .fx-buehne{ background:#050403; }
.hp-fc .fx-texte{ text-align:center; }
.hp-fc h2{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5vw,132px); line-height:1.08; margin:0 auto; max-width:16ch; color:var(--cream);
  text-shadow:0 3px 18px rgba(0,0,0,.55); }
.hp-fc .fx-phase[data-ton="nebel"] h2{ color:var(--cream); text-shadow:0 2px 30px rgba(0,0,0,.65); }
.hp-fc .fx-nv-schleier{ opacity:.55; }
.hp-fc .fx-phase p{ font:500 12.5px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:14px 0 0; }
.hp-fc__unten{ background:#050403; padding:clamp(34px,6vw,70px) 0 clamp(56px,8vw,100px); }
.hp-fc__liste{ display:grid; gap:14px; max-width:880px; margin:0 auto; }
.hp-fc__bald{ max-width:640px; margin:0 auto; text-align:center; }
.hp-fc__bald > p:first-child{ color:var(--muted); line-height:1.7; margin:0; font-size:17px; }
.hp-fc__mehr{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:26px 0 0; }

/* ============================ ZWEI SPALTEN (Bild + Text) ============================ */
.hp-split{ padding:clamp(64px,10vw,130px) 0; border-top:1px solid var(--line-soft); }
.hp-prime{ background:linear-gradient(180deg,#14100a,#0b0907); }
.hp-split__in{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,80px); align-items:center; }
.hp-split__in--rechts{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr); }
.hp-split__bild{ margin:0; position:relative; }
.hp-split__bild img{ width:100%; height:auto; display:block; border-radius:2px; }
.hp-split__bild figcaption{ position:absolute; right:10px; bottom:8px; font:400 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,228,.5); pointer-events:none; }
.hp-bildknopf{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; border-radius:2px; overflow:hidden; }
.hp-bildknopf img{ transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.hp-bildknopf:hover img{ transform:scale(1.025); }
.hp-split__txt h2{ font-size:clamp(32px,4.4vw,56px); line-height:1.08; margin:0; }
.hp-gross{ font-size:clamp(36px,5.4vw,68px) !important; }
@media (max-width:860px){
  .hp-split__in,.hp-split__in--rechts{ grid-template-columns:minmax(0,1fr); }
  .hp-split__bild--hoch{ max-width:440px; }
}

/* Schritte 1–2–3 */
.hp-schritte{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line-soft); }
.hp-schritte li{ border-bottom:1px solid var(--line-soft); }
.hp-schritte button{ display:flex; align-items:center; gap:18px; width:100%; min-height:56px; padding:12px 4px; background:none; border:0; color:var(--cream);
  font:300 16px/1.4 var(--sans); text-align:left; cursor:pointer; }
.hp-schritte b{ font:500 30px/1 var(--serif); color:var(--gold); min-width:26px; }
.hp-schritte button::after{ content:"+"; margin-left:auto; color:var(--gold-deep); font-size:20px; padding-right:6px; }
.hp-schritte button:hover,.hp-schritte button:focus-visible{ color:var(--gold); }

/* ============================ TERMINE ============================ */
.hp-termine{ padding:clamp(64px,10vw,130px) 0; border-top:1px solid var(--line-soft); }
.hp-kopf{ max-width:720px; margin:0 0 clamp(26px,4vw,44px); }
.hp-kopf h2{ font-size:clamp(34px,5vw,62px); margin:0; }
.hp-terminliste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.hp-terminliste.hidden{ display:none; }
.hp-termin{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px clamp(18px,3vw,40px); align-items:center; padding:clamp(18px,2.6vw,26px) 0; border-bottom:1px solid var(--line-soft); }
.hp-termin__datum{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:84px; padding:6px 8px; background:none; border:1px solid transparent;
  color:var(--cream); cursor:pointer; border-radius:1px; }
.hp-termin__datum:hover,.hp-termin__datum:focus-visible{ border-color:var(--gold-deep); }
.hp-termin__tag{ font:500 clamp(40px,5vw,58px)/1 var(--serif); }
.hp-termin__mon{ font:500 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin-top:6px; }
.hp-termin__titel{ font-size:clamp(22px,2.6vw,32px); margin:0; }
.hp-termin__ort{ margin:6px 0 0; color:var(--cream); font-size:14.5px; line-height:1.5; }
.hp-termin__waage{ margin:4px 0 0; color:var(--muted); font-size:13.5px; line-height:1.5; }
.hp-termin__akt{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 18px; }
.hp-termin--haupt .hp-termin__tag{ color:var(--gold); }
.hp-termin--haupt{ background:linear-gradient(90deg, rgba(194,163,94,.08), transparent 60%); }
.hp-2027{ text-align:center; margin-top:30px; }
#grid2027{ margin-top:22px; }
@media (max-width:700px){
  .hp-termin{ grid-template-columns:auto minmax(0,1fr); }
  .hp-termin__akt{ grid-column:1 / -1; justify-content:flex-start; }
  .hp-termin__datum{ min-width:64px; }
}

/* ============================ PARTNER ============================ */
.hp-partner{ padding:clamp(64px,10vw,120px) 0; background:var(--bg-2); border-top:1px solid var(--line); }
.hp-logos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.hp-logos li{ background:var(--bg-2); }
.hp-logo{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; height:130px; padding:20px; transition:background .3s; }
.hp-logo img{ max-width:150px; max-height:70px; width:auto; height:auto; object-fit:contain; filter:grayscale(1) brightness(1.6) contrast(.9); opacity:.85; transition:filter .3s,opacity .3s; }
.hp-logo:hover{ background:#1d1810; }
.hp-logo:hover img{ filter:none; opacity:1; }
.hp-logo--du b{ font:500 26px/1 var(--serif); color:var(--cream); }
.hp-logo--du span{ font:500 11px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

/* ============================ FUSS ============================ */
.hp-footer__logo{ display:inline-block; }

/* ============================ FENSTER ============================ */
.hp-modal .modal__box{ max-width:560px; text-align:left; }
.hp-modal h3{ font-size:clamp(24px,4vw,32px); margin:0 34px 12px 0; }
.hp-modal__txt p{ line-height:1.65; color:var(--cream); margin:0 0 12px; }
.hp-modal__bild{ width:100%; height:auto; display:block; margin:0 0 14px; border-radius:2px; }
.hp-modal .modal__box.hp-modal--plakat{ max-width:min(1100px,94vw); }
.hp-modal__plakat{ max-height:72vh; width:auto; max-width:100%; margin:0 auto 16px; }

/* ============================ RUHIG ============================ */
@media (prefers-reduced-motion:reduce){
  .hp-hero__licht{ display:none; }
  .hp-plakat__innen{ animation:none !important; }
  .hp-bildknopf img{ transition:none; }
}

@media (max-width:600px){ .hp-logos{ grid-template-columns:1fr 1fr; } .hp-logo{ height:104px; padding:14px; } .hp-logo img{ max-width:120px; max-height:56px; } }
@media (max-width:860px){
  .hp-fc .fx-texte{ padding-bottom:calc(var(--tab-h) + 18px) !important; }
}


/* ============================ KÄMPFEN: Walkout am Scroll (Runde 2) ============================
   Echter Film (Higgsfield Kling 3.0, Start-/Endbild): Kämpfer von hinten, durch den Gang zum Ring.
   Bild für Bild am Scroll (WebFX bildfolge, Canvas). Drei Runden = drei Schritte. */
.hp-walk .fx-buehne{ background:#060403; }
.hp-walk .fx-poster{ object-fit:cover; position:relative; }
.hp-walk .fx-texte{ text-align:left; padding-left:clamp(20px,6vw,160px); padding-right:clamp(20px,6vw,160px); padding-bottom:clamp(36px,9vh,120px);
  background:linear-gradient(180deg, rgba(6,4,3,0) 0, rgba(6,4,3,.55) 40%, rgba(6,4,3,.86) 100%); }
.hp-walk .fx-texte > *{ max-width:min(760px,92vw); }
.hp-walk__h{ font-family:var(--serif); font-weight:500; font-size:clamp(38px,5.6vw,120px); line-height:1.02; margin:0; color:var(--cream); text-shadow:0 4px 30px rgba(0,0,0,.7); }
.hp-walk__h3{ font-family:var(--serif); font-weight:500; font-size:clamp(32px,4.2vw,92px); line-height:1.04; margin:10px 0 0; color:var(--cream); text-shadow:0 4px 30px rgba(0,0,0,.7); }
.hp-walk__p{ font:300 clamp(16px,1.15vw,24px)/1.6 var(--sans); color:#e6dccb; margin:14px 0 0; max-width:44ch; text-shadow:0 2px 12px rgba(0,0,0,.9); }
.hp-runde{ display:inline-flex; align-items:baseline; gap:12px; margin:0; padding:8px 18px 10px; border:1px solid rgba(231,213,168,.55); background:rgba(6,4,3,.55); }
.hp-runde span{ font:500 clamp(11px,.7vw,15px)/1 var(--sans); letter-spacing:.28em; text-transform:uppercase; color:var(--gold); }
.hp-runde b{ font:500 clamp(34px,3vw,64px)/.9 var(--serif); color:var(--gold); }
.hp-walk__los{ margin-top:22px; font-size:clamp(12px,.7vw,16px); padding:clamp(16px,1.1vw,24px) clamp(30px,2.4vw,56px); }
.hp-walk .hp-symbol{ position:absolute; right:12px; top:calc(var(--nav-h) + 6px); bottom:auto; z-index:3; background:none; border:0; padding:6px 4px; min-height:28px; cursor:pointer;
  font:400 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,239,228,.5); }
.hp-walk .hp-symbol:hover{ color:var(--gold); }
.hp-walk__unten{ background:#060403; padding:clamp(30px,5vw,70px) 0 clamp(60px,8vw,110px); border-bottom:1px solid var(--line-soft); }
.hp-runden{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(231,213,168,.22); border:1px solid rgba(231,213,168,.22); }
.hp-runden li{ background:#0b0907; }
.hp-runden button{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; height:100%; min-height:120px; padding:clamp(18px,2vw,30px); background:none; border:0; color:var(--cream);
  text-align:left; cursor:pointer; transition:background .3s; position:relative; }
.hp-runden button::after{ content:"+"; position:absolute; right:18px; top:16px; color:var(--gold-deep); font-size:22px; }
.hp-runden button:hover,.hp-runden button:focus-visible{ background:#16110b; }
.hp-runden__r{ white-space:nowrap; flex:0 0 auto; font:500 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
.hp-runden__t{ font:500 clamp(22px,1.8vw,34px)/1.15 var(--serif); }
.hp-walk__cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 28px; margin:clamp(26px,3vw,44px) 0 0; }
.hp-gross-knopf{ font-size:clamp(12.5px,.8vw,17px); padding:clamp(18px,1.3vw,28px) clamp(34px,3vw,70px); }
@media (max-width:700px){
  .hp-runden{ grid-template-columns:1fr; }
  .hp-runden button{ min-height:0; flex-direction:row; align-items:baseline; gap:14px; padding:18px 44px 18px 16px; }
  .hp-runden__t{ font-size:21px; }
  .hp-walk .fx-texte{ padding-bottom:calc(var(--tab-h) + 26px) !important; }
}

/* Terminzeile: "In den Kalender" (Knopf) und "Anfahrt ↗" (Link) auf einer Linie */
.hp-termin__akt .hp-link{ display:inline-flex; align-items:center; min-height:40px; padding:0; line-height:1.2; vertical-align:middle; }

/* Breitbild: die Inhalts-Abschnitte wachsen mit (sonst 1180-px-Inseln auf 3440 px). Nur Startseite. */
@media (min-width:2200px){ .hp > .hp-ppv, .hp > .hp-fc__unten, .hp > .hp-split, .hp > .hp-termine, .hp > .hp-walk__unten, .hp > .hp-partner, .hp > .hp-footer{ zoom:1.25; } }
@media (min-width:2800px){ .hp > .hp-ppv, .hp > .hp-fc__unten, .hp > .hp-split, .hp > .hp-termine, .hp > .hp-walk__unten, .hp > .hp-partner, .hp > .hp-footer{ zoom:1.5; } }
@media (min-width:3600px){ .hp > .hp-ppv, .hp > .hp-fc__unten, .hp > .hp-split, .hp > .hp-termine, .hp > .hp-walk__unten, .hp > .hp-partner, .hp > .hp-footer{ zoom:1.75; } }
/* Kurze Handy-Schirme (Browserleisten): Datum steht schon auf dem Plakat und im Countdown-Fenster -> Platz fürs Plakat */
@media (max-height:760px){ .hp-hero[data-modus="handy"] .hp-hero__datum{ display:none; } }
/* Premium-Film läuft: das scharfe Plakat bleibt halb darüber liegen -> Schrift bleibt gestochen scharf, das Glühen kommt aus dem Film.
   Unterhalb des Films (Handy-Fassung deckt nur die oberen 83 %) bleibt das Plakat voll. */
.hp-plakat__bild{ position:relative; z-index:1; transition:opacity 1.4s ease; }
.hp-plakat__innen:has(.hp-plakat__film.laeuft) .hp-plakat__bild{
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) calc(var(--hp-film-anteil,1) * 100% - 3%), #000 calc(var(--hp-film-anteil,1) * 100%));
          mask-image:linear-gradient(180deg, rgba(0,0,0,.5) 0, rgba(0,0,0,.5) calc(var(--hp-film-anteil,1) * 100% - 3%), #000 calc(var(--hp-film-anteil,1) * 100%)); }

/* ============ Runde 3 (Alex am Samsung 04:36): Handy randlos, Effekt sichtbar ============ */
/* Rauch/Glut liegt jetzt VOR dem Plakat (aufhellend), unter dem Text */
.hp-hero__rauch{ z-index:1; }
.hp-hero__rauch:has(video.laeuft){ opacity:.3; }
.hp-hero[data-modus="seite"] .hp-hero__rauch:has(video.laeuft){ opacity:.32; }
.hp-hero[data-modus="handy"] .hp-hero__rauch:has(video.laeuft){ opacity:.6; }
/* Glut im Plakat: das Licht des Plakats (Schwerpunkt der kräftigsten Farbe, z. B. der Mond) atmet */
.hp-plakat__innen::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--hp-gx,50%) var(--hp-gy,40%), var(--hp-ton) 0, rgba(0,0,0,0) 42%); }
@media (prefers-reduced-motion:no-preference){
  .hp-glut .hp-plakat__innen::after{ animation:hpGlut 3.6s ease-in-out infinite alternate; }
}
@keyframes hpGlut{ from{ opacity:.06; } to{ opacity:.42; } }
/* Handy: Plakat randlos über die volle Breite, ohne Rahmen; Text darunter auf Verlauf */
.hp-hero[data-modus="handy"]{ padding:var(--nav-h) 0 calc(var(--tab-h) + 14px); }
.hp-hero[data-modus="handy"] .hp-plakat{ width:100%; max-width:none; overflow:hidden; }
.hp-hero[data-modus="handy"] .hp-plakat__knopf{ width:100%; }
.hp-hero[data-modus="handy"] .hp-plakat__innen{ box-shadow:none; border-radius:0; transform-origin:50% 40%; }
.hp-hero[data-modus="handy"] .hp-plakat__bild{ width:100%; height:auto; max-width:none; }
.hp-hero[data-modus="handy"] .hp-plakat::after{ display:none; }
.hp-hero[data-modus="handy"] .hp-hero__text{ margin-top:0; padding-left:16px; padding-right:16px;
  background:linear-gradient(180deg, rgba(6,4,3,0) 0, rgba(6,4,3,.72) 34px, rgba(6,4,3,.9) 70%, #060403 100%); }
.hp-hero[data-modus="handy"] .hp-hero__grund{ display:none; }
/* Handy: Film zeigt sich ganz (Schrift im Film ist am Handy scharf genug), langsame Annäherung */
.hp-hero[data-modus="handy"] .hp-plakat__innen:has(.hp-plakat__film.laeuft) .hp-plakat__bild{ -webkit-mask-image:none; mask-image:none; opacity:0; }
@media (prefers-reduced-motion:no-preference){
  .hp-hero[data-modus="handy"] .hp-plakat__innen{ animation:hpNahHandy 16s ease-in-out infinite alternate; }
}
@keyframes hpNahHandy{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
@media (max-height:700px){ .hp-hero[data-modus="handy"] .cd__num{ font-size:30px; } .hp-hero[data-modus="handy"] .cd__lbl{ margin-top:3px; font-size:10px; } .hp-hero[data-modus="handy"] .hp-hero__text{ gap:10px; } }
/* App-Knopf (eingeklappt) nicht über dem Kopf / dem Walkout */
html.hp-start.hp-imkopf .installchip{ opacity:0; visibility:hidden; pointer-events:none; }
html.hp-start .installchip{ transition:opacity .3s ease, visibility 0s linear .3s; }
html.hp-start:not(.hp-imkopf) .installchip{ transition:opacity .3s ease, visibility 0s; }
/* Kurze Handy-Schirme (Samsung mit Browserleisten ~384×620): Countdown kompakt, damit Plakatschrift frei bleibt und die Knöpfe sichtbar sind */
@media (max-height:700px){
  .hp-hero[data-modus="handy"] .hp-cd{ padding:0 10px; gap:18px; }
  .hp-hero[data-modus="handy"] .cd__num{ font-size:26px; }
  .hp-hero[data-modus="handy"] .cd__lbl{ font-size:9.5px; margin-top:2px; }
  .hp-hero[data-modus="handy"] .hp-hero__knoepfe .btn{ padding:13px 10px; }
  .hp-hero[data-modus="handy"] .hp-hero__text{ gap:8px; }
}

/* ============ Runde 4 (Alex am Samsung 05.11.): flüssig, randlos, nichts überdeckt ============ */
/* Walkout = echter Film, spielt einmal (kein Scrollen-Bild-für-Bild mehr) */
.hp-walk{ position:relative; background:#060403; overflow:hidden; isolation:isolate; min-height:min(100svh, 56.25vw + 220px); display:flex; align-items:flex-end; }
.hp-walk__film{ position:absolute; inset:0; z-index:0; }
.hp-walk__video{ width:100%; height:100%; object-fit:cover; display:block; background:#060403; }
.hp-walk::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,4,3,.55) 0, rgba(6,4,3,0) 22%, rgba(6,4,3,0) 48%, rgba(6,4,3,.82) 82%, #060403 100%); }
.hp-walk__text{ position:relative; z-index:2; width:100%; padding:clamp(120px,30vh,320px) clamp(20px,6vw,160px) clamp(34px,7vh,100px); max-width:min(1100px,100%); }
.hp-walk__text .hp-walk__p{ margin-top:14px; }
.hp-walk__text .hp-walk__los{ margin-top:24px; }
@media (min-width:900px) and (orientation:landscape){ .hp-walk{ min-height:100svh; } }
@media (max-width:860px){ .hp-walk{ min-height:calc(100svh - var(--tab-h)); } .hp-walk__text{ padding-bottom:28px; } }
.hp-walk__unten{ padding-top:clamp(22px,4vw,56px); }

/* Fighter Prime: Bild am Handy randlos über die volle Breite, kein schwarzes Band darüber */
.hp-fc__unten{ padding-bottom:clamp(28px,5vw,80px); }
@media (max-width:860px){
  .hp-prime{ padding-top:0; }
  .hp-prime .hp-split__bild{ width:100vw; max-width:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  .hp-prime .hp-split__bild img,.hp-prime .hp-bildknopf{ border-radius:0; }
  .hp-prime .hp-split__in{ gap:26px; }
}
/* Ehrlichkeit ohne Etiketten auf den Bildern: eine ruhige Zeile im Fuß */
.hp-symbolzeile{ margin:18px auto 0; max-width:60ch; font:300 12.5px/1.6 var(--sans); color:var(--muted); text-align:center; }
.hp-split__bild figcaption, .hp-symbol{ display:none !important; }

/* Kopfleiste auf der Startseite deckend (vorher schien Text beim Scrollen durch) */
html.hp-start .nav.scrolled{ background:#0A0908; -webkit-backdrop-filter:none; backdrop-filter:none; }

/* Glut ohne Mischmodus (nur Deckkraft, läuft auf dem Grafikchip) */
.hp-plakat__innen::after{ mix-blend-mode:normal; background:radial-gradient(circle at var(--hp-gx,50%) var(--hp-gy,40%), var(--hp-ton) 0, rgba(0,0,0,0) 40%); }
@keyframes hpGlut{ from{ opacity:0; } to{ opacity:.22; } }
/* Handy: kein Rauch-Mischfilm (Rauch steckt im Plakatfilm) */
@media (max-width:899px), (pointer:coarse){ .hp-hero__rauch{ display:none; } }

/* App-Hinweise am Handy: erst am Seitenende, dort ist unter dem Fuß Platz reserviert -> nichts wird überdeckt */
@media (max-width:860px){
  html.hp-start:not(.hp-ende) .installbar{ opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,16px); }
  html.hp-start .hp-platz{ height:calc(var(--tab-h) + 170px); }
}
/* Desktop ebenso: App-Hinweise erst am Seitenende (Ecke rechts unten über reserviertem Platz) */
@media (min-width:861px){
  html.hp-start:not(.hp-ende) .installbar{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px); }
  html.hp-start .hp-platz{ height:160px; }
}

/* ============ Runde 5 (Alex 05.11. 10:01: Ring nur angeschnitten, Text unter der Leiste) ============ */
/* Fight-Card-Bühne: ganzer Ring (Desktop mit Nebel: Ring im Scheinwerfer, Brennpunkt unten-mittig) */
.hp-fc .fx-nv-bild img{ object-position:50% 74%; }
/* Handy/Touch (ohne Scroll-Effekte): Bild in natürlichem Seitenverhältnis, ganzer Ring, Text darunter im Fluss
   -> nichts wird beschnitten, nichts liegt unter Kopf- oder Fußleiste */
@media (max-width:899px), (pointer:coarse){
  .hp-fc .fx-buehne{ display:block; height:auto; min-height:0; contain:none; }
  .hp-fc .fx-nv-bild{ position:relative; transform:none !important; }
  .hp-fc .fx-nv-bild > picture, .hp-fc .fx-nv-bild > picture > img{ position:static; width:100%; height:auto; object-fit:contain; }
  .hp-fc .fx-texte{ position:relative; margin-top:-26vw; padding:0 20px 8px !important; background:linear-gradient(180deg, rgba(5,4,3,0), #050403 36%); text-shadow:0 2px 14px rgba(0,0,0,.8); }
  .hp-fc .fx-phase ~ .fx-phase{ display:none; }
  .hp-fc .fx-phase{ opacity:1 !important; visibility:visible !important; transform:none !important; }
  .hp-fc h2{ font-size:clamp(30px,8.4vw,52px); }
  .hp-fc__unten{ padding-top:18px; }
}
@media (max-width:899px) and (orientation:portrait) and (min-width:601px), (pointer:coarse) and (min-width:601px){
  .hp-fc .fx-texte{ margin-top:-12vw; }
}
/* Walkout am Handy: Film in natürlichem 3:4-Format (ganze Figur, ganzer Ring am Ende), Text darunter im Fluss */
@media (max-width:899px), (pointer:coarse){
  .hp-walk{ display:block; min-height:0; }
  .hp-walk__film{ position:relative; inset:auto; aspect-ratio:16 / 9; }
  .hp-walk::after{ background:linear-gradient(180deg, rgba(6,4,3,.4) 0, rgba(6,4,3,0) 18%, rgba(6,4,3,0) 40%, #060403 calc(100vw * 9 / 16)); }
  .hp-walk__text{ margin-top:-10vw; padding:0 clamp(20px,5vw,48px) 34px; }
}
@media (max-width:600px) and (orientation:portrait){
  .hp-walk__film{ aspect-ratio:3 / 4; }
  .hp-walk::after{ background:linear-gradient(180deg, rgba(6,4,3,.4) 0, rgba(6,4,3,0) 18%, rgba(6,4,3,0) 60%, #060403 calc(100vw * 4 / 3)); }
  .hp-walk__text{ margin-top:-22vw; }
}

/* Partner-Raster: leere Restzellen nicht als graue Fläche zeigen */
.hp-logos{ background:none; border:0; gap:0; }
.hp-logos li{ box-shadow:0 0 0 .5px var(--line-soft); }

/* ============ Runde 6: Ring mit Silhouetten, Fight Card automatisch, Benachrichtigen ============ */
/* Filmschleife liegt deckungsgleich über dem Bild (gleicher Ausschnitt), erst sichtbar, wenn sie läuft */
.hp-ring__film{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 74%; opacity:0; transition:opacity .9s ease; pointer-events:none; }
.hp-ring__film.laeuft{ opacity:1; }
@media (max-width:899px), (pointer:coarse){ .hp-ring__film{ object-fit:cover; object-position:50% 50%; } }
/* Rote Ecke ? · Blaue Ecke ? */
.hp-ecken{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,40px); margin:0 0 6px; flex-wrap:wrap; }
.hp-ecke{ display:inline-flex; align-items:baseline; gap:12px; padding:10px 18px 12px; border:1px solid rgba(231,213,168,.45); background:rgba(10,8,6,.6); }
.hp-ecke--rot{ border-left:3px solid #B4472E; }
.hp-ecke--blau{ border-right:3px solid #3E6BB4; }
.hp-ecke__l{ font:500 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.hp-ecke--rot .hp-ecke__l{ color:#E08A73; } .hp-ecke--blau .hp-ecke__l{ color:#8FB0E6; }
.hp-ecke b{ font:500 clamp(30px,3.4vw,52px)/.9 var(--serif); color:var(--cream); }
.hp-ecken__punkt{ color:var(--gold-deep); font-size:24px; }
.hp-fc__folgen{ font:500 clamp(22px,2.4vw,34px)/1.2 var(--serif) !important; color:var(--cream) !important; margin:14px 0 6px !important; }
.hp-fc__klein{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
/* Hauptkampf (sobald freigegeben) */
.hp-hk{ max-width:880px; margin:0 auto; text-align:center; }
.hp-hk__zeile{ margin-bottom:18px; }
.hp-hk__paar{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(12px,3vw,40px); }
.hp-hk__ecke{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.hp-hk__foto{ width:clamp(96px,16vw,180px); aspect-ratio:1; object-fit:cover; border-radius:2px; display:block; background:#120e0a; }
.hp-hk__foto--leer{ background:radial-gradient(circle at 50% 38%, #2a221a 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #2a221a 0 46%, transparent 47%), #120e0a; }
.hp-hk__ecke--red .hp-hk__foto{ box-shadow:0 0 0 2px #B4472E; } .hp-hk__ecke--blue .hp-hk__foto{ box-shadow:0 0 0 2px #3E6BB4; }
.hp-hk__ecke--red .hp-ecke__l{ color:#E08A73; } .hp-hk__ecke--blue .hp-ecke__l{ color:#8FB0E6; }
.hp-hk__name{ font:500 clamp(22px,2.6vw,38px)/1.1 var(--serif); color:var(--cream); overflow-wrap:anywhere; }
.hp-hk__club{ color:var(--muted); font-size:14px; }
.hp-hk__vs{ font:500 clamp(20px,2.4vw,34px)/1 var(--serif); color:var(--gold); }
.hp-fc__bald{ text-align:center; }
.hp-fc__bald .hp-fc__mehr .btn{ white-space:normal; }