/*
 * Allmend — Stylesheet (Premium). Wappenrot auf Weiss, das Hauptmenü auf einem roten Band, Kacheln «Ich möchte …»,
 * grosse Grundschrift und Kontraste über 7:1; Nacht (dunkel) in Anthrazit mit Korallrot. Fokus als gelbe Markierung,
 * Knöpfe und Felder ab 48 px, Bewegung nur an Bildern und nur ohne «reduzierte Bewegung».
 * Alle Farben, Schriften und Abstände kommen aus «design» (theme.lava) — auch die drei Farbvarianten.
 *
 * Schrift: Atkinson Hyperlegible Next — Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors
 * (https://github.com/googlefonts/atkinson-hyperlegible-next), lizenziert unter der SIL Open Font License,
 * Version 1.1 (https://openfontlicense.org).
 */

/* ── Grundlage ─────────────────────────────────────────── */
:root {
    --focus-fill: #ffd84d;
    --focus-ink: #1b1b1f;
    --alert-info-bg: #e7eef8;
    --alert-info-ink: #12305a;
    --alert-warn-bg: #ffd84d;
    --alert-warn-ink: #1b1b1f;
    --alert-urgent-bg: #8f0d17;
    --alert-urgent-ink: #ffffff;
    --ok: #17643a;
    --stop: #a3271c;
    --error: #a3271c;
    --mark: #ffe58a;
    --kind-kehricht: #55575e;
    --kind-gruengut: #2b7a3d;
    --kind-papier: #2557a8;
    --kind-karton: #8a5524;
    --kind-metall: #4f6273;
    --kind-sperrgut: #6d4b8f;
    --kind-sonderabfall: #b0351f;
    --shadow: 0 1.25rem 2.5rem -1.25rem rgb(20 20 30 / 35%);
    --wrap: 76rem;
}

:root[data-theme='dark'] {
    --alert-info-bg: #15263c;
    --alert-info-ink: #dbe8fb;
    --alert-warn-bg: #ffd84d;
    --alert-warn-ink: #1b1b1f;
    --alert-urgent-bg: #b0141f;
    --alert-urgent-ink: #ffffff;
    --ok: #8fd6a8;
    --stop: #ff9d95;
    --error: #ff9d95;
    --mark: #ffd84d;
    --kind-kehricht: #b9bbc2;
    --kind-gruengut: #7fcf93;
    --kind-papier: #8fb6f2;
    --kind-karton: #d9a873;
    --kind-metall: #a9bccd;
    --kind-sperrgut: #c7a6e8;
    --kind-sonderabfall: #ff9d86;
    --shadow: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 60%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-wrap: break-word;
    font-family: var(--font-body);
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-background);
    font-variant-numeric: lining-nums;
}

