/* ============================================================
   Wendewerk GKV Tools – UI-Standard
   Einzige Quelle für Header, Buttons, Formularfelder, Labels,
   Hinweise und Meldungen aller Tools.

   Wie es greift:
   - Jedes Tool trägt am Wurzelelement die Klasse .wwgt-tool.
   - Die Tools behalten ihre eigenen Klassennamen (wwgt-xx-btn--primary,
     wwgt-xx-input, wwgt-xx-hero …). Dieses Stylesheet erkennt sie am
     gemeinsamen Namensmuster und vereinheitlicht sie.
   - Es wird NACH den Tool-Stylesheets geladen (siehe
     Wendewerk_GKV_Tools::enqueue_ui_layer) und verdoppelt die
     Wurzelklasse, damit es Tool-Regeln mit gleicher Spezifität gewinnt.
   - Layout (Breite, Abstände zwischen Blöcken, Grids) bleibt Sache der Tools.
   ============================================================ */

/* ── Basis ──────────────────────────────────────────────────── */

.wwgt-tool {
    font-family: var(--wwgt-font);
    font-size: var(--wwgt-fs-base);
    line-height: var(--wwgt-lh-base);
    color: var(--wwgt-text);
    -webkit-font-smoothing: antialiased;
}

/* Überschriften und Fließtext verwenden immer die Tool-Schrift, nie die Theme-Schrift. */
.wwgt-tool :is(h1, h2, h3, h4, h5, h6, p, label, legend, button, input, select, textarea) {
    font-family: var(--wwgt-font);
}

.wwgt-tool *,
.wwgt-tool *::before,
.wwgt-tool *::after {
    box-sizing: border-box;
}

.wwgt-tool [hidden] {
    display: none !important;
}

.wwgt-tool :focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 2px;
}

/* ── Header (hell, ohne Verlauf, ohne Bild) ───────────────────
   Gilt für das Hero-Element jedes Tools (.wwgt-header) und seine
   Bestandteile. Hintergrundbilder und Overlays sind abgeschafft;
   das Shortcode-Attribut header_image wird ignoriert. */

.wwgt-tool.wwgt-tool .wwgt-header {
    position: relative;
    display: block;
    background: var(--wwgt-surface) none;
    background-image: none !important;
    border: 1px solid var(--wwgt-border);
    border-top: 4px solid var(--wwgt-primary);
    border-radius: var(--wwgt-radius-lg);
    box-shadow: none;
    padding: var(--wwgt-container-pad);
    margin-bottom: var(--wwgt-space-5);
    text-align: left;
    color: var(--wwgt-text);
    overflow: visible;
}

.wwgt-tool.wwgt-tool .wwgt-header__overlay {
    display: none !important;
}

.wwgt-tool.wwgt-tool .wwgt-header__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: auto;
}

.wwgt-tool.wwgt-tool .wwgt-header__eyebrow {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    margin: 0 0 var(--wwgt-space-2);
    color: var(--wwgt-primary-dark);
    font-size: var(--wwgt-fs-xs);
    font-weight: var(--wwgt-fw-bold);
    line-height: var(--wwgt-lh-tight);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.wwgt-tool.wwgt-tool .wwgt-header__title {
    margin: 0 0 var(--wwgt-space-2);
    padding-right: 96px; /* Platz für den Teilen-Button oben rechts */
    color: var(--wwgt-navy);
    font-size: var(--wwgt-fs-title);
    font-weight: var(--wwgt-fw-bold);
    line-height: var(--wwgt-lh-tight);
    letter-spacing: -.01em;
}

.wwgt-tool.wwgt-tool .wwgt-header__subtitle,
.wwgt-tool.wwgt-tool .wwgt-header__copy {
    margin: 0 0 var(--wwgt-space-4);
    max-width: 62ch;
    color: var(--wwgt-text-muted);
    font-size: var(--wwgt-fs-md);
    font-weight: var(--wwgt-fw-regular);
    line-height: var(--wwgt-lh-base);
}

.wwgt-tool.wwgt-tool .wwgt-header__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wwgt-space-2);
    margin: 0 0 var(--wwgt-space-4);
    padding: 0;
    justify-content: flex-start;
}

