/**
 * Gemeinde Bürgerservice – Styling
 * Nutzt ausschließlich die vom Theme/Elementor-Kit gesetzten Variablen.
 * Keine hartkodierten Farben oder Radien.
 *
 * Verwendete Variablen (mit Fallbacks, falls das Theme sie nicht liefert):
 *   --townhall_color_primary (einzige Farbquelle — --townhall_color_secondary
 *     wird bewusst NICHT gelesen, siehe --_th-emphasis weiter unten)
 *   --townhall_radius_container / _button / _dropdown / _link
 *   --townhall_border_width
 *   Elementor-Globals: --e-global-color-sk_color_* / --e-global-typography-sk_type_*
 *
 * Spezifität: Jede Regel ist unter `body .th-buergerservice-app` skopiert.
 * Elementor/Theme-Kits setzen globale Heading-/Absatz-/Abstands-Defaults
 * (z. B. Kit-weite Typography auf h1–h4, Margins auf p/ul) oft mit einer
 * Spezifität, die einfache Klassenselektoren schlägt. Der `body`-Präfix
 * plus der Wrapper `.th-buergerservice-app` (siehe wrap() im Shortcode)
 * heben unsere Regeln darüber – gleiches Prinzip wie
 * `body .th-wetter-popup .th-wetter-close:hover` in wetter.css.
 */

/* -----------------------------------------------------------------------
 * 0. Lokale Ableitungen (nur aus Theme-Variablen berechnet)
 *    color-mix erzeugt ruhige Flächen/Ränder aus der Primärfarbe – keine
 *    neuen Farbwerte, alles leitet sich vom Kunden-Theme ab.
 * --------------------------------------------------------------------- */