[hidden] {
    display: none !important;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

.icon {
    width: 1.375em;
    height: 1.375em;
    flex: none;
}

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1 {
    font-size: clamp(2.125rem, 1.55rem + 2.4vw, 3.375rem);
}

h2 {
    font-size: clamp(1.625rem, 1.35rem + 1.15vw, 2.25rem);
}

h3 {
    font-size: 1.3125rem;
    font-weight: 700;
    line-height: 1.25;
}

p,
ul,
ol,
figure,
blockquote,
dl,
details,
address {
    margin: 0 0 var(--space-4);
}

address {
    font-style: normal;
}

em,
i {
    font-family: var(--font-italic);
    font-style: normal;
}

strong,
b {
    font-weight: 700;
}

a {
    color: var(--color-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

a:hover {
    text-decoration-thickness: 0.16em;
}

/* Fokus: gelb markiert, mit dunkler Kante — gut sichtbar auf jedem Grund und für alle Altersgruppen */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

a:focus-visible,
.button:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus-ink);
    outline-offset: 0;
    background: var(--focus-fill);
    color: var(--focus-ink);
    box-shadow: 0 0 0 3px var(--focus-fill);
    text-decoration: none;
}

a:focus-visible .icon,
button:focus-visible .icon {
    color: var(--focus-ink);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 0;
    box-shadow: 0 0 0 6px var(--focus-fill);
}

::selection {
    background: var(--focus-fill);
    color: var(--focus-ink);
}

mark {
    background: var(--mark);
    color: var(--focus-ink);
    padding-inline: 0.1em;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.wrap {
    width: min(100% - 2 * var(--space-5), var(--wrap));
    margin-inline: auto;
}

/* Schmale Blöcke behalten die linke Kante der Seite — nur ihr Inhalt wird schmaler */
.narrow > * {
    max-width: 48rem;
}

.figure.is-narrow {
    max-width: 48rem;
}

.eyebrow,
.stage-kicker,
.alert-kicker,
.pub-rubric,
.authority-kind,
.contact-title,
.route-title,
.subnav-title,
.footer-title,
.facts-title,
.pub-filter-title,
.kicker-badge {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.eyebrow {
    margin-bottom: var(--space-3);
    color: var(--color-link);
}

/* Überschriften von Abschnitten: ein kurzer, kräftiger Balken in der Wappenfarbe */
.section-head {
    max-width: 48rem;
    margin-bottom: var(--space-6);
}

.section-head h2::before,
.page-header h1::before {
    content: '';
    display: block;
    width: 3rem;
    height: 0.375rem;
    margin-bottom: var(--space-4);
    border-radius: 2px;
    background: var(--color-marker);
}

.section-head p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.25rem;
}

.section-more {
    margin: var(--space-5) 0 0;
}

.more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    font-weight: 700;
}

.more::after {
    content: '→';
    font-weight: 700;
}

/* ── Knöpfe ────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 3rem;
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: transparent;
    color: var(--color-accent);
}

.button-light {
    border-color: var(--color-band-text);
    background: var(--color-band-text);
    color: var(--color-band);
}

.button-light:hover {
    background: transparent;
    color: var(--color-band-text);
}

/* ── Gerüst ────────────────────────────────────────────── */
main {
    display: block;
}

main:focus {
    outline: none;
}

.skip-link {
    position: absolute;
    left: var(--space-3);
    top: -5rem;
    z-index: 60;
    padding: var(--space-3) var(--space-5);
    background: var(--focus-fill);
    color: var(--focus-ink);
    font-weight: 700;
}

.skip-link:focus {
    top: var(--space-3);
}

.landing > section,
.page-flow > section,
.page-flow > .text-block,
.page-flow > figure,
.page-flow > .figure-block,
.page-body > .figure-block,
.detail-content > .figure-block,
.page-body > section,
.page-body > .text-block,
.page-body > figure,
.detail-content > section,
.detail-content > .text-block,
.detail-content > figure,
.page-section > .wrap {
    margin-block: var(--space-8);
}

.landing > .alert,
.landing > .stage {
    margin-block: 0;
}

.landing > .stage + section {
    margin-top: var(--space-7);
}

.landing > section:last-child,
.page-flow > :last-child {
    margin-bottom: var(--space-9);
}

.landing > .cta:last-child,
.page-flow > .cta:last-child {
    margin-bottom: 0;
}

/* ── Kopf ──────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 30;
    background: var(--color-background);
}

.header-top {
    border-bottom: 1px solid var(--color-line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    min-height: 5.5rem;
    padding-block: var(--space-3);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    margin-right: auto;
    color: var(--color-text);
    text-decoration: none;
}

.brand-mark {
    width: 2.75rem;
    height: auto;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.brand:hover .brand-name {
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.header-search {
    flex: 0 1 26rem;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}

.header-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding-inline: var(--space-2);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.header-contact .icon {
    color: var(--color-accent);
}

.header-contact:hover span {
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.2em;
}

.languages ul {
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.languages a,
.languages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 48px;
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.languages a:hover {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.languages [aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--color-marker);
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.35em;
}

.appearance-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.appearance-toggle:hover {
    border-color: var(--color-text);
}

.appearance-toggle .appearance-sun,
.appearance-toggle[aria-pressed='true'] .appearance-moon {
    display: none;
}

.appearance-toggle[aria-pressed='true'] .appearance-sun {
    display: block;
}

.header-account a.members-link,
.header-account button {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.header-account form {
    margin: 0;
}

/* Suchfeld: Zeichen, Feld und Knopf in einem Rahmen */
.quick-search {
    display: flex;
    align-items: stretch;
    min-height: 3rem;
    margin: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
}

.quick-search:focus-within {
    border-color: var(--color-text);
    box-shadow: 0 0 0 4px var(--focus-fill);
}

.quick-search-field {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding-left: var(--space-3);
    color: var(--color-muted);
    cursor: text;
}

.quick-search input {
    flex: 1;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 var(--space-2);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.0625rem;
}

.quick-search input::placeholder {
    color: var(--color-muted);
    opacity: 1;
}

.quick-search input:focus-visible {
    outline: none;
    box-shadow: none;
}

.quick-search button {
    flex: none;
    margin: -2px -2px -2px 0;
    padding: 0 var(--space-5);
    border: 2px solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
}

.quick-search button:hover {
    background: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
}

/* Das rote Band mit dem Hauptmenü */
.header-band {
    background: var(--color-band);
    color: var(--color-band-text);
}

.header-band .nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 0 calc(-1 * var(--space-4));
    padding: 0;
}

.header-band .nav ul ul {
    display: none;
}

.header-band .nav a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: var(--space-2) var(--space-4);
    color: var(--color-band-text);
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
}

.header-band .nav a:hover {
    background: color-mix(in srgb, var(--color-band-text) 14%, transparent);
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.25em;
}

.header-band .nav a[aria-current='page'],
.header-band .nav .active > a {
    box-shadow: inset 0 -0.375rem 0 var(--color-band-text);
}

.header-band .nav a:focus-visible {
    box-shadow: inset 0 -0.375rem 0 var(--focus-ink);
}

/* Menü auf schmalen Bildschirmen: <details> ohne Skript */
.menu {
    display: none;
    margin: 0;
}

.menu > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 2px solid var(--color-text);
    border-radius: var(--radius);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.menu > summary::-webkit-details-marker {
    display: none;
}

.menu-bars {
    position: relative;
    width: 1.25rem;
    height: 0.875rem;
    border-block: 3px solid currentColor;
}

.menu-bars::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 3px;
    margin-top: -1.5px;
    background: currentColor;
}

.menu[open] .menu-bars {
    border-color: transparent;
}

.menu[open] .menu-bars::before,
.menu[open] .menu-bars::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto;
    height: 3px;
    margin-top: -1.5px;
    background: currentColor;
    transform: rotate(45deg);
}

.menu[open] .menu-bars::after {
    transform: rotate(-45deg);
}

.menu-panel {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-5) var(--space-5) var(--space-7);
    border-top: 6px solid var(--color-band);
    background: var(--color-background);
    color: var(--color-text);
    box-shadow: var(--shadow);
}

.menu-panel .nav ul {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-panel .nav a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
    font-size: 1.3125rem;
    font-weight: 700;
    text-decoration: none;
}

.menu-panel .nav a[aria-current='page'] {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.25em;
}

.menu-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.header-account a.members-link,
.header-account button {
    white-space: nowrap;
}

/* Zwischen Tablet und breitem Bildschirm: «Kontakt» nur als Zeichen, damit das Suchfeld Platz hat */
@media (min-width: 64rem) and (max-width: 79.99rem) {
    .header-inner {
        gap: var(--space-3) var(--space-4);
    }

    .header-tools {
        gap: var(--space-2);
    }

    .header-tools .header-contact span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .header-tools .header-contact .icon {
        width: 1.625rem;
        height: 1.625rem;
    }

    .header-tools .languages a,
    .header-tools .languages span {
        min-width: 2.25rem;
    }
}