.wwgt-tool.wwgt-tool .wwgt-header__facts > *,
.wwgt-tool.wwgt-tool .wwgt-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--wwgt-surface-soft);
    border: 1px solid var(--wwgt-border);
    border-radius: var(--wwgt-radius-full);
    color: var(--wwgt-navy);
    font-size: var(--wwgt-fs-sm);
    font-weight: var(--wwgt-fw-medium);
    line-height: var(--wwgt-lh-tight);
}

.wwgt-tool.wwgt-tool .wwgt-header > :last-child {
    margin-bottom: 0;
}

/* Hauptcontainer direkt unter dem Header: eigene Karte mit vollem Rahmen und Radius.
   Früher saß er bündig am dunklen Hero und war oben eckig und ohne Rahmen. */
.wwgt-tool.wwgt-tool .wwgt-header + :is([class*="-body"], [class*="-panel"], [class*="-card"], [class*="-results"], [class*="__panel"], [class*="-form-section"]) {
    border: 1px solid var(--wwgt-border);
    border-radius: var(--wwgt-radius-lg);
    background-color: var(--wwgt-surface);
    margin-top: 0;
}

/* Hauptcontainer neben dem Header: gleicher Innenabstand wie der Header.
   Kleine Karten (CTA, KPI, Ergebnis-Kopf, Info) sind ausgenommen. */
.wwgt-tool.wwgt-tool .wwgt-header ~ :is([class*="-body"], [class*="-panel"], [class*="-results"], [class*="-form-section"], [class*="-card"], [class*="__panel"]):not([class*="cta"]):not([class*="kpi"]):not([class*="headline"]):not([class*="info"]):not([class*="context"]):not([class*="result-card"]) {
    padding: var(--wwgt-container-pad);
}

/* Teilen-Button im hellen Header: dunkle Variante. */
.wwgt-tool .wwgt-share--hero .wwgt-share__trigger {
    padding: 8px 14px;
    border: 1px solid var(--wwgt-control-border);
    border-radius: var(--wwgt-radius);
    background: var(--wwgt-surface);
    color: var(--wwgt-navy);
    font-size: 13px;
    font-weight: var(--wwgt-fw-semibold);
    line-height: 1.2;
}

.wwgt-tool .wwgt-share--hero .wwgt-share__trigger:hover {
    background: var(--wwgt-surface-soft);
    border-color: var(--wwgt-primary);
}

/* ── Buttons ──────────────────────────────────────────────────
   Erkannt werden <button>, <a> und input[type=submit|button], deren
   Klasse -btn oder -button enthält (wwgt-xx-btn, wwgt-xx-button--primary,
   wwgt-xx-btn-primary, wwgt-xx-primary-button, …). Wrapper (div, span)
   sind nie betroffen. Bausteine mit eigener Zustandslogik sind bewusst
   ausgenommen: Toggle, Segmented, Stepper, Steps, Intensity, Filter, Sort,
   Swipe, Grade, View, Hilfe-Icons, Icon-Buttons, Entfernen/Link-Buttons.
   Varianten: primary (gefüllt), secondary/outline/soft (Standard, umrandet),
   ghost (ohne Rahmen). Größen: --small/--sm, Breite: --full/--block/--wide. */

.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="-btn"], [class*="-button"], [class*="cta-card__btn"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wwgt-space-2);
    min-height: var(--wwgt-control-h);
    padding: 0 var(--wwgt-space-5) !important;
    border: 1px solid var(--wwgt-primary) !important;
    border-radius: var(--wwgt-radius) !important;
    background: var(--wwgt-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--wwgt-navy) !important;
    font-family: inherit;
    font-size: var(--wwgt-fs-base) !important;
    font-weight: var(--wwgt-fw-semibold) !important;
    line-height: var(--wwgt-lh-tight);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none !important;
    text-transform: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="-btn"], [class*="-button"], [class*="cta-card__btn"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):hover {
    background: var(--wwgt-primary-light) !important;
    border-color: var(--wwgt-primary-dark) !important;
    color: var(--wwgt-navy) !important;
    text-decoration: none !important;
}

/* Primär: gefüllt */
.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--primary"], [class*="-btn-primary"], [class*="primary-button"], [class*="--calc"], [class*="--go"], [class*="--hero"], [class*="-btn-termin"], [class*="calc-btn"]:not([class*="--secondary"])):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]) {
    background: var(--wwgt-btn-primary-bg) !important;
    border-color: var(--wwgt-btn-primary-bg) !important;
    color: var(--wwgt-btn-primary-fg) !important;
}

