/* ============================================================
   Stadtseiten — eigene Formensprache

   Grundgedanke: Alles in dieser Region liegt an EINER Achse, dem
   Lennetal mit B236 und B229. Die Häuser liegen darauf. Das ist keine
   Deko, sondern das Verkaufsargument — deshalb ist die Talachse das
   tragende Element und nicht eine Fahrzeiten-Tabelle.

   Zwei Ebenen: warme Marke für Aussagen, kühles Graphit + Mono für
   alles Messbare. Das unterscheidet Industriedienstleister von Boutique.
   ============================================================ */
:root{ --graphit:#4A5459; --graphit-l:#7A868C; --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; }

.st{background:var(--paper);padding:132px 0 0}
@media(max-width:900px){.st{padding-top:112px}}
.st-krumen{font-size:.82rem;color:var(--muted);margin-bottom:20px}
.st-krumen a{color:var(--ink2);text-decoration:none}
.st-krumen a:hover{color:var(--gold-d);text-decoration:underline}
.st-vertrauen{font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);margin:0 0 12px}

.st-kopf{display:grid;grid-template-columns:1fr auto;gap:24px 44px;align-items:end;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
@media(max-width:760px){.st-kopf{grid-template-columns:1fr}}
.st-h1{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.03em;
  margin:0 0 10px;color:var(--ink)}
.st-lead{font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;color:var(--ink2);margin:0;max-width:62ch}
.st-preis{text-align:right;white-space:nowrap}
.st-preis .z{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.8rem);color:var(--gold-d);line-height:1}
.st-preis .l{font-family:var(--mono);font-size:.72rem;letter-spacing:.5px;color:var(--graphit-l);text-transform:uppercase}

/* ---------- Talachse ---------- */
.st-achse{margin:38px 0 44px;padding:26px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.st-achse-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-bottom:26px}
.st-achse-kopf b{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--graphit)}
.st-achse-kopf span{font-size:.86rem;color:var(--muted)}
.achse{width:100%;height:auto;overflow:visible}
.achse .linie{stroke:var(--graphit);stroke-width:2}
.achse .tick{stroke:var(--graphit-l);stroke-width:1}
.achse .ort{font-family:var(--sans);font-size:13px;fill:var(--ink2)}
.achse .ort.hier{font-weight:700;fill:var(--ink)}
.achse .haus{fill:var(--gold-d)}
.achse .haus-l{font-family:var(--mono);font-size:10.5px;fill:var(--gold-d);letter-spacing:.3px}
.achse .weg{font-family:var(--mono);font-size:12px;fill:var(--graphit);font-weight:600}
.achse .marke{fill:none;stroke:var(--ink);stroke-width:2}
.achse .punkt{fill:var(--graphit-l)}
.achse .hier-punkt{fill:var(--ink)}
.achse .spanne{fill:none;stroke:var(--gold-d);stroke-width:1.5;stroke-dasharray:3 3}
.achse .spanne-l{font-family:var(--mono);font-size:12.5px;font-weight:600;fill:var(--gold-d);letter-spacing:.2px}

/* ---------- Inhaltsspalten ---------- */
.st-raster{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,4vw,64px);margin-bottom:46px}
@media(max-width:860px){.st-raster{grid-template-columns:1fr;gap:32px}}
.st-raster h2{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.65rem);margin:0 0 12px;color:var(--ink);letter-spacing:-.01em}
.st-raster p{font-size:1rem;line-height:1.75;color:var(--ink2);margin:0 0 14px;max-width:64ch}

/* Messbares in Mono, kühl abgesetzt */
.st-daten{list-style:none;margin:0;padding:0}
.st-daten li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line)}
.st-daten dt,.st-daten .k{font-size:.92rem;color:var(--ink2)}
.st-daten .v{font-family:var(--mono);font-size:.86rem;color:var(--graphit);text-align:right;white-space:nowrap}

.st-kennzahl{background:var(--ink);color:#fff;padding:22px 24px;margin-bottom:18px}
.st-kennzahl b{display:block;font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--gold-l)}
.st-kennzahl span{display:block;font-size:.9rem;color:rgba(255,255,255,.7);margin-top:6px;line-height:1.5}

.st-abschnitt{margin-bottom:46px}
.st-abschnitt>h2{font-family:var(--serif);font-size:clamp(1.35rem,2.4vw,1.85rem);margin:0 0 6px;letter-spacing:-.015em}
.st-abschnitt>.s{color:var(--muted);margin:0 0 20px;font-size:.96rem}

