/* =========================================================
   Gestaltungswerte und Bruecke zu Bootstrap
   Akzent: #3399cc · Bootstrap 5.3 als Grundlage
   ========================================================= */

/* ---------- 1. Farb- und Maßwerte ---------- */
:root {
    --hs-accent: #3399cc;
    --hs-accent-hover: #2a86b5;
    --hs-accent-text: #1a6d94; /* kontraststark für Text auf hellem Grund */
    --hs-signal: #96550f; /* Hinweise, Amtliches */
    --hs-signal-surface: #fbf1e4;
    /* Kennfarbe des RSS-Zeichens. Als Schrift reicht sie auf hellem Grund
     nicht (3,2:1), deshalb die abgedunkelte Nuance im selben Farbton für
     Text und Kontur (5,7:1). */
    --hs-rss: #f26522;
    --hs-rss-text: #b0450f;
    --hs-ink: #10222c;
    --hs-ink-soft: #45606d;
    /* Farbe der obersten Leiste und zugleich der Wert für
     <meta name="theme-color">; setScheme() in site.js liest ihn hier aus,
     damit Browserleiste und Seitenkopf nicht auseinanderlaufen. */
    --hs-theme-color: #10222c;
    --hs-paper: #eef3f6;
    --hs-surface: #ffffff;
    --hs-surface-2: #f7fafc;
    --hs-line: #d3dfe6;
    --hs-line-strong: #b3c5d0;
    /* Dieselben Farben noch einmal als Zahlentripel. Bootstrap baut daraus
     durchscheinende Töne (rgba(var(--bs-primary-rgb), .5) in .bg-*-subtle,
     .text-bg-*, Fokusringen). Aus einem Hex-Wert lässt sich das in CSS nicht
     gewinnen, deshalb stehen beide Schreibweisen nebeneinander – wer eine
     Farbe ändert, muss das Tripel mitziehen. */
    --hs-accent-rgb: 51, 153, 204;
    --hs-accent-hover-rgb: 42, 134, 181;
    --hs-accent-text-rgb: 26, 109, 148;
    --hs-btn-surface-rgb: 23, 98, 134;
    --hs-signal-rgb: 150, 85, 15;
    --hs-ink-rgb: 16, 34, 44;
    --hs-ink-soft-rgb: 69, 96, 109;
    --hs-surface-rgb: 255, 255, 255;
    --hs-surface-2-rgb: 247, 250, 252;
    --hs-paper-rgb: 238, 243, 246;
    --hs-shadow: 0 1px 2px rgba(16, 34, 44, .06), 0 12px 28px -18px rgba(16, 34, 44, .35);
    --hs-field-height: 2.875rem; /* gemeinsame Höhe von Eingabefeldern und Buttons */
    --hs-field-height-large: 3.25rem; /* freistehende Buttons, z. B. im Aufmacher */
    --hs-button-size: 2.875rem; /* Kantenlänge der Schalter in der Kopfzeile */
    /* Fläche des primären Buttons: dunkles Blau mit weißer Schrift (Kontrast 6,9:1).
     Der Akzentton #3399cc bleibt Kanten, Linien und Auszeichnungen vorbehalten.
     Diese drei Werte gehören zusammen und werden auch zusammen umgesetzt: Wo
     eine Schaltfläche auf dunklem Grund steht – .hs-hero, .hs-slider,
     .hs-footer –, setzt der Bereich alle drei neu, und .btn-primary folgt.
     Das -h steht für die Fläche beim Überfahren; die Schreibweise muss überall
     dieselbe sein, sonst greift die Umsetzung ins Leere. */
    --hs-btn-surface: #176286;
    --hs-btn-surface-h: #12506e;
    --hs-btn-text: #ffffff;
    --hs-radius: 4px;
    --hs-radius-large: 10px;
    /* Das Chevron ist ein Schriftzeichen und füllt sein Em-Quadrat fast
     ganz aus – anders als die frühere Strichzeichnung, die darin viel
     Luft hatte. .75rem entspricht optisch deren Größe. */
    --hs-chevron-size: .75rem;
    /* Abstand zwischen Beschriftung und Chevron in der obersten Ebene.
     Nicht unter die seitliche Polsterung von .hs-nav__link fallen lassen
     (.55rem, ab 1200px .8rem) – daraus wird die Polsterung des Schalters
     abgeleitet, damit beide Bauarten denselben Abstand zeigen. */
    --hs-nav-chevron-gap: .8rem;
    /* Spalte für das Chevron in den Aufklappmenüs: Abstand zum Text
     (.75rem am Verweis, .75rem am Schalter) und der Pfeil selbst. */
    --hs-chevron-column: calc(1.5rem + var(--hs-chevron-size));
    /* Breite der Lesespalte eines Beitrags: 68 Zeichen der Grundschrift in
     1.08rem, einmal ausgerechnet (68ch = 633px = 39.6rem). Als fester Wert,
     weil ch sich am Schriftgrad des Elements bemisst und damit an einer
     Rasterspalte anders herauskäme als am Text darin. So sind einspaltige
     Beiträge (Meldung) und solche mit Seitenspalte (Termin) gleich breit. */
    --hs-measure: 39.6rem;
    /* Höhe der klebenden Kopfzeile am Schirm plus etwas Luft: Leiste mit
     Wappen (rund 79px) und darunter die Menüzeile (rund 57px). Danach
     richtet sich, wo mitlaufende Spalten stehen bleiben. */
    --hs-sticky-top: 9rem;
    --hs-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --hs-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
    --hs-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    --hs-speed: .22s;
}

