/**
 * ===========================================================================
 * Hilfe-Center  (/hilfe, /hilfe/<thema>)
 * ===========================================================================
 * Zwei Seiten, ein Stylesheet: Uebersicht und Themenseite benutzen dieselben
 * Bausteine (fragments/hilfe-bausteine.html). Eine zweite Datei waere die
 * Stelle, an der beide auseinanderlaufen.
 *
 * GRUNDSAETZE
 *   - Farben kommen aus variables.css und dem Landes-Theme. Kein fester
 *     Farbwert fuer etwas, das das Theme setzen darf.
 *   - Dunkler Text auf hellem Grund, auch im Kopf. Weiss auf Themenfarbe
 *     waere bei jedem Land eine eigene Kontrastfrage -- und das Theme kann
 *     jede Farbe tragen.
 *   - Beruehrbare Ziele mindestens 44 px hoch (WCAG 2.5.5).
 *   - Jede Bewegung haelt bei prefers-reduced-motion an.
 *   - hidden wird NIE ueberschrieben: Server und hilfe.js filtern darueber.
 *     Eine Regel wie .hilfe-artikel { display: block } wuerde ausgeblendete
 *     Artikel wieder sichtbar machen (display gewinnt gegen das Attribut).
 */

/* ==========================================================================
   Rahmen
   ========================================================================== */