.st-fuss-cta{display:flex;flex-wrap:wrap;gap:12px;padding:28px 0 40px;border-top:1px solid var(--line)}
.st-fuss-cta a{flex:1 1 250px;text-align:center;padding:16px 20px;text-decoration:none;font-weight:700}
.st-fuss-cta .haupt{background:var(--gold);color:#1a1206}
.st-fuss-cta .haupt:hover{background:var(--gold-d);color:#fff}
.st-fuss-cta .wa{background:#25d366;color:#08301b}
.st-fuss-cta .wa:hover{background:#1fb455}
.st-stand{font-family:var(--mono);font-size:.74rem;color:var(--graphit-l);margin:0 0 8px}

/* Wohnungskacheln auf der Stadtseite – Fahrzeit zu DIESER Stadt in Mono */
.wk-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.wk{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.wk:hover{transform:translateY(-4px)}
.wk-bild{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,#efe8dc,#e4dccd)}
.wk-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.wk:hover .wk-bild img{transform:scale(1.05)}
.wk-leer{position:absolute;inset:0;display:grid;place-items:center;font-size:1.8rem;opacity:.3}
.wk-360{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:.6rem;font-weight:600;
  padding:4px 7px;background:rgba(12,10,8,.82);color:var(--gold-l)}
.wk-sofort{position:absolute;top:8px;left:8px;font-size:.6rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:4px 7px;background:#1f7a4d;color:#fff}
.wk-name{display:block;font-family:var(--display);font-size:1.1rem;color:var(--ink);font-weight:600;padding:12px 0 3px}
.wk-fahrt{font-family:var(--mono);font-size:.72rem;color:var(--gold-d)}
.wk-fuss{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted);margin-top:6px;
  padding-top:6px;border-top:1px solid var(--line)}
.wk-pfeil{color:var(--gold-d);font-weight:600}

/* Fußzeile: Trennpunkte in EINER Zeile statt gestapelt */
.st ~ .wo-fuss .wrap,.wo-fuss .wrap{align-items:center}
.wo-fuss nav{display:flex;gap:6px;white-space:nowrap}
.wo-fuss nav a{display:inline}

/* Standorte-Übersicht: Kacheln zu den Stadtseiten */
.st-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:20px 0 60px}
.st-kachel{display:flex;flex-direction:column;gap:4px;padding:22px 22px 20px;background:#fff;
  border:1px solid var(--line);text-decoration:none;transition:.2s;position:relative}
.st-kachel:hover{border-color:var(--gold);transform:translateY(-3px)}
.st-kachel b{font-family:var(--display);font-size:1.3rem;color:var(--ink);font-weight:600}
.st-kachel>span:not(.pf){font-family:var(--mono);font-size:.72rem;letter-spacing:.4px;text-transform:uppercase;color:var(--graphit-l)}
.st-kachel .pf{margin-top:14px;color:var(--gold-d);font-weight:600;font-size:.92rem}

/* Handy: Mono-Werte duerfen umbrechen — nowrap zwang die Seite in 535px Breite (Werdohl, 20.07.) */
@media(max-width:640px){
  .st-daten li{flex-wrap:wrap}
  .st-daten .v{white-space:normal;overflow-wrap:anywhere;text-align:left}
}

/* ============================================================
   Stadtseiten v2 (20.07. nachts) — vier Konzepte, eigene Klassen
   ============================================================ */
/* --- gemeinsame Bausteine --- */
.stx-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold-d);margin:0 0 14px}
.stx-eyebrow.gold{color:var(--gold-l)}
.stx-lead{font-size:1.12rem;line-height:1.7;color:var(--ink2);max-width:62ch;margin:14px 0 0}
.stx-sub{color:var(--muted);max-width:64ch;margin:6px 0 26px}
.stx-text{max-width:70ch;line-height:1.8;color:var(--ink2);font-size:1.02rem}
.stx-text.hinweis{margin-top:14px;padding-left:16px;border-left:2px solid var(--gold)}
.stx-abschnitt{padding:clamp(48px,7vw,84px) 0}
.stx-abschnitt.paper2{background:var(--paper2)}
.stx-abschnitt h2, .sw-speichen h2, .sn-kompass h2, .sl-routen h2{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.stx-mehr{margin-top:20px}
.stx-mehr a{color:var(--gold-d);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.stx-cta{background:var(--forest);color:var(--paper);padding:clamp(36px,5vw,56px) 0}
.stx-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px}
.stx-cta-text b{display:block;font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.8rem);color:#fff}
.stx-cta-text span{color:rgba(247,243,236,.75);font-size:.96rem}
.stx-cta-knoepfe{display:flex;gap:12px;flex-wrap:wrap}
.stx-cta-knoepfe .haupt{background:var(--gold);color:#1a1206;font-weight:700;padding:15px 26px;border-radius:2px;text-decoration:none}
.stx-cta-knoepfe .haupt:hover{background:var(--gold-d);color:#fff}
.stx-cta-knoepfe .wa{background:var(--wa);color:#fff;font-weight:700;padding:15px 26px;border-radius:2px;text-decoration:none}
.st-krumen.hell a,.st-krumen.hell span{color:rgba(255,255,255,.65)}
.wk-imort{position:absolute;top:10px;left:10px;background:var(--gold);color:#1a1206;font-family:var(--mono);
  font-size:.64rem;font-weight:700;letter-spacing:1px;padding:5px 9px;border-radius:2px}

/* --- WERDOHL: Der Knoten (dunkler Kopf, Straßenschilder, Speichenrad) --- */
.sw-hero{background:var(--ink);color:#fff;padding:clamp(120px,14vw,160px) 0 clamp(44px,6vw,64px);position:relative;overflow:hidden}
.sw-hero::before{content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 47.6%,var(--gold) 47.6%,var(--gold) 48%,transparent 48%),
    linear-gradient(63deg,transparent 55.6%,var(--gold-l) 55.6%,var(--gold-l) 56%,transparent 56%)}
.sw-hero h1,.sl-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;color:#fff;margin:0}
.sw-hero h1 em,.sl-hero h1 em{font-style:normal;color:var(--gold-l)}
.sw-lead{color:rgba(255,255,255,.82);max-width:62ch;font-size:1.1rem;line-height:1.7;margin:16px 0 0}
.sw-schilder{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.schild{font-family:var(--mono);font-weight:700;letter-spacing:1px;padding:10px 18px;border-radius:4px;
  display:flex;flex-direction:column;align-items:center;line-height:1.2;font-size:1.05rem}
.schild small{font-weight:400;font-size:.62rem;letter-spacing:.6px;opacity:.85;text-transform:uppercase}
.schild.bund{background:#F6C40E;color:#14110d;border:2px solid #14110d}
.schild.autobahn{background:#154889;color:#fff;border:2px solid #fff}
.schild.bahn{background:none;color:rgba(255,255,255,.85);border:1.5px solid rgba(255,255,255,.4)}
.sw-preis{margin-top:30px;display:inline-flex;align-items:baseline;gap:12px;border-top:2px solid var(--gold);padding-top:12px}
.sw-preis b{font-family:var(--serif);font-size:2.6rem;color:var(--gold-l)}
.sw-preis span{font-family:var(--mono);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.65)}
.sw-speichen{padding:clamp(48px,7vw,84px) 0}
.sw-rad{list-style:none;margin:0;padding:0;max-width:680px}
.sw-rad li{display:flex;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.sw-rad .ziel{font-weight:700;color:var(--ink);min-width:120px}
.sw-rad .linie-zu{flex:1;border-bottom:1.5px dotted var(--gold);transform:translateY(-4px)}
.sw-rad .zeit{font-family:var(--mono);color:var(--graphit);font-size:.92rem;white-space:nowrap}
.sw-industrie{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:820px){.sw-industrie{grid-template-columns:1fr}}
.sw-zitat{margin:0;background:var(--ink);color:#fff;padding:28px;border-radius:2px;border-left:3px solid var(--gold)}
.sw-zitat b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.2;color:var(--gold-l);margin-bottom:10px}
.sw-zitat span{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.65}

/* --- PLETTENBERG: Hier wohnen wir (0-km-Tafel, 8.700-Band) --- */
.sp-hero{background:var(--paper);padding:clamp(120px,14vw,150px) 0 clamp(34px,5vw,50px)}
.sp-kopf{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,5vw,70px);align-items:center}
@media(max-width:820px){.sp-kopf{grid-template-columns:1fr}}
.sp-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;margin:0;color:var(--ink)}
.sp-hero h1 em{font-style:normal;color:var(--gold-d)}
.sp-null{background:var(--ink);color:#fff;padding:26px 34px;border-radius:2px;text-align:center;border-bottom:3px solid var(--gold)}
.sp-null b{display:block;font-family:var(--serif);font-size:4rem;line-height:1;color:var(--gold-l)}
.sp-null b small{font-size:1.3rem;margin-left:4px;color:rgba(255,255,255,.7)}
.sp-null span{display:block;margin-top:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7);line-height:1.7}
.sp-band{background:var(--ink);color:#fff;padding:clamp(44px,6vw,72px) 0}
.sp-band .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:820px){.sp-band .wrap{grid-template-columns:1fr}}
.sp-band-zahl b{font-family:var(--serif);font-size:clamp(3.4rem,8vw,6rem);line-height:1;color:var(--gold-l);letter-spacing:-.02em}
.sp-band-zahl span{display:block;margin-top:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.65);line-height:1.7}
.sp-band-text h2{color:#fff !important}
.sp-band-text p{color:rgba(255,255,255,.78);line-height:1.75;max-width:66ch}

/* --- NEUENRADE: Zwei Richtungen (Split-Kompass) --- */
.sn-hero{background:var(--paper);padding:clamp(120px,14vw,150px) 0 clamp(30px,4vw,44px)}
.sn-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em;margin:0;color:var(--ink)}
.sn-hero h1 em{font-style:normal;color:var(--gold-d)}
.sn-kompass{padding:clamp(40px,6vw,72px) 0;background:var(--paper2)}
.sn-split{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(18px,3.5vw,48px);align-items:stretch;margin-top:10px}
@media(max-width:760px){.sn-split{grid-template-columns:1fr}.sn-spine{writing-mode:horizontal-tb;flex-direction:row;padding:12px 0;border-left:0;border-top:3px solid var(--gold);border-bottom:3px solid var(--gold)}}
.sn-seite ul{list-style:none;margin:12px 0 0;padding:0}
.sn-seite li{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.sn-seite li span{color:var(--ink2);font-weight:600}
.sn-seite li b{font-family:var(--mono);font-weight:500;color:var(--graphit);font-size:.9rem;white-space:nowrap}
.sn-titel{font-family:var(--mono);font-size:.76rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold-d);font-weight:700}
.sn-seite:last-child .sn-titel{text-align:right}
.sn-spine{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border-left:3px solid var(--gold);border-right:3px solid var(--gold);padding:0 18px}
.sn-spine span{font-family:var(--serif);font-size:1.25rem;color:var(--ink);writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:1px}
@media(max-width:760px){.sn-spine span{writing-mode:horizontal-tb;transform:none}}
.sn-spine small{font-family:var(--mono);font-size:.68rem;color:var(--gold-d);letter-spacing:1px}

/* --- LÜDENSCHEID: Die Zufahrt zählt (Routenvergleich) --- */
.sl-hero{background:linear-gradient(160deg,var(--ink) 0%,#241d15 100%);color:#fff;padding:clamp(120px,14vw,160px) 0 clamp(44px,6vw,64px)}
.sl-routen{padding:clamp(48px,7vw,84px) 0}
.sl-vergleich{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,32px);margin-top:8px}
@media(max-width:760px){.sl-vergleich{grid-template-columns:1fr}}
.sl-route{border-radius:2px;padding:24px 26px}
.sl-route.schlecht{background:var(--paper2);border:1px solid var(--line);color:var(--muted)}
.sl-route.gut{background:var(--ink);color:#fff;border-bottom:3px solid var(--gold)}
.sl-route-kopf{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sl-route-kopf b{font-family:var(--serif);font-size:1.15rem}
.sl-route.gut .sl-route-kopf b{color:var(--gold-l)}
.sl-route .zeichen{font-family:var(--mono);font-weight:700;width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.sl-route.schlecht .zeichen{background:rgba(20,17,13,.08);color:var(--muted)}
.sl-route.gut .zeichen{background:var(--gold);color:#1a1206}
.sl-route ul{list-style:none;margin:0;padding:0}
.sl-route li{padding:8px 0;border-bottom:1px solid rgba(127,127,127,.18);font-size:.95rem;line-height:1.6}
.sl-route.gut li{color:rgba(255,255,255,.85)}
.sl-route li:last-child{border-bottom:0}

/* Plettenberg: Tor nach Süden */
.sp-tor{padding:clamp(44px,6vw,72px) 0;background:var(--forest);color:var(--paper)}
.sp-tor h2{color:#fff !important}
.sp-tor .stx-sub{color:rgba(247,243,236,.75)}
.sp-tor-ziele{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 34px}
.sp-tor-ziele li{display:flex;align-items:baseline;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.sp-tor-ziele .pfeil{color:var(--gold-l)}
.sp-tor-ziele .ziel{font-weight:700;color:#fff;flex:1}
.sp-tor-ziele .zeit{font-family:var(--mono);font-size:.88rem;color:var(--gold-l);white-space:nowrap}