/* ============================================================
   kw-brand.css — Master-Stylesheet kleiner Wassermann
   Corporate Identity v2
   Stand: 2026-06-28
   
   Verwendung:
   1. Diese Datei einbinden: <link rel="stylesheet" href="kw-brand.css">
   2. Optional: Agency FB woff2 base64 in --AGENCY-FONT-PLACEHOLDER ersetzen
      (sonst greift automatisch der System-Fallback Oswald/Bahnschrift)
   3. HTML-Klassen verwenden: .glass, .btn, .btn--primary, .kw-logo, etc.
   
   Vollständige Brand-Spec: KW_06_Brand_CI-v2_2026-06-28.md
   ============================================================ */


/* ---- Font Embedding (Agency FB V2 Primary + AgencyFB Fallback) ---- */
/* V2: frisch via OnlineWebFonts (CC BY 3.0, Attribution im Impressum) */
@font-face {
  font-family: 'Agency FB V2';
  src: url('/preview-v5/fonts/AgencyFB-V2.woff2') format('woff2'),
       url('/preview-v5/fonts/AgencyFB-V2.woff')  format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Alte Familie als zusätzlicher Fallback */
@font-face {
  font-family: 'AgencyFB';
  src: url('/preview-v5/fonts/AgencyFB.woff2') format('woff2'),
       url('/preview-v5/fonts/AgencyFB.woff')  format('woff'),
       url('/preview-v5/fonts/AgencyFB.ttf')   format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---- 1. Basis-Palette (CI 2024 × Logo gedämpft, Glass-tauglich) ---- */
:root {
  /* Markenfarben — 60/30/10 */
  --kw-sage:        #9CA088;   /* PRIMÄR 60% — Logo-Wahrheit, ersetzt Park-Grün */
  --kw-sage-deep:   #7F8470;   /* hover/active dunkler */
  --kw-sage-soft:   #BDC0AC;   /* light state */
  --kw-stone:       #ADB09E;   /* SEKUNDÄR 30% — hellere Sage */
  --kw-stone-pale:  #D4D6C8;   /* surface accent */
  --kw-water:       #5F7F8C;   /* AKZENT 10% — ersetzt Rhein-Türkis, Glass-tauglich */
  --kw-water-deep:  #4A6772;
  --kw-warm:        #9C7A6E;   /* Café-Wärme aus CI 2024 */
  --kw-warm-sand:   #C9C2A8;   /* Warmer Übergang (CI-Doc Token) */

  /* Hintergrund & Flächen */
  --kw-paper:       #F5F0E6;   /* warmes Papier aus Logo */
  --kw-paper-deep:  #ECE6D8;
  --kw-cream:       #FEFEFE;
  --kw-surface:     rgba(255, 255, 255, 0.62);
  --kw-surface-strong: rgba(255, 255, 255, 0.82);

  /* Text */
  --kw-ink:         #2A2D24;   /* Olive-Anthrazit aus Logo */
  --kw-ink-soft:    #56594E;
  --kw-ink-muted:   #8A8D80;

  /* Rahmen & Schatten */
  --kw-border:      rgba(173, 176, 158, 0.32);
  --kw-border-strong: rgba(173, 176, 158, 0.54);
  --shadow-sm:      0 1px 3px rgba(42, 45, 36, 0.06),
                    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  --shadow-md:      0 4px 16px rgba(42, 45, 36, 0.10),
                    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --shadow-lg:      0 12px 32px rgba(42, 45, 36, 0.14),
                    0 1px 0 rgba(255, 255, 255, 0.7) inset;

  /* Functional States */
  --kw-success:     #6B8259;
  --kw-warn:        #B89968;
  --kw-error:       #A86464;

  /* Typografie — Agency FB als CI-Standard mit Fallback-Kette */
  --font-display:   'Agency FB V2', 'AgencyFB', 'Agency FB', 'Oswald',
                    'Bahnschrift Condensed', 'Arial Narrow',
                    'Helvetica Neue Condensed', sans-serif-condensed, sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Arial, sans-serif;
  --font-meta:      'Berkeley Mono', 'JetBrains Mono', ui-monospace,
                    'SF Mono', Consolas, monospace;

  /* Spacing & Radius */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Glass-Tokens */
  --glass-blur: 24px;
  --glass-saturate: 140%;
}

/* ============================================================
   FALLBACK L1.1: backdrop-filter → solid surface
   ============================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --kw-surface: rgba(255, 255, 255, 0.96);
    --kw-surface-strong: rgba(255, 255, 255, 1);
  }
}

/* ============================================================
   FALLBACK L2.2: Wenn Agency FB nicht lädt → System-Fallback
   ============================================================ */
@supports not (font-family: 'AgencyFB') {
  :root {
    --font-display: 'Oswald', 'Bahnschrift Condensed', 'Arial Narrow',
                    'Helvetica Neue Condensed', sans-serif-condensed, sans-serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    'Helvetica Neue', Arial, sans-serif;
  }
}

/* ============================================================
   FALLBACK L5.4 + L5.5: prefers-reduced-motion + prefers-reduced-data
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-data: reduce) {
  :root {
    --glass-blur: 0px;
    --glass-saturate: 100%;
    --kw-surface: rgba(255, 255, 255, 0.96);
  }
}

/* ============================================================
   FALLBACK L5.3 + L5.4: A11y High-Contrast (ersetzt Dark Mode)
   Kein klassischer Dark Mode — nur Kontrast-Boost
   ============================================================ */
@media (prefers-contrast: more) {
  :root {
    --kw-ink: #1A1D14;
    --kw-ink-soft: #2A2D24;
    --kw-border: rgba(42, 45, 36, 0.5);
    --kw-border-strong: rgba(42, 45, 36, 0.75);
    --kw-surface: rgba(255, 255, 255, 0.98);
    --kw-paper: #FFFFFF;
  }
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--kw-ink);
  background: var(--kw-paper);
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(156, 160, 136, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 90%, rgba(95, 127, 140, 0.12), transparent 60%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display-Text (Headlines): Agency FB ist condensed → mehr Tracking */
h1, h2, h3, .display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--kw-ink);
  margin: 0 0 0.6em;
  font-weight: 700;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

p { margin: 0 0 1em; }

.meta {
  font-family: var(--font-meta);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--kw-ink-muted);
  text-transform: uppercase;
}

/* ============================================================
   Logo (in allen Screens, 4-Layer-Fallback)
   FALLBACK L2.1: extern SVG → inline data-URI → CSS-Orb → Text-"kw"
   ============================================================ */
.kw-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--kw-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 1.05rem;
}

