/* kv-knopf.css — EINE Tastensprache für Klimavergleich.at. Eingebunden direkt nach kv.css auf allen Seiten.
   Stand D2-s (Fabio 28.10., Mockup .work/mockups/p58-knoepfe-2/, offen.md 61): „Nur die Fase“ — derselbe freigestellte
   3D-Render wie bisher (taste-alpha-normal/-hover/-aktiv.webp, Slice 60 62 66 56), aber dünner gezeichnet und mit einer
   Maske, die in Ruhe NUR die Fase stehen lässt: keine Fläche, kein Schlagschatten, Icon und Text stehen auf dem Seitengrund.
     ruhend      nur Fase
     überfahren  Schatten kommt, Fläche halb
     gedrückt / gewählt  ganze Taste (Render „aktiv“) → gewählt heißt: die Taste ist ausgefüllt
     gesperrt    nur Fase, Schrift und Icon grau
     auf Ink (.kv-dunkel)  immer die ganze Taste (dunkle Schrift auf Ink wäre sonst unlesbar)
   Fabio 28.10.: die vier Einstiegstasten bleiben groß wie D2, ALLES andere leiser (niedriger, kleinere Schrift, schmalere Fase).
   Höhen (Desktop / Handy):
     Einstieg 56 / 50 · Auswahl (Chip, Quadrat, o-btn) 34 / 36 · Hauptaktion 40 · Nebenaktion 36 · Leiste 30 · Abschluss 46
   Unter 44 px erweitert ein unsichtbares ::before die Trefferfläche auf 44 px (wie .krb in kv-plan.css).

   Bausteine (Präfix .kv-knopf, Gruppen .kv-knoepfe / .kv-tasten):
     .kv-knopf                 Grundkörper = Nebenaktion. Alias .kv-knopf--zweit
     .kv-knopf--primaer        Hauptaktion (Weiter, Anfrage), optional Unterzeile
     .kv-knopf--text           Textaktion ohne Körper, ohne Unterstrich
     .kv-knopf--nav            Leiste „Anfrage starten“ (Desktop ≥ 1100 px)
     .kv-knopf--gross          Abschluss am Seitenende
     .kv-knopf--einstieg       die vier Einstiegstasten (.hero-card)
     .kv-knopf--voll           volle Breite
     Auswahl, gleicher Körper:
     .kv-knopf--chip           Textauswahl, Inhalt mittig
     .kv-knopf--quadrat        Quadrat (geraet-btn 1–5, wzb-btn −/+)
     .kv-knopf--karte          Block, Inhalt untereinander (wz-seg-card)
     .kv-knopf--klein          Cookie-Tasten auf Ink (ck-btn)
   Teile: .kv-knopf__ic (Icon), .kv-knopf__txt > b + small
   Technik: zwei Verläufe (senkrecht + waagrecht) als Maske über ::after, vereinigt. Je Verlauf von außen nach innen:
   Schattenzone (--kk-aus) · Fase deckend · Übergang · Fläche (--kk-face). Beide sind als <number> registriert und blenden
   weich. ::after liegt um --kk-bo größer (inset negativ) statt border-image-outset, damit die Maske den Schatten erfasst.
   Zonen (--kk-ot/ob/ox = Außenkante der Fase, --kk-mt/mb/mx = Innenkante) passen zu --kk-bw; wer --kk-bw überschreibt,
   muss die Zonen mitziehen. Browser ohne @property zeigen die Zustände ohne Überblenden. */

@property --kk-face{syntax:'<number>';inherits:true;initial-value:0}
@property --kk-aus{syntax:'<number>';inherits:true;initial-value:0}

