/* ===== OO Badge =====
   Nutzt dieselben --_btn-* Vars wie .oo-btn (gesetzt via OoColor inline style).
   ===================== */

.oo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    padding: 0.1em 0.4em;
    border: var(--oo-border-width) solid var(--_btn-border, transparent);
    background: var(--_btn-bg);
    color: var(--_btn-text);
    font-family: inherit;
    font-size: var(--oo-font-size-sm); /* Standard; OoSize-Klassen (oo-size-*) überschreiben */
    white-space: nowrap;
    max-width: 100%; /* Nie breiter als der Container – lange Texte werden unten mit „…“ gekürzt */    cursor: default;
    line-height: 1;
    user-select: none;
    /* Alle Badges gleich hoch – mit oder ohne Symbol, in jeder Form –, damit sie nebeneinander auf einer Linie stehen.
       1,3em = Symbol (1,1em) und Innenabstand oben/unten (je 0,1em); höher nur bei eigenem, mehrzeiligem Inhalt. */
    box-sizing: border-box;
    min-height: calc(1.3em + 2 * var(--oo-border-width));
}

/* Text bleibt standardmäßig ohne zusätzliche Verschiebung zentriert.
   Für fontspezifische optische Anpassungen kann --oo-badge-text-nudge gesetzt werden. */
.oo-badge__text {
    transform: translateY(var(--oo-badge-text-nudge, 0));
    /* Kürzen bei Überlänge; padding/margin-block verhindern, dass overflow Unterlängen abschneidet */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-block: 0.15em;
    margin-block: -0.15em;
}

/* Symbol und Text auf einer Linie: das Symbol so hoch wie der Text, ohne eigene Zeilenhöhe */
.oo-badge .oo-icon {
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

/* Kleinere Größen (OoSize.Xxs, OoSize.Xxxs) für Badges in dichten Listen und Seitenleisten */
.oo-badge.oo-size-xxs {
    font-size: var(--oo-font-size-xxs) !important;
}

.oo-badge.oo-size-xxxs {
    font-size: var(--oo-font-size-xxxs) !important;
}

.oo-badge--clickable {
    cursor: pointer;
    transition: background var(--oo-transition), border-color var(--oo-transition), color var(--oo-transition);
}

    .oo-badge--clickable:hover {
        background: var(--_btn-hover);
    }

    .oo-badge--clickable:focus-visible {
        /* Nicht --_btn-bg: bei Outline/Ghost ist das transparent und der Fokusring unsichtbar */
        outline: 2px solid var(--oo-primary);
        outline-offset: 2px;
    }

/* ===== Formen (Parameter Form) =====
   Aus der Badge wird eine Marke, die man an der Form erkennt. Die Farbe kommt als --_badge-akzent (Badge.razor.cs);
   Fläche, Strich, Kreis usw. bestimmt die Form. Jede Form setzt höchstens --_badge-flaeche und --_badge-flaeche-hover.
   ===================== */

.oo-badge--geformt {
    --_badge-ton: color-mix(in oklch, var(--_badge-akzent) 16%, var(--oo-color-surface));
    --_badge-ton-stark: color-mix(in oklch, var(--_badge-akzent) 28%, var(--oo-color-surface));
    --_badge-symbol: color-mix(in oklch, var(--_badge-akzent) 80%, var(--oo-color-text));
    background: var(--_badge-flaeche, var(--_badge-ton));
    border: none;
    border-radius: var(--oo-radius-sm);
    color: var(--oo-color-text);
    font-weight: 500;
    gap: 0.3em;
    /* Genau so hoch wie eine normale Badge; Striche oben/unten (Unterstrich, Reiter, Schiene …) gehen nach innen statt die Badge zu vergrößern */
    height: calc(1.3em + 2 * var(--oo-border-width));
    line-height: 1;
    padding: 0.1em 0.5em;
}

.oo-badge--geformt .oo-icon {
    color: var(--_badge-symbol);
}

.oo-badge--clickable.oo-badge--geformt:hover {
    background: var(--_badge-flaeche-hover, var(--_badge-ton-stark));
}

/* Getoent braucht keine eigene Regel: die getönte Fläche und die Textfarbe oben, der Radius kommt wie bei Standard aus dem Parameter */

/* Formen ohne eigene Fläche: beim Überfahren leicht getönt */
.oo-badge--punkt,
.oo-badge--ring,
.oo-badge--kachel,
.oo-badge--rahmenkachel,
.oo-badge--unterstrich,
.oo-badge--oberstrich,
.oo-badge--klammer,
.oo-badge--schiene,
.oo-badge--gestrichelt,
.oo-badge--gepunktet {
    --_badge-flaeche: transparent;
    --_badge-flaeche-hover: var(--_badge-ton);
}

/* Akzent: Farbstrich links; AkzentRechts: rechts */
.oo-badge--akzent {
    border-left: 3px solid var(--_badge-akzent);
    padding-left: 0.35em;
}

.oo-badge--akzentrechts {
    border-right: 3px solid var(--_badge-akzent);
    padding-right: 0.35em;
}

/* Pfeil: rechts spitz; PfeilLinks: links spitz */
.oo-badge--pfeil {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 50%, calc(100% - 0.55em) 100%, 0 100%);
    padding-right: 1em;
}