[data-bs-theme="dark"] {
    --hs-accent: #4fa9dc;
    --hs-accent-hover: #6cbbe8;
    --hs-accent-text: #7cc5ea;
    --hs-signal: #e0a15c;
    --hs-signal-deep: #e0a15c;
    --hs-signal-surface: #2b2318;
    /* Auf dunklem Grund trägt das reine Orange auch als Schrift (5,1:1). */
    --hs-rss-text: #f26522;
    /* Im dunklen Design umgekehrt: helle Fläche, dunkle Schrift (Kontrast 7:1) */
    --hs-btn-surface: #4fa9dc;
    --hs-btn-surface-h: #6cbbe8;
    --hs-btn-text: #08151c;
    --hs-ink: #e6eef3;
    --hs-ink-soft: #9fb4c0;
    --hs-theme-color: #081119;
    --hs-paper: #0c161c;
    --hs-surface: #13232d;
    --hs-surface-2: #172b36;
    --hs-line: #27414f;
    --hs-line-strong: #365263;
    --hs-accent-rgb: 79, 169, 220;
    --hs-accent-hover-rgb: 108, 187, 232;
    --hs-accent-text-rgb: 124, 197, 234;
    --hs-btn-surface-rgb: 79, 169, 220;
    --hs-signal-rgb: 224, 161, 92;
    --hs-ink-rgb: 230, 238, 243;
    --hs-ink-soft-rgb: 159, 180, 192;
    --hs-surface-rgb: 19, 35, 45;
    --hs-surface-2-rgb: 23, 43, 54;
    --hs-paper-rgb: 12, 22, 28;
    --hs-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -18px rgba(0, 0, 0, .8);
}

