/* Beamtencampus Frontend — Videobuehne, Hero-Schein, Fahrbahn-Band. */
/* ====================== Videobuehne ====================== */
.bc-buehne {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 13, 24, .86);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0;
  transition: opacity .22s cubic-bezier(.32, .72, 0, 1);
}
.bc-buehne.bc-an { opacity: 1; }
.bc-buehne-inhalt {
  position: relative;
  max-width: min(92vw, 1100px);
  max-height: 88vh;
  display: flex;
}
.bc-buehne-inhalt video {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9);
  background: #000;
}
.bc-buehne-zu {
  position: absolute;
  top: -46px;
  right: 0;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #EAF1FA;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s ease;
}
.bc-buehne-zu:hover { background: rgba(255, 255, 255, .2); }
/* Platzhalter hält die Lücke im Seitenfluss, solange das Video oben liegt. */
.bc-platzhalter { background: rgba(255, 255, 255, .04); border-radius: 14px; }
@media (prefers-reduced-motion: reduce) {
  .bc-buehne { transition: none; }
}

/* ====================== Hero ====================== */
/* ---------------------------------------------------------------------- *
 * Hero: belebter Schein und Ausklang nach unten                          *
 *                                                                        *
 * Der Schein driftet langsam, damit der Grund nicht tot wirkt. Der       *
 * Ausklang loest die Verlaeufe zur Unterkante hin auf; ohne ihn endet    *
 * der Hero mit einer Linie quer ueber die Seite. Die Zielfarbe setzt das *
 * Skript aus dem Grund der naechsten Sektion, ein fester Wert saehe je   *
 * nach Seite falsch aus.                                                 *
 * ---------------------------------------------------------------------- */
.bc-hero-belebt {
  position: relative;
  /* Die Startseiten-Sektion traegt ein `top: 20px` und schiebt sich damit unter
     der fixierten Kopfleiste weg — dazwischen klafft ein Streifen Seitengrund
     in einem anderen Ton. Der Wert steht in einem lokalen Elementstil mit
     hoeherer Gewichtung, deshalb hier ausdruecklich. */
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}
.bc-hero-belebt > *:not(.bc-heroglut):not(.bc-heroausklang) {
  position: relative;
  z-index: 2;
}

.bc-heroglut {
  position: absolute;
  /* Genau die Hoehe des Hero, kein Ueberstand: die Hero-Sektionen tragen selbst
     `overflow: hidden` und schneiden alles an ihrer Oberkante glatt ab — direkt
     unter der Kopfleiste entstuende sonst eine Linie quer ueber die Seite.
     Seitlich darf er heraus, dort liegt der Bildschirmrand. */
  left: -8%; right: -8%; top: -12%;
  height: 124%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 54% at 15% 10%, rgba(56, 124, 214, .16) 0%, rgba(56, 124, 214, 0) 68%),
    radial-gradient(38% 46% at 86% 28%, rgba(70, 142, 232, .09) 0%, rgba(70, 142, 232, 0) 70%);
  /* An beiden Enden auslaufen. Viele kleine Stufen statt zweier: eine Maske,
     die erst flach liegt und dann abknickt, zeigt den Knick auf dunklem Grund
     als Band. Unten bleibt bis 96 % Reserve, damit die Bewegung die Kante
     nicht wieder freigibt. */
  /* Die Maske ist an beiden Enden schon bei null, bevor die Sektionskante
     kommt: der Hero beginnt bei 12/124 = 9,7 % und endet bei 90,3 % dieser
     Ebene. Diese Reserve traegt die Bewegung — der Transform nimmt die Maske
     mit, und ohne Reserve gaebe jeder Weg eine Kante frei. */
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, transparent 13%, rgba(0,0,0,.55) 21%, #000 34%,
    #000 58%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.34) 80%,
    transparent 87%, transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%, transparent 13%, rgba(0,0,0,.55) 21%, #000 34%,
    #000 58%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.34) 80%,
    transparent 87%, transparent 100%);
  animation: bc-heroglut 12s ease-in-out infinite;
  will-change: transform, opacity;
}
/* Die Deckkraft traegt den groessten Teil der Wahrnehmung: einen weichen
   Verlauf zu verschieben faellt kaum auf, ihn heller und dunkler werden zu
   lassen dagegen sofort. Sie birgt ausserdem kein Kantenrisiko, weil sie das
   maskierte Ergebnis gleichmaessig abschwaecht. Der Weg bleibt darum knapp. */
@keyframes bc-heroglut {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: .62; }
  30%      { transform: translate3d(4.5%, -3.2%, 0) scale(1.09); opacity: 1; }
  62%      { transform: translate3d(-4%, 2.2%, 0) scale(1.03);   opacity: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-heroglut { animation: none; }
}

/* ====================== Hintergrundvideo ====================== */
/* Bewegter Hintergrund: Stadtlichter mit Schärfewechsel. Stumm, endlos und ohne
   Bedienelemente — es ist Atmosphäre, kein Inhalt. Nur stumme Videos dürfen von
   selbst starten; mit Ton würde der Browser es blockieren. Geladen wird erst,
   wenn der Bereich herankommt, damit der Einstieg die Bandbreite behält.

   Es setzt schon im Hero an, an der Unterkante des Vorstellungsvideos, und läuft
   nach beiden Seiten aus: oben in den Hero-Grund, unten in den Seitengrund. Die
   vier Kennwerte setzt das Skript, weil sich Bandhöhe und Hero-Höhe je nach
   Fensterbreite verschieben.

   Es hängt in der Bandhülle und ragt mit negativem Abstand nach oben heraus. Im
   Hero-Abschnitt könnte es nicht liegen: der trägt `overflow: hidden` und würde
   alles an seiner Unterkante abschneiden. Die Themen-Sektion beschneidet nur die
   waagerechte Achse — genau dafür gibt es `clip` statt `hidden`. */
.bc-videogrund {
  --bc-vg-e1: 34%;                    /* ab hier volle Deckung: Oberkante des Bandes */
  --bc-vg-e2: 84%;                    /* ab hier läuft es aus: Unterkante des Bandes */
  position: absolute;
  left: 0; right: 0;
  top: var(--bc-vg-oben, -230px);     /* negativ: bis zur Unterkante des Hero-Videos */
  height: var(--bc-vg-hoehe, 780px);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.15s cubic-bezier(.33, 1, .68, 1);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, .40) calc(var(--bc-vg-e1) * .5),
    #000 var(--bc-vg-e1),
    #000 var(--bc-vg-e2),
    rgba(0, 0, 0, .30) calc(var(--bc-vg-e2) + 7%),
    transparent 100%);
  mask-image: linear-gradient(180deg,
    transparent 0%,
    rgba(0, 0, 0, .40) calc(var(--bc-vg-e1) * .5),
    #000 var(--bc-vg-e1),
    #000 var(--bc-vg-e2),
    rgba(0, 0, 0, .30) calc(var(--bc-vg-e2) + 7%),
    transparent 100%);
}
/* Zurückhaltend: das Bild soll man ahnen, nicht ansehen. */
.bc-videogrund.bc-sichtbar { opacity: .8; }
.bc-videogrund video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Etwas größer, weil die Unschärfe die Ränder ausfransen lässt — ohne die
     Vergrößerung entstünde ringsum ein weicher heller Saum. */
  transform: scale(1.06);
  filter: saturate(.5) contrast(.94) brightness(.72) blur(5px);
}