:root{
  --kk-slice:60 62 66 56 fill;
  --kk-bw-l:20px 21px 22px 19px;   --kk-bo-l:8px;    /* Einstieg */
  --kk-bw-m:17px 17px 18px 16px;   --kk-bo-m:7px;    /* Einstieg am Handy */
  --kk-bw-s:14px 15px 16px 13px;   --kk-bo-s:6px;    /* Cookie-Tasten auf Ink */
  --kk-bw-a:12px 12px 13px 11px;   --kk-bo-a:5px;    /* Hauptaktion, Abschluss */
  --kk-bw-n:11px 11px 12px 10px;   --kk-bo-n:4px;    /* Nebenaktion, Auswahl, Leiste, Karte */
  --kk-img:url(/img/3d/taste-alpha-normal.webp);
  --kk-img-hover:url(/img/3d/taste-alpha-hover.webp);
  --kk-img-aktiv:url(/img/3d/taste-alpha-aktiv.webp);
  --kk-grau:#959CA6;
  --ka-h-wahl:34px;--ka-h-haupt:40px;--ka-h-neben:36px;--ka-h-nav:30px;--ka-h-gross:46px;
  --ka-fs:var(--fs-md,14px);--ka-fs-wahl:13px;--ka-fs-nav:12.5px;--ka-fs-gross:var(--fs-md,14px);
  --ka-ic:15px;--ka-ic-wahl:15px;--ka-ic-gross:18px;
  --ka-r:9px;--ka-r-wahl:8px;
  --ka-gap-wahl:8px;--ka-feld:44px;
  --ka-schatten:.45;
}
@media (max-width:640px){:root{--ka-h-wahl:36px;--kk-bw-l:var(--kk-bw-m);--kk-bo-l:var(--kk-bo-m)}}