@media (max-width: 63.99rem) {
    .header-search,
    .header-tools .header-contact,
    .header-tools .languages,
    .header-band {
        display: none;
    }

    .menu {
        display: block;
    }

    .header-inner {
        min-height: 4.75rem;
    }
}

@media (max-width: 40rem) {
    .header-tools .header-account {
        display: none;
    }
}

@media (max-width: 30rem) {
    .brand-name {
        font-size: 1.1875rem;
    }

    .brand-mark {
        width: 2.25rem;
    }

    .header-inner {
        gap: var(--space-3);
    }

    .menu > summary {
        padding: 0 var(--space-3);
    }
}

/* ── Warnhinweis ───────────────────────────────────────── */
.alert {
    background: var(--alert-warn-bg);
    color: var(--alert-warn-ink);
}

.alert-hinweis {
    background: var(--alert-info-bg);
    color: var(--alert-info-ink);
}

.alert-dringend {
    background: var(--alert-urgent-bg);
    color: var(--alert-urgent-ink);
}

.alert-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4) var(--space-5);
    padding-block: var(--space-5);
}

.alert-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: currentColor;
}

.alert-icon .icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--alert-warn-bg);
}

.alert-hinweis .alert-icon .icon {
    color: var(--alert-info-bg);
}

.alert-dringend .alert-icon .icon {
    color: var(--alert-urgent-bg);
}

.alert-body {
    min-width: 0;
    max-width: 52rem;
}

.alert-kicker {
    margin: 0 0 var(--space-1);
}

.alert-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    font-weight: 800;
    line-height: 1.25;
}

.alert-text p {
    margin: 0 0 var(--space-2);
}

.alert-action {
    margin: 0;
}

.alert a {
    color: inherit;
    font-weight: 700;
}

.alert-link::after {
    content: ' →';
}

/* ── Bühne mit Suche ───────────────────────────────────── */
/* Foto und Tafel liegen im selben Feld: das Foto wächst mit der Tafel, nichts ragt ins Leere */
.stage {
    position: relative;
    display: grid;
}

.stage > .stage-image,
.stage > .stage-wrap {
    grid-area: 1 / 1;
}

.stage-image {
    height: 100%;
    min-height: clamp(15rem, 40vw, 38rem);
    margin: 0;
    overflow: hidden;
    background: var(--color-surface);
}

.stage-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 62%;
}

.stage-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-block: var(--space-8);
}

.stage-panel {
    width: 100%;
    max-width: 40rem;
    padding: var(--space-6) var(--space-7) var(--space-7);
    border-top: 0.5rem solid var(--color-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-background);
    box-shadow: var(--shadow);
}

.stage-kicker {
    margin: 0 0 var(--space-2);
    color: var(--color-link);
}

.stage-title {
    margin-bottom: var(--space-4);
}

.stage-lead {
    font-size: 1.25rem;
    color: var(--color-muted);
}

.stage-lead > :last-child {
    margin-bottom: var(--space-5);
}

.stage-search .quick-search {
    min-height: 3.75rem;
}

.stage-search .quick-search input {
    min-height: 3.5rem;
    font-size: 1.1875rem;
}

.stage-search .quick-search button {
    padding: 0 var(--space-6);
    font-size: 1.1875rem;
}

.stage-links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-4);
}

.stage-links p {
    margin: 0;
    color: var(--color-muted);
    font-weight: 700;
}

.stage-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.stage-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-link);
    font-weight: 700;
}

@media (max-width: 47.99rem) {
    .stage {
        display: block;
    }

    .stage-image {
        height: 15rem;
        min-height: 0;
    }

    .stage-wrap {
        width: 100%;
        margin-top: -2rem;
        padding-block: 0;
    }

    .stage-panel {
        padding: var(--space-5) var(--space-5) var(--space-6);
        border-radius: 0;
        box-shadow: none;
    }
}

/* ── Kacheln «Ich möchte …» ────────────────────────────── */
.tiles .section-head h2 {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tile-grid > li {
    display: flex;
}

.tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: var(--space-4) var(--space-3);
    width: 100%;
    min-height: 12rem;
    padding: var(--space-5);
    border: 2px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

.tile-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.tile-icon .icon {
    width: 1.875rem;
    height: 1.875rem;
}

.tile-text {
    display: grid;
    grid-column: 1 / -1;
    align-content: start;
    gap: var(--space-1);
}

.tile-label {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.2;
}

.tile-hint {
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.4;
}

.tile-arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    color: var(--color-link);
}

.tile-arrow .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.tile:hover {
    border-color: var(--color-accent);
    background: color-mix(
        in srgb,
        var(--color-accent) 6%,
        var(--color-background)
    );
}

.tile:hover .tile-label {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
}

.tile:focus-visible .tile-hint,
.tile:focus-visible .tile-arrow {
    color: var(--focus-ink);
}

.tile:focus-visible .tile-icon {
    background: var(--focus-ink);
    color: var(--focus-fill);
}

/* Unterseiten einer Übersicht */
.child-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.child-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 4.5rem;
    padding: var(--space-3) var(--space-5);
    border: 2px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    border-left: 0.5rem solid var(--color-accent);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 800;
    text-decoration: none;
}

.child-tile .icon {
    color: var(--color-link);
}

.child-tile:hover {
    border-color: var(--color-accent);
}

.child-tile:hover span {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
}

/* ── Abfallkalender ────────────────────────────────────── */
.waste-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.waste-card {
    --kind: var(--kind-kehricht);
    padding: var(--space-5);
    border: 2px solid var(--color-line);
    border-top: 0.5rem solid var(--kind);
    border-radius: var(--radius);
    background: var(--color-background);
}

.waste-card:not(:has(li)) {
    display: none;
}

.waste-gruengut {
    --kind: var(--kind-gruengut);
}