/* Der Hero-Grund endet an der Sektionskante hart — quer über die ganze Breite
   eine sichtbare Linie. Er läuft jetzt in den Seitengrund aus, damit das
   Video ohne Kante darunter hindurchläuft. */
.bc-heroausklang {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 0;
  pointer-events: none;
  /* Zielfarbe setzt das Skript aus dem Grund der naechsten Sektion; der
     Ersatzwert gilt nur, wenn dort nichts Deckendes liegt. */
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--bc-ausklang, rgb(7, 14, 23)) 70%, transparent) 56%,
    var(--bc-ausklang, rgb(7, 14, 23)) 100%);
}
/* Schleier: ohne ihn schluckt das bewegte Bild den Kontrast des Streifens und
   die Fahrbahnmarkierung verschwindet in den Lichtern. Über dem Band am
   kräftigsten, im Hero-Bereich zurückhaltend — dort steht kein Text darüber. */
.bc-videogrund::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(8, 15, 26, .18) 0%,
    rgba(8, 15, 26, .22) calc(var(--bc-vg-e1) * .5),
    rgba(8, 15, 26, .38) var(--bc-vg-e1),
    rgba(8, 15, 26, .44) var(--bc-vg-e2),
    rgba(8, 15, 26, .82) 100%);
}

/* Auf schmalen Schirmen bleibt es aus: 16 MB Hintergrundbewegung sind über
   Mobilfunk nicht zu rechtfertigen. */
/* Auf schmalen Schirmen laeuft es mit: die Datei wiegt nach dem Neukodieren
   0,96 MB statt 16,2 — das ist auch ueber Mobilfunk vertretbar. */
@media (prefers-reduced-motion: reduce) {
  .bc-videogrund { display: none; }
}

/* ====================== Fahrbahn-Band ====================== */
/* Fahrbahn-Motiv nach der Anzeigenvorlage: blaues Feld, gelbe Kanten, unterbrochene
   Markierung, über die volle Fensterbreite und deutlich angeschrägt.

   Das Band wird gedreht, der Text in einem gemeinsamen Rahmen zurückgedreht. Dieser
   eine Rahmen ist entscheidend: Dreht man die Zeilen einzeln zurück, wandert ihre
   linke Kante je nach Blockhöhe unterschiedlich weit aus der Flucht — Überschrift und
   Absatz standen dadurch drei Pixel versetzt. Mit einem Rahmen teilen sich alle
   denselben Bezugspunkt. */

/* Nur die waagerechte Achse beschneiden — `clip` erlaubt genau das, `hidden`
   nicht. Das Hintergrundvideo ragt oben aus der Hülle heraus und bliebe sonst
   an der Sektionskante hängen. */
[data-id="sec-themen"] { overflow-x: clip; }

/* Diese drei Regeln gehören hierher und nicht in den Stilblock im Seitenkopf:
   dort stünden sie vor den Theme-Dateien und würden bei gleicher Gewichtung
   überschrieben. Sie halten Hero-Inhalt und Bereichskacheln über dem Video. */
[data-id="hero-in"]     { position: relative; z-index: 2; }
[data-id="themen-rows"] { position: relative; z-index: 2; }
.bc-bandhuelle          { z-index: 1; }

/* „Finanzen und Immobilien" bekommt als einzige der vier Zeilen einen warmen
   Schimmer, der beim Überfahren etwas kräftiger wird. Der Verlauf ist bereits in
   der Stärke des Überfahrens angelegt; im Ruhezustand nimmt ihn die Deckkraft
   zurück — Verläufe selbst lassen sich nicht weich überblenden, eine Deckkraft
   schon. Der Schwerpunkt liegt rechts der Mitte: links deckt das Bild alles ab.
   `isolation` hält die -1 innerhalb der Zeile, sonst rutschte der Schimmer
   hinter den Seitengrund. */
/* Beim Ueberfahren tritt die ganze Zeile hervor — Bild und Text zusammen, nicht
   nur eines von beiden. Ausschliesslich `transform`: die Grafikkarte verschiebt
   die fertige Ebene, es wird nichts neu umbrochen und nichts neu gezeichnet.
   Die vier Kennungen stehen einzeln da; ein Praefix-Selektor traefe auch die
   verschachtelten trow-*-slot und trow-*-h3 und wuerde die Vergroesserung
   uebereinanderlegen. */
[data-id="trow-sek"], [data-id="trow-uni"],
[data-id="trow-fin"], [data-id="trow-sport"] { position: relative; }
/* Der Rahmen uebernimmt die Anordnung der Zeile: dieselbe Luecke, dieselbe
   Ausrichtung. Bewegt wird nur er, damit die Trennlinie der Zeile stehen
   bleibt und nicht mitwaechst. */
.bc-zeileninhalt {
  display: flex;
  /* Alle vier Werte erben, nicht nur drei: mobil stapelt die Zeile auf
     `column`, und ohne die Richtung blieben Bild und Text nebeneinander. */
  flex-direction: inherit;
  flex-wrap: inherit;
  gap: inherit;
  align-items: inherit;
  justify-content: inherit;
  width: 100%;
  min-width: 0;
  transition: transform .44s cubic-bezier(.22, .68, 0, 1);
  will-change: transform;
}
[data-id="trow-sek"]:hover,  [data-id="trow-uni"]:hover,
[data-id="trow-fin"]:hover,  [data-id="trow-sport"]:hover,
[data-id="trow-sek"]:focus-visible,  [data-id="trow-uni"]:focus-visible,
[data-id="trow-fin"]:focus-visible,  [data-id="trow-sport"]:focus-visible,
[data-id="trow-sek"]:hover  > .bc-zeileninhalt,
[data-id="trow-uni"]:hover  > .bc-zeileninhalt,
[data-id="trow-fin"]:hover  > .bc-zeileninhalt,
[data-id="trow-sport"]:hover > .bc-zeileninhalt,
[data-id^="trow-"]:focus-visible > .bc-zeileninhalt {
  transform: scale(1.022);
}
/* Auf Schirmen ohne Zeigegeraet gibt es keine Hervorhebung — dort waere sie
   an eine Scrollposition gebunden und damit unfreiwillig. */
