/* Settings Page Styles */

.container {
    max-width: 900px;
    margin: var(--space-24) auto;
    padding: 0 var(--space-16);
}

h1 {
    color: var(--text);
    margin-top: 0;
    font-size: 2rem;
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

/* Icon-Platzhalter (nav-icons.js mountIcons() setzt hier das SVG ein) -
   inline-flex + leichter Vertikal-Ausgleich, analog .nav-icon in header.css,
   damit die Linien-Icons sauber auf der Textgrundlinie von Überschriften/
   Labels/Buttons sitzen. */
.settings-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
}

.settings-icon svg {
    flex-shrink: 0;
}

.settings-subtitle {
    margin-top: var(--space-2);
    margin-bottom: 0;
    font-size: var(--text-15);
    font-weight: 500;
    color: var(--text-muted);
}

h2 {
    color: var(--text);
    margin-top: 0;
    margin-bottom: var(--space-16);
    font-size: var(--text-24);
    border-bottom: 2px solid var(--accent);
    padding-bottom: var(--space-8);
}

/* Auf schmalen Geräten passt kein einziges deutsches Kompositum mehr in eine
   1,5-rem-Überschrift: "Push-Benachrichtigungen" braucht dort 272 px Min-Content, mit
   Kartenpolster und Rahmen 290 px – in einem 288 px breiten Platz. Weil `.container`
   ein Flex-Item ist, dessen `margin: … auto` das Stretchen unterbindet, wuchs es auf
   diese Min-Content-Breite und schob die ganze Seite 2 px nach rechts.

   `hyphens` zusätzlich, damit lange Komposita umbrechen statt überzustehen – die Seite
   ist `lang="de"`, die Silbentrennung greift also. */
@media (max-width: 480px) {
    h2 {
        font-size: var(--text-20);
        /* Safari/iOS kennt `hyphens` nur mit Prefix – und iOS ist für eine PWA
           die wichtigste Plattform mit schmalen Displays. */
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

h3 {
    color: var(--text);
    margin-top: var(--space-24);
    margin-bottom: var(--space-12);
    font-size: var(--text-18);
}

p {
    color: var(--text-muted);
    margin-bottom: var(--space-12);
    line-height: 1.7;
}

.info-box {
    background: rgba(14, 165, 164, 0.1);
    border-left: 4px solid var(--accent);
    padding: var(--space-16);
    border-radius: var(--radius-md);
    margin: var(--space-20) 0;
    font-size: var(--text-14);
    color: var(--text-muted);
}

.info-box strong {
    /* --accent auf dieser getönten Kartenflaeche schafft nur 2.4:1 (axe-core
       color-contrast, WCAG-AA braucht 4.5:1). --accent-contrast waere im Dark
       Mode seinerseits zu dunkel - --content-link-color hat fuer beide Themes
       einen passenden Wert (siehe base.css). */
    color: var(--content-link-color);
}

.settings-fieldset-reset {
    border: none;
    padding: 0;
    margin: 0;
}

.settings-list-reset {
    list-style: none;
    padding: 0;
    margin: 0;
}

.settings-list-reset--no-margin {
    margin: 0;
}

/* Score Settings Styles */
.score-slider {
    display: grid;
    grid-template-columns: minmax(120px, 150px) 1fr auto;
    gap: var(--space-12);
    align-items: center;
    margin: 14px 0;
    padding: var(--space-8) var(--space-10);
    border-radius: 10px;
    transition: background 0.2s ease;
    --slider-color: var(--accent);
    --slider-fill: 50%;
}

.score-slider label {
    font-weight: 500;
    color: var(--text);
}

.score-slider input[type="range"] {
    width: calc(100% - 12px);
    max-width: 100%;
    box-sizing: border-box;
    justify-self: start;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: var(--radius-pill);
    background: linear-gradient(
        90deg,
        var(--slider-color) 0%,
        var(--slider-color) var(--slider-fill),
        rgba(255, 255, 255, 0.22) var(--slider-fill),
        rgba(255, 255, 255, 0.22) 100%
    );
    outline: none;
}

.score-slider input[type="range"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.score-slider input[type="range"]::-moz-range-track {
    height: 10px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.22);
}

.score-slider input[type="range"]::-moz-range-progress {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--slider-color);
}

.score-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--slider-color) 45%, var(--card));
    background: var(--card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.score-slider input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--slider-color) 45%, var(--card));
    background: var(--card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
}