.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--primary"], [class*="-btn-primary"], [class*="primary-button"], [class*="--calc"], [class*="--go"], [class*="--hero"], [class*="-btn-termin"], [class*="calc-btn"]:not([class*="--secondary"])):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):hover {
    background: var(--wwgt-btn-primary-bg-hover) !important;
    border-color: var(--wwgt-btn-primary-bg-hover) !important;
    color: var(--wwgt-btn-primary-fg) !important;
}

/* Ghost: ohne Rahmen */
.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--ghost"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]) {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--wwgt-navy) !important;
}

.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--ghost"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):hover {
    background: var(--wwgt-surface-soft) !important;
    border-color: transparent !important;
}

/* Klein */
.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--small"], [class*="--sm"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]) {
    min-height: var(--wwgt-control-h-sm);
    padding: 0 var(--wwgt-space-4) !important;
    font-size: var(--wwgt-fs-sm) !important;
}

/* Volle Breite */
.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="--full"], [class*="--block"], [class*="--wide"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]) {
    display: flex;
    width: 100%;
}

/* Deaktiviert */
.wwgt-tool.wwgt-tool :is(button, input[type="submit"], input[type="button"]):is([class*="-btn"], [class*="-button"], [class*="cta-card__btn"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):disabled,
.wwgt-tool.wwgt-tool :is(button, a):is([class*="-btn"], [class*="-button"], [class*="cta-card__btn"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):is([class*="--disabled"], [aria-disabled="true"]) {
    opacity: .5 !important;
    cursor: not-allowed;
    pointer-events: none;
}

.wwgt-tool.wwgt-tool :is(button, a, input[type="submit"], input[type="button"]):is([class*="-btn"], [class*="-button"], [class*="cta-card__btn"]):not([class*="toggle"]):not([class*="segmented"]):not([class*="stepper"]):not([class*="steps"]):not([class*="intensity"]):not([class*="filter"]):not([class*="sort"]):not([class*="swipe"]):not([class*="grade"]):not([class*="view"]):not([class*="help"]):not([class*="icon"]):not([class*="remove"]):not([class*="link-btn"]):not([class*="status"]):not([class*="placeholder"]):not([class*="snippet"]):not([class*="info-btn"]):not([class*="quick"]):not([class*="add-btn"]):not([class*="bulk-btn"]):not([class*="test-btn"]):not([class*="chip"]):not([class*="qbtn"]):not([class*="share"]):focus-visible {
    outline: none;
    box-shadow: var(--wwgt-focus-ring) !important;
}

/* ── Formularfelder ───────────────────────────────────────────
   Textfelder, Auswahlfelder und Textareas. Checkbox, Radio, Range,
   Datei und versteckte Felder behalten ihre eigene Darstellung
   (viele Tools zeichnen sie als Karten oder Schalter). */

.wwgt-tool.wwgt-tool :is(
    input:not([type]),
    input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
    input[type="date"], input[type="search"], input[type="password"], input[type="url"],
    input[type="month"], input[type="time"],
    select, textarea
):not([class*="slider"]):not([class*="range"]) {
    display: block;
    width: 100%;
    min-height: var(--wwgt-control-h) !important;
    padding: 0 var(--wwgt-space-3) !important;
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: var(--wwgt-radius) !important;
    background-color: var(--wwgt-surface) !important;
    box-shadow: none !important;
    color: var(--wwgt-navy) !important;
    font-family: inherit !important;
    font-size: var(--wwgt-fs-base) !important;
    font-weight: var(--wwgt-fw-regular) !important;
    line-height: var(--wwgt-lh-tight) !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.wwgt-tool.wwgt-tool select:not([multiple]):not([hidden]):not([hidden]):not([hidden]):not([hidden]) {
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 40px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool textarea {
    min-height: 96px !important;
    padding: var(--wwgt-space-3) !important;
    line-height: var(--wwgt-lh-base) !important;
    resize: vertical;
}

.wwgt-tool.wwgt-tool :is(input, select, textarea)::placeholder {
    color: var(--wwgt-text-soft) !important;
    opacity: 1 !important;
}

.wwgt-tool.wwgt-tool :is(
    input:not([type]),
    input[type="text"], input[type="number"], input[type="email"], input[type="tel"],
    input[type="date"], input[type="search"], input[type="password"], input[type="url"],
    input[type="month"], input[type="time"],
    select, textarea
):not([class*="slider"]):not([class*="range"]):focus {
    outline: none;
    border-color: var(--wwgt-primary) !important;
    box-shadow: var(--wwgt-focus-ring) !important;
}

.wwgt-tool.wwgt-tool :is(input, select, textarea):disabled {
    background-color: var(--wwgt-surface-soft) !important;
    color: var(--wwgt-text-muted) !important;
    cursor: not-allowed;
}

.wwgt-tool.wwgt-tool :is(input, select, textarea)[aria-invalid="true"],
.wwgt-tool.wwgt-tool :is(input, select, textarea).is-invalid {
    border-color: var(--wwgt-danger) !important;
}

.wwgt-tool.wwgt-tool :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--wwgt-primary);
}

/* Datums- und Zeitfelder: Text vertikal mittig, einheitliche Schriftfarbe. */
.wwgt-tool.wwgt-tool :is(input[type="date"], input[type="time"], input[type="month"], input[type="datetime-local"]) {
    display: flex !important;
    align-items: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--wwgt-lh-tight) !important;
}

.wwgt-tool.wwgt-tool input::-webkit-datetime-edit {
    padding: 0;
    color: var(--wwgt-navy) !important;
}

.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-day-field,
.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-month-field,
.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-year-field,
.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-hour-field,
.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-minute-field,
.wwgt-tool.wwgt-tool input::-webkit-datetime-edit-text {
    padding: 0 1px;
    color: var(--wwgt-navy) !important;
}

.wwgt-tool.wwgt-tool input::-webkit-calendar-picker-indicator {
    opacity: .6;
    cursor: pointer;
}

/* Zahlenfelder: native Spinner-Pfeile ausblenden (sie überlagern Suffixe wie "€"). */
.wwgt-tool.wwgt-tool input[type="number"] {
    -moz-appearance: textfield !important;
}

.wwgt-tool.wwgt-tool input[type="number"]::-webkit-outer-spin-button,
.wwgt-tool.wwgt-tool input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* ── Auswahl-Buttons (Toggle / Segmented) ─────────────────────
   Einfache Auswahl-Buttons ohne Unterelemente ("1 Kurs" / "2 Kurse",
   "Ja" / "Nein") haben dieselbe Höhe wie die Eingabefelder und denselben
   Aktiv-Zustand. Buttons mit Unterzeile oder Icon (Karten) behalten ihr
   eigenes Layout. */

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):not(:has(> :not([class*="__label"]))) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--wwgt-control-h);
    min-height: var(--wwgt-control-h) !important;
    padding: 0 var(--wwgt-space-3) !important;
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: var(--wwgt-radius) !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    color: var(--wwgt-navy) !important;
    font-family: inherit;
    font-size: var(--wwgt-fs-base) !important;
    font-weight: var(--wwgt-fw-semibold) !important;
    line-height: var(--wwgt-lh-tight);
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):not(:has(> :not([class*="__label"]))):hover {
    border-color: var(--wwgt-primary) !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):not(:has(> :not([class*="__label"]))):is(.is-active, [class*="--active"], [aria-checked="true"], [aria-pressed="true"]) {
    background: var(--wwgt-btn-primary-bg) !important;
    border-color: var(--wwgt-btn-primary-bg) !important;
    color: var(--wwgt-btn-primary-fg) !important;
}