/* ---------- 1a. Brücke zu Bootstrap ----------

   Die Werte oben sind die eine Quelle der Gestaltung. Bootstrap kennt sie
   nicht: Es liest seine eigenen Variablen (--bs-…). Ohne diesen Abschnitt
   käme jede Bootstrap-Komponente in Bootstrap-Grau und -Blau heraus, und man
   müsste sie – wie in diesem Stylesheet lange geschehen – als eigene
   .hs-Klasse nachbauen. Hier werden Bootstraps Variablen stattdessen auf die
   Werte oben gelegt. Danach sieht eine .card, ein .alert oder eine
   .list-group ohne weiteres Zutun aus wie der Rest der Seite.

   Wer eine Farbe ändern will, ändert sie in Abschnitt 1 – nicht hier. Dieser
   Abschnitt ist reine Verdrahtung und sollte nur wachsen, wenn eine weitere
   Bootstrap-Komponente in Gebrauch kommt.

   Zum Selektor: Bootstrap setzt seine Werte in ":root, [data-bs-theme=light]"
   und noch einmal in "[data-bs-theme=dark]". Alle drei sind gleich
   spezifisch, deshalb entscheidet die Reihenfolge der Dateien – site.css wird
   nach bootstrap.css geladen und gewinnt. Die drei Selektoren stehen hier
   ausgeschrieben, damit das nicht von Bootstraps dunklem Block abhängt.
   Umschalten muss dieser Block nichts: Er verweist auf --hs-Werte, und die
   wechseln weiter oben mit dem Farbschema. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    /* Grundfarben */
    --bs-primary: var(--hs-accent);
    --bs-primary-rgb: var(--hs-accent-rgb);
    --bs-body-bg: var(--hs-surface);
    --bs-body-bg-rgb: var(--hs-surface-rgb);
    --bs-body-color: var(--hs-ink);
    --bs-body-color-rgb: var(--hs-ink-rgb);
    --bs-emphasis-color: var(--hs-ink);
    --bs-emphasis-color-rgb: var(--hs-ink-rgb);
    --bs-secondary-color: var(--hs-ink-soft);
    --bs-secondary-color-rgb: var(--hs-ink-soft-rgb);
    --bs-secondary-bg: var(--hs-paper);
    --bs-secondary-bg-rgb: var(--hs-paper-rgb);
    --bs-tertiary-color: rgba(var(--hs-ink-rgb), .5);
    --bs-tertiary-color-rgb: var(--hs-ink-rgb);
    --bs-tertiary-bg: var(--hs-surface-2);
    /* Die Utility .bg-body-tertiary liest ausschließlich das Tripel, nicht den
     Wert darüber – ohne diese Zeile käme dort Bootstrap-Grau heraus. */
    --bs-tertiary-bg-rgb: var(--hs-surface-2-rgb);
    /* Das Amtliche der Gestaltung trägt Bootstraps Warnfarbe: .alert-warning,
     .text-bg-warning und .border-warning entsprechen damit dem, was hier
     .card-notice und .hs-badge zeigen. */
    --bs-warning: var(--hs-signal);
    --bs-warning-rgb: var(--hs-signal-rgb);

    /* Verweise */
    --bs-link-color: var(--hs-accent-text);
    --bs-link-color-rgb: var(--hs-accent-text-rgb);
    --bs-link-hover-color: var(--hs-accent-hover);
    --bs-link-hover-color-rgb: var(--hs-accent-hover-rgb);

    /* Linien, Rundungen, Schatten */
    --bs-border-color: var(--hs-line);
    --bs-border-color-translucent: var(--hs-line);
    --bs-border-radius: var(--hs-radius);
    --bs-border-radius-sm: 2px;
    --bs-border-radius-lg: var(--hs-radius-large);
    --bs-border-radius-xl: var(--hs-radius-large);
    --bs-box-shadow: var(--hs-shadow);
    --bs-box-shadow-lg: var(--hs-shadow);

    /* Fokus. Der sichtbare Rahmen der Seite ist ein outline (Abschnitt 2);
     dieser Ring hier ist der Schatten, den Bootstrap zusätzlich an
     Eingabefeldern und Schaltern zeichnet. */
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: .25;
    --bs-focus-ring-color: rgba(var(--hs-accent-rgb), .25);

    /* Schrift. Der Fließtext wird in Abschnitt 2 am body gesetzt; hier stehen
     dieselben Werte für alles, was Bootstrap selbst bemisst (Eingabefelder,
     Schalter, Offcanvas-Titel). */
    --bs-body-font-family: var(--hs-text);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.6;
    --bs-font-monospace: var(--hs-mono);

    /* Auszeichnungen */
    --bs-highlight-bg: var(--hs-signal-surface);
    --bs-highlight-color: var(--hs-ink);
    --bs-code-color: var(--hs-accent-text);

    /* Abgeschwächte Töne. Daraus baut Bootstrap .alert-*, .bg-*-subtle und
     .border-*-subtle. */
    --bs-primary-text-emphasis: var(--hs-accent-text);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--hs-accent) 12%, var(--hs-surface));
    --bs-primary-border-subtle: color-mix(in srgb, var(--hs-accent) 35%, var(--hs-surface));
    --bs-warning-text-emphasis: var(--hs-signal);
    --bs-warning-bg-subtle: var(--hs-signal-surface);
    --bs-warning-border-subtle: color-mix(in srgb, var(--hs-signal) 35%, var(--hs-surface));
}