.score-slider .value-display {
    text-align: right;
    font-weight: 600;
    color: var(--accent);
    font-size: var(--text-14);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    background: rgb(var(--accent-rgb) / 0.12);
    border: 1px solid color-mix(in srgb, var(--slider-color) 45%, transparent);
    border-radius: var(--radius-pill);
    padding: var(--space-4) var(--space-10);
    /* War Richtung #fff aufgehellt (fuer dunklen Hintergrund gedacht) - auf der
       im Light Mode tatsaechlich hellen Chip-Flaeche (rgb(var(--accent-rgb) / .12))
       blieben davon nur 1.6-2.5:1 (axe-core color-contrast, WCAG-AA braucht
       4.5:1). Richtung Schwarz abgedunkelt haelt den Farbton erkennbar und
       erreicht ueberall mindestens ~5:1. Dark-Mode-Gegenstueck unten: dieselbe
       Chip-Flaeche wird dort dunkel, ein weiter abgedunkelter Text waere dort
       unlesbar. */
    color: color-mix(in srgb, var(--slider-color) 55%, black);
    justify-self: end;
    width: fit-content;
}

/* Dark-Mode-Gegenstueck zur obigen Abdunkelung: dieselbe Chip-Flaeche ist im
   Dark Mode dunkel, Richtung Schwarz mischen waere dort unlesbar (axe-core
   color-contrast). Beide Aktivierungswege noetig, weil das In-App-Theme
   ueber [data-theme] geht, waehrend @media nur der System-Praeferenz folgt -
   ohne den [data-theme]-Block greift der Fix nicht, wenn jemand Dark manuell
   waehlt, obwohl das System auf Light steht. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .score-slider .value-display {
        color: color-mix(in srgb, var(--slider-color) 30%, white);
    }
}
:root[data-theme="dark"] .score-slider .value-display {
    color: color-mix(in srgb, var(--slider-color) 30%, white);
}

.score-slider--eco {
    --slider-color: #22c55e;
}

.score-slider--ethics {
    --slider-color: #a855f7;
    margin-bottom: var(--space-2);
}

.score-slider--ethics-sub {
    grid-template-columns: minmax(82px, 106px) 1fr auto;
    margin: -10px 0 0 var(--space-10);
    padding: 0 0 0 var(--space-4);
    border-left: none;
    border-radius: 0;
    background: transparent;
    /* War opacity: 0.92 - verwaschte den ohnehin schon knappen --text-muted von
       label/.value-display unter 4.5:1 (axe-core color-contrast). Die Zeile ist
       durch Farbe/Groesse bereits als Unterpunkt erkennbar, die Opacity war nur
       zusaetzliche, nicht noetige Abschwaechung. */
}

.score-slider--ethics-sub label {
    font-size: var(--text-11);
    font-weight: 400;
    color: var(--text-muted);
}

.score-slider--ethics-sub label::before {
    content: "↳ ";
    opacity: 0.5;
}

.score-slider--ethics-sub input[type="range"] {
    height: 6px;
}

.score-slider--ethics-sub input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    height: 12px;
}

.score-slider--ethics-sub input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
}

.score-slider--ethics-sub .value-display {
    font-size: var(--text-10);
    font-weight: 500;
    padding: 1px var(--space-6);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-muted);
}

.score-slider--ethics-label-sub {
    --slider-color: #b794f4;
}

.score-slider--ethics-community-sub {
    --slider-color: #a78bfa;
}

.score-slider--nutri {
    --slider-color: #38bdf8;
}

.score-slider--price {
    --slider-color: #f59e0b;
}

@media (min-width: 769px) {
    .score-slider {
        grid-template-columns: minmax(130px, 160px) 1fr max-content;
        gap: 14px;
        padding: var(--space-10) var(--space-8);
    }

    .score-slider label {
        font-size: var(--text-15);
        letter-spacing: 0.1px;
    }

    .score-slider .value-display {
        font-size: var(--text-14);
        padding: var(--space-6) var(--space-12);
    }
}

