/* Deutsche-Einheit-Special (/deutsche-einheit-special) · Spec 027
   Analoge Welt von 1989/1990 in Schwarz-Rot-Gold, auf back-to-work.css + modelle.css + btw-special.css.
   Harte Regeln: keine Versalien, kein text-shadow, Radien <= 8 px, keine farbigen Kastenkanten,
   keine Punkte vor Text, Icons frei neben der Ueberschrift und auf dunklem Grund weiss,
   hinter Text nur Verlaeufe und Papier, nie ein Foto. */

.btw.ein {
  --ein-nacht: #0d0c0b;
  --ein-schwarz: #141414;
  --ein-rot: #d10000;
  --ein-rot-papier: #b00000;
  --ein-gold: #ffce00;
  --ein-papier: #efe8da;
  --ein-abzug: #f7f3ea;
  --ein-tinte: #1d1b18;
  --ein-tinte-weich: #4a443b;
  --ein-grau: #5a5348;
  --ein-hell: #f6f1e6;
  --ein-hell-weich: #d3cbba;
  --ein-hell-leise: #a9a192;
  --ein-kuli: #22304a;
  --ein-led: #ff4b2b;
  --ein-stempel: #ff9a2e;
  --ein-font-plakat: "Anton", "Archivo", Impact, "Arial Narrow", sans-serif;
  --ein-font-schreib: "Special Elite", "Courier New", Courier, monospace;
  --ein-font-marker: "Caveat Brush", "Caveat", "Segoe Print", cursive;
  --ein-font-lcd: "DSEG7 Classic", "Courier New", monospace;
  --ein-korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)'/%3E%3C/svg%3E");
  background: var(--ein-papier);
  color: var(--ein-tinte);
  text-transform: none;
}
.ein img, .ein video { border-radius: 0; }
.ein h1, .ein h2, .ein h3 { font-family: var(--ein-font-plakat); font-weight: 400; letter-spacing: 0.004em; text-transform: none; hyphens: manual; }
.ein :focus-visible { outline: 3px solid var(--ein-gold); outline-offset: 3px; }
/* Sprungziele nicht unter der festen Kopfleiste verstecken */
.ein #auswahl, .ein #warum, .ein #raten, .ein #faq { scroll-margin-top: 5.6rem; }

/* ---------- Bausteine ---------- */
.ein .ein-korn {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--ein-korn); background-size: 200px; opacity: 0.2; mix-blend-mode: overlay;
}
.ein .ein-schreibmaschine { font-family: var(--ein-font-schreib); font-size: 1rem; line-height: 1.3; color: var(--ein-gold); margin: 0 0 0.45rem; letter-spacing: 0; }
.ein .ein-marker { font-family: var(--ein-font-marker); font-weight: 400; line-height: 1.15; }
.ein .ein-label {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem;
  font-family: var(--ein-font-schreib); font-size: clamp(0.88rem, 0.84rem + 0.15vw, 0.98rem); line-height: 1.3; color: var(--ein-gold);
}
.ein .ein-fahne { inline-size: 2rem; block-size: auto; flex: none; color: #e6dfd0; }
.ein .ein-h1__zwei, .ein .ein-h2__markiert { position: relative; display: inline-block; z-index: 0; }
.ein .ein-strich { position: absolute; inset-inline: -0.05em; inset-block-end: -0.1em; inline-size: calc(100% + 0.1em); block-size: 0.2em; color: var(--ein-rot); pointer-events: none; z-index: -1; }
.ein .ein-icon { inline-size: 1.7rem; block-size: 1.7rem; flex: none; stroke-width: 2.6; overflow: visible; }
.ein .ein-icon__geist { stroke: var(--ein-rot); }

/* Knoepfe: flach, kantig, Plakatschrift */
.ein .ein-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-block-size: 3.15rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 4px; cursor: pointer;
  font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.28rem; line-height: 1; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.75);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ein .ein-btn:hover { transform: translateY(-2px); }
.ein .ein-btn:active { transform: translateY(1px); }
.ein .ein-btn--gold, .ein a.ein-btn--gold { background: var(--ein-gold); color: var(--ein-schwarz); }
.ein .ein-btn--gold:hover { background: #ffdb3f; color: var(--ein-schwarz); }
.ein .ein-btn--rot, .ein a.ein-btn--rot { background: var(--ein-rot); color: #fff; }
.ein .ein-btn--rot:hover { background: #e20a0a; color: #fff; }
.ein .ein-btn--leer, .ein a.ein-btn--leer { background: transparent; color: var(--ein-hell); box-shadow: inset 0 0 0 1.5px var(--ein-hell-leise); }
.ein .ein-btn--leer:hover { color: var(--ein-hell); box-shadow: inset 0 0 0 1.5px var(--ein-hell); }
.ein .ein-btn__icon { inline-size: 1.55rem; block-size: 1.55rem; stroke-width: 3.2; }
.ein .ein-btn--rot .ein-btn__icon .ein-icon__geist { stroke: var(--ein-gold); }
.ein .ein-btn svg:not(.ein-btn__icon) { inline-size: 1.1em; block-size: 1.1em; }
.ein .ein-textlink {
  display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--ein-hell);
  text-decoration: underline; text-decoration-color: var(--ein-gold); text-decoration-thickness: 2px; text-underline-offset: 0.32em;
}
.ein .ein-textlink:hover { color: var(--ein-gold); }
.ein .ein-textlink svg { inline-size: 1.1em; block-size: 1.1em; transition: translate 0.2s ease; }
.ein .ein-textlink:hover svg { translate: 3px 0; }
.ein .ein-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin: 1.6rem 0 0; max-inline-size: none; }

/* Abzug: Kleinbild-Abzug mit weissem Rand, leicht schraeg, mit Klebestreifen */
.ein .ein-abzug {
  position: relative; display: block; margin: 0; background: var(--ein-abzug);
  padding: clamp(0.45rem, 0.3rem + 0.6vw, 0.8rem) clamp(0.45rem, 0.3rem + 0.6vw, 0.8rem) 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 24px 44px -20px rgba(0, 0, 0, 0.7);
  transform: rotate(var(--ein-dreh, 0deg));
}
.ein .ein-abzug__bild { position: relative; display: block; overflow: hidden; background: #26221d; aspect-ratio: 3 / 2; }
.ein .ein-abzug__bild > img, .ein .ein-abzug__bild > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ein .ein-abzug figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.45rem 0.15rem 0.6rem; color: var(--ein-tinte); }
.ein .ein-abzug figcaption .ein-marker { font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem); color: var(--ein-kuli); }
.ein .ein-ki { font-family: var(--ein-font-schreib); font-size: 0.72rem; color: #6b645a; white-space: nowrap; }
.ein .ein-klebe {
  position: absolute; inset-block-start: -0.75rem; inline-size: clamp(3.8rem, 2.8rem + 3vw, 6.4rem); block-size: 1.55rem;
  background: rgba(238, 229, 201, 0.78); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); pointer-events: none;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 2%, 26% 9%, 34% 1%, 42% 8%, 50% 0, 58% 9%, 66% 2%, 74% 10%, 82% 1%, 90% 8%, 100% 3%, 97% 94%, 90% 100%, 82% 91%, 74% 99%, 66% 92%, 58% 100%, 50% 91%, 42% 99%, 34% 92%, 26% 100%, 18% 92%, 10% 99%, 3% 92%);
}
.ein .ein-klebe--l { inset-inline-start: 7%; transform: rotate(-7deg); }
.ein .ein-klebe--r { inset-inline-end: 7%; transform: rotate(6deg); }
/* Oranger Datumsstempel der Kamera */
.ein .ein-datum {
  position: absolute; inset-inline-end: 4%; inset-block-end: 4.5%; z-index: 2; pointer-events: none;
  font-family: var(--ein-font-lcd); font-weight: 700; font-size: clamp(0.72rem, 0.55rem + 0.55vw, 1.1rem); line-height: 1;
  letter-spacing: 0.08em; color: var(--ein-stempel); filter: blur(0.35px); mix-blend-mode: screen; white-space: pre;
}