[data-id^="trow-"] img {
  transition: filter .44s cubic-bezier(.22, .68, 0, 1);
}
[data-id="trow-sek"]:hover img,  [data-id="trow-uni"]:hover img,
[data-id="trow-fin"]:hover img,  [data-id="trow-sport"]:hover img {
  filter: brightness(1.07) saturate(1.05);
}
@media (prefers-reduced-motion: reduce) {
  [data-id="trow-sek"], [data-id="trow-uni"],
  [data-id="trow-fin"], [data-id="trow-sport"],
  [data-id^="trow-"] img { transition: none; }
  [data-id="trow-sek"]:hover, [data-id="trow-uni"]:hover,
  [data-id="trow-fin"]:hover, [data-id="trow-sport"]:hover,
  .bc-zeileninhalt { transform: none; transition: none; }
}

[data-id="trow-fin"] { isolation: isolate; }
[data-id="trow-fin"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Die Halbachsen sind so gewaehlt, dass der Verlauf die Raender der Zeile
     erreicht, wo er bereits bei null ist: 44 % der Hoehe und, vom Mittelpunkt
     bei 53 % aus, 42 % der Breite. Sonst schneidet die Zeilenkante mitten durch
     den Schein und aus dem Schimmer wird ein Rechteck. Die Reserve zu den
     Raendern traegt die Wanderung unten — deshalb 44 statt 50 %. */
  background: radial-gradient(42% 44% at 53% 50%,
    rgba(218, 185, 117, .22) 0%,
    rgba(218, 185, 117, .07) 52%,
    rgba(218, 185, 117, 0) 100%);
  /* In Ruhe unsichtbar, der Schein gehoert allein dem Ueberfahren. */
  opacity: 0;
  transition: opacity .34s cubic-bezier(.22, .68, 0, 1);
  will-change: transform, opacity;
}
[data-id="trow-fin"]:hover::after,
[data-id="trow-fin"]:focus-visible::after {
  opacity: 1;
  /* Nur verschieben, nicht vergroessern: eine Skalierung schoebe die Ellipse
     ueber die Zeilenkante und der Schein bekaeme wieder eine Kante. */
  animation: bc-schimmer 7.5s ease-in-out infinite;
}
@keyframes bc-schimmer {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(-4%, 2.4%, 0); }
  66%      { transform: translate3d(3.4%, -2.8%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-id="trow-fin"]:hover::after,
  [data-id="trow-fin"]:focus-visible::after { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-id="trow-fin"]::after { transition: none; }
}

.bc-bandhuelle {
  position: relative;
  width: 112vw;                    /* Überstand für die gedrehten Ecken */
  margin-left: calc(50% - 56vw);
  margin-right: calc(50% - 56vw);
  padding: 74px 0 78px;
}

[data-id="themen-head"][data-id] {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 100%;
  margin: 0;
  padding: 0 !important;
  /* Keine Drehung mehr an dieser Stelle: sie umfasste auch den Text, und ein
     Paar aus Drehung und Rueckdrehung rastert die Schrift in eine gedrehte
     Ebene und tastet sie neu ab. Gemessen kostete das ein Drittel der
     Kantenschaerfe (51,3 auf 35,8), obwohl die Gesamtmatrix rechnerisch die
     Einheitsmatrix ist. Die Neigung traegt jetzt allein die Bildebene. */
  overflow: visible;
}

/* Grund, Kanten und Markierung liegen zusammen auf einer Ebene, die als Ganzes
   geneigt wird. Der Text bleibt davon unberuehrt und damit scharf. */
.bc-bandbild {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: rotate(-2.6deg);
  pointer-events: none;
}

/* Der Aufbau des Bandes.

   Die obere Kante zieht von links ein, die untere gleichzeitig von rechts, und
   das blaue Feld öffnet sich dazwischen aus der Mittellinie. Die Bewegungsachsen
   kreuzen sich — waagerecht die Kanten, senkrecht das Feld — dadurch entsteht
   kein Richtungsstreit und das Band bildet sich gleichmäßig auf.

   Als Hintergrundverlauf ginge das nicht: ein Verlauf lässt sich nicht in drei
   Teile mit eigener Bewegung zerlegen. Deshalb drei Ebenen. */
.bc-bandgrund {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1B3A6B;
  box-shadow: 0 32px 74px -38px rgba(0, 0, 0, .85);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path .82s cubic-bezier(.16, 1, .3, 1);
}
.bc-kante {
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  z-index: 2;
  background: #F7D117;
  transform: scaleX(0);
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
}
.bc-kante-oben  { top: 0;    transform-origin: left center; }
.bc-kante-unten { bottom: 0; transform-origin: right center; }

[data-id="themen-head"].bc-eingefahren .bc-bandgrund { clip-path: inset(0 0 0 0); }
[data-id="themen-head"].bc-eingefahren .bc-kante     { transform: scaleX(1); }

/* Zwei laufende Markierungen. Die Strecke entspricht einer Musterperiode
   (44 px Strich + 32 px Lücke), damit der Übergang nahtlos bleibt. */
.bc-bandbild::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; top: 14px; bottom: 14px;
  background:
    repeating-linear-gradient(90deg, #C9D8EC 0 44px, transparent 44px 76px) 0 24px / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, #C9D8EC 0 44px, transparent 44px 76px) 0 calc(100% - 24px) / 100% 9px no-repeat;
  animation: bc-fahrbahn 2.6s linear infinite;
  pointer-events: none;
  z-index: 1;
  /* Erst wenn die Kanten fast durchgezogen sind, wird die Fahrbahn markiert. */
  opacity: 0;
  transition: opacity .6s ease-out .58s;
}
[data-id="themen-head"].bc-eingefahren .bc-bandbild::after { opacity: 1; }
@keyframes bc-fahrbahn {
  from { background-position: 0 24px, 0 calc(100% - 24px); }
  to   { background-position: 76px 24px, -76px calc(100% - 24px); }
}

/* Ein Rahmen für den gesamten Text, um denselben Betrag zurückgedreht.
   Der Innenabstand bildet den zentrierten Inhaltsbereich nach: bei 1440 px
   Fensterbreite ergibt (1440 − 1144) / 2 die 148 px der Seitenkante. */
