/* Backstage Access (KANAL-02a): Bühne mit Telefon, schmaler Streifen, Fuß mit den Kanälen.
   Alle Klassen tragen den Vorsatz ba-, damit nichts mit Seitenregeln kollidiert.
   Die Farben kommen aus den Hausfarben (djmt-core.css); die Rückfallwerte gelten auf
   Seiten, die diese Variablen nicht laden. Keine Bilddatei für das Gerät, kein Ton,
   kein Nachladen. Bewegung nur, wenn das Skript die Bühne sichtbar meldet, und nie
   bei „Bewegung reduzieren“. */

.ba-buehne, .ba-streifen, .ba-fuss {
  --ba-schwarz: var(--schwarz, #0a0909);
  --ba-schwarz-2: var(--schwarz-2, #121011);
  --ba-schwarz-3: var(--schwarz-3, #191617);
  --ba-rot: var(--rot, #a3121a);
  --ba-rot-tief: var(--rot-tief, #7a0e14);
  --ba-rot-hell: #c81d26;
  --ba-akzent: #e0525a;
  --ba-grau: var(--grau, #9c9a94);
  --ba-creme: var(--creme, #e9e3d7);
  --ba-creme-hell: var(--creme-hell, #f2ede2);
  --ba-linie: var(--linie, rgba(233, 227, 215, .14));
  --ba-ueberstand: 130px;
  --ba-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --ba-grotesk: "Barlow", "Helvetica Neue", Arial, system-ui, sans-serif;
  --ba-tafel: "Source Code Pro", Consolas, "Liberation Mono", monospace;
  --ba-breite: var(--seitenbreite, 1240px);
  --ba-rand: var(--rand, clamp(20px, 5vw, 56px));
  box-sizing: border-box;
  font-family: var(--ba-grotesk);
}
.ba-buehne *, .ba-streifen *, .ba-fuss * { box-sizing: border-box; }
.ba-nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ba-innen { width: min(var(--ba-breite), 100%); margin-inline: auto; padding-inline: var(--ba-rand); }

/* ── Bühne ─────────────────────────────────────────────────────────────── */
/* Das Telefon ragt um --ba-ueberstand über die Oberkante in den Abschnitt davor (Startseite: den
   Leerraum unter der Terminliste). Darum liegt die Bühne eine Ebene höher, schneidet nur seitlich ab,
   und der Sprung auf #backstage-access hält den Überstand unter der Kopfleiste frei. */
.ba-buehne { position: relative; z-index: 1; overflow: visible; color: var(--ba-creme-hell);
  scroll-margin-top: calc(var(--anker-versatz, 122px) + var(--ba-ueberstand)); }
@supports (overflow: clip) { .ba-buehne { overflow-x: clip; } }
/* Seitenregeln für section, h2, p, ul (Abstände, Ränder) dürfen den Baustein nicht verschieben. */
.ba-buehne, .ba-streifen, .ba-fuss { padding: 0; border: 0; max-width: none; }
.ba-buehne { margin: 0; }
.ba-unten { position: relative; background: linear-gradient(100deg, var(--ba-rot-tief) 0%, var(--ba-rot) 48%, #b3161e 100%); }
.ba-raster { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-block: 60px 70px; }
.ba-platz { position: relative; height: 470px; }
.ba-text { min-width: 0; }
.ba-titel { margin: 0; font: 600 clamp(1.95rem, 4.6vw, 3.4rem)/1 var(--ba-display); letter-spacing: .02em; text-transform: uppercase; color: var(--ba-creme-hell); }
.ba-titel .ba-hell { font-weight: 300; }
.ba-titel .ba-fett { font-weight: 700; }
.ba-lead { margin: 18px 0 0; max-width: 52ch; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.5; color: var(--ba-creme-hell); }
.ba-vorteile { display: flex; margin: 30px 0 0; padding: 0; list-style: none; }
.ba-vorteile li { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 18px; border-left: 1px solid rgba(242, 237, 226, .28); }
.ba-vorteile li:first-child { padding-left: 0; border-left: 0; }
.ba-vorteile svg { width: 36px; height: 36px; stroke: var(--ba-creme-hell); fill: none; stroke-width: 1.6; stroke-linecap: square; }
.ba-vorteile span { font: 700 12px/1.3 var(--ba-grotesk); letter-spacing: .14em; text-transform: uppercase; color: var(--ba-creme-hell); }
.ba-aktion { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ba-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 30px; background: var(--ba-creme-hell); color: var(--ba-rot); font: 700 15px/1 var(--ba-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border: 0; }
.ba-knopf:hover { background: #fff; }
.ba-zweit { display: none; align-items: center; justify-content: center; min-height: 52px; padding: 12px 18px; border: 1px solid rgba(242, 237, 226, .6); background: transparent; color: var(--ba-creme-hell); font: 600 14px/1 var(--ba-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.ba-zweit:hover { border-color: var(--ba-creme-hell); }
.ba-knopf:focus-visible, .ba-zweit:focus-visible, .ba-kachel:focus-visible, .ba-fuss-recht a:focus-visible { outline: 3px solid var(--ba-creme-hell); outline-offset: 3px; }
/* Zweitknöpfe brauchen das Skript. Rechner (Maus) bekommt den QR-Knopf, Handy und Tablet (Finger) das Teilen. */
.ba-js .ba-zweit.ba-fuer-handy { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .ba-js .ba-zweit.ba-fuer-rechner { display: inline-flex; }
  .ba-js .ba-zweit.ba-fuer-handy { display: none; }
}
.ba-anonym { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: rgba(242, 237, 226, .82); max-width: 60ch; }

/* ── Das Telefon: Schichtstapel aus CSS, kein Bild, kein Herstellerlogo ── */
.ba-3d { position: absolute; left: 50%; top: -190px; width: 300px; height: 620px; margin-left: -150px; perspective: 1800px; }
.ba-telefon { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(22deg) rotateX(8deg) rotateZ(-6deg); }
.ba-dreher { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .38s cubic-bezier(.4, 0, .2, 1); }
.ba-dreher.ba-halb { transform: rotateY(-90deg); }
.ba-schicht { position: absolute; inset: 0; border-radius: 54px; background: linear-gradient(90deg, #4a4a4d, #2a2a2c 18%, #1a1a1c 50%, #2a2a2c 82%, #58585b); }
.ba-schicht:nth-child(1) { transform: translateZ(-14px); background: #121213; box-shadow: 0 50px 90px rgba(0, 0, 0, .6); }
.ba-schicht:nth-child(2) { transform: translateZ(-13px); } .ba-schicht:nth-child(3) { transform: translateZ(-12px); }
.ba-schicht:nth-child(4) { transform: translateZ(-11px); } .ba-schicht:nth-child(5) { transform: translateZ(-10px); }
.ba-schicht:nth-child(6) { transform: translateZ(-9px); } .ba-schicht:nth-child(7) { transform: translateZ(-8px); }
.ba-schicht:nth-child(8) { transform: translateZ(-7px); } .ba-schicht:nth-child(9) { transform: translateZ(-6px); }
.ba-schicht:nth-child(10) { transform: translateZ(-5px); } .ba-schicht:nth-child(11) { transform: translateZ(-4px); }
.ba-schicht:nth-child(12) { transform: translateZ(-3px); } .ba-schicht:nth-child(13) { transform: translateZ(-2px); }
.ba-schicht:nth-child(14) { transform: translateZ(-1px); }
.ba-taste { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(90deg, #1a1a1c, #5a5a5d); transform: translateZ(-7px); }
.ba-taste-l1 { left: -3px; top: 118px; height: 30px; } .ba-taste-l2 { left: -3px; top: 170px; height: 56px; }
.ba-taste-l3 { left: -3px; top: 236px; height: 56px; }
.ba-taste-r1 { right: -3px; top: 190px; height: 86px; background: linear-gradient(270deg, #1a1a1c, #5a5a5d); }
.ba-front { position: absolute; inset: 0; border-radius: 54px; padding: 4px; transform: translateZ(0); background: linear-gradient(145deg, #7a7a7e 0%, #38383b 14%, #26262a 50%, #3a3a3e 86%, #8a8a8f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 1px 1px rgba(255, 255, 255, .35); }
.ba-glas { width: 100%; height: 100%; border-radius: 50px; background: #000; padding: 10px; box-shadow: inset 0 0 0 1px #111; }
.ba-schirm { position: relative; width: 100%; height: 100%; border-radius: 41px; overflow: hidden; background: #0e0c0c; }
.ba-schirm::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 41px; z-index: 9; background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 24%, transparent 38%, transparent 70%, rgba(255, 255, 255, .03) 100%); }
.ba-insel { position: absolute; top: 11px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #000; z-index: 8; }
.ba-homebar { position: absolute; left: 50%; bottom: 7px; width: 110px; height: 4px; margin-left: -55px; border-radius: 3px; background: rgba(242, 237, 226, .55); z-index: 8; }
.ba-boden { position: absolute; left: 50%; bottom: -210px; width: 340px; height: 60px; margin-left: -170px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); }

/* Kanal im Messenger-Stil, Hausfarben */
.ba-chat { position: absolute; inset: 0; display: flex; flex-direction: column; color: #ece6db; }
.ba-status { display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 15px 26px 0; font: 600 13px/1 var(--ba-grotesk); color: #f4efe6; }
.ba-status-zeichen { display: flex; gap: 5px; align-items: center; }
.ba-status-zeichen i { display: block; background: #f4efe6; border-radius: 1px; width: 3px; }
.ba-status-zeichen i:nth-child(1) { height: 5px; } .ba-status-zeichen i:nth-child(2) { height: 7px; }
.ba-status-zeichen i:nth-child(3) { height: 9px; } .ba-status-zeichen i:nth-child(4) { height: 11px; }
.ba-status-zeichen i:nth-child(5) { width: 22px; height: 11px; border-radius: 3px; margin-left: 4px; opacity: .9; }
.ba-kopf { display: flex; align-items: center; gap: 10px; padding: 6px 12px 8px; background: #141112; border-bottom: 1px solid rgba(242, 237, 226, .05); }
.ba-zurueck { width: 9px; height: 9px; margin: 0 2px 0 6px; border-left: 2px solid var(--ba-creme); border-bottom: 2px solid var(--ba-creme); transform: rotate(45deg); }
.ba-ava { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, var(--ba-rot-hell), var(--ba-rot-tief)); font: 700 10.5px/1 var(--ba-display); letter-spacing: .02em; color: var(--ba-creme-hell); box-shadow: 0 0 0 1.5px rgba(242, 237, 226, .12); }
.ba-kopf-name { display: block; font: 700 15px/1.1 var(--ba-grotesk); color: #f4efe6; }
.ba-kopf-zeile { display: block; font: 500 11px/1.3 var(--ba-grotesk); color: #8d867d; }
.ba-mehr { margin-left: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 2.5px; }
.ba-mehr i { width: 3.5px; height: 3.5px; border-radius: 50%; background: #cfc8bd; }
.ba-verlauf { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 8px 10px 26px; background-color: #0e0c0c; background-image: radial-gradient(rgba(242, 237, 226, .035) 1px, transparent 1.2px); background-size: 14px 14px; }
.ba-datum { align-self: center; padding: 6px 10px; border-radius: 8px; background: #1d191a; font: 600 10.5px/1 var(--ba-grotesk); letter-spacing: .06em; text-transform: uppercase; color: #bdb6ab; }
.ba-blase { position: relative; align-self: flex-start; max-width: 88%; padding: 7px 9px 6px; border-radius: 4px 14px 14px 14px; background: #1d191a; border: 1px solid rgba(242, 237, 226, .06); font: 500 12.5px/1.38 var(--ba-grotesk); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.ba-mit-reaktion { margin-bottom: 10px; }
.ba-zeit { float: right; margin: 6px 0 -2px 10px; font: 500 9.5px/1 var(--ba-grotesk); color: #8d867d; }
.ba-reaktion { position: absolute; left: 10px; bottom: -11px; display: flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 12px; background: #262122; border: 1.5px solid #0e0c0c; font: 600 10px/1.4 var(--ba-grotesk); color: #cfc8bd; }
.ba-foto { display: block; width: 100%; height: 92px; object-fit: cover; object-position: 60% 30%; border-radius: 9px; margin: 2px 0 6px; }
.ba-song { display: flex; gap: 9px; align-items: stretch; margin: 6px 0 4px; border-radius: 9px; overflow: hidden; background: #141112; border: 1px solid rgba(242, 237, 226, .06); color: inherit; text-decoration: none; }
.ba-song-bild { width: 58px; flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(135deg, var(--ba-rot-tief), var(--ba-rot)); }
.ba-song-bild i { display: block; width: 3px; border-radius: 1px; background: rgba(242, 237, 226, .85); }
.ba-song-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 7px 8px 7px 0; }
.ba-song-titel { font: 700 11.5px/1.2 var(--ba-grotesk); color: #f4efe6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ba-song-art { font: 500 10.5px/1.25 var(--ba-grotesk); color: #8d867d; }
.ba-song-hoeren { font: 500 10px/1.25 var(--ba-grotesk); color: var(--ba-akzent); }
.ba-termin { display: flex; gap: 10px; align-items: stretch; margin: 2px 0 6px; border-radius: 9px; overflow: hidden; background: #141112; border: 1px solid rgba(242, 237, 226, .06); }
.ba-flap { position: relative; width: 54px; padding: 7px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--ba-rot); }
.ba-flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .35); }
.ba-flap-tag, .ba-flap-monat { display: block; font: 700 9px/1 var(--ba-grotesk); letter-spacing: .12em; color: rgba(242, 237, 226, .85); transform-origin: 50% 55%; }
.ba-flap-zahl { display: block; font: 700 19px/1.05 var(--ba-tafel); color: var(--ba-creme-hell); transform-origin: 50% 55%; }
.ba-klapp { animation: ba-klapp .09s linear; }
@keyframes ba-klapp { 0% { transform: rotateX(0); } 50% { transform: rotateX(-80deg); } 100% { transform: rotateX(0); } }
.ba-termin-info { display: flex; flex-direction: column; justify-content: center; padding: 8px 8px 8px 0; }
.ba-termin-name { font: 700 13.5px/1.1 var(--ba-display); letter-spacing: .03em; text-transform: uppercase; color: #f4efe6; }
.ba-termin-ort { margin-top: 2px; font: 500 11px/1.3 var(--ba-grotesk); color: #8d867d; }
.ba-punkte { display: flex; gap: 4px; padding: 10px 12px; }
.ba-punkte i { width: 6px; height: 6px; border-radius: 50%; background: #a49d93; animation: ba-hupf 1s infinite ease-in-out; }
.ba-punkte i:nth-child(2) { animation-delay: .15s; } .ba-punkte i:nth-child(3) { animation-delay: .3s; }
@keyframes ba-hupf { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
/* Ohne Skript: Kanal offen, kein „tippt“. Mit Ablauf: Blöcke klappen auf. */
.ba-tippt-block { display: none; }
.ba-ablauf .ba-tippt-block, .ba-ablauf .ba-neu-block { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -7px; }
.ba-ablauf .ba-tippt-block > div, .ba-ablauf .ba-neu-block > div { overflow: hidden; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.ba-ablauf.ba-tippt .ba-tippt-block { grid-template-rows: 1fr; opacity: 1; margin-top: 0; transition: grid-template-rows .35s, opacity .3s, margin-top .35s; }
.ba-ablauf.ba-post .ba-neu-block { grid-template-rows: 1fr; opacity: 1; margin-top: 0; transition: grid-template-rows .55s cubic-bezier(.3, .7, .2, 1), opacity .45s ease .15s, margin-top .55s; }
.ba-neu-block > div { display: flex; flex-direction: column; gap: 7px; }

/* Sperrbildschirm mit Mitteilung (nur im Ablauf) */
.ba-sperre { position: absolute; inset: 0; z-index: 6; display: none; flex-direction: column; align-items: center; padding: 58px 14px 18px; background: radial-gradient(90% 60% at 50% 0%, rgba(200, 29, 38, .55), transparent 70%), radial-gradient(70% 50% at 20% 100%, rgba(122, 14, 20, .6), transparent 70%), #0d0a0a; transition: transform .65s cubic-bezier(.6, 0, .2, 1), opacity .65s; }
.ba-ablauf .ba-sperre { display: flex; }
.ba-ablauf.ba-offen .ba-sperre { transform: translateY(-104%); opacity: .6; }
.ba-sperre-datum { font: 600 13px/1 var(--ba-grotesk); color: rgba(242, 237, 226, .85); }
.ba-sperre-uhr { margin-top: 6px; font: 300 64px/1 var(--ba-display); letter-spacing: -.01em; color: var(--ba-creme-hell); }
.ba-mitteilung { position: relative; width: 100%; margin-top: auto; margin-bottom: 14px; display: flex; gap: 9px; align-items: flex-start; padding: 10px 11px; border-radius: 18px; background: rgba(38, 32, 33, .82); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); color: inherit; text-decoration: none; opacity: 0; transform: translateY(-16px) scale(.97); transition: opacity .45s, transform .55s cubic-bezier(.2, .8, .3, 1); }
.ba-meldet .ba-mitteilung { opacity: 1; transform: none; }
.ba-mitteilung .ba-ava { width: 30px; height: 30px; border-radius: 9px; font-size: 8.5px; }
.ba-mitteilung-kopf { display: flex; justify-content: space-between; gap: 8px; font: 700 11.5px/1.2 var(--ba-grotesk); color: #f4efe6; }
.ba-mitteilung-zeit { font-weight: 500; color: #a49d93; }
.ba-mitteilung-text { display: block; margin-top: 2px; font: 500 11.5px/1.3 var(--ba-grotesk); color: #e3ddd2; }
.ba-countdown { display: block; margin-top: 4px; font: 700 10.5px/1 var(--ba-tafel); letter-spacing: .06em; color: var(--ba-akzent); }
.ba-sperre-unten { margin-bottom: 8px; font: 500 10.5px/1 var(--ba-grotesk); color: rgba(242, 237, 226, .6); }
.ba-sperre-unten .ba-fuer-handy { display: none; }
@media (pointer: coarse) { .ba-sperre-unten .ba-fuer-handy { display: inline; } .ba-sperre-unten .ba-fuer-rechner { display: none; } }

/* QR-Bildschirm nach der Drehung (Rechner) */
.ba-qr-schirm { position: absolute; inset: 0; z-index: 7; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px 20px; text-align: center; background: radial-gradient(80% 50% at 50% 0%, rgba(200, 29, 38, .45), transparent 70%), #0d0a0a; }
.ba-qr .ba-qr-schirm { display: flex; }
.ba-qr-titel { font: 700 17px/1 var(--ba-display); letter-spacing: .08em; text-transform: uppercase; color: var(--ba-creme-hell); }
.ba-qr-schirm img { width: 190px; height: 190px; padding: 10px; border-radius: 14px; background: #fff; }
.ba-qr-text { margin: 0; font: 500 12.5px/1.4 var(--ba-grotesk); color: #e3ddd2; }
.ba-qr-klein { font: 500 10.5px/1.3 var(--ba-grotesk); color: #a49d93; }

/* Ankunft: einschieben und einwiegen (nur im Ablauf) */
.ba-ablauf .ba-3d { opacity: 0; }
.ba-ablauf.ba-los .ba-3d { animation: ba-einblenden .7s ease-out forwards; }
.ba-ablauf.ba-los .ba-telefon { animation: ba-einschieben 3.4s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes ba-einblenden { to { opacity: 1; } }
@keyframes ba-einschieben {
  0% { transform: translate3d(60px, 120px, 0) rotateY(34deg) rotateX(14deg) rotateZ(-11deg); }
  32% { transform: translate3d(0, 0, 0) rotateY(17deg) rotateX(7deg) rotateZ(-4.5deg); }
  52% { transform: translate3d(0, 0, 0) rotateY(25deg) rotateX(8.6deg) rotateZ(-6.8deg); }
  70% { transform: translate3d(0, 0, 0) rotateY(20.4deg) rotateX(7.7deg) rotateZ(-5.6deg); }
  86% { transform: translate3d(0, 0, 0) rotateY(22.7deg) rotateX(8.1deg) rotateZ(-6.2deg); }
  100% { transform: translate3d(0, 0, 0) rotateY(22deg) rotateX(8deg) rotateZ(-6deg); }
}

/* Hinweis nach dem Kopieren */
.ba-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: calc(100% - 32px); padding: 12px 16px; background: var(--ba-creme-hell); color: var(--ba-schwarz); font: 600 14px/1.3 var(--ba-grotesk); border: 2px solid var(--ba-schwarz); overflow-wrap: anywhere; opacity: 0; transform: translate(-50%, 30px); transition: opacity .25s, transform .25s; pointer-events: none; }
.ba-toast.ba-da { opacity: 1; transform: translate(-50%, 0); }

/* ── Schmaler Streifen (Reihen, Termine, Übersicht) ──────────────────── */
.ba-streifen { background: linear-gradient(100deg, var(--ba-rot-tief), var(--ba-rot)); color: var(--ba-creme-hell); }
.ba-streifen .ba-innen { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-block: 22px; padding-inline: clamp(18px, 3vw, 32px); }
/* Der Streifen steht im Inhaltsbereich (main), also in Seitenbreite, mit Luft nach oben und unten. */
main .ba-streifen { margin-block: clamp(32px, 5vw, 56px); }
.ba-streifen-zeichen { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(10, 9, 9, .25); }
.ba-streifen-zeichen svg { width: 22px; height: 22px; }
.ba-streifen-zeichen svg path { fill: var(--ba-creme-hell); }
.ba-streifen-text { min-width: 0; flex: 1 1 280px; }
.ba-streifen-titel { margin: 0; font: 700 18px/1 var(--ba-display); letter-spacing: .06em; text-transform: uppercase; }
.ba-streifen-satz { margin: 4px 0 0; font-size: 13.5px; line-height: 1.4; color: rgba(242, 237, 226, .88); }
.ba-streifen .ba-knopf { min-height: 46px; padding: 10px 22px; font-size: 13px; }

/* ── Fuß: Ortssatz, drei Kanäle, Rechtslinks ─────────────────────────── */
.ba-fuss { background: #0b0a0a; border-top: 1px solid var(--ba-linie); color: var(--ba-grau); }
.ba-fuss-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 40px 30px; }
.ba-fuss-name { margin: 0; font: 700 22px/1 var(--ba-display); letter-spacing: .06em; color: var(--ba-creme-hell); }
.ba-fuss-name span { color: var(--ba-rot-hell); }
.ba-fuss-satz { margin: 10px 0 0; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--ba-grau); }
.ba-fuss-kanaele { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ba-fuss-etikett { margin: 0 0 2px; font: 700 10.5px/1 var(--ba-tafel); letter-spacing: .18em; text-transform: uppercase; color: var(--ba-grau); }
.ba-fuss-kanaele ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ba-kachel { height: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 16px 9px 10px; border: 1px solid rgba(233, 227, 215, .18); color: var(--ba-creme-hell); text-decoration: none; transition: border-color .2s, background .2s; }
.ba-kachel:hover { border-color: var(--ba-creme-hell); background: rgba(233, 227, 215, .04); }
.ba-kachel-zeichen { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--ba-schwarz-3); }
.ba-kachel-zeichen svg { width: 20px; height: 20px; }
.ba-kachel-zeichen svg path { fill: var(--ba-creme-hell); }
.ba-kachel-name { display: block; font: 700 14px/1.1 var(--ba-display); letter-spacing: .06em; text-transform: uppercase; }
.ba-kachel-zeile { display: block; font: 500 12.5px/1.3 var(--ba-grotesk); color: var(--ba-grau); }
.ba-kachel-pfeil { margin-left: auto; padding-left: 6px; font-size: 13px; color: var(--ba-grau); }
.ba-fuss-recht { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0; padding-block: 16px 26px; border-top: 1px solid var(--ba-linie); font-size: 13px; color: var(--ba-grau); }
.ba-fuss-recht .fuss-teil { display: inline-flex; align-items: baseline; white-space: nowrap; }
.ba-fuss-recht .fuss-trenner { padding: 0 10px; color: #807d77; }
.ba-fuss-recht a { color: var(--ba-grau); text-decoration: none; }
.ba-fuss-recht a:hover { color: var(--ba-creme); text-decoration: underline; }

/* ── Schmal ──────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .ba-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) and (min-width: 761px) {
  .ba-kachel-zeile { font-size: 12px; }
}
@media (max-width: 760px) {
  .ba-raster { gap: 10px; padding-block: 0 40px; }
  /* Das Telefon ragt in den Abschnitt davor, so bleibt die Bühne am Handy kurz. */
  .ba-buehne { --ba-ueberstand: 110px; }
  .ba-platz { height: 312px; }
  .ba-3d { top: -110px; transform: scale(.66); transform-origin: 50% 0; }
  .ba-boden { bottom: -40px; }
  .ba-vorteile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 24px; }
  .ba-vorteile li, .ba-vorteile li:first-child { flex-direction: row; align-items: center; gap: 10px; padding: 0; border-left: 0; }
  .ba-vorteile svg { width: 28px; height: 28px; flex: none; }
  .ba-vorteile span { font-size: 11px; letter-spacing: .1em; }
  .ba-aktion { margin-top: 26px; }
  .ba-aktion > * { flex: 1 1 100%; }
  .ba-fuss-kanaele ul { grid-template-columns: minmax(0, 1fr); }
}

/* ── Bewegung reduzieren: alles steht, Kanal offen ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ba-ablauf .ba-3d { opacity: 1; animation: none !important; }
  .ba-ablauf .ba-telefon { animation: none !important; }
  .ba-ablauf .ba-sperre { display: none; }
  .ba-ablauf .ba-tippt-block { display: none; }
  .ba-ablauf .ba-neu-block { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
  .ba-dreher { transition: none; }
  .ba-punkte i, .ba-klapp { animation: none; }
}