body .th-buergerservice-app.th-buergerservice-app {
    --_th-primary: var(--townhall_color_primary, #1a5fb4);
    --_th-text: var(--e-global-color-sk_color_text, #2b2b2b);
    --_th-headline: var(--e-global-color-sk_color_headline, #12263a);
    /* Neutrale, aus der Primärfarbe abgeleitete Töne.
       Bewusst NICHT --townhall_color_secondary verwendet: der Token wird von
       Gemeinden uneinheitlich gepflegt (auf realen Test-Sites teils ein
       blasses Grau statt eines dunkleren Akzenttons) und ist deshalb für
       Text nicht verlässlich lesbar. --_th-emphasis leitet stattdessen
       garantiert lesbar aus der Primärfarbe ab (Hover/Fokus-Zustände). */
    --_th-emphasis: color-mix(in srgb, var(--_th-primary) 78%, black);
    --_th-surface: color-mix(in srgb, var(--_th-primary) 4%, #fff);
    --_th-surface-hover: color-mix(in srgb, var(--_th-primary) 8%, #fff);
    --_th-border: color-mix(in srgb, var(--_th-primary) 18%, #fff);
    --_th-border-strong: color-mix(in srgb, var(--_th-primary) 40%, #fff);
    --_th-muted: color-mix(in srgb, var(--_th-text) 65%, #fff);
    --_th-bw: var(--townhall_border_width, 1px);
}

/* .th-buergerservice-app selbst trägt bewusst kein Max-Width/Padding — nur
   Spezifitäts-/Scoping-Anker (siehe Datei-Kopfkommentar). Die Lesespalte
   sitzt auf .th-buergerservice-content (siehe content_wrap() im Shortcode):
   auf Lebenslage-/Detailseiten umschließt das den gesamten Inhalt, auf der
   Startseite alles außer dem Hero, der so auf volle Breite gehen kann. */
body .th-buergerservice-app .th-buergerservice-content {
    max-width: 860px;
    margin: 0 auto;
    padding: 7rem 1.5rem;
}

/* Detailseite braucht neben der Lesespalte noch Platz für die Sidebar
   (Online erledigen + Zuständige Stelle), siehe Abschnitt 6. */
body .th-buergerservice-app .th-buergerservice-content--detail {
    max-width: 1160px;
}

/* -----------------------------------------------------------------------
 * 1. Suchfeld + Autocomplete-Dropdown
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-suche {
    margin-bottom: 2.5rem;
}

body .th-buergerservice-app .th-buergerservice-field-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

body .th-buergerservice-app .th-buergerservice-icon {
    position: absolute;
    left: 1rem;
    display: inline-flex;
    color: var(--_th-muted);
    pointer-events: none;
}

body .th-buergerservice-app .th-buergerservice-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1rem 0.9rem 2.9rem;
    font: inherit;
    font-family: var(--e-global-typography-sk_type_text-font-family, inherit);
    font-size: 1.05rem;
    color: var(--_th-text);
    background: #fff;
    /* !important: Theme-Defaults für input[type=search] setzen oft eine eigene
       Akzent-border-bottom (Underline-Stil), die sonst gegen unseren Rahmen gewinnt. */
    border: var(--_th-bw) solid var(--_th-border) !important;
    border-radius: var(--townhall_radius_button, 8px) !important;
    transition: border-color .15s ease;
}

body .th-buergerservice-app .th-buergerservice-input::placeholder { color: var(--_th-muted); }

/* Prominente „Hero“-Variante – am Shortcode mit classes="hero" aktivieren.
   Für die Startseite: großes, zentrales Suchfeld, das den Nutzer abholt. */
body .th-buergerservice-app .th-buergerservice-suche.hero { max-width: 720px; margin: 0 auto; }
body .th-buergerservice-app .th-buergerservice-suche.hero .th-buergerservice-input {
    padding: 1.2rem 1.3rem 1.2rem 3.5rem;
    font-size: 1.25rem;
}
body .th-buergerservice-app .th-buergerservice-suche.hero .th-buergerservice-icon { left: 1.25rem; }
body .th-buergerservice-app .th-buergerservice-suche.hero .th-buergerservice-icon svg { width: 20px; height: 20px; }

/* Hero-Bereich der Übersichtsseite: Eyebrow, Überschrift, Text + große Suche */
body .th-buergerservice-app .th-buergerservice-hero {
    text-align: center;
    padding: 7.5rem 1.75rem 3.75rem;
    background: color-mix(in srgb, var(--_th-primary) 6%, #fff);
    border-bottom: var(--_th-bw) solid color-mix(in srgb, var(--_th-primary) 14%, #fff);
    margin-bottom:0rem;
}
body .th-buergerservice-app .th-buergerservice-hero-eyebrow {
    font-size: .8rem !important;
    font-weight: 600 !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--_th-primary) !important;
    margin: 0 0 .875rem !important;
}
body .th-buergerservice-app .th-buergerservice-hero-titel {
    font-family: var(--e-global-typography-sk_type_primary-font-family, inherit);
    font-size: 2.125rem !important;
    line-height: 1.15 !important;
    color: var(--_th-headline) !important;
    margin: 0 0 .75rem !important;
    text-wrap: balance;
}
body .th-buergerservice-app .th-buergerservice-hero-text {
    margin: 0 auto 1.75rem !important;
    max-width: 52ch;
    font-size: 1.05rem !important;
    line-height: 1.55 !important;
    color: var(--_th-text) !important;
}

body .th-buergerservice-app .th-buergerservice-input:focus {
    outline: none;
    border-color: var(--_th-primary) !important;
    outline: 2px solid color-mix(in srgb, var(--_th-primary) 45%, #fff);
    outline-offset: 1px;
}

/* Dropdown-Container */
body .th-buergerservice-app .th-buergerservice-results-container {
    position: absolute;
    display:none;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: #fff;
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_dropdown, 10px);
    overflow: hidden;
}

/* Container nur zeigen, wenn er Inhalt hat (JS toggelt die inneren Boxen) */
body .th-buergerservice-app .th-buergerservice-results-container:not(:has(> :not([style*="display: none"]):not([aria-hidden="true"]))) {
    display: none;
}

body .th-buergerservice-app .th-buergerservice-results { max-height: 22rem; overflow-y: auto; flex-direction: column;}

body .th-buergerservice-app .th-buergerservice-results [role="option"],
body .th-buergerservice-app .th-buergerservice-results a,
body .th-buergerservice-app .th-buergerservice-results a:visited {
    display: block;
    padding: 0.7rem 1rem;
    text-align: left;
    color: var(--_th-text) !important;
    text-decoration: none;
    line-height: 1.4;
    border-bottom: var(--_th-bw) solid color-mix(in srgb, var(--_th-primary) 8%, #fff);
    cursor: pointer;
    transition: background-color .12s ease;
}
body .th-buergerservice-app .th-buergerservice-results [role="option"]:last-child,
body .th-buergerservice-app .th-buergerservice-results a:last-child { border-bottom: none; }

body .th-buergerservice-app .th-buergerservice-results [role="option"]:hover,
body .th-buergerservice-app .th-buergerservice-results [role="option"][aria-selected="true"],
body .th-buergerservice-app .th-buergerservice-results a:hover,
body .th-buergerservice-app .th-buergerservice-results a:visited:hover {
    background: var(--_th-surface-hover);
    color: var(--_th-emphasis) !important;
}

body .th-buergerservice-app .th-buergerservice-results mark {
    background: color-mix(in srgb, var(--_th-primary) 20%, #fff);
    color: inherit;
    border-radius: var(--townhall_radius_link, 4px);
    padding: 0 .1em;
}

body .th-buergerservice-app .th-buergerservice-loading,
body .th-buergerservice-app .th-buergerservice-empty,
body .th-buergerservice-app .th-buergerservice-error {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0.85rem 1rem;
    color: var(--_th-muted);
    font-size: .95rem;
}

body .th-buergerservice-app .th-buergerservice-spinner {
    width: 16px; height: 16px;
    border: 2px solid color-mix(in srgb, var(--_th-primary) 25%, #fff);
    border-top-color: var(--_th-primary);
    border-radius: 50%;
    animation: th-buergerservice-spin .7s linear infinite;
}
@keyframes th-buergerservice-spin { to { transform: rotate(360deg); } }

/* Featured Leistungen – redaktionell ausgewählte Leistungen unter der Hero
   (bzw. unter dem Suchfeld, falls hero deaktiviert). Eigener Kartenstil mit
   Akzentfarbe, bewusst abgesetzt von den neutralen Lebenslagen-Kacheln unten. */
body .th-buergerservice-app .th-buergerservice-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
    margin-bottom: 5.75rem;
}

body .th-buergerservice-app .th-buergerservice-featured-karte {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.1rem 1.25rem;
    text-decoration: none;
    background: color-mix(in srgb, var(--_th-primary) 5%, #fff);
    border: var(--_th-bw) solid color-mix(in srgb, var(--_th-primary) 22%, #fff);
    border-radius: var(--townhall_radius_container, 12px);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

body .th-buergerservice-app .th-buergerservice-featured-karte:hover {
    background: color-mix(in srgb, var(--_th-primary) 10%, #fff);
    border-color: var(--_th-primary);
    transform: translateY(-2px);
}

body .th-buergerservice-app .th-buergerservice-featured-karte-titel {
    color: var(--_th-headline);
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

body .th-buergerservice-app .th-buergerservice-featured-karte-teaser {
    color: var(--_th-text);
    font-size: .875rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* PVOG liefert den teaser als HTML (meist ein einzelnes <p>) — Standard-Absatzabstand
   entfernen, da die Karte den Text selbst über line-clamp begrenzt. */
body .th-buergerservice-app .th-buergerservice-featured-karte-teaser p {
    margin: 0;
    display: inline;
}

/* -----------------------------------------------------------------------
 * 2. Übersicht – Lead-in, Gruppen + Lebenslagen-Kacheln
 * --------------------------------------------------------------------- */

/* Dezente Überschrift vor der ersten Kachel-Gruppe (nur einmal ausgegeben) */
body .th-buergerservice-app .th-buergerservice-lead-in {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin-bottom: 1.375rem;
}
body .th-buergerservice-app .th-buergerservice-lead-in span:first-child {
    font-size: .95rem;
    font-weight: 600;
    color: var(--_th-headline);
    white-space: nowrap;
}
body .th-buergerservice-app .th-buergerservice-lead-in span:last-child {
    flex: 1;
    height: var(--_th-bw);
    background: var(--_th-border);
}

body .th-buergerservice-app .th-buergerservice-gruppe { margin-bottom: 2.75rem; }

body .th-buergerservice-app .th-buergerservice-gruppe-titel {
    font-family: var(--e-global-typography-sk_type_secondary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: var(--_th-bw) solid var(--_th-border);
}

body .th-buergerservice-app .th-buergerservice-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .75rem;
}

body .th-buergerservice-app .th-buergerservice-kachel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 1.1rem;
    text-decoration: none;
    background: #fff;
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_container, 12px);
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

body .th-buergerservice-app .th-buergerservice-kachel:hover {
    background: var(--_th-surface);
    border-color: var(--_th-border-strong);
    transform: translateY(-2px);
}

body .th-buergerservice-app .th-buergerservice-kachel-titel {
    color: var(--_th-headline);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

body .th-buergerservice-app .th-buergerservice-kachel-count {
    flex: none;
    min-width: 1.75rem;
    padding: .15rem .5rem;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    color: var(--_th-primary);
    background: color-mix(in srgb, var(--_th-primary) 10%, #fff);
    border-radius: var(--townhall_radius_container, 6px);
}

/* Unterkategorien (feineres Raster) */
body .th-buergerservice-app .th-buergerservice-kacheln--sub {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    margin-bottom: 2rem;
}

/* -----------------------------------------------------------------------
 * 3. Breadcrumb
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1.5rem;
    font-size: .9rem;
    color: var(--_th-muted);
    line-height: 1.6;
}
body .th-buergerservice-app .th-buergerservice-breadcrumb a,
body .th-buergerservice-app .th-buergerservice-breadcrumb a:visited {
    color: var(--_th-primary) !important;
    text-decoration: none;
    border-radius: var(--townhall_radius_link, 4px);
    padding: .1rem .15rem;
}
body .th-buergerservice-app .th-buergerservice-breadcrumb a:hover { text-decoration: underline; }
body .th-buergerservice-app .th-buergerservice-breadcrumb span { color: var(--_th-text); font-weight: 600; }

/* -----------------------------------------------------------------------
 * 4. Lebenslage – Titel, Intro, Leistungsliste
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-titel {
    font-family: var(--e-global-typography-sk_type_primary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-bottom: .75rem;
}

body .th-buergerservice-app .th-buergerservice-intro {
    color: var(--_th-text);
    line-height: 1.65;
    margin: 0 0 1.75rem;
    max-width: 62ch;
}

body .th-buergerservice-app .th-buergerservice-liste {
    list-style: none;
    margin-bottom: 2rem;
    padding: 0;
    border-top: var(--_th-bw) solid var(--_th-border);
}

body .th-buergerservice-app .th-buergerservice-liste-item {
    padding: 1.1rem .25rem;
    border-bottom: var(--_th-bw) solid var(--_th-border);
}

body .th-buergerservice-app .th-buergerservice-liste-item > a,
body .th-buergerservice-app .th-buergerservice-liste-item > a:visited {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    /* !important nur auf color: Theme-Defaults für a:visited fallen sonst auf ein
       blasses Grau zurück, sobald der Link im Browser-Verlauf als besucht gilt
       (bei internen Listen-/Detail-Links durch normales Klicken schnell der Fall). */
    color: var(--_th-primary) !important;
    text-decoration: none;
}
body .th-buergerservice-app .th-buergerservice-liste-item > a:hover,
body .th-buergerservice-app .th-buergerservice-liste-item > a:visited:hover {
    color: var(--_th-emphasis) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body .th-buergerservice-app .th-buergerservice-liste-teaser {
    margin-top: .4rem;
    color: var(--_th-muted);
    font-size: .98rem;
    line-height: 1.6;
    max-width: 68ch;
    text-wrap: pretty;
}

/* -----------------------------------------------------------------------
 * 5. Pagination
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    font-size: .95rem;
}
body .th-buergerservice-app .th-buergerservice-pagination a,
body .th-buergerservice-app .th-buergerservice-pagination a:visited {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .5rem .9rem;
    color: var(--_th-primary) !important;
    text-decoration: none;
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_button, 8px);
    transition: background-color .15s ease, border-color .15s ease;
}
body .th-buergerservice-app .th-buergerservice-pagination a:hover {
    background: var(--_th-surface);
    border-color: var(--_th-border-strong);
}
body .th-buergerservice-app .th-buergerservice-pagination-status { color: var(--_th-muted); }

/* -----------------------------------------------------------------------
 * 6. Detailansicht
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-detail-titel {
    font-family: var(--e-global-typography-sk_type_primary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 2rem;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

body .th-buergerservice-app .th-buergerservice-gueltigkeitsgebiet {
    color: var(--_th-muted);
    font-size: .92rem;
    margin: -1rem 0 1.5rem;
}

/* Hauptspalte + Sidebar (Online erledigen, Zuständige Stelle). Sidebar bleibt
   beim Scrollen sichtbar, damit CTA und Kontakt nicht erst erscrollt werden
   müssen. Kollabiert unter dem Breakpoint in Abschnitt 8 auf eine Spalte. */
body .th-buergerservice-app .th-buergerservice-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 2.5rem;
}

body .th-buergerservice-app .th-buergerservice-sidebar {
    position: sticky;
    /* 125px = Höhe des fixen Site-Headers (100px) + etwas Luft, sonst
       verschwindet der Sidebar-Rand beim Scrollen dahinter. */
    top: 125px;
    /* Eigenständig scrollen statt über den Footer hinauszuragen, falls die
       Sidebar selbst (z. B. mehrere Organisationen) länger als der Viewport wird. */
    max-height: calc(100vh - 125px - 1.5rem);
    overflow-y: auto;
}

body .th-buergerservice-app .th-buergerservice-modul {
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    border-top: var(--_th-bw) solid var(--_th-border);
}
body .th-buergerservice-app .th-buergerservice-modul:first-of-type { border-top: none; padding-top: 0; }

body .th-buergerservice-app .th-buergerservice-modul h3 {
    font-family: var(--e-global-typography-sk_type_secondary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 .6rem;
}
body .th-buergerservice-app .th-buergerservice-modul-text {
    color: var(--_th-text);
    line-height: 1.7;
    max-width: 68ch;
    text-wrap: pretty;
}
body .th-buergerservice-app .th-buergerservice-modul-text > *:first-child { margin-top: 0; }
body .th-buergerservice-app .th-buergerservice-modul-text > *:last-child { margin-bottom: 0; }
body .th-buergerservice-app .th-buergerservice-modul-text ul,
body .th-buergerservice-app .th-buergerservice-modul-text ol { padding-left: 1.4rem; }
body .th-buergerservice-app .th-buergerservice-modul-text li { margin: .3rem 0; }
body .th-buergerservice-app .th-buergerservice-modul-text a,
body .th-buergerservice-app .th-buergerservice-modul-text a:visited { color: var(--_th-primary) !important; }

body .th-buergerservice-app .th-buergerservice-modul-links {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
}
body .th-buergerservice-app .th-buergerservice-modul-links li { margin: .3rem 0; }
body .th-buergerservice-app .th-buergerservice-modul-links a,
body .th-buergerservice-app .th-buergerservice-modul-links a:visited {
    color: var(--_th-primary) !important;
    text-decoration: none;
}
body .th-buergerservice-app .th-buergerservice-modul-links a:hover { text-decoration: underline; }

/* Online-Dienst: klarer Call-to-Action, geht nicht mehr unter */
body .th-buergerservice-app .th-buergerservice-online-links {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--_th-surface);
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_container, 12px);
    /* 125px = fixer Site-Header (100px) + Luft, sonst liegt der Anchor-Sprung
       (Sprung-Link/Sidebar-Button → #th-online) unter dem Header. */
    scroll-margin-top: 125px;
}
body .th-buergerservice-app .th-buergerservice-online-links h3 {
    font-family: var(--e-global-typography-sk_type_secondary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
body .th-buergerservice-app .th-buergerservice-online-btn,
body .th-buergerservice-app .th-buergerservice-online-btn:visited {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    margin: 0 .6rem .6rem 0;
    font-weight: 600;
    font-size: 1.02rem;
    color: #fff !important;
    background: var(--_th-primary);
    border: var(--_th-bw) solid transparent;
    border-radius: var(--townhall_radius_button, 8px);
    text-decoration: none;
    transition: background-color .15s ease;
}
body .th-buergerservice-app .th-buergerservice-online-btn::after { content: "↗"; font-size: .95em; }
body .th-buergerservice-app .th-buergerservice-online-btn:hover {
    background: var(--_th-emphasis);
}
body .th-buergerservice-app .th-buergerservice-online-btn:focus-visible {
    outline: 2px solid var(--_th-emphasis);
    outline-offset: 2px;
}

/* Kleiner Sprung-Button oben: direkt zu „Online erledigen“ */
body .th-buergerservice-app .th-buergerservice-online-jump,
body .th-buergerservice-app .th-buergerservice-online-jump:visited {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 1.75rem;
    padding: .5rem .95rem;
    font-size: .92rem;
    font-weight: 600;
    color: var(--_th-primary) !important;
    background: color-mix(in srgb, var(--_th-primary) 8%, #fff);
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_button, 8px);
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
body .th-buergerservice-app .th-buergerservice-online-jump::after { content: "↓"; font-size: .95em; }
body .th-buergerservice-app .th-buergerservice-online-jump:hover {
    background: color-mix(in srgb, var(--_th-primary) 14%, #fff);
    border-color: var(--_th-border-strong);
}

/* In der Sidebar ist der Sprung-Button die einzige CTA (statt der vollen
   Online-Dienst-Liste) – deshalb prominenter: volle Breite, kräftige Farbe,
   gleicher Look wie .online-btn. */
body .th-buergerservice-app .th-buergerservice-sidebar .th-buergerservice-online-jump {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    padding: .85rem 1.5rem;
    font-size: 1.02rem;
    color: #fff !important;
    background: var(--_th-primary);
    border-color: transparent;
}
body .th-buergerservice-app .th-buergerservice-sidebar .th-buergerservice-online-jump:hover {
    background: var(--_th-emphasis);
}

/* In der Sidebar ersetzt die sticky Position den Abstand nach oben/unten,
   den organisationen im normalen Textfluss sonst braucht. */
body .th-buergerservice-app .th-buergerservice-sidebar .th-buergerservice-organisationen {
    margin: 0 0 1.5rem;
}
body .th-buergerservice-app .th-buergerservice-sidebar > :last-child {
    margin-bottom: 0;
}

/* Zuständige Stelle – Kontaktkarte */
body .th-buergerservice-app .th-buergerservice-organisationen { margin: 2rem 0; }
body .th-buergerservice-app .th-buergerservice-organisationen > h3 {
    font-family: var(--e-global-typography-sk_type_secondary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1rem;
}

body .th-buergerservice-app .th-buergerservice-organisation {
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    background: #fff;
    border: var(--_th-bw) solid var(--_th-border);
    border-left: 3px solid var(--_th-primary);
    border-radius: var(--townhall_radius_container, 12px);
}
body .th-buergerservice-app .th-buergerservice-organisation h4 {
    color: var(--_th-headline);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .75rem;
}
body .th-buergerservice-app .th-buergerservice-organisation p { margin: .25rem 0; line-height: 1.55; color: var(--_th-text); }
body .th-buergerservice-app .th-buergerservice-organisation a,
body .th-buergerservice-app .th-buergerservice-organisation a:visited { color: var(--_th-primary) !important; text-decoration: none; }
body .th-buergerservice-app .th-buergerservice-organisation a:hover { text-decoration: underline; }
body .th-buergerservice-app .th-buergerservice-organisation-adresse { color: var(--_th-text); }

body .th-buergerservice-app .th-buergerservice-oeffnungszeiten {
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: var(--_th-bw) solid var(--_th-border);
    font-size: .95rem;
    line-height: 1.6;
}
body .th-buergerservice-app .th-buergerservice-oeffnungszeiten strong { color: var(--_th-headline); }

/* Stichwörter – Tag-Liste */
body .th-buergerservice-app .th-buergerservice-stichwoerter { margin: 2rem 0; }
body .th-buergerservice-app .th-buergerservice-stichwoerter > h3 {
    font-family: var(--e-global-typography-sk_type_secondary-font-family, inherit);
    color: var(--_th-headline);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 1rem;
}
body .th-buergerservice-app .th-buergerservice-stichwoerter-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
body .th-buergerservice-app .th-buergerservice-stichwort {
    padding: .4rem .9rem;
    font-size: .9rem;
    color: var(--_th-text);
    background: var(--_th-surface);
    border: var(--_th-bw) solid var(--_th-border);
    border-radius: var(--townhall_radius_button, 8px);
}

/* -----------------------------------------------------------------------
 * 7. Status-/Fehlermeldungen
 * --------------------------------------------------------------------- */
body .th-buergerservice-app .th-buergerservice-error-msg,
body .th-buergerservice-app .th-buergerservice-empty-msg {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    color: var(--e-global-color-sk_color_text, #2b2b2b);
    background: color-mix(in srgb, var(--townhall_color_primary, #1a5fb4) 5%, #fff);
    border: var(--townhall_border_width, 1px) solid color-mix(in srgb, var(--townhall_color_primary, #1a5fb4) 18%, #fff);
    border-radius: var(--townhall_radius_container, 12px);
}

/* -----------------------------------------------------------------------
 * 8. Responsiv
 * --------------------------------------------------------------------- */

/* Ab hier ist neben der Lesespalte genug Platz für die 300px-Sidebar –
   der Sprung-Link oben ist dann überflüssig, die sticky Sidebar übernimmt. */
@media (min-width: 861px) {
    body .th-buergerservice-app .th-buergerservice-online-jump { display: none; }
}

/* Unter dem Breakpoint: Sidebar steht nicht mehr sticky daneben, sondern
   normal im Fluss unter dem Inhalt – der Sprung-Link oben bleibt die
   Abkürzung, der Sidebar-Button wäre dort redundant (Ziel liegt im Fluss
   schon darüber) und wird ausgeblendet. */
@media (max-width: 860px) {
    body .th-buergerservice-app .th-buergerservice-detail-layout {
        display: block;
    }
    body .th-buergerservice-app .th-buergerservice-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        margin-top: 2rem;
    }
    body .th-buergerservice-app .th-buergerservice-sidebar .th-buergerservice-online-jump {
        display: none;
    }
}

@media (max-width: 640px) {
    body .th-buergerservice-app .th-buergerservice-kacheln,
    body .th-buergerservice-app .th-buergerservice-kacheln--sub { grid-template-columns: 1fr; }
    body .th-buergerservice-app .th-buergerservice-detail-titel { font-size: 1.6rem; }
    body .th-buergerservice-app .th-buergerservice-titel { font-size: 1.5rem; }
    body .th-buergerservice-app .th-buergerservice-pagination { flex-wrap: wrap; }
}