/* Sofortbild: breiter Unterrand fuer die Beschriftung */
.ein .ein-polaroid {
  position: relative; display: block; margin: 0; background: var(--ein-abzug); color: var(--ein-tinte);
  padding: 0.55rem 0.55rem 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 30px -16px rgba(0, 0, 0, 0.75);
  transform: rotate(var(--ein-dreh, 0deg));
  outline: 3px solid transparent; outline-offset: 3px;
  transition: transform 0.25s cubic-bezier(.22, .61, .36, 1), outline-color 0.2s ease;
}
.ein .ein-polaroid__bild { position: relative; display: block; overflow: hidden; background: #26221d; aspect-ratio: 4 / 5; }
.ein .ein-polaroid--quadrat .ein-polaroid__bild, .ein .ein-polaroid--frei .ein-polaroid__bild { aspect-ratio: 1; }
.ein .ein-polaroid__bild > img, .ein .ein-polaroid__bild > video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ein .ein-polaroid__bild > video.ein-kartenvideo { opacity: 0; transform: scale(1.042); transition: opacity 0.4s ease; }
.ein .ein-polaroid__bild.has-video > video.ein-kartenvideo { opacity: 1; }
.ein .ein-polaroid__text { display: grid; gap: 0.12rem; padding: 0.6rem 0.25rem 0.85rem; min-inline-size: 0; }

/* Gewaehlt: gezeichneter Haken in Gold mit schwarzem Versatz */
.ein .ein-haken {
  position: absolute; inset-block-start: 0.3rem; inset-inline-end: 0.3rem; z-index: 3; inline-size: 2.7rem; block-size: 2.7rem;
  stroke: var(--ein-gold); stroke-width: 5.5; opacity: 0; transform: scale(0.5) rotate(-12deg); pointer-events: none; overflow: visible;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.ein .ein-haken__geist { stroke: var(--ein-schwarz); }
.ein input:checked + * .ein-haken { opacity: 1; transform: none; }

/* ============================ Hero ============================ */
.ein .ein-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ein-nacht) var(--ein-nacht-bild, none) center / cover no-repeat;
  color: var(--ein-hell);
  padding-block: clamp(1.8rem, 1rem + 3vw, 3.6rem) clamp(5rem, 3.5rem + 5vw, 8rem);
}
.ein .ein-hero__grid { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
/* Desktop: links Schlagzeile (zwei Zeilen), Text, Preis, Uhr und Knoepfe, rechts
   von oben an der grosse Abzug der Mauerszene. */
@media (min-width: 60rem) {
  .ein .ein-hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
    grid-template-areas: "kopf bild" "lead bild" "rest bild";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(2rem, 0.5rem + 3vw, 4rem); row-gap: 0; align-items: start;
  }
  .ein .ein-hero__kopf { grid-area: kopf; }
  .ein .ein-hero__lead { grid-area: lead; margin-block-start: 1.3rem; }
  .ein .ein-abzug--hero { grid-area: bild; align-self: start; margin-block-start: 2.2rem; }
  .ein .ein-hero__rest { grid-area: rest; margin-block-start: 1.3rem; }
}
/* Zwei feste Zeilen. "Die Preise auch." laeuft in Anton rund 6,5 em breit, deshalb richtet
   sich die Groesse nach der Spaltenbreite (Container-Einheit), nie nach dem Fenster. */
.ein .ein-hero__kopf { container-type: inline-size; }
.ein .ein-hero h1 {
  margin: 0; color: var(--ein-hell); line-height: 0.95;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 4.4rem);
  font-size: min(5.4rem, 12.4cqi);
}
.ein .ein-h1__eins, .ein .ein-h1__zwei { white-space: nowrap; }
.ein .ein-h1__eins, .ein .ein-h1__zwei { display: block; inline-size: fit-content; }
.ein .ein-hero h1 .ein-h1__zwei { color: var(--ein-gold); }
.ein .ein-lead { margin: 1.1rem 0 0; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.5; color: var(--ein-hell-weich); max-inline-size: 40ch; }
.ein .ein-abzug--hero { transform: rotate(var(--ein-dreh, 0deg)); }
.ein .ein-abzug--hero .ein-abzug__still { z-index: 2; }
/* Hero-Film: erst das Intro (die Mauer bricht), dann nahtlos die Schleife (Start = Endbild des Intros) */
.ein .ein-herofilm__loop { opacity: 0; z-index: 0; }
.ein .ein-herofilm__intro { z-index: 1; }
.ein .ein-herofilm.ist-schleife .ein-herofilm__loop { opacity: 1; z-index: 1; }
.ein .ein-herofilm.ist-schleife .ein-herofilm__intro { opacity: 0; z-index: 0; }
/* iPhone: kein eingeblendeter Startknopf auf stummen Hintergrundvideos (jeweils eigene Regel, sonst verwirft Firefox den Block) */
.ein video:not([controls])::-webkit-media-controls { display: none !important; }
.ein video:not([controls])::-webkit-media-controls-panel { display: none !important; }
.ein video:not([controls])::-webkit-media-controls-play-button { display: none !important; }
.ein video:not([controls])::-webkit-media-controls-overlay-play-button { display: none !important; }
.ein video:not([controls])::-webkit-media-controls-start-playback-button { display: none !important; }

