/* =========================================================================
   Budget 2026 – Frontend
   Farben, Schriften und Grössen kommen als CSS-Variablen aus dem Backend
   (siehe App\Theme::css()).
   ========================================================================= */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Kein seitliches Wegscrollen, falls ein Inhalt breiter gerät als erwartet */
    overflow-x: hidden;
    /* UIkit setzt html auf Weiss und verhindert damit, dass die Farbe des
       Körpers auf die Fläche dahinter durchschlägt. Unter einer kurzen Seite
       bliebe sonst ein weisser Streifen. */
    background: var(--c-bg, #fff);
    /* Der Platz für den Rollbalken bleibt frei, auch wenn gerade keiner
       nötig ist. Sonst springt die ganze Seite um seine halbe Breite zur
       Seite, sobald ein Aufklappbereich sie über die Fensterhöhe wachsen
       lässt – gemessen: sieben Pixel, bei jedem Auf- und Zuklappen. Wer
       einen Text liest, verliert dabei die Zeile.

       «stable» und nicht «overflow-y: scroll»: Der Platz wird reserviert,
       ein Balken aber nur gezeichnet, wenn es etwas zu rollen gibt.
       Browser, die die Angabe nicht kennen, verhalten sich wie bisher. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--c-bg, #fff);
    color: var(--c-text, #000);
    font-family: var(--font-body, Arial, Helvetica, sans-serif);
    font-size: var(--fs-base, 18px);
    line-height: var(--lh-base, 1.55);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-primary-dark); text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-heading, Arial, Helvetica, sans-serif);
    font-weight: var(--fw-heading, 700);
    color: var(--c-heading, #000);
    line-height: 1.2;
    margin: 0 0 .6em;
}
h1 { font-size: var(--fs-h1, 32px); }
h2 { font-size: var(--fs-h2, 32px); }
h3 { font-size: var(--fs-h3, 24px); }
h4 { font-size: calc(var(--fs-h3, 24px) * .9); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 10px 18px;
    background: var(--c-primary);
    color: var(--c-on-primary, #fff);
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ Raster */

.shell {
    width: 100%;
    /* Die eingestellte Breite meint den Inhalt; der seitliche Abstand
       kommt hinzu, damit auf schmalen Geräten ein Rand bleibt. */
    max-width: calc(var(--content-width, 1280px) + 2 * var(--shell-rand, 24px));
    margin: 0 auto;
    padding: 0 var(--shell-rand, 24px);
}
.shell--wide { max-width: none; padding: 0 40px; }

.site-main { display: block; }

/* Die Anordnungen der Sonderseiten – Fehler, Suchergebnisse, Wartung –
   hängen beide Klassen an dasselbe Element: <div class="shell section">.
   Die Kurzform unten überschriebe dann den seitlichen Abstand von .shell,
   und der Inhalt klebte am Rand des Fensters. Darum hier wiederherstellen,
   was .shell vorgibt. */
.shell.section {
    padding-left: var(--shell-rand, 24px);
    padding-right: var(--shell-rand, 24px);
}

.section {
    padding: 55px 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.section--filled { padding: 65px 0; }

/* Ein Abschnitt mit einer im Seiteneditor gewählten Farbe. Er bringt beide
   Fassungen als Variablen mit; die dunkle greift erst, wenn App\Theme die
   Gegenregel dazu ausgibt – sie steht nicht hier, damit ein abgeschalteter
   dunkler Modus wirklich abgeschaltet bleibt. */
.section--eigen {
    background-color: var(--sec-grund-hell);
    color: var(--sec-text-hell, inherit);
}

/* Eine im Seiteneditor gewählte Farbe für eine Überschrift, eine Kennzahl,
   eine Trennlinie. Sie kommt in beiden Fassungen mit; welche gilt, setzt
   App\Theme. Ein Inline-Style könnte das nicht – er schlägt jede Regel und
   liesse sich nicht umschalten. */
[data-wahl] { --wahl: var(--wahl-hell); }

/* Zwei Abschnitte ohne Hintergrund würden ihre Abstände addieren;
   der zweite rückt darum auf. */
.section:not(.section--filled):not(.section--image)
+ .section:not(.section--filled):not(.section--image) { padding-top: 0; }

/* Auf farbigen Flächen erben Überschriften, Kennzahlen und Links
   die Textfarbe der Sektion – sonst verschwindet die Akzentfarbe im Grund. */
.section--filled h1, .section--filled h2, .section--filled h3, .section--filled h4,
.section--image h1, .section--image h2, .section--image h3, .section--image h4,
.section--filled .w-counter__value,
.section--image .w-counter__value,
.section--filled .w-text a,
.section--filled .w-agenda__link,
.section--filled .arrow-link {
    color: inherit;
}
.section--filled .w-text a,
.section--filled .w-agenda__link { text-decoration: underline; }

.section__grid {
    display: grid;
    grid-template-columns: var(--grid-cols, 1fr);
    gap: 40px 4%;              /* wie in der Vorlage: anteilig zur Breite */
    align-items: start;
}
.section__col { min-width: 0; }

/* Einzelne Abschnitte der Vorlage rücken die Spalten enger zusammen –
   so stehen zwei Diagramme nebeneinander, ohne schmal zu wirken.
   Die Breite des Inhaltsbereichs bleibt unverändert. */
.section--eng .section__grid {
    column-gap: 20px;
    align-items: stretch;      /* die grauen Flächen enden auf gleicher Höhe */
}
.section--eng .section__col { display: flex; flex-direction: column; }
.section--eng .section__col > .w-chart,
.section--eng .section__col > .w-counter-box { flex: 1 1 auto; }
.section__col--middle { align-self: center; }
.section__col--bottom { align-self: end; }

/* Nur oben: Die Kurzform «45px 0 0» löschte den seitlichen Abstand von
   .shell, und der Seitentitel stand zwei Ränder weiter links als alles
   unter ihm. Solange die Aufklappbereiche denselben Fehler trugen, fiel
   es nicht auf – sie standen gleich weit daneben.

   Derselbe Wert wie bei .section, nicht 45px: Eine Seite kann ihre
   Überschrift auf zwei Wegen führen – über den Seitenkopf oder als <h1>
   im ersten Abschnitt. Beide Wege sind zulässig, und beide müssen gleich
   aussehen. Mit 45px sass die Überschrift zehn Pixel höher, je nachdem
   welchen Weg die Seite ging. */
.page-head { padding-top: 55px; }
.page-title { margin-bottom: 0; }
/* Auf den Seitentitel folgt entweder ein gewöhnlicher Abschnitt oder eine
   Reihe von Aufklappbereichen – beide brauchen denselben Abstand darunter.
   Stand hier nur .section, sass die Reihe 20 Pixel tiefer als der Abschnitt
   auf der Nachbarseite. */
.page-head + .section,
.page-head + .aufklapp { padding-top: 35px; }

/* ------------------------------------------------------------------ Kopfbereich */

.site-topline { height: 5px; background: var(--c-primary); }

.site-header {
    background: var(--c-surface, #fff);
    position: relative;
    z-index: 980;
}
.site-header--sticky.uk-sticky-fixed { box-shadow: 0 2px 12px rgba(0, 0, 0, .08); }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 96px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.site-header__brand { flex: 0 1 auto; }
.site-header__logo-link:hover { text-decoration: none; }
.site-header__logo { display: block; max-width: 100%; height: auto; }

.site-header__title {
    display: block;
    font-family: var(--font-heading);
    line-height: 1.25;
}
.site-header__title strong {
    display: block;
    font-size: calc(var(--fs-h1, 32px) * .72);
    font-weight: var(--fw-heading, 700);
    color: var(--c-primary);
}
.site-header__title span {
    display: block;
    font-size: calc(var(--fs-base, 18px) * .95);
    color: var(--c-text);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 auto;
}
.site-nav__list {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav__item > a {
    display: inline-block;
    padding: 6px 0;
    color: var(--c-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: var(--fs-base, 18px);
    white-space: nowrap;
}
.site-nav__item > a:hover,
.site-nav__item.is-active > a { color: var(--c-primary); text-decoration: none; }

.site-nav__search-toggle {
    border: 0;
    background: none;
    padding: 4px;
    cursor: pointer;
    color: var(--c-text);
    line-height: 1;
}
.site-nav__search-toggle:hover { color: var(--c-primary); }

.site-nav__dropdown {
    padding: 14px 20px;
    min-width: 240px;
    background: var(--c-surface, #fff);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .13);
}
/* Bis UIkit die Aufklappmenüs übernimmt, stünden sie als gewöhnliche Blöcke
   im Textfluss: die Navigation wäre einen Augenblick lang mehrzeilig und die
   ganze Seite ruckte danach um die halbe Kopfhöhe nach oben. */
.site-nav__dropdown:not(.uk-drop) {
    position: absolute;
    visibility: hidden;
}
.site-nav__sub { margin: 0; padding: 0; list-style: none; }
.site-nav__sub li + li { margin-top: 9px; }
.site-nav__sub a {
    color: var(--c-text);
    font-size: calc(var(--fs-base, 18px) * .95);
}
.site-nav__sub a:hover,
.site-nav__sub li.is-active > a { color: var(--c-primary); text-decoration: none; }

.site-header__muni { flex: 0 0 auto; text-align: right; }
.site-header__muni-logo { display: block; max-width: 100%; height: auto; }
.site-header__muni-name {
    font-family: var(--font-heading);
    font-weight: var(--fw-heading);
    color: var(--c-primary);
}

.site-nav__burger {
    display: none;
    border: 0;
    background: none;
    padding: 6px;
    cursor: pointer;
    color: var(--c-text);
    margin-left: auto;
}

/* ------------------------------------------------------------------ Unternavigation */

.subnav {
    border-top: 1px solid var(--c-text);
    border-bottom: 1px solid var(--c-text);
    background: var(--c-surface, #fff);
}
.subnav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 34px;
    margin: 0;
    padding: 22px 0;
    list-style: none;
}
.subnav__list a {
    color: var(--c-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
}
.subnav__list a:hover,
.subnav__list li.is-active a { color: var(--c-primary); text-decoration: none; }

/* ------------------------------------------------------------------ Suche */

.search-panel {
    background: var(--c-section-alt);
    padding: 22px 0;
}
.search-panel__form { display: flex; align-items: center; gap: 12px; }
.search-panel__input {
    flex: 1;
    border: 1px solid var(--c-border);
    background: var(--c-surface, #fff);
    padding: 12px 16px;
    font: inherit;
    color: var(--c-text);
}
.search-panel__input:focus { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.search-panel__submit,
.search-panel__close {
    border: 0;
    background: none;
    padding: 8px;
    cursor: pointer;
    color: var(--c-text);
}
.search-panel__submit:hover, .search-panel__close:hover { color: var(--c-primary); }

.search-page__form { display: flex; gap: 12px; margin: 0 0 34px; max-width: 620px; }
.search-page__form input {
    flex: 1;
    border: 1px solid var(--c-border);
    padding: 12px 16px;
    font: inherit;
}
.search-page__form button {
    border: 0;
    background: var(--c-primary);
    color: var(--c-on-primary, #fff);
    padding: 12px 26px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.search-page__form button:hover { background: var(--c-primary-dark); }
.search-page__count { color: var(--c-muted, #666); margin-bottom: 26px; }
.search-page__results { margin: 0; padding: 0; list-style: none; }
.search-page__result { padding: 22px 0; border-top: 1px solid var(--c-border); }
.search-page__result h2 { font-size: var(--fs-h3); margin-bottom: .35em; }
.search-page__excerpt { color: var(--c-muted, #555); margin: 0; }
.search-page__excerpt mark { background: rgba(255, 224, 0, .5); color: inherit; padding: 0 2px; }

/* ------------------------------------------------------------------ Mobile Navigation */

.mobile-nav { background: var(--c-surface, #fff); color: var(--c-text); }
.mobile-nav .uk-offcanvas-close { color: var(--c-text); }
.mobile-nav__search { display: flex; gap: 8px; margin: 10px 0 26px; }
.mobile-nav__search input {
    flex: 1;
    border: 1px solid var(--c-border);
    padding: 10px 12px;
    font: inherit;
}
.mobile-nav__search button {
    border: 0;
    background: var(--c-primary);
    color: var(--c-on-primary, #fff);
    padding: 0 14px;
    cursor: pointer;
}
.mobile-nav__list { margin: 0; padding: 0; list-style: none; }
.mobile-nav__list > li > a {
    display: block;
    padding: 12px 0;
    color: var(--c-text);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: 1.05em;
    border-bottom: 1px solid var(--c-border);
}
.mobile-nav__list .uk-nav-sub { padding: 6px 0 12px 14px; }
.mobile-nav__list .uk-nav-sub a { color: var(--c-text); padding: 7px 0; display: block; }
.mobile-nav__list a:hover,
.mobile-nav__list li.is-active > a { color: var(--c-primary); text-decoration: none; }
.mobile-nav__footer {
    margin: 30px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--c-border);
    list-style: none;
}
.mobile-nav__footer li { margin-bottom: 8px; }
.mobile-nav__footer a { color: var(--c-text); font-size: .95em; }

/* ------------------------------------------------------------------ Werkzeugleiste */

.quick-tools {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 970;
    display: flex;
    flex-direction: column;
    background: var(--c-surface, #fff);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .13);
}
.quick-tools__item {
    display: block;
    border: 0;
    background: none;
    padding: 13px 15px;
    color: var(--c-text);
    cursor: pointer;
    line-height: 1;
}
.quick-tools__item:hover { color: var(--c-primary); text-decoration: none; }
.quick-tools__label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.quick-tools__symbol { display: block; }

/* --- Umschalter zwischen hellem und dunklem Modus

   Das Symbol zeigt, wohin der Klick führt: im Hellen der Mond, im Dunkeln
   die Sonne. Das entscheidet allein das Stylesheet, damit schon der erste
   Anstrich stimmt. Die Regeln stehen bewusst hier und nicht bei den übrigen
   Farben: Sie greifen nur, wo der Knopf überhaupt steht – und der steht nur,
   wenn der dunkle Modus angeboten wird. */
/* Das «:root» davor hebt das Gewicht der Regel an. Ohne es gewinnt jede
   Regel der Form «.irgendein-kasten img { display: block }» – die
   Wartungsseite und der Fussbereich haben eine solche –, und beide
   Fassungen des Logos stünden untereinander. */
:root .farbschema--dunkel { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .farbschema--dunkel { display: revert; }
    :root:not([data-farbschema="hell"]):not([data-farbschema="dunkel"]) .farbschema--hell  { display: none; }
}
:root[data-farbschema="dunkel"] .farbschema--dunkel { display: revert; }
:root[data-farbschema="dunkel"] .farbschema--hell  { display: none; }

/* Umschalten geht nur mit Javascript. Bis das Skript im Kopf der Seite sich
   meldet, bleibt der Knopf weg – es geschieht vor dem ersten Anstrich, es
   rückt also nichts nach. */
html:not([data-js]) .quick-tools__item--schema { display: none; }

/* ------------------------------------------------------------------ Fussbereich */

.site-footer {
    background: var(--c-footer-bg, #fff);
    color: var(--c-footer-text, #000);
    border-top: 1px solid var(--c-border);
    padding: 30px 0 45px;
    margin-top: 20px;
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.site-footer__menu {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__menu a { color: var(--c-footer-text); }
.site-footer__menu a:hover,
.site-footer__menu li.is-active a { color: var(--c-primary); text-decoration: none; }
.site-footer__link a {
    color: var(--c-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
}
.site-footer__note { margin-top: 18px; font-size: .9em; color: var(--c-muted, #777); }

/* ------------------------------------------------------------------ Cookie-Hinweis */

.cookie-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 990;
    background: var(--c-surface, #fff);
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .14);
    padding: 18px 0;
}
.cookie-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}
.cookie-bar__text { margin: 0; flex: 1 1 420px; font-size: .95em; }

/* Der Verweis auf die Datenschutzerklärung wird unterstrichen. Er unterschied
   sich vom Text daneben nur um 1,65:1 – wer Farben schlecht auseinanderhält,
   sah dort keinen Link. Gefordert sind 3:1 oder ein zweites Merkmal; die
   Unterstreichung ist das verlässlichere von beidem. */
.cookie-bar__text a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* UIkit färbt jedes «em» rot (#f0506e). Auf weissem Grund sind das 3,45:1 –
   zu wenig für Fliesstext, und rot heisst hier auch gar nichts: Ausgezeichnet
   wird mit der Kursive, nicht mit einer Warnfarbe. */
em {
    color: inherit;
}
.cookie-bar__actions { display: flex; gap: 12px; align-items: center; }
.cookie-bar__accept,
.cookie-bar__decline {
    border: 0;
    padding: 12px 26px;
    font: inherit;
    cursor: pointer;
}
.cookie-bar__accept { background: var(--c-primary); color: var(--c-on-primary, #fff); font-weight: 700; }
.cookie-bar__accept:hover { background: var(--c-primary-dark); }
.cookie-bar__decline { background: none; color: var(--c-text); text-decoration: underline; }

/* =========================================================================
   Inhaltselemente
   ========================================================================= */

.section__col > * + * { margin-top: 26px; }

/* --- Titel */
.w-heading { margin: 0; }
.w-heading--center { text-align: center; }
.w-heading--right { text-align: right; }
.w-heading--large { font-size: calc(var(--fs-h1, 32px) * 1.25); }
.w-heading--small { font-size: var(--fs-h3, 24px); }
.w-heading--divider { padding-bottom: .5em; border-bottom: 2px solid currentColor; }

/* --- Text */
/* Verweise im Fliesstext trägt die Vorlage unterstrichen */
.w-text a { text-decoration: underline; }

.w-text > *:first-child { margin-top: 0; }
.w-text > *:last-child { margin-bottom: 0; }
.w-text--lead { font-size: 1.12em; }
.w-text--small { font-size: .9em; }
.w-text ul, .w-text ol { margin: 0 0 1em; padding-left: 1.4em; }
.w-text li { margin-bottom: .45em; }
.w-text h2, .w-text h3, .w-text h4 { margin-top: 1.2em; }

/* Bilder im Fliesstext: nie breiter als die Spalte, mit Luft nach unten */
.w-text img {
    max-width: 100%;
    height: auto;
    margin: .6em 0 1em;
}
.w-text figure { margin: 1.2em 0; }

/* Verweise auf Unterlagen tragen in der Vorlage einen Pfeil in Linkfarbe */
.w-text a[href$=".pdf"]::before,
.w-text a[href$=".docx"]::before,
.w-text a[href$=".xlsx"]::before,
.w-text a[href$=".zip"]::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    margin-right: .4em;
    vertical-align: -.15em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M5.5 8.5 10 13l4.5-4.5M3.5 16.5h13'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3v10M5.5 8.5 10 13l4.5-4.5M3.5 16.5h13'/%3E%3C/svg%3E") no-repeat center / contain;
}
.w-text figcaption { margin-top: .5em; font-size: .9em; color: var(--c-muted, #666); }
.w-text h2:first-child, .w-text h3:first-child { margin-top: 0; }
.w-text table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.w-text th, .w-text td { padding: 8px 12px; border-bottom: 1px solid var(--c-border); text-align: left; }
.w-text blockquote {
    margin: 1.2em 0;
    padding-left: 20px;
    border-left: 3px solid var(--c-primary);
    font-style: italic;
}

/* --- Traktanden */
.w-agenda__title { margin-bottom: .8em; }
.w-agenda__list { margin: 0; padding-left: 1.6em; }
.w-agenda__list--plain { list-style: none; padding-left: 0; }
.w-agenda__item { margin-bottom: 1.05em; padding-left: .2em; }
.w-agenda__item::marker { font-variant-numeric: tabular-nums; }
/* Die Traktanden stehen in der Vorlage in Textfarbe, nicht in der Hausfarbe */
.w-agenda__link { color: var(--c-text); text-decoration: underline; }
.w-agenda__link:hover { color: var(--c-primary); }
.w-agenda__note { display: block; margin-top: .3em; color: inherit; }
.w-agenda__footnote { margin-top: 1.6em; }

/* --- Bild */
.w-image { margin: 0; }
.w-image--center { margin-left: auto; margin-right: auto; text-align: center; }
.w-image--right { margin-left: auto; }
.w-image__frame { position: relative; display: block; line-height: 0; }
/* Mit «auto» errechnet der Browser die Höhe aus den Massen im Markup und
   hält den Platz frei, bevor das Bild geladen ist. */
.w-image__frame img { display: block; width: 100%; height: auto; }
.w-image__caption { margin-top: 10px; font-size: .92em; line-height: 1.4; }
.w-image__caption--overlay {
    position: absolute;
    left: 0;
    bottom: 22px;
    margin: 0;
    padding: 10px 20px;
    background: rgba(60, 60, 60, .78);
    color: #fff;
    font-size: 1.05em;
    line-height: 1.3;
}

/* --- Kennzahl */
.w-counter { display: flex; gap: 40px; align-items: flex-start; }
.w-counter--stacked { flex-direction: column; gap: 14px; }
.w-counter__value {
    flex: 0 0 auto;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: clamp(60px, 8.5vw, 122px);
    line-height: 1;
    color: var(--c-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.w-counter--side .w-counter__value { min-width: 26%; }
.w-counter__prefix,
.w-counter__suffix { font-size: .45em; }
.w-counter__prefix { margin-right: .12em; }
.w-counter__suffix { margin-left: .04em; }
.w-counter__body { flex: 1 1 auto; padding-top: .35em; min-width: 0; }
.w-counter__title { margin-bottom: .5em; }
.w-counter__text { font-size: .96em; }

/* Kleinere Ausprägungen, etwa für die Spalte neben dem Inhalt */
.w-counter--medium .w-counter__value { font-size: clamp(46px, 5.5vw, 78px); font-weight: 400; }
.w-counter--small .w-counter__value { font-size: clamp(34px, 3.6vw, 52px); font-weight: 400; }
.w-counter--stacked .w-counter__body { padding-top: 0; }

.w-counter-box {
    background: var(--c-section-alt);
    padding: 26px 18px 30px;
    border-radius: var(--r-box, 0);
    box-shadow: var(--shadow-box, none);
}
/* Sehr lange Zahlen sollen den Kasten nicht sprengen */
.w-counter__value { max-width: 100%; }
.w-counter__number { overflow-wrap: anywhere; }
/* In den kleineren Ausprägungen tritt die Beschriftung zurück */
.w-counter-box .w-counter--medium .w-counter__title,
.w-counter-box .w-counter--small .w-counter__title {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-base, 18px);
    margin: .6em 0 0;
}
.w-counter-box .w-counter__title { margin-top: .3em; }

/* --- Video

   Bei YouTube und Vimeo steht bis zum Klick nur ein Bild von diesem
   Server. Der Rahmen hält das Seitenverhältnis, damit die Seite beim
   Einsetzen des Videos nicht springt. */
.w-video { margin: 0 0 1.4em; }
.w-video--boxed { background: var(--c-section-alt); padding: 20px; }
.w-video__title { margin-bottom: .7em; }

.w-video__rahmen {
    position: relative;
    overflow: hidden;
    background: var(--c-section-alt, #eee);
    aspect-ratio: 16 / 9;
}
.w-video__rahmen--4-3  { aspect-ratio: 4 / 3; }
.w-video__rahmen--21-9 { aspect-ratio: 21 / 9; }
.w-video__rahmen--1-1  { aspect-ratio: 1 / 1; }

.w-video__rahmen > iframe,
.w-video__rahmen > .w-video__datei,
.w-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.w-video__poster { object-fit: cover; }

/* Der Abspielknopf liegt über dem ganzen Bild: Wer ein Video starten
   will, zielt nicht auf ein Dreieck von 40 Pixeln. */
.w-video__start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    border: 0;
    background: rgba(0, 0, 0, .34);
    color: #fff;
    font: inherit;
    cursor: pointer;
    transition: background .15s;
}
.w-video__start:hover,
.w-video__start:focus-visible { background: rgba(0, 0, 0, .48); }

.w-video__icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--c-primary) url("data:image/svg+xml,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E\
%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% 50% / 34px 34px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.w-video__dienst {
    font-size: 15px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Was beim Klick geschieht, steht darunter – nicht im Kleingedruckten. */
.w-video__hinweis {
    margin: 8px 0 0;
    font-size: .84em;
    line-height: 1.45;
    color: var(--c-text);
    opacity: .78;
}
.w-video__caption { margin-top: 10px; font-size: .92em; line-height: 1.4; }

/* Weniger Bewegung: Dann auch hier kein Überblenden. */
@media (prefers-reduced-motion: reduce) {
    .w-video__start { transition: none; }
}

/* --- Diagramm */
.w-chart { position: relative; }
/* Elemente, die ihre eigene graue Fläche mitbringen.
 *
 * Die Akzentfarbe wird gegen den weissen Seitengrund gewählt und trägt
 * dort auch. Auf dem Grau daneben kam sie auf 4,23:1 und blieb unter dem
 * Geforderten – gemessen an einem Pfeil-Link unter einem Diagramm.
 *
 * Ein Abschnitt in derselben Farbe hat das Problem nicht: Dort erben die
 * Verweise die Textfarbe (siehe .section--filled weiter oben). Diese
 * Kästen aber stehen mitten auf weissem Grund und bringen ihr Grau selbst
 * mit; die Regel von dort greift nicht.
 *
 * Statt jede Schrift darin einzeln zu behandeln, wird die Variable innen
 * neu belegt. Alles, was sie nutzt, zieht damit von selbst nach – und wo
 * der Kontrast ohnehin reichte, ist es dieselbe Farbe. */
.w-chart--boxed,
.w-video--boxed,
.w-counter-box,
.search-panel {
    --c-primary: var(--c-primary-auf-alt);
}

.w-chart--boxed {
    background: var(--c-section-alt);
    padding: 34px 30px 26px;
    border-radius: var(--r-box, 0);
    box-shadow: var(--shadow-box, none);
}
.w-chart__title { margin-bottom: 1em; }
/* Steht das Diagramm in einer schmalen Spalte, tritt der Titel zurück */
.w-chart__title--small { font-size: 13px; margin-bottom: 1.6em; }
.w-chart__canvas { position: relative; width: 100%; }
.w-chart__footnote {
    margin-top: 22px;
    font-size: .84em;
    columns: var(--fussnote-spalten, 2);
    column-gap: 40px;
}
.w-chart__footnote p { margin-bottom: .3em; break-inside: avoid; }
.w-chart__empty { color: var(--c-muted, #777); font-style: italic; }
.w-chart__link { margin: 26px 0 0; text-align: center; }
.w-chart--boxed .w-chart__link { margin-top: 30px; }
.w-chart__static { margin: 0; padding: 0; list-style: none; }
.w-chart__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 16px;
}
.w-chart__arrow { color: var(--c-primary); }
.w-chart__dots { margin: 0; }

/* --- Tabelle
   Aufbau wie in den Referenzseiten: die Spalten stehen mit Abstand
   nebeneinander (border-spacing), jede Zelle trägt oben eine feine Linie,
   und nur die beschrifteten Kopfzellen sind dunkel hinterlegt. */
.w-table__title { margin-bottom: .8em; }

/* «border-spacing» setzt seinen Abstand auch an den Aussenkanten: vor der
   ersten und hinter der letzten Spalte. Die Tabelle sass dadurch schmaler
   im Satzspiegel als der Text darüber. Der Rahmen wird darum um genau
   diesen Abstand nach aussen gezogen, damit die Spalten bündig stehen –
   die Lücken zwischen ihnen bleiben davon unberührt. */
.w-table__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--table-spalten-abstand, 10px));
    margin-right: calc(-1 * var(--table-spalten-abstand, 10px));
}
.w-table__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: var(--table-spalten-abstand, 10px) 0;
    /* Die Vorlage rückt die erste Spalte um den Spaltenabstand ein,
       statt die Tabelle nach aussen zu ziehen. */
    margin: 0;
    font-size: .89em;
    font-variant-numeric: tabular-nums;
}

.w-table__table th {
    padding: 20px 0;
    text-align: left;
    vertical-align: bottom;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
}
/* Beschriftete Kopfzellen der Wertespalten */
.w-table__table--dark th:not(.is-empty) {
    background: var(--c-table-head);
    color: #fff;
    padding: 10px;
    text-align: center;
    white-space: nowrap;
}
/* Linien-Stil: kräftige Linie unter der Kopfzeile, keine Farbflächen */
.w-table__table--line th {
    border-bottom: 2px solid currentColor;
    padding: 20px 0 3px;
}
.w-table__table--line th.is-number { text-align: right; }
.w-table__table th.is-empty { background: none; }

/* Zweistufiger Kopf: oben die Gruppen, darunter die einzelnen Spalten */
.w-table__table tr.is-groups th { text-align: center; padding: 10px; }
.w-table__table--dark tr.is-groups + tr th:not(.is-empty) {
    background: none;
    color: inherit;
    text-align: right;
    padding: 20px 0 3px;
    border-bottom: 1px solid var(--c-line, #817e7b);
}

.w-table__table td {
    padding: 10px 0 5px;
    border-top: 1px solid var(--c-line, #817e7b);
    vertical-align: top;
}
.w-table__table td.is-number,
.w-table__table--line th.is-number { text-align: right; white-space: nowrap; }

/* Wertespalten beanspruchen nur so viel Platz wie nötig,
   die Bezeichnungsspalte bekommt den gesamten Rest */
.w-table__table td.is-number,
.w-table__table th.is-number { width: 1%; }
.w-table__table td:not(.is-number),
.w-table__table th:not(.is-number) { width: 100%; }
.w-table__table--narrow-first td:first-child,
.w-table__table--narrow-first th:first-child { width: 1%; white-space: nowrap; }

.w-table__table tr.is-group td {
    font-weight: 700;
    padding-top: 22px;
}
/* Fett wird, was in der Zelle ausgezeichnet ist – nicht, was nach einer
   Summenzeile aussieht. Sonst stünde eine ganze Tabelle fett, deren
   Zeilen ohne Kontonummer geführt sind. */
.w-table__table tr td strong,
.w-table__table tr th strong { font-weight: 700; }

/* Im Linien-Stil gliedern Ergebniszeilen die Tabelle in Blöcke:
   die erste Zeile steht ohne Linie, nach jeder Ergebniszeile beginnt
   ein neuer Block mit kräftigerer Linie, unten schliesst eine feine ab. */
.w-table__table--line tr.is-first td { border-top: 0; }
.w-table__table--line tr.is-block td { border-top: 2px solid currentColor; }
.w-table__table--line tr.is-last td { border-bottom: 1px solid var(--c-line, #817e7b); }

/* Aufstellungen der Vorlage: durchgehende Linie unter jeder Zeile,
   Spalten ohne Abstand – anders als bei den Zahlentabellen. */
.w-table__table--rows {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
}
.w-table__table--rows tr { border-bottom: 1px solid var(--c-text); }
.w-table__table--rows td,
.w-table__table--rows th {
    border-top: 0;
    padding: 20px 20px 15px 10px;
}
.w-table__table--rows th:not(.is-empty) {
    background: none;
    color: inherit;
    text-align: left;
    padding: 20px 20px 15px 10px;
}
/* Die Beträge stehen in gleich breiten Spalten, die Beschriftung nimmt den Rest */
.w-table__table--rows td:not(:first-child),
.w-table__table--rows th:not(:first-child) { width: 16.7%; }
.w-table__table--rows td:first-child,
.w-table__table--rows th:first-child { width: auto; white-space: normal; }

.w-table__note { margin-top: 16px; font-size: .9em; }

/* --- Aufklappbereiche
   UIkit setzt zwischen den Einträgen einen Abstand; die Einträge sollen
   aber wie in der Vorlage unmittelbar aneinander anschliessen, damit alle
   gleich hoch wirken. */
.w-accordion { margin: 0; }
.w-accordion > :nth-child(n + 2) { margin-top: 0; }
.w-accordion__item { border-bottom: 1px solid var(--c-text); }
.w-accordion__item:first-child { border-top: 1px solid var(--c-text); }
.w-accordion__title {
    position: relative;
    display: block;
    padding: 22px 50px 22px 0;
    margin: 0;
    color: var(--c-heading);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: var(--fs-h3, 24px);
    line-height: 1.3;
}
.w-accordion__title::before,
.w-accordion__title::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}
.w-accordion__title::before { width: 20px; height: 2px; margin-top: -1px; }
.w-accordion__title::after { width: 2px; height: 20px; margin-top: -10px; right: 17px; }
.uk-open > .w-accordion__title::after { opacity: 0; transform: rotate(90deg); }
.w-accordion__title:hover { color: var(--c-primary); text-decoration: none; }
.w-accordion__content { margin: 0 0 30px; }
.w-accordion__note { margin-top: 16px; font-size: .9em; }

/* --- Aufklappbare Abschnitte

   Dasselbe Aussehen wie beim Element «Aufklappbereiche», aber auf der
   Ebene eines Abschnitts: Darin lässt sich alles unterbringen, was ein
   Abschnitt kann – Spalten, Bilder, Diagramme.

   Die Titelzeile trägt die Linien, nicht der Abschnitt selbst: Ein
   Abschnitt kann eine eigene Hintergrundfarbe haben, und die soll erst
   beim Aufklappen zu sehen sein, nicht schon als Streifen darüber. */
/* Die Gruppe übernimmt den Abstand, den sonst jeder Abschnitt für sich
   hat – die Abschnitte darin geben ihn ab. Sonst sässe eine Reihe von
   Aufklappbereichen enger im Seitenfluss als alles andere, oder jeder
   brächte seinen eigenen Abstand mit und die Titel stünden weit
   auseinander. */
/* Nur oben und unten: Die Kurzform «padding: 55px 0» löschte den
   seitlichen Abstand, den .shell vorgibt – die Reihe stand dann um zwei
   Ränder breiter da als jeder andere Abschnitt. Dieselbe Falle ist oben
   bei .shell.section schon vermerkt. */
.aufklapp {
    padding-top: 55px;
    padding-bottom: 55px;
}

.section--aufklapp {
    padding-top: 0;
    padding-bottom: 0;
}
.aufklapp > .section--aufklapp + .section--aufklapp { margin-top: 0; }

.aufklapp__titel {
    position: relative;
    display: block;
    padding: 22px 50px 22px 0;
    margin: 0;
    border-top: 1px solid var(--c-text);
    color: var(--c-heading);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: var(--fs-h3, 24px);
    line-height: 1.3;
}
/* Die letzte Linie schliesst die Reihe ab. */
.aufklapp > .section--aufklapp:last-child { border-bottom: 1px solid var(--c-text); }

.aufklapp__titel::before,
.aufklapp__titel::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}
.aufklapp__titel::before { width: 20px; height: 2px; margin-top: -1px; }
.aufklapp__titel::after { width: 2px; height: 20px; margin-top: -10px; right: 17px; }
.uk-open > .aufklapp__titel::after { opacity: 0; transform: rotate(90deg); }
.aufklapp__titel:hover { color: var(--c-primary); text-decoration: none; }

/* Der Inhalt bekommt Luft nach unten, aber keine seitliche: Die kommt von
   der Hülle, sonst rückte er gegenüber den übrigen Abschnitten ein.

   Kein Kindselektor: Während des Auf- und Zuklappens schiebt UIkit einen
   Rahmen «.uk-transition» dazwischen. Mit «>» griff die Regel dann nicht
   mehr, der Inhalt fiel auf das seitliche Polster von .shell zurück und
   sass 24 Pixel eingerückt – bis die Animation endete und er
   zurücksprang.

   Zugleich genau genug: Gemeint ist der Inhalt des Abschnitts, der beide
   Klassen trägt. Ein Element «Aufklappbereiche» im Abschnitt hat zwar
   auch «uk-accordion-content», aber kein «shell» – sein Polster bleibt
   unberührt. */
.section--aufklapp .uk-accordion-content.shell {
    margin: 0 0 30px;
    padding-left: 0;
    padding-right: 0;
}

/* Eine Fortsetzung im Aufklappbereich: eigenes Raster, gleicher Bereich.
   Der Abstand trennt sie vom Teil darüber, ohne eine Linie zu ziehen –
   sie sind ein Inhalt, nicht mehrere. */
.section__grid--teil { margin-top: 26px; }

/* --- Farblegende */
.w-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: var(--cols, 1);
    column-gap: 36px;
}
.w-checklist__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: .75em;
    break-inside: avoid;
    font-weight: 700;
}
.w-checklist__marker {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: var(--marker-color, var(--c-primary));
    transform: translateY(2px);
}
.w-checklist--circle .w-checklist__marker { border-radius: 50%; }
.w-checklist--check .w-checklist__marker {
    width: 14px;
    height: 8px;
    background: none;
    border-left: 3px solid var(--marker-color, var(--c-primary));
    border-bottom: 3px solid var(--marker-color, var(--c-primary));
    transform: rotate(-45deg) translateY(-2px);
}

/* --- Downloads */
.w-downloads { margin: 0; padding: 0; list-style: none; }
.w-downloads__item { margin-bottom: .9em; }
.w-downloads__link { display: flex; align-items: baseline; gap: 12px; }
.w-downloads__icon { flex: 0 0 auto; transform: translateY(3px); }
.w-downloads__title { text-decoration: underline; }
.w-downloads__meta { color: var(--c-muted, #777); font-size: .85em; white-space: nowrap; }

/* --- Schaltflächen und Pfeillinks */
.w-button { margin: 0; }
.w-button--center { text-align: center; }
.w-button--right { text-align: right; }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--c-primary);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
}
.arrow-link:hover { color: var(--c-primary-dark); text-decoration: none; }
.arrow-link__icon {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 2px;
    background: currentColor;
    transition: transform .18s ease;
}
.arrow-link__icon::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.arrow-link:hover .arrow-link__icon { transform: translateX(4px); }

.w-button__link {
    display: inline-block;
    padding: 13px 30px;
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    border-radius: var(--r-button, 0);
}
.w-button__link--solid { background: var(--c-primary); color: var(--c-on-primary, #fff); }
.w-button__link--solid:hover { background: var(--c-primary-dark); color: var(--c-on-primary, #fff); text-decoration: none; }
.w-button__link--outline { border: 2px solid var(--c-primary); color: var(--c-primary); }
.w-button__link--outline:hover { background: var(--c-primary); color: var(--c-on-primary, #fff); text-decoration: none; }
.w-button__link--plain { padding: 0; text-decoration: underline; }

/* --- Trenner */
.w-separator { border: 0; border-top: 1px solid var(--c-border); }
.w-spacer { height: var(--h, 40px); }

/* --- Slider
   Bei Bildern gibt das Seitenverhältnis die Höhe vor. Slider mit Textinhalt
   (Diagramme, Zitate, Kennzahlen) stapeln ihre Folien stattdessen in einer
   Rasterzelle: so bestimmt der Inhalt die Höhe, und während des Übergangs
   liegen die Folien übereinander statt untereinander. */
.w-chart--slider .uk-slideshow-items,
.w-quotes .uk-slideshow-items,
.w-counter-slider .uk-slideshow-items {
    display: grid;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.w-chart--slider .uk-slideshow-items > *,
.w-quotes .uk-slideshow-items > *,
.w-counter-slider .uk-slideshow-items > * {
    position: relative;
    grid-area: 1 / 1;
}

.w-slider__frame { position: relative; }
.w-slider--images .uk-slideshow-items { background: var(--c-section-alt); }
.w-slider__caption--overlay {
    position: absolute;
    left: 0;
    bottom: 26px;
    padding: 11px 22px;
    background: rgba(60, 60, 60, .78);
    color: #fff;
    font-size: 1.05em;
    line-height: 1.3;
    max-width: 85%;
}
.w-slider__captions { margin-top: 12px; font-size: .92em; min-height: 1.4em; }
.w-slider__captions p { margin: 0; }
.w-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    background: rgba(0, 0, 0, .3);
    padding: 8px;
}
.w-slider__nav--prev { left: 12px; }
.w-slider__nav--next { right: 12px; }
.w-slider__nav:hover { background: rgba(0, 0, 0, .55); color: #fff; }
.w-slider__dots { margin-top: 18px; justify-content: center; }

/* --- Zitate */
.w-quotes { position: relative; padding: 20px 0; }
.w-quotes--center { text-align: center; }
.w-quotes__static { margin: 0; padding: 0; list-style: none; }
.w-quotes__quote { margin: 0; }
.w-quotes__text {
    /* UIkit färbt blockquote von sich aus dunkelgrau. Ohne diese Zeile bliebe
       das Zitat im dunklen Modus dunkelgrau auf dunklem Grund. */
    color: var(--c-zitat, #333);
    font-family: var(--font-heading);
    font-weight: var(--fw-heading, 700);
    font-size: clamp(22px, 2.3vw, 32px);
    line-height: 1.42;
    margin: 0;
}
.w-quotes__source { display: block; margin-top: 16px; font-size: .8em; font-style: normal; color: var(--c-muted, #666); }
.w-quotes__dots { margin-top: 26px; justify-content: center; }
.w-quotes--nav-dots-right { padding-right: 60px; }
.w-quotes--nav-dots-right .w-quotes__dots {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    margin: 0;
    gap: 10px;
}

/* --- Kennzahlen-Slider */
.w-counter-slider { position: relative; }
.w-counter-slider__static { margin: 0; padding: 0; list-style: none; }
.w-counter-slider__nav { margin-top: 24px; display: flex; gap: 16px; justify-content: center; }
.w-counter-slider__arrow { color: currentColor; }

/* Punktnavigation an das Design anpassen */
.uk-dotnav > * > * {
    border-color: currentColor;
    width: 11px;
    height: 11px;
}
.uk-dotnav > .uk-active > * { background-color: var(--c-primary); border-color: var(--c-primary); }

/* =========================================================================
   Anpassung an kleinere Bildschirme
   ========================================================================= */

@media (max-width: 1279px) {
    .site-nav__list { gap: 20px; }
    .site-header__inner { gap: 20px; }
}

@media (max-width: 1023px) {
    .site-nav { display: none; }
    .site-nav__burger { display: block; flex: 0 0 auto; margin-left: 0; }

    /* Gemeindelogo in eine eigene Zeile über Titel und Menüschalter */
    .site-header__inner {
        flex-wrap: wrap;
        min-height: 0;
        gap: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
    .site-header__muni {
        order: -1;
        flex: 0 0 100%;
        text-align: left;
        padding: 14px 0;
        border-bottom: 2px solid var(--c-primary);
    }
    .site-header__brand {
        flex: 1 1 auto;
        min-width: 0;
        padding: 14px 0;
    }
    .site-header__logo { max-width: 220px !important; }
    .site-header__muni-logo { max-width: 200px !important; }
    .site-header__muni-name { display: inline-block; }
    .site-header__title strong { font-size: 1.15rem; }

    .section { padding: 40px 0; }
    .section--filled { padding: 45px 0; }
    .section__grid { grid-template-columns: 1fr; gap: 34px; }

    .quick-tools { top: auto; bottom: 0; transform: none; flex-direction: row; }

    .w-counter { flex-direction: column; gap: 16px; }
    .w-counter__value { font-size: clamp(48px, 14vw, 86px); }
    .w-chart__footnote { columns: 1; }  /* auf schmalen Geräten immer einspaltig */
    .w-quotes--nav-dots-right { padding-right: 0; }
    .w-quotes--nav-dots-right .w-quotes__dots {
        position: static;
        transform: none;
        flex-direction: row;
        margin-top: 22px;
    }
}

@media (max-width: 767px) {
    .shell, .shell.section { padding-left: 18px; padding-right: 18px; }
    .subnav__list { gap: 18px; padding: 16px 0; font-size: .95em; }
    .w-spacer { height: var(--h-mobile, 20px); }
    .w-chart--boxed { padding: 24px 18px 20px; }
    .cookie-bar { padding: 14px 0; }
    .cookie-bar__inner { flex-direction: column; align-items: stretch; gap: 12px; }
    /* In der Spaltenrichtung würde die Basisbreite als Höhe wirken */
    .cookie-bar__text { flex: 0 0 auto; font-size: .88em; }
    .cookie-bar__actions { justify-content: flex-end; }
    .cookie-bar__accept, .cookie-bar__decline { padding: 10px 20px; font-size: .95em; }
    .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Druckausgabe
   ========================================================================= */

@media print {
    .site-header, .subnav, .quick-tools, .cookie-bar, .search-panel,
    .site-nav__burger, .w-slider__nav, .uk-dotnav { display: none !important; }

    body { font-size: 11pt; color: #000; background: #fff; }
    .section { padding: 12pt 0; background: none !important; color: #000 !important; }
    .section__grid { display: block; }
    .section__col { width: 100% !important; margin-bottom: 12pt; }
    .w-chart--boxed { background: none; padding: 0; }
    .uk-accordion-content { display: block !important; }
    a { color: #000; text-decoration: underline; }
    .neue-fassung { display: none; }
    .w-table__table { font-size: 9pt; }
    .w-table__table--dark th { background: #ddd !important; color: #000 !important; -webkit-print-color-adjust: exact; }
}

/* ------------------------------------------------------------------ Formensprache

   Die Vorlagen unter «Design» setzen die Werte --r-box, --r-button und
   --shadow-box. Ohne Vorlage stehen sie auf 0 beziehungsweise «none»: dann
   sieht die Website aus wie zuvor. */

.w-image__frame img,
.w-table__scroll,
.search-panel__input {
    border-radius: var(--r-box, 0);
}

.w-image__frame img,
.w-table__scroll {
    box-shadow: var(--shadow-box, none);
}

/* ------------------------------------------------------------------ Anordnungen des Kopfbereichs

   Die gewählte Anordnung steht als Klasse am <header>; die Bausteine selbst
   bleiben in jeder Anordnung dieselben. */

.site-header__inner--gestapelt {
    display: block;
    padding-top: 10px;
    padding-bottom: 6px;
}

.site-header__reihe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.site-header__reihe > * { min-width: 0; }

/* Damit das Logo in der Mitte steht, braucht es links ein Gegengewicht zum
   Gemeindelogo rechts. */
.site-header__platz { flex: 1 1 0; }
.site-header--zentriert .site-header__brand { flex: 0 0 auto; }
.site-header--zentriert .site-header__muni { flex: 1 1 0; text-align: right; }
.site-header--zentriert .site-header__muni-logo { margin-left: auto; }

/* Zentriert wird die Navigation selbst, nicht nur die Zeile: sie füllt die
   Breite aus, ihre Punkte sässen sonst weiterhin links. */
.site-header__reihe--mitte { justify-content: center; }
.site-header__reihe--mitte .site-nav,
.site-header__reihe--mitte .site-nav__list { justify-content: center; }

/* In den gestapelten Anordnungen sitzt die Navigation in einer eigenen Zeile
   und darf sich dort breit machen. */
.site-header__inner--gestapelt .site-nav { width: 100%; }
.site-header__inner--gestapelt .site-nav__list { flex-wrap: wrap; }

/* Logo rechts: das Gemeindelogo übernimmt den linken Platz. */
.site-header--logo-rechts .site-header__muni { order: -1; }

@media (max-width: 959px) {
    .site-header__inner--gestapelt .site-header__reihe--mitte { display: none; }
}

/* ------------------------------------------------------------------ Anordnungen des Fussbereichs */

/* Alles untereinander statt nebeneinander. */
.site-footer__inner--gestapelt {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
.site-footer__inner--mitte {
    align-items: center;
    text-align: center;
}
.site-footer__inner--mitte .site-footer__menu { justify-content: center; }

/* Der Hinweis steht in der gestapelten Anordnung mit in der Reihe und
   braucht deshalb keinen zusätzlichen Abstand nach oben. */
.site-footer__inner--gestapelt .site-footer__note { margin-top: 0; }

/* Mit Gemeindelogo: Logo links, die übrigen Stücke rechts daneben. */
.site-footer__inner--logo { align-items: center; gap: 34px; }
.site-footer__inner--logo .site-footer__spalte {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex: 1 1 320px;
    flex-wrap: wrap;
}

.site-footer__logo img { display: block; width: 100%; height: auto; }

/* Drei Spalten nebeneinander, die sich auf schmalen Bildschirmen von selbst
   untereinander legen. */
.site-footer__inner--spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    align-items: start;
    gap: 28px;
}
.site-footer__inner--spalten > * { min-width: 0; }
.site-footer__inner--spalten .site-footer__menu { flex-direction: column; gap: 10px; }

/* ------------------------------------------------------------------ Anordnungen der Werkzeugleiste */

.quick-tools--links {
    right: auto;
    left: 0;
}

.quick-tools--waagrecht { flex-direction: row; }

.quick-tools--unten {
    top: auto;
    bottom: 0;
    transform: none;
}

.quick-tools--unten.quick-tools--mitte {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Die Symbole rücken auf schmalen Bildschirmen ohnehin schon eng zusammen;
   eine waagrechte Leiste soll dort nicht über den Rand hinausragen. */
@media (max-width: 639px) {
    .quick-tools--waagrecht { max-width: 100%; overflow-x: auto; }
}

/* ------------------------------------------------------------------ Anordnungen des Cookie-Hinweises */

.cookie-bar__inner--gestapelt {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}
/* In der Leiste gibt «flex: 1 1 420px» dem Text seine Mindestbreite; steht er
   dagegen über den Schaltflächen, wären daraus 420 Punkte Höhe – und der
   Kasten klaffte auseinander. */
.cookie-bar__inner--gestapelt .cookie-bar__text { flex: 0 1 auto; }
.cookie-bar__inner--mitte { align-items: center; text-align: center; }

/* Ein Kasten in der Ecke statt einer Leiste über die volle Breite. */
.cookie-bar--kasten {
    left: auto;
    right: 22px;
    bottom: 22px;
    max-width: 380px;
    padding: 22px 24px;
    border-radius: var(--r-box, 0);
}
.cookie-bar--kasten.cookie-bar--links { right: auto; left: 22px; }

/* Als Fenster: der Hinweis liegt mittig, dahinter tritt die Seite zurück. */
.cookie-bar--fenster {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
    box-shadow: none;
}
.cookie-bar__fenster {
    background: var(--c-surface, #fff);
    padding: 30px 32px;
    max-width: 520px;
    width: 100%;
    border-radius: var(--r-box, 0);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
}

@media (max-width: 639px) {
    .cookie-bar--kasten {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }
}

/* Der Knopf für Benachrichtigungen: durchgestrichene Glocke, solange nichts
   abonniert ist. */
.quick-tools__item--abo.is-an .abo__strich { display: none; }
.quick-tools__item--abo.is-an { color: var(--c-primary); }

/* --------------------------------------------- Hinweis auf eine neue Fassung

   Er erscheint selten und soll dann nicht übersehen werden, ohne die Seite
   zu blockieren: unten links, gerade so gross wie nötig. Der Cookie-Hinweis
   klebt ebenfalls am unteren Rand; site.js rückt diesen darüber, solange
   jener noch steht. */
.neue-fassung {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 996;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 14px;
    background: var(--c-surface, #fff);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-primary);
    border-radius: var(--r-box, 0);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
    font-size: .92em;
    line-height: 1.35;
}
.neue-fassung__text { margin: 0; flex: 1 1 auto; }

.neue-fassung__laden {
    flex: 0 0 auto;
    border: 0;
    background: var(--c-primary);
    color: var(--c-on-primary, #fff);
    font: inherit;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--r-button, 0);
    cursor: pointer;
}
.neue-fassung__laden:hover { background: var(--c-primary-dark); }
.neue-fassung__laden[disabled] { opacity: .6; cursor: default; }

.neue-fassung__spaeter {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--c-muted, #666);
    font: inherit;
    font-size: 1.4em;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
}
.neue-fassung__spaeter:hover { color: var(--c-text); }

@media (max-width: 479px) {
    .neue-fassung { left: 12px; right: 12px; max-width: none; }
}

/* ------------------------------------------------------------------ Anordnungen des Suchfelds */

/* Als Fenster: das Feld liegt mittig, dahinter tritt die Seite zurück. */
.search-panel--fenster {
    position: fixed;
    inset: 0;
    z-index: 995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
}
.search-panel__fenster {
    background: var(--c-surface, #fff);
    padding: 26px 28px;
    width: 100%;
    max-width: 560px;
    border-radius: var(--r-box, 0);
    box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
}
.search-panel--fenster .search-panel__input { font-size: 1.1em; }

/* Über den Kopfbereich gelegt, statt ihn nach unten zu schieben. */
.search-panel--darueber {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 980;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .13);
}

/* Schmal und rechts – dort, wo die Lupe steht. */
.search-panel__schmal { display: flex; justify-content: flex-end; }
.search-panel--schmal .search-panel__form { width: 100%; max-width: 420px; }

@media (max-width: 639px) {
    .search-panel--schmal .search-panel__form { max-width: none; }
}

/* ------------------------------------------------------------------ Anordnungen der Ergebnisseite */

.suchseite--zweispaltig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    gap: 40px;
    align-items: start;
}
.suchseite--zweispaltig > * { min-width: 0; }

/* Das Feld bleibt beim Blättern in Sicht, solange Platz dafür ist. */
.suchseite__neben { position: sticky; top: 120px; }
.suchseite__neben .search-page__form { flex-direction: column; max-width: none; }
.suchseite__neben .search-page__form button { width: 100%; }

@media (max-width: 959px) {
    .suchseite--zweispaltig { grid-template-columns: 1fr; gap: 24px; }
    .suchseite__neben { position: static; order: -1; }
    .suchseite__neben .search-page__form { flex-direction: row; }
    .suchseite__neben .search-page__form button { width: auto; }
}

/* ------------------------------------------------------------------ Anordnungen der Fehlerseite */

.fehlerseite--mitte { text-align: center; }
.fehlerseite--mitte .search-page__form { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ Wartungsseite */

.wartung__logo img { display: block; width: 100%; height: auto; margin-bottom: 26px; }
.wartung__kontakt { margin-top: 22px; }

/* Überschriften stehen sonst dicht am Text: «.page-title» hat keinen
   unteren Abstand, weil gewöhnliche Seiten ihn über «.page-head + .section»
   bekommen. Diesen Kopfbereich gibt es hier nicht, und ohne Ausgleich
   klebte die Erklärung an der Überschrift – gemessen: null Punkte.

   In em und nicht in Punkten, damit der Abstand mit der Schriftgrösse
   mitwächst; die Anordnung «Grosser Aushang» setzt eine grössere. */
.wartung .page-title { margin-bottom: .4em; }

/* ------------------------------------------------------------------ Bauzaun */

/* Er borgt sich die Anordnung der Wartungsseite – dieselbe Lage, dasselbe
   Logo – und bringt nur das Feld mit. */
.zugang__form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}
.zugang__label {
    flex-basis: 100%;
    font-size: calc(var(--fs-base, 18px) * .9);
    color: var(--c-muted, #666);
}
/* Eigene Gestaltung: «admin-input» steht nur im Stylesheet der
   Verwaltung, und das lädt die Website nicht. Geborgt sah das Feld aus wie
   ein Strich. */
.zugang__feld {
    width: min(280px, 100%);
    padding: 9px 12px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-box, 0);
    background: var(--c-surface);
    color: var(--c-text);
    font: inherit;
}
.zugang__feld:focus {
    outline: 2px solid var(--c-primary);
    outline-offset: 1px;
    border-color: var(--c-primary);
}
.zugang__knopf {
    padding: 9px 22px;
    border: 0;
    border-radius: var(--r-button, 0);
    background: var(--c-primary);
    color: var(--c-on-primary, #fff);
    font: inherit;
    cursor: pointer;
}
.zugang__knopf:hover { background: var(--c-primary-dark, var(--c-primary)); }
.zugang__fehler {
    margin-top: 16px;
    color: var(--c-fehler, #b3261e);
}
/* Der Weg zurück von Datenschutz und Impressum, solange der Zaun steht. */
.zurueck-zaun {
    padding-bottom: 40px;
    font-size: calc(var(--fs-base, 18px) * .9);
}

.zugang__hinweis {
    margin: 28px auto 0;
    max-width: 44ch;
    font-size: calc(var(--fs-base, 18px) * .82);
    line-height: 1.5;
    color: var(--c-muted, #666);
}

.wartung--mitte { text-align: center; }
.wartung--mitte .wartung__logo img { margin-left: auto; margin-right: auto; }

/* «Grosser Aushang»: schmale Spalte, grosses Logo, grosse Überschrift.

   In der Mitte des Bildschirms steht der Hinweis inzwischen ohnehin – das
   besorgt der Seitentyp weiter oben, seit die Wartungsseite ohne Kopf- und
   Fussbereich auskommt. Diese Anordnung hatte davon ihren Namen; geblieben
   wäre sonst nur die schmalere Spalte, und die sieht man beim üblichen
   kurzen Text nicht. Der Unterschied liegt jetzt in der Grösse. */
.wartung--voll {
    --wartung-logo: 360px;
    text-align: center;
    padding: 40px 20px;
}
.wartung--voll .wartung__mitte {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.wartung--voll .wartung__logo img {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
/* Die Grössen wachsen mit den Einstellungen mit, statt sie zu übergehen. */
.wartung--voll .page-title {
    font-size: calc(var(--fs-h1, 32px) * 1.375);
    line-height: 1.15;
}
.wartung--voll p { font-size: calc(var(--fs-base, 18px) * 1.15); }

/* Die Wartungsseite kommt ohne Kopf- und Fussbereich. Der Hinweis steht
   also allein auf dem Bildschirm – und dann gehört er in dessen Mitte und
   nicht an den oberen Rand mit einer Handbreit Text über viel Weiss.

   Entscheidend ist «min-height» und nicht «height»: Wird der Inhalt höher
   als das Fenster – kleines Gerät, langer Text, grosse Schrift –, wächst
   der Bereich mit, die Seite bekommt einen Rollbalken, und die Zentrierung
   hört von selbst auf. Mit einer festen Höhe schöbe «center» statt dessen
   den oberen Teil aus dem Bild, und dorthin liesse sich nicht
   zurückscrollen. Nachgemessen bei 360 × 300: Der Inhalt beginnt bei 0.

   dvh nimmt auf Mobilgeräten die Adressleiste heraus; Browser, die es nicht
   kennen, bleiben bei der Zeile davor. */
.page-wartung .site-main,
.page-zugang .site-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
}