.waste-papier {
    --kind: var(--kind-papier);
}

.waste-karton {
    --kind: var(--kind-karton);
}

.waste-metall {
    --kind: var(--kind-metall);
}

.waste-sperrgut {
    --kind: var(--kind-sperrgut);
}

.waste-sonderabfall {
    --kind: var(--kind-sonderabfall);
}

.waste-kind {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    font-size: 1.375rem;
}

.waste-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--kind);
    color: var(--color-background);
}

.waste-icon .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.waste-dates {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.waste-dates li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    color: var(--color-muted);
    font-size: 1.0625rem;
}

/* Der nächste Termin gross, die zwei folgenden klein — weitere stehen unter «Alle Termine» */
.waste-dates li:first-child {
    display: grid;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
}

.waste-dates li:first-child time {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.25;
}

.waste-dates li:not(:first-child) .waste-time,
.waste-dates li:nth-child(n + 4) {
    display: none;
}

@media (max-width: 40rem) {
    .waste-dates li:nth-child(n + 3) {
        display: none;
    }
}

.waste-when {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
}

.waste-district {
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 700;
}

.waste-time {
    color: var(--color-muted);
    font-size: 1rem;
}

.waste-badge {
    display: inline-block;
    justify-self: start;
    padding: 0.05rem var(--space-2);
    border-radius: var(--radius);
    background: var(--focus-fill);
    color: var(--focus-ink);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.waste-single {
    margin-block: var(--space-7);
}

.waste-single .waste-card {
    max-width: 34rem;
}

.waste-single-date {
    margin-bottom: var(--space-2);
    font-size: 1.5rem;
    font-weight: 800;
}

.waste-months {
    display: grid;
    gap: var(--space-6);
}

.waste-month h3 {
    padding-bottom: var(--space-2);
    margin-bottom: 0;
    border-bottom: 3px solid var(--color-text);
    font-size: 1.5rem;
}

.waste-rows {
    list-style: none;
    margin: 0;
    padding: 0;
}

.waste-row {
    display: grid;
    grid-template-columns: 9rem minmax(10rem, 1.2fr) 10rem minmax(0, 1.6fr);
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.waste-row time {
    font-weight: 700;
}

.waste-row-kind {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
}

.waste-row-kind .icon {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem;
    border-radius: 50%;
    background: var(--kind);
    color: var(--color-background);
}

.waste-row {
    --kind: var(--kind-kehricht);
}

.waste-row-district,
.waste-row-note {
    color: var(--color-muted);
    font-size: 1.0625rem;
}

.waste-row-note .waste-badge {
    margin-left: var(--space-2);
}

.waste-row.is-today,
.waste-row.is-tomorrow {
    background: color-mix(
        in srgb,
        var(--focus-fill) 22%,
        var(--color-background)
    );
}

@media (max-width: 47.99rem) {
    .waste-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .waste-row-kind {
        grid-column: 1;
    }

    .waste-row time {
        grid-column: 1 / -1;
    }

    .waste-row-note {
        grid-column: 1 / -1;
    }
}

/* ── Publikationen ─────────────────────────────────────── */
.pub-layout {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 64rem) {
    .is-register .pub-layout {
        grid-template-columns: 19rem minmax(0, 1fr);
        align-items: start;
    }
}

.pub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 3px solid var(--color-text);
}

.pub {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-block: var(--space-5);
    border-bottom: 1px solid var(--color-line);
}

.pub-date {
    margin: 0;
}

/* Datum wie ein Amtsstempel */
.pub-date time {
    display: grid;
    place-items: center;
    width: 5.75rem;
    padding: var(--space-2) var(--space-1);
    border: 2px solid var(--color-text);
    border-radius: var(--radius);
    text-align: center;
    line-height: 1.1;
}

.pub-day {
    font-size: 1.875rem;
    font-weight: 800;
}

.pub-month {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-muted);
}

.pub-rubric {
    margin: 0 0 var(--space-1);
    color: var(--color-link);
}

.pub-body h3 {
    margin-bottom: var(--space-2);
    font-size: 1.375rem;
}

.pub-body h3 a {
    color: var(--color-text);
}

.pub-body h3 a:hover {
    color: var(--color-link);
}

.pub-intro {
    color: var(--color-muted);
}

.pub-intro p {
    margin: 0 0 var(--space-2);
}

.pub-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 0;
}

.pub-deadline,
.pub-file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: 1rem;
    font-weight: 700;
}

.pub-deadline .icon,
.pub-file .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-link);
}

.pub-filter {
    padding: var(--space-5);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.pub-filter-title {
    margin: 0 0 var(--space-2);
}

.pub-filter nav + .pub-filter-title {
    margin-top: var(--space-5);
}

.categories ul,
.archive ul {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.categories li,
.archive li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-line);
}

.categories a,
.archive a {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.pub-filter nav {
    min-width: 0;
}

.categories a[aria-current] {
    color: var(--color-text);
    text-decoration-thickness: 0.2em;
    text-decoration-color: var(--color-marker);
}

.count {
    min-width: 2rem;
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding-inline: var(--space-3);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    font-weight: 700;
    text-decoration: none;
}

.pagination a:hover {
    border-color: var(--color-accent);
}

.pagination [aria-current] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

/* ── Behördenverzeichnis ───────────────────────────────── */
.authority-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.authority {
    padding: var(--space-5);
    border-left: 0.5rem solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.authority-kind {
    margin: 0 0 var(--space-1);
    color: var(--color-muted);
}

.authority h3 {
    margin-bottom: var(--space-2);
    font-size: 1.375rem;
}

.authority-person {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
}

.authority-contact {
    display: grid;
    gap: var(--space-1);
    margin: 0;
}

.authority-contact a,
.office-contact a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ── Gemeindeverwaltung mit Öffnungszeiten ─────────────── */
.office-inner {
    display: grid;
    gap: var(--space-5);
}

@media (min-width: 56rem) {
    .office-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .office-inner.has-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
}

.office-card {
    padding: var(--space-6);
    border-radius: var(--radius);
    background: var(--color-dark);
    color: var(--color-dark-muted);
}

.office-card h2 {
    color: var(--color-dark-text);
    font-size: 1.75rem;
}

.office-card address {
    color: var(--color-dark-text);
    font-size: 1.25rem;
    line-height: 1.45;
}

.office-card a {
    color: var(--color-dark-link);
}

.office-card :focus-visible {
    color: var(--focus-ink);
}

.office-contact {
    display: grid;
    gap: var(--space-1);
}

.office-card .button {
    border-color: var(--color-dark-text);
    background: var(--color-dark-text);
    color: var(--color-dark);
}

.office-card .button:hover {
    background: transparent;
    color: var(--color-dark-text);
}

.open-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    font-weight: 700;
}

.open-status::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--stop);
}