/* ── Auswahl-Karten (Toggle mit Titel und Unterzeile) ─────────
   Flach: dünner Rahmen, kein Schatten, kein Glow. Aktiv: blauer Rahmen
   und helle Fläche. */

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):has(> :not([class*="__label"])) {
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: var(--wwgt-radius) !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    outline: none;
    color: var(--wwgt-navy) !important;
    cursor: pointer;
    transform: none !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):has(> :not([class*="__label"])):hover {
    border-color: var(--wwgt-primary) !important;
    box-shadow: none !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):has(> :not([class*="__label"])):is(.is-active, [class*="--active"], [aria-checked="true"], [aria-pressed="true"]) {
    border-color: var(--wwgt-primary) !important;
    background: var(--wwgt-primary-light) !important;
    box-shadow: none !important;
    color: var(--wwgt-navy) !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):has(> :not([class*="__label"])):focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 2px;
}

/* Titel und Unterzeile in der Karte: feste Farben, auch im aktiven Zustand lesbar. */
.wwgt-tool.wwgt-tool :is([class*="toggle-btn__label"], [class*="toggle__btn-label"]) {
    color: var(--wwgt-navy) !important;
}

.wwgt-tool.wwgt-tool :is([class*="toggle-btn__sub"], [class*="toggle__btn-sub"]) {
    color: var(--wwgt-text-muted) !important;
}

