/*
 * SUBWAY V2 · Search Experience – fünf Entwürfe (Stefan 09.10.2026), inc/suche-lab.php.
 * Gemeinsam: .sl (Seite), .sl-form/.sl-live (Combobox + Vorschläge), .sl-filter, .sl-nichts, .sl-fehler, .sl-bar.
 * Varianten: .sl1 Editorial · .sl2 Discover · .sl3 Terminal · .sl4 Story Finder · .sl5 Frag SUBWAY.
 * Feste Töne: Pink #B70074, Gelb 22 % (ruhige Flächen), Tinte; Abstände aus der Skala; Fokus sichtbar; Touch-Ziele ≥ 44 px.
 */
.sl { --sl-pink: #B70074; --sl-gelb: color-mix(in srgb, #F5C83C 22%, var(--sw-paper)); padding: 0 var(--sw-pad) var(--sw-sec); color: var(--sw-ink); font-family: var(--sw-font-ui); }
:where(.sl) :is(p, h1, h2, h3, ul, ol, figure) { margin: 0; }
:where(.sl) :is(ul, ol) { list-style: none; padding: 0; }
.sl a:not(.sw-btn):not(.sw-chip) { color: inherit; text-decoration: none; }
.sl a:not(.sw-btn):not(.sw-chip):hover { color: inherit; }
.sl img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sl mark { background: color-mix(in srgb, #F5C83C 70%, transparent); color: inherit; padding: 0 .05em; }

/* Brotkrumen wie alle Seiten */
.sl-bc { padding-top: 64px; font-family: var(--sw-font-ui); font-stretch: 100%; font-weight: 700; font-size: var(--sw-fs-label); letter-spacing: .2em; line-height: 1; text-transform: uppercase; color: var(--sw-ink); }
.sl-bc p { margin: 0; }
.sl-bc a { color: inherit; text-decoration: none; padding-bottom: 3px; border-bottom: 3px solid transparent; }
.sl-bc a:hover { border-bottom-color: var(--sw-word); }
.sl-bc .separator { margin-inline: 8px; color: var(--sw-text-2); }
.sl-bc .last { padding-bottom: 3px; border-bottom: 3px solid var(--sw-word); }
.sl-bc--hell, .sl-bc--hell a, .sl-bc--hell .separator { color: var(--sw-paper) !important; }
.sl-dach { margin-top: 40px !important; font-weight: 700; font-size: var(--sw-fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--sl-pink); }
.sl-label-r { display: block; margin-bottom: 8px; font-weight: 700; font-size: var(--sw-fs-label); line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--sl-pink); }
.sl-meta { margin-top: 8px !important; font-weight: 800; font-stretch: 75%; font-size: var(--sw-fs-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--sw-text-2); }
.is-vergangen { opacity: .7; }

/* ---------- Formular + Live-Vorschläge (gemeinsam) ---------- */
.sl-form { position: relative; }
.sl-feld { position: relative; display: flex; align-items: stretch; gap: 0; }
.sl-input { flex: 1 1 auto; min-width: 0; min-height: 56px; margin: 0; padding: 12px 16px; border: 1.5px solid var(--sw-ink); border-radius: 0; background: var(--sw-surface); color: var(--sw-ink); font: 600 20px/1.2 var(--sw-font-ui); -webkit-appearance: none; appearance: none; }
.sl-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sl-input::placeholder { color: color-mix(in srgb, var(--sw-ink) 45%, transparent); }
.sl-input:focus { outline: 3px solid var(--sw-focus); outline-offset: 2px; }
.sl-knopf { flex: none; min-height: 56px; border-radius: 0; }
.sl-live { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; border: 1.5px solid var(--sw-ink); background: var(--sw-surface); box-shadow: 6px 6px 0 var(--sw-ink); max-height: min(70vh, 520px); overflow-y: auto; }
.sl-live__opt a { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--sw-line-color); text-decoration: none; }
.sl-live__opt[aria-selected="true"] a, .sl-live__opt a:hover { background: var(--sl-gelb); box-shadow: inset 4px 0 0 var(--sl-pink); }
.sl-live__bild { flex: none; width: 56px; height: 56px; overflow: hidden; background: var(--sw-paper-2); }
.sl-live__txt { display: grid; gap: 4px; min-width: 0; }
.sl-live__label { font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--sl-pink); }
.sl-live__titel { font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.sl-live__info { font-size: 14px; line-height: 1.35; color: var(--sw-text-2); }
.sl-live__fuss { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0; }
.sl-live__msg { display: block; width: 100%; padding: 16px; font-size: 15px; line-height: 1.45; }
.sl-live__msg--laden::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 10px; vertical-align: -1px; border: 2px solid var(--sw-ink); border-right-color: transparent; border-radius: 50%; animation: sl-dreh .7s linear infinite; }
.sl-live__msg--fehler { color: var(--sw-danger); }
.sl-live kbd, .sl3-tasten kbd { display: inline-block; padding: 1px 6px; border: 1.5px solid currentColor; font: 800 12px/1.4 var(--sw-font-ui); }
button.sl-live__alle { width: 100%; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 0; background: var(--sw-ink); color: var(--sw-paper); text-align: left; font: 800 14px/1 var(--sw-font-ui); font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
button.sl-live__alle:hover, button.sl-live__alle:focus { background: var(--sl-pink); color: #FFFFFF; }
@keyframes sl-dreh { to { transform: rotate(360deg); } }

/* Filter */
.sl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 24px 0 32px; }
.sl-filter ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sl-filter a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--sw-ink); font-weight: 800; font-stretch: 75%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sl-filter a span { font-family: var(--sw-font-display); font-size: 18px; letter-spacing: 0; }
.sl-filter a[aria-current] { background: var(--sw-ink); color: var(--sw-paper) !important; }
.sl-filter a.is-leer { opacity: .5; }
.sl-filter a:hover:not([aria-current]) { background: var(--sl-gelb); }
.sl-filter .sl-filter__reset { border: 0; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.sl-zahl { margin-top: 48px !important; font-size: 18px; }
.sl-zahl strong { font-family: var(--sw-font-display); font-weight: 400; font-size: 32px; }
.sl-blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 48px; }
.sl-blaettern span { font-size: 15px; color: var(--sw-text-2); }