.bc-bandtext {
  position: relative;
  z-index: 2;

  /* Zweispaltig: Überschrift links, Erklärung rechts. Ein Band über die volle Breite,
     dessen Inhalt nur ein Drittel davon nutzt, wirkt unfertig — 866 px blieben leer.
     Die Aufteilung füllt die Fläche und schafft zugleich eine Leserichtung.
     Der obere und untere Abstand sind gleich: eine ungleiche Aufteilung (zuvor 162
     gegen 91 px) liest sich als Versehen. */
  /* Ein Block: Kicker, Überschrift und Absatz untereinander. Die linke Kante
     schließt bündig mit den Bildern der Bereiche darunter ab (148 px bei 1440 px
     Fensterbreite) — dieselbe Rechnung wie deren Inhaltsspalte, plus die 6vw,
     um die das Band über den Bildschirm hinausragt. */
  display: block;
  /* Nur Rechengröße für den Ausgleich unten: so breit läuft der Absatz
     tatsächlich (seine Höchstbreite von 62ch ergibt 519 px). */
  --bc-block: min(520px, 78vw);
  --bc-seite: clamp(52px, calc((100vw - 1144px) / 2 + 6vw), 250px);
  /* Ausgleich der Neigung: die Bildebene dreht sich um die Bandmitte bei 56vw,
     der Textblock sitzt mit seiner Mitte weiter links. Um diesen Abstand mal
     tan(2,6 grad) liegt die Fahrbahn dort tiefer — genau so weit muss der Text
     nach unten. Oben aufschlagen, unten abziehen: die Bandhoehe bleibt gleich. */
  --bc-neigung: calc((56vw - var(--bc-seite) - var(--bc-block) / 2) * 0.0454);
  padding: calc(74px + 3vw + var(--bc-neigung)) var(--bc-seite)
           calc(74px + 3vw - var(--bc-neigung));
}
/* Kicker und Überschrift teilen sich die linke Spalte. */
[data-id="themen-kicker"] { margin: 0 0 14px; }
[data-id="themen-h2"]     { margin: 0 0 18px; }
[data-id="themen-p"]      { margin: 0; }

/* Der Kicker stand bei 12,5 px gegen 50 px Überschrift — ein vierfacher Sprung.
   14 px halten die Stufe lesbar, ohne der Überschrift den Rang abzulaufen. */
[data-id="themen-kicker-tx"] { font-size: 14px !important; }