/* ── Auswahl-Karten: Pflegegrad, Intensität, Typ ──────────────
   Karten-Buttons mit mehrzeiligem Inhalt (grade-btn, intensity-btn,
   type-card): flach, ohne Schatten oder Glow. Aktiv: blauer Rahmen
   auf heller Fläche. */

.wwgt-tool.wwgt-tool :is(button, [role="radio"], [role="button"]):is([class*="grade-btn"], [class*="intensity-btn"], [class*="type-card"]):not([class*="__"]) {
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: var(--wwgt-radius) !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    outline: none;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"], [role="button"]):is([class*="grade-btn"], [class*="intensity-btn"], [class*="type-card"]):not([class*="__"]):hover {
    border-color: var(--wwgt-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"], [role="button"]):is([class*="grade-btn"], [class*="intensity-btn"], [class*="type-card"]):not([class*="__"]):is(.is-active, .is-selected, [class*="--active"], [class*="--selected"], [aria-checked="true"], [aria-pressed="true"]) {
    border-color: var(--wwgt-primary) !important;
    background: var(--wwgt-primary-light) !important;
    box-shadow: none !important;
}

.wwgt-tool.wwgt-tool :is(button, [role="radio"], [role="button"]):is([class*="grade-btn"], [class*="intensity-btn"], [class*="type-card"]):not([class*="__"]):focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 2px;
}

/* Pflegegrad-Ziffer: immer Blau, auch im aktiven Zustand. */
.wwgt-tool.wwgt-tool [class*="grade-btn__num"] {
    color: var(--wwgt-primary) !important;
}

/* ── Gruppen von Auswahl-Buttons ──────────────────────────────
   Die Schale um mehrere Buttons (Rahmen, Hintergrund, abgeschnittene Ecken)
   entfällt; jeder Button steht für sich, mit gleichem Abstand dazwischen. */

.wwgt-tool.wwgt-tool :is(div, span):has(> :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="segmented__btn"], [class*="toggle-btn"])) {
    gap: var(--wwgt-space-2) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Label im einfachen Toggle: gleiche Schrift wie der Button. */
.wwgt-tool.wwgt-tool :is(button, [role="radio"]):is([class*="toggle__btn"], [class*="toggle-btn"], [class*="segmented__btn"]):not(:has(> :not([class*="__label"]))) > [class*="__label"] {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* ── Stepper (− 0 +) ──────────────────────────────────────────
   Gleiche Höhe wie die Eingabefelder, ein gemeinsamer Rahmen. */

.wwgt-tool.wwgt-tool [class*="-stepper"]:not([class*="__"]) {
    display: inline-flex;
    align-items: stretch;
    height: var(--wwgt-control-h);
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: var(--wwgt-radius) !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    overflow: hidden;
}

.wwgt-tool.wwgt-tool [class*="stepper__btn"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--wwgt-control-h) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wwgt-primary) !important;
    font-size: 20px !important;
    font-weight: var(--wwgt-fw-bold) !important;
    line-height: 1;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool [class*="stepper__btn"]:hover {
    background: var(--wwgt-primary-light) !important;
}

.wwgt-tool.wwgt-tool [class*="stepper__val"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: auto !important;
    padding: 0 var(--wwgt-space-3) !important;
    border-left: 1px solid var(--wwgt-control-border) !important;
    border-right: 1px solid var(--wwgt-control-border) !important;
    color: var(--wwgt-navy) !important;
    font-size: var(--wwgt-fs-base) !important;
    font-weight: var(--wwgt-fw-semibold) !important;
    line-height: 1 !important;
}

/* ── Schieberegler (range) ────────────────────────────────────
   Flach: hellgraue Bahn, blauer Kreis, keine Schatten, Rahmen oder
   Hover-Effekte, keine Füllung links vom Kreis. Gilt für jedes
   input[type=range] in einem Tool, unabhängig von der Tool-Klasse. */

.wwgt-tool.wwgt-tool input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block;
    width: 100%;
    height: 24px !important;
    min-height: 0 !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
    accent-color: var(--wwgt-primary);
}