@media (max-width: 768px) {
    .score-slider {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding: var(--space-10);
    }

    .score-slider label {
        margin-bottom: 0;
    }

    .score-slider .value-display {
        justify-self: end;
        font-size: var(--text-13);
    }

    .score-slider--ethics-sub {
        margin-top: -6px;
        margin-left: var(--space-4);
        padding-left: var(--space-4);
    }
}

.score-weights-bar {
    position: relative;
    height: 16px;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    gap: var(--space-2);
    background: var(--input-bg);
    border: 1px solid var(--border);
    margin: var(--space-20) 0;
}

.score-weights-bar span {
    height: 100%;
    display: block;
    transition: width 0.3s ease;
}

.score-weights-bar.is-interactive {
    cursor: ew-resize;
    touch-action: none;
}

.score-weights-handle {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 20px;
    margin-left: -4px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    z-index: 2;
    cursor: ew-resize;
}

.weights-legend {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-12);
    color: var(--text-muted);
    margin-top: var(--space-8);
}

.weights-values {
    display: flex;
    gap: var(--space-16);
    flex-wrap: wrap;
    margin-top: var(--space-12);
}

.weight-value {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    font-size: var(--text-13);
}

.weight-value .color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.weight-value .label {
    color: var(--text-muted);
}

.weight-value .value {
    font-weight: 700;
    color: var(--text);
}

.pro-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: var(--space-16);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid var(--warning);
    border-radius: var(--radius-lg);
    margin: var(--space-24) 0;
}

.pro-toggle--dependent {
    margin-left: 28px;
    margin-top: var(--space-12);
}

.pro-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.pro-toggle label {
    cursor: pointer;
    flex: 1;
    font-size: var(--text-14);
    color: var(--text);
}

.pro-badge {
    background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
    color: white;
    padding: var(--space-4) var(--space-12);
    border-radius: var(--radius-xl);
    font-size: var(--text-11);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.guardrails-info {
    margin-top: var(--space-24);
    padding: var(--space-16);
    background: var(--input-bg);
    border-radius: var(--radius-lg);
    font-size: var(--text-13);
    color: var(--text-muted);
}

.guardrails-info h4 {
    margin: 0 0 var(--space-12) 0;
    color: var(--text);
    font-size: var(--text-14);
}

.guardrails-info ul {
    margin: var(--space-8) 0 0 var(--space-20);
    padding: 0;
}

.guardrails-info li {
    margin-bottom: var(--space-8);
    line-height: 1.5;
}

/* Reset Button */
.score-weights-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-24);
}

.score-weights-actions .account-btn {
    margin-top: 0;
}

.score-weights-actions .reset-button {
    margin-top: 0;
}

.reset-button {
    margin-top: var(--space-24);
    padding: var(--space-10) var(--space-20);
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text);
    cursor: pointer;
    font-size: var(--text-14);
    transition: all 0.2s;
}

.reset-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Metrics toggle styles */
.metrics-row {
    display: flex;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-16);
}

.metrics-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.metrics-label {
    cursor: pointer;
    font-weight: 500;
}

.metrics-hint {
    margin-top: var(--space-12);
    font-size: var(--text-13);
    color: var(--text-muted);
}

/* Statushinweise (z. B. Push) tonal hervorheben – Farbe verstärkt nur den
   ohnehin eindeutigen Text und ist damit nicht das alleinige Signal. */
.metrics-hint[data-tone="warn"] {
    color: #b45309;
    font-weight: 500;
}

.metrics-hint[data-tone="error"] {
    color: var(--danger-text);
    font-weight: 500;
}