/* Preisanker ohne Kasten */
.ein .ein-preis { display: grid; justify-items: start; }
.ein .ein-preis__ab { font-family: var(--ein-font-schreib); font-size: 0.95rem; color: var(--ein-hell-weich); }
.ein .ein-preis__zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin: 0.35rem 0 0.5rem; }
.ein .ein-preis__zahl {
  position: relative; display: inline-block; padding: 0.06em 0.36em 0.08em 0.26em; margin-inline-start: -0.26em;
  font-family: var(--ein-font-plakat); font-size: clamp(2.9rem, 2.2rem + 2.6vw, 4.3rem); line-height: 1;
  color: var(--ein-hell); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ein .ein-kreis { position: absolute; inset: -0.12em -0.1em -0.16em -0.08em; inline-size: calc(100% + 0.18em); block-size: calc(100% + 0.28em); color: var(--ein-gold); pointer-events: none; overflow: visible; }
.ein .ein-preis__monat { font-family: var(--ein-font-plakat); font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); color: var(--ein-hell); }
.ein .ein-preis__statt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.4rem; font-size: 1rem; color: var(--ein-hell-weich); }
.ein .ein-preis__statt s { color: var(--ein-hell); text-decoration-color: var(--ein-rot); text-decoration-thickness: 2px; }
.ein .ein-preis__rabatt { font-family: var(--ein-font-marker); font-weight: 400; font-size: 1.75rem; line-height: 1; color: var(--ein-gold); margin-inline-start: 0.25rem; }
.ein .ein-preis__spar { display: flex; align-items: center; gap: 0.5rem; margin-block-start: 0.35rem; font-family: var(--ein-font-marker); font-size: 1.75rem; line-height: 1.1; color: var(--ein-gold); }
.ein .ein-pfeil { inline-size: 2.3rem; block-size: 1.2rem; color: var(--ein-rot); flex: none; overflow: visible; }

/* Countdown als Siebensegment-Anzeige wie ein Radiowecker von 1990 */
.ein .ein-uhr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.95rem; margin: 1.35rem 0 0; max-inline-size: none; }
.ein .ein-uhr__label { flex-basis: 100%; font-family: var(--ein-font-schreib); font-size: 1rem; color: var(--ein-gold); }
.ein .ein-uhr__z { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.ein .ein-uhr__z b {
  position: relative; isolation: isolate; font-family: var(--ein-font-lcd); font-weight: 700; font-style: normal;
  font-size: clamp(1.75rem, 1.35rem + 1.4vw, 2.5rem); line-height: 1; color: var(--ein-led); font-variant-numeric: tabular-nums;
}
.ein .ein-uhr__z b::before { content: attr(data-leer); position: absolute; inset: 0; z-index: -1; color: rgba(255, 75, 43, 0.13); }
.ein .ein-uhr__z i { font-style: normal; font-family: var(--ein-font-schreib); font-size: 0.85rem; color: var(--ein-hell-weich); }
.ein .ein-uhr--klein .ein-uhr__z b { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.ein .ein-fakten { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.ein .ein-fakten li { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--ein-hell); }

/* Handy: Kopf, dann das Bild, dann Preis, Uhr, Knoepfe */
@media (max-width: 59.99rem) {
  .ein .ein-hero__lead { margin-block-start: -0.6rem; }
  .ein .ein-abzug--hero { margin-inline: 0.2rem; }
  .ein .ein-hero__rest { margin-block-start: 0.4rem; }
}

/* ============================ Funnel im Hero ============================ */
.ein .einf { position: relative; margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem); padding-block-start: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
/* Abtrennlinie wie bei einem Coupon */
.ein .einf::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 0; border-block-start: 2px dashed rgba(246, 241, 230, 0.32); }
.ein .einf__schere { position: absolute; inset-block-start: -0.8rem; inset-inline-start: 0; inline-size: 1.6rem; block-size: 1.6rem; color: var(--ein-hell-weich); background: transparent; }
.ein .einf-kopf { display: grid; gap: 1.1rem; margin-block-end: 1.6rem; }
@media (min-width: 60rem) {
  .ein .einf-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: end; column-gap: 3rem; }
  .ein .einf-balken { grid-column: 1 / -1; }
}
.ein .einf-kopf h2 { margin: 0; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.4rem); line-height: 1; color: var(--ein-hell); }
.ein .einf-kopf .ein-h2__markiert { color: var(--ein-gold); }
.ein .einf-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.ein .einf-schritte button {
  inline-size: 100%; display: flex; align-items: center; gap: 0.55rem; text-align: start;
  background: none; border: 0; padding: 0.3rem 0; cursor: pointer; color: inherit; font: inherit;
}
.ein .einf-schritte b { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 2.1rem; line-height: 1; color: #736b5e; transition: color 0.25s ease; }
.ein .einf-schritte span { display: grid; min-inline-size: 0; line-height: 1.2; }
.ein .einf-schritte i { font-style: normal; font-weight: 700; font-size: 0.95rem; color: var(--ein-hell-weich); }
.ein .einf-schritte em { font-style: normal; font-size: 0.8rem; color: var(--ein-hell-leise); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ein .einf-schritte li.is-aktiv b { color: var(--ein-gold); }
.ein .einf-schritte li.is-aktiv i { color: var(--ein-hell); }
.ein .einf-schritte li.is-fertig b { color: var(--ein-hell); }
.ein .einf-schritte li.is-fertig em { color: var(--ein-gold); font-weight: 600; }
.ein .einf-balken { display: block; block-size: 2px; background: rgba(246, 241, 230, 0.16); overflow: hidden; }
.ein .einf-balken span { display: block; block-size: 100%; inline-size: 0; background: var(--ein-gold); transition: inline-size 0.45s cubic-bezier(.22, .61, .36, 1); }

.ein .einf-bahn { overflow: hidden; margin-inline: -1rem; padding-inline: 1rem; transition: block-size 0.4s cubic-bezier(.22, .61, .36, 1); }
.ein .einf-track { display: flex; inline-size: 400%; align-items: flex-start; transition: transform 0.55s cubic-bezier(.22, .61, .36, 1); will-change: transform; }
.ein .einf-panel {
  inline-size: 25%; flex: none; box-sizing: border-box; padding: 0.6rem 1rem 1.4rem;
  opacity: 0.3; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.55s;
}
.ein .einf-panel.is-aktiv { opacity: 1; visibility: visible; transition: opacity 0.4s ease, visibility 0s; }
.ein .einf-frage { margin: 0; font-family: var(--ein-font-plakat); font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.3rem); line-height: 1.05; color: var(--ein-hell); }
.ein .einf-hinweis { margin: 0.45rem 0 1.2rem; font-size: 0.98rem; line-height: 1.45; color: var(--ein-hell-weich); max-inline-size: 62ch; }
.ein .einf-zurueck {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.6rem; padding: 0.3rem 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ein-gold);
}
.ein .einf-zurueck svg { inline-size: 1.1em; block-size: 1.1em; }

