/* ==========================================================================
   SBB Nord – Sektions-Bauformen (§ 3 des Designsystems)
   Stand: 29. Juli 2026

   Ergänzt sbb-bausteine.css. Beide zusammen einbinden – die Farbtoken
   (--sbb-mag usw.) kommen aus sbb-bausteine.css.

     9   Zäsur-Band              (Teil 2 · 03)
     10  Ausbruch 5:7            (Teil 2 · 04)
     11  Bento                   (Teil 2 · 07)
     12  Versetzte Karten        (Teil 2 · 08)
     13  Zeilenliste             (Teil 2 · 09)
     14  Treppe als Weg          (Teil 1 · 02)
     15  Angebot-Detailseite     (Teil 3)

   Alle Bauformen brauchen einen Container mit Innenabstand:
   <div class="sbb-inner"> … </div>
   ========================================================================== */


.sbb-inner{
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Vertikaler Rhythmus – auf jede Sektion */
.sbb-sektion{
  padding-block: clamp(52px, 6vw, 80px);
}


/* == 9 · Zäsur-Band (Teil 2 · 03) =========================================
   Kurzes dunkles Band zwischen zwei normalen Sektionen. Kein Inhalt, nur
   eine Aussage. Höchstens einmal pro Seite, sonst nutzt es sich ab.
   ------------------------------------------------------------------------ */

.sbb-zas-band{
  background: var(--sbb-ink, #201C22);
  color: #F5EDEF;
  padding-block: 56px;
}

.sbb-zas-gross{
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.06;
  letter-spacing: -.03em;
  max-width: 24ch;
  margin: 0;
  color: #fff;
}

/* Neon-Markierung im Fließtext – bricht sauber über Zeilen um */
.sbb-mark{
  background: var(--sbb-neon, #F9FF4C);
  color: var(--sbb-ink, #201C22);
  padding: 0 .12em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.sbb-zas-sub{
  margin: 16px 0 0;
  font-size: 16px;
  max-width: 38ch;
  color: #CDBDC4;
}


/* == 10 · Ungleich geteilt, mit Ausbruch (Teil 2 · 04) ====================
   5:7 statt 6:6. Das Bild läuft rechts aus dem Container bis an den
   Bildschirmrand. Die Sektion braucht dafür overflow:hidden.
   ------------------------------------------------------------------------ */

.sbb-sektion:has(.sbb-asym){ overflow: hidden }

.sbb-asym{
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: center;
}

.sbb-asym-bild{
  aspect-ratio: 4 / 3;
  border-radius: 11px;
  width: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 800px){
  .sbb-asym{
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
  }
  /* Der Ausbruch: bis an den rechten Bildschirmrand */
  .sbb-asym-bild{
    margin-right: calc(50% - 50vw);
    border-radius: 11px 0 0 11px;
  }
}

/* Spiegelverkehrt – Bild links */
@media (min-width: 800px){
  .sbb-asym--links{ grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) }
  .sbb-asym--links .sbb-asym-bild{
    order: -1;
    margin-right: 0;
    margin-left: calc(50% - 50vw);
    border-radius: 0 11px 11px 0;
  }
}


/* == 11 · Bento – eine große, zwei kleine (Teil 2 · 07) ===================
   Macht eine Rangfolge sichtbar, statt drei Gleiche nebeneinanderzustellen.
   ------------------------------------------------------------------------ */

.sbb-bento{
  display: grid;
  gap: 13px;
  grid-template-columns: 1fr;
}

.sbb-bc{
  background: var(--sbb-card, #fff);
  border: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sbb-ink, #201C22);
  transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}

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

.sbb-bc-bild{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 12px;
}

.sbb-bc-bild--flach{ aspect-ratio: 16 / 6 }

.sbb-bc-h{
  display: block;
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  margin: 11px 0 4px;
}

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

/* Fußzeile klebt unten, egal wie lang der Text ist */
.sbb-bc-mt{
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--sbb-ink-3, #6F626A);
}

.sbb-bc--hero .sbb-bc-h{ font-size: 21px; margin-top: 14px }
.sbb-bc--hero .sbb-bc-p{ font-size: 14.5px }

@media (min-width: 740px){
  .sbb-bento{ grid-template-columns: 1.33fr 1fr }
  .sbb-bc--hero{ grid-row: span 2 }
}


/* == 12 · Drei Karten, leicht versetzt (Teil 2 · 08) ======================
   Zurückgenommene Fassung: 16 und 32 px statt 30 und 60.
   ------------------------------------------------------------------------ */

.sbb-stagger{
  display: grid;
  gap: 15px;
  grid-template-columns: 1fr;
}

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

.sbb-sc-bild{
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 12px;
}

@media (min-width: 760px){
  .sbb-stagger{
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .sbb-stagger > *:nth-child(2){ margin-top: 16px }
  .sbb-stagger > *:nth-child(3){ margin-top: 32px }
}


/* == 13 · Zeilenliste ab sechs Einträgen (Teil 2 · 09) ====================
   Sechzehn Standorte als Karten sind eine Galerie, durch die niemand
   scrollt. Als Zeilen sind sie in Sekunden zu überfliegen.

   Als <ul> mit <li> bauen – die Listen-Semantik ist der halbe Nutzen.
   ------------------------------------------------------------------------ */

.sbb-rows{
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
}

.sbb-row{
  display: grid;
  gap: 4px 22px;
  grid-template-columns: 1fr;
  padding: 15px 11px;
  border-top: 1px solid var(--sbb-line, #E3D6DA);
  text-decoration: none;
  color: var(--sbb-ink, #201C22);
  border-radius: 8px;
  transition: background .18s ease;
}

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

.sbb-row:hover,
.sbb-row:focus-visible{ background: rgba(201,26,72,.05) }

.sbb-nm{
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Das Kästchen erscheint erst, wenn die Zeile dran ist */
.sbb-row-punkt{
  width: 6px;
  height: 6px;
  border-radius: 22%;
  background: var(--sbb-mag, #C91A48);
  display: block;
  flex: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.sbb-row:hover .sbb-row-punkt,
.sbb-row:focus-visible .sbb-row-punkt{ opacity: 1 }

.sbb-de{ font-size: 14px; color: var(--sbb-ink-2, #4A4049) }

.sbb-go{
  font-size: 13px;
  color: var(--sbb-mag, #C91A48);
  font-weight: 700;
  white-space: nowrap;
}

@media (min-width: 680px){
  .sbb-row{
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.3fr) auto;
    align-items: center;
  }
}


/* == 14 · Die Treppe als Weg (Teil 1 · 02) ================================
   Vier ansteigende Stufen. Als <ol> bauen – die Reihenfolge ist die
   Information.
   ------------------------------------------------------------------------ */

.sbb-treppe{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 13px;
  grid-template-columns: 1fr;
}

.sbb-stufe{
  background: var(--sbb-card, #fff);
  border: 1px solid var(--sbb-line, #E3D6DA);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
}

/* Der Balken wächst von Stufe zu Stufe */
.sbb-stufe-bar{
  display: block;
  width: 26px;
  border-radius: 3px;
  background: var(--sbb-mag, #C91A48);
  margin-bottom: 14px;
}

.sbb-stufe:nth-child(1) .sbb-stufe-bar{ height: 8px }
.sbb-stufe:nth-child(2) .sbb-stufe-bar{ height: 14px }
.sbb-stufe:nth-child(3) .sbb-stufe-bar{ height: 20px }

/* Die letzte Stufe ist das Ziel – deshalb Neon */
.sbb-stufe:nth-child(4) .sbb-stufe-bar{
  height: 26px;
  background: var(--sbb-neon, #F9FF4C);
  box-shadow: inset 0 0 0 2px var(--sbb-ink, #201C22);
}

.sbb-stufe-nr{
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sbb-ink-3, #6F626A);
  margin-bottom: 5px;
}

.sbb-stufe-h{
  display: block;
  font-family: 'Epilogue', sans-serif;
  font-weight: 800;
  font-size: 19px;
  margin-bottom: 6px;
}

/* display:block ist Pflicht, nicht Kosmetik: im Muster steht hier ein <span>,
   weil die Stufe auch als Link gebaut werden kann. Ohne diese Zeile rutscht
   der Text in die Zeile der Überschrift. */
.sbb-stufe-p{
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sbb-ink-2, #4A4049);
}

@media (min-width: 820px){
  .sbb-treppe{
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
  }
  /* Der Versatz macht die Treppe – unten bündig, oben steigend */
  .sbb-stufe:nth-child(1){ margin-bottom: 36px }
  .sbb-stufe:nth-child(2){ margin-bottom: 24px }
  .sbb-stufe:nth-child(3){ margin-bottom: 12px }
}


/* == 15 · Angebot-Detailseite (Teil 3) ====================================
   Eine sticky Infobox als EINZIGE Datenquelle. Ersetzt die drei
   widersprüchlichen Eckdaten-Blöcke der Live-Seite.
   ------------------------------------------------------------------------ */

.sbb-sprung{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--sbb-line, #E3D6DA);
  padding-bottom: 12px;
  margin-bottom: 26px;
}

.sbb-sprung a{
  font-size: 14px;
  font-weight: 700;
  color: var(--sbb-ink-2, #4A4049);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: 7px;
  transition: background .18s ease, color .18s ease;
}

.sbb-sprung a:hover,
.sbb-sprung a:focus-visible{
  background: var(--sbb-rosa, #FBE8ED);
  color: var(--sbb-mag-hover, #B0163F);
}

/* Aktueller Abschnitt – per IntersectionObserver setzen */
.sbb-sprung a[aria-current="true"]{
  background: var(--sbb-rosa, #FBE8ED);
  color: var(--sbb-mag-hover, #B0163F);
}

.sbb-detail{
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  align-items: start;
}

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

.sbb-info-liste{
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
}

.sbb-info-liste > div{
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--sbb-line, #E3D6DA);
}

.sbb-info-liste > div:last-child{ border-bottom: 1px solid var(--sbb-line, #E3D6DA) }

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

.sbb-info-liste dd{
  font-size: 15px;
  color: var(--sbb-ink, #201C22);
  font-weight: 600;
  margin: 0;
}

@media (min-width: 860px){
  .sbb-detail{
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 40px;
  }
  /* top muss die Höhe des klebenden Headers berücksichtigen */
  .sbb-infobox{ position: sticky; top: 100px }
}


/* == Bewegung reduzieren =================================================== */

@media (prefers-reduced-motion: reduce){
  .sbb-bc,
  .sbb-row,
  .sbb-row-punkt,
  .sbb-sprung a{
    transition-duration: .001ms !important;
  }
}