@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: italic; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: italic; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }

/* HA Performance, Fassung 2. Erzeugt von werkzeug/ha.py, nicht von Hand ändern. */
:root {
  --rot: #DC0000; --rot-tief: #A50B0B; --rot-hell: #FF5A5A;
  --schwarz: #0E0E10; --anthrazit: #17181B; --kohle: #222428;
  --papier: #F4F3F0; --weiss: #FFFFFF; --tinte: #151619;
  --leise: #55585F; --linie: #DCDAD5;
  --stahl: #C3C6CC; --stahl-leise: #8D9199; --laser: #FF2A2A;
  --schmal: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Barlow", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --rand: 20px; --abstand: 80px; --breite: 1180px; --schnitt: 36px;
}
@media (min-width: 760px) { :root { --rand: 40px; --abstand: 120px; --schnitt: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth;
  background-color: var(--schwarz); transition: background-color .3s; }
/* Zieht man über das Seitenende hinaus (Gummiband am Handy und am Mac), zeigt
   der Browser die Farbe von html. Oben bleibt sie schwarz wie der Kopf; kurz
   vor dem Ende schaltet site.js auf Laserrot um. */
html.am-ende { background-color: var(--laser); }
body { margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--text); font-size: 18px; line-height: 1.6;
  overflow-wrap: break-word; hyphens: auto; }
h1, h2, h3 { margin: 0; font-family: var(--schmal); text-transform: uppercase;
  hyphens: none; overflow-wrap: normal; word-break: normal; }
h1, h2 { font-style: italic; font-weight: 800; line-height: .9; letter-spacing: .002em; }
h1 { font-size: clamp(50px, 12.5vw, 138px); }
h2 { font-size: clamp(38px, 6.4vw, 72px); }
h3 { font-weight: 700; font-size: 23px; line-height: 1.1; letter-spacing: .02em; }
p { margin: 0; }
a { color: var(--rot-tief); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }
.inhalt { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.schmal { max-width: 780px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 8px; top: 8px; z-index: 99; background: var(--weiss);
  padding: 10px 14px; border: 2px solid var(--rot); }

/* Kennung: kleine Zeile über Überschriften, mit rotem Schrägstrich */
.kennung { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 18px;
  font-family: var(--schmal); font-weight: 700; font-size: 16px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--rot-tief); hyphens: none; }
.kennung::before { content: ""; width: 26px; height: 4px; background: var(--rot);
  transform: skewX(-24deg); }
.dunkel .kennung { color: var(--rot-hell); }

/* Kopf: nur die Seiten, über die volle Breite verteilt */
.kopf { background: rgba(14,14,16,.92); position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid #26272B;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kopf__reihe { display: flex; align-items: center; gap: 56px; min-height: 58px;
  max-width: var(--breite); margin: 0 auto; padding: 4px var(--rand); }
.nav { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.nav a { position: relative; color: var(--stahl); text-decoration: none;
  font-family: var(--schmal); font-weight: 700; font-size: 15px; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap; padding: 14px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px;
  background: var(--laser); box-shadow: 0 0 10px var(--laser);
  transform: scaleX(0); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--weiss); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* Doppelte Klasse, sonst gewinnt das spätere display von .knopf */
.knopf.kopf__ruf { display: none; }
.nav__kurz { display: none; }
@media (max-width: 759px) { .nav__lang { display: none; } .nav__kurz { display: inline; } }
/* Angebote leuchten: roter Text mit Glimmen und einem Punkt davor */
.nav a.nav__aktion { color: var(--rot-hell); text-shadow: 0 0 12px rgba(255,42,42,.6); }
.nav a.nav__aktion::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin: 0 6px 2px 0; border-radius: 50%; background: var(--laser);
  box-shadow: 0 0 8px var(--laser); vertical-align: middle; }