.wwgt-tool.wwgt-tool input[type="range"]::-webkit-slider-runnable-track {
    height: 6px !important;
    border: 0 !important;
    border-radius: var(--wwgt-radius-full) !important;
    background: var(--wwgt-border) !important;
    box-shadow: none !important;
}

.wwgt-tool.wwgt-tool input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: -7px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wwgt-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool input[type="range"]::-moz-range-track {
    height: 6px !important;
    border: 0 !important;
    border-radius: var(--wwgt-radius-full) !important;
    background: var(--wwgt-border) !important;
    box-shadow: none !important;
}

.wwgt-tool.wwgt-tool input[type="range"]::-moz-range-progress {
    height: 6px !important;
    border-radius: var(--wwgt-radius-full) !important;
    background: transparent !important;
}

.wwgt-tool.wwgt-tool input[type="range"]::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    box-sizing: border-box;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wwgt-primary) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool input[type="range"]:hover::-webkit-slider-thumb,
.wwgt-tool.wwgt-tool input[type="range"]:active::-webkit-slider-thumb,
.wwgt-tool.wwgt-tool input[type="range"]:focus::-webkit-slider-thumb {
    background: var(--wwgt-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.wwgt-tool.wwgt-tool input[type="range"]:hover::-moz-range-thumb,
.wwgt-tool.wwgt-tool input[type="range"]:active::-moz-range-thumb,
.wwgt-tool.wwgt-tool input[type="range"]:focus::-moz-range-thumb {
    background: var(--wwgt-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Tastaturfokus bleibt sichtbar (Barrierefreiheit), aber ohne Glow am Kreis. */
.wwgt-tool.wwgt-tool input[type="range"]:focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 4px;
}

/* ── Info-Link („i  Leistungsbeschreibung“) ──────────────────
   Reiner Textlink mit rundem Info-Symbol: kein Hintergrund, kein Schatten,
   kein Hover-Effekt (das Theme färbt Buttons sonst ein und setzt Schatten). */

.wwgt-tool.wwgt-tool button[class*="info-link"] {
    display: inline-flex;
    align-items: center;
    gap: var(--wwgt-space-3);
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wwgt-text-muted) !important;
    font-size: var(--wwgt-fs-sm) !important;
    font-weight: var(--wwgt-fw-semibold) !important;
    text-decoration: none !important;
    transform: none !important;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool button[class*="info-link"]:hover,
.wwgt-tool.wwgt-tool button[class*="info-link"]:active,
.wwgt-tool.wwgt-tool button[class*="info-link"]:focus {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wwgt-text-muted) !important;
    text-decoration: none !important;
    transform: none !important;
}

.wwgt-tool.wwgt-tool button[class*="info-link"]:focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 4px;
}

.wwgt-tool.wwgt-tool [class*="info-link__icon"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--wwgt-primary) !important;
    font-size: var(--wwgt-fs-sm) !important;
    font-style: normal !important;
    font-weight: var(--wwgt-fw-bold) !important;
    line-height: 1;
}

/* ── Hilfe-Button („?“) ────────────────────────────────────────
   Kleiner runder Button neben einem Feld: hellgrauer Rahmen, weißer Grund,
   keine Füllung durch das Theme, kein Schatten. Hover: blauer Rahmen. */

.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--wwgt-control-border) !important;
    border-radius: 50% !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    color: var(--wwgt-text-muted) !important;
    font-size: var(--wwgt-fs-xs) !important;
    font-weight: var(--wwgt-fw-bold) !important;
    line-height: 1;
    text-decoration: none !important;
    transform: none !important;
    cursor: pointer;
}

.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"]):hover,
.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"]):focus,
.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"]):active,
.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"])[aria-expanded="true"] {
    border-color: var(--wwgt-primary) !important;
    background: var(--wwgt-surface) !important;
    box-shadow: none !important;
    color: var(--wwgt-primary) !important;
}

.wwgt-tool.wwgt-tool button[class*="help-btn"]:not([class*="__"]):focus-visible {
    outline: 2px solid var(--wwgt-primary);
    outline-offset: 2px;
}

