/* B1, 11.09.2026: nur beauftragte Band-, Schilder- und Handy-Korrekturen. */
@media screen {
  /* data-b4="fussabstand" */
  html body { --b4-leistenhoehe:44px; padding-bottom:calc(var(--b4-leistenhoehe) + 12px) !important; }
  html body .rs-banner { white-space:normal !important; overflow:visible !important; height:auto !important; max-height:none !important; }
  html body .rs-banner span { white-space:normal !important; overflow:visible !important; text-overflow:clip !important; }
  html body #bewegung-knopf {
    position:fixed !important; left:8px !important; right:auto !important; bottom:0 !important; top:auto !important;
    width:44px !important; height:var(--b4-leistenhoehe) !important; min-width:44px !important; min-height:var(--b4-leistenhoehe) !important;
    z-index:60 !important; opacity:1 !important; overflow:visible !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important; filter:none !important; transform:none !important;
  }
  html body #bewegung-knopf::before {
    content:""; position:fixed; left:0; right:0; bottom:0; height:var(--b4-leistenhoehe);
    background:rgba(10,6,4,.92); z-index:-1; pointer-events:none;
  }
  html body #bewegung-knopf::after {
    content:"Images and films: AI-generated"; position:fixed; left:62px; right:12px; bottom:0; height:var(--b4-leistenhoehe);
    display:flex; align-items:center; justify-content:flex-end; text-align:right;
    font:13px/1.3 Georgia,'Times New Roman',serif; letter-spacing:normal; text-transform:none;
    color:#c9bfae; white-space:normal; pointer-events:none;
  }
  html body.lang-de #bewegung-knopf::after { content:"Bilder und Filme: mit KI erzeugt"; }
  html body .mk-schild:not(.mk-echt):not(.mk-berechnet),
  html body .bs-ki-schild-film, html body .bs-hero-ki-hint,
  html body .bs-ki-schild-r100, html body .bg-ki-hint,
  html body .hero-ai-badge, html body .ai-badge,
  html body div[data-de="· KI-erzeugter Film"],
  html body .vstage::before, html body .mband::before, html body .bs-mitte-film::after { display:none !important; }
  /* B2: Hinweise behalten normalen Textfluss; B4 blendet dieselben Duplikate aus. */
  html body .bs-hero-ki-hint, html body .bs-ki-schild-r100, html body .bg-ki-hint {
    position:static !important; inset:auto !important; transform:none !important;
    font-size:13px !important; line-height:1.4 !important; color:#a99f90 !important; white-space:normal !important;
  }
}
.b1-documentation { max-width:900px; margin:14px auto; padding:0 18px; font-size:16px; line-height:1.5; color:var(--ink-soft,#aeb7c6); text-align:center; }
/* Die 404-Seite hatte bisher kein Band. Vorhandene Seiten behalten ihre Bandfarben. */
.b1-added-banner { background:linear-gradient(180deg,#0a1128,#0b1430); border-bottom:1px solid rgba(201,162,63,.55); text-align:center; padding:9px 14px; color:#e9d8a6; font:16px Georgia,'Times New Roman',serif; }
/* D: dieselben Werte wie die bisherige .card-h3, einschließlich späterer Typografie. */
html body .card h2.b1-card-heading { font-family:var(--serif-head); font-weight:500 !important; font-size:22px; line-height:1.25 !important; letter-spacing:inherit !important; color:var(--gold-soft); margin:0 0 8px; }
/* C: eigene Variable gewinnt auch gegen bestehendes opacity:0 !important. */
html body h1.b1-heading-fallback, html body h2.b1-heading-fallback {
  --b1-heading-opacity:0; opacity:var(--b1-heading-opacity) !important; transition-property:transform !important;
  animation:b1-heading-visible 1.2s steps(1,end) both !important;
}
@keyframes b1-heading-visible { from { --b1-heading-opacity:0; } to { --b1-heading-opacity:1; } }
@media screen and (max-width:640px) {
  html body .hero .badges, html body .bfl-tabs { display:flex; flex-wrap:wrap !important; gap:8px !important; min-width:0; max-width:100%; }
  html body .sport-badge, html body .bfl-tab { white-space:normal !important; min-width:0; max-width:100%; }
  html body .hero .eyebrow, html body .faq-hero-stage .hero-pulse .eyebrow {
    color:#FFB07A !important; font-size:13px !important; letter-spacing:.06em !important; line-height:1.4 !important;
    max-width:100%; white-space:normal !important;
  }
}
@media (max-width:480px) { html body .card h2.b1-card-heading { font-size:clamp(18px,6vw,24px) !important; } }

/* data-b4="vorzeile" */
@media screen and (max-width:414px) {
  html body .hero .inner.wk-hero-grid[data-b4="vorzeilen-rahmen"] { padding-left:8px !important; padding-right:8px !important; }
  html body .hero .eyebrow[data-b4="vorzeile"] { font-size:12px !important; letter-spacing:.03em !important; max-width:100%; overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important; }
}

/* 12.09.2026 Ecken-Chips statt Balken: Seh-Pruefung 12.09. - der 44-px-Balken verdeckte Text und Knoepfe; jetzt Kennzeichnung als Pille rechts unten, Pause als Kreis links unten. */
@media screen {
  html body #bewegung-knopf::before { display:none !important; content:none !important; }
  html body #bewegung-knopf::after {
    left:auto !important; right:8px !important; bottom:8px !important; height:auto !important;
    padding:5px 10px; border-radius:999px; background:rgba(10,6,4,.82); border:1px solid rgba(201,162,63,.30);
    font-size:11px !important; line-height:1.25; max-width:min(62vw,420px); white-space:normal; text-align:right; opacity:.9;
  }
  html body #bewegung-knopf { bottom:8px !important; left:8px !important; border-radius:50% !important; opacity:.88 !important; }
}