.nav a.nav__aktion:hover, .nav a.nav__aktion[aria-current="page"] { color: var(--weiss); }
@media (min-width: 400px) { .nav a { font-size: 16px; } }
@media (min-width: 760px) {
  .kopf__reihe { min-height: 72px; }
  .nav a { font-size: 19px; letter-spacing: .07em; }
  .knopf.kopf__ruf { display: inline-flex; }
}

/* Logo als Wasserzeichen: liegt fest in der Mitte, scrollt nicht mit.
   Über den Flächen, aber so blass, dass Text lesbar bleibt; Klicks gehen durch. */
.wasserzeichen { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center;
  pointer-events: none; }
.wasserzeichen img { width: min(88vw, 860px); opacity: .06; }
/* Karten liegen über dem Wasserzeichen: Es scheint zwischen ihnen durch,
   nie durch den Text darin. */
.leistung, .ticket, .karte { position: relative; z-index: 6; }

/* Knöpfe: schräge Fläche hinter geradem Text, so bleibt der Fokusrahmen ganz */
.knopf { position: relative; isolation: isolate; display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px;
  font-family: var(--schmal); font-weight: 700; font-size: 20px; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none; color: var(--weiss);
  background: transparent; border: 0; cursor: pointer; }
.knopf::before { content: ""; position: absolute; inset: 0; z-index: -1;
  transform: skewX(-12deg); transition: background .15s; }
.knopf--rot::before { background: var(--rot); }
.knopf--rot:hover::before { background: var(--rot-tief); }
.knopf--rand { color: var(--tinte); }
.knopf--rand::before { border: 2px solid currentColor; }
.dunkel .knopf--rand { color: var(--weiss); }
.dunkel .knopf--rand:hover::before { background: rgba(255,255,255,.08); }
.kopf .knopf { min-height: 46px; padding: 8px 20px; font-size: 18px; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 14px 18px; margin-top: 32px; }

/* Dunkle Flächen mit Textur: feine Diagonalen und rote Glut, alles CSS */
.dunkel { background-color: var(--schwarz); color: var(--stahl); position: relative;
  background-image:
    radial-gradient(ellipse 70% 60% at 88% 8%, rgba(220,0,0,.30), transparent 62%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(220,0,0,.10), transparent 70%),
    repeating-linear-gradient(-58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 11px); }
.dunkel h1, .dunkel h2, .dunkel h3 { color: var(--weiss); }
.schnitt-unten { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--schnitt)), 0 100%);
  padding-bottom: calc(var(--abstand) * .7 + var(--schnitt)); }

/* Aufmacher */
.held { padding: calc(var(--abstand) * .9) 0; overflow: hidden; min-height: min(78vh, 760px);
  display: flex; align-items: center; }
.held > .inhalt { width: 100%; }
.held__text { max-width: 760px; }
.held > .inhalt { position: relative; z-index: 1; }
.schnitt-oben { clip-path: polygon(0 var(--schnitt), 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--abstand) * .7 + var(--schnitt));
  margin-top: calc(var(--schnitt) * -1); position: relative; z-index: 1; }
/* Was unter einem Schnitt liegt, rückt darunter, damit kein heller Keil bleibt */
.schnitt-unten { z-index: 1; }
.schnitt-unten + .band { margin-top: calc(var(--schnitt) * -1);
  padding-top: calc(var(--abstand) + var(--schnitt)); }
.schnitt-unten + .zweiteiler { margin-top: calc(var(--schnitt) * -1); }
.schnitt-unten + .zweiteiler .zweiteiler__teil {
  padding-top: calc(var(--abstand) * .8 + var(--schnitt)); }
.held__gitter { display: grid; gap: 44px; align-items: end; }
@media (min-width: 960px) { .held__gitter { grid-template-columns: 1.35fr .9fr; gap: 64px; } }
.held h1 em { font-style: italic; color: var(--rot); }
.held__unter { margin-top: 26px; font-size: clamp(19px, 2.1vw, 22px); line-height: 1.5;
  max-width: 34em; color: var(--stahl); }
