/* ================================================================
   FORUS — Tickets (Blind Early Bird und was danach kommt)
   Farb-Tokens kommen vom Theme, Fallbacks = Brand Guide V0.3.
   Keine font-family (erbt vom Theme), keine Schriftgroessen auf
   Headings ausser als "Auto"-Fallback via :not(.has-display-size).
   ================================================================ */

/* Ohne border-box addiert sich seitliches Padding auf width:100%
   und die Seite wird zu breit. */
.forus-eb, .forus-eb *, .forus-eb *::before, .forus-eb *::after{ box-sizing: border-box; }

.forus-eb{
  --fu-grad: var(--gradient, linear-gradient(120deg,#9e2585 0%,#c81d84 25%,#e21961 50%,#e84c05 75%,#ec6a02 100%));
  /* Eyecatcher-Wort in der H2: voller Markenverlauf auf hell, nur das
     warme Ende auf dunkel (Violett auf Pflaume ~1,6:1, unlesbar). */
  --fu-akzent: var(--fu-grad);
  --fu-papier: var(--papier,#f1eeed);
  --fu-surface: var(--surface,#e6e0da);
  --fu-pflaume: var(--pflaume,#330f2d);
  --fu-ink: var(--ink,#1a1e20);
  /* Der Guide-Token laesst Pflaume nur bis 0 % stehen und ist dadurch
     sehr blau. Hier haelt --fu-pflaume-anteil die Pflaume laenger —
     Standard 45 %, also etwa halbe halbe. */
  --fu-grad2: linear-gradient(135deg,
    #330f2d 0%,
    #330f2d var(--fu-pflaume-anteil, 45%),
    #2b2c5a calc(var(--fu-pflaume-anteil, 45%) + 30%),
    #1f3a5f 100%);
  --fu-ease: cubic-bezier(.19,1,.22,1);
  --fu-dim: .66;   /* 0.60-0.64 lag mit 4,04-4,49:1 unter dem Kontraststandard 4,5:1 */
  --fu-lasche: clamp(54px, 4.6vw, 78px);
  --fu-seite: clamp(16rem, 24vw, 26rem);

  position: relative;
  z-index: 2;
  background: var(--fu-bg);
  color: var(--fu-fg);
  overflow-x: clip;
  padding-top: min(var(--fu-pad-top,144px), 24vw);
  padding-bottom: min(var(--fu-pad-bottom,144px), 24vw);
  /* KEIN overflow-clipping: die Welle ragt ueber die Oberkante. */
}

/* Der Abschnitt fuellt den Schirm, sobald man ihn erreicht. Kein
   Festhalten am Scrollrad — die Seite laeuft normal weiter, der
   Abschnitt ist nur so hoch wie das Fenster. svh statt vh, sonst
   schiebt die Adressleiste auf dem Handy alles aus dem Bild. */
.forus-eb--vollbild{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.forus-eb.is-bg-papier  { --fu-bg: var(--fu-papier); }
.forus-eb.is-bg-surface { --fu-bg: var(--fu-surface); }
.forus-eb.is-bg-weiss   { --fu-bg: #ffffff; }
.forus-eb.is-bg-pflaume { --fu-bg: var(--fu-pflaume); }
.forus-eb.is-bg-ink     { --fu-bg: var(--fu-ink); }
/* Sekundaerer Verlauf.
   Die Welle kann hier NICHT als gefuelltes SVG darueberliegen: ein
   SVG-fill nimmt keinen CSS-Verlauf, und der Verlauf laeuft diagonal —
   die Oberkante der Sektion ist rechts laengst blau, waehrend die
   Welle durchgehend Pflaume waere. Sichtbare Naht.
   Loesung: die Sektion waechst um die Wellenhoehe nach oben und wird
   oben mit einem Pfad beschnitten. Damit malt EIN Verlauf durch, die
   Woelbung ist ein Ausschnitt davon. module.js setzt den Pfad und
   scrubbt ihn beim Scrollen. */
.forus-eb.is-bg-verlauf2{
  --fu-bg: #330f2d;
  background-image: var(--fu-grad2);
}

/* Die driftende Ebene baut module.js und setzt ihre Stile inline.
   Grund: HubSpot liefert das zusammengefasste Stylesheet zeitweise
   veraltet aus. Steckt die Bewegung in @keyframes, ist die Regel dann
   einfach nicht da — die Animation traegt einen Namen, es gibt aber
   nichts zu animieren, und nichts bewegt sich. Aus dem Skript heraus
   kann das nicht passieren. */

.forus-eb.is-text-papier { --fu-fg: var(--fu-papier); --fu-dim: .7; }
/* Auf dunklem Grund laeuft der Eyecatcher nur durchs warme Ende. */
.forus-eb.is-bg-pflaume,
.forus-eb.is-bg-ink,
.forus-eb.is-bg-verlauf2{
  --fu-akzent: linear-gradient(120deg,#e21961 0%,#e84c05 55%,#ec6a02 100%);
}

/* ---------- Bogen-Uebergang ---------- */
.forus-eb{ --fu-r-eff: min(var(--fu-r,96px), 11vw); }
/* Sprungziel fuer den Anker (#tickets): die fixe Navigation wuerde
   sonst die Ueberschrift verdecken. Reserve = Navhoehe + Luft. */
.forus-eb{ scroll-margin-top: clamp(80px, 12vh, 110px); }
.forus-eb__sweep{
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  margin-bottom: -1px;   /* schliesst den Subpixel-Spalt zur Sektion */
  height: var(--fu-r-eff);
  width: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.forus-eb__sweep-path{ fill: var(--fu-bg); }

/* Pfad-Betrieb (nur auf dem Verlauf): die Sektion waechst um die
   Wellenhoehe nach oben und wird oben beschnitten — dadurch malt EIN
   Verlauf durch. Ohne diese drei Regeln schneidet der Pfad in den
   Inhalt statt in zusaetzlichen Raum, und die Welle steht auf der
   Ueberschrift. Das Ausgangs-SVG entfaellt in dem Betrieb. */
.forus-eb.hat-pfad{
  margin-top: calc(-1 * var(--fu-r-eff));
  padding-top: calc(min(var(--fu-pad-top,144px), 24vw) + var(--fu-r-eff));
}
.forus-eb.hat-pfad .forus-eb__sweep{ display: none; }
/* Vollbild heisst: nach dem Beschnitt bleiben genau 100svh stehen. */
.forus-eb--vollbild.hat-pfad{ min-height: calc(100svh + var(--fu-r-eff)); }

.forus-eb--round-bottom{
  border-bottom-left-radius: 50% var(--fu-r-eff);
  border-bottom-right-radius: 50% var(--fu-r-eff);
}

/* ---------- Container ---------- */
.forus-eb.cw-default { --fu-cw: 1440px; }
.forus-eb.cw-narrow  { --fu-cw: 1040px; }
.forus-eb.cw-wide    { --fu-cw: 1440px; }
.forus-eb__inner{
  width: 100%;
  max-width: var(--fu-cw,1440px);
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

/* ---------- Kopf ---------- */
/* KEIN max-width auf dem Kopf-Rahmen: ch bemisst sich an SEINER
   (kleinen) Schrift und wuerde die grosse Ueberschrift enger deckeln
   als deren eigene Vorgabe — genau das hat Annes Verbreiterung
   zweimal geschluckt. Die Kinder begrenzen sich selbst. */
.forus-eb__kopf{ margin-bottom: var(--fu-s6, clamp(2.5rem, 5vw, 4rem)); }
.forus-eb__eyebrow{
  margin: 0 0 1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: var(--fu-dim);
}
/* Gleiche Werte wie in Themenfeldern und Beweis 2026 — sonst faellt
   diese Sektion aus der Reihe. */
.forus-eb__title{
  margin: 0 0 1.2rem;
  /* Volle Containerbreite: im Vollbild zaehlt jede Zeile Hoehe
     doppelt, weil unten die Welle der Folgesektion Platz braucht.
     Der Container (1240px) ist die einzige Grenze. */
  max-width: none;
  /* Farbe an die Sektion binden, sonst erbt die H2 die dunkle
     Theme-Farbe und verschwindet bei einem Hintergrundwechsel. */
  color: var(--fu-fg);
}
.forus-eb__title:not(.has-display-size){
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
}
/* Der Eyecatcher: das eine Wort im Verlauf — wie in allen anderen
   FORUS-Sektionen. */
.forus-eb__title em{
  font-style: normal;
  background: var(--fu-akzent);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.forus-eb__body{
  max-width: 84ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  opacity: .82;
}
.forus-eb__body p{ margin: 0 0 1em; }
.forus-eb__body p:last-child{ margin-bottom: 0; }
.forus-eb__body a{ color: inherit; text-underline-offset: 3px; }

/* ================================================================
   Ticketleiste
   Ein Ticket hat drei Felder, getrennt durch zwei Perforationen:
   der Abriss mit Preis und Namen hochkant, die Stufe mit Betrag und
   Stand, und rechts wofuer das Ticket gilt. Die Kerben an den
   Perforationen schneidet eine Maske aus dem ganzen Ticket.
   Geschlossen bleibt nur der Abriss stehen.
   ================================================================ */
.forus-eb__leiste{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Ein zugeklapptes Ticket ist Papier, kein dunkler Streifen. Auf dem
   sekundaeren Verlauf war eine getoente Flaeche nicht zu lesen — die
   Lasche traegt den einzigen Namen, den es dort gibt, sie muss also
   der hellste Teil sein. Auf hellem Sektionsgrund kehrt sich das um. */
.forus-eb{
  --fu-zu-bg: color-mix(in srgb, var(--fu-ink) 7%, transparent);
  --fu-zu-fg: var(--fu-ink);
  --fu-zu-rand: color-mix(in srgb, var(--fu-ink) 18%, transparent);
  /* Das offene Ticket braucht eine EIGENE Flaeche. Auf Papiergrund
     war es vorher selbst Papier — also unsichtbar. */
  --fu-auf-bg: #ffffff;
}
.forus-eb.is-bg-weiss{ --fu-auf-bg: var(--fu-surface); }
.forus-eb.is-bg-pflaume,
.forus-eb.is-bg-ink,
.forus-eb.is-bg-verlauf2{
  --fu-zu-bg: color-mix(in srgb, var(--fu-papier) 90%, transparent);
  --fu-zu-fg: var(--fu-ink);
  --fu-zu-rand: transparent;
  --fu-auf-bg: var(--fu-papier);
}
.forus-eb__ticket{
  position: relative;
  min-width: 0;
  border-radius: 22px;
  background: var(--fu-zu-bg);
  color: var(--fu-zu-fg);
  border: 1px solid var(--fu-zu-rand);
}
/* Ausverkauft tritt zurueck — ueber die Schrift, nicht ueber die
   Flaeche: eine blassere Flaeche waere auf dem Verlauf wieder
   unlesbar, genau das Problem, das die Laschen vorher hatten. */
.forus-eb__ticket.is-ausverkauft .forus-eb__laschentext{ opacity: .5; }

/* Lasche: geschlossen der einzige sichtbare Teil. */
.forus-eb__lasche{ margin: 0; font-size: inherit; font-weight: inherit; }
.forus-eb__knopf{
  -webkit-appearance: none; appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  width: 100%;
  display: block;
  text-align: left;
  padding: 1rem 1.2rem;
}
.forus-eb__laschenpreis{ display: none; }
.forus-eb__laschentext{
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
}
.forus-eb__laschenname{
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.forus-eb__laschenwort{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .62;
}

/* ---------- Blatt ----------
   Zwei Haelften wie auf einem echten Ticket: links die Stufe mit
   Preis und Stand, rechts wofuer es gilt. Dazwischen die zweite
   Perforation. */
.forus-eb__blatt{ padding: 0 1.2rem 1.6rem; }

.forus-eb__name{
  margin: 0 0 .8rem;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Die kaufbare Stufe traegt ihren Namen im Markenverlauf — die
   anderen bleiben ruhig, sonst leuchten drei Stufen gleich laut. */
.forus-eb__ticket.is-verfuegbar .forus-eb__name{
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.forus-eb__ticket.is-ausverkauft .forus-eb__name{ opacity: .55; }

/* ---------- Varianten-Switcher + Preisblock ----------
   Standard/Premium (oder Tage) als Umschalter. Sichtbar ist immer nur
   die aktive Variante: EIN Preis, darunter der Button. Ohne Skript ist
   der Switcher aus und die erste Variante steht fest. */
/* Segment-Liste statt Riesen-Kiesel: gleich breite Zeilen in einem
   kompakten Rahmen. Die aktive Zeile ist SOLIDE Pflaume — der Verlauf
   gehoert dem grossen Preis daneben, zwei Verlaeufe nebeneinander
   wuerden flirren. */
.forus-eb__switcher{
  display: none;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 320px;
  margin: 0 0 1.2rem;
  padding: 5px;
  gap: 3px;
  border-radius: 16px;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.forus-eb.is-bereit .forus-eb__switcher{ display: flex; }
.forus-eb__switch{
  -webkit-appearance: none; appearance: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .4em;
  width: 100%;
  padding: .62em 1em;
  border-radius: 11px;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: left;
  background: none;
  transition: background .3s var(--fu-ease), color .3s var(--fu-ease);
}
.forus-eb__switch:hover:not(.is-an){
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.forus-eb__switch .forus-eb__zeichen{ width: 1em; height: 1em; margin-right: 0; }
.forus-eb__switch.is-an{
  background: var(--fu-pflaume);
  color: #fff;
}
.forus-eb__switch:focus-visible{ outline: 3px solid currentColor; outline-offset: 2px; }

/* Nur die aktive Variante ist sichtbar — mit und ohne Skript. */
.forus-eb__vblock:not(.is-var-an),
.forus-eb__iblock:not(.is-var-an){ display: none; }

/* Der eine grosse Preis. Eigene Klasse (nicht __betrag), damit die
   Dunkel-Sektions-Overrides ihn nicht auf Papier faerben — er steht
   auf der hellen Ticketflaeche. */
.forus-eb__preis{ margin: 0; }
.forus-eb__preisgross{
  display: inline-block;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Steht der Preis noch nicht fest, ist es eine Auskunft, kein Betrag —
   dann kleiner und ohne Verlauf. */
.forus-eb__preisgross--offen{
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -.01em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  opacity: .72;
}
.forus-eb__preisgross.is-aus{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: .06em;
}

/* Der Button steht jetzt unter dem Preis in der linken Spalte. */
.forus-eb__vblock .forus-eb__knoepfe{
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
  justify-content: flex-start;
}
.forus-eb__vblock .forus-eb__wartetext{ margin-top: clamp(1rem, 2.2vw, 1.4rem); }

/* Info-Spalte: in der Leiste zentriert, gestapelt links — der Block
   selbst richtet seine Kinder passend aus. Nur der AKTIVE Block, sonst
   schlaegt display:flex das Verstecken der inaktiven Variante. */
.forus-eb.is-leiste .forus-eb__iblock.is-var-an{
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Der Stand steht unter dem Preis, nicht als Marke oben: auf dem
   Ticket beantwortet er die letzte Frage, nicht die erste. */
.forus-eb__stand{
  margin: 1.2rem 0 0;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.forus-eb__ticket.is-ausverkauft .forus-eb__stand{ opacity: .55; }

.forus-eb__preis{ margin: 0; }
.forus-eb__betrag{
  display: block;
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* ---------- Varianten ----------
   Standard und Premium sind keine eigenen Stufen, sondern Zeilen
   derselben. Die fuehrende Zeile traegt den grossen Betrag, die
   anderen stehen als schmale Preiszeilen darunter — so sieht man auf
   einen Blick, was es kostet UND was es sonst noch gibt. */
.forus-eb__varianten{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
.forus-eb__variante{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .5rem 0;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.forus-eb__variante:first-child{ border-top: 0; }
.forus-eb__vname{
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Zeichen vor der Bezeichnung. Inline statt Flex, weil die fuehrende
   Zeile ein Block ist und die anderen Flex sind — inline sitzt in
   beiden Faellen richtig. */
.forus-eb__zeichen{
  width: 1.15em;
  height: 1.15em;
  fill: currentColor;
  vertical-align: -.2em;
  margin-right: .45em;
}
.forus-eb__vpreis{
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.forus-eb__variante.is-bald .forus-eb__vpreis{ opacity: .6; }
.forus-eb__variante.is-ausverkauft{ opacity: .5; }
/* Notiz zu einer einzelnen Variante — steht unter ihrer Zeile, nicht
   dahinter: rechts sitzt der Preis. */
.forus-eb__vnotiz{
  flex: 1 0 100%;
  font-size: .78rem;
  line-height: 1.4;
  opacity: .62;
}
.forus-eb__variante.is-ausverkauft .forus-eb__vpreis{ text-decoration: line-through; }

/* Die fuehrende Zeile ist der Preis, den man sucht: sie bricht aus
   der Tabelle aus und steht gross. */
/* Gross gesetzt wird nur ein echter Betrag. Steht dort „folgt", ist
   es keine Zahl, sondern eine Auskunft — dann bleibt die Zeile wie
   alle anderen: Bezeichnung links, Auskunft rechts. Sonst stand
   „folgt" mal darunter und mal daneben. */
.forus-eb__variante.is-fuehrend.hat-betrag{
  display: block;
  border-top: 0;
  padding-bottom: .2rem;
}
.forus-eb__variante.is-fuehrend.hat-betrag + .forus-eb__variante{
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  margin-top: .6rem;
}
.forus-eb__variante.is-fuehrend.hat-betrag .forus-eb__vname{
  display: block;
  opacity: var(--fu-dim);
  margin-bottom: .2rem;
}
.forus-eb__variante.is-fuehrend.hat-betrag .forus-eb__vpreis{
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.forus-eb__variante.is-fuehrend.hat-betrag.is-ausverkauft .forus-eb__vpreis,
.forus-eb__variante.is-fuehrend.hat-betrag.is-bald .forus-eb__vpreis{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  opacity: .72;
}

/* Eine Stufe, die noch nicht kaufbar ist, bekommt trotzdem einen
   Button — aber einen ruhigen. Der leuchtende Verlauf gehoert dem
   Ticket, das man jetzt kaufen kann; zwei gleich laute Buttons
   nebeneinander wuerden genau diese Unterscheidung einebnen. */
.forus-eb__cta--stil{
  background: none;
  color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  transition: border-color .25s var(--fu-ease), transform .22s ease;
}
.forus-eb__cta--stil::before,
.forus-eb__cta--stil::after{ content: none; }
.forus-eb__cta--stil:hover{ color: inherit; border-color: currentColor; }

/* Mehrere kaufbare Varianten heisst mehrere Buttons. */
.forus-eb__knoepfe{
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  justify-content: center;
}
.forus-eb__knoepfe .forus-eb__cta{ margin-top: 0; }

/* Steht der Preis noch nicht fest, ist die Zeile eine Aussage und
   kein Betrag — dann weder in Betragsgroesse noch im Verlauf. Der
   Verlauf ist die Auszeichnung fuer den echten Preis. */
.forus-eb__betrag--offen{
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -.01em;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  opacity: .72;
}
.forus-eb__zusatz{
  margin: .8rem 0 0;
  font-size: .85rem;
  line-height: 1.45;
  opacity: .78;
}
/* Was drin ist: aufklappbar. Ein unterstrichener Ausloeser mit Pfeil,
   darunter die Stichpunkte. Natives <details> — ohne JavaScript
   bedienbar. */
.forus-eb__mehr{
  margin: 1.2rem 0 0;
}
.forus-eb__mehr-knopf{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: inherit;
  width: fit-content;
}
/* Den eigenen Aufklapp-Pfeil der Browser entfernen. */
.forus-eb__mehr-knopf::-webkit-details-marker{ display: none; }
.forus-eb__mehr-knopf > span{
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.forus-eb__mehr-knopf:focus-visible{ outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
.forus-eb__mehr-pfeil{
  width: 1.05em;
  height: 1.05em;
  flex: none;
  transition: transform .3s var(--fu-ease);
}
.forus-eb__mehr[open] .forus-eb__mehr-pfeil{ transform: rotate(180deg); }

/* Die Stichpunkte selbst — immer linksbuendig, auch wenn die Info-
   Seite sonst zentriert steht (sonst haengt der Haken links und der
   Text mittig). In der Leiste steht der Block dann mittig, sein Text
   aber links. */
.forus-eb__enthalten{
  list-style: none;
  margin: .9rem 0 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  text-align: left;
}
.forus-eb__enthalten li{
  position: relative;
  padding-left: 1.4rem;
  font-size: .92rem;
  line-height: 1.45;
  /* Langer Text bricht innerhalb seiner Spalte um, statt in die
     Nachbarspalte zu laufen. */
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Ab vier Stichpunkten auf dem Desktop zwei Spalten. Gleich breite
   Spalten (1fr): ein langer Eintrag laeuft dann nicht in den anderen,
   sondern bricht in seiner Haelfte um. Auf schmalen Schirmen bleibt es
   einspaltig. */
@media (min-width: 700px){
  .forus-eb__enthalten--zwei,
  .forus-eb.is-leiste .forus-eb__enthalten.forus-eb__enthalten--zwei{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: start;
    width: min(34rem, 100%);
    margin-inline: auto;
  }
}
/* Marker: ein kleiner Haken im Markenverlauf. */
.forus-eb__enthalten li::before{
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .62rem;
  height: .34rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: .8;
}

/* Die Wortmarke als Aufdruck: liegt hinter dem Text, nimmt die
   Ticketfarbe an und traegt keine Aussage — deshalb sehr blass. */
.forus-eb__marke{
  display: none;
  fill: currentColor;
}

/* Eckdaten als kleine Tafel: kurze Angaben, die man abliest statt
   sie zu lesen. Deshalb Zellen mit Haarlinien, kein Fliesstext. */
.forus-eb__merkmale{
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  /* Die Trennlinien entstehen aus 1px Luecke plus Untergrund. Mit
     Rahmen je Zelle bliebe in einspaltiger Anordnung rechts eine
     Linie stehen, die ins Leere laeuft. */
  gap: 1px;
  background: color-mix(in srgb, var(--fu-ink) 16%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--fu-ink) 16%, transparent);
}
.forus-eb__merkmale li{
  background: var(--fu-auf-bg);
  padding: .8rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
}

.forus-eb__beschreibung{
  margin: 1rem 0 0;
  line-height: 1.6;
  opacity: .88;
}
.forus-eb__wartetext{
  margin: clamp(1.4rem, 3vw, 2rem) 0 0;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: var(--fu-dim);
}

/* Auf dem dunklen Verlauf traegt der Markenverlauf in der Schrift
   nicht mehr: Magenta auf Pflaume liegt bei rund 1,6:1. Der Betrag
   steht dort in Papier, der Button behaelt den warmen Verlauf — der
   sticht auf kuehlem Grund erst richtig heraus. */
.forus-eb.is-bg-verlauf2 .forus-eb__betrag,
.forus-eb.is-bg-pflaume .forus-eb__betrag,
.forus-eb.is-bg-ink .forus-eb__betrag{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fu-papier);
}

/* Ausverkauft: der Preis bleibt lesbar, ist aber sichtbar erledigt. */
.forus-eb__ticket.is-ausverkauft .forus-eb__betrag{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: .06em;
}

/* ---------- Leiste mit Skript ----------
   Erst jetzt wird geklappt. Ohne Skript stehen alle Tickets offen —
   die Lasche verspricht dann keine Bedienung, die es nicht gibt. */
.forus-eb.is-bereit .forus-eb__knopf{ cursor: pointer; }
.forus-eb.is-bereit .forus-eb__knopf:focus-visible{
  outline: 3px solid currentColor;
  outline-offset: -3px;
  border-radius: 20px;
}

/* ---------- Einlauf ----------
   Wie in den anderen FORUS-Sektionen faehrt der Inhalt sanft herein,
   sobald die Sektion in den Blick kommt (is-in vom Skript). Bewegt
   werden Kopf und Leiste ALS GANZES — nie die einzelnen Tickets,
   deren Flex-Uebergaenge (Auf/Zu) sonst ueberschrieben wuerden. Nur
   mit Skript (is-bereit): ohne JavaScript steht sofort alles da. */
.forus-eb.is-bereit .forus-eb__kopf{
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .8s var(--fu-ease), transform .8s var(--fu-ease);
}
.forus-eb.is-bereit .forus-eb__leiste{
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .8s var(--fu-ease) .09s, transform .8s var(--fu-ease) .09s;
}
.forus-eb.is-bereit.is-in .forus-eb__kopf,
.forus-eb.is-bereit.is-in .forus-eb__leiste{
  opacity: 1;
  transform: none;
}

/* ---------- Leiste ----------
   Ob die Tickets nebeneinander liegen, entscheidet nicht die
   Fensterbreite, sondern ob es reicht: module.js legt die Leiste
   probeweise an und misst, ob das offene Ticket ueberlaeuft. Bei
   sieben Stufen tut es das schneller als bei dreien. */
/* Anne 28.07.: die alten 7vh-Vollbild-Deckel sind GESTRICHEN — es
   gilt der Standard-Rhythmus (144px-Deckel) wie in jedem Modul. Die
   Regeln hier muessen die Spezifitaet der alten Drei-Klassen-Regel
   halten, sonst gewinnt ein Nachzuegler wieder mit 7vh. */
.forus-eb--vollbild.is-leiste,
.forus-eb--vollbild.hat-pfad.is-leiste,
.forus-eb--vollbild.hat-pfad.is-gestapelt{
  padding-bottom: min(var(--fu-pad-bottom,144px), 24vw);
}
.forus-eb--vollbild.hat-pfad.is-leiste,
.forus-eb--vollbild.hat-pfad.is-gestapelt{
  padding-top: calc(min(var(--fu-pad-top,144px), 24vw) + var(--fu-r-eff));
}
.forus-eb--vollbild.is-leiste{
  padding-top: min(var(--fu-pad-top,144px), 24vw);
}
.forus-eb.is-leiste .forus-eb__leiste{
  flex-direction: row;
  align-items: stretch;
  height: clamp(320px, 44vh, 460px);
}
/* Im Vollbild bekommt die Leiste die Hoehe ihres Inhalts statt einer
   festen. Mit fester Hoehe lief der Button unten aus dem Ticket
   heraus. Reicht der Schirm nicht, waechst der Abschnitt lieber ueber
   ihn hinaus, als etwas abzuschneiden. */
.forus-eb--vollbild.is-leiste .forus-eb__inner{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  /* Kopf + Leiste stehen als Block in der Mitte, die Luft verteilt
     sich nach oben und unten — statt dass die Leiste den ganzen
     Restraum aufsaugt und unten an der Welle klebt. */
  justify-content: center;
}
.forus-eb--vollbild.is-leiste .forus-eb__leiste{
  height: auto;
  flex: 0 1 auto;
  min-height: 320px;
}
/* Der Kopf darf nicht mitwachsen, sonst nimmt er der Leiste den
   Platz, den sie fuer das Ticket braucht. */
.forus-eb--vollbild.is-leiste .forus-eb__kopf{ flex: 0 0 auto; }
.forus-eb.is-leiste .forus-eb__ticket{
  display: flex;
  flex: 0 0 var(--fu-lasche);
  /* Die Breite kommt aus flex-grow, nicht aus width: so teilen sich
     die geschlossenen Tickets den Rest ohne feste Pixelwerte. */
  transition: flex-grow .75s var(--fu-ease), flex-basis .75s var(--fu-ease),
              background .5s var(--fu-ease), border-color .5s var(--fu-ease);
  overflow: hidden;
}
.forus-eb.is-leiste .forus-eb__ticket.is-auf{
  flex: 1 1 var(--fu-lasche);
}
/* Ein zugeklapptes Blatt darf die Hoehe der Leiste NICHT bestimmen.
   Sonst rechnet der Browser dessen Hoehe bei 66px Breite aus — der
   Text bricht dort viel oefter um — und die Leiste war je nach
   geoeffneter Stufe unterschiedlich hoch: das Ticket sprang beim
   Umschalten um fast 100px, und der Abschnitt wuchs ueber den Schirm
   hinaus. Absolut gesetzt zaehlt es nicht mehr mit. */
.forus-eb.is-leiste .forus-eb__ticket:not(.is-auf) .forus-eb__blatt{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Lasche steht hochkant und liest von unten nach oben — wie der
   Abriss an einem echten Ticket. */
.forus-eb.is-leiste .forus-eb__lasche{
  flex: 0 0 var(--fu-lasche);
  display: flex;
}
.forus-eb.is-leiste .forus-eb__knopf{
  width: var(--fu-lasche);
  height: 100%;
  padding: 1.4rem .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
/* Oben der Preis, unten Name und Stand — beide hochkant, von unten
   nach oben zu lesen wie der Abriss an einem echten Ticket. */
.forus-eb.is-leiste .forus-eb__laschenpreis{
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  opacity: .38;
  white-space: nowrap;
}
.forus-eb.is-leiste .forus-eb__ticket.is-ausverkauft .forus-eb__laschenpreis{
  text-decoration: line-through;
}
.forus-eb.is-leiste .forus-eb__laschentext{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.1rem;
}

/* Die Perforation liegt zwischen Abriss und Blatt: gestrichelte
   Linie plus zwei ausgestanzte Kerben. Die Kerben schneidet eine
   Maske aus dem ganzen Ticket — nur dann scheint der
   Sektionshintergrund wirklich durch. */
.forus-eb.is-leiste .forus-eb__blatt{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
  border-left: 1px dashed color-mix(in srgb, var(--fu-ink) 32%, transparent);
  opacity: 0;
  transition: opacity .45s var(--fu-ease);
}
/* Das Blatt ist eine Spalte: oben die zwei Haelften, unten der
   durchgehende Rand mit Ort und Datum. */
.forus-eb.is-leiste .forus-eb__blatt-innen{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.forus-eb.is-leiste .forus-eb__oben{
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}
/* Der untere Rand laeuft ueber Stufe und Gueltigkeit hinweg — wie
   die Fusszeile einer echten Eintrittskarte. */
/* Die erste Zelle der Fusszeile ist genau so breit wie die
   Preishaelfte — damit sitzt ihre Trennlinie auf der zweiten
   Perforation. Vorher lief die Fusszeile in drei gleichen Dritteln
   durch und ihre Linien standen quer zu den Abrisskanten. */
.forus-eb.is-leiste .forus-eb__merkmale{
  flex: 0 0 auto;
  margin: 0;
  grid-template-columns: var(--fu-seite) repeat(auto-fit, minmax(120px, 1fr));
}
.forus-eb.is-leiste .forus-eb__ticket.is-auf .forus-eb__blatt{
  opacity: 1;
  transition: opacity .5s var(--fu-ease) .25s;
}

/* Linke Haelfte: Stufe, Preis, Stand — mittig, wie der abtrennbare
   Teil eines echten Tickets. Feste Breite, damit die zweite
   Perforation und ihre Kerben an einer berechenbaren Stelle sitzen. */
/* Linksbuendig, nicht mittig: sobald mehrere Varianten untereinander
   stehen, ist das eine Preistabelle — und die liest man an einer
   Kante entlang. */
.forus-eb.is-leiste .forus-eb__seite--preis{
  flex: 0 0 var(--fu-seite);
  width: var(--fu-seite);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: left;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
}
.forus-eb.is-leiste .forus-eb__seite--info{
  position: relative;
  flex: 1 1 auto;
  min-width: 21rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-left: 1px dashed color-mix(in srgb, var(--fu-ink) 32%, transparent);
}
.forus-eb.is-leiste .forus-eb__beschreibung{
  margin: 0;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.55;
}
/* Aufklappliste in der Leiste: Block mittig, Text darin links. */
.forus-eb.is-leiste .forus-eb__enthalten{ width: fit-content; margin-inline: auto; }
.forus-eb.is-leiste .forus-eb__knoepfe{ margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }

/* Aufdruck: gross, blass, hinter allem. pointer-events aus, sonst
   faengt er den Klick auf den Button ab. */
.forus-eb.is-leiste .forus-eb__marke{
  display: block;
  position: absolute;
  z-index: 0;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(58%, 320px);
  opacity: .07;
  pointer-events: none;
}
.forus-eb.is-leiste .forus-eb__seite--info > *:not(.forus-eb__marke){
  position: relative;
  z-index: 1;
}

/* Kerben: vier Kreise, aus der Flaeche herausgerechnet. Ohne
   mask-composite waere das Ergebnis die VEREINIGUNG der Masken —
   dann verschwaende fast das ganze Ticket. Deshalb nur mit
   @supports, sonst bleibt das Ticket eben ohne Kerben. */
@supports (mask-composite: intersect){
  .forus-eb.is-leiste .forus-eb__ticket.is-auf{
    --fu-kerbe: 12px;
    /* Versatz: die Maske rechnet ab der Aussenkante. Die erste
       Perforation sitzt hinter dem Ticketrahmen (+1px), die zweite
       zusaetzlich hinter dem Rahmen des Blattes (+2px).
       Die zweite Perforation hat UNTEN keine Kerbe — sie endet an der
       Fusszeile, eine Kerbe ohne Linie darueber sah verloren aus. */
    --fu-kerbe-1: calc(var(--fu-lasche) + 1px);
    --fu-kerbe-2: calc(var(--fu-lasche) + var(--fu-seite) + 2px);
    mask-image:
      radial-gradient(circle var(--fu-kerbe) at var(--fu-kerbe-1) 0,   transparent 97%, #000 100%),
      radial-gradient(circle var(--fu-kerbe) at var(--fu-kerbe-1) 100%, transparent 97%, #000 100%),
      radial-gradient(circle var(--fu-kerbe) at var(--fu-kerbe-2) 0,   transparent 97%, #000 100%);
    mask-composite: intersect, intersect;
  }
}

/* Offen: volles Papier statt der leicht durchscheinenden Flaeche
   der Laschen. */
.forus-eb.is-leiste .forus-eb__ticket.is-auf{
  background: var(--fu-auf-bg);
  border-color: transparent;
  color: var(--fu-ink);
}
.forus-eb.is-leiste .forus-eb__ticket.is-auf .forus-eb__betrag{
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.forus-eb.is-leiste .forus-eb__ticket.is-auf.is-ausverkauft .forus-eb__betrag{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
}
/* Die offene Lasche traegt die Statusfarbe — verfuegbar den
   Markenverlauf, alles andere bleibt zurueckhaltend. */
.forus-eb.is-leiste .forus-eb__ticket.is-auf.is-verfuegbar .forus-eb__lasche{
  background: var(--fu-grad);
  color: #fff;
}
.forus-eb.is-leiste .forus-eb__ticket.is-auf.is-bald .forus-eb__lasche,
.forus-eb.is-leiste .forus-eb__ticket.is-auf.is-ausverkauft .forus-eb__lasche{
  background: color-mix(in srgb, var(--fu-ink) 7%, transparent);
}
/* Die kaufbare Stufe muss auch zugeklappt erkennbar sein — sonst
   sehen alle Laschen gleich aus und die eine, die man anklicken
   soll, geht unter. */
.forus-eb.is-leiste .forus-eb__ticket.is-verfuegbar:not(.is-auf){
  background: var(--fu-grad);
  border-color: transparent;
  color: #fff;
}
.forus-eb.is-leiste .forus-eb__ticket:not(.is-auf):hover{
  background: var(--fu-papier);
}
.forus-eb.is-leiste .forus-eb__ticket.is-verfuegbar:not(.is-auf):hover{
  background: var(--fu-grad);
  filter: brightness(1.08);
}


/* ---------- Stapel ----------
   Kein Hochkant: dafuer ist kein Platz. Stattdessen klappt das Blatt
   in der Hoehe auf. grid 0fr -> 1fr statt max-height, damit die
   Bewegung genau bei der echten Hoehe endet. */
.forus-eb.is-gestapelt .forus-eb__blatt{
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  transition: grid-template-rows .6s var(--fu-ease),
              padding-bottom .6s var(--fu-ease),
              opacity .4s var(--fu-ease);
  opacity: 0;
}
.forus-eb.is-gestapelt .forus-eb__blatt > *{ overflow: hidden; min-height: 0; }
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt{
  grid-template-rows: 1fr;
  padding-bottom: 1.6rem;
  opacity: 1;
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf{
  background: var(--fu-auf-bg);
  border-color: transparent;
  color: var(--fu-ink);
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__betrag{
  background: var(--fu-grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf.is-ausverkauft .forus-eb__betrag{
  background: none;
  -webkit-text-fill-color: currentColor;
  color: currentColor;
}
/* Name und Stand stehen schon auf der waagerechten Lasche — im
   Blatt waeren sie direkt darunter eine Wiederholung. */
.forus-eb.is-gestapelt .forus-eb__name,
.forus-eb.is-gestapelt .forus-eb__stand{ display: none; }
/* Vollbild waere hier eine Bremse: fuenf Tickets untereinander
   brauchen mehr als einen Schirm. */
.forus-eb--vollbild.is-gestapelt,
.forus-eb--vollbild.hat-pfad.is-gestapelt{ min-height: 0; display: block; }

/* ---------- Mobil als Ebenbild des Desktop-Tickets ----------
   Der offene, kaufbare Abriss traegt oben den Markenverlauf mit Name,
   Stand und Preis; darunter eine Perforation mit zwei ausgestanzten
   Kerben, dann der Ticketkoerper — wie beim Desktop-Ticket, nur
   waagerecht gestapelt statt hochkant. */
/* Das Ticket clippen: sonst stehen die eckigen Ecken des Verlaufs-
   Abrisses ueber die runden Ticketecken hinaus, und die Kerben beulen
   als volle Kreise seitlich heraus. Mit Clipping werden die Ecken rund
   und die Kerben zu sauberen Halbkreis-Ausstanzungen an der Kante. */
.forus-eb.is-gestapelt .forus-eb__ticket{ overflow: hidden; }
/* Der 1px-Rahmen wuerde mit overflow:hidden als heller Papier-Rand um
   den Verlaufs-Abriss durchscheinen. Beim offenen Ticket ganz weg. */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf{
  border-width: 0;
  /* Grund transparent, sonst scheint beim Ausstanzen der Kerbe der
     helle Ticketgrund durch statt der Sektion (Anne 23.07.: „die
     Ausstanzung ist hell"). Lasche und Blatt bringen ihren eigenen
     Grund mit, nur an den Kerben wird die Sektion sichtbar. */
  background: transparent;
}
.forus-eb.is-gestapelt .forus-eb__knopf{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Preis rechts im Abriss — nur beim offenen Ticket. */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__laschenpreis{
  display: block;
  order: 1;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: 1;
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf.is-ausverkauft .forus-eb__laschenpreis{
  text-decoration: line-through;
}
/* Verlaufs-Abriss beim kaufbaren offenen Ticket. */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf.is-verfuegbar .forus-eb__lasche{
  background: var(--fu-grad);
  color: #fff;
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf.is-verfuegbar .forus-eb__laschenwort{
  opacity: .82;
}

/* Perforation + zwei ausgestanzte Kerben am Uebergang Abriss -> Koerper.
   Die Kerben sind Kreise in Sektionsfarbe, die halb ueber die
   Ticketkante ragen — so scheint der Grund durch, wie ein echter
   Ticketrand. Nur beim offenen Ticket. */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__lasche{
  position: relative;
}
/* Kerbe AUSGESTANZT statt uebermalt: der frueher gefuellte Kreis in
   var(--fu-bg) passte nicht zum Verlaufs-Hintergrund (verlauf2) — am
   rechten Rand ist der Grund blau, der Pflaume-Kreis stand als
   falschfarbiger Rahmen daneben (Anne 23.07.2026). Jetzt wird die
   Kerbe aus Lasche (unten) und Blatt (oben) herausmaskiert, sodass der
   ECHTE Hintergrund durchscheint — egal welche Farbe/Verlauf.
   In @supports gekapselt; ohne Maskenkomposition bleibt die Kante glatt
   (kein Fehlbild, nur keine Kerbe). */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__lasche{
    -webkit-mask-image:
      radial-gradient(circle 11px at 0 100%,   transparent 97%, #000 100%),
      radial-gradient(circle 11px at 100% 100%, transparent 97%, #000 100%);
            mask-image:
      radial-gradient(circle 11px at 0 100%,   transparent 97%, #000 100%),
      radial-gradient(circle 11px at 100% 100%, transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt{
    -webkit-mask-image:
      radial-gradient(circle 11px at 0 0,   transparent 97%, #000 100%),
      radial-gradient(circle 11px at 100% 0, transparent 97%, #000 100%);
            mask-image:
      radial-gradient(circle 11px at 0 0,   transparent 97%, #000 100%),
      radial-gradient(circle 11px at 100% 0, transparent 97%, #000 100%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
}
/* Gestrichelte Perforationslinie zwischen den Kerben (seitlich
   eingerueckt, damit sie nicht ueber die Kerben laeuft) + Luft zum
   Inhalt. Nur beim offenen Ticket. */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt{
  position: relative;
}
/* Blatt und Lasche tragen im offenen gestapelten Ticket ihren EIGENEN
   Grund — sonst wird beim transparenten Ticket (fuer die Kerben-
   Ausstanzung) das ganze Feld durchsichtig (Anne 23.07.: „das gesamte
   Ticket ist transparent"). Die kaufbare Lasche uebermalt das mit dem
   Verlauf (hoehere Spezifitaet). */
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt,
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__lasche{
  /* DECKENDER heller Grund (--fu-auf-bg = Weiss/Papier, undurchsichtig),
     nicht das halbtransparente --fu-zu-bg — sonst schimmert der dunkle
     Verlauf durch das transparente Ticket und truebt die Farbe
     (Anne 23.07.: „die hellere muss es sein"). */
  background: var(--fu-auf-bg);
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt::before{
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  border-top: 2px dashed color-mix(in srgb, var(--fu-ink) 22%, transparent);
  z-index: 5;
}
.forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt-innen{
  padding-top: 1.5rem;
}


/* ---------- Verlauf-Glow-Button (weiche Fassung) ----------
   Abgeglichen mit Hero und Navigation: Kern-Verlauf vollflaechig
   (Label immer auf Violett/Pink, AA), zwei runde Orange-Lichter
   kreisen um den Rand — radialer Glow hat keine Kanten und keine
   Spitzen, anders als der Regenbogen-Kegel der frueheren Fassung. */
.forus-eb__cta{
  display: inline-block;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(.95rem, 1.05vw, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  padding: .8em 1.7em;
  border-radius: 999px;
  color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg,#9e2585,#c81d84 45%,#e21961);
  -webkit-appearance: none; appearance: none;
  transition: transform .22s ease;
}
.forus-eb__cta::before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%; top: 50%;
  width: 300%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(0deg);
  pointer-events: none;
  /* Zwei weiche Orange-Lichter, gegenueberliegend — sie streifen beim
     Kreisen die Endkappen, unabhaengig von der Label-Laenge. */
  background:
    radial-gradient(10% 10% at 50% 33.333%, rgba(236,106,2,.9), rgba(232,76,5,.45) 55%, rgba(232,76,5,0) 100%),
    radial-gradient(10% 10% at 50% 66.667%, rgba(236,106,2,.9), rgba(232,76,5,.45) 55%, rgba(232,76,5,0) 100%);
  animation: forus-eb-glowspin 6s linear infinite;
}
.forus-eb__cta::after{ content: none; }
.forus-eb__cta:hover{ transform: translateY(-2px); color: #fff; }
.forus-eb__cta:active{ transform: scale(.97); }
.forus-eb__cta:focus-visible{ outline: 3px solid currentColor; outline-offset: 2px; }
@keyframes forus-eb-glowspin{ to{ transform: translate(-50%,-50%) rotate(360deg); } }

/* ================================================================
   Mobil — das offene Ticket steht gestapelt, es braucht Luft.
   Ohne diese Regeln stapeln die zwei Ticket-Haelften direkt
   aufeinander und die Eckdaten-Tafel laesst bei drei Angaben ein
   leeres, ausgegrautes Feld stehen.
   ================================================================ */
@media (max-width: 680px){
  /* Mehr seitliche Luft im offenen Ticket. */
  .forus-eb__blatt{ padding-left: clamp(1.25rem, 5vw, 1.6rem); padding-right: clamp(1.25rem, 5vw, 1.6rem); }
  .forus-eb.is-gestapelt .forus-eb__ticket.is-auf .forus-eb__blatt{ padding-bottom: 1.9rem; }
  .forus-eb__knopf{ padding: 1.05rem 1.25rem; }

  /* Preis-Haelfte und Info-Haelfte untereinander mit klarer Luft,
     nicht direkt aufeinandergestapelt. */
  .forus-eb.is-gestapelt .forus-eb__oben{
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 6vw, 1.9rem);
  }

  /* Eckdaten-Tafel einspaltig: kein leeres, graues Feld mehr. */
  .forus-eb__merkmale{ grid-template-columns: 1fr; margin-top: 1.4rem; }
  .forus-eb__merkmale li{ text-align: left; padding: .85rem 1rem; }

  /* Button ueber die volle Breite — leichter zu treffen. */
  .forus-eb__knoepfe{ flex-direction: column; align-items: stretch; }
  .forus-eb__knoepfe .forus-eb__cta{ width: 100%; text-align: center; }

  /* Etwas mehr Rhythmus zwischen Text, Marken und Button. */
  .forus-eb__inhalte{ margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce){
  .forus-eb__cta{ transition: none; }
  .forus-eb__cta::before{ animation: none; }
  .forus-eb.is-bereit .forus-eb__ticket,
  .forus-eb.is-bereit .forus-eb__blatt{ transition: none; }
  /* Einlauf aus: Kopf und Leiste stehen sofort. */
  .forus-eb.is-bereit .forus-eb__kopf,
  .forus-eb.is-bereit .forus-eb__leiste{
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ---------- Vollbild-Rhythmus (28.07.) ----------
   Gemessen: ueber dem Kopf 63px sichtbare Luft, unter der Leiste nur
   6px — die Welle der FOLGE-Sektion beisst von unten 96px herein und
   war im Bottom-Padding nicht eingerechnet. Jetzt zaehlen beide Seiten
   gleich: Wellenhoehe + dieselbe Luft. */
/* Anne 28.07. ENDGUELTIG: kein Vollbild-Sonderweg mehr. Die Sektion
   folgt dem Standard-Rhythmus wie JEDES Modul — 144px-Deckel oben und
   unten, oben plus Wellenhoehe (das Modul zieht sich um -r-eff hoch).
   Alle frueheren 7vh/10vh-Formeln sind damit Geschichte. */
.forus-eb--vollbild,
.forus-eb--vollbild.is-leiste,
.forus-eb--vollbild.hat-pfad,
.forus-eb--vollbild.hat-pfad.is-gestapelt{ min-height: 0; display: block; }
.forus-eb--vollbild.is-leiste,
.forus-eb--vollbild.hat-pfad,
.forus-eb.hat-pfad{
  padding-top: calc(min(var(--fu-pad-top,144px), 24vw) + var(--fu-r-eff));
  padding-bottom: min(var(--fu-pad-bottom,144px), 24vw);
}

/* ---------- Benachrichtigungs-Panel (hinter „Benachrichtigt werden") ---------- */
.forus-eb__notify{
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.forus-eb__notify-kern{
  max-width: 560px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 20px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.forus-eb__notify-titel{
  margin: 0 0 .5rem;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
  /* Farbe explizit binden: sonst erbt die H3 die dunkle Theme-Farbe
     und ist auf Pflaume unlesbar (bekannte Falle). */
  color: currentColor;
}
.forus-eb__notify-text{
  margin: 0 0 1.1rem;
  font-size: .95rem;
  line-height: 1.55;
  opacity: .85;
}

/* HubSpot-Formular im Panel — dieselben Regeln wie im Abschluss-Modul:
   Labels als Feldnamen, Rechtstexte als Fliesstext, Ankreuzfelder klein. */
.forus-eb__notify-form form label,
.forus-eb__notify-form form legend,
.forus-eb__notify-form .legal-consent-container,
.forus-eb__notify-form .legal-consent-container *{ color: currentColor !important; }
.forus-eb__notify-form .hs-form-field label{
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.forus-eb__notify-form .legal-consent-container label,
.forus-eb__notify-form .legal-consent-container label span,
.forus-eb__notify-form .legal-consent-container p,
.forus-eb__notify-form .hs-form-booleancheckbox label span{
  font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; opacity: .8;
}
.forus-eb__notify-form .hs-form-field{ margin-bottom: .85rem; }
.forus-eb__notify-form .hs-input:not([type="checkbox"]):not([type="radio"]){
  width: 100%; font: inherit; color: inherit;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  border-radius: 10px; padding: .7em 1em;
}
.forus-eb__notify-form .hs-input:focus{ outline: 2px solid currentColor; outline-offset: 2px; }
.forus-eb__notify-form fieldset{ border: 0; margin: 0; padding: 0; max-width: none; }
.forus-eb__notify-form .inputs-list{ list-style: none; margin: 0; padding: 0; }
.forus-eb__notify-form .hs-form-booleancheckbox-display{
  display: flex; align-items: flex-start; gap: .6rem; cursor: pointer;
}
.forus-eb__notify-form .hs-form-booleancheckbox-display > input[type="checkbox"]{
  flex: 0 0 auto; width: 16px !important; height: 16px; margin: .2em 0 0 !important;
  float: none !important; accent-color: currentColor; cursor: pointer;
}
.forus-eb__notify-form .hs-error-msgs{ list-style: none; margin: .35em 0 0; padding: 0; }
.forus-eb__notify-form .hs-error-msgs label,
.forus-eb__notify-form .hs-error-msg{
  font-size: .8rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45;
}
.forus-eb__notify-form .hs-button,
.forus-eb__notify-form input[type="submit"]{
  -webkit-appearance: none; appearance: none;
  border: 0 !important; cursor: pointer;
  font-family: inherit !important;
  font-size: clamp(.95rem, 1.05vw, 1.05rem) !important;
  line-height: 1.5 !important;
  padding: .8em 1.7em !important;
  border-radius: 999px !important;
  font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  background: var(--fu-papier, #f1eeed) !important; color: var(--fu-ink, #1a1e20) !important;
  transition: transform .3s var(--fu-ease);
}
.forus-eb__notify-form .hs-button:hover{ transform: translateY(-3px); }

/* ---------- Leere Formular-Ueberschrift ----------
   Die HubSpot-Formular-Einbettung rendert immer ein h3.form-title, auch
   ohne Titel. Leer steht es als Eintrag ohne Text in der Ueberschriften-
   liste jedes Screenreaders. Ausblenden nimmt es auch aus dem
   Zugaenglichkeitsbaum. Die sichtbare Ueberschrift steht als eigenes
   Element darueber. */
.forus-eb .form-title:empty{ display: none; }