.kw-logo__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-block;
  background-image: var(--logo-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: relative;
}

/* CSS-Orb Fallback wenn keine background-image lädt */
.kw-logo__mark::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    var(--kw-sage-soft) 0%,
    var(--kw-sage) 50%,
    var(--kw-sage-deep) 100%);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Wenn JS feststellt dass SVG nicht geladen wurde, .no-logo aktivieren */
.no-logo .kw-logo__mark::after { opacity: 1; }
.no-logo .kw-logo__mark { background-image: none; }

.kw-logo__wordmark {
  display: inline-block;
}

.kw-logo__tagline {
  font-family: var(--font-meta);
  font-size: 0.7rem;
  color: var(--kw-ink-muted);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-top: -2px;
}

/* ============================================================
   Layout
   ============================================================ */
.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
  min-height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--kw-border);
  margin-bottom: 1.5rem;
}

.screen {
  display: none;
  animation: fadeIn 0.35s ease;
}
.screen.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ============================================================
   Glass Card — Apple Glass kombiniert mit CI-Werten
   ============================================================ */
.glass {
  background: var(--kw-surface);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--kw-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  margin-bottom: 1.25rem;
}

.glass--strong {
  background: var(--kw-surface-strong);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
  text-decoration: none;
  min-height: 48px;
  min-width: 48px;
}

.btn--primary {
  background: var(--kw-sage);
  color: var(--kw-cream);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--kw-sage-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  background: var(--kw-water);
  color: var(--kw-cream);
}
.btn--secondary:hover { background: var(--kw-water-deep); }

.btn--outline {
  background: transparent;
  border: 2px solid var(--kw-sage);
  color: var(--kw-sage-deep);
}
.btn--outline:hover {
  background: var(--kw-sage);
  color: var(--kw-cream);
}