[data-id="themen-h2"], [data-id="themen-h2"] * { color: #FFFFFF !important; }
[data-id="themen-p"],  [data-id="themen-p"] *  { color: #D6E2F2 !important; }
[data-id="themen-kicker"] * { color: #F7D117 !important; }
[data-id="themen-kicker-ln"] { background: #F7D117 !important; }

/* Einfahrt von links und rechts, sobald der Abschnitt in Sicht kommt. */
[data-id="themen-kicker"],
[data-id="themen-h2"],
[data-id="themen-p"] {
  opacity: 0;
  transition: transform .78s cubic-bezier(.22, .68, 0, 1), opacity .52s ease-out;
  will-change: transform, opacity;
}
/* Der Text folgt dem Band, er läuft nicht mit ihm um die Wette. */
[data-id="themen-kicker"] { transform: translateX(-52px); transition-delay: .30s; }
[data-id="themen-h2"]     { transform: translateX(-88px); transition-delay: .36s; }
[data-id="themen-p"]      { transform: translateX(88px);  transition-delay: .46s; }

[data-id="themen-head"].bc-eingefahren [data-id="themen-kicker"],
[data-id="themen-head"].bc-eingefahren [data-id="themen-h2"],
[data-id="themen-head"].bc-eingefahren [data-id="themen-p"] {
  opacity: 1;
  transform: translateX(0);
}

/* Gefüllter Blockpfeil vor dem Band, der ruhig auf und ab wandert. */
.bc-bandhuelle::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: clamp(20px, 11vw, 240px);
  bottom: 4px;
  width: clamp(54px, 5.5vw, 80px);
  height: clamp(124px, 13vw, 186px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cpath d='M44 6h32v168h36L60 294 8 174h36z' fill='%23F7D117'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
  animation: bc-pfeil 2.4s cubic-bezier(.45, 0, .55, 1) infinite;
  pointer-events: none;
  /* Zuletzt, wenn das Band steht: der Pfeil zeigt auf etwas Fertiges. */
  opacity: 0;
  transition: opacity .55s ease-out .8s;
}
.bc-bandhuelle.bc-eingefahren::after { opacity: 1; }
@keyframes bc-pfeil {
  0%, 100% { transform: translateY(-11px); }
  50%      { transform: translateY(11px); }
}

@media (max-width: 700px) {
  .bc-bandhuelle { padding: 52px 0 82px; }
  .bc-bandbild { transform: rotate(-2deg); }
  /* Der Text fuellt hier das Band bis auf gleiche Raender aus, seine Mitte liegt
     damit auf der Bandmitte — kein Neigungsausgleich noetig. Und keine
     Rueckdrehung mehr: die Neigung traegt allein die Bildebene.
     Das Band nahm mobil nur 35 % der Fensterhoehe ein gegen 42 % auf dem
     Desktop; das groessere Polster gleicht das an. */
  .bc-bandtext {
    --bc-neigung: 0px;
    padding: calc(66px + 5vw) 52px calc(66px + 5vw);
  }
  /* Mittig über den Randabstand statt über translateX: so bleibt der Transform
     allein der Auf- und Abbewegung vorbehalten und dieselben Keyframes gelten. */
  .bc-bandhuelle::after {
    right: auto;
    left: 50%;
    margin-left: -23px;
    bottom: -34px;
    width: 46px;
    height: 104px;
  }
}

/* Nichts baut sich auf, alles steht fertig da. Beim Pfeil bleibt der Transform
   unangetastet — auf schmalen Schirmen trägt er die Mittelstellung. */
@media (prefers-reduced-motion: reduce) {
  .bc-bandbild::after,
  .bc-bandhuelle::after { animation: none; transition: none; opacity: 1; }
  [data-id="themen-kicker"], [data-id="themen-h2"], [data-id="themen-p"] {
    transition: none; opacity: 1; transform: none;
  }
  .bc-bandgrund { transition: none; clip-path: none; }
  .bc-kante     { transition: none; transform: scaleX(1); }
}

/* ====================== Hauptknoepfe ====================== */
/* Alle Hauptknoepfe tragen jetzt den Stil des Absenden-Knopfs aus dem
   Anmeldefenster: gelbe Pille, dunkle Versalien in Bebas. Vorher waren sie
   blau und in der Laufschrift — zwei Handschriften fuer dieselbe Handlung.

   Etwas knapper bemessen als die Vorlage (44 statt 50 px hoch): der Knopf in
   der Kopfleiste muss in deren 75 px passen, ohne sie aufzublaehen.

   `!important` ist hier noetig, weil die Farben teils aus lokalen Elementstilen
   mit hoeherer Gewichtung kommen. */
.elementor .btnPrimary {
  /* Auch am Knopf selbst, nicht nur am Textelement darin: der Knopf in der
     Kopfleiste traegt seine Beschriftung als blossen Textknoten. */
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif !important;
  /* Bebas Neue liegt nur in einem Schnitt vor: 700 liesse den Browser fett
     nachbilden und verschmiert die Formen. */
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  background: #FFD449 !important;
  background-image: none !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  box-shadow: none !important;
  transition: background-color .18s ease, transform .18s ease;
}
.elementor .btnPrimary,
.elementor .btnPrimary *,
.elementor .btnPrimary:hover,
.elementor .btnPrimary:hover *,
.elementor .btnPrimary:focus-visible,
.elementor .btnPrimary:focus-visible * {
  color: #050D18 !important;
  fill: #050D18 !important;
  stroke: #050D18 !important;
}
.elementor .btnPrimary > span,
.elementor .btnPrimary .e-paragraph-base {
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
}
.elementor .btnPrimary:hover { background: #FFE07A !important; }
@media (prefers-reduced-motion: reduce) {
  .elementor .btnPrimary { transition: none; }
}

/* Die Finanzen-Zeile fuehrt ihre eigenen Akzente in Gold — Kicker, Haken und
   Schimmer. Der blaue Strich unter „Zum Bereich" beim Ueberfahren war der
   letzte Rest der allgemeinen Blau-Vorgabe und faellt aus der Reihe. */
[data-id="trow-fin"]:hover .golink,
[data-id="trow-fin"] .golink:hover,
[data-id="trow-fin"] .golink:focus-visible {
  border-color: #DAB975 !important;
}

/* Der zweite Knopf der Bereichsseiten (btnGold) und die Absenden-Knoepfe der
   Formulare bekommen Form und Schrift der Hauptknoepfe: Pille, Bebas in
   Versalien. Der zweite behaelt seinen tieferen Goldton — sonst stuenden
   „Mitglied werden" und „Termin buchen" gleichrangig nebeneinander. */
.elementor .btnGold,
.elementor form.elementor-form button[type="submit"],
.elementor-popup-modal form.elementor-form button[type="submit"] {
  border-radius: 999px !important;
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  box-shadow: none !important;
  transition: background-color .18s ease;
}
.elementor form.elementor-form button[type="submit"],
.elementor-popup-modal form.elementor-form button[type="submit"] {
  background: #FFD449 !important;
  background-image: none !important;
}
.elementor form.elementor-form button[type="submit"],
.elementor form.elementor-form button[type="submit"] *,
.elementor-popup-modal form.elementor-form button[type="submit"],
.elementor-popup-modal form.elementor-form button[type="submit"] * {
  color: #050D18 !important;
  fill: #050D18 !important;
}
.elementor .btnGold:hover { background: #E6CE96 !important; }
.elementor form.elementor-form button[type="submit"]:hover,
.elementor-popup-modal form.elementor-form button[type="submit"]:hover {
  background: #FFE07A !important;
}
@media (prefers-reduced-motion: reduce) {
  .elementor .btnGold,
  .elementor form.elementor-form button[type="submit"] { transition: none; }
}

/* Das Material ist 720x1280, also 9:16, steckte aber in einem 16:9-Rahmen und
   stand mit schwarzen Balken links und rechts darin. Der Rahmen bekommt das
   Format des Materials; die Hoehe fuehrt, damit der Hero nicht auf 890 px
   aufgeht, und die Breite folgt daraus. */
[data-id="fin-video"] {
  /* Breite ausdruecklich, nicht ueber das Seitenverhaeltnis: das Element ist
     ein Flex-Kind und wuerde sonst auf die Spaltenbreite gestreckt. */
  --bc-vh: clamp(320px, 46vh, 460px);
  height: var(--bc-vh) !important;
  width: calc(var(--bc-vh) * 9 / 16) !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
[data-id="fin-video"] .e-hosted-video,
[data-id="fin-video"] .elementor-video,
[data-id="fin-video-feld"],
[data-id="fin-video-w"] {
  aspect-ratio: auto !important;
  width: 100% !important;
  height: 100% !important;
}
[data-id="fin-video"] video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 700px) {
  [data-id="fin-video"] { margin-left: auto !important; margin-right: auto !important; }
}

/* ====================== Lesbarkeit ====================== */
/* Drei Stellen lagen unter 4,5:1 und sind damit fuer schwaches Sehen zu
   schwach. Die Werte sind so gewaehlt, dass sie den Ton behalten und die
   Schwelle sicher ueberschreiten — gemessen gegen den jeweils darunter
   liegenden Grund, nicht geschaetzt. */

/* „Alle Rechte vorbehalten" im Ersatz-Fuss des Themes stand auf #333 und war
   mit 1,38:1 praktisch unsichtbar. Der Ersatz-Fuss erscheint auf der
   Fahrplan-Seite, weil dort der Elementor-Fuss ausgenommen ist. */
.site-footer .copyright,
.site-footer .copyright p,
.site-footer .copyright a {
  color: #8A94A3 !important;   /* 5,1:1 auf rgb(11,26,46) */
}

/* Preiseinheit auf der Uni-Seite und die Kopfzeile der Rangliste: 4,21:1 */
.elementor [class*="price-u"],
.elementor table th {
  color: #939DAB !important;   /* 4,9:1 auf rgb(19,31,46) */
}

/* Der stillste Ton des Fahrplan-Blocks trug Bildunterschrift und Knopfzeile
   mit 4,08:1. */
.bch { --bch-ink3: #7F8FA6 !important; }   /* 5,0:1 auf rgb(8,11,17) */

/* ====================== Tippziele ====================== */
/* Unter 44 px wird das Treffen auf dem Touchscreen zur Geduldsprobe. Die
   Ankreuzfelder bleiben klein: ihr Ziel ist die umschliessende Kachel, und die
   misst 246x64. */
.elementor .elementor-field-group .elementor-field:not([type="checkbox"]):not([type="radio"]),
.elementor .elementor-field-group select,
.elementor .elementor-field-group textarea {
  min-height: 44px !important;
}
.elementor .btn,
.elementor .btnPrimary,
.elementor .btnGold,
.elementor .btnGhost,
.elementor form.elementor-form button[type="submit"] {
  min-height: 44px !important;
}
.bc-tonknopf { min-height: 44px; }

/* Nur auf Schirmen ohne Zeigegeraet: die Fusslinks standen 18 px hoch dicht
   untereinander, das Klappmenue mit 40 px. Mit der Maus ist beides gut zu
   treffen, mit dem Daumen nicht. */
@media (hover: none), (max-width: 900px) {
  .elementor-location-footer .e-paragraph-link-base {
    display: inline-block;
    padding-block: 13px;
  }
  [data-id="flogo"],
  [data-id="hdr-logo"] { min-height: 44px; }
  /* Der Ruecksprung „Alle Bereiche" stand 27 px hoch ueber der Ueberschrift. */
  [data-id$="-back"] { min-height: 44px; padding-block: 9px; }
  .s-site-header .elementor-nav-menu--dropdown a { min-height: 44px; display: flex; align-items: center; }
}

/* ====================== Textseiten ====================== */
/* Fuer Fliesstext gilt ein anderes Mass als fuer eine Landingpage: eine Zeile
   von rund siebzig Zeichen, mehr Zeilenabstand, ruhige Farben. Die Trennlinien
   vor den Abschnitten geben einem langen Rechtstext die Gliederung, die ihm
   sonst fehlt. */
/* Diese Seiten baut nicht Elementor, sondern das Theme. Damit fehlt ihnen
   alles, was Elementor je Element setzt: ohne die folgenden Regeln fielen
   Fliesstext und Ueberschriften auf die Systemschrift zurueck, waehrend der
   Rest der Seite Barlow und Bebas Neue traegt. */
.bc-textseite .page-header,
.bc-textseite .page-content {
  font-family: Barlow, system-ui, -apple-system, sans-serif;
}
.bc-textseite .entry-title,
.bc-textseite .page-content h1,
.bc-textseite .page-content h2 {
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif;
  font-weight: 800;
}
/* Den Seitentitel setzt das Theme ausserhalb von .page-content. Er stand in
   der Vorgabefarbe auf dunklem Grund und rutschte unter die fixierte Leiste. */
.bc-textseite .page-header {
  max-width: 74ch;
  margin-inline: auto;
  padding: clamp(44px, 6vw, 92px) 24px 0;
}
/* Bebas laeuft schmal, deshalb liegen die Grade hoeher als bei einer normal
   breiten Schrift. Der untere Wert ist gemessen: „Datenschutzerklaerung" ist
   ein Wort ohne Trennstelle und passt bei 36px gerade noch in die Spalte
   eines 390px breiten Geraets. Groesser, und die Zeile schiebt das Layout
   ueber den Rand hinaus. */
.bc-textseite .entry-title {
  margin: 0;
  font-size: clamp(36px, 8vw, 62px);
  line-height: 1.0;
  letter-spacing: .014em;
  text-transform: uppercase;
  hyphens: auto;
  color: #F4F7FA;
}
.bc-textseite .page-content {
  max-width: 74ch;
  margin-inline: auto;
  padding: 26px 24px clamp(72px, 9vw, 128px);
  color: #C6D2E1;
  font-size: 17px;
  line-height: 1.68;
  overflow-wrap: break-word;
}
.bc-textseite .page-content h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 8vw, 62px);
  line-height: 1.02;
  letter-spacing: .012em;
  text-transform: uppercase;
  hyphens: auto;
  color: #F4F7FA;
}
.bc-textseite .page-content h2 {
  margin: 54px 0 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(240, 246, 253, .10);
  font-size: clamp(27px, 3.2vw, 34px);
  line-height: 1.12;
  letter-spacing: .022em;
  text-transform: uppercase;
  color: #F0F6FD;
}
.bc-textseite .page-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 40px;
}
/* Die dritte Ebene bleibt in Barlow: bei 18px verliert Bebas zu viel
   Lesbarkeit, und der Wechsel der Schrift traegt die Hierarchie ohnehin. */
.bc-textseite .page-content h3 {
  margin: 30px 0 8px;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: .01em;
  color: #EAF1FA;
}
.bc-textseite .page-content p { margin: 0 0 17px; }
.bc-textseite .page-content ul { margin: 0 0 20px; padding-left: 22px; }
.bc-textseite .page-content li { margin-bottom: 9px; }
.bc-textseite .page-content strong { color: #F0F6FD; font-weight: 650; }
.bc-textseite .page-content a {
  color: #68ADFF;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.bc-textseite .page-content a:hover { color: #92C6FF; }
.bc-textseite .page-content code {
  font-size: .9em;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(240, 246, 253, .07);
  color: #EAF1FA;
}
/* Der Vorspann traegt die Kurzfassung und darf lauter sein als der Rest. */
.bc-textseite .bc-vorspann {
  margin: 0 0 8px;
  font-size: 19.5px;
  line-height: 1.58;
  color: #EAF1FA;
}
.bc-textseite .bc-stand {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(240, 246, 253, .10);
  font-size: 14.5px;
  color: #93A2B5;
}

/* Die kleinen Beschriftungen im Impressum standen in #77818F auf #131F2E:
   4,21 zu 1 bei 12,5px, also unter dem Soll von 4,5. Angehoben auf den
   gedaempften Ton, den der Fliesstext der Seite ohnehin traegt (7,25 zu 1).
   Die Fusszeile bleibt unberuehrt, dort steht die Farbe auf anderem Grund. */
/* Elementor setzt die Farbe ueber .elementor .fh5 — Klasse plus Klasse. Ein
   main .fh5 verliert dagegen, deshalb steht .elementor hier mit drin. */
main .elementor .fh5,
main .elementor .muted13 { color: #A1ACBB; }

/* ====================== Einwilligung ====================== */
/* Unten angeschlagen, nicht als Sperre ueber der Seite: Wer nur den Fahrplan lesen
   will, soll das koennen, ohne vorher eine Entscheidung ueber Werbemessung zu
   treffen. Beide Knoepfe haben dieselbe Groesse und dieselbe Hoehe — die Ablehnung
   liegt genauso nah wie die Zustimmung. */
.bc-einwilligung {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  padding: 0 12px 12px;
  transform: translateY(115%);
  transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
.bc-einwilligung.ist-da { transform: translateY(0); }
.bc-einwilligung[hidden] { display: none; }

.bc-einwilligung-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1px solid #22375180;
  border-radius: 16px;
  background: rgba(11, 26, 46, .96);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .85);
  backdrop-filter: blur(10px);
}
.bc-einwilligung-text {
  flex: 1 1 380px;
  min-width: 0;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #C6D2E1;
}
.bc-einwilligung-text p { margin: 0; }
.bc-einwilligung-titel {
  margin: 0 0 3px !important;
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: .022em;
  text-transform: uppercase;
  color: #F0F6FD;
}
.bc-einwilligung-text a {
  color: #68ADFF;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.bc-einwilligung-knoepfe {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}
.bc-einwilligung-knopf {
  min-width: 168px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Bebas Neue", Archivo, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.bc-einwilligung-ja { background: #FFD449; color: #14100A; }
.bc-einwilligung-ja:hover { background: #FFDE6E; }
.bc-einwilligung-nein {
  background: transparent;
  border-color: #40587A;
  color: #DCE7F5;
}
.bc-einwilligung-nein:hover { border-color: #6E88AC; background: rgba(255, 255, 255, .05); }
.bc-einwilligung-knopf:focus-visible { outline: 2px solid #FFD449; outline-offset: 3px; }

@media (max-width: 760px) {
  /* Mobil als Blatt von unten, wie die uebrigen Einstellflaechen. */
  .bc-einwilligung { padding: 0; }
  .bc-einwilligung-inhalt {
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    padding: 18px 18px 20px;
    gap: 14px;
  }
  .bc-einwilligung-knoepfe { flex: 1 1 100%; }
  .bc-einwilligung-knopf { flex: 1 1 0; min-width: 0; }
}

/* Der Widerruf in der Datenschutzerklaerung. */
.bc-textseite #bc-einwilligung-aendern {
  margin-top: 4px;
  padding: 9px 18px;
  border: 1px solid #40587A;
  border-radius: 999px;
  background: transparent;
  color: #DCE7F5;
  font-family: Barlow, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.bc-textseite #bc-einwilligung-aendern:hover { border-color: #6E88AC; background: rgba(255, 255, 255, .05); }
.bc-textseite #bc-einwilligung-stand { display: block; margin-top: 8px; font-size: 14.5px; color: #93A2B5; }

/* ====================== Haken-Aufzaehlungen ====================== */
/* Drei Bausteine tragen dieselbe Idee: Haken links, kurze Zusage rechts.
   Die Chips unter den Bereichen der Startseite (m-sek-1 …), die Punktlisten
   der Bereichsseiten (sek-bpt1 …) und die beiden Kartenlisten der Uni-Seite
   (uni-c1-b1 …). Je nach Baustein steht der Text im Chip selbst oder in
   einem eigenen Absatz darin, deshalb beide Ebenen. */
[data-id^="m-sek-"],
[data-id^="m-uni-"],
[data-id^="m-fin-"],
[data-id^="m-sp-"],
[data-id*="-bpt"],
[data-id^="uni-c1-b"],
[data-id^="uni-c2-b"],
[data-id^="m-sek-"] .e-paragraph-base,
[data-id^="m-uni-"] .e-paragraph-base,
[data-id^="m-fin-"] .e-paragraph-base,
[data-id^="m-sp-"] .e-paragraph-base,
[data-id*="-bpt"] .e-paragraph-base,
[data-id^="uni-c1-b"] .e-paragraph-base,
[data-id^="uni-c2-b"] .e-paragraph-base { font-weight: 600 !important; }

/* ---------------------------------------------------------------------- *
 * Textseiten beleben                                                      *
 *
 * Kontakt, Datenschutz, AGB und Impressum haben keinen Hero. Der wandernde
 * Schein aus bc-frontend.js findet dort nichts, an dem er haengen koennte —
 * die Seiten stehen als einzige unbewegt neben dem Rest der Site.
 *
 * Sie bekommen ihn deshalb in einer eigenen Buehne. Die braucht eine feste
 * Hoehe: .bc-heroglut misst sich mit 124 % an seinem Elternteil, und auf einer
 * Fliesstextseite waere das die gesamte Seitenhoehe — der Schein zoege sich
 * bis unter das Impressum. 460 px entsprechen ungefaehr dem, was ein Hero
 * einnimmt, und enden noch vor dem ersten Absatz.
 * ---------------------------------------------------------------------- */
main.bc-textbelebt {
  position: relative;
  /* isolation statt z-index am Kind: So bleibt der Schein unter dem Text,
     ohne dass irgendein Overlay der Seite in denselben Stapel gerissen wird. */
  isolation: isolate;
}
main.bc-textbelebt > *:not(.bc-textbuehne) {
  position: relative;
  z-index: 1;
}
.bc-textbuehne {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 460px;
  /* Schneidet den Ueberstand des Scheins ab — er ragt oben und seitlich
     bewusst hinaus, damit die Bewegung keine Kante freigibt. */
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 700px) {
  .bc-textbuehne { height: 340px; }
}

/* ---------------------------------------------------------------------- *
 * Leistungsprofil im Hero der sportlichen Vorbereitung                    *
 *
 * Kein Kasten drumherum. Die Ringe der Zeichnung sind bereits ein Rahmen;
 * ein zweiter daneben waere die Rahmung der Rahmung. Das Profil steht
 * deshalb direkt auf dem Hero-Grund und traegt seine Ordnung selbst.
 *
 * Zwei Fassungen statt einer skalierten: Am Rechner traegt der Ring seine
 * Beschriftungen. Am Handy waeren dieselben Texte bei 334 px Breite sieben
 * Pixel hoch — das ist keine Geschmacksfrage, das ist unlesbar. Dort steht
 * die blanke Zeichnung, und die Werte kommen als Liste darunter.
 * ---------------------------------------------------------------------- */
.bc-profil { margin: 0; min-width: 0; }
.bc-profil svg { display: block; width: 100%; height: auto; }
.bc-profil-klein { display: none; }

/* Der Hero hatte bisher ein einziges Kind, und die Ueberschrift lief dadurch
   ueber 1330 px ohne Kante. Mit der zweiten Spalte bekommt sie eine. */
/* Kein Schrumpfen: Mit flex-shrink blieb die Spalte bei gemessenen 300 px,
   und die Beschriftungen im Ring waren 3,5 Pixel hoch. */
[data-id="sek-thero-grid"] > .elementor-widget-shortcode,
[data-id="sek-thero-grid"] > .elementor-widget-html {
  flex: 0 0 clamp(400px, 44%, 560px);
  min-width: 0;
  align-self: center;
}
[data-id="sek-thero-grid"] > [data-id="sek-copy"] { flex: 1 1 0; min-width: 0; }

@media (max-width: 1024px) {
  .bc-profil-voll  { display: none; }
  .bc-profil-klein { display: block; }
  [data-id="sek-thero-grid"] > .elementor-widget-shortcode,
  [data-id="sek-thero-grid"] > .elementor-widget-html { flex: 1 1 auto; width: 100%; }
  /* Gestapelt darf die Zeichnung nicht die halbe Seite hoch werden: bei 968 px
     Breite war der Hero 1829 px hoch. */
  .bc-profil-klein > svg { max-width: 400px; margin: 0 auto; }
  .bc-profil-liste, .bc-profil-kopf, .bc-profil-baender { max-width: 460px; }
}

/* Das Theme kursiviert figcaption. Bebas Neue hat keinen Kursivschnitt, der
   Browser schraegt ihn also kuenstlich — und aus der Ueberschrift wird ein
   verzerrtes Etwas. Beides ausdruecklich zuruecknehmen. */
.bc-profil, .bc-profil-kopf, .bc-profil-kopf * { font-style: normal; }
.bc-profil-kopf { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.bc-profil-kopf b {
  font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400;
  font-size: 31px; line-height: 1; letter-spacing: 1.8px; color: #EAF1FA;
}
.bc-profil-kopf > span { display: block; }

.bc-profil-liste { list-style: none; margin: 18px 0 0; padding: 0; }
.bc-profil-liste li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.bc-profil-liste li:last-child { border-bottom: 0; }
.bc-p-n {
  font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 17.5px;
  letter-spacing: 1.1px; color: #EAF1FA; line-height: 1.15;
}
.bc-p-w {
  font-family: "Barlow", sans-serif; font-weight: 700; font-size: 19px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bc-p-w i { font-style: normal; font-weight: 500; font-size: 12px; color: #8C9AAE; }

.bc-profil-baender { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 15px; }
.bc-profil-baender span {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 12.5px; letter-spacing: .3px; color: #8C9AAE;
}
.bc-profil-baender i { width: 16px; height: 3px; border-radius: 2px; flex: none; }

@media (prefers-reduced-motion: reduce) { .bc-profil svg * { animation: none !important; } }

/* Der Zuwachs in der Werteliste. Blendet erst ein, wenn das Zielnetz
   draussen ist — vorher waere er eine Behauptung ohne Bild. */
.bc-p-plus {
  display: inline-block; margin-left: 9px;
  font-family: "Barlow", sans-serif; font-weight: 700; font-size: 13px;
  color: #4FB05A; opacity: 0;
}
.bc-p-w .lp-hzahl { font-variant-numeric: tabular-nums; }

/* Zwei Unterzeilen an derselben Stelle: Am Ende der Bewegung stehen andere
   Zahlen als am Anfang, also muss die Zeile darunter mitwechseln. Sonst
   behauptete die Grafik, der Einstufungstest liefere 82 von 100. */
.bc-p-untertitel { display: grid; }
.bc-p-untertitel > span {
  grid-area: 1 / 1;
  /* Gemessen am Vorspann der Textspalte: Barlow, Gewicht 400, keine Sperrung,
     Satzschreibung, #A1ACBB. Nur kleiner, weil es eine Bildunterschrift ist
     und keine zweite Hauptaussage. */
  font-family: "Barlow", system-ui, sans-serif;
  font-size: 16px; line-height: 1.5; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: #A1ACBB;
}
/* Gleiche Spezifitaet wie die Regel darueber, sonst gewinnt deren Farbe.
   Alles andere bleibt angeglichen — nur der Ton sagt, dass hier der Zustand
   nach der Vorbereitung steht. */
.bc-p-untertitel > .bc-p-nachher { color: #4FB05A; opacity: 0; }

/* Stimmen ueber dem Formular ------------------------------------------------
   Masse und Farben sind von der Startseite abgenommen, damit die Karten auf den
   Bereichsseiten nicht wie ein Fremdkoerper wirken. Anders als dort tragen sie
   hier einen zarten Rahmen: In der Reihe braucht das Auge eine Kante, sonst
   laufen drei Zitate ineinander — auf dem Handy erst recht, wo sie seitlich
   gescrollt werden. */
.bc-stimmen {
  padding: 48px 0 42px;
  /* Der Block ist selbst durchsichtig und zeigt damit den Seitengrund #0B1A2E,
     waehrend die Abschnitte darueber und darunter #070E17 tragen. Ohne Verlauf
     stuende hier ein hellerer Streifen mit zwei harten Kanten. So wandert die
     Farbe an beiden Enden in den Ton der Nachbarn und der Bereich hebt sich nur
     noch in der Mitte leicht ab. */
  background: linear-gradient(180deg,
    #070E17 0%,
    #0B1A2E 26%,
    #0B1A2E 74%,
    #070E17 100%);
}
.bc-stimmen-innen { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.bc-stimmen-kopf {
  margin: 0 0 16px;
  font-family: "Barlow", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: #77818F;
}
.bc-stimmen-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.bc-stimme {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
}
.bc-stimme-sterne {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: #E0AE3A;
}
.bc-stimme-text {
  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: #A1ACBB;
  quotes: none;
}
.bc-stimme-person { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.bc-stimme-kuerzel {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1A5FC8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #F0F6FD;
}
.bc-stimme-wer { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.bc-stimme-wer b {
  font-family: "Barlow", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #F0F6FD;
}
.bc-stimme-wer small {
  font-family: "Barlow", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: #77818F;
}

/* Auf dem Handy nebeneinander liegen lassen und seitlich schieben. Untereinander
   waeren es drei volle Bildschirmhoehen vor dem Formular — der Weg zum Eintragen
   wuerde dadurch laenger statt kuerzer. Die angeschnittene dritte Karte am Rand
   sagt ohne Worte, dass es weitergeht. */
@media (max-width: 900px) {
  .bc-stimmen { padding: 38px 0 32px; }
  .bc-stimmen-reihe {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(258px, 76vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -20px;
    padding: 0 20px 12px;
  }
  .bc-stimmen-reihe::-webkit-scrollbar { display: none; }
  .bc-stimme { scroll-snap-align: start; }
  .bc-stimme-text { font-size: 16.5px; }
}


/* ===========================================================================
   Nach dem Absenden
   ---------------------------------------------------------------------------
   Ein Formular, das nach dem Klick einfach verschwindet, laesst die Frage offen,
   ob es geklappt hat. Deshalb eine kurze, eindeutige Bestaetigung: Die Flaeche
   leuchtet im Bernstein der Marke auf, ein Haken zeichnet sich, dann ist Schluss.

   Das Bernstein ist aus dem Markengold (#FFD449) abgeleitet und abgedunkelt --
   ein warmer Ton, auf dem das Marineblau des Hakens steht wie ueberall sonst
   auf der Seite auch.
   =========================================================================== */
.bc-erfolg {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: radial-gradient(120% 120% at 50% 45%, #A8712A 0%, #8A5A20 55%, #6E4718 100%);
  opacity: 0;
  animation: bc-erfolg-auf .42s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes bc-erfolg-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Der Rahmen um den Haken. Er faehrt einen Hauch spaeter auf als die Flaeche,
   damit man ihn ankommen sieht, statt ihn schon vorzufinden. */
.bc-erfolg__rahmen {
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 3px solid #EAF1FA;
  background: rgba(11, 26, 46, .92);
  display: grid;
  place-items: center;
  transform: scale(.72);
  opacity: 0;
  animation: bc-erfolg-rahmen .5s cubic-bezier(.2,.8,.3,1) .16s forwards;
  box-shadow: 0 10px 34px rgba(7, 14, 23, .45);
}

@keyframes bc-erfolg-rahmen {
  from { transform: scale(.72); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Der Haken wird gezeichnet, nicht eingeblendet: Eine Linie, die entsteht,
   liest sich als Vorgang -- als haette gerade jemand abgehakt. */
.bc-erfolg__haken {
  width: 46px;
  height: 46px;
  fill: none;
  stroke: #7FB6F5;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 42;
  stroke-dashoffset: 42;
  animation: bc-erfolg-haken .42s cubic-bezier(.65,0,.35,1) .38s forwards;
}

@keyframes bc-erfolg-haken {
  to { stroke-dashoffset: 0; }
}

.bc-erfolg__text {
  margin-top: 18px;
  color: #F4F7FA;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  opacity: 0;
  animation: bc-erfolg-text .4s ease-out .6s forwards;
}

@keyframes bc-erfolg-text {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Wer Bewegung abgestellt hat, bekommt dieselbe Aussage ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .bc-erfolg,
  .bc-erfolg__rahmen,
  .bc-erfolg__haken,
  .bc-erfolg__text {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}