/*
Theme Name: spielcasinos.com
Description: Abfahrtstafel. Spielbanken-Verzeichnis, Relaunch 2026 (Konzept §4).
Version: 1.0.0
Text Domain: spielcasinos-com
*/

/* =========================================================
 * 1. Schriften (Fontsource, self-hosted, keine Google Fonts)
 * ======================================================= */
@font-face {
	font-family: "Big Shoulders Display";
	src: url("fonts/bigshoulders-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("fonts/atkinson-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Fragment Mono";
	src: url("fonts/fragmentmono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* =========================================================
 * 2. Tokens
 * ======================================================= */
:root {
	--spc-tafel: #16181B;      /* Fallblatt-Schwarz */
	--spc-tafel-2: #202328;    /* Kachel unten */
	--spc-tafel-3: #2A2D33;    /* Kachel oben, Linien */
	--spc-kreide: #F2F0EA;     /* Schrift auf der Tafel */
	--spc-led: #FF8A1F;        /* Status offen, aktive Zeile, CTA */
	--spc-led-tief: #A34F00;   /* LED-Ton fuer Text auf hellem Grund (Kontrast >= 4.5) */
	--spc-grau: #6B6E73;       /* geschlossen */
	--spc-grau-hell: #9A9DA2;  /* geschlossen auf der Tafel */
	--spc-beton: #ECEDEB;      /* Leseflaeche */
	--spc-karte: #F8F8F6;      /* Karten auf Beton */
	--spc-linie: #CFD1CD;
	--spc-text: #16181B;
	--spc-text-2: #4A4D52;

	--spc-f-tafel: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--spc-f-text: "Atkinson Hyperlegible", system-ui, sans-serif;
	--spc-f-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--spc-schale: 72rem;
	--spc-rand: clamp(1rem, 4vw, 2rem);
	--spc-r: 4px;
	--spc-flap-dauer: 70ms;    /* Fallblatt: Dauer je Blatt */
}

/* =========================================================
 * 3. Basis
 * ======================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--spc-beton);
	color: var(--spc-text);
	font: 400 1.0625rem/1.6 var(--spc-f-text);
	overflow-wrap: break-word;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--spc-led); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--spc-led); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--spc-f-tafel); font-weight: 800; line-height: 1.05; letter-spacing: .01em; margin: 0 0 .5em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.45rem; }
p, ul, ol, table { margin: 0 0 1.1em; }
abbr[title] { text-decoration: none; cursor: help; }

.spc-mono { font-family: var(--spc-f-mono); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: -.01em; }
.spc-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.spc-schale { width: 100%; max-width: var(--spc-schale); margin: 0 auto; padding: 0 var(--spc-rand); }
.spc-skip { position: absolute; left: -999px; top: 0; z-index: 99; padding: .6rem 1rem; background: var(--spc-led); color: var(--spc-tafel); font-weight: 700; }
.spc-skip:focus { left: 1rem; }
.spc-leer { color: var(--spc-text-2); font-style: italic; }
.spc-zu { color: var(--spc-text-2); }

/* Knoepfe */
.spc-knopf {
	display: inline-flex; align-items: center; justify-content: center; gap: .4em;
	min-height: 44px; padding: .55rem 1.1rem;
	border: 2px solid var(--spc-tafel); border-radius: var(--spc-r);
	background: var(--spc-karte); color: var(--spc-tafel);
	font: 800 1.05rem/1 var(--spc-f-tafel); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
	cursor: pointer; transition: background-color .15s, transform .15s;
}
.spc-knopf:hover { background: #fff; }
.spc-knopf:active { transform: translateY(1px); }
.spc-knopf--led { background: var(--spc-led); border-color: var(--spc-led); color: var(--spc-tafel); }
.spc-knopf--led:hover { background: #FF9B3D; border-color: #FF9B3D; }

/* =========================================================
 * 4. Werbehinweis (Kopf) und Affiliate-Hinweis (Fuss)
 * ======================================================= */
.spc-werbung { background: #0E0F11; color: var(--spc-kreide); font-size: .8125rem; }
.spc-werbung summary {
	max-width: var(--spc-schale); margin: 0 auto; padding: .4rem var(--spc-rand);
	cursor: pointer; list-style: none; font-family: var(--spc-f-mono); letter-spacing: .04em; color: var(--spc-grau-hell);
}
.spc-werbung summary::-webkit-details-marker { display: none; }
.spc-werbung summary::after { content: " +"; color: var(--spc-led); }
.spc-werbung[open] summary::after { content: " –"; }
.spc-werbung__text { max-width: var(--spc-schale); margin: 0 auto; padding: 0 var(--spc-rand) .8rem; line-height: 1.5; }
.spc-werbung__text p { margin: 0; }
.spc-werbung__text a { color: var(--spc-kreide); }
.spc-werbung--fuss { background: transparent; margin: 1.5rem 0; border-top: 1px solid var(--spc-tafel-3); border-bottom: 1px solid var(--spc-tafel-3); }
.spc-werbung--fuss summary, .spc-werbung--fuss .spc-werbung__text { padding-left: 0; padding-right: 0; }

/* =========================================================
 * 5. Kopf: Tafel-Leiste mit Fallblatt-Wortmarke
 * ======================================================= */
.spc-kopf { position: sticky; top: 0; z-index: 50; background: var(--spc-tafel); color: var(--spc-kreide); border-bottom: 3px solid #0B0C0E; }
.spc-kopf__innen { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.spc-marke { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: var(--spc-kreide); flex: none; }
.spc-marke__kacheln { display: inline-flex; gap: 1px; }
.spc-marke__kacheln i {
	position: relative; display: inline-block; width: .78em; padding: .14em 0 .1em;
	font: 800 1.2rem/1 var(--spc-f-tafel); font-style: normal; text-align: center;
	background: linear-gradient(var(--spc-tafel-3) 0 50%, var(--spc-tafel-2) 50% 100%);
	border-radius: 2px; box-shadow: 0 1px 0 #000;
}
.spc-marke__kacheln i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.8); }
.spc-marke__tld { font: 400 .8rem/1 var(--spc-f-mono); color: var(--spc-led); margin-left: .15rem; }

.spc-nav { margin-left: auto; }
.spc-nav__liste { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.spc-nav__liste a {
	display: block; padding: .55rem .7rem; border-radius: var(--spc-r);
	font: 700 1.05rem/1 var(--spc-f-tafel); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--spc-kreide);
}
.spc-nav__liste a:hover { background: var(--spc-tafel-3); }
.spc-nav__liste .current-menu-item > a, .spc-nav__liste .current-page-ancestor > a { color: var(--spc-led); box-shadow: inset 0 -2px 0 var(--spc-led); }

.spc-navknopf { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--spc-tafel-3); border-radius: var(--spc-r); background: var(--spc-tafel-2); cursor: pointer; }
.spc-navknopf__striche, .spc-navknopf__striche::before, .spc-navknopf__striche::after { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--spc-led); transition: transform .2s; position: relative; }
.spc-navknopf__striche::before, .spc-navknopf__striche::after { content: ""; position: absolute; left: 0; }
.spc-navknopf__striche::before { top: -6px; }
.spc-navknopf__striche::after { top: 6px; }
.spc-navknopf[aria-expanded="true"] .spc-navknopf__striche { background: transparent; }
.spc-navknopf[aria-expanded="true"] .spc-navknopf__striche::before { transform: translateY(6px) rotate(45deg); }
.spc-navknopf[aria-expanded="true"] .spc-navknopf__striche::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
	.spc-js .spc-navknopf { display: block; }
	.spc-js .spc-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; background: var(--spc-tafel); border-bottom: 3px solid #0B0C0E; }
	.spc-js .spc-nav.spc-offen { display: block; }
	.spc-nav__liste { flex-direction: column; padding: .5rem var(--spc-rand) 1rem; }
	.spc-nav__liste a { padding: .8rem .2rem; border-bottom: 1px solid var(--spc-tafel-3); border-radius: 0; font-size: 1.25rem; }
	html:not(.spc-js) .spc-kopf__innen { flex-wrap: wrap; }
	html:not(.spc-js) .spc-nav { width: 100%; margin: 0; }
}
@media (max-width: 380px) { .spc-marke__kacheln i { font-size: 1.02rem; } }

/* =========================================================
 * 6. Buehne Startseite
 * ======================================================= */
.spc-buehne { background: var(--spc-tafel); color: var(--spc-kreide); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(4.5rem, 8vw, 6rem); position: relative; overflow: hidden; }
.spc-buehne::before { /* Rasterlinien der Tafel */
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
	background: repeating-linear-gradient(to bottom, transparent 0 47px, #0B0C0E 47px 48px);
}
.spc-buehne__innen { position: relative; display: grid; gap: 2rem; align-items: end; }
@media (min-width: 900px) { .spc-buehne__innen { grid-template-columns: 1fr auto; } }
.spc-buehne__zug { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--spc-led); }
.spc-led-punkt { width: .6rem; height: .6rem; border-radius: 50%; background: var(--spc-led); box-shadow: 0 0 10px var(--spc-led); }
.spc-buehne__titel { font-size: clamp(2.6rem, 1.4rem + 5.5vw, 5.4rem); text-transform: uppercase; line-height: .95; margin: 0 0 1rem; max-width: 16ch; }
.spc-buehne__unter { max-width: 40rem; font-size: 1.15rem; color: #D5D3CC; margin: 0; }
.spc-buehne__uhr { display: grid; justify-items: end; gap: .5rem; }
.spc-grossuhr { display: inline-flex; gap: 4px; }
.spc-grossuhr i {
	position: relative; display: inline-block; min-width: .72em; padding: .06em .04em 0;
	font: 400 clamp(3rem, 2rem + 4vw, 5.5rem)/1 var(--spc-f-mono); font-style: normal; text-align: center; color: var(--spc-led);
	background: linear-gradient(var(--spc-tafel-3) 0 50%, var(--spc-tafel-2) 50% 100%);
	border-radius: 6px; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255,255,255,.05);
}
.spc-grossuhr i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(0,0,0,.85); }
.spc-grossuhr i:nth-child(3) { min-width: .35em; background: none; box-shadow: none; }
.spc-grossuhr i:nth-child(3)::after { display: none; }
.spc-buehne__datum { font-size: .85rem; color: var(--spc-grau-hell); }
@media (max-width: 899px) { .spc-buehne__uhr { justify-items: start; } .spc-grossuhr i { font-size: 2.6rem; } }

/* =========================================================
 * 7. Seitenkopf (Standard) und Gleisanzeige (Stadtseite)
 * ======================================================= */
.spc-held, .spc-gleis { background: var(--spc-tafel); color: var(--spc-kreide); padding: 1.25rem 0 2rem; }
.spc-held__titel { font-size: clamp(2.2rem, 1.4rem + 3.5vw, 3.8rem); text-transform: uppercase; margin: .25rem 0 .75rem; max-width: 22ch; }
.spc-held__code { font-size: 4rem; color: var(--spc-led); margin: 0; }
.spc-rubrik { display: inline-block; font: 700 .9rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-led); text-decoration: none; margin-top: .5rem; }
.spc-krumen { font-size: .85rem; color: var(--spc-grau-hell); margin-bottom: .5rem; }
.spc-krumen a { color: var(--spc-kreide); text-decoration-color: var(--spc-tafel-3); }
.spc-byline { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0; font-size: .9rem; color: #C9C7C0; }
.spc-byline a { color: var(--spc-kreide); }
.spc-byline__wann time { color: var(--spc-led); }

.spc-gleis__anzeige {
	display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: center;
	margin: .5rem 0 1rem; padding: 1rem; background: #0F1113; border: 1px solid var(--spc-tafel-3); border-radius: 6px;
	box-shadow: inset 0 0 0 4px #0B0C0E;
}
.spc-gleis__nr { display: grid; justify-items: center; margin: 0; padding: .4rem .6rem; background: var(--spc-kreide); color: var(--spc-tafel); border-radius: var(--spc-r); min-width: 4.2rem; }
.spc-gleis__nr-label { font: 400 .65rem/1 var(--spc-f-mono); letter-spacing: .1em; text-transform: uppercase; }
.spc-gleis__nr-wert { font: 800 2.4rem/1 var(--spc-f-tafel); }
.spc-gleis__titel { font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.4rem); text-transform: uppercase; margin: 0; line-height: .95; }
.spc-gleis__zeile { margin: .35rem 0 0; color: #C9C7C0; font-size: .98rem; }
.spc-gleis__status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; padding-top: .9rem; border-top: 1px dashed var(--spc-tafel-3); }
.spc-gleis__heute { margin: 0; font-size: .95rem; color: #C9C7C0; }
.spc-gleis__heute > span:first-child { font: 700 .85rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-grau-hell); margin-right: .3rem; }
.spc-gleis__heute .spc-mono { color: var(--spc-kreide); }
@media (min-width: 800px) {
	.spc-gleis__anzeige { grid-template-columns: auto 1fr auto; padding: 1.25rem 1.5rem; }
	.spc-gleis__status { grid-column: auto; border-top: 0; padding-top: 0; flex-direction: column; align-items: flex-end; text-align: right; }
}
.spc-gleis__anschluss { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .5rem; font-size: .95rem; }
.spc-gleis__anschluss-label { font: 700 .85rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-grau-hell); }
.spc-gleis__anschluss a { padding: .3rem .6rem; border: 1px solid var(--spc-tafel-3); border-radius: 999px; text-decoration: none; color: var(--spc-kreide); }
.spc-gleis__anschluss a:hover { border-color: var(--spc-led); }
.spc-gleis__anschluss .spc-mono { color: var(--spc-led); font-size: .85em; }

