/* ============================================================
   SGV Hero (Ticket-Held F3) — portiert aus ticket-hero.css + Inline-CSS
   Token-Substitution: sgv-blau→brand, akzent→accent, anthrazit→ink,
   navy-tief→surface, eisblau→accent-soft. Assets absolut aus uploads/sgv/.
   ============================================================ */

/* Ticket-Held-Serie (T1–T5): gemeinsame Struktur — Claim → Sub → großes Ticket → CTAs → Countdown */
.thero { min-height: 100svh; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.thero nav { position: relative; z-index: 8; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem clamp(1.2rem, 4vw, 3rem); }
.thero nav img { height: 46px; }
.thero nav .navline { font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; color: #fff; }

.thero .wrap { position: relative; z-index: 6; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .5rem 1.2rem 2.2rem; }

.thero .eyebrow { margin-bottom: 1.4rem; }
.thero h1.claim { font-weight: 900; text-transform: uppercase; line-height: .95; font-size: clamp(2rem, 5.4vw, 4.2rem); }
.thero h1.claim .c1 { color: transparent; -webkit-text-stroke: 2px #fff; }
.thero .sub { margin-top: .55rem; font-weight: 700; font-size: clamp(1rem, 2.2vw, 1.45rem); color: #fff; }
.thero .sub b { color: #fff; }

/* ---------- Das Ticket (groß) ---------- */
.tscene { perspective: 1500px; margin-top: clamp(1.4rem, 3vh, 2.4rem); position: relative; z-index: 6; }
.ticket {
  position: relative; width: min(780px, 94vw); display: block; padding-right: 132px;
  background: #fff; color: var(--color-ink); text-align: left;
  box-shadow: 0 46px 110px rgba(2,12,35,.65), 0 0 0 1px rgba(255,255,255,.1);
  transform-style: preserve-3d; transition: transform .25s ease; will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .tscene { animation: floaty 6s ease-in-out infinite; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
}
.t-main { padding: clamp(1.3rem, 3vw, 2.1rem) clamp(1.3rem, 3vw, 2.2rem); border-right: 3px dashed #c9d6e6; position: relative; }
.t-main::before, .t-main::after { content: ''; position: absolute; right: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--tk-hole, var(--color-surface)); z-index: 2; }
.t-main::before { top: -15px; } .t-main::after { bottom: -15px; }
.t-tag { display: inline-block; background: var(--color-brand); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; padding: .32rem .65rem; }
.t-tag.ghost { background: #eef4fb; color: var(--color-brand); margin-left: .35rem; }
.t-match { display: flex; align-items: center; gap: clamp(.7rem, 2vw, 1.2rem); font-weight: 900; text-transform: uppercase; font-size: clamp(1.05rem, 2.6vw, 1.65rem); line-height: 1.05; margin-top: .65rem; }
.t-match img { height: clamp(40px, 5.2vw, 54px); }
.t-match .vs { color: var(--color-accent); font-style: italic; font-size: clamp(.9rem, 2vw, 1.3rem); }
.t-meta { margin-top: .55rem; font-weight: 700; font-size: clamp(.85rem, 1.8vw, 1.05rem); color: #35506d; line-height: 1.4; }
.t-meta b { color: var(--color-ink); font-size: clamp(.95rem, 2vw, 1.15rem); }
.t-blockline { margin-top: .5rem; display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #8296ab; }
.t-blockline .dash { flex: 1; border-bottom: 2px dashed #c9d6e6; transform: translateY(-3px); }
.t-barcode { position: absolute; top: 0; right: 0; bottom: 0; width: 132px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1rem .6rem; overflow: hidden; }
.t-barcode span:first-child { display: none; }
.t-barcode .bars { height: 104px; width: 46px; background: repeating-linear-gradient(180deg, var(--color-ink) 0 3px, transparent 3px 6px, var(--color-ink) 6px 8px, transparent 8px 12px); }
.t-barcode span { font-size: .58rem; text-transform: uppercase; letter-spacing: .2em; color: #8296ab; writing-mode: vertical-rl; }
.t-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(169,207,239,.4) 48%, transparent 62%); background-size: 260% 100%; background-position: 120% 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .t-shine { animation: shine 5.5s ease-in-out infinite; } @keyframes shine { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -40% 0; } } }

/* Countdown-Abriss (hängt direkt am Ticket, Variante T4 u. a.) */
.t-stub {
  width: min(780px, 94vw); background: #fff; color: var(--color-ink);
  border-top: 3px dashed #c9d6e6; display: flex; align-items: center; justify-content: space-between;
  padding: .8rem clamp(1.3rem, 3vw, 2.2rem); box-shadow: 0 26px 60px rgba(2,12,35,.5);
  font-variant-numeric: tabular-nums;
}
.t-stub .lbl { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; color: #8296ab; }
.t-stub .cells { display: flex; gap: 1.1rem; }
.t-stub .cells div { display: flex; align-items: baseline; gap: .3rem; }
.t-stub .cells b { font-weight: 900; font-size: 1.25rem; color: var(--color-brand); }
.t-stub .cells span { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; color: #8296ab; }

/* ---------- CTAs + Hinweis + Countdown ---------- */
.cta-row { margin-top: clamp(2rem, 3.8vh, 3rem); display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 6; }
.cta-row .btn-primary { font-size: clamp(.95rem, 1.9vw, 1.15rem); padding: 1.15rem clamp(1.8rem, 4vw, 3rem); }
.mini { margin-top: 1.3rem; font-size: .88rem; color: #fff; position: relative; z-index: 6; }
.mini a { color: #fff; font-weight: 600; }

.cd-chips { display: flex; justify-content: center; gap: .7rem; margin-top: clamp(1.3rem, 3vh, 2rem); position: relative; z-index: 6; font-variant-numeric: tabular-nums; }
.cd-chips .cell { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: .55rem .95rem; min-width: 72px; text-align: center; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); backdrop-filter: blur(4px); }
.cd-chips b { display: block; font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 900; }
.cd-chips span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #fff; }
.cd-label { margin-top: .5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .64rem; color: #fff; position: relative; z-index: 6; }

.cd-flip { display: flex; justify-content: center; gap: clamp(.5rem, 1.6vw, 1rem); margin-top: clamp(1.3rem, 3vh, 2rem); position: relative; z-index: 6; font-variant-numeric: tabular-nums; }
.cd-flip .digit { position: relative; background: linear-gradient(180deg, #10408a, #082b63); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 14px 40px rgba(2,12,35,.5), inset 0 1px 0 rgba(255,255,255,.18); width: clamp(64px, 9vw, 104px); padding: .7rem 0 .5rem; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); }
.cd-flip .digit::after { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: rgba(255,255,255,.18); }
.cd-flip b { display: block; font-size: clamp(1.7rem, 4vw, 2.9rem); font-weight: 900; line-height: 1; color: #fff; }
.cd-flip span { display: block; margin-top: .35rem; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: #fff; }

.thero .after { min-height: 30svh; display: flex; align-items: center; justify-content: center; background: #06214f; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; }

@media (max-width: 640px) {
  .ticket { padding-right: 64px; }
  .t-barcode { width: 64px; }
  .t-barcode .bars { width: 26px; height: 80px; }
  .t-stub .cells { gap: .7rem; }
  .thero nav .navline { display: none; }
}

/* ================= Feintuning-Serie F1–F5: Aufreiß-Ticket ================= */
.tearwrap { position: relative; display: flex; align-items: stretch; filter: drop-shadow(0 46px 70px rgba(2,12,35,.6)); }
.tear-body {
  position: relative; background: #fff; color: var(--color-ink); text-align: left;
  padding: clamp(1.1rem, 2.2vw, 1.75rem) clamp(1.4rem, 3vw, 2.4rem);
  width: min(640px, calc(94vw - 96px));
}
.tear-rip {
  position: relative; background: #fff; width: clamp(96px, 12vw, 150px);
  border-left: 3px dashed #c9d6e6; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .7rem; padding: 1rem .5rem;
  cursor: grab; touch-action: none; user-select: none; will-change: transform;
}
.tear-rip:active { cursor: grabbing; }
.tear-rip .bars { height: clamp(96px, 16vh, 150px); width: 46px; background: repeating-linear-gradient(180deg, var(--color-ink) 0 3px, transparent 3px 6px, var(--color-ink) 6px 8px, transparent 8px 12px); }
.tear-rip .riplabel { font-size: .58rem; text-transform: uppercase; letter-spacing: .18em; color: #8296ab; writing-mode: vertical-rl; }
.tear-rip::before, .tear-rip::after { content: ''; position: absolute; left: -15px; width: 28px; height: 28px; border-radius: 50%; background: var(--tk-hole, #0d2a55); z-index: 2; }
.tear-rip::before { top: -15px; } .tear-rip::after { bottom: -15px; }
.tear-hint {
  position: absolute; right: -12px; top: -44px; z-index: 5; display: flex; align-items: center; gap: .4rem;
  background: var(--color-accent); color: #fff; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .64rem; padding: .45rem .8rem; white-space: nowrap;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%, 0 6px);
}
@media (prefers-reduced-motion: no-preference) {
  .tear-hint { animation: hintNudge 1.6s ease-in-out infinite; }
  @keyframes hintNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
}
.tear-rip.dragging { transition: none; }
.tear-rip.torn { animation: ripFly .7s cubic-bezier(.3,.4,.4,1) forwards; pointer-events: none; }
@keyframes ripFly { 0% { transform: translateX(0) rotate(0); opacity: 1; } 100% { transform: translateX(190%) translateY(34px) rotate(26deg); opacity: 0; } }
.tearwrap.torn .tear-body { animation: bodyKick .5s ease-out; }
@keyframes bodyKick { 0% { transform: translateX(0); } 30% { transform: translateX(-10px) rotate(-.6deg); } 100% { transform: translateX(0); } }
.tearwrap.torn .tear-hint { display: none; }
.tear-confetti i { position: absolute; width: 8px; height: 12px; opacity: 0; z-index: 9; }
.tear-confetti i { animation: confettiFly .9s ease-out forwards; }
@keyframes confettiFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--cx), var(--cy)) rotate(var(--cr)); }
}

/* Tear-Ticket Innenleben (gleiche Optik wie t-main) */
.tear-body .t-tag { display: inline-block; background: var(--color-brand); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; padding: .34rem .68rem; }
.tear-body .t-tag.ghost { background: #eef4fb; color: var(--color-brand); margin-left: .35rem; }

/* Größen-Modifikatoren der F-Serie */
.thero.f-serie h1.claim { font-size: clamp(2.6rem, 6.8vw, 5.4rem); }
.thero.f-serie .sub { font-size: clamp(1.05rem, 2.4vw, 1.6rem); }
.thero.f-mega-claim h1.claim { font-size: clamp(2.9rem, 8.4vw, 6.8rem); }
.thero.f-mega-ticket .tear-body { width: min(760px, calc(94vw - 110px)); }
.thero.f-mega-ticket .t-match { font-size: clamp(1.2rem, 3vw, 2rem); }
.f-serie .cd-chips .cell { min-width: 92px; padding: .75rem 1.1rem; }
.f-serie .cd-chips b { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.f-serie .cd-flip .digit { width: clamp(76px, 11vw, 132px); }
.f-serie .cd-flip b { font-size: clamp(2.1rem, 5vw, 3.7rem); }

/* F-Serie Mobile-Härtung */
@media (max-width: 640px) {
  .f-serie .tscene { margin-top: 3.4rem; }
  .tear-hint { animation: none; top: -42px; right: 6px; }
  .tear-body { width: calc(94vw - 76px); padding: 1.1rem 1rem; }
  .tear-rip { width: 76px; }
  .tear-rip .bars { width: 28px; height: 84px; }
  .tear-body .t-match { font-size: 1.02rem; gap: .55rem; }
  .tear-body .t-match img { height: 34px; }
  .tear-body .t-meta { font-size: .82rem; }
  .tear-body .t-meta b { font-size: .9rem; }
  .thero.f-mega-claim h1.claim { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .f-serie .cd-chips .cell { min-width: 74px; padding: .55rem .7rem; }
}

/* ===== Progressiver Riss (Final-Build): Flug startet an der Zieh-Position ===== */
@keyframes ripFly {
  0% { transform: translateX(var(--startx, 0)) rotate(var(--startr, 0deg)); opacity: 1; }
  100% { transform: translateX(calc(var(--startx, 0px) + 240px)) translateY(44px) rotate(32deg); opacity: 0; }
}
.tear-rip.torn { animation: ripFly .6s cubic-bezier(.3,.4,.4,1) forwards; }

/* Sichtbare Risskante am Ticket-Körper, sobald gerissen wird */
.tear-body::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: -7px; width: 9px;
  background: #fff; opacity: 0; transition: opacity .12s ease;
  clip-path: polygon(0 0, 100% 3%, 20% 7%, 95% 12%, 30% 17%, 100% 22%, 25% 27%, 90% 32%, 20% 37%, 100% 42%, 30% 47%, 95% 52%, 22% 57%, 100% 62%, 28% 67%, 92% 72%, 20% 77%, 100% 82%, 30% 87%, 95% 92%, 22% 96%, 100% 100%, 0 100%);
}
.tearwrap.tearing .tear-body::after { opacity: 1; }
.tearwrap.tearing { filter: drop-shadow(0 46px 70px rgba(2,12,35,.6)) drop-shadow(0 0 34px rgba(47,138,230,.28)); }
.tearwrap.tearing .tear-hint { transition: opacity .1s linear; }


/* ===== Responsive: hoehen-adaptive Hero-Skalierung (14"/13" Laptops) ===== */
@media (min-width: 861px) and (max-height: 1040px) {
  .nav-main.m5 .brand img { height: 64px; }
}
@media (min-width: 861px) and (max-height: 860px) {
  .nav-main.m5 .brand img { height: 56px; }
}
/* ===== Responsive: Mobile-Verdichtung (Ticket bleibt above the fold) ===== */
@media (max-width: 860px) {
  .thero { padding-top: 110px !important; }
  .thero .wrap { padding-bottom: 5.2rem; justify-content: flex-start; }
  .thero .eyebrow { font-size: .6rem; letter-spacing: .12em; }
  .thero.f-serie h1.claim { font-size: clamp(2rem, 9.6vw, 2.9rem); }
  .thero .sub { font-size: .95rem; margin-top: .4rem; }
  .f-serie .cd-flip .digit { width: clamp(58px, 17vw, 76px); padding: .5rem 0 .4rem; }
  .cd-flip { gap: .45rem; }
  .tscene { margin-top: 1.25rem !important; }
  .cta-row { margin-top: .85rem; }
  .tear-hint { top: -30px !important; right: 0 !important; }
  .cta-row .btn-primary { padding: .9rem 1.3rem; font-size: .88rem; }
  .nav-main.m5 .brand img { height: 52px; }
  .nav-main.m5.scrolled .brand img { height: 40px; }
}
@media (max-width: 860px) and (max-height: 780px) {
  .thero .wrap { zoom: .88; }
}


/* --- Stage/Beams/Dust + Hero-Infobox (aus Inline-CSS F3) --- */

  /* ===== Finaler AF: F3 · Mega-Ticket (Bühne T2 + Partikel + Aufreiß-Ticket) ===== */
  .f-stage { --tk-hole: #0d2a55; }
  .f-stage .stage-bg { position: absolute; inset: -7%; background: url('https://sgv.hotbytes.rocks/wp-content/uploads/sgv/atmo-1.jpg') center 30%/cover; filter: saturate(1.05) brightness(.75); }
  .f-stage .stage-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,22,55,.86) 0%, rgba(5,22,55,.6) 45%, rgba(4,18,45,.95) 100%); }
  @media (prefers-reduced-motion: no-preference) {
    .f-stage .stage-bg { animation: kenburns 18s ease-in-out infinite alternate; }
    @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.12) translateY(-2%); } }
  }
  .f-stage .beam { position: absolute; top: -22%; width: 46vw; height: 130%; pointer-events: none; opacity: .45; mix-blend-mode: screen;
    background: conic-gradient(from 12deg at 50% 0%, transparent 44%, rgba(169,207,239,.5) 50%, transparent 56%); }
  .f-stage .beam.l { left: -8vw; } .f-stage .beam.r { right: -8vw; transform: scaleX(-1); }
  @media (prefers-reduced-motion: no-preference) {
    .f-stage .beam.l { animation: sweepL 11s ease-in-out infinite alternate; }
    .f-stage .beam.r { animation: sweepR 13s ease-in-out infinite alternate; }
    @keyframes sweepL { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
    @keyframes sweepR { from { transform: scaleX(-1) rotate(-7deg); } to { transform: scaleX(-1) rotate(6deg); } }
  }
  .f-stage .dust { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
  .f-stage .dust i { position: absolute; display: block; border-radius: 50%; background: var(--color-accent-soft); opacity: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .f-stage .dust i { animation: rise linear infinite; }
    @keyframes rise { 0% { transform: translateY(15vh); opacity: 0; } 12% { opacity: .55; } 88% { opacity: .3; } 100% { transform: translateY(-92vh) translateX(4vw); opacity: 0; } }
  }
  /* ===== Hero-Infobox (Kundenfeedback 31.07.): Zaehler als Headline + kompakter
     Countdown in EINER Box — loest den frueheren XXL-Countdown ab. ===== */
  .hero-info {
    display: flex; flex-direction: column; align-items: center; gap: 1.15rem;
    margin: clamp(2.4rem, 4.5vh, 3.4rem) auto 0; padding: 1.5rem 2rem; max-width: 640px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px; position: relative; z-index: 6; backdrop-filter: blur(4px);
  }
  .hero-info .tk-counter { margin-top: 0; }
  .hero-info .tk-counter .tk-txt { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; }
  .hero-info .tk-counter .tk-txt b { font-size: 1.22em; }
  .hero-info .cd-flip { margin-top: 0; gap: clamp(.5rem, 1.2vw, .8rem); }
  .hero-info .cd-flip .digit { width: auto; min-width: 78px; padding: .55rem .6rem .45rem; clip-path: none; border-radius: 10px; }
  .hero-info .cd-flip .digit b { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
  .hero-info .cd-flip .digit span { font-size: .58rem; margin-top: .3rem; }
  .hero-info .cd-label { margin-top: 0; }
  .tscene { margin-top: clamp(2.8rem, 5.5vh, 4.4rem); }


  .thero { padding-top: 80px; }


/* --- Mobil-Feinschliff (Quelle 30.07.2026), Nav-Regeln auf cb-Selektoren umgeschrieben --- */

  /* =====================================================================
     MOBIL-FEINSCHLIFF (30.07.2026) — gilt NUR bis 860px Breite.
     Die Desktop-Ansicht bleibt davon unberuehrt.

     Ausgangslage, auf einem iPhone-14-Format (390x844) gemessen:
     Der Hero war 1034px hoch — 190px mehr als der Bildschirm. Die
     Schaltflaechen lagen bei 769-891px und damit unter der Sticky-Leiste
     (764-844px). Genau das war die gemeldete Ueberlappung.

     Dieser Block steht bewusst als LETZTER im Dokument: gleich starke
     Regeln weiter oben (u. a. das 84px-Logo) haetten sonst gewonnen und
     die Mobil-Regeln in ticket-hero.css wirkungslos gemacht.
     ===================================================================== */
  @media (max-width: 860px) {

    /* --- Navigation: das 84px-Logo kostete allein 111px Kopfhoehe --- */
    .cb-header_root { padding: .55rem clamp(1rem, 4vw, 3rem); }
    .cb-header_brand_logo { height: 46px; }
    .cb-header_root.scrolled .cb-header_brand_logo { height: 38px; }
    /* Die Schaltflaeche in der Kopfleiste entfaellt (Entscheidung Luca):
       die feste Leiste am unteren Bildrand traegt dieselbe Aufforderung und
       ist mit dem Daumen besser erreichbar. Oben wird dadurch Platz frei. */
    .cb-header_cta { display: none; }

    /* --- Hero: oben weniger Vorlauf, unten Platz fuer die Sticky-Leiste --- */
    .thero { padding-top: 76px !important; }
    .thero .wrap { padding-bottom: 4.4rem; justify-content: flex-start; }

    /* GRUNDREGEL (Entscheidung Luca, 31.07.): In der Handy-Ansicht wird NICHTS
       weggelassen — es wird nur angepasst. Auf dem Handy darf gescrollt werden;
       der Kopfbereich muss nicht auf einen Bildschirm passen. Einzige harte
       Bedingung: nichts ueberlappt, und nichts verschwindet dauerhaft hinter
       der festen Leiste am unteren Rand. */
    .thero .eyebrow { font-size: .58rem; letter-spacing: .1em; line-height: 1.5; }
    .thero.f-serie h1.claim { font-size: clamp(2.1rem, 10vw, 2.9rem); line-height: 1.02; }

    /* Countdown als kompakte Zeile statt vier grosser Kacheln —
       die kosteten mit Beschriftung rund 90px. */
    .cd-flip { gap: .3rem; margin-top: .7rem; }
    .f-serie .cd-flip .digit { width: auto; min-width: 40px; padding: .25rem .35rem; }
    .f-serie .cd-flip .digit b { font-size: 1.25rem; }
    .f-serie .cd-flip .digit span { font-size: .45rem; }
    .cd-label { font-size: .5rem; margin-top: .3rem; }

    /* Das Ticket beanspruchte allein 265px. `zoom` statt `transform`:
       transform wuerde nur optisch verkleinern, der Platz bliebe belegt.
       Der Abstand nach oben haelt den Hinweis „Hier aufreissen" von der Zeile
       des Ticket-Zaehlers weg (gemessen: 89px Ueberschneidung). */
    .tscene { margin-top: 3.6rem !important; zoom: .74; }

    /* Beide Schaltflaechen bleiben Schaltflaechen, untereinander und volle
       Breite — gut mit dem Daumen zu treffen. */
    .cta-row { flex-direction: column; align-items: stretch; gap: .55rem;
      margin-top: 1rem; flex-wrap: nowrap; }
    .cta-row .btn-primary, .cta-row .btn-ghost {
      width: 100%; font-size: .86rem; padding: .95rem .8rem; text-align: center; }
    .thero .mini { font-size: .72rem; line-height: 1.55; margin-top: .8rem; }

    /* --- Abschluss-Sektion: der Verlauf lief nach RECHTS aus (fuer die
       Desktop-Ansicht gebaut, wo der Text links steht). Auf dem Handy
       laeuft der Text ueber die volle Breite und stand rechts auf fast
       durchsichtigem Grund. Hier deckt der Verlauf von UNTEN ab. --- */
    .gm-final .gm-scrim {
      background:
        linear-gradient(180deg, rgba(5,22,55,.30) 0%, rgba(5,22,55,.10) 26%,
                                rgba(4,18,45,.72) 58%, rgba(4,18,45,.93) 100%),
        linear-gradient(90deg, rgba(5,22,55,.45) 0%, rgba(5,22,55,.20) 70%,
                               rgba(5,22,55,.12) 100%);
    }
    /* Auf dem Handy wird die Sektion aufgeteilt statt uebereinandergelegt:
       oben das Mannschaftsfoto in seinem natuerlichen Seitenverhaeltnis, darunter
       der Text auf ruhigem dunklem Grund.
       Warum: Bei 390px Breite fuellt das Foto (1600x1067) die Hoehe exakt aus —
       ein senkrechter Ausschnitt hat gar keine Wirkung, und die Mannschaft
       (im Bild bei 47-86% der Hoehe) lag komplett hinter dem Text. Ein starker
       Zoom wiederum zeigte nur noch sechs bis acht Spieler. So ist die ganze
       Mannschaft zu sehen UND der Text uneingeschraenkt lesbar. */
    .gm-final { display: block; min-height: 0; align-items: stretch; }
    .gm-photo { position: relative; inset: auto; width: 100%;
      aspect-ratio: 1600 / 1067; background-size: cover; background-position: 50% 50%; }
    .gm-scrim { display: none; }
    /* Der Textblock bringt seinen eigenen dunklen Grund mit, statt sich auf den
       Verlauf ueber dem Foto zu verlassen. So bleibt die Schrift lesbar, egal
       welches Bild dahinter liegt oder wie hell es an dieser Stelle ist. */
    .gm-inner { padding: 2.2rem 1.3rem 2.6rem; background: var(--color-surface); }
    .gm-text { font-size: .95rem; margin: .8rem 0 1.4rem; }
    /* Der Sponsoren-Verweis stand zu dicht am unteren Rand */
    .gm-sponsor { margin-bottom: .4rem; }
  }

  /* Flache Ansichten (Hoehe bis 780px). Das betrifft NICHT nur kleine Geraete:
     Ein iPhone 14 misst zwar 844px, aber Safari zeigt beim Seitenaufruf die
     volle Adressleiste — dann bleiben rund 664px uebrig, beim Weiterscrollen
     rund 745px. Die Schwelle liegt bewusst ueber beiden Werten, damit auf
     demselben Geraet nicht zwischen zwei Ansichten hin- und hergesprungen
     wird, waehrend sich die Safari-Leisten ein- und ausblenden. */
  @media (max-width: 860px) and (max-height: 780px) {
    .thero { padding-top: 64px !important; }
    .thero .wrap { padding-bottom: 5.6rem; }
    .thero .eyebrow { font-size: .52rem; }
    .thero.f-serie h1.claim { font-size: clamp(1.6rem, 7.6vw, 2.1rem); }
    .thero .sub { font-size: .82rem; }
    .f-serie .cd-flip .digit { width: clamp(42px, 13vw, 54px); padding: .3rem 0 .25rem; }
    /* Die Anzeige der freien Plaetze BLEIBT — sie ist ein eigenes Argument
       („schon X vergeben") und wird nicht wegen Platzmangels geopfert.
       Wichtig: Dieser Block greift auch auf einem iPhone 14. Safari zeigt beim
       Seitenaufruf die volle Adressleiste, dann bleiben von 844 nur rund 664
       nutzbare Pixel — das Geraet ist in dem Moment so flach wie ein iPhone SE. */
    .tk-counter { margin-top: .9rem; }
    /* Der Abstand muss den Aufreiss-Hinweis tragen, der ueber dem Ticket sitzt:
       gemessen 18px hoch plus Luft nach oben und unten. Der Wert wirkt durch
       `zoom` verkleinert und ist deshalb groesser gesetzt, als er aussieht. */
    .tscene { margin-top: 4rem !important; zoom: .7; }
    /* -34px wirken durch zoom .7 als rund -24px; der Hinweis ist 18px hoch und
       steht damit sichtbar ueber der Ticket-Kante statt darauf. */
    .tear-hint { top: -34px !important; right: 0 !important; }
    .cta-row { margin-top: .9rem; gap: .45rem; }
    .cta-row .btn-primary, .cta-row .btn-ghost { font-size: .8rem; padding: .85rem .6rem; }
    .thero .mini { font-size: .68rem; margin-top: .7rem; }
  }
/* --- WP-Port-Ergänzungen --- */
.tear-opener { display: none; }
.cb-hero_tear_match_logo { filter: invert(32%) sepia(60%) saturate(900%) hue-rotate(185deg); }
/* Live-Counter-Komponente: Hero-Overrides (Quelle .hero-info .tk-*) */
.hero-info .cb-live-counter { margin-top: 0; }
.hero-info .cb-live-counter__txt { font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 800; }
.hero-info .cb-live-counter__txt b { font-size: 1.22em; }