/* ============================================================
   Bausteinlager „Deine neue Webseite" — fuellknopf.css (31.10.2026)
   Copyright ONLINE NETWORK VISION S.L. · Kennung dnw-baustein-fuellknopf-20261031 · eigene Umsetzung, kein fremder Code
   Glasknopf für Auswahlen (Checkbox oder Radio): beim Antippen steigt Farbe wie Flüssigkeit von unten hoch, mit einer
   Welle an der Oberfläche, die kurz schwappt und dann ruhig wird. Abwählen lässt sie wieder ablaufen.
   EINBAU:  <label class="fuellknopf"><input type="checkbox" name="interesse" value="Gesicht"><span class="fu-text">Gesicht</span></label>
   Fassung 2: vorhandene Auswahl-Knöpfe: <div data-fuellwahl="an"><button …>…</button>…</div> (Zustand setzt die Seite als Klasse „an“)
   Farben: --fu-farbe (Flüssigkeit, Standard --signal), --fu-glas, --fu-text, --fu-text-voll (Schrift auf der Farbe).
   REGELN: echtes <input> bleibt drin (Formular, Tastatur, Vorleser), kein transform auf Text, Trefferfläche ≥ 44 px.
   ============================================================ */
.fuellknopf{--fu-farbe:var(--signal,#306CC0);--fu-glas:rgba(255,255,255,.66);--fu-text:var(--tinte,#14213A);--fu-text-voll:#fff;--fu-zeit:.95s;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:999px;overflow:hidden;cursor:pointer;
  color:var(--fu-text);font-weight:600;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 0 0 1px rgba(20,30,40,.14),0 10px 22px -16px rgba(10,20,30,.5)}
.fuellknopf::before{content:"";position:absolute;inset:0;z-index:-3;background:var(--fu-glas);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.fuellknopf input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fuellknopf .fu-zeichen{position:relative;width:20px;height:20px;flex:none;border-radius:50%;border:2px solid currentColor;transition:border-color var(--fu-zeit),background-color var(--fu-zeit)}
.fuellknopf .fu-zeichen::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--fu-farbe);border-width:0 2.5px 2.5px 0;rotate:45deg;scale:0;transition:scale .3s .25s cubic-bezier(.3,1.6,.5,1)}
.fuellknopf .fu-text{position:relative;white-space:nowrap;transition:color calc(var(--fu-zeit) * .5) calc(var(--fu-zeit) * .35)}
.fuellknopf .fu-fluessig{position:absolute;left:0;right:0;bottom:0;height:140%;z-index:-2;overflow:hidden;pointer-events:none;translate:0 100%;transition:translate var(--fu-zeit) cubic-bezier(.55,0,.25,1)}
.fuellknopf .fu-fluessig::before{content:"";position:absolute;inset:14px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.12)),var(--fu-farbe)}
.fuellknopf .fu-welle{position:absolute;left:0;top:0;width:200%;height:16px;color:var(--fu-farbe)}
.fuellknopf .fu-welle path{fill:currentColor}
.fuellknopf:has(input:checked) .fu-fluessig{translate:0 0}
.fuellknopf:has(input:checked) .fu-text{color:var(--fu-text-voll)}
.fuellknopf:has(input:checked) .fu-zeichen{border-color:#fff;background-color:#fff}
.fuellknopf:has(input:checked) .fu-zeichen::after{scale:1}
.fuellknopf.-schwappt .fu-welle{animation:fu-schwapp 1.1s ease-out 1}
@keyframes fu-schwapp{from{translate:0 0}to{translate:-50% 0}}
.fuellknopf:has(input:focus-visible){outline:3px solid var(--fu-farbe);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fuellknopf .fu-fluessig,.fuellknopf .fu-text,.fuellknopf .fu-zeichen,.fuellknopf .fu-zeichen::after{transition:none}.fuellknopf.-schwappt .fu-welle{animation:none}}

/* ---- Fassung 2: vorhandene Auswahl-Knöpfe (<button>) – Zustand -voll setzt fuellknopf.js aus der Klasse der Seite ---- */
.fuellknopf.-knopf{border:0;font:inherit;font-weight:600;text-align:left;line-height:1.25;transition:color calc(var(--fu-zeit) * .5) calc(var(--fu-zeit) * .35)}
.fuellknopf.-knopf.-voll{color:var(--fu-text-voll)}
.fuellknopf.-knopf.-voll .fu-fluessig{translate:0 0}
.fuellknopf.-knopf.-voll .fu-zeichen{border-color:#fff;background-color:#fff}
.fuellknopf.-knopf.-voll .fu-zeichen::after{scale:1}
.fuellknopf.-knopf:focus-visible{outline:3px solid var(--fu-farbe);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fuellknopf.-knopf{transition:none}}