/* ============================================================
   KÜSTENWERK Button-Set „Glas & Gold Racing" — zentrale Datei
   (Design-Entscheidung Tobi 24.07.2026 abends, Vorschlag 6 auf
   /buttons-vergleich/ — löst das schräge „Racing Flag Soft" ab.
   Die kwb-Klassen im Markup blieben beim Wechsel unverändert.)

   Varianten:
     .kwb--gelb     Haupt-Aktion (Weiter, Anfragen, Speichern)
     .kwb--dunkel   Sekundär (Zurück, Abbrechen, Schließen, Links)
     .kwb--rot      Destruktiv (Löschen) — dunkles Glas-Rot
     .kwb--special  Kauf-Momente (Jetzt buchen, Einlösen) —
                    dunkel/gold; beim Hover zieht EINMAL ein
                    Zielflaggen-Band über den Button (keine Füllung)
   Größen: Standard 52px · .kwb--mittel 44px (Topbars) ·
     .kwb--klein 36px (Admin, Tabellen) · Kontexte: Dialoge
     automatisch kompakt, Racing-Header 42px (bündig zum
     Geöffnet-Feld). .kwb--block = volle Breite.

   Form: gerade, weiches Glas, 14er-Radius, feiner goldener
   Innenrand (::before, inset 3px). Das ::after ist frei für den
   Flag-Sweep des Specials. Vertikales Padding sitzt bewusst
   asymmetrisch (+2px oben): die Sakana hängt optisch hoch.
   ============================================================ */

@font-face{
  font-family:"Sakana";
  src:url("/assets/fonts/sakana/Sakana-Regular.woff2") format("woff2"),
      url("/assets/fonts/sakana/Sakana-Regular.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}

.kwb{
  box-sizing:border-box; /* Maße gelten nominal, unabhängig vom Reset der Seite */
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:16px 28px 12px;
  border-radius:14px;cursor:pointer;white-space:nowrap;
  font-family:"Sakana","Big Shoulders Display",sans-serif;
  font-weight:400;font-synthesis:none;
  text-transform:uppercase;letter-spacing:.04em;font-size:1rem;line-height:1;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,195,0,.38);
  background:linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 100%),rgba(255,255,255,.055);
  box-shadow:0 10px 22px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .22s ease,box-shadow .25s ease,border-color .22s ease,color .25s ease,filter .25s ease;
}
.kwb::before{content:"";position:absolute;inset:3px;border-radius:11px;
  border:1px solid rgba(255,195,0,.12);pointer-events:none;z-index:1}
.kwb:hover{transform:translateY(-2px);border-color:rgba(255,195,0,.75);
  box-shadow:0 14px 26px -10px rgba(255,195,0,.4),0 14px 30px rgba(0,0,0,.24)}
.kwb:active{transform:translateY(0)}
.kwb:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,195,0,.35),0 10px 22px rgba(0,0,0,.18)}
/* Dunkel (= Basis) wird beim Ueberfahren gold -- Tobis Entscheidung 28.09.2026 (Variante A, "ueberall
   einheitlich"). Vorher kam das Gold nur zufaellig aus theme.css (a:hover) und fehlte im Cockpit, bei
   <button>-Elementen und auf Seiten ohne Theme. Gelb/Rot/Special setzen weiter unten eigene Farben und
   gewinnen per Reihenfolge; :disabled steht ebenfalls weiter unten und bleibt grau. */
.kwb:hover,.kwb:focus-visible{color:#ffc300}
.kwb[hidden]{display:none}
/* Defensive gegen Alt-Theme-Regeln, die span/i-Kinder ehemaliger
   Button-Klassen stylten (Farb-/Positions-Overrides) */
.kwb>span{position:relative;z-index:2;color:inherit;-webkit-text-fill-color:currentColor}
/* Icon 0.1em anheben: Sakana setzt seine Versalien höher in die Zeilenbox als
   Font Awesome seine Glyphe – ohne Ausgleich sitzt das Icon rund 1,5px zu tief
   (nachgemessen 14.08.2026). Betrifft nur <i>-Icons, nicht die SVGs im Cockpit. */
.kwb i{position:static;line-height:1;z-index:2;transform:translateY(-.1em)}
.kwb:disabled,.kwb[aria-disabled="true"]{cursor:not-allowed;color:rgba(255,255,255,.45);transform:none;
  border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.03);box-shadow:none;filter:none}
.kwb:disabled::before,.kwb[aria-disabled="true"]::before{border-color:transparent}

/* --- Gelb: Haupt-Aktion (sattes Honig-Gold, Tobis Abnahme) --- */
.kwb--gelb{color:#141414;border-color:rgba(212,158,0,.92);
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.02) 100%),linear-gradient(135deg,#f5c22a 0%,#e6ac00 48%,#c78d00 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.22),0 8px 20px rgba(230,172,0,.18),inset 0 1px 0 rgba(255,255,255,.26)}
.kwb--gelb::before{border-color:rgba(17,17,17,.12)}
.kwb--gelb:hover{filter:saturate(1.06);border-color:rgba(212,158,0,1);
  box-shadow:0 14px 28px -8px rgba(230,172,0,.55),0 14px 30px rgba(0,0,0,.24)}
/* Schrift festhalten: theme.css faerbt global a:hover/a:focus gold -- auf dem gelben
   Button war die Schrift dann unsichtbar (nur bei <a>-Buttons; 28.09.2026) */
.kwb--gelb:hover,.kwb--gelb:focus{color:#141414}
.kwb--gelb:disabled{color:rgba(255,255,255,.45);background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.10);filter:none}

/* --- Dunkel: Sekundär = die kwb-Basis (Glas + Gold-Rahmen) --- */
/* .kwb--dunkel braucht keine eigenen Regeln — Basis-Look. */

/* --- Rot: Destruktiv — dunkles, glasiges Rot ----------------- */
.kwb--rot{color:#ffd9da;border-color:rgba(220,60,64,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 100%),linear-gradient(180deg,rgba(150,30,34,.60) 0%,rgba(84,15,17,.60) 100%),rgba(110,22,25,.35);
  box-shadow:0 10px 22px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.10)}
