/* ==========================================================================
   SBB Nord – Bausteine aus dem Designsystem
   Stand: 29. Juli 2026

   Einbindung in Oxygen:
   Oxygen → Manage → Stylesheets → „Add Stylesheet" → Inhalt hier hineinkopieren.
   Oder als Datei ins Child-Theme und per wp_enqueue_style laden.

   Enthalten:
     1   Farb-Token
     1b  Kategorie-Chips        (Teil 1 · 04)
     1c  Neon als gute Nachricht (Teil 1 · 05)
     2   Pixel-Kante            (Teil 1 · 06)
     3  Karten-Hover, dezent   (Teil 1 · 03)
     4  Button mit Pfeil-Spur  (Teil 1 · 08)
     5  Wegweiser              (Teil 4 · 03)
     6  Erklär-Chips           (Teil 4 · 04)
     7  Bild-Reveal            (Teil 1 · 07)
     8  Karten-Takt            (Farbe nach Position)
     9  Bewegung reduzieren
   ========================================================================== */


/* == 1 · Farb-Token ======================================================= */

:root{
  --sbb-mag:        #C91A48;   /* Primär                       */
  --sbb-mag-hover:  #B0163F;   /* Button-Hover                 */
  --sbb-mag-deep:   #A5123C;   /* Pixel-Kante, dunkle Flächen  */
  --sbb-neon:       #F9FF4C;   /* nur gute Nachrichten         */
  --sbb-ink:        #201C22;
  --sbb-ink-2:      #4A4049;
  --sbb-ink-3:      #6F626A;
  --sbb-line:       #E3D6DA;
  --sbb-card:       #FFFFFF;
  --sbb-rosa:       #FBE8ED;   /* Hover-Fond hell              */

  /* Zahn-Maske als Data-URI. Wird von .sbb-teeth direkt gesetzt; hier nur,
     falls du sie an einer anderen Stelle brauchst. */
  --sbb-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0' y='0' width='24' height='12' fill='%23000'/%3E%3Crect x='0' y='13' width='10' height='10' rx='2.2' fill='%23000'/%3E%3C/svg%3E");
}


/* == 1b · Kategorie-Chips (Teil 1 · 04) ===================================
   Fünf Töne aus derselben Familie statt fünfmal Magenta. Der Name steht
   immer im Chip – die Farbe allein trägt nie die Information.
   ------------------------------------------------------------------------ */

.sbb-chip-row{
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbb-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 12px 6px 9px;
  border-radius: 999px;
}

.sbb-chip i{
  width: 6px;
  height: 6px;
  border-radius: 22%;
  background: currentColor;
  flex: none;
}