.stand { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-family: var(--schmal); font-weight: 700; font-size: 18px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--stahl); }
.hell .stand { color: var(--leise); margin: 14px 0 0; }
.stand__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--stahl-leise); }
.stand--offen .stand__punkt { background: #3DCB63; box-shadow: 0 0 0 5px rgba(61,203,99,.18); }

/* Aktion: schräges rotes Band wie im Prospekt, Störer, Preis im Aufmacher */
.aktionsband { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 0 0 26px 6px; padding: 10px 22px 11px; transform: rotate(-3deg) skewX(-10deg);
  background: linear-gradient(100deg, var(--rot), #B80000); color: var(--weiss);
  box-shadow: 0 0 0 2px rgba(255,42,42,.35), 0 0 34px rgba(255,42,42,.45);
  font-family: var(--schmal); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(24px, 3.6vw, 34px); line-height: 1; letter-spacing: .01em; hyphens: none; }
.aktionsband__klein { font-size: 16px; font-weight: 700; letter-spacing: .12em; }
.band__kopf .aktionsband { justify-self: start; margin-bottom: 4px; }
.stoerer { position: absolute; z-index: 2; display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%; transform: rotate(12deg);
  background: var(--rot); color: var(--weiss);
  box-shadow: 0 0 0 3px var(--schwarz), 0 0 0 5px var(--rot), 0 0 26px rgba(255,42,42,.6);
  font-family: var(--schmal); font-style: italic; font-weight: 800; font-size: 19px;
  text-transform: uppercase; letter-spacing: .02em; }
.ticket .stoerer { top: 16px; right: 44px; width: 66px; height: 66px; font-size: 15px; }
@media (min-width: 560px) { .ticket .stoerer { top: 22px; right: 54px; width: 84px; height: 84px; font-size: 18px; } }
.ticket__gueltig { margin-top: 12px; font-family: var(--schmal); font-weight: 700; font-size: 17px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--rot-tief); }

.held--aktion h1 { font-size: clamp(54px, 11vw, 124px); }
.held__preis { margin-top: 6px; font-family: var(--schmal); font-style: italic; font-weight: 800;
  font-size: clamp(84px, 17vw, 196px); line-height: .85; letter-spacing: -.01em;
  color: var(--laser); text-shadow: 0 0 18px rgba(255,42,42,.55), 0 0 60px rgba(255,42,42,.35); }
.held--aktion .held__unter { margin-top: 22px; }
.held__neben { position: relative; display: grid; gap: 6px; padding: 30px 28px 26px;
  text-decoration: none; color: var(--stahl);
  background: linear-gradient(160deg, rgba(34,36,40,.92), rgba(18,19,22,.92));
  border: 1px solid rgba(255,42,42,.45); box-shadow: 0 0 40px -12px rgba(255,42,42,.55);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.held__neben:hover { transform: translateY(-4px); box-shadow: 0 0 50px -8px rgba(255,42,42,.75); }
.held__neben .stoerer { top: -26px; right: -14px; width: 76px; height: 76px; font-size: 17px; }
.held__neben-kenn { font-family: var(--schmal); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rot-hell); }
.held__neben-titel { font-family: var(--schmal); font-style: italic; font-weight: 800;
  font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--weiss); }
.held__neben-preis { font-family: var(--schmal); font-style: italic; font-weight: 800;
  font-size: 76px; line-height: .9; color: var(--laser);
  text-shadow: 0 0 16px rgba(255,42,42,.5); }
.held__neben-mehr { margin-top: 10px; font-family: var(--schmal); font-weight: 700; font-size: 18px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); }
@media (max-width: 959px) { .held__neben { margin-top: 40px; max-width: 420px; }
  .held__neben .stoerer { right: 12px; } }