.oo-badge--pfeillinks {
    border-radius: 0;
    clip-path: polygon(0.55em 0, 100% 0, 100% 100%, 0.55em 100%, 0 50%);
    padding-left: 1em;
}

/* Schritt: links eingekerbt, rechts spitz; SchrittLinks: links spitz, rechts eingekerbt */
.oo-badge--schritt {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 50%, calc(100% - 0.55em) 100%, 0 100%, 0.55em 50%);
    padding-left: 0.95em;
    padding-right: 1em;
}

.oo-badge--schrittlinks {
    border-radius: 0;
    clip-path: polygon(0.55em 0, 100% 0, calc(100% - 0.55em) 50%, 100% 100%, 0.55em 100%, 0 50%);
    padding-left: 1em;
    padding-right: 0.95em;
}

/* Fahne: rechts eingekerbt wie ein Wimpel; FahneLinks: links eingekerbt */
.oo-badge--fahne {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%);
    padding-right: 1em;
}

.oo-badge--fahnelinks {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.5em 50%);
    padding-left: 1em;
}

/* Punkt, Ring, Kachel, Rahmenkachel: Symbol in eigener Form, Name ohne Hintergrund */
.oo-badge--punkt,
.oo-badge--ring,
.oo-badge--kachel,
.oo-badge--rahmenkachel {
    padding-block: 0;
    padding-left: 0;
}

.oo-badge--punkt .oo-icon,
.oo-badge--ring .oo-icon,
.oo-badge--kachel .oo-icon,
.oo-badge--rahmenkachel .oo-icon {
    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 0.85em;
    height: 1.4em;
    justify-content: center;
    width: 1.4em;
}

/* Voll: Punkt und Kachel */
.oo-badge--punkt .oo-icon,
.oo-badge--kachel .oo-icon {
    background: var(--_badge-akzent);
    color: var(--oo-color-surface);
}

/* Umrandet: Ring und Rahmenkachel */
.oo-badge--ring .oo-icon,
.oo-badge--rahmenkachel .oo-icon {
    border: 1.5px solid var(--_badge-akzent);
}

.oo-badge--punkt .oo-icon,
.oo-badge--ring .oo-icon {
    border-radius: var(--oo-radius-full);
}

.oo-badge--kachel .oo-icon,
.oo-badge--rahmenkachel .oo-icon {
    border-radius: var(--oo-radius-sm);
}

/* Geteilt: Symbol auf voller Farbe, Name getönt; GeteiltVoll: umgekehrt */
.oo-badge--geteilt,
.oo-badge--geteiltvoll {
    overflow: hidden;
    padding-left: 0;
}

.oo-badge--geteilt .oo-icon,
.oo-badge--geteiltvoll .oo-icon {
    align-self: stretch;
    align-items: center;
    display: inline-flex;
    margin-block: -0.1em;
    padding: 0 0.3em;
}

.oo-badge--geteilt .oo-icon {
    background: var(--_badge-akzent);
    color: var(--oo-color-surface);
}

.oo-badge--geteiltvoll {
    --_badge-flaeche: var(--_badge-akzent);
    --_badge-flaeche-hover: color-mix(in oklch, var(--_badge-akzent) 85%, black);
    color: var(--oo-color-surface);
}

.oo-badge--geteiltvoll .oo-icon {
    background: var(--_badge-ton);
}

/* Unterstrich: Linie unter dem Namen; Oberstrich: darüber */
.oo-badge--unterstrich,
.oo-badge--oberstrich {
    border-radius: 0;
    padding-inline: 0.15em;
}

.oo-badge--unterstrich {
    border-bottom: 2px solid var(--_badge-akzent);
}

