/*
 * GO:BETTER — Website-Ebene
 * web.css · v1.2 · lädt NACH tokens.css
 *
 * Drei Intensitätsstufen, ein System:
 *   data-level="home"     Startseite   → expressiv   · Marke erleben
 *   data-level="product"  Produktseite → ausgewogen  · Produkt verstehen
 *   (Tool)                tokens.css   → zurückhaltend · konzentriert arbeiten
 * Produktstimmung über data-product="fvp" | "pt" | "td" am <body>.
 */

:root {
  /* Vollfarbflächen: Produktfarben in CI-Stärke, Schrift darauf immer Tinte */
  --web-field-fvp: #2EE59D;  --web-field-fvp-muted: #16392B;
  --web-field-pt:  #F0B42A;  --web-field-pt-muted:  #4A3606;
  --web-field-td:  #5B8CFF;  --web-field-td-muted:  #101C3F;
  --web-field-ink: #0B0D10;
  --web-field-line: rgba(11,13,16,0.20);

  /* Maßstab je Ebene */
  --web-h1-home:    clamp(56px, 8vw, 120px);
  --web-h1-product: clamp(44px, 6vw, 80px);
  --web-h2-home:    clamp(44px, 5.6vw, 72px);
  --web-h2-product: 52px;
  --web-statement:  clamp(36px, 4.4vw, 60px);

  /* Raum je Ebene */
  --web-section-home:    152px;
  --web-section-product: 128px;
  --web-hero-home:       880px;
  --web-maxw:            1280px;
  --web-gutter:          32px;
}

/* Produktstimmung · Akzent + Vollfläche */
[data-product="fvp"] { --web-mood: var(--web-field-fvp); --web-mood-muted: var(--web-field-fvp-muted); --web-mood-light: #10C27F; }
[data-product="pt"]  { --web-mood: var(--web-field-pt);  --web-mood-muted: var(--web-field-pt-muted);  --web-mood-light: #F0B42A; }
[data-product="td"]  { --web-mood: var(--web-field-td);  --web-mood-muted: var(--web-field-td-muted);  --web-mood-light: #3B7BFF; }

.web-field { background: var(--web-mood); color: var(--web-field-ink); }
.web-field .muted { color: var(--web-mood-muted); }

@media (max-width: 720px) {
  :root { --web-section-home: 96px; --web-section-product: 80px; --web-gutter: 20px; --web-hero-home: 640px; }
}

/* ---------- Schaltflächen · Website (WEBSITE.md §9, Design v3) ----------
 * Präfix gb- vermeidet Kollisionen mit Alt-Klassen (.btn, .btn-neon,
 * .btn-outline) aus style.css. Dunkler Grund ist Standard; helle und
 * farbige Abschnitte setzen data-ground="light" bzw. "color" am Abschnitt.
 * Feste Hex-Werte, unabhängig von data-theme. */

:root, [data-ground="dark"] {
  --gb-p-bg:#ECEDEF; --gb-p-fg:#0B0D10; --gb-p-hover:#9A9FA7;
  --gb-s-bg:transparent; --gb-s-bd:#9A9FA7; --gb-s-fg:#ECEDEF; --gb-s-hover-bg:#191D23; --gb-s-hover-bd:#ECEDEF; --gb-s-active:#262B33;
  --gb-focus:#ECEDEF; --gb-dis-bg:#191D23; --gb-dis-fg:#5A6068; --gb-dis-bd:#262B33;
}
[data-ground="light"] {
  --gb-p-bg:#111317; --gb-p-fg:#F7F8FA; --gb-p-hover:#555A62;
  --gb-s-bg:transparent; --gb-s-bd:#7E858F; --gb-s-fg:#111317; --gb-s-hover-bg:#EEF0F3; --gb-s-hover-bd:#111317; --gb-s-active:#DEE1E6;
  --gb-focus:#111317; --gb-dis-bg:#EEF0F3; --gb-dis-fg:#A3A8AF; --gb-dis-bd:#DEE1E6;
}
[data-ground="color"] {
  --gb-p-bg:#0B0D10; --gb-p-fg:#ECEDEF; --gb-p-hover:#2A2D33;
  --gb-s-bg:transparent; --gb-s-bd:#0B0D10; --gb-s-fg:#0B0D10; --gb-s-hover-bg:rgba(11,13,16,.1); --gb-s-hover-bd:#0B0D10; --gb-s-active:rgba(11,13,16,.18);
  --gb-focus:#0B0D10;
}

.gb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  border-radius: 4px; border: 1px solid transparent;
  font-family: 'Geist', system-ui, sans-serif; font-weight: 500; line-height: 1; letter-spacing: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  opacity: 1; transform: none; box-shadow: none;
  transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms cubic-bezier(.2,0,0,1), color 120ms cubic-bezier(.2,0,0,1);
}
.gb-btn--m { height: 40px; padding: 0 18px; font-size: 14px; }
.gb-btn--l { height: 52px; padding: 0 28px; font-size: 15px; }
@media (max-width: 719px) { .gb-btn--m, .gb-btn--l { min-height: 48px; } }

.gb-btn--primary, .gb-btn--primary:visited { background-color: var(--gb-p-bg); color: var(--gb-p-fg); border-color: var(--gb-p-bg); }
.gb-btn--primary:hover { background-color: var(--gb-p-hover); border-color: var(--gb-p-hover); color: var(--gb-p-fg); }
.gb-btn--primary:active { box-shadow: inset 0 1px 3px rgba(0,0,0,.35); }

.gb-btn--secondary, .gb-btn--secondary:visited { background-color: var(--gb-s-bg); color: var(--gb-s-fg); border-color: var(--gb-s-bd); }
.gb-btn--secondary.on-photo { background-color: rgba(11,13,16,.4); backdrop-filter: blur(6px); }
.gb-btn--secondary:hover { background-color: var(--gb-s-hover-bg); border-color: var(--gb-s-hover-bd); color: var(--gb-s-fg); }
.gb-btn--secondary:active { background-color: var(--gb-s-active); }

/* Fokus-Verhalten: bei Mouse-Klick kein Ring (:focus). Nur bei
 * Tastatur-Navigation (:focus-visible) ein subtiler Inset-Ring —
 * bleibt innerhalb der Buttonfläche, wirkt nicht wie ein doppelter
 * äußerer Rahmen und tritt nicht in Screenshots als Artefakt auf. */
.gb-btn { outline: none; }
.gb-btn:focus { outline: none; box-shadow: none; }
.gb-btn--primary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gb-p-fg); }
.gb-btn--secondary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--gb-s-fg); }

.gb-btn--primary:disabled, .gb-btn--primary[aria-disabled="true"] { background-color: var(--gb-dis-bg); border-color: var(--gb-dis-bg); color: var(--gb-dis-fg); cursor: not-allowed; box-shadow: none; }
.gb-btn--secondary:disabled, .gb-btn--secondary[aria-disabled="true"] { background-color: transparent; border-color: var(--gb-dis-bd); color: var(--gb-dis-fg); cursor: not-allowed; }

.gb-btn-group { display: flex; flex-wrap: wrap; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .gb-btn { transition: none; }
}