/* Karten allgemein */
.ein .ein-karte { list-style: none; }
.ein .ein-karte label, .ein .ein-stufe label { display: block; block-size: 100%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ein .ein-karte input, .ein .ein-stufe input { position: absolute; opacity: 0; pointer-events: none; inline-size: 1px; block-size: 1px; }
.ein .ein-karte .ein-polaroid, .ein .ein-karte .ein-abzug { block-size: 100%; transition: transform 0.25s cubic-bezier(.22, .61, .36, 1), outline-color 0.2s ease; outline: 3px solid transparent; outline-offset: 3px; }
.ein .ein-karte label:hover .ein-polaroid, .ein .ein-karte label:hover .ein-abzug { transform: rotate(0deg) translateY(-4px); }
.ein .ein-karte input:checked + .ein-polaroid, .ein .ein-karte input:checked + .ein-abzug { transform: rotate(0deg); outline-color: var(--ein-gold); }
.ein .ein-karte input:focus-visible + .ein-polaroid, .ein .ein-karte input:focus-visible + .ein-abzug { outline-color: #fff; }
.ein .ein-karte__zeile { font-family: var(--ein-font-schreib); font-size: 0.78rem; line-height: 1.3; color: var(--ein-grau); }
.ein .ein-karte__name { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.18rem; line-height: 1.1; color: var(--ein-tinte); }
.ein .ein-karte__preis { display: inline-flex; align-items: baseline; gap: 0.15rem; margin-block-start: 0.25rem; font-family: var(--ein-font-plakat); font-size: 1.6rem; line-height: 1; color: var(--ein-tinte); white-space: nowrap; }
.ein .ein-karte__preis small { font-family: var(--ein-font-schreib); font-size: 0.8rem; color: var(--ein-grau); }
.ein .ein-karte__statt { font-size: 0.82rem; color: var(--ein-grau); }
.ein .ein-karte__statt s, .ein .ein-ticket__statt s { color: var(--ein-tinte); text-decoration-color: var(--ein-rot); text-decoration-thickness: 1.5px; }
.ein .ein-karte__spar { margin-block-start: 0.15rem; font-family: var(--ein-font-marker); font-size: 1.2rem; line-height: 1.2; color: var(--ein-rot-papier); }
.ein .ein-preisaufkleber {
  position: absolute; inset-block-start: 0.55rem; inset-inline-start: 0.55rem; z-index: 2;
  padding: 0.3rem 0.5rem 0.24rem; border-radius: 3px; background: var(--ein-rot); color: #fff;
  font-family: var(--ein-font-plakat); font-size: 1.08rem; line-height: 1; transform: rotate(-4deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* Schritt 1: Pakete */
.ein .einf-pakete .btw-swipe__track { margin-block-start: 0.2rem; padding: 0.6rem 0.2rem 1rem; }
.ein .einf-pakete .btw-swipe__track > li { inline-size: clamp(10.5rem, 47vw, 13rem); }
@media (min-width: 52rem) {
  .ein .einf-pakete .btw-swipe__track { gap: clamp(0.9rem, 0.4rem + 1.2vw, 1.6rem); padding: 0.6rem 0 1rem; }
  .ein .einf-pakete .btw-swipe__track > li { inline-size: auto; }
}
.ein .ein-wisch { color: var(--ein-gold); font-family: var(--ein-font-marker); font-weight: 400; font-size: 1.3rem; }
.ein .ein-wisch .ein-pfeil { color: var(--ein-hell-weich); inline-size: 2rem; block-size: 1.5rem; }

/* Schritt 2: Sitzungen als Eintrittskarten mit Perforation */
.ein .einf-stufen { list-style: none; margin: 0; padding: 0.4rem 0 0.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
@media (min-width: 52rem) { .ein .einf-stufen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } }
.ein .ein-stufe { list-style: none; }
.ein .ein-stufe label { filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.45)); transition: transform 0.2s ease; }
.ein .ein-stufe label:hover { transform: translateY(-3px); }
.ein .ein-ticket {
  position: relative; display: grid; align-content: start; gap: 0.3rem; block-size: 100%; box-sizing: border-box;
  padding: 0.9rem 0.95rem 1.05rem; background: #f4eddb; color: var(--ein-tinte); border-radius: 4px;
  -webkit-mask: radial-gradient(circle at 0 3.35rem, transparent 0.5rem, #000 0.52rem) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 3.35rem, transparent 0.5rem, #000 0.52rem) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 3.35rem, transparent 0.5rem, #000 0.52rem) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 3.35rem, transparent 0.5rem, #000 0.52rem) right / 51% 100% no-repeat;
  transition: box-shadow 0.2s ease;
}
.ein .ein-stufe--tipp .ein-ticket { background: var(--ein-gold); }
.ein .ein-ticket__kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.45rem; padding-block-end: 0.6rem; margin-block-end: 0.15rem; border-block-end: 2px dashed rgba(29, 27, 24, 0.35); min-block-size: 2.45rem; }
.ein .ein-ticket__kopf b { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 2.4rem; line-height: 0.9; }
.ein .ein-ticket__kopf span { font-family: var(--ein-font-schreib); font-size: 0.95rem; }
.ein .ein-ticket__tipp { font-family: var(--ein-font-marker); font-size: 1.15rem; line-height: 1; color: var(--ein-rot-papier); transform: rotate(-3deg); }
.ein .ein-ticket__rabatt { font-family: var(--ein-font-plakat); font-size: 1.35rem; line-height: 1.1; color: var(--ein-rot-papier); }
.ein .ein-ticket__preis { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem; font-family: var(--ein-font-plakat); font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem); line-height: 1; }
.ein .ein-ticket__preis small { font-family: var(--ein-font-schreib); font-size: 0.82rem; color: var(--ein-grau); }
.ein .ein-ticket__info, .ein .ein-ticket__statt { font-size: 0.8rem; line-height: 1.35; color: var(--ein-grau); }
.ein .ein-stufe--tipp .ein-ticket__info, .ein .ein-stufe--tipp .ein-ticket__statt, .ein .ein-stufe--tipp .ein-ticket__preis small { color: #3b3326; }
.ein .ein-stufe input:checked + .ein-ticket { box-shadow: inset 0 0 0 3px var(--ein-rot); }
.ein .ein-stufe--tipp input:checked + .ein-ticket { box-shadow: inset 0 0 0 3px var(--ein-schwarz); }
.ein .ein-stufe input:focus-visible + .ein-ticket { box-shadow: inset 0 0 0 3px var(--ein-kuli); }
.ein .ein-ticket .ein-haken { inset-block-start: auto; inset-block-end: 0.55rem; inset-inline-end: 0.55rem; stroke: var(--ein-rot); }
.ein .ein-stufe--tipp .ein-ticket .ein-haken { stroke: var(--ein-schwarz); }
.ein .ein-ticket .ein-haken__geist { stroke: rgba(29, 27, 24, 0.35); }

/* Schritt 3: Fuer wen */
.ein .einf-wer { list-style: none; margin: 0; padding: 0.6rem 0 0.4rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 2.5vw, 2.2rem); max-inline-size: 38rem; }
.ein .ein-karte--wer .ein-karte__name { font-family: var(--ein-font-marker); font-size: clamp(1.7rem, 1.4rem + 0.9vw, 2.1rem); color: var(--ein-kuli); }
.ein .ein-karte__zonen { font-size: 0.8rem; line-height: 1.4; color: var(--ein-grau); }

/* Schritt 4: Studios als Abzuege */
.ein .einf-studios .btw-swipe__track { margin-block-start: 0.2rem; padding: 0.8rem 0.2rem 1rem; }
.ein .einf-studios .btw-swipe__track > li { inline-size: clamp(12.5rem, 64vw, 15.5rem); }
@media (min-width: 52rem) {
  .ein .einf-studios .btw-swipe__track { gap: clamp(1.1rem, 0.5rem + 1.4vw, 2rem); padding: 0.8rem 0 1rem; }
  .ein .einf-studios .btw-swipe__track > li { inline-size: auto; }
}
.ein .ein-abzug--karte { padding: 0.5rem 0.5rem 0; }
.ein .ein-abzug--karte .ein-abzug__bild { aspect-ratio: 4 / 3; }
.ein .ein-abzug__text { display: grid; gap: 0.06rem; padding: 0.5rem 0.2rem 0.75rem; }
.ein .ein-karte__stadt { font-size: 1.3rem; color: var(--ein-kuli); }
.ein .ein-abzug__text small { font-size: 0.8rem; line-height: 1.35; color: var(--ein-grau); }
.ein .einf-nochmal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin: 1.3rem 0 0; font-weight: 600; color: var(--ein-hell); max-inline-size: none; }
.ein .einf-nochmal[hidden] { display: none; }
.ein .einf-fuss { margin: 1.1rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--ein-hell-leise); max-inline-size: 78ch; }