.open-status.is-open::before {
    background: var(--ok);
}

.office-hours {
    padding: var(--space-6);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
}

.office-hours h3 {
    font-size: 1.375rem;
}

.hours-list {
    margin: 0;
}

.hours-row {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
    gap: 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.hours-row dt {
    font-weight: 700;
}

.hours-row dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.hours-row.is-today {
    border-radius: var(--radius);
    border-bottom-color: transparent;
    background: color-mix(
        in srgb,
        var(--focus-fill) 30%,
        var(--color-background)
    );
    box-shadow: inset 0.3rem 0 0 var(--color-text);
}

.hours-note {
    margin: var(--space-3) 0 0;
    color: var(--color-muted);
    font-size: 1.0625rem;
}

.office-image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.office-image img {
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
}

/* ── Nachrichten ───────────────────────────────────────── */
.news-grid {
    display: grid;
    gap: var(--space-4) var(--space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 56rem) {
    .news-grid:has(.news-image) {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    }

    .news-grid:has(.news-image) .is-lead {
        grid-row: span 3;
    }
}

.news-item {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.news-item.is-lead {
    border-bottom: 0;
}

.news-image {
    margin: 0 0 var(--space-4);
    overflow: hidden;
    border-radius: var(--radius);
}

.news-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.news-date {
    margin: 0 0 var(--space-1);
    color: var(--color-muted);
    font-size: 1rem;
    font-weight: 700;
}

.news-body h3 {
    margin-bottom: var(--space-2);
}

.news-body h3 a {
    color: var(--color-text);
}

.news-body h3 a:hover {
    color: var(--color-link);
}

.is-lead .news-body h3 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}

.news-intro {
    color: var(--color-muted);
}

.news-intro p {
    margin: 0;
}

/* ── Anlässe ───────────────────────────────────────────── */
.event-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: var(--space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}

.event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
}

/* Kalenderblatt: Monat auf rotem Kopf, Tag gross */
.event-sheet {
    display: grid;
    width: 5rem;
    margin: 0;
    overflow: hidden;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-background);
    text-align: center;
    line-height: 1.1;
}

.event-month {
    padding: var(--space-1);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.event-day {
    padding: var(--space-2) 0;
    color: var(--color-text);
    font-size: 2.125rem;
    font-weight: 800;
}

.event-sheet-large {
    width: 6.5rem;
}

.event-sheet-large .event-day {
    font-size: 3rem;
}

.event-body h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 1.3125rem;
}

.event-body h3 a {
    color: var(--color-text);
}

.event-body h3 a:hover {
    color: var(--color-link);
}

.event-meta {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    color: var(--color-muted);
    font-size: 1.0625rem;
}

.event-meta > span {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.event-meta .icon {
    margin-top: 0.2em;
}

.event-meta .icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-link);
}

/* ── Zahlen der Gemeinde ───────────────────────────────── */
.figures-inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 56rem) {
    .figures-inner.has-image {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }
}

.figures-image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.figures-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.figure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-5) var(--space-5);
    margin: 0;
}

.figure-item {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 0.375rem solid var(--color-marker);
}

.figure-item dd {
    margin: 0;
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.figure-item dt {
    color: var(--color-muted);
    font-size: 1.0625rem;
    line-height: 1.35;
}

/* ── Anreise als Linienplan ────────────────────────────── */
.directions-inner {
    display: grid;
    gap: var(--space-6);
}

@media (min-width: 56rem) {
    .directions-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}

.directions address {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
}

.directions address .icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-link);
}

.route {
    padding: var(--space-6);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.route-title {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
}

.route-line {
    list-style: none;
    margin: 0;
    padding: 0;
}

.route-stop {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.route-stop:last-child {
    padding-bottom: 0;
}

.route-stop:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 3rem;
    bottom: 0;
    left: calc(1.5rem - 3px);
    width: 6px;
    background: var(--color-accent);
}

.route-fuss:not(:last-child)::before {
    background: repeating-linear-gradient(
        to bottom,
        var(--color-accent) 0 8px,
        transparent 8px 14px
    );
}

.route-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--color-accent);
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-link);
}

.route-ziel .route-dot {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.route-text {
    display: grid;
    align-content: center;
    min-height: 3rem;
}

.route-text strong {
    font-size: 1.1875rem;
    line-height: 1.3;
}

.route-text span {
    color: var(--color-muted);
    font-size: 1.0625rem;
}

/* ── Bild und Text ─────────────────────────────────────── */
.split-inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 56rem) {
    .split-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    .split-rechts .split-image {
        order: 2;
    }
}

.split-image {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
}

.split-image img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.split-text .prose {
    color: var(--color-muted);
}

/* ── Schritt für Schritt ───────────────────────────────── */
.step-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.step {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-5);
}

.step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 3.25rem;
    bottom: 0;
    left: calc(1.625rem - 2px);
    width: 4px;
    background: var(--color-line);
}