/* ── Labels ───────────────────────────────────────────────────
   Feldbeschriftungen (<label class="…-label|…__label"> und <legend>).
   Karten-, Schalter- und Auswahllabels (checkbox, radio, toggle, option,
   card) behalten ihr eigenes Layout. */

.wwgt-tool.wwgt-tool label:is([class*="-label"], [class*="__label"]):not([class*="checkbox"]):not([class*="radio"]):not([class*="toggle"]):not([class*="option"]):not([class*="card"]):not([class*="check"]):not(.screen-reader-text),
.wwgt-tool.wwgt-tool legend {
    display: block;
    margin-bottom: var(--wwgt-space-2);
    padding: 0;
    color: var(--wwgt-navy);
    font-size: var(--wwgt-fs-sm);
    font-weight: var(--wwgt-fw-semibold);
    line-height: var(--wwgt-lh-tight);
    letter-spacing: 0;
    text-transform: none;
}

/* ── Hinweis- und Hilfetexte ──────────────────────────────── */

.wwgt-tool.wwgt-tool :is([class$="__hint"], [class$="-hint"], [class$="__note"], [class$="-note"], [class$="__help"], [class$="__helper"]):not(.wwgt-disclaimer__text) {
    color: var(--wwgt-text-muted);
    font-size: var(--wwgt-fs-sm);
    font-weight: var(--wwgt-fw-regular);
    line-height: var(--wwgt-lh-base);
}

/* ── Meldungen (alert, feedback) ──────────────────────────────
   Varianten: --info (Standard), --success, --warning, --danger/--error. */

.wwgt-tool.wwgt-tool :is([class$="-alert"], [class*="-alert--"], [class*="-feedback--"]) {
    padding: var(--wwgt-space-3) var(--wwgt-space-4);
    border: 1px solid var(--wwgt-border);
    border-left-width: 4px;
    border-radius: var(--wwgt-radius);
    background: var(--wwgt-surface-blue);
    color: var(--wwgt-navy);
    font-size: var(--wwgt-fs-sm);
    line-height: var(--wwgt-lh-base);
}

.wwgt-tool.wwgt-tool :is([class*="-alert--info"], [class*="-feedback--info"]) {
    border-color: var(--wwgt-primary);
    background: var(--wwgt-surface-blue);
}

.wwgt-tool.wwgt-tool [class*="-alert--success"] {
    border-color: var(--wwgt-success);
    background: var(--wwgt-success-bg);
}

.wwgt-tool.wwgt-tool [class*="-alert--warning"] {
    border-color: var(--wwgt-warning);
    background: var(--wwgt-warning-bg);
}

.wwgt-tool.wwgt-tool :is([class*="-alert--danger"], [class*="-alert--error"], [class*="-feedback--error"]) {
    border-color: var(--wwgt-danger);
    background: var(--wwgt-danger-bg);
}

/* ── Fließtext-Links ──────────────────────────────────────── */

.wwgt-tool p a:not([class*="-btn"]):not([class*="-button"]) {
    color: var(--wwgt-primary-dark) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.wwgt-tool p a:not([class*="-btn"]):not([class*="-button"]):hover {
    color: var(--wwgt-navy) !important;
}

/* ── Bewegung reduzieren ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .wwgt-tool * {
        transition: none !important;
    }
}

/* ── Schmale Bildschirme ──────────────────────────────────── */

@media (max-width: 600px) {
    .wwgt-tool.wwgt-tool .wwgt-header {
        padding: var(--wwgt-container-pad-sm);
    }

    .wwgt-tool.wwgt-tool .wwgt-header ~ :is([class*="-body"], [class*="-panel"], [class*="-results"], [class*="-form-section"], [class*="-card"], [class*="__panel"]):not([class*="cta"]):not([class*="kpi"]):not([class*="headline"]):not([class*="info"]):not([class*="context"]):not([class*="result-card"]) {
        padding: var(--wwgt-container-pad-sm);
    }

    .wwgt-tool.wwgt-tool .wwgt-header__title {
        padding-right: 0;
        padding-top: 44px; /* Teilen-Button sitzt oben rechts über dem Titel */
    }

    .wwgt-tool.wwgt-tool .wwgt-header__subtitle,
    .wwgt-tool.wwgt-tool .wwgt-header__copy {
        font-size: var(--wwgt-fs-base);
    }
}