/* Keine Treffer / Fehler */
.sl-nichts, .sl-fehler { margin-top: 32px; padding: 32px; border: 1.5px solid var(--sw-ink); background: var(--sl-gelb); box-shadow: inset 6px 0 0 var(--sl-pink); }
.sl-nichts__h, .sl-fehler__h { font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-d-s); line-height: .95; }
.sl-nichts__t, .sl-fehler p:not(.sl-fehler__h) { max-width: 62ch; margin-top: 16px !important; font-size: 17px; line-height: 1.55; }
.sl-nichts .sw-btn { margin-top: 16px; }
.sl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px !important; }
.sl-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; background: var(--sw-ink); color: var(--sw-paper) !important; font-weight: 800; font-stretch: 75%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sl-chips a:hover { background: var(--sl-pink); }

/* Lab-Leiste */
.sl-bar { position: fixed; z-index: 65; left: 28px; bottom: 8px; display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--sw-ink); color: var(--sw-paper); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); font: 800 12px/1 var(--sw-font-ui); font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; }
.sl-bar__t { padding: 0 8px 0 6px; color: #F5C83C; }
.sl-bar a { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; color: var(--sw-paper); text-decoration: none; }
.sl-bar a:hover { background: rgba(243, 239, 232, .14); color: var(--sw-paper); }
.sl-bar a[aria-current] { background: var(--sw-paper); color: var(--sw-ink); }
html.sw-menu-open .sl-bar { display: none; }
@media (max-width: 767px) { .sl-bar { left: 8px; } .sl-bar__t { display: none; } .sl-bar a { min-width: 28px; padding: 0 4px; } }

/* ================= 01 · Editorial Search ================= */
.sl1-kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gap); padding-bottom: 48px; border-bottom: 3px solid var(--sw-ink); }
.sl1-kopf > * { grid-column: 1 / -1; }
.sl1-kopf > .sl1-such { grid-column: 1 / span 6; }
@media (max-width: 1199px) { .sl1-kopf > .sl1-such { grid-column: 1 / span 9; } }
@media (max-width: 767px) { .sl1-kopf > .sl1-such { grid-column: 1 / -1; } }
.sl1-h1 { margin-top: 16px !important; font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-hero); line-height: .92; }
.sl1-form { margin-top: 32px; max-width: 1100px; }
.sl1-form .sl-input { min-height: 80px; padding: 8px 0; border: 0; border-bottom: 3px solid var(--sw-ink); background: transparent; font: 400 clamp(32px, 4vw, 56px)/1.1 var(--sw-font-display); text-transform: uppercase; }
.sl1-form .sl-input:focus { outline: none; border-bottom-color: var(--sl-pink); }
/* Fokus zeigt hier die farbige Unterlinie; der allgemeine Fokusring (weißer Schatten) würde als Kasten wirken */
.sl1-form .sl-input:focus, .sl3-form .sl-input:focus, .sl5-form .sl-input:focus { box-shadow: none; }
.sl1-form .sl-input:focus { border-bottom-width: 4px; }
.sl1-form .sl-knopf { align-self: flex-end; margin-left: 16px; }
.sl1-einstieg { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gap); row-gap: 48px; padding-top: 40px; }
.sl1-einstieg > section:first-child { grid-column: 1 / span 5; }
.sl1-einstieg > section:last-child { grid-column: 7 / -1; }
.sl1-h2 { margin-bottom: 16px !important; padding-bottom: 8px; border-bottom: 3px solid var(--sw-ink); font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-c-l); line-height: 1; }
.sl1-bsp li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--sw-line-color); }
.sl1-bsp a { font-family: var(--sw-font-accent); font-style: italic; font-size: 26px; line-height: 1.2; }
.sl1-bsp a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
.sl1-bsp span, .sl1-nr { font-family: var(--sw-font-display); font-size: 20px; color: var(--sl-pink); }
.sl1-neu a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sw-line-color); }
.sl1-neu__t { font-weight: 700; font-size: 18px; line-height: 1.3; }
.sl1-neu a:hover .sl1-neu__t { text-decoration: underline; }
.sl1-liste { margin-top: 16px !important; border-top: 1.5px solid var(--sw-ink); }
.sl1-t { display: grid; grid-template-columns: 56px minmax(0, 1fr) 120px; column-gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--sw-line-color); }
.sl1-t .sl1-nr { font-size: 28px; line-height: 1; }
.sl1-t__h { font-family: var(--sw-font-display); font-weight: 400; text-transform: uppercase; font-size: var(--sw-fs-c-l); line-height: 1.05; }
.sl1-t__h a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sl1-t__teaser { max-width: 70ch; margin-top: 8px !important; font-size: 16px; line-height: 1.5; color: var(--sw-text-2); }
.sl1-t__bild { width: 120px; aspect-ratio: 1; overflow: hidden; background: var(--sw-paper-2); }
.sl1-filter a { border: 0; padding: 8px 0; margin-right: 16px; border-bottom: 3px solid transparent; }
.sl1-filter a[aria-current] { background: none; color: var(--sw-ink) !important; border-bottom-color: var(--sl-pink); }
.sl1-filter a:hover:not([aria-current]) { background: none; border-bottom-color: var(--sw-line-color); }