/* Gebrochene Mauerkante am Hero-Ende */
.ein .ein-bruchkante { position: absolute; inset-inline: 0; inset-block-end: -1px; display: block; inline-size: 100%; block-size: clamp(2.4rem, 1.6rem + 2.6vw, 4.6rem); pointer-events: none; }
.ein .ein-bruchkante__beton { fill: var(--ein-papier); }
.ein .ein-bruchkante__stahl { fill: none; stroke: #8a6c4c; stroke-width: 2.5; stroke-linecap: round; }
.ein .ein-bruchkante--oben { inset-block-end: auto; inset-block-start: -1px; transform: scaleY(-1); }

/* ============================ Papier-Abschnitte ============================ */
.ein .ein-papier { position: relative; isolation: isolate; background: var(--ein-papier); color: var(--ein-tinte); padding-block: clamp(2.6rem, 1.9rem + 2.6vw, 4.2rem); }
.ein .ein-zeitreise { padding-block-start: clamp(3.4rem, 2.6rem + 3vw, 5rem); }
/* Kein Korn auf dem Papier: die Wellen haetten sonst eine Naht zum gekoernten Abschnitt. */
.ein .ein-kopfzeile { margin-block-end: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem); }
.ein .ein-papier .ein-schreibmaschine { color: var(--ein-rot-papier); }
.ein .ein-papier h2 { margin: 0; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1; color: var(--ein-tinte); max-inline-size: 24ch; text-wrap: balance; }
/* Auf Papier wird der Strich zum Textmarker hinter dem Wort */
.ein .ein-papier .ein-h2__markiert .ein-strich { inset-block-end: 0.02em; block-size: 0.46em; color: var(--ein-gold); }
.ein .ein-papier .ein-h2__markiert .ein-strich path { stroke-width: 16; }
.ein .ein-text { margin: 0 0 1.3rem; font-size: 1.05rem; line-height: 1.55; color: var(--ein-tinte-weich); max-inline-size: 58ch; }
.ein .ein-papier .ein-textlink { color: var(--ein-tinte); }
.ein .ein-fein { margin: 1.4rem 0 0; font-size: 0.85rem; color: var(--ein-tinte-weich); }
.ein .ein-fein a { color: var(--ein-tinte); text-decoration-color: var(--ein-rot); }
.ein .ein-papier .ein-icon { color: var(--ein-tinte); }

/* Zeitreise */
.ein .ein-zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.4rem, 1.8rem + 2vw, 3.2rem); }
@media (min-width: 52rem) { .ein .ein-zeitleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 0.8rem + 2vw, 3rem); } }
.ein .ein-zeit { min-inline-size: 0; }
.ein .ein-zeit .ein-abzug { transform: rotate(var(--ein-dreh, 0deg)); }
.ein .ein-zeit__datum { margin: 1.5rem 0 0.25rem; padding-block-start: 0.65rem; border-block-start: 1px solid rgba(29, 27, 24, 0.28); font-family: var(--ein-font-schreib); font-size: 1rem; color: var(--ein-rot-papier); }
.ein .ein-zeit h3 { margin: 0; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.05; color: var(--ein-tinte); }
.ein .ein-zeit__text { margin: 0.45rem 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--ein-tinte-weich); }

/* Warum jetzt */
.ein .ein-gruende { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 0 clamp(1rem, 0.5rem + 2vw, 2.6rem); }
.ein .ein-grund { border-block-start: 1px solid rgba(29, 27, 24, 0.25); }
.ein .ein-grund summary { list-style: none; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 1.05rem 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ein .ein-grund summary::-webkit-details-marker { display: none; }
.ein .ein-grund summary .ein-icon { inline-size: 2.8rem; block-size: 2.8rem; stroke-width: 2.3; transition: scale 0.25s ease; }
.ein .ein-grund summary:hover .ein-icon { scale: 1.07; }
.ein .ein-grund__text { display: grid; gap: 0.12rem; min-inline-size: 0; }
.ein .ein-grund__text b { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.35rem; line-height: 1.1; color: var(--ein-tinte); }
.ein .ein-grund__text span { font-size: 0.9rem; line-height: 1.35; color: var(--ein-tinte-weich); }
.ein .ein-grund__plus { position: relative; inline-size: 1.4rem; block-size: 1.4rem; color: var(--ein-rot-papier); }
.ein .ein-grund__plus::before, .ein .ein-grund__plus::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 0.8rem; block-size: 2px;
  background: currentColor; border-radius: 2px; translate: -50% -50%; transition: rotate 0.25s ease;
}
.ein .ein-grund__plus::after { rotate: 90deg; }
.ein .ein-grund details[open] .ein-grund__plus::after { rotate: 0deg; }
.ein .ein-grund details p { margin: 0; padding: 0 0 1.15rem calc(2.8rem + 0.85rem); font-size: 0.96rem; line-height: 1.5; color: var(--ein-tinte-weich); overflow: hidden; }

