/* SHK-Viertel, Konzept A "Portal Blau": Vertrauensportal. Weiche Karten, Blau/Weiß, Gelb als Akzent. */
h1, h2, h3, .hero h1 { hyphens: manual; -webkit-hyphens: manual; text-wrap: balance; }
.site-header { box-shadow: 0 1px 0 var(--line), 0 6px 24px -18px rgba(10, 42, 94, .5); }
.brand-word { font-size: 1.3rem; letter-spacing: -.03em; color: var(--dark); }

/* Hero: helle Fläche, Vertrauenszeile als Pillen */
body[data-hero="split-image"] .hero { background: linear-gradient(135deg, #fff 0%, var(--tint) 100%); border-radius: 22px; }
.hero-facts { gap: 10px 14px; }
.hero-facts > * { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .85rem; }
.search { border: 1px solid var(--line); box-shadow: 0 18px 40px -22px rgba(10, 42, 94, .45); }

/* Schnellwahl: große Wahlkacheln */
.schnellwahl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.schnellwahl a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); font-weight: 700; box-shadow: 0 8px 22px -16px rgba(10, 42, 94, .5); transition: transform .15s, box-shadow .15s, border-color .15s; }
.schnellwahl a:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 14px 28px -16px rgba(10, 88, 202, .6); }
.schnellwahl svg { flex: none; width: 44px; height: 44px; padding: 8px; border-radius: 12px; background: var(--tint); color: var(--brand); }
@media (max-width: 900px) { .schnellwahl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .schnellwahl { grid-template-columns: 1fr; } }

/* Gewerke-Kacheln */
.gewerke { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gewerk { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; text-decoration: none; color: var(--ink); box-shadow: 0 10px 26px -20px rgba(10, 42, 94, .6); transition: transform .15s, box-shadow .15s; }
.gewerk:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(10, 88, 202, .55); }
.gewerk svg { width: 60px; height: 60px; padding: 12px; background: var(--tint); border-radius: 16px; color: var(--brand); }
.gewerk-heizung svg { color: #e8590c; background: #fff1e5; }
.gewerk h3 { font-size: 1.2rem; margin: 6px 0 0; }
.gewerk p { margin: 0; color: var(--muted); flex: 1; }
.gewerk-go { color: var(--brand); font-weight: 700; font-size: .92rem; }
.gewerk-go::after { content: " →"; }
@media (max-width: 900px) { .gewerke { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .gewerke { grid-template-columns: 1fr; } }

/* Notdienst-Band: auffällig, aber freundlich */
.mod-signal { background: linear-gradient(120deg, #c2410c, #e8590c); border-radius: 22px; }
.mod-signal .btn { background: #fff; color: #9a3412; border-color: #fff; font-weight: 800; }

/* Kennzahlen, Chips, Buttons */
.stat strong { color: var(--brand); }
.chip { border-radius: 999px; }
.btn { font-weight: 700; }
.btn-brand { background: var(--brand); }
.footer-note { opacity: .85; }

/* Notdienst-Band: gewinnt gegen den Abschnitts-Rhythmus */
body[data-rhythm] main > .section.mod-signal { background: linear-gradient(120deg, #b83a0a, #e8590c); color: #fff; border-radius: 22px; }
body[data-rhythm] main > .section.mod-signal h2, body[data-rhythm] main > .section.mod-signal p, body[data-rhythm] main > .section.mod-signal .eyebrow { color: #fff; }

.mod-html.prose, .mod-html .schnellwahl, .mod-html .gewerke { max-width: none; width: 100%; }

/* Eingeklappte Stadtteil-Chips */
.chips-more { margin-top: 12px; }
.chips-more summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--brand); font-weight: 700; list-style: none; }
.chips-more summary::-webkit-details-marker { display: none; }
.chips-more summary::after { content: "▾"; }
.chips-more[open] summary::after { content: "▴"; }
.chips-more[open] > ul { margin-top: 12px; }