/* Beide Aktivierungswege noetig (siehe Kommentar bei .score-slider .value-display
   oben): @media folgt nur der System-Praeferenz, [data-theme] dem In-App-Toggle. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .metrics-hint[data-tone="warn"] {
        color: #fbbf24;
    }

    :root:not([data-theme]) .metrics-hint[data-tone="error"] {
        color: #f87171;
    }
}
:root[data-theme="dark"] .metrics-hint[data-tone="warn"] {
    color: #fbbf24;
}
:root[data-theme="dark"] .metrics-hint[data-tone="error"] {
    color: #f87171;
}

.metrics-current-status {
    margin: var(--space-10) 0 0;
    font-size: var(--text-13);
    color: var(--text);
}

.metrics-current-status[data-state="pending"] {
    color: #b45309;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .metrics-current-status[data-state="pending"] {
        color: #fbbf24;
    }
}
:root[data-theme="dark"] .metrics-current-status[data-state="pending"] {
    color: #fbbf24;
}

.metrics-current-status[data-state="enabled"] {
    color: var(--success-text);
}

.metrics-current-status[data-state="disabled"] {
    color: var(--text-muted);
}

.settings-allergen-chips {
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    margin: var(--space-12) 0;
}

.settings-allergen-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: var(--text);
    font-size: var(--text-13);
}

.settings-allergen-chip-remove {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-12);
    line-height: 1;
    padding: 0;
}

.settings-allergen-empty {
    font-size: var(--text-13);
    color: var(--text-muted);
}

.settings-allergen-input-row {
    display: flex;
    gap: var(--space-10);
    align-items: center;
}

.settings-allergen-input {
    flex: 1;
    padding: var(--space-10) var(--space-12);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
}

.settings-allergen-add-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text);
    cursor: pointer;
    font-size: var(--text-20);
}

.settings-allergen-hint {
    margin-top: var(--space-8);
    font-size: var(--text-12);
    color: var(--text-muted);
}

.settings-allergen-hint-warning {
    margin-top: var(--space-6);
    color: var(--danger-text);
    font-weight: 600;
}

@media (max-width: 768px) {
    .pro-toggle--dependent {
        margin-left: var(--space-12);
    }
}

/* Score Weights Bar - Default widths (updated by JavaScript) */
.score-weights-bar .bar-eco {
    width: 50%;
}

.score-weights-bar .bar-ethics {
    width: 30%;
}

.score-weights-bar .bar-nutri {
    width: 10%;
}

.score-weights-bar .bar-price {
    width: 10%;
}

/* === Konto-Bereich (account-card) ========================================= */
.account-email-display {
    margin: 0 0 var(--space-16);
    color: var(--text-muted);
}

.account-label {
    font-weight: 600;
    display: block;
    margin-bottom: var(--space-4);
}

.account-field {
    margin-bottom: var(--space-12);
}

.account-inline-row {
    display: flex;
    gap: var(--space-8);
    align-items: center;
}

.account-input {
    flex: 1;
    width: 100%;
    padding: var(--space-8) var(--space-10);
    font-size: var(--text-16);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    background: var(--input-bg);
    color: var(--text);
}

.account-input:focus {
    outline: 2px solid var(--accent-dark);
    outline-offset: 1px;
}

.update-check-btn {
    padding: var(--space-8) var(--space-16);
    background: var(--accent-contrast);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}

.update-check-btn:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

.update-check-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.account-btn {
    padding: var(--space-8) var(--space-16);
    background: var(--accent-contrast);
    color: #fff;
    border: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.account-btn:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
}

.account-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.account-btn--danger {
    background: var(--danger);
    margin-top: var(--space-16);
}

.account-msg {
    margin: var(--space-6) 0 0;
    font-size: var(--text-14);
    min-height: 1.2em;
}

.account-msg--ok {
    color: var(--success-text);
    font-weight: 600;
}

.account-msg--err {
    color: var(--danger-text);
    font-weight: 600;
}

.account-msg--loading {
    color: var(--text-muted);
    font-weight: 600;
}

.account-logout-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-12);
    align-items: center;
    margin-top: var(--space-16);
}

.account-logout-row .account-btn--danger {
    margin-top: 0;
}

.account-logout-hint {
    margin-top: var(--space-10);
    font-weight: 400;
    font-size: var(--text-14);
    color: var(--text-muted);
}

.account-pw-summary {
    cursor: pointer;
    font-weight: 600;
    margin-bottom: var(--space-12);
    padding: var(--space-2) 0;
}

.account-pw-summary:focus-visible {
    outline: 2px solid var(--accent-dark);
    outline-offset: 2px;
    border-radius: 2px;
}