/* Was die Variablen oben nicht erreichen.

   Bootstrap schreibt an einigen Stellen feste Farbwerte ins Regelwerk statt
   sie aus einer Variablen zu holen. Diese Stellen müssen einzeln nachgezogen
   werden, sonst blitzt dort Bootstrap-Blau (#0d6efd) durch. */

/* Die Schaltflächen stehen geschlossen in Abschnitt 4 – auch ihre
   Farbwerte, weil dort ohnehin alles zu ihnen zusammenläuft. */

/* Der ausgewählte Eintrag einer Liste. */
.list-group {
    --bs-list-group-active-color: var(--hs-btn-text);
    --bs-list-group-active-bg: var(--hs-btn-surface);
    --bs-list-group-active-border-color: var(--hs-btn-surface);
}

/* Diese drei kennen überhaupt keine Variable – Rahmenfarbe und Ring stehen
   dort unmittelbar als rgba(13, 110, 253, …) im Regelwerk. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--hs-accent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-check-input:checked {
    background-color: var(--hs-accent);
    border-color: var(--hs-accent);
}

.btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

/* ---------- 2. Grundlagen ---------- */
body {
    background-color: var(--hs-surface);
    color: var(--hs-ink);
    font-family: var(--hs-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .hs-display {
    font-family: var(--hs-display);
    overflow-wrap: break-word;
    hyphens: auto;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.14;
    text-wrap: balance;
}

/* Verborgen heißt verborgen: Das Attribut wirkt über eine Regel des Browsers
   und wäre damit schwächer als jede Klasse, die display setzt. Ohne diese
   Zeile stünde ein Element mit hidden trotzdem da, sobald es auch eine
   Klasse mit display trägt. */
[hidden] {
    display: none !important;
}

/* Grundsicherung für alle Bilder: Kein Bild wird breiter als sein Kasten,
   das Seitenverhältnis bleibt erhalten. Wichtig für alles, was aus dem
   Redaktionssystem kommt – dort stehen feste Maße im Quelltext, und ohne
   diese Zeilen schiebt ein großes Bild das ganze Seitenraster auseinander.
   Die Bilder der Vorlage selbst sind über Klassen gesetzt und damit
   spezifischer; für sie ändert sich nichts. */
img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--hs-accent-text);
    text-underline-offset: .18em;
}

    a:hover {
        color: var(--hs-accent-hover);
    }