/* 01 · Kompakte Trefferliste (Stefan 09.10.2026: „kompakter und aufgeräumter, nicht seitenbreit“) – eine Textspalte, kleines Vorschaubild rechts */
.sl1 .sl2-form .sl-input { font-size: 17px; font-weight: 500; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; }
.sl1 .sl2-form .sl-input::placeholder { font-size: 17px; font-weight: 500; }
.sl1-ergebnis { max-width: 820px; }
.sl1-ergebnis .sl-zahl { margin-top: 40px !important; font-size: 16px; } /* Linie → Inhalt 40 px wie seitenweit */
.sl1-ergebnis .sl-zahl strong { font-size: 26px; }
.sl1-ergebnis .sl1-filter { margin: 8px 0 16px; gap: 4px 16px; }
.sl1-ergebnis .sl1-filter a { min-height: 40px; margin-right: 8px; font-size: 13px; }
.sl1-ergebnis .sl1-filter a span { font-size: 16px; }
.sl1-ergebnis .sl1-liste { margin-top: 0 !important; }
.sl1-ergebnis .sl1-t { grid-template-columns: 32px minmax(0, 1fr) 72px; column-gap: 16px; padding: 16px 0 24px; } /* unter dem Button 24 px (Stefan 09.10.2026: +5, dann +3) */
.sl1-ergebnis .sl1-t .sl1-nr { font-size: 18px; line-height: 1.3; }
.sl1-ergebnis .sl-label-r { margin-bottom: 8px; font-size: 11px; line-height: 1.2; } /* Etikett → Titel 8 px (Stefan 09.10.2026: mehr Abstand) */
.sl1-ergebnis .sl1-t__h { font-size: 22px; line-height: 1.05; }
.sl1-ergebnis .sl1-t__teaser { margin-top: 4px !important; font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl1-ergebnis .sl-meta { margin-top: 6px !important; font-size: 11px; }
.sl1-ergebnis .sl1-t__bild { width: 72px; }
.sl1-t__mehr { margin-top: 11px !important; } /* Stefan 09.10.2026: 5 px weniger */
/* Primär-Button nach Style Guide, eine Stufe kleiner (Stefan 09.10.2026): Schrift --sw-fs-nav 16 px statt 18, Innenabstand anteilig; Farbe und Hover wie .sw-btn */
.sl .sl1-t__btn { display: inline-flex; align-items: center; min-height: 40px; padding: 11px 14px 10px; font-size: var(--sw-fs-nav); }
.sl1-ergebnis .sl-blaettern { margin-top: 32px; }
.sl1-ergebnis .sl-nichts { margin-top: 16px; }

/* 01 · Zwei Spalten 50/50 (Stefan 09.10.2026): links Treffer, rechts „Deine Suche“ (klebt beim Scrollen) */
.sl1-ergebnis.sl1-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sw-gap); align-items: start; max-width: none; padding-top: 40px; }
.sl1-zwei > .sl1-treffer { grid-column: 1; grid-row: 1; }
.sl1-zwei > .sl1-info { grid-column: 2; grid-row: 1; align-self: stretch; }
.sl1-zwei .sl1-liste { border-top: 1.5px solid var(--sw-ink); } /* wie der Rahmen des Infokastens (Stefan 09.10.2026) */
.sl1-info__in { position: static; padding: 28px 32px 20px 38px; border: 1.5px solid var(--sw-ink); background: var(--sl-gelb); box-shadow: inset 6px 0 0 var(--sl-pink); }
.sl1-info__dach { font-weight: 700; font-size: var(--sw-fs-label); line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--sl-pink); }
.sl .sl1-info .sl1-info__zahl { margin-top: 16px !important; font-size: 18px; line-height: 1.3; }
.sl .sl1-info .sl1-info__zahl strong { display: block; font-size: clamp(48px, 4.2vw, 64px); line-height: .9; }
.sl1-info__q { font-weight: 700; overflow-wrap: anywhere; }
.sl1-info__h { margin: 24px 0 4px !important; padding-bottom: 8px; border-bottom: 1.5px solid var(--sw-ink); font-weight: 800; font-stretch: 75%; font-size: 13px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; }
.sl1-info__h small { display: block; margin-top: 2px; font-weight: 500; font-stretch: 100%; letter-spacing: 0; text-transform: none; color: var(--sw-text-2); }
.sl1-info__filter li + li { border-top: 1px solid color-mix(in srgb, var(--sw-ink) 14%, transparent); }
.sl1-info__filter a { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3.5em; align-items: center; gap: 12px; min-height: 44px; margin: 0 -10px; padding: 6px 10px; font-weight: 800; font-stretch: 75%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sl1-info__bar { height: 10px; background: color-mix(in srgb, var(--sw-ink) 9%, transparent); }
.sl1-info__bar span { display: block; width: var(--w); height: 100%; background: repeating-linear-gradient(-45deg, #14110F 0 6px, #2a2522 6px 12px); }
.sl1-info__n { font-family: var(--sw-font-display); font-weight: 400; font-size: 22px; letter-spacing: 0; text-align: right; }
.sl1-info__filter a:hover { background: color-mix(in srgb, var(--sw-paper) 70%, transparent); }
.sl1-info__filter a:hover .sl1-info__bar span { background: repeating-linear-gradient(-45deg, #B70074 0 6px, #9a0062 6px 12px); }
.sl1-info__filter a[aria-current] { background: var(--sw-ink); color: var(--sw-paper) !important; }
.sl1-info__filter a[aria-current] .sl1-info__bar { background: rgba(243, 239, 232, .18); }
.sl1-info__filter a[aria-current] .sl1-info__bar span { background: repeating-linear-gradient(-45deg, #B70074 0 6px, #9a0062 6px 12px); }
.sl1-info__filter a.is-leer { opacity: .45; }
.sl1-info__rub li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--sw-ink) 14%, transparent); font-weight: 600; font-size: 16px; }
.sl1-info__rub b { font-family: var(--sw-font-display); font-weight: 400; font-size: 20px; color: var(--sl-pink); }
.sl1-info__fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 16px; border-top: 1.5px solid var(--sw-ink); }
.sl1-info__fakten dt { font-weight: 800; font-stretch: 75%; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-text-2); }
.sl1-info__fakten dd { margin: 4px 0 0; font-family: var(--sw-font-display); font-size: 26px; line-height: 1; }
.sl1-info__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px; margin-top: 16px !important; font-size: 14px; }
.sl1-info__fuss a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline !important; text-underline-offset: 4px; }
.sl1-info__fuss a:hover { color: var(--sl-pink) !important; }
.sl1-info__fuss span { color: var(--sw-text-2); }
/* Kleben nur, wenn der Kasten ganz auf den Bildschirm passt */
@media (min-width: 1024px) and (min-height: 960px) { .sl1-info__in { position: sticky; top: calc(var(--sw-sticky) + 24px); } }
@media (max-width: 1023px) {
	.sl1-ergebnis.sl1-zwei { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.sl1-zwei > .sl1-info, .sl1-zwei > .sl1-treffer { grid-column: 1; grid-row: auto; }
	.sl1-info__in { position: static; }
}
@media (max-width: 767px) {
	.sl1-info__in { padding: 24px 20px 16px 26px; }
	.sl1-info .sl1-info__block, .sl1-info__fakten, .sl1-info__fuss span { display: none; }
	.sl .sl1-info .sl1-info__zahl strong { font-size: 48px; }
	.sl1-info__h { margin-top: 24px !important; }
}

/* 01 · Live-Liste: Bereich wird beim Tippen ausgetauscht; Laden = blasser + pinker Laufbalken auf der Kopflinie */
.sl1-hinweis { position: absolute; left: 0; top: calc(100% + 8px); margin: 0 !important; font-size: 14px; line-height: 20px; color: var(--sw-text-2); } /* nimmt keinen Platz ein: Feld → Linie bleibt 48 px */
.sl1-bereich { position: relative; min-height: 50vh; transition: opacity var(--sw-t-fast) var(--sw-ease); }
.sl1-bereich.is-laedt { opacity: .45; }
.sl1-bereich.is-laedt::before { content: ""; position: absolute; z-index: 2; top: -3px; left: 0; width: 30%; height: 3px; background: var(--sl-pink); animation: sl-lauf 1s var(--sw-ease) infinite; }
.sl1-bereich .sl-zahl:focus { outline: none; }
.sl1-bereich .sl-zahl:focus-visible { outline: 3px solid var(--sw-focus); outline-offset: 4px; }
@keyframes sl-lauf { from { left: 0; } to { left: 70%; } }

/* ================= 02 · Discover SUBWAY ================= */
.sl2-kopf { padding-bottom: 48px; }
.sl2-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sw-gap); row-gap: 48px; align-items: start; }
.sl2-hero__such { grid-column: 1 / span 6; }
.sl2-h1 { margin-top: 16px !important; font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-d-s); line-height: .95; }
.sl2-form { margin-top: 32px; }
.sl2-form .sl-input { min-height: 64px; padding-left: 52px; background: var(--sw-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2314110F' stroke-width='2.4'%3E%3Ccircle cx='9.5' cy='9.5' r='7'/%3E%3Cpath d='m15 15 5.5 5.5'/%3E%3C/svg%3E") no-repeat 16px center; box-shadow: 4px 4px 0 var(--sw-ink); }
.sl2-form .sl-knopf { min-height: 64px; margin-left: 12px; }
.sl .sl2-form .sl-input:focus { box-shadow: 4px 4px 0 var(--sw-ink); } /* Versatzschatten bleibt beim Fokus, Fokusring = Outline */
/* 01: kein pinker Fokusrahmen (Stefan 09.10.2026); Fokus zeigt der größere Versatzschatten */
.sl.sl1 .sl2-form .sl-input:focus { outline: none; box-shadow: 6px 6px 0 var(--sw-ink); }
.sl2-entdecken { grid-column: 8 / -1; display: grid; gap: 16px; margin-top: 40px; }
.sl2-box { padding: 20px 24px; border: 1.5px solid var(--sw-ink); background: var(--sw-paper); }
.sl2-box:first-child { background: var(--sl-gelb); }
.sl2-h { margin-bottom: 12px !important; font-weight: 800; font-stretch: 75%; font-size: var(--sw-fs-meta); letter-spacing: .14em; text-transform: uppercase; color: var(--sl-pink); }
.sl2-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sl2-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; background: var(--sw-ink); color: var(--sw-paper) !important; font-weight: 700; font-stretch: 62%; font-size: 15px; letter-spacing: .045em; text-transform: uppercase; transition: transform var(--sw-t-fast) var(--sw-ease); }
.sl2-chip span { opacity: .65; }
.sl2-chip:hover { transform: translateY(-2px); background: var(--sl-pink); }
.sl2-termine a { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--sw-line-color); }
.sl2-dat { display: grid; place-items: center; height: 52px; background: var(--sw-ink); color: var(--sw-paper); font-size: 11px; font-weight: 800; text-transform: uppercase; line-height: 1; }
.sl2-dat b { font-family: var(--sw-font-display); font-weight: 400; font-size: 24px; }
.sl2-termine strong { display: block; font-size: 15px; line-height: 1.25; }
.sl2-termine small { display: block; font-size: 13px; color: var(--sw-text-2); }
.sl2-termine a:hover strong { text-decoration: underline; }
.sl2-heft { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; font-weight: 700; }
.sl2-heft img { aspect-ratio: 600 / 814; height: auto; box-shadow: 3px 3px 0 var(--sw-ink); }
.sl2-heft small { display: block; margin-top: 4px; font-weight: 500; font-size: 13px; color: var(--sw-text-2); text-decoration: underline; }
.sl2-fmt { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sl2-fmt a { display: inline-block; padding: 6px 0; font-weight: 700; font-size: 15px; text-decoration: underline !important; text-underline-offset: 3px; }
.sl2-fmt span { color: var(--sw-text-2); font-weight: 500; }
.sl2-ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 3px solid var(--sw-ink); }
.sl2-ergebnis__kopf .sl-zahl { margin-top: 0 !important; }
.sl2-filter { margin: 0; }
.sl2-filter a { border-radius: 0; background: var(--sw-paper); }
.sl2-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.sl2-karte a { display: flex; flex-direction: column; height: 100%; border: 1.5px solid var(--sw-ink); background: var(--sw-surface); transition: transform var(--sw-t-fast) var(--sw-ease), box-shadow var(--sw-t-fast) var(--sw-ease); }
.sl2-karte a:hover, .sl2-karte a:focus-visible { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--sw-ink); }
.sl2-karte__bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sw-paper-2); }
.sl2-karte__bild--leer { display: grid; place-items: center; font-family: var(--sw-font-display); font-size: 48px; color: var(--sl-pink); }
.sl2-karte__in { display: grid; gap: 8px; padding: 16px; }
.sl2-tag { justify-self: start; padding: 5px 7px 4px; background: var(--sl-gelb); font-weight: 800; font-stretch: 62%; font-size: 13px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; }
.sl2-karte--termine .sl2-tag { background: var(--sl-pink); color: #FFFFFF; }
.sl2-karte strong { font-size: 18px; line-height: 1.3; }
.sl2-karte small { font-size: 13px; color: var(--sw-text-2); }
.sl2 .sl-nichts + .sl2-entdecken { margin-top: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ================= 03 · Search Terminal ================= */
.sl3 { padding: 0; background: var(--sw-ink); color: var(--sw-paper); }
.sl3-kopf { padding: 0 var(--sw-pad) 40px; border-bottom: 1px solid #3A332E; }
.sl3-h1 { margin-top: 40px !important; font-weight: 800; font-stretch: 75%; font-size: var(--sw-fs-label); letter-spacing: .2em; text-transform: uppercase; color: #F5C83C; }
.sl3-form { margin-top: 24px; }
.sl3-form .sl-feld { align-items: flex-end; }
.sl3-form .sl-input { min-height: 112px; padding: 0; border: 0; border-bottom: 3px solid var(--sw-paper); background: transparent; color: var(--sw-paper); font: 400 clamp(48px, 8vw, 128px)/1 var(--sw-font-display); text-transform: uppercase; caret-color: #F5C83C; }
.sl3-form .sl-input::placeholder { color: #5E554C; }
.sl3-form .sl-input:focus { outline: none; border-bottom-color: #F5C83C; }
.sl3-form .sl-knopf { margin-left: 24px; margin-bottom: 8px; background: #F5C83C; color: var(--sw-ink); }
.sl3-tasten { margin-top: 16px !important; font-size: 13px; color: #B3A99D; }
.sl3-tasten kbd { margin-right: 4px; color: var(--sw-paper); }
.sl3 .sl-live { background: #1E1A17; border-color: #F5C83C; box-shadow: 8px 8px 0 #F5C83C; }
.sl3 .sl-live__opt a { min-height: 88px; border-bottom-color: #3A332E; color: var(--sw-paper); }
.sl3 .sl-live__opt[aria-selected="true"] a, .sl3 .sl-live__opt a:hover { background: #2C2622; box-shadow: inset 6px 0 0 #F5C83C; }
.sl3 .sl-live__nr { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 2px solid #F5C83C; color: #F5C83C; font-family: var(--sw-font-display); font-size: 28px; }
.sl3 .sl-live__titel { font-family: var(--sw-font-display); font-weight: 400; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.sl3 .sl-live__label { color: #F5C83C; }
.sl3 .sl-live__info, .sl3 .sl-live__msg { color: #D9D1C5; }
.sl3 button.sl-live__alle { background: #F5C83C; color: var(--sw-ink); }
.sl3 mark { background: #F5C83C; color: var(--sw-ink); }
.sl3-body { padding: 0 var(--sw-pad) var(--sw-sec); }
.sl3-body .sl-zahl { color: var(--sw-paper); }
.sl3-h2 { margin: 40px 0 16px !important; font-weight: 800; font-stretch: 75%; font-size: var(--sw-fs-meta); letter-spacing: .16em; text-transform: uppercase; color: #B3A99D; }
.sl3-einstieg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.sl3-rows { border-top: 1px solid #3A332E; }
.sl3-rows a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid #3A332E; color: var(--sw-paper) !important; }
.sl3-rows a:hover, .sl3-rows a:focus-visible { background: #2C2622; box-shadow: inset 6px 0 0 #F5C83C; }
.sl3-k { font-weight: 800; font-stretch: 75%; font-size: 13px; letter-spacing: .14em; color: #F5C83C; padding-left: 12px; }
.sl3-t { font-family: var(--sw-font-display); font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.sl3-n { padding-right: 12px; font-size: 14px; color: #B3A99D; text-align: right; }
.sl3-bsp { display: flex; flex-wrap: wrap; gap: 8px; }
.sl3-bsp a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border: 1.5px solid #F5C83C; color: #F5C83C !important; font-weight: 800; font-stretch: 75%; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.sl3-bsp a:hover { background: #F5C83C; color: var(--sw-ink) !important; }
.sl3-filter a { border-color: #5E554C; color: var(--sw-paper) !important; }
.sl3-filter a[aria-current] { background: #F5C83C; color: var(--sw-ink) !important; border-color: #F5C83C; }
.sl3-filter a:hover:not([aria-current]) { background: #2C2622; }
.sl3-filter .sl-filter__reset { color: #F5C83C !important; }
.sl3 .sl-nichts, .sl3 .sl-fehler { background: #1E1A17; border-color: #F5C83C; box-shadow: inset 6px 0 0 #F5C83C; color: var(--sw-paper); }
.sl3 .sl-chips a { background: #F5C83C; color: var(--sw-ink) !important; }
.sl3 .sl-blaettern span { color: #B3A99D; }
.sl3 .sl-blaettern .sw-btn--sec { color: var(--sw-paper); }

/* ================= 04 · Story Finder ================= */
.sl4-kopf { position: relative; padding-bottom: 32px; }
.sl4-kopf__zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-top: 40px; }
.sl4-h1 { font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-d-s); line-height: .95; }
.sl4-lead { font-family: var(--sw-font-accent); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); }
.sl4-form { position: sticky; z-index: 6; top: var(--sw-sticky); margin-top: 24px; padding: 16px 0; background: var(--sw-paper); border-top: 3px solid var(--sw-ink); border-bottom: 1.5px solid var(--sw-ink); }
@media (max-width: 1199px) { .sl4-form { top: var(--sw-header); } }
.sl4-form .sl-input { min-height: 56px; border: 0; background: transparent; font-size: 22px; }
.sl4-form .sl-input:focus { outline-offset: 0; }
.sl4-h2 { margin: 32px 0 24px !important; font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-c-l); }
.sl4-ergebnis__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.sl4-ergebnis__kopf .sl-zahl { margin-top: 24px !important; }
.sl4-filter { margin: 16px 0 24px; }
.sl4-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--sw-gap); }
.sl4-story a { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; }
.sl4-story__bild { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sw-paper-2); }
.sl4-story__bild img { transition: transform .5s var(--sw-ease); }
.sl4-story a:hover img { transform: scale(1.04); }
.sl4-story__in { display: grid; gap: 6px; }
.sl4-story strong { font-family: var(--sw-font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; }
.sl4-story small { font-size: 13px; color: var(--sw-text-2); }
.sl4-story a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }
.sl4-story--auf { grid-column: 1 / -1; padding-bottom: 32px; border-bottom: 3px solid var(--sw-ink); }
.sl4-story--auf a { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sw-gap); }
.sl4-story--auf .sl4-story__bild { aspect-ratio: 3 / 2; }
.sl4-story--auf strong { font-size: var(--sw-fs-c-xl); }
.sl4-story__teaser { font-size: 17px; line-height: 1.5; }
.sl4-ticket a { display: grid; grid-template-columns: 88px minmax(0, 1fr); border: 1.5px solid var(--sw-ink); background: var(--sl-gelb); }
.sl4-ticket__dat { display: grid; place-items: center; align-content: center; gap: 2px; padding: 12px; background: var(--sw-ink); color: var(--sw-paper); border-right: 2px dashed var(--sw-paper); font-weight: 800; font-size: 12px; text-transform: uppercase; }
.sl4-ticket__dat b { font-family: var(--sw-font-display); font-weight: 400; font-size: 40px; line-height: .9; }
.sl4-ticket__in { display: grid; gap: 6px; padding: 16px 20px; }
.sl4-ticket strong { font-family: var(--sw-font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; }
.sl4-ticket small { font-size: 14px; }
.sl4-ticket a:hover { box-shadow: 4px 4px 0 var(--sw-ink); }
.sl4-heft a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; }
.sl4-heft img { aspect-ratio: 600 / 814; height: auto; box-shadow: 4px 4px 0 var(--sw-ink); }
.sl4-heft strong { display: block; font-family: var(--sw-font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; }
.sl4-heft small { font-size: 13px; color: var(--sw-text-2); }

/* ================= 05 · Frag SUBWAY ================= */
.sl5-kopf { padding-bottom: 48px; border-bottom: 3px solid var(--sw-ink); }
.sl5-form { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 24px; font-family: var(--sw-font-accent); font-style: italic; font-size: clamp(36px, 5vw, 72px); line-height: 1.15; }
.sl5-form .sl-label { font: inherit; }
.sl5-form .sl-feld { flex: 1 1 520px; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.sl5-form .sl-input { flex: 1 1 240px; min-height: 0; padding: 0 4px; border: 0; border-bottom: 4px solid var(--sl-pink); background: transparent; font: 400 1em/1.15 var(--sw-font-display); text-transform: uppercase; color: var(--sw-ink); }
.sl5-form .sl-input:focus { outline: none; background: var(--sl-gelb); }
.sl5-in { font: inherit; }
.sl5-typ { flex: 0 0 auto; width: auto; max-width: 100%; min-height: 0; padding: 0 36px 0 4px; border: 0; border-bottom: 4px solid var(--sw-ink); border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%2314110F' stroke-width='2.5'/%3E%3C/svg%3E") no-repeat right 6px center; color: var(--sw-ink); font: italic 400 1em/1.15 var(--sw-font-accent); -webkit-appearance: none; appearance: none; cursor: pointer; }
.sl5-typ:focus { outline: 3px solid var(--sw-focus); outline-offset: 2px; }
.sl5-form .sl-knopf { flex: 0 0 auto; align-self: center; min-height: 56px; padding-inline: 24px; }
.sl5-form .sl-live { font-style: normal; font-size: 16px; }
.sl5-h2 { margin: 48px 0 16px !important; font-weight: 800; font-stretch: 75%; font-size: var(--sw-fs-meta); letter-spacing: .16em; text-transform: uppercase; color: var(--sl-pink); }
.sl5-saetze li { border-bottom: 1px solid var(--sw-line-color); }
.sl5-saetze a { display: block; padding: 16px 0; font-family: var(--sw-font-accent); font-style: italic; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.25; }
.sl5-saetze b { font-family: var(--sw-font-display); font-style: normal; font-weight: 400; text-transform: uppercase; color: var(--sl-pink); }
.sl5-saetze a:hover { background: var(--sl-gelb); }
.sl5-kapitel { margin-top: 48px; }
.sl5-kap__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-bottom: 8px; border-bottom: 3px solid var(--sw-ink); font-family: var(--sw-font-display); text-transform: uppercase; font-size: var(--sw-fs-sec); line-height: 1; }
.sl5-kap__h span { font-family: var(--sw-font-accent); font-style: italic; text-transform: none; font-size: .6em; color: var(--sl-pink); }
.sl5-kap__h small { font-family: var(--sw-font-ui); font-weight: 800; font-size: 14px; color: var(--sw-text-2); }
.sl5-liste a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--sw-line-color); }
.sl5-liste strong { font-weight: 700; font-size: 19px; line-height: 1.3; }
.sl5-liste small { font-size: 14px; color: var(--sw-text-2); }
.sl5-liste a:hover strong { text-decoration: underline; }
.sl5-mehr { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 800; font-stretch: 75%; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline !important; text-underline-offset: 4px; }
.sl5-zurueck { margin-top: 16px !important; }

/* ================= Vergleichsansicht ================= */
.slv-zust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
button.slv-zu { min-height: 40px; padding: 8px 12px; border: 1.5px solid var(--sw-ink); border-radius: 0; background: var(--sw-paper); color: var(--sw-ink); font: 800 13px/1 var(--sw-font-ui); font-stretch: 75%; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
button.slv-zu:hover { background: var(--sw-paper-2); color: var(--sw-ink); }
button.slv-zu[aria-pressed="true"] { background: var(--sw-ink); color: var(--sw-paper); }
.slv .suv-block > p, .slv .suv-note { max-width: 78ch; margin-top: 16px; font-size: 16px; line-height: 1.55; }
.slv .suv-note { color: var(--sw-text-2); }
.slv .suv-fragen { margin: 16px 0 0; padding-left: 24px; list-style: decimal; }
.slv .suv-fragen li { margin: 8px 0; max-width: 78ch; font-size: 16px; line-height: 1.5; }

/* ================= Responsive ================= */
@media (max-width: 1199px) {
	.sl1-einstieg > section:first-child, .sl1-einstieg > section:last-child { grid-column: 1 / -1; }
	.sl2-hero__such, .sl2-entdecken { grid-column: 1 / -1; }
	.sl2-entdecken { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl2-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sl4-feed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.sl-bc { padding-top: 36px; line-height: 2; }
	.sl-feld { flex-wrap: wrap; }
	.sl-knopf { flex: 1 1 100%; margin: 12px 0 0 !important; }
	.sl-live { position: relative; top: 8px; box-shadow: 4px 4px 0 var(--sw-ink); max-height: none; }
	.sl1-form .sl-input { min-height: 64px; font-size: clamp(28px, 8vw, 40px); }
	.sl1-t { grid-template-columns: 40px minmax(0, 1fr); }
	.sl1-t__bild { display: none; }
	.sl1-ergebnis .sl1-t { grid-template-columns: 28px minmax(0, 1fr) 56px; column-gap: 12px; }
	.sl1-ergebnis .sl1-t__bild { display: block; width: 56px; }
	.sl1-ergebnis .sl1-t__h { font-size: 20px; }
	.sl2-entdecken, .sl2-karten, .sl2 .sl-nichts + .sl2-entdecken { grid-template-columns: minmax(0, 1fr); }
	.sl3-form .sl-input { min-height: 72px; font-size: clamp(36px, 11vw, 56px); }
	.sl3-einstieg { grid-template-columns: minmax(0, 1fr); }
	.sl3-rows a { grid-template-columns: 52px minmax(0, 1fr); }
	.sl3-n { grid-column: 2; text-align: left; padding: 0; }
	.sl3 .sl-live__titel { font-size: 22px; }
	.sl3-tasten { display: none; }
	.sl4-story a, .sl4-story--auf a { grid-template-columns: 112px minmax(0, 1fr); }
	.sl4-story--auf .sl4-story__teaser { display: none; }
	.sl4-story--auf strong { font-size: 24px; }
	.sl5-form { font-size: clamp(30px, 9vw, 44px); }
	.sl5-form .sl-feld { flex-basis: 100%; }
	.sl-nichts, .sl-fehler { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-live__msg--laden::before { animation: none; }
	.sl1-bereich.is-laedt::before { animation: none; width: 100%; }
	.sl2-chip, .sl2-karte a, .sl4-story__bild img { transition: none; }
}