/* Plakette mit Öffnungszeiten */
.plakette { background: rgba(23,24,27,.86); border: 1px solid #2E2F34;
  border-top: 4px solid var(--rot); padding: 26px 26px 18px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.zeiten { width: 100%; border-collapse: collapse; font-size: 17px; }
.zeiten caption { text-align: left; font-family: var(--schmal); font-style: italic;
  font-weight: 800; font-size: 30px; text-transform: uppercase; color: var(--weiss);
  padding-bottom: 12px; }
.zeiten th, .zeiten td { text-align: left; padding: 9px 0; border-bottom: 1px solid #2E2F34;
  font-weight: 400; color: var(--stahl); }
.zeiten td { text-align: right; font-variant-numeric: tabular-nums; }
.zeiten tr:last-child th, .zeiten tr:last-child td { border-bottom: 0; }
.zeiten .heute th, .zeiten .heute td { color: var(--weiss); font-weight: 600; }
.zeiten .heute th::before { content: ""; display: inline-block; width: 8px; height: 8px;
  background: var(--rot); margin-right: 10px; transform: skewX(-20deg); }
.hell .zeiten caption { color: var(--tinte); }
.hell .zeiten th, .hell .zeiten td { color: var(--leise); border-color: var(--linie); }
.hell .zeiten .heute th, .hell .zeiten .heute td { color: var(--tinte); }

/* Laufband */
.laufband { background: var(--rot); color: var(--weiss); overflow: hidden;
  padding: 14px 0; position: relative; z-index: 2; }
.laufband__spur { display: flex; width: max-content; animation: laufen 38s linear infinite; }
.laufband__spur span { font-family: var(--schmal); font-style: italic; font-weight: 800;
  font-size: 26px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  padding: 0 22px; }
.laufband__spur span::after { content: "/"; margin-left: 44px; opacity: .55; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Abschnitte */
.band { padding: var(--abstand) 0; }
.band--weiss { background: var(--weiss); }
.band__kopf { display: grid; gap: 18px; max-width: 860px; margin-bottom: 52px; }
.band__kopf p { color: var(--leise); font-size: 19px; max-width: 38em; }
.dunkel .band__kopf p { color: var(--stahl); }

/* Angebote als Tickets */
.tickets { display: grid; gap: 26px; }
@media (min-width: 820px) { .tickets { grid-template-columns: 1fr 1fr; } }
.ticket { position: relative; background: var(--weiss); padding: 34px 30px 30px 36px;
  border: 1px solid var(--linie); display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%); }
.ticket::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: var(--rot); }
.ticket h3 { font-size: 26px; }
.ticket__preis { margin: 18px 0 2px; font-family: var(--schmal); font-style: italic;
  font-weight: 800; font-size: clamp(72px, 10vw, 112px); line-height: .85;
  color: var(--rot); letter-spacing: -.01em; }
.ticket__zusatz { font-family: var(--schmal); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--leise); }
.ticket .haken { margin: 26px 0 30px; }
.ticket .knopf { align-self: flex-start; margin-top: auto; }
.haken { list-style: none; padding: 0; display: grid; gap: 10px; }
.haken li { position: relative; padding-left: 30px; font-size: 17px; }
.haken li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 13px;
  height: 7px; border-left: 3px solid var(--rot); border-bottom: 3px solid var(--rot);
  transform: rotate(-45deg); }

/* Leistungen: Karten mit leuchtendem Symbol, wie Warnleuchten im Armaturenbrett */
.leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 560px) { .leistungen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .leistungen { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1180px) { .leistungen { grid-template-columns: repeat(4, 1fr); } }
.leistung { position: relative; overflow: hidden; padding: 28px 24px 30px;
  background: linear-gradient(160deg, #1C1D21, #121316 70%);
  border: 1px solid #2A2B30;
  transition: border-color .3s, transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.leistung::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--laser); box-shadow: 0 0 14px var(--laser);
  transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.leistung:hover { border-color: rgba(255,42,42,.55); transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(255,42,42,.55); }
.leistung:hover::after { transform: scaleX(1); }
.leistung__symbol { display: grid; place-items: center; width: 68px; height: 68px;
  margin-bottom: 20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,42,42,.16), rgba(255,42,42,0) 70%); }