:focus-visible {
    outline: 3px solid var(--hs-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

::selection {
    background: var(--hs-accent);
    color: #fff;
}

/* ---------- 4. Schaltflächen ---------- */
/* Schaltflächen sind Bootstraps .btn. Hier steht nur, worin diese Gestaltung
   von Bootstraps Grundmaßen abweicht – fast alles davon über dessen eigene
   Variablen, damit Bootstraps Regeln unangetastet greifen und niemand raten
   muss, welche Klasse am Ende gewinnt.

   Ausgeschrieben stehen nur die Dinge, für die Bootstrap keine Variable
   vorsieht: die Flex-Zeile (Zeichen und Beschriftung auf einer Mittellinie),
   die Mindesthöhe (dasselbe Maß wie Eingabefelder) und der Übergang. */
.btn {
    --bs-btn-padding-x: 1.35rem;
    --bs-btn-padding-y: .4rem;
    --bs-btn-font-family: var(--hs-text);
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 600;
    --bs-btn-line-height: 1.2;
    --bs-btn-border-width: 1.5px;
    --bs-btn-disabled-opacity: .6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: var(--hs-field-height);
    transition: background-color var(--hs-speed), border-color var(--hs-speed), transform var(--hs-speed), color var(--hs-speed);
}

    .btn:active {
        transform: translateY(1px);
    }

    /* Bootstrap nimmt bei Tastaturfokus den Rahmen weg (outline: 0) und
       zeichnet stattdessen einen Schatten. Diese Gestaltung hat einen
       einheitlichen Fokusrahmen für alles Anwählbare (Abschnitt 2); der gilt
       auch für Schaltflächen. */
    .btn:focus-visible {
        outline: 3px solid var(--hs-accent);
        outline-offset: 3px;
        box-shadow: none;
    }

        /* Bootstrap färbt bei Tastaturfokus zusätzlich wie beim Überfahren.
           Das tut diese Gestaltung nicht – es sei denn, die Maus steht
           tatsächlich darauf. */
        .btn:focus-visible:not(:hover) {
            color: var(--bs-btn-color);
            background-color: var(--bs-btn-bg);
            border-color: var(--bs-btn-border-color);
        }

    /* Gesperrt heißt hier: es wird gerade geladen – site.js sperrt die
       Schaltfläche „mehr laden" für die Dauer der Anfrage. Bootstrap setzt
       dabei pointer-events: none, dann bliebe der Mauszeiger der übliche und
       der Hinweis ginge verloren. */
    .btn:disabled {
        pointer-events: auto;
        cursor: progress;
    }

/* Die Hauptschaltfläche. Sämtliche --bs-btn-* stehen in .btn-primary als
   feste Zahlenwerte, deshalb muss jeder einzeln umgelegt werden.

   .hs-hero, .hs-slider und .hs-footer setzen --hs-btn-surface für ihren
   dunklen Grund an Ort und Stelle neu; die Schaltfläche folgt dem von
   selbst, weil hier nur darauf verwiesen wird. */
.btn-primary {
    --bs-btn-color: var(--hs-btn-text);
    --bs-btn-bg: var(--hs-btn-surface);
    --bs-btn-border-color: var(--hs-btn-surface);
    --bs-btn-hover-color: var(--hs-btn-text);
    --bs-btn-hover-bg: var(--hs-btn-surface-h);
    --bs-btn-hover-border-color: var(--hs-btn-surface-h);
    --bs-btn-active-color: var(--hs-btn-text);
    --bs-btn-active-bg: var(--hs-btn-surface-h);
    --bs-btn-active-border-color: var(--hs-btn-surface-h);
    --bs-btn-disabled-color: var(--hs-btn-text);
    --bs-btn-disabled-bg: var(--hs-btn-surface);
    --bs-btn-disabled-border-color: var(--hs-btn-surface);
    --bs-btn-focus-shadow-rgb: var(--hs-accent-rgb);
}

/* Der Zweitbutton: nur Kontur, beim Überfahren nimmt er den Akzent an. */
.btn-outline-secondary {
    --bs-btn-color: var(--hs-ink);
    --bs-btn-border-color: var(--hs-line-strong);
    --bs-btn-hover-color: var(--hs-accent-text);
    --bs-btn-hover-bg: var(--hs-surface);
    --bs-btn-hover-border-color: var(--hs-accent);
    --bs-btn-active-color: var(--hs-accent-text);
    --bs-btn-active-bg: var(--hs-surface);
    --bs-btn-active-border-color: var(--hs-accent);
    --bs-btn-disabled-color: var(--hs-ink);
    --bs-btn-disabled-border-color: var(--hs-line-strong);
    --bs-btn-focus-shadow-rgb: var(--hs-accent-rgb);
}

/* Auf dunklem Grund – Aufmacher, Slider, Fußbereich – dreht sich der
   Zweitbutton um: weiße Schrift, weiße Kontur. */
.hs-hero .btn-outline-secondary,
.hs-slider .btn-outline-secondary,
.hs-footer .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .55);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .14);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(255, 255, 255, .14);
    --bs-btn-active-border-color: #fff;
}