.account-pw-body {
    margin-top: var(--space-10);
}

/* Haushalt-Card */
.household-code {
    font-family: "IBM Plex Mono", monospace;
    font-size: var(--text-14);
    background: var(--input-bg);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-sm);
    word-break: break-all;
}

.household-members {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0 var(--space-16);
}

.household-member {
    padding: var(--space-4) 0;
    font-size: var(--text-15);
    border-bottom: 1px solid var(--border);
}

.household-member:last-child {
    border-bottom: none;
}

.household-btn-sm {
    padding: 5px var(--space-10);
    font-size: var(--text-14);
}

.household-item {
    border-top: 1px solid var(--border);
    padding-top: var(--space-16);
    margin-top: var(--space-16);
}

.household-item:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.household-member-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.account-danger-summary {
    cursor: pointer;
    font-weight: 600;
    /* --danger schafft im Dark Mode nur 3.02:1 (axe-core color-contrast,
       WCAG-AA braucht 4.5:1) - --danger-text hat fuer beide Themes einen
       passenden Wert (siehe base.css). */
    color: var(--danger-text);
    padding: var(--space-2) 0;
    margin-top: var(--space-12);
}

.account-danger-summary:focus-visible {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
    border-radius: 2px;
}

.account-danger-body {
    margin-top: var(--space-10);
    padding: var(--space-12);
    border: 1px solid #fca5a5;
    border-radius: var(--radius-md);
    background: #fff5f5;
}

.account-btn--danger-sm {
    margin-top: var(--space-8);
}

.account-btn--secondary {
    background: var(--muted);
    /* Mit der warmen Papier-Palette liegen --muted (Light) und --muted (Dark)
       naeher beieinander als vorher (Dark ist dort sogar minimal heller) -
       ein einzelner dunkler Text-Wert schafft in beiden Themes komfortabel
       WCAG-AA (5.19:1 Light, 8.46:1 Dark, axe-core color-contrast), die
       vorherigen Light/Dark-Sonderfaelle mit hellem Text im Dark Mode
       entfallen damit. */
    color: #000;
}

#account-delete-dialog {
    border: none;
    border-radius: 10px;
    padding: 28px var(--space-24) var(--space-20);
    max-width: 380px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

#account-delete-dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
}

#account-delete-dialog h3 {
    margin: 0 0 var(--space-10);
    font-size: var(--text-18);
    color: var(--danger-text);
}

#account-delete-dialog p {
    margin: 0 0 var(--space-20);
    font-size: var(--text-15);
    color: var(--text-muted);
}

.delete-dialog-actions {
    display: flex;
    gap: var(--space-10);
    justify-content: flex-end;
}

.delete-dialog-actions .account-btn {
    margin-top: 0;
}

/* ── Ethik-Datenquellen & Transparenz ───────────────────────────── */
/* Die .ethics-src-* / .ethics-sources-status-Styles liegen geteilt in
 * components/ethics-sources.css (von einstellungen.html verlinkt), damit der
 * Renderer auch auf der Produktseite identisch aussieht. */

.ethics-transparency {
    margin-top: 14px;
    font-size: var(--text-14);
}

.ethics-transparency summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
}

.ethics-transparency ul {
    margin: var(--space-8) 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    display: grid;
    gap: var(--space-6);
}

/* Symbol-Feld der Haushalts-Kennzeichnung: schmal, weil dort genau ein Emoji
   steht - ein volles Textfeld wuerde eine laengere Eingabe suggerieren. */
.household-icon-input {
    max-width: 5rem;
    text-align: center;
}

/* Hover-Effekte nur für echte Zeigegeräte: auf Touch bleibt der
   Hover-Zustand nach dem Tap kleben, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
    .score-slider:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    .score-slider--ethics-sub:hover {
        background: transparent;
    }

    .reset-button:hover {
        background: var(--border);
    }

    .settings-allergen-chip-remove:hover {
        color: var(--danger-text);
    }

    .update-check-btn:hover {
        background: var(--accent-dark);
    }

    .account-btn--secondary:hover {
        background: #d1d5db;
    }
}