.step-number {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 1.375rem;
    font-weight: 800;
}

.step-body {
    padding-top: var(--space-2);
}

.step-body h3 {
    margin-bottom: var(--space-1);
}

.step-body .prose {
    color: var(--color-muted);
}

/* ── Zuständige Stelle ─────────────────────────────────── */
.contact-card {
    padding: var(--space-6);
    border-left: 0.5rem solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.contact-title {
    margin: 0 0 var(--space-1);
    color: var(--color-muted);
}

.contact-name {
    margin-bottom: var(--space-2);
    font-size: 1.625rem;
}

.contact-name::before {
    content: none;
}

.contact-person {
    margin-bottom: var(--space-3);
    font-weight: 700;
}

.contact-lines {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.contact-lines li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.contact-lines .icon {
    margin-top: 0.15em;
    color: var(--color-link);
}

.contact-lines a {
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ── Merkblätter, Fragen, Text, Bilder ─────────────────── */
.download-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--color-text);
}

.download {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    min-height: 4rem;
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.download .icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-link);
}

.download:hover .download-title {
    text-decoration: underline;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.2em;
}

.download-kind {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: 0.9375rem;
    white-space: nowrap;
}

.faq details {
    border-bottom: 2px solid var(--color-line);
}

.faq details:first-of-type {
    border-top: 2px solid var(--color-line);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 3.5rem;
    padding-block: var(--space-3);
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
}

.faq details[open] summary::after {
    content: '−';
}

.faq .prose {
    padding-bottom: var(--space-4);
}

.prose {
    max-width: 46rem;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2 {
    margin-top: var(--space-6);
    font-size: 1.75rem;
}

.prose h3 {
    margin-top: var(--space-5);
}

.prose ul,
.prose ol {
    padding-left: 1.4em;
}

.prose li {
    margin-bottom: var(--space-2);
}

.prose li::marker {
    color: var(--color-marker);
}

.figure {
    margin: 0;
}

.figure img {
    width: 100%;
    border-radius: var(--radius);
}

.figure figcaption,
.gallery-grid figcaption {
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 1rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery-grid figure {
    margin: 0;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}

/* ── Aufruf ────────────────────────────────────────────── */
.cta {
    background: var(--color-band);
    color: var(--color-band-text);
}

.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-7);
    padding-block: var(--space-7);
}

.cta-text {
    max-width: 44rem;
}

.cta h2 {
    margin-bottom: var(--space-2);
}

.cta p {
    margin: 0;
    font-size: 1.25rem;
}

/* ── Seitenkopf, Brotkrumen, Bereich ───────────────────── */
.page-header {
    padding-block: var(--space-6) var(--space-7);
    border-bottom: 1px solid var(--color-line);
    background: var(--color-surface);
}

.page-header h1 {
    margin-bottom: var(--space-3);
}

.page-header .lead {
    max-width: 46rem;
    color: var(--color-muted);
    font-size: 1.3125rem;
}

.page-header .lead > :last-child {
    margin-bottom: 0;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: 1rem;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;
}

.breadcrumbs li + li::before {
    content: '›';
    padding-inline: var(--space-2);
    color: var(--color-muted);
    font-weight: 700;
}

.breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.breadcrumbs [aria-current] {
    color: var(--color-muted);
}

.page-grid {
    display: grid;
    gap: var(--space-6);
}

.page-body,
.detail-content {
    min-width: 0;
}

.page-body .wrap,
.detail-content .wrap {
    width: 100%;
    margin-inline: 0;
}

.page-aside:not(:has(.subnav)) {
    display: none;
}

@media (min-width: 64rem) {
    .page-grid:has(.subnav) {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: var(--space-8);
    }

    .page-aside {
        padding-top: var(--space-8);
    }
}

.subnav {
    padding: var(--space-5);
    border-top: 0.375rem solid var(--color-marker);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.subnav-title {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
}

.subnav ul {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.subnav a {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding-block: var(--space-1);
    border-bottom: 1px solid var(--color-line);
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}

.subnav a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.subnav a[aria-current='page'] {
    color: var(--color-link);
    box-shadow: inset 0.3rem 0 0 var(--color-marker);
    padding-left: var(--space-3);
}

/* ── Detailseiten ──────────────────────────────────────── */
.detail-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-weight: 700;
}

.kicker-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.detail-head .detail-title {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-5);
}

.detail-head .detail-title > div {
    flex: 1 1 24rem;
}

.detail-grid {
    display: grid;
    gap: var(--space-6);
    padding-top: var(--space-7);
}

@media (min-width: 64rem) {
    .detail-grid {
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: var(--space-8);
        align-items: start;
    }

    .detail-grid > .facts {
        grid-column: 2;
        grid-row: 1;
    }

    .detail-grid > .detail-content {
        grid-column: 1;
        grid-row: 1;
    }
}

.detail-content > :first-child {
    margin-top: 0;
}

.facts {
    padding: var(--space-5);
    border: 2px solid var(--color-text);
    border-radius: var(--radius);
}

.facts-title {
    margin: 0 0 var(--space-3);
}

.facts dl {
    margin: 0;
}

.facts dl > div {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}

.facts dl > div:first-child {
    padding-top: 0;
}

.facts dt {
    color: var(--color-muted);
    font-size: 0.9375rem;
    font-weight: 700;
}