.oo-badge--oberstrich {
    border-top: 2px solid var(--_badge-akzent);
}

/* Reiter: farbige Linie oben; Sockel: unten */
.oo-badge--reiter {
    border-radius: var(--oo-radius-sm) var(--oo-radius-sm) 0 0;
    border-top: 3px solid var(--_badge-akzent);
}

.oo-badge--sockel {
    border-bottom: 3px solid var(--_badge-akzent);
    border-radius: 0 0 var(--oo-radius-sm) var(--oo-radius-sm);
}

/* Ecke: farbiges Dreieck oben links; EckeUnten: unten rechts */
.oo-badge--ecke {
    background:
        linear-gradient(135deg, var(--_badge-akzent) 0 0.45em, transparent 0.45em),
        var(--_badge-ton);
    border-radius: 0;
    padding-left: 0.6em;
}

.oo-badge--clickable.oo-badge--ecke:hover {
    background:
        linear-gradient(135deg, var(--_badge-akzent) 0 0.45em, transparent 0.45em),
        var(--_badge-ton-stark);
}

.oo-badge--eckeunten {
    background:
        linear-gradient(-45deg, var(--_badge-akzent) 0 0.45em, transparent 0.45em),
        var(--_badge-ton);
    border-radius: 0;
    padding-right: 0.6em;
}

.oo-badge--clickable.oo-badge--eckeunten:hover {
    background:
        linear-gradient(-45deg, var(--_badge-akzent) 0 0.45em, transparent 0.45em),
        var(--_badge-ton-stark);
}

/* Klammer: farbige Klammern links und rechts; Schiene: Linien oben und unten */
.oo-badge--klammer {
    border: 2px solid var(--_badge-akzent);
    border-block: none;
    border-radius: 0.35em;
}

.oo-badge--schiene {
    border-block: 2px solid var(--_badge-akzent);
    border-radius: 0;
}

/* Gestrichelt und Gepunktet: unterbrochener Rahmen, wirkt vorläufig */
.oo-badge--gestrichelt {
    border: 1px dashed var(--_badge-akzent);
}

.oo-badge--gepunktet {
    border: 2px dotted var(--_badge-akzent);
}

/* Stapel: harter, versetzter Farbschatten; Vertieft: innerer Farbschatten oben links */
.oo-badge--stapel {
    box-shadow: 0.18em 0.18em 0 var(--_badge-akzent);
    margin-right: 0.18em;
    /* Fläche und Schatten zusammen mittig in der Zeile, sonst wirkt die Badge neben anderen nach unten verrutscht */
    transform: translate(-0.09em, -0.09em);
}

.oo-badge--vertieft {
    box-shadow: inset 0.18em 0.18em 0 var(--_badge-akzent);
    padding-left: 0.65em;
    padding-top: 0.25em;
}

/* ===== Weitere Formen =====
   --_badge-basis ist die getönte Grundfläche unter Verläufen; beim Überfahren klickbarer Badges wird sie kräftiger.
   Volle Formen nehmen die Kontrastschrift aus --_btn-text (HexColor bzw. ButtonStyle).
   ===================== */

.oo-badge--geformt {
    --_badge-basis: var(--_badge-ton);
    --_badge-voll-text: var(--_btn-text, var(--oo-color-surface));
    --_badge-voll-hover: color-mix(in oklch, var(--_badge-akzent) 85%, black);
}

.oo-badge--clickable.oo-badge--geformt:hover {
    --_badge-basis: var(--_badge-ton-stark);
}

/* Formen ohne eigene Fläche */
.oo-badge--winkel,
.oo-badge--kontur,
.oo-badge--doppelrahmen {
    --_badge-flaeche: transparent;
    --_badge-flaeche-hover: var(--_badge-ton);
}

/* Balken: dicker Strich links; BalkenRechts: rechts; Seitenstriche und Seitenbalken: beidseitig */
.oo-badge--balken,
.oo-badge--balkenrechts,
.oo-badge--seitenstriche,
.oo-badge--seitenbalken {
    border-radius: 0;
}

.oo-badge--balken {
    border-left: 6px solid var(--_badge-akzent);
    padding-left: 0.4em;
}

.oo-badge--balkenrechts {
    border-right: 6px solid var(--_badge-akzent);
    padding-right: 0.4em;
}

.oo-badge--seitenstriche {
    border-inline: 3px solid var(--_badge-akzent);
}