.symbol { width: 46px; height: 46px; fill: var(--laser); color: var(--laser);
  filter: drop-shadow(0 0 6px rgba(255,42,42,.7)) drop-shadow(0 0 18px rgba(255,42,42,.35));
  transition: transform .3s cubic-bezier(.2,.7,.2,1), filter .3s; }
.leistung:hover .symbol { transform: scale(1.08);
  filter: drop-shadow(0 0 8px rgba(255,42,42,.9)) drop-shadow(0 0 26px rgba(255,42,42,.55)); }
.leistung :is(h2, h3) { font-size: 24px; font-style: normal; font-weight: 700;
  line-height: 1.1; letter-spacing: .02em; color: var(--weiss); }
.leistung p { margin-top: 10px; color: var(--stahl); font-size: 16.5px; line-height: 1.5; }
.leistungsband .knopfreihe { margin-top: 44px; }

/* Versprechen */
.versprechen { list-style: none; margin: 0; padding: 0; display: grid; gap: 36px; }
@media (min-width: 640px) { .versprechen { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .versprechen { grid-template-columns: repeat(4, 1fr); } }
.versprechen li { border-top: 1px solid #34353A; padding-top: 22px; }
.versprechen :is(h2, h3) { font-size: 32px; font-style: italic; font-weight: 800; }
.versprechen :is(h2, h3)::after { content: ""; display: block; width: 34px; height: 4px;
  background: var(--rot); margin-top: 14px; transform: skewX(-24deg); }
.versprechen p { margin-top: 14px; color: var(--stahl); font-size: 17.5px; }

/* An- und Verkauf, zweigeteilt */
.zweiteiler { display: grid; }
@media (min-width: 900px) { .zweiteiler { grid-template-columns: 1fr 1fr; } }
.zweiteiler__teil { padding: calc(var(--abstand) * .8) var(--rand); }
@media (min-width: 900px) { .zweiteiler__teil { padding-inline: 56px; } }
.zweiteiler__innen { max-width: 520px; }
.zweiteiler__teil--dunkel { background: var(--anthrazit); color: var(--stahl); }
.zweiteiler__teil--dunkel h2 { color: var(--weiss); }
.zweiteiler__teil--dunkel .kennung { color: var(--rot-hell); }
.zweiteiler__teil--rot { background: var(--rot); color: var(--weiss); }
.zweiteiler__teil--rot h2 { color: var(--weiss); }
.zweiteiler__teil--rot .kennung { color: var(--weiss); }
.zweiteiler__teil--rot .kennung::before { background: var(--weiss); }
.zweiteiler p { margin-top: 20px; font-size: 18.5px; }
.zweiteiler__teil--rot .knopf--rand { color: var(--weiss); }

/* Anruf am Seitenende */
.ruf { text-align: left; }
.riesennummer { display: inline-block; margin-top: 10px; font-family: var(--schmal);
  font-style: italic; font-weight: 800; font-size: clamp(46px, 10.5vw, 132px);
  line-height: .95; color: var(--weiss); text-decoration: none; letter-spacing: .005em;
  white-space: nowrap; }
.riesennummer:hover { color: var(--rot-hell); }
.ruf__daten { display: grid; gap: 28px; margin-top: 46px; padding-top: 30px;
  border-top: 1px solid #34353A; }
@media (min-width: 760px) { .ruf__daten { grid-template-columns: repeat(3, 1fr); } }
.ruf__daten dt { font-family: var(--schmal); font-weight: 700; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--stahl-leise); }
.ruf__daten dd { margin: 6px 0 0; font-size: 18.5px; color: var(--weiss); }
.ruf__daten a { color: var(--weiss); }

/* Unterseiten-Kopf */
.seitenkopf { padding-top: calc(var(--abstand) * .6); }
.seitenkopf h1 { font-size: clamp(50px, 10vw, 116px); }
.seitenkopf p { margin-top: 22px; font-size: clamp(19px, 2vw, 22px); max-width: 36em; }

/* Fließtext */
.fliesstext { display: grid; gap: 18px; max-width: 62ch; }

/* Kontaktseite */
.kontaktgitter { display: grid; gap: 26px; }
@media (min-width: 900px) { .kontaktgitter { grid-template-columns: .9fr 1.1fr; } }
.karte { background: var(--weiss); border: 1px solid var(--linie); padding: 30px 28px; }
.karte--rot { border-top: 4px solid var(--rot); }
.karte :is(h2, h3) { font-size: 30px; font-style: italic; font-weight: 800; }
.karte dl { margin: 20px 0 0; display: grid; gap: 16px; }
.karte dt { font-family: var(--schmal); font-weight: 700; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--leise); }
.karte dd { margin: 4px 0 0; font-size: 18.5px; }
.karte .zeiten { margin-top: 26px; }

/* Formular */
.formular { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 620px) { .formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } }
.feld { display: grid; gap: 7px; }
.feld label { font-family: var(--schmal); font-weight: 700; font-size: 17px;
  letter-spacing: .08em; text-transform: uppercase; }