/* Raten: getippte Preisliste */
.ein .ein-raten__grid { display: grid; gap: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
@media (min-width: 60rem) { .ein .ein-raten__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; } }
.ein .ein-liste__rahmen { overflow-x: auto; }
.ein .ein-liste { inline-size: 100%; border-collapse: collapse; font-family: var(--ein-font-schreib); font-size: 0.95rem; color: var(--ein-tinte); }
.ein .ein-liste th, .ein .ein-liste td { padding: 0.65rem 0.5rem; text-align: end; font-weight: 400; white-space: nowrap; border-block-end: 1px dashed rgba(29, 27, 24, 0.32); }
.ein .ein-liste th:first-child, .ein .ein-liste td:first-child { text-align: start; white-space: normal; padding-inline-start: 0; }
.ein .ein-liste thead th { font-size: 0.8rem; color: var(--ein-tinte-weich); border-block-end: 2px solid var(--ein-tinte); }
.ein .ein-liste tbody th { font-family: var(--lx-font-body, system-ui); font-weight: 700; font-size: 0.95rem; }
.ein .ein-liste td[data-bx-tab-rab] { color: var(--ein-rot-papier); }
.ein .ein-liste__rate { font-weight: 700; }
@media (max-width: 40rem) { .ein .ein-liste .nur-breit { display: none; } }
.ein .ein-abzug--loop .ein-abzug__bild > video { background: #26221d; }

/* FAQ als Karteikarten ohne Kasten */
.ein .ein-faq { gap: 0 clamp(1rem, 0.5rem + 2vw, 2.6rem); }
.ein .ein-faq details { border: 0; border-block-start: 1px solid rgba(29, 27, 24, 0.25); border-radius: 0; background: transparent; }
.ein .ein-faq details[open] { background: transparent; }
.ein .ein-faq summary { padding-inline: 0; font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.2rem; line-height: 1.2; color: var(--ein-tinte); }
.ein .ein-faq summary::after { border-color: var(--ein-rot-papier); }
.ein .ein-faq .lx-faq__body { padding-inline: 0; color: var(--ein-tinte-weich); }

/* ============================ Abschluss ============================ */
.ein .ein-schluss {
  position: relative; isolation: isolate; overflow: hidden; color: var(--ein-hell);
  background: linear-gradient(to bottom, #0f080c 0, rgba(15, 8, 12, 0) 32%), var(--ein-nacht-bild, none) center / cover no-repeat;
  background-color: #0f080c;
  /* unten so viel Platz wie der Aquarell-Uebergang des Footers hoch ist */
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) calc(clamp(7rem, 3rem + 13vw, 18rem) + 1.5rem);
}
.ein .ein-schluss__grid { display: grid; gap: clamp(2.4rem, 1.5rem + 3vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .ein .ein-schluss__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); } }
.ein .ein-schluss__text { container-type: inline-size; min-inline-size: 0; }
.ein .ein-schluss h2 { margin: 0; line-height: 0.98; color: var(--ein-hell); font-size: clamp(2.2rem, 1.5rem + 3vw, 4.4rem); font-size: min(4.6rem, 10.8cqi); }
.ein .ein-schluss h2 .ein-h1__zwei { color: var(--ein-gold); }
.ein .ein-schluss .ein-lead b { color: var(--ein-hell); }
.ein .ein-polaroid--frei { justify-self: center; inline-size: min(100%, 24rem); }
.ein .ein-polaroid--frei .ein-polaroid__text { padding: 0.9rem 0.3rem 1.3rem; }
.ein .ein-polaroid--frei .ein-marker { font-size: 1.9rem; color: var(--ein-kuli); }

/* ============================ CTA-Leiste ============================ */
.ein .ein-sticky { background: rgba(13, 12, 11, 0.97); border-block-start: 1px solid rgba(246, 241, 230, 0.14); color: var(--ein-hell); }
.ein .ein-sticky .btw-sticky__text b { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.01em; }
.ein .ein-sticky .btw-sticky__text small { color: var(--ein-hell-weich); }
.ein .ein-sticky .ein-btn { min-block-size: 2.75rem; padding: 0.55rem 1.1rem; font-size: 1.1rem; flex: none; }
.ein .ein-sticky .ein-btn--gold { margin-inline-start: auto; }
@media (max-width: 52rem) {
  .ein .ein-sticky .btw-sticky__text b { font-size: 1rem; }
  .ein .ein-sticky .btw-sticky__ghost { display: none; }
}

/* ============================ Handy ============================ */
@media (max-width: 40rem) {
  .ein .einf-schritte { gap: 0.3rem; }
  .ein .einf-schritte button { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .ein .einf-schritte b { font-size: 1.7rem; }
  .ein .einf-schritte i { font-size: 0.85rem; }
  .ein .einf-schritte em { max-inline-size: 100%; font-size: 0.72rem; }
  .ein .ein-grund details p { padding-inline-start: 0; }
  .ein .ein-ticket { padding: 0.8rem 0.75rem 0.95rem; }
  .ein .ein-ticket__kopf b { font-size: 2.1rem; }
  .ein .ein-ctas .ein-btn { flex: 1 1 100%; }
}

/* ============================ Nach dem 3. Oktober ============================ */
.ein-vorbei .ein [data-ein-frist] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ein .einf-track, .ein .einf-bahn, .ein .einf-panel, .ein .einf-balken span, .ein .ein-polaroid, .ein .ein-abzug, .ein .ein-haken, .ein .ein-btn { transition: none; }
}


/* ============================ Nachtrag 21.09.2026 (Jasper) ============================ */

/* Weiche, geschwungene Uebergaenge statt Bruchkante: drei Wellen, die hinteren weich
   gezeichnet, keine harte Kante. Hero -> Papier und Papier -> Abschluss. */
