/* Stadtteilseiten: Bausteine, die es im gemeinsamen Stylesheet nicht gibt. Präfix stt- und stk- (Karte). */
.stt-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:16px}
.stt-karte{display:flex;flex-direction:column;gap:12px;background:var(--color-white);border-radius:var(--radius-card);padding:clamp(22px,2.6vw,36px)}
.stt-karte h3{margin:0;display:flex;align-items:center;gap:12px;font-family:var(--font-heading);font-size:19px;line-height:1.3;font-weight:600;color:var(--color-strong)}
.stt-karte p{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.65;color:var(--color-body);text-wrap:pretty}
.stt-karte--breit{grid-column:1/-1}
.stt-icon{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:var(--color-tint);color:var(--color-ip-red)}
.stt-icon svg{display:block}
.stt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.stt-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:999px;background:var(--color-tint);font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.2;color:var(--color-strong)}
a.stt-chip{text-decoration:none}
a.stt-chip:hover{background:var(--color-ip-gray-200);color:var(--color-strong)}
.stt-chip[aria-current]{background:var(--color-ip-red);color:var(--color-white)}

.stt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 24px;border:1.5px solid var(--color-ip-red);border-radius:999px;font-family:var(--font-body);font-size:15px;font-weight:600;line-height:1.1;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .12s,color .12s,transform .12s}
.stt-btn:active{transform:scale(.98)}
.stt-btn--rot{background:var(--color-ip-red);color:var(--color-white)}
.stt-btn--rot:hover{background:var(--color-ip-red-hover);border-color:var(--color-ip-red-hover);color:var(--color-white)}
.stt-btn--linie{background:transparent;color:var(--color-heading)}
.stt-btn--linie:hover{background:var(--color-tint);color:var(--color-heading)}
.stt-btn--hell{background:var(--color-white);border-color:var(--color-white);color:var(--color-ip-red)}
.stt-btn--hell:hover{background:var(--color-tint);border-color:var(--color-tint);color:var(--color-ip-red)}
.stt-btn--glas{background:transparent;border-color:rgba(255,255,255,.55);color:var(--color-white)}
.stt-btn--glas:hover{background:rgba(255,255,255,.12);color:var(--color-white)}
.stt-knoepfe{display:flex;flex-wrap:wrap;gap:10px}

/* Bezirkskarte im Seitenkopf (ersetzt das Foto neben der Online-Bewertung) */
.stt-bezirk{position:relative;display:flex;flex:1 1 460px;flex-direction:column;gap:18px;min-width:0;margin:0;padding:clamp(22px,2.6vw,34px);border-radius:var(--radius-card);background:linear-gradient(160deg,#b41d18 0%,var(--color-ip-red) 45%,var(--color-ip-red-dark) 100%);color:var(--color-white);overflow:hidden}
.stt-bezirk__kopf{display:flex;flex-direction:column;gap:6px}
.stt-bezirk__label{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.stt-bezirk__name{margin:0;font-family:var(--font-heading);font-size:clamp(28px,2.6vw,36px);font-weight:600;line-height:1.1}
.stt-bezirk__teaser{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;opacity:.92;text-wrap:pretty}
.stt-bezirk__karte svg{display:block;width:100%;height:auto;max-height:300px}
.stt-bezirk__karte path{fill:rgba(255,255,255,.13);stroke:rgba(255,255,255,.55);stroke-width:2.2;stroke-linejoin:round}
.stt-bezirk__karte path.is-aktiv{fill:var(--color-white);stroke:var(--color-white)}
.stt-bezirk__karte text{font-family:var(--font-heading);font-weight:600;font-size:30px;fill:var(--color-ip-red)}
.stt-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.stt-fakten li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.1)}
.stt-fakten span{font-family:var(--font-body);font-size:12px;line-height:1.3;opacity:.8}
.stt-fakten strong{font-family:var(--font-heading);font-size:18px;font-weight:600;line-height:1.2}
.stt-bezirk .stt-chips .stt-chip{background:rgba(255,255,255,.14);color:var(--color-white)}
.stt-bezirk__fuss{display:flex;margin-top:auto}
.stt-bezirk__fuss a{display:inline-flex;align-items:center;gap:12px;padding:8px 22px 8px 8px;border-radius:999px;background:var(--color-white);color:var(--color-strong);text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.stt-bezirk__fuss img{display:block;width:44px;height:44px;flex:none;border-radius:999px;object-fit:cover}
.stt-bezirk__fuss small{display:block;font-family:var(--font-body);font-size:12px;line-height:1.3;color:var(--color-muted)}
.stt-bezirk__fuss b{display:block;font-family:var(--font-heading);font-size:16px;line-height:1.2;font-weight:600}

/* Marktdaten */
.stt-markt{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.stt-markt__text{flex:1.2 1 420px;min-width:0}
.stt-markt__daten{flex:1 1 360px;min-width:0}
.stt-werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:10px;margin:0;padding:0;list-style:none}
.stt-werte li{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:20px;background:var(--color-tint)}
.stt-werte span{font-family:var(--font-body);font-size:13px;line-height:1.35;color:var(--color-muted)}
.stt-werte strong{white-space:nowrap;font-family:var(--font-heading);font-size:21px;font-weight:600;line-height:1.15;color:var(--color-ip-red)}
.stt-werte em{font-style:normal;font-family:var(--font-body);font-size:12px;line-height:1.35;color:var(--color-muted)}
.stt-quelle{margin:0;font-family:var(--font-body);font-size:12px;line-height:1.5;color:var(--color-muted)}
.stt-quelle a{color:var(--color-muted)}
.stt-hinweis{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-image);background:var(--color-tint);font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--color-body)}
.stt-hinweis svg{flex:none;margin-top:2px}