.hilfe-seite {
    /* FEST WEISS, nicht var(--bg-primary): variables.css dreht --bg-primary
       unter @media (prefers-color-scheme: dark) auf --color-gray-900 #0f172a --
       ohne Riegel, also bei jedem Besucher mit Dunkelmodus im System. Die
       Ueberschriften der sechs Themen tragen aber color: --color-gray-900, und
       Schrift auf gleicher Farbe heisst Kontrast 1,0:1: Die Gliederung der
       Seite waere unsichtbar. Kacheln, Artikel, Kontakt und Leerzustand haben
       ohnehin ein festes Weiss; eine dunkle Seite darunter liesse sie schweben.
       Dieselbe Falle steckt in customer-discounts.css, customer-index.css und
       register-selection.css -- das gehoert projektweit geloest, nicht hier. */
    background: #ffffff;
    padding-bottom: var(--spacing-3xl, 4rem);

    /* ------------------------------------------------------------------
       DIE AKZENTFARBE — und warum sie nicht --color-primary ist
       ------------------------------------------------------------------
       --color-primary setzt der ThemeCssController je Land auf eine im Admin
       frei gewaehlte Farbe, und --color-primary-dark ist davon nur 85 %. Fuer
       SCHRIFT reicht das nicht: Am 07.11.2026 im Browser gemessen, mit dem
       voreingestellten Blau #4A90E2:

         weisse Schrift auf --color-primary ........ 3,29:1   (noetig 4,5:1)
         --color-primary-dark auf Weiss ............ 4,00:1   (noetig 4,5:1)

       Betroffen waren Suchknopf, Kontaktknopf, die Verweise in den Antworten
       und die Fusszeile der Kacheln. Eine festere Farbe waere die einfache
       Loesung, nimmt der Seite aber die Landesfarbe.

       45 % Themenfarbe auf Schwarz loest beides, und zwar fuer JEDE denkbare
       Themenfarbe — auch fuer helle, bei denen 70 % noch durchfallen
       (gemessen gegen Weiss):

         Farbe              70 %    60 %    45 %
         #4A90E2 Blau       6,00    7,52    >9
         #F39C12 Orange     4,28    5,49    8,30
         #4ECDC4 Tuerkis    3,81    4,98    7,66
         #FFD54F Gelb       2,89    3,83    6,13
         #FFEB3B Hellgelb   2,52    3,39    5,52

       Der Farbton bleibt erhalten, nur dunkler. Hier steht der Rueckfall fuer
       Browser ohne color-mix: ein dunkles Neutral, das den Kontrast ebenfalls
       haelt — NICHT --color-primary-dark, das ihn nachweislich verfehlt. Die
       Themenfarbe kommt direkt darunter in einem @supports-Block dazu. */
    --hilfe-akzent: var(--color-gray-800, #212529);
    --hilfe-akzent-tief: var(--color-gray-900, #0f172a);
}

/* Die Themenfarbe NUR, wo color-mix wirklich geht -- und die Abfrage ist
   noetig, nicht nur vorsichtig: Bei einer gewoehnlichen Eigenschaft faellt
   eine unbekannte Funktion schon beim Lesen weg und die Zeile davor gilt
   weiter. Bei einer Variablen nicht: Dort wird JEDE Zeichenfolge angenommen
   und erst beim Einsetzen als ungueltig erkannt -- die Farbe wuerde dann vom
   Elternelement geerbt, nicht vom Rueckfall oben. Auf einer aelteren
   Android-WebView verloeren die Verweis-Links so ihre Farbe. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .hilfe-seite {
        --hilfe-akzent: color-mix(in srgb, var(--color-primary, #4a90e2) 45%, #000000);
        --hilfe-akzent-tief: color-mix(in srgb, var(--color-primary, #4a90e2) 32%, #000000);
    }
}

/* ------------------------------------------------------------------
   PLATZ FUER DIE FESTE KOPFZEILE -- nur im Web
   ------------------------------------------------------------------
   public-header.css setzt .header auf position: fixed; die Leiste nimmt
   also KEINEN Platz im Fluss ein. Ohne dieses Polster sitzen Brotkrumen
   und der obere Teil der Ueberschrift dahinter -- auf genau der Seite,
   auf die der "Details"-Knopf aus Werbe-Slider und Rabatt-Tafel
   fuehrt. Dieselben Werte wie legal-page.css, damit Hilfe und
   Rechtsseiten gleich sitzen.

   In der App-WebView NICHT: Dort entsteht .header gar nicht, und die
   App-Leiste ist position: sticky (webview-overrides.css) -- sie nimmt
   ihren Platz selbst. Deshalb haengt das Polster an einer eigenen
   Klasse, die die Vorlage nur im Web setzt, und nicht an .hilfe-seite.

   Das Polster sitzt am KOPFBEREICH, nicht an der Seite: So reicht sein
   Farbverlauf bis unter die Leiste hinauf, statt einen weissen Streifen
   dazwischen zu lassen. Genauso macht es legal-page-title. */
.hilfe-seite--web .hilfe-hero {
    padding-top: calc(80px + var(--spacing-2xl, 3rem));
}

@media (max-width: 767.98px) {
    .hilfe-seite--web .hilfe-hero {
        padding-top: calc(64px + var(--spacing-xl, 2rem));
    }
}

.hilfe-breite {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--spacing-md, 1rem);
}

/* Sprung zum Inhalt: unsichtbar, bis die Tastatur ihn erreicht. */
.hilfe-sprung {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-fixed, 1030);
    padding: 0.75rem 1.25rem;
    background: var(--color-gray-900, #0f172a);
    color: #ffffff;
    border-radius: 0 0 var(--radius-md, 0.5rem) 0;
    text-decoration: none;
    font-weight: var(--font-weight-semibold, 600);
}

.hilfe-sprung:focus {
    left: 0;
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.hilfe-hero {
    /* Ein Hauch der Themenfarbe statt reinem Grau: Ein weisser Kopf auf weissem
       Grund laesst die Seite unfertig aussehen. Die Farbe kommt aus dem
       Landes-Theme, deshalb color-mix und nicht ein fester Wert -- und deshalb
       nur 12 %: Der Text bleibt dunkel auf hell, was bei JEDER Themenfarbe
       ueber 4,5:1 liegt. Weiss auf Themenfarbe waere je Land eine eigene
       Kontrastfrage.
       Die erste background-Angabe ist der Rueckfall fuer Browser ohne
       color-mix; sie wird von der zweiten ueberschrieben, wo es sie gibt. */
    background: linear-gradient(180deg, var(--color-gray-50, #f8f9fa) 0%, #ffffff 100%);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary, #4a90e2) 12%, #ffffff) 0%,
            color-mix(in srgb, var(--color-primary, #4a90e2) 4%, #ffffff) 48%,
            #ffffff 100%);
    border-bottom: 1px solid var(--color-gray-100, #e9ecef);
    padding: var(--spacing-xl, 2rem) 0 var(--spacing-2xl, 3rem);
    margin-bottom: var(--spacing-xl, 2rem);
}

.hilfe-brotkrumen {
    margin-bottom: var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.hilfe-brotkrumen ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hilfe-brotkrumen li + li::before {
    content: "/";
    margin-right: 0.5rem;
    color: var(--color-gray-400, #adb5bd);
}

/* 28 px hoch, nicht 44: Das Mindestmass aus WCAG 2.2 (2.5.8) sind 24 px, mit
   etwas Luft darueber, weil die Bildschirmdichte beim Runden knapp darunter
   landen kann (gemessen: 23,99 bei 24 px). Eine Brotkrume ist kein Hauptweg,
   44 px waeren hier unverhaeltnismaessig. Gemessen am 07.11.2026
   auf 390 px Breite war dieser Link mit 18,9 px das EINZIGE Ziel der Seite
   unter dem Mindestmass -- die uebrigen 87 lagen bei 44. */
.hilfe-brotkrumen a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--color-gray-600, #495057);
    text-decoration: none;
}

.hilfe-brotkrumen a:hover,
.hilfe-brotkrumen a:focus-visible {
    color: var(--hilfe-akzent);
    text-decoration: underline;
}

.hilfe-brotkrumen li[aria-current="page"] {
    color: var(--color-gray-800, #212529);
    font-weight: var(--font-weight-medium, 500);
}

.hilfe-hero__titel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 var(--spacing-sm, 0.5rem);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.15;
    color: var(--color-gray-900, #0f172a);
}

.hilfe-hero__symbol {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--hilfe-akzent);
    color: #ffffff;
}

.hilfe-hero__text {
    max-width: 46rem;
    margin: 0 0 var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-gray-600, #495057);
}

/* Der Rabattwert des Landes. Verschwindet vollstaendig, wenn keiner
   eingestellt ist -- die Flaeche ist dann einfach nicht da. */
.hilfe-hero__rabatt {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--spacing-md, 1rem);
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    border-radius: var(--radius-full, 9999px);
    background: #ffffff;
    border: 1px solid var(--color-gray-200, #dee2e6);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
    color: var(--color-gray-700, #343a40);
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: none;
    transition: box-shadow var(--transition-fast, 150ms ease-in-out),
                transform var(--transition-fast, 150ms ease-in-out);
}

.hilfe-hero__rabatt:hover,
.hilfe-hero__rabatt:focus-visible {
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.06));
    transform: translateY(-1px);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-hero__rabatt .fa-percent {
    color: var(--hilfe-akzent);
}

.hilfe-hero__rabatt-wert {
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-900, #0f172a);
}

/* ==========================================================================
   Suchfeld
   ========================================================================== */

.hilfe-suche {
    max-width: 38rem;
}

/* Das Beschriftungswort ist fuer Screenreader da; der Platzhalter traegt die
   Frage fuer die Augen. Sichtbar daruebergesetzt waere es eine Zeile, die
   nichts erklaert, was das Feld nicht selbst zeigt. */
.hilfe-suche__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hilfe-suche__zeile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    background: #ffffff;
    border: 1px solid var(--color-gray-300, #ced4da);
    border-radius: var(--radius-full, 9999px);
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(0, 0, 0, 0.06));
    transition: border-color var(--transition-fast, 150ms ease-in-out),
                box-shadow var(--transition-fast, 150ms ease-in-out);
}

.hilfe-suche__zeile:focus-within {
    border-color: var(--hilfe-akzent);
    /* Der Ring traegt die Landesfarbe, nicht ein festes Blau: Mit einem
       orangefarbenen Theme stuende sonst ein blauer Ring um das Suchfeld. */
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #4a90e2) 30%, transparent);
}

.hilfe-suche__symbol {
    flex: 0 0 auto;
    color: var(--color-gray-500, #6c757d);
}

.hilfe-suche__feld {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    border: 0;
    outline: none;
    background: transparent;
    font-size: var(--font-size-md, 1rem);
    color: var(--color-gray-900, #0f172a);
}

/* Das eigene Kreuzchen mancher Browser doppelt unseren Knopf. */
.hilfe-suche__feld::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.hilfe-suche__leeren {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-gray-500, #6c757d);
    cursor: pointer;
}

.hilfe-suche__leeren:hover,
.hilfe-suche__leeren:focus-visible {
    background: var(--color-gray-100, #e9ecef);
    color: var(--color-gray-800, #212529);
}

.hilfe-suche__knopf {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 0;
    border-radius: var(--radius-full, 9999px);
    background: var(--hilfe-akzent);
    color: #ffffff;
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    transition: background var(--transition-fast, 150ms ease-in-out);
}

.hilfe-suche__knopf:hover,
.hilfe-suche__knopf:focus-visible {
    background: var(--hilfe-akzent-tief);
}

/* ==========================================================================
   Raster: mitlaufende Themenspalte + Inhalt
   ========================================================================== */

.hilfe-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-xl, 2rem);
    align-items: start;
}

@media (min-width: 1024px) {
    .hilfe-raster {
        grid-template-columns: 250px minmax(0, 1fr);
        gap: var(--spacing-2xl, 3rem);
    }

    .hilfe-spalte {
        position: sticky;
        top: var(--spacing-lg, 1.5rem);
    }
}

/* ==========================================================================
   Themennavigation
   ========================================================================== */

.hilfe-themennav__titel {
    display: none;
    margin-bottom: 0.75rem;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500, #6c757d);
}

.hilfe-themennav__liste {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0 0 0.5rem;
    list-style: none;

    /* Auf dem Telefon eine waagerechte Leiste. scroll-snap laesst sie an den
       Eintraegen einrasten statt irgendwo zwischen zwei zu stehen. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;

    /* Die Bildlaufleiste des Systems verschwindet -- sie zeichnet unter den
       Themen einen grauen Balken quer durch die Seite. Dass es weitergeht,
       zeigt stattdessen die weiche Kante am rechten Rand (mask-image am
       Behaelter): Das ist die Stelle, an der ein Thema angeschnitten ist. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hilfe-themennav__liste::-webkit-scrollbar {
    display: none;
}

/* Die weiche Kante nur dort, wo auch gescrollt wird. Bei zwei Themen auf einem
   breiten Telefon waere ein Verlauf ueber dem letzten Eintrag irrefuehrend --
   deshalb haengt er am Behaelter und nicht an der Liste, und die Spalte
   darunter hebt ihn im Querformat wieder auf. */
@media (max-width: 1023.98px) {
    .hilfe-spalte {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent 100%);
    }
}

.hilfe-themennav__liste li {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.hilfe-themennav__liste a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-full, 9999px);
    border: 1px solid var(--color-gray-200, #dee2e6);
    background: #ffffff;
    color: var(--color-gray-700, #343a40);
    font-size: var(--font-size-sm, 0.875rem);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease-in-out),
                border-color var(--transition-fast, 150ms ease-in-out);
}

.hilfe-themennav__liste a:hover,
.hilfe-themennav__liste a:focus-visible {
    background: var(--color-gray-50, #f8f9fa);
    border-color: var(--color-gray-300, #ced4da);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-themennav__liste a .fas {
    color: var(--color-gray-500, #6c757d);
}

.hilfe-themennav__liste a.is-aktiv {
    background: var(--hilfe-akzent);
    border-color: var(--hilfe-akzent);
    color: #ffffff;
    font-weight: var(--font-weight-semibold, 600);
}

.hilfe-themennav__liste a.is-aktiv .fas {
    color: #ffffff;
}

@media (min-width: 1024px) {
    .hilfe-themennav__titel {
        display: block;
    }

    .hilfe-themennav__liste {
        display: block;
        overflow: visible;
        padding: 0;
    }

    .hilfe-themennav__liste li + li {
        margin-top: 0.3rem;
    }

    .hilfe-themennav__liste a {
        border: 0;
        border-radius: var(--radius-md, 0.5rem);
        white-space: normal;
    }
}

/* ==========================================================================
   Inhalt
   ========================================================================== */

.hilfe-inhalt {
    min-width: 0;
}

.hilfe-inhalt > * + * {
    margin-top: var(--spacing-2xl, 3rem);
}

/* ==========================================================================
   Suchergebnis-Kopf
   ========================================================================== */

.hilfe-suchinfo {
    padding: var(--spacing-lg, 1.5rem);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-100, #e9ecef);
}

.hilfe-suchinfo__titel {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-900, #0f172a);
}

/* Der Suchbegriff ist Fremdtext. Er wird mit th:text gesetzt und damit
   maskiert; hier steht nur, dass er sich nicht ueber die Zeile hinaus
   ausbreiten darf. */
.hilfe-suchinfo__begriff {
    max-width: 100%;
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-sm, 0.375rem);
    background: #ffffff;
    border: 1px solid var(--color-gray-200, #dee2e6);
    font-weight: var(--font-weight-medium, 500);
    overflow-wrap: anywhere;
}

.hilfe-suchinfo__anzahl {
    margin: 0 0 0.75rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-600, #495057);
}

.hilfe-suchinfo__alle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--hilfe-akzent);
    font-weight: var(--font-weight-semibold, 600);
}

/* ==========================================================================
   Häufig gesucht
   ========================================================================== */

.hilfe-haeufig__titel,
.hilfe-kacheln-block__titel {
    margin: 0 0 var(--spacing-md, 1rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500, #6c757d);
}

.hilfe-haeufig__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hilfe-haeufig__liste a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-200, #dee2e6);
    color: var(--color-gray-700, #343a40);
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease-in-out),
                border-color var(--transition-fast, 150ms ease-in-out);
}

.hilfe-haeufig__liste a:hover,
.hilfe-haeufig__liste a:focus-visible {
    background: #ffffff;
    border-color: var(--hilfe-akzent);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-haeufig__liste .fas {
    color: var(--hilfe-akzent);
}

/* ==========================================================================
   Themenkacheln
   ========================================================================== */

.hilfe-kacheln {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--spacing-md, 1rem);
}

/* Die GANZE Kachel ist der Link: Ein Ziel nur um die Ueberschrift trifft auf
   dem Telefon niemand. */
.hilfe-kachel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--spacing-lg, 1.5rem);
    border-radius: var(--radius-lg, 0.75rem);
    background: #ffffff;
    border: 1px solid var(--color-gray-200, #dee2e6);
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-fast, 150ms ease-in-out),
                box-shadow var(--transition-fast, 150ms ease-in-out),
                border-color var(--transition-fast, 150ms ease-in-out);
}

.hilfe-kachel:hover,
.hilfe-kachel:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08));
    border-color: var(--color-primary-light, #6ba3e8);
}

.hilfe-kachel__symbol {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-gray-50, #f8f9fa);
    color: var(--hilfe-akzent);
    font-size: 1.1rem;
}

.hilfe-kachel__titel {
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-kachel__text {
    flex: 1 1 auto;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    color: var(--color-gray-600, #495057);
}

.hilfe-kachel__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gray-100, #e9ecef);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--hilfe-akzent);
}

.hilfe-kachel__anzahl {
    color: var(--color-gray-500, #6c757d);
    font-weight: var(--font-weight-normal, 400);
}

/* ==========================================================================
   Themenabschnitt
   ========================================================================== */

/* scroll-margin-top haelt den Abstand, wenn /hilfe#app-rabatt den Browser
   hierher springen laesst -- sonst sitzt die Ueberschrift unter der Kopfzeile.
   Deshalb braucht hilfe.js keinen eigenen Sprung. */
.hilfe-thema-block {
    scroll-margin-top: 5rem;
}

.hilfe-thema-block__titel {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.4rem;
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-thema-block__titel .fas {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-gray-50, #f8f9fa);
    color: var(--hilfe-akzent);
}

/* Auf der Themenseite traegt die h1 den Titel schon. Die Ueberschrift bleibt
   fuer die Gliederung im Dokument, aber nicht fuer die Augen. */
.hilfe-thema-block__titel--versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.hilfe-thema-block__text {
    margin: 0 0 var(--spacing-md, 1rem);
    color: var(--color-gray-600, #495057);
}

.hilfe-thema-block__alle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin-top: var(--spacing-md, 1rem);
    color: var(--hilfe-akzent);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
}

.hilfe-thema-block__alle:hover,
.hilfe-thema-block__alle:focus-visible {
    text-decoration: underline;
}

/* ==========================================================================
   Artikel (details/summary)
   ========================================================================== */

.hilfe-artikel-liste {
    border: 1px solid var(--color-gray-200, #dee2e6);
    border-radius: var(--radius-lg, 0.75rem);
    overflow: hidden;
    background: #ffffff;
}

/* KEIN display auf .hilfe-artikel: Server und hilfe.js blenden ueber das
   Attribut hidden aus, und display schlaegt hidden. */
.hilfe-artikel {
    scroll-margin-top: 5rem;
}

.hilfe-artikel + .hilfe-artikel {
    border-top: 1px solid var(--color-gray-100, #e9ecef);
}

/* Der Geschwister-Wahler sieht den BAUM, nicht die Sichtbarkeit: Nach einer
   Suche kann der erste sichtbare Treffer eine Linie ueber sich tragen, die
   ueber einer Luecke haengt. hilfe.js markiert deshalb den jeweils ersten
   sichtbaren Artikel -- beim Laden wie nach jedem Tastendruck, damit es auch
   fuer die vom Server gefilterte Seite stimmt. */
/* ZWEIMAL die Klasse, damit das Gewicht reicht: .hilfe-artikel + .hilfe-artikel
   wiegt (0,2,0), eine einzelne Klasse nur (0,1,0) -- sie verlaere und die Linie
   bliebe stehen. */
.hilfe-artikel.hilfe-artikel--erster {
    border-top: 0;
}

.hilfe-artikel__frage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    min-height: 44px;
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    cursor: pointer;
    font-size: var(--font-size-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-800, #212529);
    list-style: none;
    transition: background var(--transition-fast, 150ms ease-in-out);
}

/* Das Standarddreieck weg -- der Pfeil rechts macht dieselbe Aussage und
   richtet sich am Text aus. */
.hilfe-artikel__frage::-webkit-details-marker {
    display: none;
}

.hilfe-artikel__frage::marker {
    content: "";
}

.hilfe-artikel__frage:hover {
    background: var(--color-gray-50, #f8f9fa);
}

.hilfe-artikel__frage:focus-visible {
    outline: 2px solid var(--hilfe-akzent);
    outline-offset: -2px;
}

.hilfe-artikel__pfeil {
    flex: 0 0 auto;
    color: var(--color-gray-500, #6c757d);
    transition: transform var(--transition-fast, 150ms ease-in-out);
}

.hilfe-artikel[open] > .hilfe-artikel__frage {
    background: var(--color-gray-50, #f8f9fa);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-artikel[open] .hilfe-artikel__pfeil {
    transform: rotate(180deg);
}

.hilfe-artikel__antwort {
    padding: 0 var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem);
}

.hilfe-artikel__antwort p {
    margin: 0;
    max-width: 62ch;
    line-height: 1.65;
    color: var(--color-gray-700, #343a40);
}

/* Das Bildschirmfoto in einer Antwort.
   420 Pixel breit anzeigen, 840 Punkte liefern: Die Bilder sind in doppelter
   Punktdichte aufgenommen und bleiben dadurch auf dem Telefon scharf. Breiter
   als 420 waeren sie unscharf, und ein Bildschirmfoto eines TELEFONS gehoert
   ohnehin nicht ueber die ganze Breite eines Rechnerbildschirms. */
.hilfe-artikel__bild {
    margin: var(--spacing-md, 1rem) 0 0;
}

.hilfe-artikel__bild img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border: 1px solid var(--color-gray-200, #dee2e6);
    border-radius: var(--radius-md, 8px);
    /* Fest weiss wie die Seite: Das Bild selbst ist hell, ein dunkler Rand
       darunter saehe im Dunkelmodus nach einem Fehler aus. */
    background: #ffffff;
}

.hilfe-artikel__bild figcaption {
    max-width: 420px;
    margin-top: 0.5rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    /* --color-gray-700 wie der Antworttext: kleiner Text braucht denselben
       Kontrast, nicht weniger. */
    color: var(--color-gray-700, #343a40);
}

.hilfe-artikel__verweise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: var(--spacing-md, 1rem) 0 0;
    padding: 0;
    list-style: none;
}

.hilfe-artikel__verweise a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    color: var(--hilfe-akzent);
    font-weight: var(--font-weight-semibold, 600);
}

/* "Anmeldung noetig" -- ein Hinweis, kein zweiter Knopf. Deshalb klein, grau
   und ohne eigene Umrandung; er gehoert zum Link und wird mit ihm angeklickt. */
.hilfe-artikel__anmeldung {
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-gray-100, #e9ecef);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    /* gray-700 auf gray-100: 8,6:1 -- der Hinweis ist klein, also mit Reserve. */
    color: var(--color-gray-700, #343a40);
    white-space: nowrap;
}


/* ==========================================================================
   Leerzustand
   ========================================================================== */

.hilfe-leer {
    padding: var(--spacing-2xl, 3rem) var(--spacing-lg, 1.5rem);
    text-align: center;
    border: 1px dashed var(--color-gray-300, #ced4da);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-gray-50, #f8f9fa);
}

.hilfe-leer__symbol {
    font-size: 1.75rem;
    color: var(--color-gray-400, #adb5bd);
}

.hilfe-leer__titel {
    margin: var(--spacing-md, 1rem) 0 0.5rem;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-900, #0f172a);
}

.hilfe-leer p {
    max-width: 38rem;
    margin: 0 auto var(--spacing-md, 1rem);
    color: var(--color-gray-600, #495057);
}

.hilfe-leer__alle {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--hilfe-akzent);
    font-weight: var(--font-weight-semibold, 600);
}

/* ==========================================================================
   Kontakt
   ========================================================================== */

.hilfe-kontakt {
    padding: var(--spacing-xl, 2rem);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-gray-50, #f8f9fa);
    border: 1px solid var(--color-gray-200, #dee2e6);
    border-left: 4px solid var(--color-primary, #4a90e2);
    scroll-margin-top: 5rem;
}

.hilfe-kontakt__titel {
    margin: 0 0 var(--spacing-md, 1rem);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-gray-900, #0f172a);
}

/* Der Betrieb steht zuerst und wird hervorgehoben: Er hat die Bestellung vor
   sich. Wer bei einer laufenden Lieferung uns schreibt, verliert Zeit. */
.hilfe-kontakt__betrieb {
    display: flex;
    gap: 0.7rem;
    margin: 0 0 var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
    border-radius: var(--radius-md, 0.5rem);
    background: #ffffff;
    border: 1px solid var(--color-gray-200, #dee2e6);
    line-height: 1.6;
    color: var(--color-gray-800, #212529);
}

.hilfe-kontakt__betrieb .fas {
    flex: 0 0 auto;
    margin-top: 0.25rem;
    color: var(--hilfe-akzent);
}

.hilfe-kontakt__text {
    max-width: 62ch;
    margin: 0 0 var(--spacing-lg, 1.5rem);
    line-height: 1.6;
    color: var(--color-gray-700, #343a40);
}

.hilfe-kontakt__knopf {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.5rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--hilfe-akzent);
    color: #ffffff;
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease-in-out);
}

.hilfe-kontakt__knopf:hover,
.hilfe-kontakt__knopf:focus-visible {
    background: var(--hilfe-akzent-tief);
    color: #ffffff;
}

/* ==========================================================================
   Hinweis für Betriebe
   ========================================================================== */

.hilfe-partner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg, 1.5rem);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    border-radius: var(--radius-lg, 0.75rem);
    background: var(--color-gray-900, #0f172a);
    color: #ffffff;
}

.hilfe-partner__titel {
    margin: 0 0 0.35rem;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
    color: #ffffff;
}

.hilfe-partner__text {
    flex: 1 1 22rem;
}

.hilfe-partner__text p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
    /* Heller als reines Grau: Weiss bei 82 % auf #0f172a bleibt deutlich ueber
       4,5:1 und nimmt dem Absatz trotzdem den Vorrang vor der Ueberschrift. */
    color: rgba(255, 255, 255, 0.82);
}

.hilfe-partner__knopf {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.5rem;
    border-radius: var(--radius-full, 9999px);
    background: #ffffff;
    color: var(--color-gray-900, #0f172a);
    font-weight: var(--font-weight-semibold, 600);
    text-decoration: none;
    transition: background var(--transition-fast, 150ms ease-in-out);
}

.hilfe-partner__knopf:hover,
.hilfe-partner__knopf:focus-visible {
    background: var(--color-gray-100, #e9ecef);
    color: var(--color-gray-900, #0f172a);
}

/* ==========================================================================
   App-WebView
   ========================================================================== */

/* In der App traegt die App-Leiste den Titel und den Zurueck-Weg. Der Kopf
   darf deshalb schmaler sein, und die Brotkrumen entstehen dort gar nicht. */
.hilfe-seite .hilfe-hero {
    scroll-margin-top: 0;
}

@media (max-width: 575.98px) {
    .hilfe-hero {
        padding-top: var(--spacing-lg, 1.5rem);
        padding-bottom: var(--spacing-xl, 2rem);
    }

    .hilfe-suche__knopf {
        padding: 0 1rem;
    }

    .hilfe-artikel__frage,
    .hilfe-artikel__antwort {
        padding-left: var(--spacing-md, 1rem);
        padding-right: var(--spacing-md, 1rem);
    }

    .hilfe-kontakt,
    .hilfe-partner {
        padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    }
}

/* ==========================================================================
   Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hilfe-kachel,
    .hilfe-hero__rabatt,
    .hilfe-artikel__pfeil,
    .hilfe-artikel__frage,
    .hilfe-suche__zeile,
    .hilfe-suche__knopf,
    .hilfe-kontakt__knopf,
    .hilfe-partner__knopf,
    .hilfe-themennav__liste a,
    .hilfe-haeufig__liste a {
        transition: none;
    }

    .hilfe-kachel:hover,
    .hilfe-kachel:focus-visible,
    .hilfe-hero__rabatt:hover,
    .hilfe-hero__rabatt:focus-visible {
        transform: none;
    }
}