/* =========================================================
 * 8. Status-Anzeige mit Fallblatt (Element-Pick nav-splitflap,
 *    umgewidmet; ohne GSAP, Web Animations API in functions.js)
 * ======================================================= */
.spc-status { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.spc-status__led { width: .6rem; height: .6rem; border-radius: 50%; background: var(--spc-grau); flex: none; }
.spc-status--offen .spc-status__led { background: var(--spc-led); box-shadow: 0 0 8px var(--spc-led); }
.spc-status--spaeter .spc-status__led { background: transparent; box-shadow: inset 0 0 0 2px var(--spc-led); }
.spc-flap { display: inline-flex; gap: 2px; font: 700 .95rem/1 var(--spc-f-mono); text-transform: uppercase; color: var(--spc-kreide); }
.spc-status--offen .spc-flap { color: var(--spc-led); }
.spc-status--zu .spc-flap, .spc-status--unklar .spc-flap { color: var(--spc-grau-hell); }
.spc-flap__k { /* eine Kachel */
	position: relative; display: inline-block; width: 1.05em; padding: .28em 0 .22em; text-align: center;
	background: linear-gradient(var(--spc-tafel-3) 0 50%, var(--spc-tafel-2) 50% 100%);
	border-radius: 2px; perspective: 120px;
}
.spc-flap__k::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.85); z-index: 2; }
.spc-flap__k--leer { width: .5em; background: none; }
.spc-flap__k--leer::after { display: none; }
.spc-flap__blatt { /* obere Haelfte, klappt nach unten */
	position: absolute; left: 0; right: 0; top: 0; height: 50%; overflow: hidden; border-radius: 2px 2px 0 0;
	background: var(--spc-tafel-3); transform-origin: 50% 100%; backface-visibility: hidden; z-index: 1;
}
.spc-gleis .spc-flap { font-size: 1.35rem; }