/* Verweise auf eigene Seiten im Bezirk */
.stt-verweise{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.stt-verweise a{display:flex;height:100%;flex-direction:column;gap:8px;padding:20px 22px;border-radius:24px;background:var(--color-white);color:var(--color-body);text-decoration:none;transition:box-shadow .15s}
.stt-verweise a:hover{box-shadow:var(--shadow-overlay);color:var(--color-body)}
.stt-verweise small{font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-ip-red)}
.stt-verweise b{font-family:var(--font-heading);font-size:17px;font-weight:600;line-height:1.3;color:var(--color-strong)}
.stt-verweise span{font-family:var(--font-body);font-size:14px;line-height:1.55}

.stt-suche{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;padding:clamp(22px,2.6vw,36px);border-radius:var(--radius-card);background:var(--color-anthracite);color:var(--color-white)}
.stt-suche div{flex:1 1 420px;min-width:0}
.stt-suche h3{margin:0 0 8px;font-family:var(--font-heading);font-size:22px;font-weight:600;line-height:1.25;color:var(--color-white)}
.stt-suche p{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.6;opacity:.9}

/* Interaktive Bezirkskarte */
.stk{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(18px,2.4vw,36px);align-items:center;padding:clamp(18px,2.6vw,40px);border-radius:var(--radius-card);background:var(--color-white)}
.stk__karte{position:relative;min-width:0}
.stk__karte svg{display:block;width:100%;height:auto}
.stk__karte a{outline:none}
.stk__karte path{fill:var(--color-tint);stroke:var(--color-white);stroke-width:3;stroke-linejoin:round;transition:fill .15s}
.stk__karte a:hover path,.stk__karte a:focus-visible path{fill:#ecd9d7}
.stk__karte a.is-aktiv path{fill:var(--color-ip-red)}
.stk__karte a:focus-visible path{stroke:var(--color-strong);stroke-width:4}
.stk__karte text{font-family:var(--font-body);font-size:21px;font-weight:600;fill:var(--color-strong);pointer-events:none}
.stk__karte text.is-aktiv{fill:var(--color-white)}
.stk__buero circle{fill:var(--color-anthracite);stroke:var(--color-white);stroke-width:4}
.stk__buero text{font-size:19px;fill:var(--color-anthracite);paint-order:stroke;stroke:var(--color-white);stroke-width:6px;stroke-linejoin:round}
.stk__info{display:flex;flex-direction:column;gap:14px;min-width:0}
.stk__nr{margin:0;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.stk__name{margin:0;font-family:var(--font-heading);font-size:clamp(26px,2.4vw,34px);font-weight:600;line-height:1.1;color:var(--color-heading)}
.stk__text{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--color-body);text-wrap:pretty}
.stk__zahlen{margin:0;font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--color-muted)}
.stk__liste{grid-column:1/-1}
@media (max-width:820px){.stk{grid-template-columns:1fr}.stk__karte text:not(.is-aktiv){display:none}}

/* Übersichtstabelle */
.stt-tabelle-huelle{overflow-x:auto;border-radius:var(--radius-card);background:var(--color-white);padding:clamp(8px,1.2vw,16px)}
.stt-tabelle{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:15px;line-height:1.45;color:var(--color-body)}
.stt-tabelle th{padding:12px 14px;text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);border-bottom:1px solid var(--color-line)}
.stt-tabelle td{padding:14px;border-bottom:1px solid var(--color-line);vertical-align:top}
.stt-tabelle tr:last-child td{border-bottom:0}
.stt-tabelle td.zahl,.stt-tabelle th.zahl{text-align:right;white-space:nowrap}
.stt-tabelle a{font-weight:600;color:var(--color-heading)}
@media (max-width:640px){.stt-tabelle .optional{display:none}}

.stt-fliesstext{max-width:760px;font-family:var(--font-body);font-size:16px;line-height:1.7;color:var(--color-body)}
.stt-fliesstext p{margin:0 0 14px}

/* Lange Bezirksnamen im Seitentitel */
#hero-titel.stt-h1{font-size:clamp(34px,4.4cqw,64px);hyphens:manual}
.stt-mehr{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--color-heading)}