/* =========================================================================
   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);
}

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; }

.page-head { padding: 45px 0 0; }
.page-title { margin-bottom: 0; }
.page-head + .section { 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; }
.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; }

/* --- Diagramm */
.w-chart { position: relative; }
.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; }

.w-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.w-table__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 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. */
.aufklapp { padding: 55px 0; }

.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. */
.section--aufklapp > .uk-accordion-content {
    margin: 0 0 30px;
    padding-left: 0;
    padding-right: 0;
}

/* --- 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;
}