/* =========================================================
 * 9. Abfahrtstafel (Tabellenmuster 03: Ziel + Status sichtbar,
 *    Rest je Zeile aufklappbar; ohne JS vollstaendig offen)
 * ======================================================= */
.spc-tafel { background: var(--spc-tafel); color: var(--spc-kreide); border-radius: 8px; padding: 1rem clamp(.75rem, 2vw, 1.5rem) .75rem; margin: 0 0 2.5rem; box-shadow: 0 10px 30px -18px rgba(0,0,0,.6), inset 0 0 0 4px #0B0C0E; }
.spc-tafel__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding-bottom: .75rem; border-bottom: 2px solid #0B0C0E; }
.spc-tafel__titel { margin: 0; color: var(--spc-kreide); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.spc-tafel__uhr { margin: 0; color: var(--spc-grau-hell); font-size: .9rem; }
.spc-tafel__uhr time { color: var(--spc-led); font-size: 1.35rem; margin-right: .35rem; }
.spc-tafel__tabelle { width: 100%; border-collapse: collapse; margin: 0; }
.spc-tafel__tabelle thead th { font: 700 .8rem/1.2 var(--spc-f-tafel); letter-spacing: .14em; text-transform: uppercase; color: var(--spc-grau-hell); text-align: left; padding: .75rem .6rem .5rem; }
.spc-tafel__tabelle td, .spc-tafel__tabelle tbody th { padding: .7rem .6rem; border-top: 1px solid var(--spc-tafel-3); text-align: left; vertical-align: middle; font-weight: 400; }
.spc-tafel__tabelle tbody tr:hover { background: rgba(255,255,255,.03); }
.spc-k-ziel a { font: 800 1.55rem/1 var(--spc-f-tafel); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; color: var(--spc-kreide); }
.spc-k-ziel a:hover { color: var(--spc-led); }
.spc-zeile__haus { display: block; margin-top: .2rem; font-size: .85rem; color: var(--spc-grau-hell); }
.spc-tafel .spc-mono { color: var(--spc-kreide); }
.spc-tafel .spc-leer { color: var(--spc-grau-hell); }
.spc-tafel .spc-zu { color: var(--spc-grau-hell); }
.spc-k-land abbr { font-family: var(--spc-f-mono); padding: .15rem .35rem; border: 1px solid var(--spc-tafel-3); border-radius: 3px; }
.spc-k-mehr { width: 1%; }
.spc-mehr { display: none; }
.spc-tafel__fuss { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding-top: .75rem; border-top: 2px solid #0B0C0E; font-size: .82rem; color: var(--spc-grau-hell); }
.spc-tafel__fuss time { color: var(--spc-kreide); }
.spc-muster { display: inline-block; padding: .1rem .45rem; border: 1px dashed var(--spc-led); border-radius: 3px; font: 400 .75rem/1.4 var(--spc-f-mono); color: var(--spc-led-tief); text-transform: uppercase; letter-spacing: .06em; }
.spc-tafel .spc-muster, .spc-gleis .spc-muster { color: var(--spc-led); }

@media (max-width: 720px) {
	.spc-tafel__tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.spc-tafel__tabelle tbody tr { display: grid; grid-template-columns: 1fr auto auto; align-items: center; border-top: 1px solid var(--spc-tafel-3); padding: .6rem 0; }
	.spc-tafel__tabelle td, .spc-tafel__tabelle tbody th { border: 0; padding: .15rem .35rem; }
	.spc-tafel__tabelle .spc-k-ziel { grid-column: 1; grid-row: 1; }
	.spc-tafel__tabelle .spc-k-status { grid-column: 2; grid-row: 1; }
	.spc-tafel__tabelle .spc-k-mehr { grid-column: 3; grid-row: 1; width: auto; }
	.spc-tafel__tabelle .spc-k-detail { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 1rem; font-size: .92rem; }
	.spc-tafel__tabelle .spc-k-detail::before { content: attr(data-label); color: var(--spc-grau-hell); }
	.spc-tafel__tabelle .spc-k-detail:nth-child(2) { margin-top: .4rem; padding-top: .5rem; border-top: 1px dashed var(--spc-tafel-3); }
	.spc-k-ziel a { font-size: 1.35rem; }
	.spc-js .spc-mehr { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--spc-tafel-3); border-radius: var(--spc-r); background: var(--spc-tafel-2); color: var(--spc-kreide); cursor: pointer; }
	.spc-mehr__pfeil { width: 9px; height: 9px; border-right: 2px solid var(--spc-led); border-bottom: 2px solid var(--spc-led); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
	.spc-mehr[aria-expanded="true"] .spc-mehr__pfeil { transform: rotate(-135deg) translate(-2px, -2px); }
	/* Zugeklappt: Zellen bleiben im DOM (indexierbar), nur die Hoehe faellt weg. */
	.spc-zeile.spc-zu-geklappt .spc-k-detail { height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border: 0; overflow: hidden; visibility: hidden; }
}

/* =========================================================
 * 10. PLZ-Suche (setzt oben an die Buehne an)
 * ======================================================= */
.spc-suche { position: relative; z-index: 2; margin: -3.25rem 0 2.5rem; padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem); background: var(--spc-karte); border: 2px solid var(--spc-tafel); border-radius: 8px; box-shadow: 0 6px 0 var(--spc-tafel); }
.spc-inhalt > .spc-suche:not(:first-child) { margin-top: 0; }
.spc-suche__label { display: block; font: 800 1.2rem/1 var(--spc-f-tafel); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .6rem; }
.spc-suche__zeile { display: flex; flex-wrap: wrap; gap: .6rem; }
.spc-suche__feld { flex: 1 1 10rem; min-width: 0; width: 100%; min-height: 48px; padding: .5rem .8rem; font-size: 1.35rem; border: 2px solid var(--spc-tafel); border-radius: var(--spc-r); background: #fff; color: var(--spc-text); letter-spacing: .12em; }
.spc-suche__feld::placeholder { color: #8A8D92; letter-spacing: .02em; font-size: 1rem; }
.spc-suche .spc-knopf { min-height: 48px; flex: 0 1 auto; }
.spc-suche__hinweis { margin: .6rem 0 0; font-size: .85rem; color: var(--spc-text-2); }
.spc-suche__treffer { list-style: none; margin: 0; padding: 0; }
.spc-suche__treffer:not(:empty) { margin-top: 1rem; border-top: 2px solid var(--spc-tafel); }
.spc-treffer { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--spc-linie); }
.spc-treffer a { font: 800 1.3rem/1 var(--spc-f-tafel); text-transform: uppercase; text-decoration: none; }
.spc-treffer a:hover { color: var(--spc-led-tief); }
.spc-treffer__km { color: var(--spc-text-2); font-size: .88rem; line-height: 1.35; }
.spc-treffer .spc-status { grid-row: 1 / 3; grid-column: 2; padding: .35rem .5rem; background: var(--spc-tafel); border-radius: var(--spc-r); }
.spc-suche__fehler { padding: .7rem 0; color: var(--spc-text-2); }

/* =========================================================
 * 11. Streckennetz (SVG) und Linien nach Land
 * ======================================================= */
.spc-netz { margin: 0 0 2.5rem; padding: 1rem; background: var(--spc-tafel); border-radius: 8px; box-shadow: inset 0 0 0 4px #0B0C0E; }
.spc-netz__karte { display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.spc-netz__land { fill: #1D2024; stroke: var(--spc-tafel-3); stroke-width: 2; stroke-linejoin: round; }
.spc-netz__strecke { stroke: #3A3E45; stroke-width: 3; stroke-linecap: round; }
.spc-netz__station circle { fill: var(--spc-tafel); stroke: var(--spc-grau-hell); stroke-width: 3; transition: r .15s; }
.spc-netz__station--offen circle { fill: var(--spc-led); stroke: var(--spc-led); }
.spc-netz__station--spaeter circle { stroke: var(--spc-led); }
.spc-netz__station text { font: 700 17px var(--spc-f-tafel); letter-spacing: .04em; text-transform: uppercase; fill: var(--spc-kreide); paint-order: stroke; stroke: var(--spc-tafel); stroke-width: 4px; }
.spc-netz__station:hover circle, .spc-netz__station:focus circle { r: 10; }
.spc-netz__station:hover text, .spc-netz__station:focus text { fill: var(--spc-led); }
.spc-netz__station--aus { opacity: .3; }
.spc-netz__legende { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.25rem; margin-top: .75rem; font-size: .92rem; color: var(--spc-kreide); }
.spc-punkt { display: inline-block; width: .7rem; height: .7rem; margin-right: .4rem; border-radius: 50%; vertical-align: -.05rem; border: 2px solid var(--spc-grau-hell); }
.spc-punkt--offen { background: var(--spc-led); border-color: var(--spc-led); }
.spc-punkt--spaeter { border-color: var(--spc-led); }

.spc-linien { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.spc-linie { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; background: var(--spc-karte); border: 2px solid var(--spc-tafel); border-radius: var(--spc-r); text-decoration: none; transition: background-color .15s; }
.spc-linie:hover { background: #fff; }
.spc-linie__nr { display: inline-grid; place-items: center; min-width: 2.6rem; padding: .25rem .3rem; background: var(--spc-tafel); color: var(--spc-led); border-radius: 3px; font-size: .9rem; }
.spc-linie__name { font: 800 1.2rem/1.05 var(--spc-f-tafel); text-transform: uppercase; }
.spc-linie__zahl { margin-left: auto; color: var(--spc-text-2); font-size: .9rem; }

/* =========================================================
 * 12. Inhalt (Leseflaeche)
 * ======================================================= */
.spc-inhalt { padding-top: 2.5rem; padding-bottom: 3rem; }
.spc-inhalt > p, .spc-inhalt > ul:not(.spc-linien):not(.spc-kacheln), .spc-inhalt > ol, .spc-inhalt > h3, .spc-inhalt > blockquote { max-width: 46rem; }
.spc-inhalt > h2 { margin-top: 2.25rem; padding-top: .9rem; border-top: 4px solid var(--spc-tafel); }
.spc-inhalt > h2:first-child { margin-top: 0; }
.spc-inhalt--start { padding-top: 0; }
.spc-inhalt ul li::marker { color: var(--spc-led-tief); }
.spc-inhalt blockquote { margin: 1.5rem 0; padding: .75rem 1.25rem; border-left: 6px solid var(--spc-led); background: var(--spc-karte); font-size: 1.1rem; }
/* Content-Tabellen (Ratgeber, Laendervergleich): Muster 01 unter 720px */
.spc-inhalt > table, .spc-inhalt .spc-tabelle { width: 100%; border-collapse: collapse; background: var(--spc-karte); border: 2px solid var(--spc-tafel); border-radius: 6px; overflow: hidden; font-size: .98rem; }
.spc-inhalt > table th, .spc-inhalt > table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--spc-linie); vertical-align: top; }
.spc-inhalt > table thead th { background: var(--spc-tafel); color: var(--spc-kreide); font: 700 .85rem/1.2 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; }
.spc-inhalt > table caption { caption-side: top; text-align: left; padding: .6rem .75rem; font: 700 .85rem/1.3 var(--spc-f-tafel); letter-spacing: .08em; text-transform: uppercase; color: var(--spc-text-2); border-bottom: 1px solid var(--spc-linie); }
@media (max-width: 720px) {
	.spc-inhalt > table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.spc-inhalt > table, .spc-inhalt > table caption, .spc-inhalt > table tbody, .spc-inhalt > table tr, .spc-inhalt > table td, .spc-inhalt > table th { display: block; }
	.spc-inhalt > table tr { border-bottom: 2px solid var(--spc-tafel); padding: .4rem 0; }
	.spc-inhalt > table td { border: 0; display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .75rem; }
	.spc-inhalt > table td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--spc-text-2); }
}

/* Hausfoto der Stadtseite (Wikimedia Commons, Nachweis in figcaption) */
.spc-hausfoto { margin: 0 0 2rem; }
.spc-hausfoto img { display: block; width: 100%; height: auto; max-height: 30rem; object-fit: cover; border: 2px solid var(--spc-tafel); border-radius: 6px; }
.spc-hausfoto figcaption { margin-top: .4rem; font-size: .8rem; color: var(--spc-text-2); }
.spc-hausfoto figcaption a { color: inherit; }

.spc-illu { margin: 0 0 2rem; max-width: 46rem; }
.spc-illu img { display: block; width: 100%; height: auto; border-radius: 6px; }
.spc-illu--portraet { max-width: 14rem; }

/* Faktenbox / Zahlenkacheln aus dem Content */
.spc-kacheln { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin: 0 0 2rem; padding: 0; list-style: none; }
.spc-kacheln li { padding: .9rem 1rem; background: var(--spc-tafel); color: var(--spc-kreide); border-radius: 6px; }
.spc-kacheln strong { display: block; font: 400 1.9rem/1 var(--spc-f-mono); color: var(--spc-led); margin-bottom: .35rem; }

/* =========================================================
 * 13. Datenblatt mit Reitern (Element-Pick tabs-morph, ohne GSAP)
 * ======================================================= */
.spc-datenblatt { margin: 0 0 2.5rem; padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem); background: var(--spc-karte); border: 2px solid var(--spc-tafel); border-radius: 8px; }
.spc-datenblatt__titel { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); margin-bottom: 1rem; }
.spc-reiter { position: relative; display: flex; gap: .25rem; margin: 0 0 1.25rem; padding: 4px; background: var(--spc-tafel); border-radius: 6px; overflow: hidden; }
.spc-reiter__knopf {
	position: relative; z-index: 1; flex: 1 1 0; min-height: 44px; padding: .55rem .75rem;
	border: 0; border-radius: 4px; background: transparent; color: var(--spc-kreide); cursor: pointer;
	font: 800 1.1rem/1 var(--spc-f-tafel); letter-spacing: .08em; text-transform: uppercase; transition: color .2s;
}
.spc-reiter__knopf[aria-selected="true"] { color: var(--spc-tafel); }
.spc-reiter__balken { /* gleitender Balken; Position/Breite setzt functions.js als Custom Properties */
	position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--spc-balken-b, 0);
	transform: translateX(var(--spc-balken-x, 0)); background: var(--spc-led); border-radius: 4px;
	transition: transform .38s cubic-bezier(.3, 1.35, .5, 1), width .38s cubic-bezier(.3, 1.35, .5, 1);
}
.spc-reiter__panel { margin-bottom: 1.25rem; }
.spc-reiter__h { font-size: 1.4rem; text-transform: uppercase; margin: 0 0 .75rem; }
.spc-js .spc-reiter-an .spc-reiter__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.spc-js .spc-reiter-an .spc-reiter__panel[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .spc-reiter__balken { transition: none; } }

.spc-wochenplan, .spc-felder { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .98rem; }
.spc-wochenplan caption { text-align: left; font: 700 .85rem/1.2 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-text-2); padding-bottom: .4rem; }
.spc-wochenplan th, .spc-wochenplan td, .spc-felder th, .spc-felder td { padding: .55rem .6rem; text-align: left; border-bottom: 1px solid var(--spc-linie); vertical-align: top; }
.spc-felder td { overflow-wrap: anywhere; }
.spc-wochenplan thead th { font: 700 .8rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-text-2); }
.spc-wochenplan tbody th { font-weight: 700; }
.spc-wochenplan td .spc-mono { white-space: nowrap; }
@media (max-width: 420px) { .spc-wochenplan th, .spc-wochenplan td { padding: .5rem .3rem; font-size: .9rem; } .spc-wochenplan .spc-heute th::after { display: block; width: max-content; margin: .2rem 0 0; } }
.spc-wochenplan .spc-heute { background: var(--spc-tafel); color: var(--spc-kreide); }
.spc-wochenplan .spc-heute th::after { content: "heute"; margin-left: .5rem; padding: .05rem .35rem; border-radius: 3px; background: var(--spc-led); color: var(--spc-tafel); font: 400 .7rem/1.4 var(--spc-f-mono); text-transform: uppercase; }
.spc-wochenplan .spc-heute .spc-zu { color: var(--spc-grau-hell); }
.spc-felder th { width: 38%; font-weight: 700; }
.spc-wert { font-weight: 700; }
.spc-beleg { display: inline-flex; gap: .3rem; margin-left: .35rem; padding: .05rem .4rem; border: 1px solid var(--spc-linie); border-radius: 3px; font: 400 .75rem/1.5 var(--spc-f-mono); color: var(--spc-text-2); text-decoration: none; white-space: nowrap; vertical-align: .08em; }
.spc-wochenplan__beleg { margin: .4rem 0 1rem; font-size: .85rem; color: var(--spc-text-2); }
.spc-wochenplan__beleg .spc-beleg { margin-left: .15rem; }
.spc-beleg:hover { border-color: var(--spc-led-tief); color: var(--spc-text); }
.spc-beleg__art { text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 560px) {
	.spc-felder th, .spc-felder td { display: block; width: auto; }
	.spc-felder th { padding-bottom: 0; border: 0; font-size: .85rem; color: var(--spc-text-2); }
}