.facts dd {
    margin: 0;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.facts-role {
    color: var(--color-muted);
    font-weight: 400;
}

.facts-deadline dd {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    background: var(--focus-fill);
    color: var(--focus-ink);
}

.facts-file {
    justify-content: flex-start;
    width: 100%;
    margin-top: var(--space-4);
    text-align: left;
}

.detail .page-header h1::before {
    content: none;
}

.duties h2 {
    font-size: 1.625rem;
}

.detail-image {
    margin-bottom: var(--space-6);
}

/* ── Formulare ─────────────────────────────────────────── */
.form-card {
    padding: var(--space-6);
    border-top: 0.5rem solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.form-card h2 {
    font-size: 1.75rem;
}

.form {
    display: grid;
    gap: var(--space-5);
}

.form-field {
    display: grid;
    gap: var(--space-2);
}

.form label,
.form legend {
    font-size: 1.125rem;
    font-weight: 700;
}

.form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.form fieldset label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    font-weight: 400;
}

.form input:not([type='checkbox'], [type='radio'], [type='hidden']),
.form textarea,
.form select,
.search input[type='search'] {
    width: 100%;
    min-height: 3.25rem;
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-background);
    color: var(--color-text);
    font: inherit;
    font-size: 1.125rem;
}

.form textarea {
    min-height: 9rem;
    line-height: 1.5;
}

.form input[type='checkbox'],
.form input[type='radio'] {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--color-accent);
}

.form-required {
    color: var(--color-link);
}

.form-help {
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.form-error,
.form-errors {
    margin: 0;
    color: var(--error);
    font-weight: 700;
}

.form-errors {
    padding: var(--space-4);
    border-left: 0.375rem solid var(--error);
    background: var(--color-background);
}

.form-errors ul {
    margin: var(--space-2) 0 0;
}

.form-consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 1.0625rem;
    font-weight: 400;
}

.form-explanation {
    margin: 0;
    color: var(--color-muted);
}

.form button,
.search button,
.account-signed-in button,
.members-join button,
.comments button {
    justify-self: start;
    min-height: 3.25rem;
    padding: var(--space-2) var(--space-6);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
}

.form button:hover,
.search button:hover,
.members-join button:hover,
.comments button:hover {
    background: transparent;
    color: var(--color-accent);
}

.form-thanks,
.form [role='status'] {
    margin: 0;
    padding: var(--space-5);
    border-left: 0.375rem solid var(--ok);
    border-radius: var(--radius);
    background: var(--color-background);
    font-size: 1.25rem;
    font-weight: 700;
}

/* ── Suche, Mitglieder, Kommentare (aus dem Kern) ──────── */
.search form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.search label {
    flex-basis: 100%;
    font-size: 1.25rem;
    font-weight: 800;
}

.search input[type='search'] {
    flex: 1 1 18rem;
    width: auto;
    min-height: 3.5rem;
    font-size: 1.25rem;
}

.search button {
    min-height: 3.5rem;
}

.search-hint,
.search-count {
    color: var(--color-muted);
    font-weight: 700;
}

.search-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.search-filter a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 2px solid var(--color-line);
    border-radius: var(--radius);
    font-weight: 700;
    text-decoration: none;
}

.search-filter a[aria-current] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--color-text);
}

.search-results li {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.search-results li > a {
    font-size: 1.3125rem;
    font-weight: 700;
}

.search-results p {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
}

.search-meta {
    font-size: 1rem;
    font-weight: 700;
}

.account-block h2 {
    font-size: 1.75rem;
}

.account-lead {
    color: var(--color-muted);
}

.account-login,
.members-panel {
    margin-block: var(--space-5);
    padding: var(--space-6);
    border-top: 0.5rem solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.page-header .account-login,
.page-header .members-panel {
    max-width: 44rem;
    margin-bottom: 0;
    background: var(--color-background);
    box-shadow: var(--shadow);
}

.page-body > .account-login,
main > .account-login {
    width: min(100% - 2 * var(--space-5), 44rem);
    margin-inline: auto;
}

.account-signed-in,
.members-join {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.account-signed-in p {
    margin: 0;
}

.account-signed-in button {
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text);
}

.account-status,
.members-state {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-background);
    font-weight: 700;
}

.members-state.is-active {
    box-shadow: inset 0.3rem 0 0 var(--ok);
}

.members-state.is-pending,
.members-state.is-blocked {
    box-shadow: inset 0.3rem 0 0 var(--stop);
}

.comments-wrap {
    padding-top: var(--space-5);
    border-top: 2px solid var(--color-line);
}

.comment-list,
.comment-replies {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-line);
}

.comment-inner {
    display: flex;
    gap: var(--space-3);
}

.comment-main {
    min-width: 0;
    flex: 1;
}

.comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 1rem;
    font-weight: 700;
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.comment-meta time {
    color: var(--color-muted);
    font-weight: 400;
}

.comment-replies {
    margin: var(--space-3) 0 0 var(--space-5);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-marker);
}

.comment-fields {
    display: grid;
    gap: var(--space-4);
}

.basalto-teilen__knopf {
    border-radius: var(--radius);
}

/* ── Fuss ──────────────────────────────────────────────── */
.site-footer {
    margin-top: var(--space-9);
    border-top: 0.5rem solid var(--color-band);
    background: var(--color-dark);
    color: var(--color-dark-muted);
    font-size: 1.0625rem;
}

main:has(.landing > :last-child.cta) + .site-footer,
main:has(.page-flow > :last-child.cta) + .site-footer {
    margin-top: 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-7) var(--space-6);
    padding-block: var(--space-8);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    align-self: start;
}

.footer-mark {
    width: 2.75rem;
    padding: 0.3rem 0.35rem;
    border-radius: var(--radius);
    background: #ffffff;
}

.footer-name {
    margin: 0;
    color: var(--color-dark-text);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.15;
}

.global-footer {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

.global-footer p {
    margin: 0;
}

.global-footer .office {
    color: var(--color-dark-text);
    font-weight: 700;
}

.global-footer .address,
.global-footer .hours {
    white-space: pre-line;
}

.global-footer .phone,
.global-footer .email,
.global-footer .hours,
.global-footer .emergency {
    position: relative;
    padding-left: 2rem;
}

.global-footer .phone::before,
.global-footer .email::before,
.global-footer .hours::before,
.global-footer .emergency::before {
    content: '';
    position: absolute;
    top: 0.2em;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-dark-link);
    mask: var(--zeichen) center / contain no-repeat;
}

