/* HFC – Unterseiten-Verbesserungen (Vorschau 05.11.2026). Gilt nur auf /live (Hauptevent), /tickets, /kaempfen, /werbung, /fightcard
   über Klassen am <html> (us-live, us-tickets, us-kaempfen, us-werbung, us-fightcard), die beim Seitenwechsel wieder entfernt werden. */

/* Plakat (Querformat, ganzes Motiv, nie beschnitten) */
.us-plakat{ margin:0 auto 26px; max-width:1100px; }
.us-plakat img{ display:block; width:100%; height:auto; border-radius:1px;
  box-shadow:0 0 0 1px rgba(231,213,168,.55), 0 0 0 6px rgba(10,9,8,.6), 0 0 0 7px rgba(194,163,94,.28), 0 40px 90px -40px rgba(0,0,0,.9); }
.us-plakat--tickets{ max-width:760px; margin:6px auto 28px; }
@media (max-width:700px){
  .us-plakat{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:none; }
  .us-plakat img{ box-shadow:none; border-radius:0; }
}
html.us-live #app .pad-top,html.us-tickets #app .pad-top{ padding-top:calc(var(--nav-h) + 18px); }

/* Faktenzeile: Datum · Beginn · Halle · Anfahrt · Kalender */
.us-fakten{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 0; margin:14px 0 0; font:500 12px/1.4 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cream); }
.us-fakt{ display:inline-flex; align-items:center; min-height:40px; padding:0 12px; position:relative; background:none; border:0; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.us-fakt + .us-fakt::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:var(--gold-deep); }
.us-fakt--knopf,.us-fakt--link{ color:var(--gold); cursor:pointer; text-decoration:none; }
.us-fakt--knopf:hover,.us-fakt--link:hover,.us-fakt--knopf:focus-visible,.us-fakt--link:focus-visible{ color:var(--cream); }

/* Vertrauenszeile am Kaufknopf (im festen Warenkorb-Balken) */
.us-vertrauen{ max-width:1120px; margin:0 auto; padding:0 20px 12px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.us-vertrauen a{ color:var(--gold); }
html.us-tickets #app .wrap{ padding-bottom:180px !important; }

/* PPV-Kasten auf /live */
.us-ppv{ display:flex; flex-wrap:wrap; gap:18px 36px; align-items:center; justify-content:space-between; padding:clamp(20px,3vw,32px); border:1px solid var(--line);
  background:linear-gradient(90deg,#16110b,#0d0b08 70%); }
.us-ppv__txt{ flex:1 1 380px; min-width:0; }
.us-zeile{ font:500 12px/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.us-ppv__h{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.2vw,38px); line-height:1.1; margin:0 0 8px; color:var(--cream); }
.us-ppv__p{ margin:0; color:var(--muted); line-height:1.6; }
.us-ppv__akt{ display:flex; flex-direction:column; gap:8px; flex:0 1 auto; min-width:0; }

/* Ring mit Silhouetten (leerer Fight-Card-Zustand) – ganzes Motiv, Text darunter im Fluss */
.us-ring{ text-align:center; margin:8px auto 0; max-width:1100px; }
.us-ring__bild{ position:relative; }
.us-ring__bild img{ display:block; width:100%; height:auto; }
.us-ring__bild .hp-ring__film{ object-position:50% 50%; }
.us-ring__h{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,54px); line-height:1.1; margin:22px auto 16px; max-width:18ch; color:var(--cream); }
.us-ring__folgen{ font:500 clamp(22px,2.4vw,32px)/1.2 var(--serif); color:var(--cream); margin:14px 0 6px; }
.us-ring__klein{ color:var(--muted); font-size:15px; line-height:1.6; margin:0 auto; max-width:52ch; }
.us-knoepfe{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:22px 0 0; }
.us-knoepfe .btn{ white-space:normal; }
@media (max-width:700px){ .us-ring__bild{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } }

/* /kaempfen: Walkout-Film + Runden als Kopf */
.us-walk{ margin:0 auto 34px; max-width:1100px; }
.us-walk__film{ aspect-ratio:16 / 9; background:#060403; overflow:hidden; }
.us-walk__video{ width:100%; height:100%; object-fit:cover; display:block; }
.us-runden{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid rgba(231,213,168,.22); border-top:0; }
.us-runden li{ padding:14px 16px; display:flex; flex-direction:column; gap:6px; min-width:0; }
.us-runden li + li{ border-left:1px solid rgba(231,213,168,.22); }
.us-runden span{ font:500 11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.us-runden b{ font:500 clamp(17px,1.6vw,24px)/1.2 var(--serif); color:var(--cream); }
@media (max-width:600px) and (orientation:portrait){
  .us-walk{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
  .us-walk__film{ aspect-ratio:3 / 4; }
  .us-runden{ grid-template-columns:1fr; border-left:0; border-right:0; }
  .us-runden li{ flex-direction:row; align-items:baseline; gap:14px; padding:12px 20px; }
  .us-runden li + li{ border-left:0; border-top:1px solid rgba(231,213,168,.22); }
}
/* Überbreite am Handy (Ursache: Datenschutz-Hinweis steht als Flex-Element neben „Weiter“ und ragt 41 px über den Rand) */
html.us-kaempfen .wz-nav{ flex-wrap:wrap; }
html.us-kaempfen .wz-nav .ds-hinweis{ flex:1 1 100%; min-width:0; order:3; }
/* Feinschliff nach Sichtprüfung */
html.us-tickets #app .section-head .lead{ display:none; }   /* Datum · Halle steht jetzt in der Faktenzeile */
@media (min-width:701px){ .us-plakat--tickets{ max-width:500px; } }   /* Ticketkarten bleiben am Desktop im ersten Bildschirm */
.us-walk{ width:min(1100px, calc(100vw - 40px)); max-width:none; margin-left:calc(50% - min(550px, 50vw - 20px)); margin-right:0; }
@media (max-width:600px) and (orientation:portrait){ .us-walk{ width:100vw; margin-left:calc(50% - 50vw); } }
@media (min-width:601px){ .us-walk__film{ aspect-ratio:auto; height:min(56vh, 560px); } }   /* Formular bleibt am Desktop im Blick */