.ein .ein-welle { position: absolute; inset-inline: 0; inset-block-end: -1px; z-index: 1; display: block; inline-size: 100%; block-size: clamp(4.5rem, 2.4rem + 7vw, 10rem); pointer-events: none; overflow: visible; }
.ein .ein-welle path { fill: var(--ein-papier); }
.ein .ein-welle .ein-welle__hinten { opacity: 0.3; }
.ein .ein-welle .ein-welle__mitte { opacity: 0.6; }
.ein .ein-welle--dunkel path { fill: #0f080c; }
.ein .ein-welle--dunkel .ein-welle__hinten { opacity: 0.4; }
.ein .ein-hero { padding-block-end: clamp(6rem, 4rem + 7vw, 11rem); }
.ein .ein-faq-sec { padding-block-end: clamp(7rem, 4.5rem + 8vw, 13rem); }
.ein .ein-bruchkante { display: none; }

/* Karten: kleines "ab" vor der Monatsrate */
.ein .ein-karte__ab { font-family: var(--ein-font-schreib); font-size: 0.8rem; color: var(--ein-grau); margin-inline-end: 0.2rem; }
.ein .ein-liste thead th { line-height: 1.25; vertical-align: bottom; }

/* Nur diese Seite: Kopfleiste im Hero-Dunkel, Logo, Links und Knopf weiss */
body.ein-seite nav.nav { background: #0f080c; border-block-end-color: rgba(246, 241, 230, 0.08); -webkit-backdrop-filter: none; backdrop-filter: none; }
body.ein-seite nav.nav .nav-links > li > button { color: #fff; }
body.ein-seite nav.nav .nav-links > li > button:hover,
body.ein-seite nav.nav .nav-links > li > button[aria-expanded="true"] { color: #ffce00; }
body.ein-seite nav.nav a.nav-cta { background: #fff; color: #141414; border-color: #fff; }
body.ein-seite nav.nav a.nav-cta:hover { background: #ffce00; color: #141414; border-color: #ffce00; }
body.ein-seite nav.nav .lang-switch, body.ein-seite nav.nav .lang-switch-btn { color: #fff; background: transparent; border-color: rgba(255, 255, 255, 0.35); }
body.ein-seite nav.nav .nav-mobile-toggle { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

/* Nur diese Seite: Footer schwarz, nach oben ein Aquarell-Uebergang mit immer schwaecheren Pinselstrichen */
body.ein-seite footer.footer { position: relative; background: #0a0908; }
body.ein-seite footer.footer::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: calc(100% - 2px); z-index: 2;
  block-size: clamp(7rem, 3rem + 13vw, 18rem); pointer-events: none;
  background: url("/assets/img/einheit/aquarell-kante.webp?v=1") center bottom / cover no-repeat;
}


/* Preisblock plakativ (Jasper 21.09.2026): 27,75 gruen mit 1 px weissem Rand und dauerhaft
   leichtem Puls, "im Monat" klein direkt am Preis, Streichpreis rot mit weissem Rand, schraeg,
   von Hand durchgestrichen. -webkit-text-stroke ist kein text-shadow. */
.ein .ein-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ein .ein-preis .ein-preis__zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem; margin: 0.5rem 0 0.7rem; }
.ein .ein-preis .ein-preis__zahl {
  display: inline-block; padding: 0; margin: 0; white-space: nowrap; transform-origin: 35% 60%;
  font-family: var(--ein-font-plakat); font-size: clamp(3.7rem, 2.6rem + 3.8vw, 6rem); line-height: 0.9; letter-spacing: 0.005em;
  color: #1fd16b; -webkit-text-stroke: 1px #fff; paint-order: stroke fill; font-variant-numeric: tabular-nums;
  animation: ein-puls 2.4s ease-in-out infinite;
}
@keyframes ein-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.ein .ein-preis .ein-preis__monat {
  align-self: flex-end; margin-inline-start: -0.55rem; padding-block-end: 0.55rem;
  font-family: var(--lx-font-body, system-ui); font-weight: 500; font-size: 0.95rem; line-height: 1.05; color: var(--ein-hell-weich);
}
.ein .ein-preis .ein-preis__alt { position: relative; display: inline-block; margin-inline-start: 0.5rem; transform: rotate(-8deg); }
.ein .ein-preis .ein-preis__alt s {
  text-decoration: none; font-family: var(--ein-font-plakat); font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.2rem); line-height: 1;
  color: #e10600; -webkit-text-stroke: 1.3px #fff; paint-order: stroke fill; white-space: nowrap;
}
.ein .ein-preis__durch { position: absolute; inset-inline-start: -10%; inset-block-start: 30%; inline-size: 120%; block-size: 0.6em; color: #fff; overflow: visible; pointer-events: none; transform: rotate(-7deg); }
.ein .ein-preis .ein-preis__spar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin-block-start: 0.1rem; font-family: var(--ein-font-marker); font-size: 1.7rem; line-height: 1.1; color: var(--ein-gold); }
.ein .ein-preis .ein-preis__spar b { font-family: var(--ein-font-plakat); font-weight: 400; font-size: 1.45rem; color: var(--ein-hell); }
@media (prefers-reduced-motion: reduce) { .ein .ein-preis .ein-preis__zahl { animation: none; } }

/* Startknopf auf dem Hero-Film, nur wenn Autoplay blockiert ist (iPhone-Stromsparmodus, In-App-Browser) */
.ein .ein-herofilm__start {
  position: absolute; inset-inline-start: 4%; inset-block-end: 5%; z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.95rem; border: 0; border-radius: 4px; cursor: pointer; background: rgba(13, 12, 11, 0.72); color: #fff;
  font-family: var(--ein-font-schreib); font-size: 0.95rem; line-height: 1;
}
.ein .ein-herofilm__start svg { inline-size: 1.1rem; block-size: 1.1rem; }
.ein .ein-herofilm__start:hover { background: rgba(13, 12, 11, 0.88); }
.ein .ein-herofilm__start[hidden] { display: none; }

/* Jasper 21.09.: neben der 3er-Rate gross die Obergrenze "bis zu -73 %" (10er-Paket) */
.ein .ein-preis .ein-preis__max { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.7rem; margin-block-start: 0.55rem; }
.ein .ein-preis .ein-preis__max b {
  font-family: var(--ein-font-plakat); font-weight: 400; font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.8rem); line-height: 1;
  color: var(--ein-gold); white-space: nowrap;
}
.ein .ein-preis .ein-preis__max small { font-family: var(--ein-font-schreib); font-size: 1rem; color: var(--ein-hell-weich); }


/* ============================ Sprachfassungen (Spec 029, 21.09.2026) ============================ */

/* Unterstrich als Pseudoelement statt Inline-SVG: die Ueberschrift ist so ein zusammenhaengender
   Uebersetzungsbaustein (der Scanner der Sprach-Pipeline zerlegt Texte an jedem <svg>). Geometrie und
   Pfad wie .ein-strich; die alten .ein-strich-Regeln bleiben fuer den Cache-Uebergang stehen. */
.ein .ein-unterstrich { position: relative; display: inline-block; z-index: 0; }
.ein .ein-h1__zwei.ein-unterstrich { display: block; }
.ein .ein-unterstrich::after {
  content: ""; position: absolute; inset-inline-start: -0.05em; inset-block-end: -0.1em;
  inline-size: 100%; block-size: 0.2em; pointer-events: none; z-index: -1;   /* 100 %: das SVG war per svg{max-width:100%} gedeckelt */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 11 C 60 5, 120 13, 180 8 S 262 6, 296 10' fill='none' stroke='%23d10000' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Auf Papier: Textmarker in Gold hinter dem Wort */
.ein .ein-papier .ein-unterstrich::after {
  inset-block-end: 0.02em; block-size: 0.46em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cpath d='M4 11 C 60 5, 120 13, 180 8 S 262 6, 296 10' fill='none' stroke='%23ffce00' stroke-width='16' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Schriften je Schriftsystem (Spec 029): Anton, Special Elite und Caveat Brush haben nur Latein.
   Selbst gehostete Teilmengen, per unicode-range nur fuer ihre Zeichen und nur auf ihrer Sprachfassung
   im Schriftstapel. Latein und Ziffern (Preise) bleiben Anton, damit Zahlen ueberall gleich aussehen.
   Die fetten Schnitte sind als 400 angemeldet, weil die Seite Plakat- und Filzstiftschrift mit 400 setzt. */
@font-face { font-family: "Ein Plakat Kyrillisch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/oswald-700-cyrillic.woff2?v=1") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ein Marker Kyrillisch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/caveat-700-cyrillic.woff2?v=1") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Ein Plakat Devanagari"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/teko-600-devanagari.woff2?v=1") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Ein Marker Devanagari"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/kalam-700-devanagari.woff2?v=1") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Ein Plakat Arabisch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/lalezar-400-arabic.woff2?v=1") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Ein Marker Arabisch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/aref-ruqaa-700-arabic.woff2?v=1") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
html[lang="ru"] .btw.ein {
  --ein-font-plakat: "Anton", "Ein Plakat Kyrillisch", "Archivo", Impact, "Arial Narrow", sans-serif;
  --ein-font-marker: "Caveat Brush", "Ein Marker Kyrillisch", "Caveat", "Segoe Print", cursive;
}
html[lang="hi"] .btw.ein {
  --ein-font-plakat: "Anton", "Ein Plakat Devanagari", "Archivo", Impact, "Arial Narrow", sans-serif;
  --ein-font-marker: "Caveat Brush", "Ein Marker Devanagari", "Caveat", "Segoe Print", cursive;
}
html[lang="ar"] .btw.ein {
  --ein-font-plakat: "Anton", "Ein Plakat Arabisch", "Archivo", Impact, "Arial Narrow", sans-serif;
  --ein-font-marker: "Caveat Brush", "Ein Marker Arabisch", "Caveat", "Segoe Print", cursive;
}
/* Sperrung zerreisst verbundene Schriften (arabische Buchstaben, Devanagari-Kopflinie) */
html[lang="ar"] .btw.ein *:not(.ein-datum), html[lang="hi"] .btw.ein *:not(.ein-datum) { letter-spacing: 0 !important; }

/* Schlagzeilen in anderen Sprachen: Zeilen duerfen umbrechen (deutsch drei feste Zeilen) */
html:not([lang="de"]) .ein .ein-h1__eins, html:not([lang="de"]) .ein .ein-h1__zwei { white-space: normal; text-wrap: balance; }

/* ---------- rtl (Arabisch) ---------- */
/* Richtungspfeile und Schere zeigen in Leserichtung */
[dir="rtl"] .ein .ein-textlink svg, [dir="rtl"] .ein .ein-btn svg:not(.ein-btn__icon),
[dir="rtl"] .ein .einf-zurueck svg, [dir="rtl"] .ein .einf__schere { transform: scaleX(-1); }
[dir="rtl"] .ein .ein-textlink:hover svg { translate: -3px 0; }
[dir="rtl"] .ein .ein-grund__plus::before, [dir="rtl"] .ein .ein-grund__plus::after { translate: 50% -50%; }
/* Reine Zahlen (Preise, Rabatte, Countdown, Schrittnummern, Datumsstempel) als ltr-Inseln:
   sonst stellt der Bidi-Algorithmus das Minus ans andere Ende (73 %-). */
[dir="rtl"] .ein :is(.ein-preisaufkleber, [data-bx-je], [data-bx-statt], [data-bx-rabatt], [data-bx-hero-je], [data-bx-hero-statt],
  [data-bx-hero-rabatt], [data-bx-max], [data-bx-hero-rate-klein], [data-st-haupt], [data-st-rabatt], [data-st-statt],
  .ein-ticket__kopf b, .einf-schritte b, .ein-uhr__z b, .ein-datum, [data-bx-tab-rate3], [data-bx-tab-uvp3],
  [data-bx-tab-rate], [data-bx-tab-uvp], [data-bx-tab-rab]) { direction: ltr; unicode-bidi: isolate; }
/* Achtung: Elemente mit direction:ltr loesen inset-inline-* nach ihrer EIGENEN Richtung auf. Der Datumsstempel
   (inset-inline-end) bleibt dadurch wie bei der Kamera unten rechts. Der Rabattaufkleber (inset-inline-start)
   wandert bewusst nach rechts oben, sonst laege er in rtl unter dem Auswahlhaken (links oben). */
[dir="rtl"] .ein .ein-preisaufkleber { inset-inline-start: auto; right: 0.55rem; }
/* ProvenExpert-Siegel (site-weit rechts angeheftet) in rtl links, sonst liegt es auf dem rechtsbuendigen Text */
[dir="rtl"] body.ein-seite .pe-pro-seal { right: auto !important; left: 0 !important; transform-origin: left bottom !important; }

/* Tuerkisch & Co.: Latin-Extended-Teilmengen (ş, ğ, İ …) unter denselben Familiennamen; laden nur, wenn solche
   Zeichen vorkommen (die deutsche Seite hat keine). */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/anton-v27-latin-ext-400.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/special-elite-v20-latin-ext-400.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caveat Brush"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/caveat-brush-v12-latin-ext-400.woff2?v=1") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Arabisch: fuer die Schreibmaschinen-Rolle keine Monospace-Ersatzschrift (Courier setzt arabische Buchstaben
   unverbunden nebeneinander), sondern eine Naskh-Druckschrift. */
@font-face { font-family: "Ein Schreib Arabisch"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/noto-naskh-arabic-500-arabic.woff2?v=1") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
html[lang="ar"] .btw.ein { --ein-font-schreib: "Special Elite", "Ein Schreib Arabisch", "Courier New", Courier, monospace; }