.oo-badge--seitenbalken {
    border-inline: 6px solid var(--_badge-akzent);
}

/* Pfeil-Varianten: rechts spitz */
.oo-badge--pfeilspitze,
.oo-badge--pfeilvoll,
.oo-badge--pfeilakzent,
.oo-badge--pfeilgeteilt {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 50%, calc(100% - 0.55em) 100%, 0 100%);
    padding-right: 1em;
}

/* PfeilSpitze: Spitze in voller Farbe */
.oo-badge--pfeilspitze,
.oo-badge--clickable.oo-badge--pfeilspitze:hover {
    background: linear-gradient(to left, var(--_badge-akzent) 0 0.8em, var(--_badge-basis) 0.8em);
}

.oo-badge--pfeilspitze {
    padding-right: 1.2em;
}

/* Volle Formen: Fläche in der Farbe, Schrift und Symbol in Kontrastfarbe */
.oo-badge--pfeilvoll,
.oo-badge--schrittvoll,
.oo-badge--fahnevoll {
    --_badge-flaeche: var(--_badge-akzent);
    --_badge-flaeche-hover: var(--_badge-voll-hover);
    color: var(--_badge-voll-text);
}

.oo-badge--pfeilvoll .oo-icon,
.oo-badge--schrittvoll .oo-icon,
.oo-badge--fahnevoll .oo-icon {
    color: inherit;
}

/* PfeilAkzent: Farbstrich links, Spitze rechts */
.oo-badge--pfeilakzent {
    border-left: 4px solid var(--_badge-akzent);
    padding-left: 0.4em;
}

/* PfeilGeteilt: Symbol auf voller Farbe mit eigener Spitze */
.oo-badge--pfeilgeteilt {
    padding-left: 0;
}

.oo-badge--pfeilgeteilt .oo-icon {
    align-items: center;
    align-self: stretch;
    background: var(--_badge-akzent);
    clip-path: polygon(0 0, calc(100% - 0.4em) 0, 100% 50%, calc(100% - 0.4em) 100%, 0 100%);
    color: var(--_badge-voll-text);
    display: inline-flex;
    margin-block: -0.1em;
    padding: 0 0.65em 0 0.3em;
}

/* SchrittVoll: Kettenglied in voller Farbe */
.oo-badge--schrittvoll {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 0.55em) 0, 100% 50%, calc(100% - 0.55em) 100%, 0 100%, 0.55em 50%);
    padding-left: 0.95em;
    padding-right: 1em;
}

/* Fahnen-Varianten: rechts eingekerbt */
.oo-badge--fahnevoll,
.oo-badge--fahnemast,
.oo-badge--fahneende {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.5em) 50%, 100% 100%, 0 100%);
    padding-right: 1em;
}

/* FahneMast: dicker Strich links wie ein Mast */
.oo-badge--fahnemast {
    border-left: 4px solid var(--_badge-akzent);
    padding-left: 0.4em;
}

/* FahneEnde: eingekerbtes Ende in voller Farbe */
.oo-badge--fahneende,
.oo-badge--clickable.oo-badge--fahneende:hover {
    background: linear-gradient(to left, var(--_badge-akzent) 0 0.85em, var(--_badge-basis) 0.85em);
}

.oo-badge--fahneende {
    padding-right: 1.25em;
}

/* Band: beidseitig eingekerbt; Sechseck: beidseitig spitz; Schraeg: Parallelogramm; Plakette: abgeschrägte Ecken; Anhaenger: Preisanhänger */
.oo-badge--band,
.oo-badge--sechseck,
.oo-badge--schraeg,
.oo-badge--plakette,
.oo-badge--anhaenger {
    border-radius: 0;
}

.oo-badge--band {
    clip-path: polygon(0 0, 100% 0, calc(100% - 0.45em) 50%, 100% 100%, 0 100%, 0.45em 50%);
    padding-inline: 0.9em;
}

.oo-badge--sechseck {
    clip-path: polygon(0.5em 0, calc(100% - 0.5em) 0, 100% 50%, calc(100% - 0.5em) 100%, 0.5em 100%, 0 50%);
    padding-inline: 0.85em;
}

.oo-badge--schraeg {
    clip-path: polygon(0.4em 0, 100% 0, calc(100% - 0.4em) 100%, 0 100%);
    padding-inline: 0.75em;
}