/* Die Kontur in der Akzentfarbe. Im Vorlagensatz noch nirgends gesetzt, aber
   Teil des Baukastens: Wer .btn-outline-primary schreibt, soll nicht in
   Bootstrap-Blau landen. */
.btn-outline-primary {
    --bs-btn-color: var(--hs-accent-text);
    --bs-btn-border-color: var(--hs-accent);
    --bs-btn-hover-color: var(--hs-btn-text);
    --bs-btn-hover-bg: var(--hs-accent);
    --bs-btn-hover-border-color: var(--hs-accent);
    --bs-btn-active-color: var(--hs-btn-text);
    --bs-btn-active-bg: var(--hs-accent);
    --bs-btn-active-border-color: var(--hs-accent);
    --bs-btn-disabled-color: var(--hs-ink-soft);
    --bs-btn-disabled-border-color: var(--hs-line);
    --bs-btn-focus-shadow-rgb: var(--hs-accent-rgb);
}

/* Nebenschaltfläche im Kopf der Neuigkeiten, ausgezeichnet im RSS-Orange.
   Eine eigene Spielart, aber in Bootstraps Bauweise: nur Variablen, keine
   neuen Regeln – bis auf die Farbe des Zeichens, für die es keine gibt. */
.btn-rss {
    --bs-btn-padding-x: 1rem;
    --bs-btn-color: var(--hs-ink);
    --bs-btn-bg: var(--hs-surface);
    --bs-btn-border-color: var(--hs-line);
    --bs-btn-hover-color: var(--hs-rss-text);
    --bs-btn-hover-bg: var(--hs-surface);
    --bs-btn-hover-border-color: var(--hs-rss);
    --bs-btn-active-color: var(--hs-rss-text);
    --bs-btn-active-bg: var(--hs-surface);
    --bs-btn-active-border-color: var(--hs-rss);
    --bs-btn-disabled-color: var(--hs-ink);
    --bs-btn-disabled-bg: var(--hs-surface);
    --bs-btn-disabled-border-color: var(--hs-line);
    --bs-btn-focus-shadow-rgb: var(--hs-accent-rgb);
}

    .btn-rss .hs-ico {
        color: var(--hs-rss);
    }

/* Die breite Schaltfläche unter der Meldungsliste. Bootstraps .btn-lg passt
   hier nicht: Es zieht Polsterung und Schriftgrad mit hoch, gewollt ist nur
   die größere Fläche. */
.btn-wide {
    min-width: 16rem;
    min-height: var(--hs-field-height-large);
}

.btn-sm {
    --bs-btn-padding-x: .85rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-font-size: .875rem;
    min-height: 2.25rem;
}


/* ---------- 4a. Passwortfelder ---------- */
.hs-pwtoggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--hs-ink-soft);
    cursor: pointer;
    transition: color var(--hs-speed);
}

    .hs-pwtoggle:hover {
        color: var(--hs-accent-text);
    }

    .hs-pwtoggle > .bi {
        font-size: 1.1rem;
        line-height: 1;
    }

.input-group:has(> .hs-pwtoggle) > .form-control {
    padding-right: 2.7rem;
    border-radius: var(--bs-border-radius);
}

    .input-group:has(> .hs-pwtoggle) > .form-control.is-invalid {
        padding-right: calc(1.5em + .75rem + 2.7rem);
        background-position: right calc(.375em + .1875rem + 2.7rem) center;
    }