/* ══ Körper (= Nebenaktion) ══ */
.kv-knopf{
  --kk-r:var(--ka-r-wahl);--kk-bw:var(--kk-bw-n);--kk-bo:var(--kk-bo-n);--kk-bild:var(--kk-img);--kk-ic:var(--ink,#1C2B3A);
  --kk-face:0;--kk-aus:0;--kk-fade:5px;
  --kk-ot:3px;--kk-ob:4px;--kk-ox:3px;--kk-mt:5px;--kk-mb:6px;--kk-mx:5px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:flex-start;gap:8px;
  min-height:var(--ka-h-neben);padding:0 16px 0 12px;margin:0;box-sizing:border-box;
  font:600 var(--ka-fs)/1.25 var(--f,'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);letter-spacing:var(--tr-normal,-0.005em);color:var(--ink,#1C2B3A);
  text-decoration:none;text-align:left;white-space:nowrap;cursor:pointer;
  background:none;border:0;border-radius:var(--kk-r);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform .2s var(--ease-smooth,cubic-bezier(.4,0,.2,1)),--kk-face .24s var(--ease-smooth,cubic-bezier(.4,0,.2,1)),--kk-aus .24s var(--ease-smooth,cubic-bezier(.4,0,.2,1))}
.kv-knopf[hidden]{display:none}
.kv-knopf::after{content:"";position:absolute;inset:calc(var(--kk-bo) * -1);z-index:-1;pointer-events:none;
  border-style:solid;border-image:var(--kk-bild) var(--kk-slice) / var(--kk-bw) / 0 stretch;
  --kk-mv:linear-gradient(to bottom,
    rgba(0,0,0,var(--kk-aus)) 0,rgba(0,0,0,var(--kk-aus)) var(--kk-ot),#000 calc(var(--kk-ot) + 1.5px),
    #000 var(--kk-mt),rgba(0,0,0,var(--kk-face)) calc(var(--kk-mt) + var(--kk-fade)),
    rgba(0,0,0,var(--kk-face)) calc(100% - var(--kk-mb) - var(--kk-fade)),#000 calc(100% - var(--kk-mb)),
    #000 calc(100% - var(--kk-ob) - 1.5px),rgba(0,0,0,var(--kk-aus)) calc(100% - var(--kk-ob)),rgba(0,0,0,var(--kk-aus)) 100%);
  --kk-mh:linear-gradient(to right,
    rgba(0,0,0,var(--kk-aus)) 0,rgba(0,0,0,var(--kk-aus)) var(--kk-ox),#000 calc(var(--kk-ox) + 1.5px),
    #000 var(--kk-mx),rgba(0,0,0,var(--kk-face)) calc(var(--kk-mx) + var(--kk-fade)),
    rgba(0,0,0,var(--kk-face)) calc(100% - var(--kk-mx) - var(--kk-fade)),#000 calc(100% - var(--kk-mx)),
    #000 calc(100% - var(--kk-ox) - 1.5px),rgba(0,0,0,var(--kk-aus)) calc(100% - var(--kk-ox)),rgba(0,0,0,var(--kk-aus)) 100%);
  -webkit-mask-image:var(--kk-mv),var(--kk-mh);mask-image:var(--kk-mv),var(--kk-mh);
  -webkit-mask-composite:source-over;mask-composite:add}
.kv-knopf>*{transition:transform .1s var(--ease-smooth,cubic-bezier(.4,0,.2,1))}
.kv-knopf__ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ka-ic);height:var(--ka-ic);color:var(--kk-ic)}
.kv-knopf__ic svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kv-knopf__txt{display:flex;flex-direction:column;min-width:0}
.kv-knopf__txt b{font-weight:600}
.kv-knopf__txt small{font-size:var(--fs-base,13px);font-weight:400;line-height:1.35;color:var(--muted,#5C6473)}

/* ══ Zustände ══ */
@media (hover:hover){.kv-knopf:hover{--kk-bild:var(--kk-img-hover);--kk-face:.5;--kk-aus:var(--ka-schatten);transform:translateY(-1px)}}
.kv-knopf:active,
.kv-knopf:is(.is-on,.on,.selected,[aria-pressed="true"],[aria-checked="true"]){--kk-bild:var(--kk-img-aktiv);--kk-face:1;--kk-aus:var(--ka-schatten);transform:none}
.kv-knopf:active>*,
.kv-knopf:is(.is-on,.on,.selected,[aria-pressed="true"],[aria-checked="true"])>*{transform:translateY(1px)}
.kv-knopf:is(.is-on,.on,.selected,[aria-pressed="true"],[aria-checked="true"]){--kk-ic:var(--teal-d,#2D6B5C)}
.kv-knopf:focus-visible{outline:2px solid var(--teal,#3D8B7A);outline-offset:3px}
.kv-knopf:is(:disabled,[aria-disabled="true"]){--kk-face:0;--kk-aus:0;--kk-ic:var(--kk-grau);color:#7C838D;cursor:not-allowed;pointer-events:none;transform:none}
.kv-knopf:is(:disabled,[aria-disabled="true"])::after{opacity:.7}
.kv-knopf:is(:disabled,[aria-disabled="true"]) small{color:var(--kk-grau)}

/* ══ Größen ══ */
/* Hauptaktion und Abschluss: Fase etwas kräftiger */
.kv-knopf:is(.kv-knopf--primaer,.kv-knopf--gross){--kk-bw:var(--kk-bw-a);--kk-bo:var(--kk-bo-a);--kk-r:var(--ka-r);
  --kk-ot:3px;--kk-ob:4px;--kk-ox:3px;--kk-mt:6px;--kk-mb:7px;--kk-mx:6px}
.kv-knopf.kv-knopf--primaer{min-height:var(--ka-h-haupt);padding:0 18px 0 16px;gap:8px}
.kv-knopf.kv-knopf--primaer:has(small){padding-top:6px;padding-bottom:6px}
.kv-knopf.kv-knopf--gross{width:100%;max-width:360px;min-height:var(--ka-h-gross);padding:6px 22px 6px 18px;gap:10px;font-size:var(--ka-fs-gross);
  white-space:normal;justify-content:center;text-align:center}
.kv-knopf.kv-knopf--gross .kv-knopf__ic{width:var(--ka-ic-gross);height:var(--ka-ic-gross)}
.kv-knopf.kv-knopf--gross .kv-knopf__txt small{font-size:var(--fs-sm,12px)}

/* Einstieg: bleibt groß (Fabio 28.10.), Hover mit vollem Schatten */
.kv-knopf.kv-knopf--einstieg{--kk-r:12px;--kk-bw:var(--kk-bw-l);--kk-bo:var(--kk-bo-l);
  --kk-ot:6px;--kk-ob:7px;--kk-ox:6px;--kk-mt:10px;--kk-mb:12px;--kk-mx:10px;
  min-height:56px;padding:8px 14px;gap:12px;font-size:var(--fs-lg,15px)}
.kv-knopf--einstieg .kv-knopf__ic{width:22px;height:22px}
@media (hover:hover){.kv-knopf.kv-knopf--einstieg:hover{--kk-aus:1}}
.kv-knopf.kv-knopf--einstieg:is(:active,.is-on,.on,.selected,[aria-pressed="true"],[aria-checked="true"]){--kk-aus:1}

.kv-knopf.kv-knopf--nav{--kk-r:var(--ka-r-wahl);min-height:var(--ka-h-nav);padding:0 12px 0 10px;gap:7px;font-size:var(--ka-fs-nav);line-height:1}
.kv-knopf--nav .kv-knopf__ic{width:15px;height:15px}
.kv-knopf--nav .kv-knopf__ic svg{stroke-width:2}
.kv-knopf--voll{width:100%}

/* Auswahl */
.kv-knopf:is(.kv-knopf--chip,.o-btn):not(.kv-knopf--karte){min-height:var(--ka-h-wahl);font-size:var(--ka-fs-wahl);gap:var(--ka-gap-wahl)}
.kv-knopf.kv-knopf--chip{padding:0 14px;justify-content:center;text-align:center}
.kv-knopf.o-btn:not(.kv-knopf--chip){padding:0 14px}
.kv-knopf:is(.kv-knopf--chip,.o-btn) .kv-knopf__ic{width:var(--ka-ic-wahl);height:var(--ka-ic-wahl)}
.kv-knopf.kv-knopf--quadrat{width:var(--ka-h-wahl);height:var(--ka-h-wahl);min-height:var(--ka-h-wahl);padding:0;justify-content:center;
  font-size:var(--ka-fs-wahl);font-variant-numeric:tabular-nums}
.kv-knopf.kv-knopf--quadrat .kv-knopf__ic{width:14px;height:14px}
.kv-knopf--quadrat .kv-knopf__ic svg{stroke-width:2.2}
.kv-knopf.kv-knopf--karte{--kk-r:12px;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:14px 14px 12px;white-space:normal;font-weight:400}

/* Cookie-Tasten auf Ink (immer ganze Taste) */
.kv-knopf.kv-knopf--klein{--kk-r:8px;--kk-bw:var(--kk-bw-s);--kk-bo:var(--kk-bo-s);
  --kk-ot:4px;--kk-ob:5px;--kk-ox:4px;--kk-mt:7px;--kk-mb:8px;--kk-mx:7px;
  min-height:34px;padding:0 14px;font-size:12.5px;justify-content:center}

/* Trefferfläche ≥ 44 px (unsichtbar; bei Quadraten auch seitlich) */
.kv-knopf:not(.kv-knopf--karte,.kv-knopf--einstieg,.kv-knopf--text)::before{
  content:"";position:absolute;left:0;right:0;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px))}
.kv-knopf.kv-knopf--quadrat::before{left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}

/* Textaktion: kein Körper, nicht unterstrichen (design.md 4, Fabio 26./29.10.; Unterstreichung P69 05.11. entfernt) */
.kv-knopf.kv-knopf--text{min-height:0;padding:2px 0;gap:8px;font-size:var(--fs-lg,15px);color:var(--teal-d,#2D6B5C);border-radius:4px;white-space:normal;
  text-decoration:none;transition:color .15s var(--ease-smooth,cubic-bezier(.4,0,.2,1))}
.kv-knopf--text::after{display:none}
@media (hover:hover){.kv-knopf--text:hover{transform:none;color:var(--ink,#1C2B3A);text-decoration:none}}
.kv-knopf--text:active{color:var(--ink,#1C2B3A)}
.kv-knopf--text:active>*{transform:none}
.kv-knopf--text:is(:disabled,[aria-disabled="true"]){color:var(--kk-grau)}

/* ══ Assistent (index, gewerbe): Felder neben den Tasten auf dieselbe Höhe ══ */
.wz .geraet-group{gap:var(--ka-gap-wahl)}
.wz .geraet-input{width:var(--ka-feld);height:var(--ka-h-wahl);border-radius:var(--ka-r-wahl);font-size:var(--ka-fs-wahl)}
.wz .room-inp-wrap{height:var(--ka-h-wahl);border-radius:var(--ka-r-wahl)}
.wz .kp-step{gap:var(--ka-gap-wahl)}
.wz #raumGrid{gap:var(--ka-gap-wahl) 10px}
.wz .opt-g,.wz .opt-g.kv-tasten--2x2{gap:var(--ka-gap-wahl) 10px}
.wz .tgl-opts{gap:var(--ka-gap-wahl)}
.tgl-opts .kv-knopf.kv-knopf--chip{padding:0 12px}

/* ══ Gruppen ══ */
.kv-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4,16px) var(--s-6,24px)}
.kv-tasten{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
@media (max-width:640px){
  .kv-knoepfe{flex-direction:column;align-items:stretch;gap:var(--s-4,16px)}
  .kv-knoepfe>.kv-knopf:not(.kv-knopf--text){width:100%}
  .kv-knoepfe>.kv-knopf--text{align-self:center}
  .kv-knopf.kv-knopf--text{font-size:var(--fs-md,14px)}
  .kv-tasten--2x2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kv-tasten--2x2>.kv-knopf{width:100%;padding-left:12px;padding-right:10px}
  .kv-tasten--2x2>.kv-knopf.kv-knopf--chip{padding:0 6px;font-size:var(--ka-fs-wahl);letter-spacing:-.01em}
  .kv-knopf.kv-knopf--gross{width:auto;max-width:100%}            /* nicht randlos breit: so breit wie der Text */
  .kv-knopf.kv-knopf--einstieg{min-height:50px;padding:7px 10px 7px 12px;gap:8px;font-size:var(--fs-md,14px);
    --kk-ot:5px;--kk-ob:6px;--kk-ox:5px;--kk-mt:9px;--kk-mb:10px;--kk-mx:9px}
  .kv-knopf--einstieg .kv-knopf__ic{width:20px;height:20px}
  .kv-knopf--einstieg small{font-size:var(--fs-sm,12px)}
  .tgl-opts>.kv-knopf.kv-knopf--chip{min-height:var(--ka-h-wahl);padding:6px 8px;font-size:13px;line-height:1.15}  /* zweizeilig nicht an die Kante */
  .wz #raumGrid>.kv-knopf{padding:0 12px}
  .kv-knopf.wz-seg-card{padding:12px 14px 10px}
}
/* sehr schmale Handys: lange Antworten („Diese / nächste Woche“) lieber zweizeilig als über den Rand */
@media (max-width:380px){
  .kv-tasten--2x2>.kv-knopf.kv-knopf--chip{white-space:normal;line-height:1.15;padding:2px 6px}
  .wz #raumGrid>.kv-knopf{padding:0 8px;gap:6px}
}

/* ══ Auf Ink: immer die ganze Taste, Schatten dezent; Textaktion hell ══ */
.kv-dunkel .kv-knopf{--kk-face:1;--kk-aus:1}
.kv-dunkel .kv-knopf::after{filter:drop-shadow(0 3px 5px rgba(0,0,0,.24)) drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.kv-dunkel .kv-knopf--text{color:#71C3AA}
@media (hover:hover){.kv-dunkel .kv-knopf--text:hover{color:#fff}}
.kv-dunkel .kv-knopf:focus-visible{outline-color:#71C3AA}

@media (prefers-reduced-motion:reduce){.kv-knopf,.kv-knopf>*{transition:none!important}}