.spc-aushang { display: grid; gap: 1rem; margin: 0 0 1rem; }
@media (min-width: 760px) { .spc-aushang { grid-template-columns: 1fr 1fr; } }
.spc-aushang__block { padding: .9rem 1rem; background: #FFF6EC; border: 2px dashed var(--spc-led-tief); border-radius: 6px; }
.spc-aushang__titel { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; }
.spc-aushang ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.spc-aushang li + li { margin-top: .4rem; }
.spc-aushang time { margin-right: .35rem; color: var(--spc-led-tief); }
.spc-datenblatt__fuss { margin: 0; font-size: .85rem; color: var(--spc-text-2); }

/* =========================================================
 * 14. Anzeige-Box und Anbieterliste (Muster 01: Zeile endet im CTA)
 * ======================================================= */
.spc-anzeige { margin: 3rem 0 1rem; padding: 1.25rem clamp(1rem, 2.5vw, 1.5rem); border: 2px dashed var(--spc-grau); border-radius: 8px; background: var(--spc-beton); }
.spc-anzeige__marke { display: inline-block; margin: 0 0 .5rem; padding: .1rem .45rem; background: var(--spc-grau); color: #fff; font: 400 .75rem/1.4 var(--spc-f-mono); text-transform: uppercase; letter-spacing: .08em; border-radius: 3px; }
.spc-anzeige__titel { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }
.spc-anzeige__mehr { margin: .5rem 0 0; font-weight: 700; }
.spc-anb { width: 100%; border-collapse: collapse; margin: 0 0 .75rem; font-size: .95rem; }
.spc-anb th, .spc-anb td { padding: .6rem .6rem; text-align: left; border-bottom: 1px solid var(--spc-linie); vertical-align: middle; }
.spc-anb thead th { font: 700 .8rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-text-2); }
.spc-anb__name { font: 800 1.3rem/1 var(--spc-f-tafel); text-transform: uppercase; }
.spc-anb__cta { text-align: right; white-space: nowrap; }
.spc-rg-zeile { margin: 0 0 .5rem; font-size: .85rem; color: var(--spc-text-2); }
@media (max-width: 720px) {
	.spc-anb thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.spc-anb, .spc-anb tbody, .spc-anb tr, .spc-anb th, .spc-anb td { display: block; }
	.spc-anb tr { padding: .75rem 0; border-bottom: 2px solid var(--spc-tafel); }
	.spc-anb th, .spc-anb td { border: 0; padding: .2rem 0; }
	.spc-anb td[data-label] { display: flex; justify-content: space-between; gap: 1rem; }
	.spc-anb td[data-label]::before { content: attr(data-label); color: var(--spc-text-2); }
	.spc-anb .spc-beleg { display: none; }
	.spc-anb__cta { text-align: left; padding-top: .5rem !important; }
	.spc-anb__cta .spc-knopf { width: 100%; }
}

/* =========================================================
 * 15. Fuss
 * ======================================================= */
.spc-fuss { background: var(--spc-tafel); color: #C9C7C0; padding: 2.5rem 0 2rem; font-size: .92rem; border-top: 6px solid #0B0C0E; }
.spc-fuss__oben { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.spc-fuss__nav ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.spc-fuss__nav a { color: var(--spc-kreide); text-decoration: none; }
.spc-fuss__nav a:hover { color: var(--spc-led); }
.spc-rg { display: grid; gap: .5rem; }
.spc-rg__text { margin: 0; color: var(--spc-kreide); font-weight: 700; display: flex; align-items: center; gap: .6rem; }
.spc-rg__18 { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border: 2px solid var(--spc-led); border-radius: 50%; color: var(--spc-led); font: 400 .8rem/1 var(--spc-f-mono); }
.spc-rg__hilfe { margin: 0; }
.spc-rg__hilfe a { color: var(--spc-kreide); }
.spc-rg__siegel { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .5rem 0 0; padding: 0; }
.spc-rg__siegel a { display: inline-block; padding: .35rem .7rem; border: 1px solid var(--spc-tafel-3); border-radius: 999px; color: var(--spc-kreide); text-decoration: none; font-size: .85rem; }
.spc-rg__siegel a:hover { border-color: var(--spc-led); }
.spc-fuss__recht { margin: 1.5rem 0 0; font-size: .8rem; color: var(--spc-grau-hell); }

/* =========================================================
 * 16. Methodik-Box (Snippet methodik-box.php)
 * ======================================================= */
.ig-methodik { margin-top: 2.5rem; padding: .9rem 1rem; border-top: 4px solid var(--spc-tafel); background: var(--spc-karte); font-size: .9rem; color: var(--spc-text-2); max-width: 46rem; }
.ig-methodik__label { font: 700 .8rem/1 var(--spc-f-tafel); letter-spacing: .12em; text-transform: uppercase; color: var(--spc-text); margin-right: .25rem; }
.ig-methodik__sep { margin: 0 .35rem; color: var(--spc-led-tief); }

/* =========================================================
 * 17. KI-Bild-Kennzeichnung, AI Act Art. 50 (Snippet ki-bild.php)
 * ======================================================= */
.ki-bild { position: relative; margin: 0; display: block; }
.ki-bild img { display: block; max-width: 100%; height: auto; }
.ki-bild__badge { position: absolute; right: .6rem; bottom: .6rem; padding: .25rem .55rem; font: 600 .75rem/1 system-ui, sans-serif; letter-spacing: .02em; color: #fff; background: rgba(0,0,0,.72); border-radius: .3rem; pointer-events: none; }
.ki-bild figcaption { font-size: .85rem; opacity: .8; margin-top: .35rem; }
.ki-bild--caption .ki-bild__badge { bottom: calc(.6rem + 1.8em); }

/* Bilder aus dem Content mit Quellen-Caption (Wikimedia, Konzept §7) */
.spc-inhalt figure { margin: 0 0 1.5rem; }
.spc-inhalt figcaption { font-size: .82rem; color: var(--spc-text-2); margin-top: .35rem; }

/* =========================================================
 * 18. Bewegung reduzieren: Endzustand sofort
 * ======================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =========================================================
 * 19. Nachtraege Stopp 2
 * ======================================================= */
.spc-anb-wrap { margin: 0 0 2rem; }
.spc-anb-wrap .spc-muster, .spc-anzeige .spc-muster { margin-top: .25rem; }
.spc-anzeige__abgrenzung { margin: .6rem 0 0; font-size: .82rem; color: var(--spc-text-2); }
.spc-anzeige__klaersatz { margin: 0 0 .6rem; font-size: .82rem; color: var(--spc-text-2); }