/* ---------- 5. Wartezeichen ---------- */
.hs-spin::before {
    display: inline-block;
    animation: hs-spin 1.6s linear infinite;
}

@keyframes hs-spin {
    to {
        transform: rotate(360deg);
    }
}

.hs-loader {
    --hs-loader-size: 3.5rem;
    --hs-loader-ring: 2px;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: var(--hs-loader-size);
    height: var(--hs-loader-size);
    vertical-align: middle;
}

    .hs-loader--large {
        --hs-loader-size: 5.5rem;
        --hs-loader-ring: 3px;
    }

    .hs-loader::before,
    .hs-loader::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
    }

    .hs-loader::before {
        border: var(--hs-loader-ring) solid rgba(var(--hs-accent-rgb), .2);
    }

    .hs-loader::after {
        background: conic-gradient(rgba(var(--hs-accent-rgb), 0) 0deg, rgba(var(--hs-accent-rgb), 0) 90deg, var(--hs-accent) 340deg, var(--hs-accent) 360deg);
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--hs-loader-ring)), #000 calc(100% - var(--hs-loader-ring)));
        mask: radial-gradient(farthest-side, transparent calc(100% - var(--hs-loader-ring)), #000 calc(100% - var(--hs-loader-ring)));
        animation: hs-loader-ring 1.1s linear infinite;
    }

    .hs-loader__mark {
        width: 56%;
        height: 56%;
        background: var(--hs-logo, none) center / contain no-repeat;
        animation: hs-loader-mark 2.2s ease-in-out infinite;
    }

@keyframes hs-loader-ring {
    to {
        transform: rotate(360deg);
    }
}

@keyframes hs-loader-mark {
    0%, 100% {
        transform: scale(.92);
        opacity: .7;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-spin::before {
        animation: none;
    }

    .hs-loader::after {
        background: var(--hs-accent);
        animation: none;
    }

    .hs-loader__mark {
        animation: none;
        opacity: 1;
        transform: none;
    }
}


/* ---------- 6. Schalter im Kopfbereich ---------- */
/* Alle Schalter der Kopfzeile haben dasselbe Quadratmaß.
   Die Beschriftung liegt versteckt im Schalter (Screenreader) und
   zusätzlich im title-Attribut (Kurzinfo), damit die Breite konstant
   bleibt – der Umschalter wechselt seinen Text beim Klicken. */
.hs-iconbtn, .hs-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--hs-button-size);
    block-size: var(--hs-button-size);
    padding: 0;
    background: transparent;
    border: 1.5px solid var(--hs-line);
    border-radius: var(--hs-radius);
    color: var(--hs-ink);
    cursor: pointer;
    transition: border-color var(--hs-speed), color var(--hs-speed), background-color var(--hs-speed);
}

    .hs-iconbtn .hs-ico, .hs-burger .hs-ico {
        width: 1.35rem;
        height: 1.35rem;
    }

    /* nicht 1.35rem wie beim SVG daneben: das Schriftzeichen füllt seine
       Box fast ganz aus, die frühere Strichzeichnung nur zu gut vier
       Fünfteln. 1.2rem ergibt dieselbe sichtbare Größe. */
    .hs-iconbtn .hs-ico.bi, .hs-burger .hs-ico.bi {
        width: auto;
        height: auto;
        font-size: 1.2rem;
    }

    .hs-iconbtn:hover, .hs-burger:hover {
        border-color: var(--hs-accent);
        color: var(--hs-accent-text);
        background: var(--hs-surface-2);
    }

    .hs-iconbtn[aria-expanded="true"], .hs-burger[aria-expanded="true"] {
        border-color: var(--hs-accent);
    }

.hs-ico--moon {
    display: none;
}

[data-bs-theme="dark"] .hs-ico--sun {
    display: none;
}

[data-bs-theme="dark"] .hs-ico--moon {
    display: inline-block;
}