/* Spieler & Seeberger - Region-Seiten.
* Erzeugt von build_css_v4.py aus dem freigegebenen Canvas.
* Jede Regel haengt unter .ssp-seite: nichts faerbt auf Kopfzeile,
* Navigation oder Fusszeile der Website ab.
* Geladen vom mu-plugin ss-region-design.php, nur auf /region/-Seiten.
*
* Der Behaelter .ssp-seite muss im Seiteninhalt stehen. Fehlt er, trifft
* KEINE Regel dieser Datei - die Seite laedt sie und sieht trotzdem
* ungestaltet aus. Genau so ging die erste v4-Seite live. */
/* ============================================================
Mobile-first aus der 390er-Zeichenflaeche. Desktop-Regeln,
die sich unterscheiden, ab 900px. Erzeugt von build_canvas.py.
============================================================ */.ssp-seite{; background:#F6F7F9; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color:#333333; }
.ssp-seite a{ color:#1F4175; }
.ssp-seite a:hover{ color:#16305A; }
.ssp-seite .ssp-head{ font-weight:300; letter-spacing:-.012em; }
.ssp-seite .ssp-tnum{ font-variant-numeric: tabular-nums; }
.ssp-seite .ssp-kicker{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin:0; }
.ssp-seite .ssp-card{ background:#FFFFFF; border-radius:10px; box-shadow:0 1px 2px rgba(31,65,117,.06), 0 14px 34px -22px rgba(31,65,117,.45); }
.ssp-seite .ssp-pill{ display:flex; align-items:center; justify-content:center; gap:10px; background:#EB8C3D; color:#000000; padding:16px 22px; border-radius:100px; font-size:16.5px; font-weight:600; }
.ssp-seite .ssp-sec{ padding:38px 20px 0; }
.ssp-seite .ssp-lede{ font-size:15.5px; line-height:1.6; color:#4A525E; margin:0; }
.ssp-seite .ssp-fine{ font-size:12px; line-height:1.5; color:#8A93A0; margin:0; }
.ssp-seite .ssp-usp{ font-size:12.5px; line-height:1.5; color:#8A93A0; margin:11px 0 0; text-align:center; }
.ssp-seite .ssp-chip{ font-size:13px; font-weight:600; padding:6px 11px; border-radius:20px; background:#EBEFF4; color:#4A525E; }
.ssp-seite .ssp-quarter{ border-left:2.5px solid #1F4175; padding-left:14px; }
.ssp-seite .ssp-quarter b{ font-size:15px; }
.ssp-seite .ssp-quarter span{ display:block; font-size:14.5px; color:#5B6470; margin-top:3px; line-height:1.55; }
/* Seitenabstand auf dem Telefon - der Canvas liefert ihn nicht mit. */.ssp-seite .ssp-narrow{ max-width:100%; margin:0 auto; padding:0 20px; }
.ssp-seite .ssp-wide{ max-width:100%; margin:0 auto; padding:0 20px; }
.ssp-seite .ssp-mid{ max-width:100%; margin:0 auto; padding:0 20px; }
@media (min-width: 900px){.ssp-seite .ssp-head{ font-weight:300; letter-spacing:-.014em; }
.ssp-seite .ssp-kicker{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin:0; }
.ssp-seite .ssp-card{ background:#FFFFFF; border-radius:12px; box-shadow:0 1px 2px rgba(31,65,117,.06), 0 18px 40px -26px rgba(31,65,117,.45); }
.ssp-seite .ssp-pill{ display:inline-flex; align-items:center; justify-content:center; gap:11px; background:#EB8C3D; color:#000000; padding:16px 30px; border-radius:100px; font-size:17px; font-weight:600; }
.ssp-seite .ssp-lede{ font-size:17px; line-height:1.62; color:#4A525E; margin:0; }
.ssp-seite .ssp-fine{ font-size:13px; line-height:1.5; color:#8A93A0; margin:0; }
/* Breiten folgen dem Argument, nicht dem Raster. */.ssp-seite .ssp-narrow{ max-width:760px; margin:0 auto; padding:0 40px; }
.ssp-seite .ssp-mid{ max-width:1000px; margin:0 auto; padding:0 40px; }
.ssp-seite .ssp-wide{ max-width:1120px; margin:0 auto; padding:0 40px; }}
/* ============================================================
Stufe 2: aus Inline-Stilen geloeste, responsive Regeln.
80 Elemente betroffen. Grundlage ist das Telefon, ab 900px gilt
der Wert aus der Desktop-Zeichenflaeche.
============================================================ */.ssp-seite .ssp-r01{ font-size:28.5px; }
.ssp-seite .ssp-r02{ font-size:14.8px; }
.ssp-seite .ssp-r03{ font-size:14px; }
.ssp-seite .ssp-r04{ font-size:10.9px; }
.ssp-seite .ssp-r05{ width:100%; max-width:70px; }
.ssp-seite .ssp-r06{ width:100%; max-width:70px; }
.ssp-seite .ssp-r07{ font-size:12.5px; }
.ssp-seite .ssp-r08{ font-size:13.3px; }
.ssp-seite .ssp-r09{ grid-template-columns:1fr; }
.ssp-seite .ssp-r10{ font-size:22.6px; }
.ssp-seite .ssp-r11{ font-size:8.2px; }
.ssp-seite .ssp-r12{ font-size:22.3px; }
.ssp-seite .ssp-r13{ font-size:12.5px; }
.ssp-seite .ssp-r14{ font-size:10.1px; }
.ssp-seite .ssp-r15{ font-size:11.3px; }
.ssp-seite .ssp-r16{ font-size:7.8px; }
.ssp-seite .ssp-r17{ font-size:7.8px; }
.ssp-seite .ssp-r18{ font-size:7.8px; }
.ssp-seite .ssp-r19{ font-size:7.8px; }
.ssp-seite .ssp-r20{ font-size:22.6px; }
.ssp-seite .ssp-r21{ font-size:18.7px; }
.ssp-seite .ssp-r22{ font-size:13.3px; }
.ssp-seite .ssp-r23{ font-size:12.5px; }
.ssp-seite .ssp-r24{ font-size:13.3px; }
.ssp-seite .ssp-r25{ font-size:12.5px; }
.ssp-seite .ssp-r26{ font-size:25px; }
.ssp-seite .ssp-r27{ font-size:14px; }
.ssp-seite .ssp-r28{ font-size:10.9px; }
.ssp-seite .ssp-r29{ font-size:27.3px; }
.ssp-seite .ssp-r30{ font-size:14.4px; }
.ssp-seite .ssp-r31{ grid-template-columns:1fr; }
.ssp-seite .ssp-r32{ font-size:12.5px; }
.ssp-seite .ssp-r33{ font-size:11.7px; }
.ssp-seite .ssp-r34{ font-size:12.5px; }
.ssp-seite .ssp-r35{ font-size:11.7px; }
.ssp-seite .ssp-r36{ font-size:12.5px; }
.ssp-seite .ssp-r37{ font-size:11.7px; }
.ssp-seite .ssp-r38{ font-size:12.5px; }
.ssp-seite .ssp-r39{ font-size:11.7px; }
.ssp-seite .ssp-r40{ font-size:12.5px; }
.ssp-seite .ssp-r41{ font-size:11.7px; }
.ssp-seite .ssp-r42{ font-size:12.5px; }
.ssp-seite .ssp-r43{ font-size:11.7px; }
.ssp-seite .ssp-r44{ font-size:21.1px; }
.ssp-seite .ssp-r45{ font-size:11.7px; }
.ssp-seite .ssp-r46{ grid-template-columns:1fr; }
.ssp-seite .ssp-r47{ font-size:13.3px; }
.ssp-seite .ssp-r48{ font-size:21.1px; }
.ssp-seite .ssp-r49{ font-size:20.3px; }
.ssp-seite .ssp-r50{ font-size:13.3px; }
.ssp-seite .ssp-r51{ font-size:21.1px; }
.ssp-seite .ssp-r52{ font-size:25px; }
.ssp-seite .ssp-r53{ font-size:12.5px; }
.ssp-seite .ssp-r54{ font-size:12.5px; }
.ssp-seite .ssp-r55{ font-size:12.5px; }
.ssp-seite .ssp-r56{ font-size:25px; }
.ssp-seite .ssp-r57{ font-size:11.7px; }
.ssp-seite .ssp-r58{ font-size:11.7px; }
.ssp-seite .ssp-r59{ font-size:11.7px; }
.ssp-seite .ssp-r60{ font-size:11.7px; }
.ssp-seite .ssp-r61{ font-size:11.7px; }
.ssp-seite .ssp-r62{ font-size:11.7px; }
.ssp-seite .ssp-r63{ font-size:11.7px; }
.ssp-seite .ssp-r64{ grid-template-columns:1fr; }
.ssp-seite .ssp-r65{ width:100%; max-width:104px; }
.ssp-seite .ssp-r66{ width:100%; max-width:104px; }
.ssp-seite .ssp-r67{ font-size:12.5px; }
.ssp-seite .ssp-r68{ font-size:10.9px; }
.ssp-seite .ssp-r69{ font-size:25px; }
.ssp-seite .ssp-r70{ font-size:13.3px; }
.ssp-seite .ssp-r71{ font-size:14px; }
.ssp-seite .ssp-r72{ font-size:13.3px; }
.ssp-seite .ssp-r73{ font-size:23.4px; }
.ssp-seite .ssp-r74{ width:100%; max-width:140px; font-size:12.1px; }
.ssp-seite .ssp-r75{ font-size:12.1px; }
.ssp-seite .ssp-r76{ width:100%; max-width:140px; font-size:12.1px; }
.ssp-seite .ssp-r77{ font-size:12.1px; }
.ssp-seite .ssp-r78{ width:100%; max-width:140px; font-size:12.1px; }
.ssp-seite .ssp-r79{ font-size:12.1px; }
.ssp-seite .ssp-r80{ font-size:14px; }
@media (min-width: 900px){.ssp-seite .ssp-r01{ font-size:46px; }
.ssp-seite .ssp-r02{ font-size:19px; }
.ssp-seite .ssp-r03{ font-size:18px; }
.ssp-seite .ssp-r04{ font-size:14px; }
.ssp-seite .ssp-r05{ width:70px; }
.ssp-seite .ssp-r06{ width:70px; }
.ssp-seite .ssp-r07{ font-size:16px; }
.ssp-seite .ssp-r08{ font-size:17px; }
.ssp-seite .ssp-r09{ grid-template-columns:1fr 1fr; }
.ssp-seite .ssp-r10{ font-size:29px; }
.ssp-seite .ssp-r11{ font-size:10.5px; }
.ssp-seite .ssp-r12{ font-size:36px; }
.ssp-seite .ssp-r13{ font-size:16px; }
.ssp-seite .ssp-r14{ font-size:13px; }
.ssp-seite .ssp-r15{ font-size:14.5px; }
.ssp-seite .ssp-r16{ font-size:10px; }
.ssp-seite .ssp-r17{ font-size:10px; }
.ssp-seite .ssp-r18{ font-size:10px; }
.ssp-seite .ssp-r19{ font-size:10px; }
.ssp-seite .ssp-r20{ font-size:29px; }
.ssp-seite .ssp-r21{ font-size:24px; }
.ssp-seite .ssp-r22{ font-size:17px; }
.ssp-seite .ssp-r23{ font-size:16px; }
.ssp-seite .ssp-r24{ font-size:17px; }
.ssp-seite .ssp-r25{ font-size:16px; }
.ssp-seite .ssp-r26{ font-size:32px; }
.ssp-seite .ssp-r27{ font-size:18px; }
.ssp-seite .ssp-r28{ font-size:14px; }
.ssp-seite .ssp-r29{ font-size:44px; }
.ssp-seite .ssp-r30{ font-size:18.5px; }
.ssp-seite .ssp-r31{ grid-template-columns:repeat(3,1fr); }
.ssp-seite .ssp-r32{ font-size:16px; }
.ssp-seite .ssp-r33{ font-size:15px; }
.ssp-seite .ssp-r34{ font-size:16px; }
.ssp-seite .ssp-r35{ font-size:15px; }
.ssp-seite .ssp-r36{ font-size:16px; }
.ssp-seite .ssp-r37{ font-size:15px; }
.ssp-seite .ssp-r38{ font-size:16px; }
.ssp-seite .ssp-r39{ font-size:15px; }
.ssp-seite .ssp-r40{ font-size:16px; }
.ssp-seite .ssp-r41{ font-size:15px; }
.ssp-seite .ssp-r42{ font-size:16px; }
.ssp-seite .ssp-r43{ font-size:15px; }
.ssp-seite .ssp-r44{ font-size:34px; }
.ssp-seite .ssp-r45{ font-size:15px; }
.ssp-seite .ssp-r46{ grid-template-columns:1fr auto 1fr; }
.ssp-seite .ssp-r47{ font-size:17px; }
.ssp-seite .ssp-r48{ font-size:27px; }
.ssp-seite .ssp-r49{ font-size:26px; }
.ssp-seite .ssp-r50{ font-size:17px; }
.ssp-seite .ssp-r51{ font-size:27px; }
.ssp-seite .ssp-r52{ font-size:32px; }
.ssp-seite .ssp-r53{ font-size:16px; }
.ssp-seite .ssp-r54{ font-size:16px; }
.ssp-seite .ssp-r55{ font-size:16px; }
.ssp-seite .ssp-r56{ font-size:32px; }
.ssp-seite .ssp-r57{ font-size:15px; }
.ssp-seite .ssp-r58{ font-size:15px; }
.ssp-seite .ssp-r59{ font-size:15px; }
.ssp-seite .ssp-r60{ font-size:15px; }
.ssp-seite .ssp-r61{ font-size:15px; }
.ssp-seite .ssp-r62{ font-size:15px; }
.ssp-seite .ssp-r63{ font-size:15px; }
.ssp-seite .ssp-r64{ grid-template-columns:1fr 1.75fr; }
.ssp-seite .ssp-r65{ width:104px; }
.ssp-seite .ssp-r66{ width:104px; }
.ssp-seite .ssp-r67{ font-size:16px; }
.ssp-seite .ssp-r68{ font-size:14px; }
.ssp-seite .ssp-r69{ font-size:32px; }
.ssp-seite .ssp-r70{ font-size:17px; }
.ssp-seite .ssp-r71{ font-size:18px; }
.ssp-seite .ssp-r72{ font-size:17px; }
.ssp-seite .ssp-r73{ font-size:30px; }
.ssp-seite .ssp-r74{ width:140px; font-size:15.5px; }
.ssp-seite .ssp-r75{ font-size:15.5px; }
.ssp-seite .ssp-r76{ width:140px; font-size:15.5px; }
.ssp-seite .ssp-r77{ font-size:15.5px; }
.ssp-seite .ssp-r78{ width:140px; font-size:15.5px; }
.ssp-seite .ssp-r79{ font-size:15.5px; }
.ssp-seite .ssp-r80{ font-size:18px; }}
/* ===========================================================================
Feinschliff nach der Durchsicht am 22.08.2026. Jede Regel hat eine Messung
hinter sich, keine ist Geschmack.
=========================================================================== */
/* 1) Gleiche Kartenhoehe. Gemessen: 210 px gegen 293 px.
Die Spalte wird zur Flexsaeule, die Karte fuellt den Rest aus. */
.ssp-seite .ssp-wide:not(.ssp-raster) > div{ display:flex; flex-direction:column; }
.ssp-seite .ssp-wide:not(.ssp-raster) > div > .ssp-card{ flex:1 1 auto; }
/* 2) Tabellen. | steht per Browser-Voreinstellung auf center, | auf left -
genau das sah Steven als "not aligned". Beide links, Zahlen brechen nicht um. */
.ssp-seite table.ssp-tnum{ width:100%; border-collapse:collapse; }
.ssp-seite table.ssp-tnum th,
.ssp-seite table.ssp-tnum td{ text-align:left; vertical-align:baseline; padding:10px 18px 10px 0; }
.ssp-seite table.ssp-tnum th{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
font-weight:700; color:#8A93A0; padding-bottom:13px; white-space:nowrap; }
.ssp-seite table.ssp-tnum td{ white-space:nowrap; font-size:15px; }
.ssp-seite table.ssp-tnum td:first-child{ white-space:normal; }
.ssp-seite table.ssp-tnum tbody tr + tr td{ border-top:1px solid #EEF1F4; }
.ssp-seite table.ssp-tnum th:last-child,
.ssp-seite table.ssp-tnum td:last-child{ padding-right:0; }
/* 3) Eine Kante statt drei. Ueberschrift 1000, Raster 1200, Prosa 760 standen
uebereinander; das Raster ragte ueber alles hinaus. Es folgt jetzt der
Breite seiner eigenen Ueberschrift. */
.ssp-seite .ssp-raster{ max-width:1000px; }
/* 7) Zahlenspalten rechtsbuendig. Bei width:100% verteilt der Browser den
Ueberschuss auf alle Spalten; linksbuendige Zahlen rutschen dann an den
linken Rand ihrer breiten Spalte und rechts bleibt eine tote Flaeche -
gemessen ~185 px hinter "Mitte der Spanne". Rechtsbuendig stehen die
Betraege untereinander und die Spalte endet dort, wo die Karte endet.
ssp-tab1: eine Textspalte (Objekt), Rest Zahlen.
ssp-tab2: zwei Textspalten (Adresse, Stadtteil), Rest Zahlen. */
.ssp-seite .ssp-tab1 th:not(:first-child),
.ssp-seite .ssp-tab1 td:not(:first-child),
.ssp-seite .ssp-tab2 th:nth-child(n+3),
.ssp-seite .ssp-tab2 td:nth-child(n+3){ text-align:right; }
/* 8) Der Strassenblock steht auf text-align:center; die Karte erbt das, und die
Fusszeile stand mittig unter einer linksbuendigen Tabelle. */
.ssp-seite .ssp-card{ text-align:left; }
/* 5) Eine linke Kante fuer Raster und Prosa. Gemessen: Kacheln beginnen bei
x=140, die Prosa bei x=260. Der Absatz behaelt seine Lesebreite, rueckt
aber an dieselbe Kante wie die Kacheln darueber. */
.ssp-seite .ssp-prosa{ max-width:1000px; }
.ssp-seite .ssp-prosa p{ max-width:74ch; margin-left:0; margin-right:auto; text-align:left; }
/* 6) Der Satz unter der Preistabelle sass buendig an der letzten Zeile und las
sich wie eine vierte Tabellenzeile. */
.ssp-seite .ssp-tabsatz{ margin-top:20px; padding-top:18px; border-top:1px solid #EEF1F4; }
/* 4) Die Strassentabelle schrumpfte auf 463 px in einer 760 px breiten Karte.
Regel 2 gibt ihr die volle Breite; hier nur noch die Fusszeile darunter. */
.ssp-seite .ssp-card > .ssp-fine{ margin-top:14px; }
/* ===========================================================================
Overlay, Einladungskarte, Tabellenband. Freigegeben 22.08.2026.
Die Overlay-Regeln haengen NICHT unter .ssp-seite: das Overlay wird zur
Laufzeit an gehaengt, damit der Kopfbereich der Website sich nicht
darueberlegt. Unter .ssp-seite gescopt traefen sie danach nichts mehr.
Der Rechner liegt nicht mehr im Seitenfluss: sein Ergebnis ist mal hoeher,
mal niedriger als der Schritt davor, und der Text darunter verschob sich
jedes Mal unter dem Leser weg.
=========================================================================== */
.ssp-ovl[hidden]{ display:none; }
/* z-index GEMESSEN, nicht geraten: die Website haelt eigene feste Elemente
auf 9.999.999 (Kopfbereich, sticky-mobile-buttons). Darueber muss das
Overlay liegen. Der Cookie-Banner steht auf 99.999.999 und bleibt
bewusst oben - eine Einwilligung darf nichts verdecken. */
.ssp-ovl{ position:fixed; inset:0; z-index:10000000;
display:flex; align-items:center; justify-content:center; }
.ssp-ovl-hg{ position:absolute; inset:0; background:rgba(16,26,44,.55); }
.ssp-ovl-karte{ position:relative; background:#FFFFFF; border-radius:16px;
width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow-y:auto;
padding:26px 24px 30px; box-shadow:0 30px 80px -30px rgba(16,26,44,.6); text-align:left; }
/* GEMESSEN 22.08.2026: mit position:sticky + float:right lag der Knopf zwar
sichtbar an seiner Stelle (34x38 bei 892,22), aber elementFromPoint lieferte
dort MAIN - ein echter Mausklick ging daneben und schloss nichts. Sticky in
einem scrollenden Behaelter mit Float ist zu wackelig. Fest verankert am
Kartenrand, mit eigener Stapelebene und grosszuegiger Klickflaeche. */
.ssp-ovl-zu{ position:absolute; top:10px; right:12px; z-index:3;
border:0; background:#FFFFFF; border-radius:50%; width:38px; height:38px;
font-size:26px; line-height:1; color:#5B6470; cursor:pointer; padding:0;
display:flex; align-items:center; justify-content:center; }
.ssp-ovl-zu:hover,
.ssp-ovl-zu:focus-visible{ color:#1F4175; box-shadow:0 0 0 2px #1F4175; }
/* Auf dem Telefon eine Flaeche von unten, keine schwebende Karte. */
@media (max-width: 700px){
.ssp-ovl{ align-items:flex-end; }
.ssp-ovl-karte{ width:100vw; max-height:92vh; border-radius:18px 18px 0 0; }
}
/* Die Einladungskarte fuellt ihre Spalte, der Knopf sitzt auf voller Breite. */
.ssp-seite .ssp-card > .ssp-pill{ align-self:stretch; }
/* Das Band mit der Preistabelle. Auf schmalen Geraeten darf die Tabelle in
ihrem eigenen Behaelter rollen - der Seitenkoerper nie. */
.ssp-seite .ssp-band{ margin-top:26px; }
.ssp-seite .ssp-rolle{ overflow-x:auto; }
/* Stadtteil-Raster, Abschnitt 3. Eigene Klasse statt .ssp-r31: das Markup wird
vom mu-plugin erzeugt und soll nicht an einer durchnummerierten
Zeichenflaechen-Klasse haengen, die sich beim naechsten Export verschiebt.
Grundregel AUSSERHALB der Media Query - eine Regel, die es nur dort gibt,
gibt es auf dem Telefon nicht. */
.ssp-seite .ssp-raster{ display:grid; grid-template-columns:1fr; gap:26px 34px; margin-top:44px; }
@media (min-width: 900px){ .ssp-seite .ssp-raster{ grid-template-columns:repeat(3,1fr); } }
|