.global-footer .phone {
    --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5.5 3.5h3.8l1.9 4.8-2.4 1.5a11 11 0 0 0 5.4 5.4l1.5-2.4 4.8 1.9v3.8a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3.5 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    margin-top: var(--space-2);
    color: var(--color-dark-text);
}

.global-footer .email {
    --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
    color: var(--color-dark-text);
    overflow-wrap: anywhere;
}

.global-footer .hours {
    --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
}

.global-footer .emergency {
    --zeichen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.2M12 17h.01'/%3E%3C/svg%3E");
    margin-top: var(--space-3);
    padding-block: var(--space-2);
    border-top: 1px solid
        color-mix(in srgb, var(--color-dark-text) 25%, transparent);
    color: var(--color-dark-text);
    font-weight: 700;
}

.global-footer .emergency::before {
    top: calc(var(--space-2) + 0.2em);
}

.footer-title {
    margin: 0 0 var(--space-3);
    color: var(--color-dark-link);
}

.site-footer .nav ul {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--color-dark-text);
    text-decoration: underline;
    text-decoration-color: color-mix(
        in srgb,
        var(--color-dark-text) 45%,
        transparent
    );
    text-underline-offset: 0.2em;
}

.site-footer .nav a:hover {
    text-decoration-color: currentColor;
}

.site-footer .nav a:focus-visible {
    color: var(--focus-ink);
}

.site-footer :focus-visible {
    outline-color: var(--focus-fill);
}

.embed {
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    background: var(--color-surface);
}

/* ── Nacht (dunkle Darstellung) ────────────────────────── */
:root[data-theme='dark'] .tile {
    background: var(--color-surface);
    border-color: color-mix(in srgb, var(--color-text) 14%, transparent);
}

:root[data-theme='dark'] .tile:hover {
    background: color-mix(
        in srgb,
        var(--color-accent) 10%,
        var(--color-surface)
    );
    border-color: var(--color-accent);
}

:root[data-theme='dark'] .stage-panel {
    background: var(--color-surface);
}

:root[data-theme='dark'] .stage-links a {
    background: var(--color-background);
}

:root[data-theme='dark'] .stage-image img {
    filter: brightness(0.82) saturate(0.95);
}

:root[data-theme='dark'] .office-card {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-line);
}

:root[data-theme='dark'] .office-card .button {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

:root[data-theme='dark'] .waste-card,
:root[data-theme='dark'] .event,
:root[data-theme='dark'] .office-hours {
    background: var(--color-surface);
    border-color: var(--color-line);
}

:root[data-theme='dark'] .page-header {
    background: color-mix(
        in srgb,
        var(--color-band) 55%,
        var(--color-background)
    );
    border-bottom-color: color-mix(
        in srgb,
        var(--color-band) 80%,
        var(--color-background)
    );
}

:root[data-theme='dark'] .page-header .lead,
:root[data-theme='dark'] .breadcrumbs [aria-current] {
    color: var(--color-text);
}

:root[data-theme='dark'] .header-top {
    border-bottom-color: var(--color-line);
}

:root[data-theme='dark'] .footer-mark,
:root[data-theme='dark'] .brand-mark {
    padding: 0.25rem 0.3rem;
    border-radius: var(--radius);
    background: #f2f1ee;
}

:root[data-theme='dark'] .event-sheet {
    background: var(--color-surface);
}

:root[data-theme='dark'] .facts {
    border-color: var(--color-line);
    background: var(--color-surface);
}

/* ── Bewegung nur auf Wunsch, nur an Bildern ───────────── */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }

    .reveal-ready .reveal img {
        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 0.6s ease-out,
            transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .reveal-ready .reveal.is-visible img {
        opacity: 1;
        transform: none;
    }

    .stage-image img {
        animation: allmend-ankunft 1.4s ease-out both;
    }

    @keyframes allmend-ankunft {
        from {
            transform: scale(1.04);
        }

        to {
            transform: scale(1);
        }
    }

    .split-image img,
    .gallery-grid img,
    .news-image img {
        transition: transform 0.6s ease;
    }

    .split:hover .split-image img,
    .gallery-grid figure:hover img,
    .news-item:hover .news-image img {
        transform: scale(1.03);
    }
}

/* ── Druck: Abfallkalender und Publikationen ───────────── */
@media print {
    .site-header,
    .skip-link,
    .stage-image,
    .stage-search,
    .site-footer,
    .appearance-toggle,
    .alert-icon,
    .page-aside {
        display: none;
    }

    body {
        font-size: 11pt;
    }

    .alert,
    .cta,
    .office-card,
    .page-header {
        background: #fff;
        color: #000;
    }

    .waste-dates li:nth-child(n + 4),
    .waste-dates li:not(:first-child) .waste-time {
        display: flex;
    }
}

@media (max-width: 40rem) {
    body {
        font-size: 1.125rem;
        hyphens: auto;
    }

    .pub {
        grid-template-columns: 4.5rem minmax(0, 1fr);
        gap: var(--space-3);
    }

    .pub-date time {
        width: 4.5rem;
    }

    .pub-day {
        font-size: 1.5rem;
    }

    .pub-month {
        font-size: 0.8125rem;
    }

    .tile {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        min-height: 5.5rem;
        padding: var(--space-3);
        gap: var(--space-3);
    }

    .tile-text {
        grid-column: 2;
        grid-row: 1;
    }

    .tile-arrow {
        grid-column: 3;
        align-self: center;
    }

    .tile-label {
        font-size: 1.1875rem;
    }

    .tile-icon {
        width: 3rem;
        height: 3rem;
    }

    .stage-panel,
    .office-card,
    .office-hours,
    .route,
    .contact-card,
    .form-card {
        padding: var(--space-5) var(--space-4);
    }
}