.btn--ghost {
  background: transparent;
  color: var(--kw-ink-soft);
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 500;
}
.btn--ghost:hover { background: rgba(173, 176, 158, 0.16); }

.btn-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* ============================================================
   Forms
   ============================================================ */
.field {
  margin-bottom: 1.25rem;
}

.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.5rem;
  color: var(--kw-ink);
  font-weight: 700;
}

.field input[type="text"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--kw-cream);
  border: 1px solid var(--kw-border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--kw-ink);
  transition: border-color 0.18s, box-shadow 0.18s;
  min-height: 48px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--kw-sage-deep);
  box-shadow: 0 0 0 3px rgba(156, 160, 136, 0.28);
}

/* ============================================================
   Stakeholder Pills
   ============================================================ */
.stakeholders {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.stakeholder {
  padding: 0.7rem 1.1rem;
  background: var(--kw-cream);
  border: 1.5px solid var(--kw-border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.stakeholder:hover {
  border-color: var(--kw-sage);
  background: var(--kw-stone-pale);
}

.stakeholder.selected {
  background: var(--kw-sage);
  border-color: var(--kw-sage-deep);
  color: var(--kw-cream);
}

/* ============================================================
   Progress
   ============================================================ */
.progress {
  height: 6px;
  background: var(--kw-stone-pale);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 0.5rem 0 1.5rem;
}

.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--kw-sage), var(--kw-water));
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Hint Banner (Legacy / Capability)
   ============================================================ */
.hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: rgba(184, 153, 104, 0.14);
  border: 1px solid rgba(184, 153, 104, 0.32);
  border-radius: var(--r-md);
  margin-bottom: 1rem;
  font-size: 0.92rem;
  color: var(--kw-ink-soft);
}

.hint__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.hint--info { background: rgba(95, 127, 140, 0.12); border-color: rgba(95, 127, 140, 0.3); }
.hint--ok   { background: rgba(107, 130, 89, 0.14); border-color: rgba(107, 130, 89, 0.32); }

/* ============================================================
   Mascot Slot (Phase 0 — no-op)
   ============================================================ */
#mascot-slot {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s;
}

/* ============================================================
   Scale Question (Likert)
   ============================================================ */
.scale {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.scale__btn {
  flex: 1;
  aspect-ratio: 1;
  min-width: 48px;
  background: var(--kw-cream);
  border: 1.5px solid var(--kw-border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.2s;
}
.scale__btn:hover { border-color: var(--kw-sage); transform: scale(1.05); }
.scale__btn.selected { background: var(--kw-sage); color: var(--kw-cream); border-color: var(--kw-sage-deep); }

.scale__labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-meta);
  font-size: 0.72rem;
  color: var(--kw-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   Success Screen
   ============================================================ */
.success {
  text-align: center;
  padding: 2.5rem 1.5rem;
}

.success__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kw-sage-soft), var(--kw-sage));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--kw-cream);
  box-shadow: var(--shadow-lg);
}

/* ============================================================
   Footer / Meta
   ============================================================ */
.footer {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kw-border);
  font-family: var(--font-meta);
  font-size: 0.75rem;
  color: var(--kw-ink-muted);
  text-align: center;
  letter-spacing: 0.04em;
}

/* ============================================================
   FALLBACK L6.5: < 320px Viewport
   ============================================================ */
@media (max-width: 360px) {
  .app { padding: 1rem 0.75rem 3rem; }
  .glass { padding: 1.25rem; }
  h1 { font-size: 1.5rem; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
}

/* Focus-Visible (Tastatur-Flow, L5.2) */
:focus-visible {
  outline: 2px solid var(--kw-water);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Selection */
::selection {
  background: rgba(156, 160, 136, 0.4);
  color: var(--kw-ink);
}

/* ============================================================
   Capability Detection Banner (L3.2: try/catch + Banner)
   ============================================================ */
.cap-banner {
  display: none;
  padding: 0.75rem 1rem;
  background: var(--kw-warn);
  color: var(--kw-cream);
  font-size: 0.85rem;
  border-radius: var(--r-md);
  margin-bottom: 1rem;
}
.cap-banner.active { display: block; }