.kwb--rot::before{border-color:rgba(255,90,92,.16)}
.kwb--rot:hover{color:#fff;border-color:rgba(255,77,79,.75);
  box-shadow:0 14px 26px -10px rgba(200,42,46,.55),0 14px 30px rgba(0,0,0,.26)}
.kwb--rot:focus-visible{color:#fff}

/* --- Special: dunkel/gold mit Zielflaggen-Sweep beim Hover --- */
.kwb--special{color:#ffc300;border-color:rgba(255,195,0,.55);
  background:linear-gradient(180deg,rgba(255,195,0,.10) 0%,rgba(255,195,0,.04) 100%),rgba(255,195,0,.05);
  box-shadow:0 10px 22px rgba(0,0,0,.18),0 0 16px rgba(255,195,0,.15),inset 0 1px 0 rgba(255,255,255,.08)}
.kwb--special::after{content:"";position:absolute;top:-8px;bottom:-8px;left:-30%;width:24%;
  transform:skewX(-18deg);opacity:0;pointer-events:none;z-index:1;
  background:repeating-conic-gradient(rgba(255,255,255,.9) 0% 25%,rgba(18,18,18,.9) 0% 50%) 0 0/10px 10px}
.kwb--special:hover{color:#ffd347;border-color:rgba(255,195,0,.9);
  box-shadow:0 14px 28px -8px rgba(255,195,0,.45),0 0 22px rgba(255,195,0,.25)}
.kwb--special:hover::after{animation:kwbflag .95s ease-out forwards}
@keyframes kwbflag{0%{left:-30%;opacity:0}15%{opacity:.85}100%{left:120%;opacity:0}}

/* --- Utility: volle Breite ----------------------------------- */
.kwb--block{width:100%}

/* --- Mittel (44px): Topbars, neben Statusfeldern ------------- */
.kwb--mittel{min-height:44px;padding:12px 22px 10px;font-size:.9rem;letter-spacing:.05em;border-radius:12px}
.kwb--mittel::before{inset:3px;border-radius:9px}

/* --- Klein (36px): Admin-Tools, Tabellen --------------------- */
.kwb--klein{min-height:36px;padding:9px 16px 7px;font-size:.82rem;letter-spacing:.05em;border-radius:10px}
.kwb--klein::before{inset:2px;border-radius:8px}

/* --- Kontext: Dialoge (Bestätigungen, Modals) ---------------- */
/* Kompakt, damit schmale Dialogfenster nie überlaufen;
   white-space:normal als Notanker für lange Beschriftungen. */
dialog .kwb{min-height:36px;padding:9px 16px 7px;font-size:.82rem;letter-spacing:.05em;border-radius:10px;white-space:normal}
dialog .kwb::before{inset:2px;border-radius:8px}

/* --- Kontext: allgemeiner Racing-Header ---------------------- */
/* Bündig zum "Jetzt geöffnet"-Feld: (1) align-self:stretch = exakt
   Zeilen-/Feldhöhe, annahmefrei. (2) translateY(6px) = derselbe
   Versatz, den das Alt-Theme dem Statusfeld gibt (custom-fonts.css:
   ".kw-header-v2-booking-btn, .nav-opening-status{translateY(6px)}" —
   traf frueher auch den alten Button, seit dem Klassentausch nicht
   mehr; DAS war der "sitzt hoeher"-Versatz, nicht die Hoehe!). */
#tt-header .kwb{align-self:stretch;min-height:0;padding:3px 24px 0;font-size:1rem;transform:translateY(6px)}
#tt-header .kwb:hover{transform:translateY(4px)}
#tt-header .kwb:active{transform:translateY(6px)}
/* Beim Scrollen (Sticky-Header) setzt das Alt-Theme das Statusfeld
   auf Versatz 0 zurueck und macht es kompakter (fe-nav.css) — der
   Button spiegelt das: Versatz 0, kleinere Schrift; die Hoehe folgt
   dem geschrumpften Feld via align-self:stretch von selbst. */
html.fe-nav-stuck #tt-header .kwb{transform:translateY(0);font-size:12px;padding:2px 18px 0}
html.fe-nav-stuck #tt-header .kwb:hover{transform:translateY(-1px)}
html.fe-nav-stuck #tt-header .kwb:active{transform:translateY(0)}
/* Mobil (zweizeiliger Header seit 31.07.): das Statusfeld ist aus der
   Zeile verschwunden (Ampel sitzt im Menue) — der Buendig-Trick oben
   wuerde den Button an der Burger-Hoehe plattdruecken und 6px versetzen.
   Zurueck zur normalen kwb--mittel-Form, auch im Sticky-Zustand. */
@media (max-width:1024px){
  #tt-header .kwb,
  html.fe-nav-stuck #tt-header .kwb{align-self:auto;min-height:44px;padding:12px 22px 10px;font-size:.9rem;transform:none}
  #tt-header .kwb:hover,
  html.fe-nav-stuck #tt-header .kwb:hover{transform:translateY(-2px)}
  #tt-header .kwb:active,
  html.fe-nav-stuck #tt-header .kwb:active{transform:translateY(0)}
}