.feld input, .feld select, .feld textarea { font: inherit; font-size: 17px; padding: 13px 14px;
  border: 1px solid #A3A19C; border-radius: 0; background: var(--weiss); color: var(--tinte);
  min-height: 52px; width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--rot); }
.feld textarea { min-height: 130px; resize: vertical; }
.hinweis { color: var(--leise); font-size: 16px; }
.meldung { background: var(--weiss); border-left: 5px solid var(--rot); padding: 14px 18px;
  font-weight: 500; }

/* Fuß */
.fuss { position: relative; background: var(--schwarz); color: var(--stahl);
  padding: 62px 0 44px; font-size: 17px; border-top: 4px solid var(--rot); }
.fuss::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--laser); box-shadow: 0 0 18px 2px var(--laser), 0 0 60px 6px rgba(255,42,42,.45); }
.fuss__gitter { display: grid; gap: 34px; }
@media (min-width: 760px) { .fuss__gitter { grid-template-columns: 1.3fr 1fr 1fr; } }
.fuss h2 { font-size: 22px; font-style: normal; font-weight: 700; letter-spacing: .1em;
  margin-bottom: 14px; color: var(--weiss); }
.fuss address { font-style: normal; }
.fuss a { color: var(--stahl); }
.fuss a:hover { color: var(--weiss); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.fuss__logo { width: 170px; margin-bottom: 18px; }
.fuss__schluss { margin-top: 40px; padding-top: 22px; border-top: 1px solid #2A2B30;
  font-size: 15px; color: var(--stahl-leise); display: flex; flex-wrap: wrap; gap: 8px 24px; }
.fuss__schluss a { color: var(--stahl-leise); }

/* Rechtstexte */
.recht { max-width: 74ch; }
.recht h1 { font-size: clamp(46px, 8vw, 84px); margin-bottom: 26px; }
.recht h2 { font-size: 30px; margin-top: 42px; }
.recht p, .recht ul { margin-top: 14px; }
.recht address { font-style: normal; margin-top: 14px; }

/* Einblenden beim Scrollen: nur, was beim Laden noch nicht sichtbar war */
.vorbereitet { opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.vorbereitet.ist-sichtbar { opacity: 1; transform: none; }
/* Gruppen (Leistungen, Angebote, Versprechen): die Teile kommen nacheinander,
   jeder 70 ms nach dem vorigen. Die Reihenfolge setzt site.js als --nr. */
.vorbereitet[data-zeigen="gestaffelt"] { opacity: 1; transform: none; }
.vorbereitet[data-zeigen="gestaffelt"] > * { opacity: 0; transform: translateY(30px) scale(.98);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1),
              border-color .3s, box-shadow .3s;
  transition-delay: calc(var(--nr, 0) * 70ms); }
.vorbereitet.ist-sichtbar[data-zeigen="gestaffelt"] > * { opacity: 1; transform: none; }
/* Die Kennung über den Überschriften: der rote Strich wächst beim Einblenden. */
.vorbereitet .kennung::before { transform: skewX(-24deg) scaleX(0); transform-origin: left;
  transition: transform .6s .2s cubic-bezier(.2,.7,.2,1); }
.vorbereitet.ist-sichtbar .kennung::before { transform: skewX(-24deg) scaleX(1); }

/* Aufmacher: kommt Zeile für Zeile, sobald nichts mehr davor liegt. Läuft
   das Intro, beginnt es erst, wenn das Intro weg ist. */
@keyframes hoch { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
html:not(.intro-an) .held__text > * { animation: hoch .8s cubic-bezier(.2,.7,.2,1) both; }
html:not(.intro-an) .held__text > :nth-child(2) { animation-delay: .08s; }
html:not(.intro-an) .held__text > :nth-child(3) { animation-delay: .18s; }
html:not(.intro-an) .held__text > :nth-child(4) { animation-delay: .26s; }
html:not(.intro-an) .held__text > :nth-child(5) { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .vorbereitet, .vorbereitet[data-zeigen="gestaffelt"] > * { opacity: 1; transform: none; }
}

/* Intro: das Video vor der Startseite. Sichtbar nur, wenn das Skript im
   Kopf es freigeschaltet hat. Läuft site.js nicht (abgeschaltet, Fehler,
   alte Fassung im Cache), räumt die Animation es nach drei Sekunden von
   selbst weg. site.js schaltet sie beim Start ab, die Seite bleibt also nie
   länger verdeckt als nötig. */
.intro { display: none; }
html.intro-an .intro { position: fixed; inset: 0; z-index: 100; display: grid;
  place-items: center; background: #000; transition: opacity .6s ease;
  animation: intro-notaus 0s linear 3s forwards; }
html.intro-an .intro.laeuft { animation: none; }
.intro.ist-weg { opacity: 0; pointer-events: none; }
@keyframes intro-notaus { to { visibility: hidden; } }
.intro__video { width: 100%; height: 100%; object-fit: cover; }
html.intro-an .intro { cursor: pointer; }
/* Hochkant schnitte cover das Logo an den Seiten ab. Also ganz zeigen und
   die Kanten weich in das Schwarz auslaufen lassen. */
@media (max-aspect-ratio: 4/3) {
  .intro__video { object-fit: contain;
    -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
            mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
  /* Die Hochformat-Fassung füllt den Schirm; das Logo hat dort Rand genug. */
  .intro__video.intro__video--hoch { object-fit: cover;
    -webkit-mask-image: none; mask-image: none; }
}
.intro__weg { position: absolute; right: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 8px 18px; cursor: pointer;
  font-family: var(--schmal); font-weight: 700; font-size: 17px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .35); }
.intro__weg:hover { background: rgba(0, 0, 0, .75); border-color: #fff; }
.intro__weg:focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; }

@media print {
  .intro, .wasserzeichen, .kopf, .formular, .knopfreihe, .sprung, .laufband { display: none; }
  body { background: #fff; font-size: 12pt; }
  html, html.am-ende { background: #fff; }
  .symbol { filter: none; }
  .dunkel, .zweiteiler__teil { background: #fff !important; color: #000 !important;
    clip-path: none !important; }
  .dunkel h1, .dunkel h2, .dunkel h3, .riesennummer, .zeiten caption,
  .zeiten th, .zeiten td, .ruf__daten dd { color: #000 !important; }
}