/* =========================================================================
   Tonnenauswahl im Buchungsprozess

   Groesse und Muellart gehoeren zu jeder Tonne zusammen. Die Oberflaeche
   bildet genau das ab: eine Karte je Tonne, ein gefuehrter Weg zum
   Hinzufuegen, eine Summe, die sofort mitzieht.

   Die Datei nutzt ausschliesslich die Farb-, Radius- und Schattenvariablen
   aus site.css, damit der Bereich zum uebrigen Buchungsprozess passt und
   der Dunkelmodus ohne Zusatzarbeit stimmt.
   ========================================================================= */

.tonnen-modul {
    --tonne-akzent: var(--color-primary);
    --tonne-akzent-weich: var(--color-primary-soft);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Die Bausteine setzen eigene display-Werte; ohne diese Regel bliebe ein
   verstecktes Element sichtbar. */
.tonnen-modul [hidden] {
    display: none !important;
}

/* site.css verwandelt ueber `.feature-card .bi` jedes Bootstrap-Symbol
   innerhalb einer Karte in eine 56-px-Kachel mit eigenem Hintergrund. Fuer
   grosse Merkmalskacheln ist das richtig - hier sitzen die Symbole aber in
   Knoepfen, Zeilen und Chips und muessen normale Glyphen bleiben. Ohne diese
   Ruecknahme sprengen sie die Karten und ueberdecken die Bedienelemente.
   Farbe bleibt bewusst aussen vor, damit die Akzentfarben weiter greifen. */
.tonnen-modul i[class*='bi-'],
.tonnen-liste i[class*='bi-'],
.tonnen-summe i[class*='bi-'],
.tonnen-modul__titel i[class*='bi-'],
.tonnen-hinweis i[class*='bi-'] {
    display: inline-block;
    place-items: normal;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: inherit;
    line-height: 1;
}

/* --- Kopfzeile ------------------------------------------------------- */

.tonnen-modul__kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tonnen-modul__titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.tonnen-modul__titel i {
    color: var(--color-primary);
}

.tonnen-modul__zaehler {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* --- Liste der gewaehlten Tonnen ------------------------------------- */

.tonnen-liste {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tonne-karte {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        'symbol kopf preis'
        'symbol art  preis'
        'hinweis hinweis hinweis'
        'aktionen aktionen aktionen';
    align-items: center;
    gap: 0.125rem 0.75rem;
    padding: 0.875rem 0.9375rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-solid);
    box-shadow: var(--shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    animation: tonneErscheint 0.28s ease both;
}

/* Farbschiene links: die einzige Stelle, an der die Muellart Flaeche
   bekommt. Dezent, aber sofort zuzuordnen. */
.tonne-karte::before {
    content: '';
    position: absolute;
    inset: 0.625rem auto 0.625rem 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--tonne-akzent);
    opacity: 0.85;
}

.tonne-karte:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
}

.tonne-karte__symbol {
    grid-area: symbol;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--tonne-akzent-weich);
    color: var(--tonne-akzent);
    font-size: 1.25rem;
}

.tonne-karte__kopf {
    grid-area: kopf;
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    min-width: 0;
}