.sbb-c-um{ background: #FBE8ED; color: #B0163F }   /* Umschulung    */
.sbb-c-sp{ background: #F7E8F3; color: #8E1C6B }   /* Sprache       */
.sbb-c-co{ background: #FCEAE3; color: #AE3A1A }   /* Coaching      */
.sbb-c-we{ background: #F3E7EC; color: #6B2140 }   /* Weiterbildung */
.sbb-c-in{ background: #FAF0DF; color: #8A5100 }   /* Integration   */

/* Eyebrow über einer Überschrift */
.sbb-eyebrow-k{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sbb-mag, #C91A48);
  margin: 0 0 10px;
}

.sbb-eyebrow-k i{
  width: 6px;
  height: 6px;
  border-radius: 22%;
  background: currentColor;
  flex: none;
}


/* == 1c · Neon als gute Nachricht (Teil 1 · 05) ===========================
   Gelb markiert nur, was für die Person gerade gut ist. Sonst nirgends.
   Anthrazit auf Gelb ergibt 15:1 – der beste Kontrast im ganzen System.
   ------------------------------------------------------------------------ */

.badge-neon{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--sbb-neon, #F9FF4C);
  color: var(--sbb-ink, #201C22);
  font-size: 12.5px;
  font-weight: 800;
  padding: 6px 13px;
  border-radius: 6px;
  margin: 0;
}

.badge-neon::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 22%;
  background: var(--sbb-ink, #201C22);
  flex: none;
}

/* Wenn es nichts Gutes zu melden gibt: grau, nicht gelb */
.badge-grau{
  display: inline-flex;
  align-items: center;
  background: var(--sbb-line, #E3D6DA);
  color: var(--sbb-ink-2, #4A4049);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 6px;
  margin: 0;
}

.sbb-neon-grid{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.sbb-neon-karte{
  background: var(--sbb-card, #fff);
  border: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 12px;
  padding: 18px;
}

.sbb-neon-karte h4{
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 17px;
  margin: 12px 0 5px;
}

.sbb-neon-karte p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--sbb-ink-2, #4A4049);
  margin: 0;
}


/* == 2 · Pixel-Kante (Teil 1 · 06) ========================================
   Ersetzt den abgerundeten Sektionsabschluss.

   WICHTIG: Die Leiste steht DIREKT NACH der farbigen Sektion, nicht darin.
   Innerhalb wäre sie unsichtbar – Magenta auf Magenta. Sie muss auf dem
   Hintergrund der nächsten Sektion liegen und deren Farbe zwischen den
   Zähnen durchscheinen lassen.

   <section style="background:#A5123C"> … </section>
   <div class="sbb-teeth" aria-hidden="true"></div>

   --teeth-color ist die Farbe der Sektion DARÜBER:
   <div class="sbb-teeth" style="--teeth-color:#8E1C6B" aria-hidden="true"></div>

   Nach oben, vor einer farbigen Sektion:  class="sbb-teeth sbb-teeth--top"
   ------------------------------------------------------------------------ */

.sbb-teeth{
  height: 24px;
  background-color: var(--teeth-color, var(--sbb-mag-deep, #A5123C));
  /* Die Zahnmaske steht hier direkt und nicht als Variable: Oxygen
     schluckt beim Einfuegen manchmal den :root-Block. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0' y='0' width='24' height='12' fill='%23000'/%3E%3Crect x='0' y='13' width='10' height='10' rx='2.2' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0' y='0' width='24' height='12' fill='%23000'/%3E%3Crect x='0' y='13' width='10' height='10' rx='2.2' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 24px 24px;
          mask-size: 24px 24px;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}

/* Zähne nach oben – für den Sektionsanfang */
.sbb-teeth--top{
  transform: scaleY(-1);
}

/* Nur nötig, wenn die Leiste doch einmal innerhalb eines Containers mit
   Innenabstand sitzt und trotzdem bis an den Bildschirmrand laufen soll. */
.sbb-teeth--full{
  margin-left: calc(-1 * var(--sbb-pad, 24px));
  margin-right: calc(-1 * var(--sbb-pad, 24px));
}


/* == 3 · Karten reagieren auf den Zeiger (Teil 1 · 03) ====================
   Zurückgenommene Fassung: 2 px Karte, 3 px am vordersten Kästchen.

   Wichtig: die Karte selbst muss <a> sein, damit :focus-visible greift.
   ------------------------------------------------------------------------ */

.sbb-karte{
  position: relative;
  display: block;
  background: var(--sbb-card, #FFFFFF);
  border: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 12px;
  padding: 19px;
  text-decoration: none;
  color: var(--sbb-ink, #201C22);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}

.sbb-karte:hover,
.sbb-karte:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140,15,49,.09);
}

/* Die vier Kästchen oben rechts */
.sbb-karte .sbb-corner{
  position: absolute;
  top: 13px;
  right: 13px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.sbb-karte .sbb-corner i{
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 22%;
  background: var(--sbb-mag, #C91A48);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}

.sbb-karte .sbb-corner i:nth-child(2){ opacity: .7  }
.sbb-karte .sbb-corner i:nth-child(3){ opacity: .45 }
.sbb-karte .sbb-corner i:nth-child(4){ opacity: .22 }

/* Nur das vorderste Kästchen bewegt sich */
.sbb-karte:hover        .sbb-corner i:nth-child(4),
.sbb-karte:focus-visible .sbb-corner i:nth-child(4){
  transform: translateY(-3px);
  opacity: .55;
}

/* Platz für die Kästchen freihalten */
.sbb-karte h3,
.sbb-karte h4{ padding-right: 42px }


/* == 4 · Der Pfeil hinterlässt eine Spur (Teil 1 · 08) ====================
   Reagiert auf Maus UND Tastaturfokus.

   <a class="sbb-btn" href="…">Kurs finden
     <span class="sbb-trail" aria-hidden="true"><i></i><i></i></span>
     <span class="sbb-arw" aria-hidden="true">&rarr;</span>
   </a>
   ------------------------------------------------------------------------ */

.sbb-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sbb-mag, #C91A48);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease;
}

/* :focus-visible gehoert ueberall dort daneben, wo :hover steht - sonst laeuft
   beim Durchtabben nur der halbe Effekt: die Pfeil-Spur ruecken die Regeln
   weiter unten schon, die Flaeche bliebe aber unveraendert. */
.sbb-btn:hover,
.sbb-btn:focus-visible{ background: var(--sbb-mag-hover, #B0163F) }

.sbb-trail{
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sbb-trail i{
  width: 5px;
  height: 5px;
  border-radius: 22%;
  background: currentColor;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .26s ease, transform .26s cubic-bezier(.2,.7,.3,1);
}

/* Versetzt einblenden – dadurch wirkt es wie eine Spur, nicht wie ein Block */
.sbb-btn:hover         .sbb-trail i:nth-child(1),
.sbb-btn:focus-visible .sbb-trail i:nth-child(1){
  opacity: .35;
  transform: translateX(0);
  transition-delay: .02s;
}

.sbb-btn:hover         .sbb-trail i:nth-child(2),
.sbb-btn:focus-visible .sbb-trail i:nth-child(2){
  opacity: .65;
  transform: translateX(0);
  transition-delay: .06s;
}

.sbb-arw{ transition: transform .26s cubic-bezier(.2,.7,.3,1) }

.sbb-btn:hover         .sbb-arw,
.sbb-btn:focus-visible .sbb-arw{ transform: translateX(3px) }

/* Umriss-Variante */
.sbb-btn--ghost{
  background: transparent;
  color: var(--sbb-mag, #C91A48);
  box-shadow: inset 0 0 0 2px var(--sbb-mag, #C91A48);
}

.sbb-btn--ghost:hover,
.sbb-btn--ghost:focus-visible{ background: var(--sbb-rosa, #FBE8ED) }


/* == 5 · Wegweiser (Teil 4 · 03) ==========================================
   Native Radiobuttons: Pfeiltasten-Navigation und die Ansage „1 von 4"
   kommen vom Browser. Alle vier Antworten stehen im HTML – nichts wird
   nachgeladen, nichts steckt in data-Attributen.
   ------------------------------------------------------------------------ */

.sbb-guide{
  background: var(--sbb-card, #FFFFFF);
  border: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 12px;
  padding: 21px;
}

.sbb-guide legend{
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  margin-bottom: 13px;
  color: var(--sbb-ink, #201C22);
  padding: 0;
}

.sbb-guide fieldset{ border: 0; padding: 0; margin: 0 }

.sbb-opts{
  display: grid;
  gap: 9px;
  grid-template-columns: 1fr;
}

@media (min-width: 580px){
  .sbb-opts{ grid-template-columns: 1fr 1fr }
}

/* Das echte Radio bleibt bedienbar, wird aber vom Label verdeckt */
.sbb-opts input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.sbb-opts label{
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1.5px solid var(--sbb-line, #E3D6DA);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 15px;
  color: var(--sbb-ink, #201C22);
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.sbb-opts label::before{
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 22%;
  background: var(--sbb-line, #E3D6DA);
  flex: none;
  transition: background .18s ease;
}

.sbb-opts label:hover{
  border-color: var(--sbb-mag, #C91A48);
  background: var(--sbb-rosa, #FBE8ED);
}

.sbb-opts label:hover::before{ background: var(--sbb-mag, #C91A48) }

.sbb-opts input:checked + label{
  border-color: var(--sbb-mag, #C91A48);
  background: var(--sbb-rosa, #FBE8ED);
  font-weight: 700;
}

.sbb-opts input:checked + label::before{ background: var(--sbb-mag, #C91A48) }

/* Tastaturfokus muss sichtbar bleiben, obwohl das Radio unsichtbar ist */
.sbb-opts input:focus-visible + label{
  outline: 3px solid var(--sbb-mag, #C91A48);
  outline-offset: 2px;
}

.sbb-guide-out{
  margin-top: 15px;
  padding: 16px 18px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed var(--sbb-line, #E3D6DA);
}

.sbb-guide-out b,
.sbb-guide-out .sbb-out-h{
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Epilogue', sans-serif;
  font-size: 16.5px;
  margin-bottom: 5px;
  color: var(--sbb-ink, #201C22);
}

.sbb-guide-out b::before,
.sbb-guide-out .sbb-out-h::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 22%;
  background: var(--sbb-mag, #C91A48);
  flex: none;
}

.sbb-guide-out p,
.sbb-guide-out .sbb-out-p{
  font-size: 14.5px;
  color: var(--sbb-ink-2, #4A4049);
}

.sbb-guide-out .sbb-btn{ margin-top: 12px }

/* Nur die gewählte Antwort zeigen – ohne JavaScript, über :has() */
.sbb-guide-out > div{ display: none }

.sbb-guide:has(#wg-1:checked) [data-for="wg-1"],
.sbb-guide:has(#wg-2:checked) [data-for="wg-2"],
.sbb-guide:has(#wg-3:checked) [data-for="wg-3"],
.sbb-guide:has(#wg-4:checked) [data-for="wg-4"]{ display: block }

/* Browser ohne :has(): alle vier Antworten untereinander statt keine */
@supports not selector(:has(*)){
  .sbb-guide-out > div{ display: block }
  .sbb-guide-out > div + div{
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--sbb-line, #E3D6DA);
  }
}


/* == 6 · Erklär-Chips (Teil 4 · 04) =======================================
   Disclosure-Muster, kein Tooltip: <button> + aria-expanded + aria-controls.
   Bedienbar per Klick, Tastatur und Touch. Escape schließt.
   ------------------------------------------------------------------------ */

.sbb-gloss{
  position: relative;
  display: inline-block;
}

.sbb-gloss > button{
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--sbb-mag, #C91A48);
  font-weight: 700;
  border-bottom: 2px dotted currentColor;
}

.sbb-gloss .sbb-pop{
  position: absolute;
  left: 0;
  top: calc(100% + 9px);
  z-index: 5;
  width: min(320px, 74vw);
  background: var(--sbb-ink, #201C22);
  color: #F5EDEF;
  border-radius: 11px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 10px 30px rgba(32,28,34,.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.sbb-gloss.is-open .sbb-pop{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.sbb-gloss .sbb-pop b{
  display: block;
  font-family: 'Epilogue', sans-serif;
  font-size: 15px;
  margin-bottom: 4px;
  color: #fff;
}

.sbb-gloss .sbb-pop a{
  color: var(--sbb-neon, #F9FF4C);
  font-weight: 700;
}

/* Zipfel */
.sbb-gloss .sbb-pop::before{
  content: "";
  position: absolute;
  top: -5px;
  left: 19px;
  width: 11px;
  height: 11px;
  background: var(--sbb-ink, #201C22);
  transform: rotate(45deg);
  border-radius: 2px;
}

/* Auf dem Handy über die volle Textbreite statt am Wort */
@media (max-width: 560px){
  .sbb-gloss{ position: static }
  .sbb-gloss .sbb-pop{ left: 0; right: 0; width: auto }
  .sbb-gloss .sbb-pop::before{ display: none }
}


/* == 7 · Bild-Reveal aus Kacheln (Teil 1 · 07) ============================
   Das Bild ist im HTML immer da und sichtbar. Die Kacheln werden per
   JavaScript DARÜBER gelegt und blenden sich weg. Fällt das JavaScript aus,
   sieht man einfach das Bild – nie eine leere Fläche.

   Sparsam einsetzen: ein Bild pro Seite, am besten das Hero-Bild.
   ------------------------------------------------------------------------ */

.sbb-reveal{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.sbb-reveal img{
  display: block;
  width: 100%;
  height: auto;
}

.sbb-reveal .sbb-tiles{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(7, 1fr);
  pointer-events: none;
}

/* Die Kachelfarbe muss der Sektionshintergrund sein, sonst blitzt es */
.sbb-reveal .sbb-tiles b{
  display: block;
  background: var(--sbb-tile-color, #FBF7F8);
  transition: opacity .42s ease;
}

.sbb-reveal.is-done .sbb-tiles b{ opacity: 0 }


/* == 7b · Starttermine (Teil 4 · 05) ======================================
   „Freier Einstieg“ beantwortet die Frage nicht, die jemand wirklich hat:
   Wann kann ich anfangen, und ist da noch Platz?

   Als <ul> mit <li> bauen. Das Datum bekommt ein <time datetime="…">,
   damit es auch maschinenlesbar ist.
   ------------------------------------------------------------------------ */

.sbb-dates{
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbb-d{
  display: grid;
  gap: 5px 20px;
  grid-template-columns: 1fr;
  padding: 14px 11px;
  border-top: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 8px;
}

.sbb-dates li:last-child .sbb-d,
.sbb-d:last-child{ border-bottom: 1px solid var(--sbb-line, #E3D6DA) }

.sbb-d:hover{ background: rgba(201,26,72,.045) }

.sbb-when{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.sbb-when b{
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.03em;
  color: var(--sbb-ink, #201C22);
  font-variant-numeric: tabular-nums;
}

.sbb-when span{
  font-size: 12.5px;
  color: var(--sbb-ink-3, #6F626A);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sbb-what{
  font-size: 14.5px;
  color: var(--sbb-ink-2, #4A4049);
  margin: 0;
}

.sbb-what b{ color: var(--sbb-ink, #201C22); font-weight: 700 }

/* Freie Plätze sind eine gute Nachricht - also Neon */
.sbb-free{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--sbb-neon, #F9FF4C);
  color: var(--sbb-ink, #201C22);
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
  margin: 0;
  justify-self: start;
}

.sbb-free::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 22%;
  background: var(--sbb-ink, #201C22);
  flex: none;
}

/* Warteliste ist keine - also grau */
.sbb-full{
  font-size: 12px;
  font-weight: 700;
  color: var(--sbb-ink-3, #6F626A);
  white-space: nowrap;
  margin: 0;
  justify-self: start;
}

@media (min-width: 620px){
  .sbb-d{
    grid-template-columns: 100px minmax(0, 1fr) auto;
    align-items: center;
  }
}


/* == 7c · Kartenraster ====================================================
   Standardraster für Kurskarten.
   ------------------------------------------------------------------------ */

.sbb-karten-grid{
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.sbb-karte-h{
  display: block;
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 17.5px;
  margin: 13px 0 5px;
  padding-right: 42px;
}

.sbb-karte-p{
  display: block;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sbb-ink-2, #4A4049);
}

.sbb-karte-f{
  display: block;
  margin-top: 13px;
  font-size: 13px;
  color: var(--sbb-ink-3, #6F626A);
}

.sbb-btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
}

/* Button über die volle Breite - z. B. in der Infobox */
.sbb-btn--voll{
  width: 100%;
  justify-content: center;
}


/* == 8 · Karten-Takt: Farbe nach Position =================================
   Für Repeater, in denen die Farbe NICHTS bedeutet, sondern nur Rhythmus
   erzeugt – Neuigkeiten auf der Startseite zum Beispiel.

   Unterschied zu den Kategorie-Chips: dort steht Farbe für einen Bereich und
   muss lesbar sein. Hier wechselt sie nach Position. Deshalb bewusst KEINE
   der fünf Kategorie-Töne, sonst hieße derselbe Rosa-Ton an einer Stelle
   „Umschulung" und an der anderen „dritter Beitrag".

   Drei Stufen im Wechsel: hell – getönt – dunkel. Bei drei Beiträgen bekommt
   also jeder eine eigene, bei sechs wiederholt sich der Takt.

   Alle Paare geprüft (05.08.2026):
     hell     Text 16,79 : 1 · Meta 5,78 : 1 · Link 5,64 : 1
     getönt   Text 14,29 : 1 · Meta 4,92 : 1 · Link 6,49 : 1
     dunkel   Text 16,79 : 1 · Meta 10,89 : 1 · Link 14,29 : 1

   EINBAU IN OXYGEN – zwei Klassen:
     .sbb-takt3      auf die Dynamic List (oder den Wrapper darum)
     .sbb-takt-karte auf das Element, das den Hintergrund trägt
                     (auf der Startseite: single-card-news)

   Anderes Farbtrio gewünscht? Nur die drei Zeilen --takt-fond tauschen.
   ------------------------------------------------------------------------ */

/* Stufe 1 – hell. Die Linie sorgt dafür, dass die Karte auch auf weißem
   Sektionsgrund noch als Karte zu erkennen ist. */
.sbb-takt3 > *:nth-child(3n + 1),
.sbb-takt3 .oxy-dynamic-list > *:nth-child(3n + 1){
  --takt-fond:   #FFFFFF;
  --takt-text:   #201C22;
  --takt-meta:   #6F626A;
  --takt-akzent: #C91A48;
  --takt-linie:  #E3D6DA;
}

/* Stufe 2 – getönt */
.sbb-takt3 > *:nth-child(3n + 2),
.sbb-takt3 .oxy-dynamic-list > *:nth-child(3n + 2){
  --takt-fond:   #FBE8ED;
  --takt-text:   #201C22;
  --takt-meta:   #6F626A;
  --takt-akzent: #A5123C;
  --takt-linie:  #F2D8E0;
}

/* Stufe 3 – dunkel */
.sbb-takt3 > *:nth-child(3n + 3),
.sbb-takt3 .oxy-dynamic-list > *:nth-child(3n + 3){
  --takt-fond:   #201C22;
  --takt-text:   #FFFFFF;
  --takt-meta:   #D9CDD2;
  --takt-akzent: #FBE8ED;
  --takt-linie:  #4A4049;
}

/* Die Karte holt sich, was oben gesetzt wurde. Die Ersatzwerte greifen, wenn
   jemand die Klasse außerhalb eines .sbb-takt3 benutzt – dann sieht die Karte
   aus wie Stufe 1 statt gar nicht. */
.sbb-takt-karte{
  background: var(--takt-fond, #FFFFFF);
  color: var(--takt-text, #201C22);
  border: 1px solid var(--takt-linie, #E3D6DA);
}

/* Oxygen setzt Textfarben an den einzelnen Elementen. Ohne diese Zeile bleibt
   die Überschrift auf der dunklen Karte anthrazit – also unsichtbar.
   Greift nur, wenn die Farbe im Builder über eine KLASSE gesetzt wurde. Steht
   sie am Element selbst, gewinnt Oxygens ID-Regel: dann dort auf „inherit"
   stellen. */
.sbb-takt-karte .ct-headline,
.sbb-takt-karte .ct-text-block,
.sbb-takt-karte .ct-span,
.sbb-takt-karte .ct-link,
.sbb-takt-karte p{
  color: inherit;
}

/* Datum, Rubrik, Lesezeit – alles, was leiser sein soll als der Titel */
.sbb-takt-karte .sbb-takt-meta{
  color: var(--takt-meta, #6F626A);
}

/* Pfeil, Link, Trennlinie */
.sbb-takt-karte .sbb-takt-akzent{
  color: var(--takt-akzent, #C91A48);
}

/* Kategorie-Chip auf der getönten Karte: Sein Fond ist derselbe Rosa-Ton wie
   die Karte, er würde also verschwinden. Weiß darunter, die Schriftfarbe des
   Bereichs bleibt – die trägt ja die Information (Kontrast 6,14 bis 10,96 : 1).
   Auf der hellen und der dunklen Karte bleibt der Chip unangetastet. */
.sbb-takt3 > *:nth-child(3n + 2) .sbb-chip,
.sbb-takt3 .oxy-dynamic-list > *:nth-child(3n + 2) .sbb-chip{
  background: #FFFFFF;
}


/* == 9 · Bewegung reduzieren ==============================================
   Systemeinstellung „Bewegung reduzieren" respektieren – WCAG 2.3.3.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce){
  .sbb-karte,
  .sbb-karte .sbb-corner i,
  .sbb-trail i,
  .sbb-arw,
  .sbb-gloss .sbb-pop{
    transition-duration: .001ms !important;
  }

  /* Kacheln gar nicht erst zeigen */
  .sbb-reveal .sbb-tiles b{
    opacity: 0;
    transition: none;
  }
}


/* == 10 · Schrift-Fallback für Überschriften ===============================
   Oxygens globale Regel lautet nur  h1–h6 { font-family: 'Epilogue' }  –
   ohne Ersatzschrift. Kommt Epilogue nicht an (Cache, Firmen-Proxy,
   Erweiterung, die Webfonts blockt), fällt Chrome auf Serif zurück und die
   Überschriften stehen in Times New Roman.
   html :is(…) hat Spezifität (0,0,2) und gewinnt damit gegen Oxygens (0,0,1),
   verliert aber weiter gegen jede Klasse und jede Element-ID – Einzel-
   einstellungen im Builder bleiben also unangetastet.
   ------------------------------------------------------------------------ */

html :is(h1, h2, h3, h4, h5, h6){
  font-family: "Epilogue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}