.oo-badge--plakette {
    clip-path: polygon(0.35em 0, calc(100% - 0.35em) 0, 100% 0.35em, 100% calc(100% - 0.35em), calc(100% - 0.35em) 100%, 0.35em 100%, 0 calc(100% - 0.35em), 0 0.35em);
    padding-inline: 0.6em;
}

.oo-badge--anhaenger,
.oo-badge--clickable.oo-badge--anhaenger:hover {
    background:
        radial-gradient(circle at 0.5em 50%, var(--oo-color-surface) 0 0.12em, transparent 0.14em),
        var(--_badge-basis);
}

.oo-badge--anhaenger {
    clip-path: polygon(0.5em 0, 100% 0, 100% 100%, 0.5em 100%, 0 50%);
    padding-left: 0.95em;
}

/* Winkel: farbige Ecken oben links und unten rechts */
.oo-badge--winkel {
    --_badge-winkel-grund: transparent;
    background:
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) top left / 0.55em 2px no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) top left / 2px 0.55em no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) bottom right / 0.55em 2px no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) bottom right / 2px 0.55em no-repeat,
        var(--_badge-winkel-grund);
    border-radius: 0;
}

.oo-badge--clickable.oo-badge--winkel:hover {
    --_badge-winkel-grund: var(--_badge-ton);
    background:
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) top left / 0.55em 2px no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) top left / 2px 0.55em no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) bottom right / 0.55em 2px no-repeat,
        linear-gradient(var(--_badge-akzent), var(--_badge-akzent)) bottom right / 2px 0.55em no-repeat,
        var(--_badge-winkel-grund);
}

/* Kontur: durchgehender Rahmen; Doppelrahmen: wie ein Stempel */
.oo-badge--kontur {
    border: 1.5px solid var(--_badge-akzent);
}

.oo-badge--doppelrahmen {
    border: 3px double var(--_badge-akzent);
    border-radius: 0;
}

/* Pille: rund mit zartem Rahmen */
.oo-badge--pille {
    border: 1px solid color-mix(in oklch, var(--_badge-akzent) 45%, transparent);
    border-radius: var(--oo-radius-full);
    padding-inline: 0.65em;
}

/* Leuchten: Rahmen mit farbigem Schein */
.oo-badge--leuchten {
    border: 1px solid var(--_badge-akzent);
    box-shadow: 0 0 0.45em color-mix(in oklch, var(--_badge-akzent) 55%, transparent);
}

/* Schwebend: heller Grund mit weichem Farbschatten */
.oo-badge--schwebend {
    --_badge-flaeche: var(--oo-color-surface);
    box-shadow: 0 0.12em 0.45em color-mix(in oklch, var(--_badge-akzent) 45%, transparent);
}

/* Verlauf: links kräftig, nach rechts auslaufend */
.oo-badge--verlauf,
.oo-badge--clickable.oo-badge--verlauf:hover {
    background: linear-gradient(90deg, color-mix(in oklch, var(--_badge-akzent) 45%, var(--oo-color-surface)), var(--_badge-basis) 60%, transparent);
}

.oo-badge--verlauf {
    border-radius: 0;
}

/* Schraffiert: schräge Streifen */
.oo-badge--schraffiert,
.oo-badge--clickable.oo-badge--schraffiert:hover {
    background: repeating-linear-gradient(-45deg, var(--_badge-basis) 0 0.3em, color-mix(in oklch, var(--_badge-akzent) 30%, var(--oo-color-surface)) 0.3em 0.45em);
}

/* Marker: untere Hälfte wie angestrichen */
.oo-badge--marker {
    background: linear-gradient(transparent 50%, color-mix(in oklch, var(--_badge-akzent) 40%, var(--oo-color-surface)) 50%);
    border-radius: 0;
    padding-inline: 0.2em;
}

.oo-badge--clickable.oo-badge--marker:hover {
    background: linear-gradient(transparent 25%, color-mix(in oklch, var(--_badge-akzent) 40%, var(--oo-color-surface)) 25%);
}

/* Dunkel: dunkler Grund, helle Schrift, Symbol in der Farbe */
.oo-badge--dunkel {
    --_badge-flaeche: color-mix(in oklch, var(--_badge-akzent) 12%, var(--oo-color-text));
    --_badge-flaeche-hover: color-mix(in oklch, var(--_badge-akzent) 30%, var(--oo-color-text));
    color: var(--oo-color-surface);
}

.oo-badge--dunkel .oo-icon {
    color: color-mix(in oklch, var(--_badge-akzent) 70%, var(--oo-color-surface));
}