.tonne-karte__groesse {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.tonne-karte__menge {
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tonne-karte__art {
    grid-area: art;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

/*
   Auch in der Uebersicht der gewaehlten Tonnen darf der Takt nicht der
   Ellipsis zum Opfer fallen - sonst steht dort zweimal dasselbe.
*/
.tonne-karte__art span {
    white-space: normal;
    overflow-wrap: anywhere;
}

.tonne-karte__preis {
    grid-area: preis;
    text-align: right;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.tonne-karte__aktionen {
    grid-area: aktionen;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--color-border);
}

/* --- Mengensteuerung auf der Karte ----------------------------------- */

.tonne-menge {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
}

.tonne-menge__knopf {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.tonne-menge__knopf:hover:not(:disabled) {
    background: var(--color-surface-solid);
    color: var(--color-primary-dark);
    box-shadow: var(--shadow-xs);
}

.tonne-menge__knopf:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tonne-menge__wert {
    min-width: 1.75rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.tonne-aktion {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    min-height: 2rem;
    padding: 0.25rem 0.6875rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tonne-aktion:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.tonne-aktion--entfernen:hover {
    background: var(--color-danger-soft);
    border-color: transparent;
    color: var(--color-danger);
}

/* --- Fehlender Angabe an genau der Tonne ----------------------------- */

.tonne-karte--unvollstaendig {
    border-color: var(--color-warning);
    background: linear-gradient(0deg, var(--color-warning-soft), var(--color-warning-soft)), var(--color-surface-solid);
}

.tonne-karte__hinweis {
    grid-area: hinweis;
    display: none;
    align-items: flex-start;
    gap: 0.4375rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    color: #92400e;
}

html[data-theme='dark'] .tonne-karte__hinweis {
    color: var(--color-warning);
}

.tonne-karte--unvollstaendig .tonne-karte__hinweis {
    display: flex;
}

/* --- Leerer Zustand -------------------------------------------------- */

.tonnen-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    text-align: center;
}

.tonnen-leer__symbol {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 1.25rem;
}

.tonnen-leer__titel {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text);
}

.tonnen-leer__text {
    margin: 0;
    max-width: 26rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* --- Auswahl-Assistent ----------------------------------------------- */

.tonnen-assistent {
    padding: 1rem;
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    animation: tonneErscheint 0.24s ease both;
}

.tonnen-assistent[hidden] {
    display: none;
}

.tonnen-schritt + .tonnen-schritt {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.tonnen-schritt[hidden] {
    display: none;
}

.tonnen-schritt__frage {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text);
}

.tonnen-schritt__nummer {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
}

.tonnen-optionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.5rem;
}

/*
   Die schmale Spur von 6,5 rem passt zu den Groessen-Kacheln, die nur "120 L"
   tragen. Die Muellart-Zeilen tragen dagegen einen ganzen Satz - "Restmüll
   1.100 l (2-wöchentlich)" samt Abfuhrhinweis - und stehen als Zeile mit
   Symbol links. In der schmalen Spur blieb davon nur "Restmüll 1.100 l ...":
   Ausgerechnet der Takt, der die beiden Grossbehaelter ueberhaupt erst
   unterscheidet, fiel der Ellipsis zum Opfer und beide Zeilen sahen gleich aus.
   Deshalb bekommt die Muellart-Liste eine eigene, deutlich breitere Spur.
*/
.tonnen-optionen--art {
    grid-template-columns: 1fr;
}

@media (min-width: 45rem) {
    .tonnen-optionen--art {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

.tonnen-option {
    --tonne-akzent: var(--color-primary);
    --tonne-akzent-weich: var(--color-primary-soft);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 4.25rem;
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-solid);
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.tonnen-option:hover {
    border-color: var(--tonne-akzent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.tonnen-option:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px var(--color-primary-soft));
    border-color: var(--tonne-akzent);
}

.tonnen-option[aria-pressed='true'] {
    border-color: var(--tonne-akzent);
    background: var(--tonne-akzent-weich);
    box-shadow: inset 0 0 0 1px var(--tonne-akzent);
}

/* Haken nur im gewaehlten Zustand - kein Dauerschmuck. */
.tonnen-option[aria-pressed='true']::after {
    content: '\2713';
    position: absolute;
    top: 0.25rem;
    right: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tonne-akzent);
}

/* Eine Groesse, fuer die keine Muellart hinterlegt ist, fuehrt in eine
   Sackgasse. Sie bleibt sichtbar - verschwaende sie, entstuende der Eindruck,
   das Angebot sei kleiner als es ist -, laesst sich aber nicht waehlen. */
.tonnen-option:disabled,
.tonnen-option.ist-ohne-art {
    opacity: 0.45;
    cursor: not-allowed;
}

.tonnen-option:disabled:hover,
.tonnen-option.ist-ohne-art:hover {
    border-color: var(--color-border);
    transform: none;
    box-shadow: none;
}

.tonnen-option__wert {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.tonnen-option__zusatz {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.tonnen-option--art {
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 3rem;
    padding: 0.5rem 0.6875rem;
    text-align: left;
}

.tonnen-option--art .tonnen-option__symbol {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-xs);
    background: var(--tonne-akzent-weich);
    color: var(--tonne-akzent);
    font-size: 0.9375rem;
}

.tonnen-option--art .tonnen-option__text {
    min-width: 0;
}

/*
   Kein Abschneiden mehr: Lieber eine zweite Zeile als ein Name, dem der
   entscheidende Zusatz fehlt.
*/
.tonnen-option--art .tonnen-option__wert {
    display: block;
    font-size: 0.875rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/*
   Der Leerungstakt ist bei den 1.100-Liter-Behaeltern das einzige
   Unterscheidungsmerkmal. Er steht deshalb nicht als Klammer am Zeilenende,
   sondern als eigenes Abzeichen in der Akzentfarbe der Art.
*/
.tonnen-option__takt {
    display: inline-block;
    margin-top: 0.1875rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: var(--radius-pill);
    background: var(--tonne-akzent-weich);
    color: var(--tonne-akzent);
    font-size: 0.6875rem;
    font-weight: 700;
    white-space: nowrap;
}

.tonnen-option--art .tonnen-option__zusatz {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tonnen-assistent__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--color-border);
}

.tonnen-assistent__menge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.tonnen-assistent__knoepfe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.tonnen-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tonnen-knopf--haupt {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

.tonnen-knopf--haupt:hover:not(:disabled) {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

.tonnen-knopf--haupt:disabled {
    background: var(--color-bg-soft);
    color: var(--color-text-muted);
    box-shadow: none;
    cursor: not-allowed;
}

.tonnen-knopf--still {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text-soft);
}

.tonnen-knopf--still:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

.tonnen-knopf--weit {
    width: 100%;
    border-style: dashed;
    border-color: var(--color-border-strong);
    background: transparent;
    color: var(--color-primary-dark);
}

.tonnen-knopf--weit:hover {
    border-style: solid;
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
}

.tonnen-knopf--weit[hidden] {
    display: none;
}

/* --- Zusammenfassung -------------------------------------------------- */

.tonnen-summe {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-primary-soft);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary-softer), transparent 70%), var(--color-surface-solid);
}

.tonnen-summe[hidden] {
    display: none;
}

.tonnen-summe__zeilen {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.tonnen-summe__marke {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-soft);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tonnen-summe__marke i {
    color: var(--tonne-akzent);
}

.tonnen-summe__gesamt {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.tonnen-summe__bezeichnung {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-soft);
}

.tonnen-summe__betrag {
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-primary-deep);
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}

html[data-theme='dark'] .tonnen-summe__betrag {
    color: #34d399;
}

.tonnen-summe__einheit {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.tonnen-summe__betrag.ist-geaendert {
    animation: tonnePreisWechsel 0.42s ease;
}

/* --- Sammelfehler ----------------------------------------------------- */

.tonnen-fehler {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
}

.tonnen-fehler:empty,
.tonnen-fehler[hidden] {
    display: none;
}

.tonnen-hinweis {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

/* --- Bewegung --------------------------------------------------------- */

@keyframes tonneErscheint {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tonnePreisWechsel {
    0%   { transform: none; }
    35%  { transform: translateY(-2px) scale(1.03); }
    100% { transform: none; }
}

.tonne-karte.ist-entfernt {
    animation: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .tonne-karte,
    .tonnen-assistent,
    .tonnen-summe__betrag.ist-geaendert {
        animation: none;
    }

    .tonnen-option:hover,
    .tonnen-knopf--haupt:hover:not(:disabled) {
        transform: none;
    }
}

/* --- Schmale Bildschirme ---------------------------------------------- */

@media (max-width: 575.98px) {
    .tonne-karte {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            'symbol kopf'
            'symbol art'
            'preis  preis'
            'hinweis hinweis'
            'aktionen aktionen';
        row-gap: 0.25rem;
    }

    .tonne-karte__preis {
        margin-top: 0.375rem;
        text-align: left;
    }

    .tonnen-optionen {
        grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    }

    .tonnen-optionen--art {
        grid-template-columns: 1fr;
    }

    .tonnen-assistent__fuss {
        flex-direction: column;
        align-items: stretch;
    }

    .tonnen-assistent__knoepfe {
        margin-left: 0;
    }

    .tonnen-assistent__knoepfe .tonnen-knopf {
        flex: 1 1 auto;
    }

    /* Auf dem Telefon zaehlt die Daumenreichweite: Aktionen bleiben gross
       genug und rutschen nicht in eine enge Zeile. */
    .tonne-aktion,
    .tonne-menge__knopf {
        min-height: 2.75rem;
    }

    .tonne-menge__knopf {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* Auch auf Tablets wird mit dem Finger bedient - dort greift der
   Telefon-Umbruch nicht, die Flaechen muessen trotzdem treffbar sein. */
@media (pointer: coarse) and (min-width: 576px) {
    .tonne-aktion,
    .tonne-menge__knopf {
        min-height: 2.75rem;
    }

    .tonne-menge__knopf {
        width: 2.75rem;
        height: 2.75rem;
    }
}

/* --- Dunkelmodus ------------------------------------------------------ */

html[data-theme='dark'] .tonne-karte,
html[data-theme='dark'] .tonnen-option,
html[data-theme='dark'] .tonnen-summe {
    background: rgba(30, 41, 59, 0.65);
}

html[data-theme='dark'] .tonne-karte--unvollstaendig {
    background: linear-gradient(0deg, var(--color-warning-soft), var(--color-warning-soft)), rgba(30, 41, 59, 0.65);
}

html[data-theme='dark'] .tonnen-assistent,
html[data-theme='dark'] .tonnen-leer {
    background: rgba(15, 23, 42, 0.45);
}

html[data-theme='dark'] .tonne-menge,
html[data-theme='dark'] .tonne-karte__menge,
html[data-theme='dark'] .tonnen-summe__marke {
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme='dark'] .tonne-menge__knopf:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1);
    color: #34d399;
}

/* --- Farbe der Muellart ------------------------------------------------
   Der Katalog pflegt die Farbe als Bootstrap-Name. Hier wird daraus ein
   Akzent, der nur Schiene, Symbol und Auswahlzustand einfaerbt - keine
   grossen bunten Flaechen.                                             */

[data-farbe='primary']   { --tonne-akzent: var(--color-secondary); --tonne-akzent-weich: var(--color-secondary-soft); }
[data-farbe='success']   { --tonne-akzent: var(--color-success);   --tonne-akzent-weich: var(--color-success-soft); }
[data-farbe='info']      { --tonne-akzent: var(--color-info);      --tonne-akzent-weich: var(--color-info-soft); }
[data-farbe='warning']   { --tonne-akzent: var(--color-warning);   --tonne-akzent-weich: var(--color-warning-soft); }
[data-farbe='danger']    { --tonne-akzent: var(--color-danger);    --tonne-akzent-weich: var(--color-danger-soft); }
[data-farbe='secondary'] { --tonne-akzent: #64748b; --tonne-akzent-weich: rgba(100, 116, 139, 0.14); }
[data-farbe='dark']      { --tonne-akzent: #334155; --tonne-akzent-weich: rgba(51, 65, 85, 0.14); }
[data-farbe='light']     { --tonne-akzent: #94a3b8; --tonne-akzent-weich: rgba(148, 163, 184, 0.16); }

html[data-theme='dark'] [data-farbe='dark'] { --tonne-akzent: #cbd5e1; --tonne-akzent-weich: rgba(203, 213, 225, 0.14); }
html[data-theme='dark'] [data-farbe='secondary'] { --tonne-akzent: #cbd5e1; --tonne-akzent-weich: rgba(203, 213, 225, 0.12); }