/* ═══════════════════════════════════════════════════════════
   Kenzo Weiss KI Automatisierung — Base Stylesheet
   Single source of truth für Tokens, Buttons, Nav, Footer.
   Werte stammen aus brand-assets/design/design-system.html.
   Seitenspezifisches CSS bleibt inline in der jeweiligen Seite.
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ──────────────────────────────────────── */
:root {
  --bg:           #F7F9FC;
  --surface:      #FFFFFF;
  --surface-2:    #F1F5F9;
  --surface-3:    #E8EEF7;

  --ink-1:        #0D1117;
  --ink-2:        #1E293B;
  --ink-3:        #475569;
  --ink-4:        #64748B;   /* bis 2026-09-11 #94A3B8 (2.56:1 auf Weiß), jetzt 4.76:1. Steht noch nicht in design-system.html */

  --line:         #E2E8F0;
  --line-2:       #CBD5E1;

  --cyan:         #22D3EE;
  --cyan-dark:    #0E7490;   /* bis 2026-09-11 #0891B2 (3.68:1 auf Weiß), jetzt 5.36:1. Steht noch nicht in design-system.html */
  --blue:         #2563EB;
  --blue-dark:    #1D4ED8;
  --orange:       #FB7C3E;
  --orange-dark:  #E86425;

  /* Variante, keine Markenfarbe. Die Marke trägt drei Farben — Blue, Cyan,
     Orange. Amber bleibt nur für Badge-Tints (.badge-amber) im Bestand;
     nicht für Text, Zahlen oder Flächen neu einsetzen. */
  --amber:        #F59E0B;

  /* Textsichere Orange-Variante. #E86425 erreicht auf --bg nur 3.17:1 und
     reißt damit die 4.5:1 aus Principle 06 — schlechter noch als --cyan-dark.
     #BE4104 ist der hellste Ton gleicher Sättigung, der auf allen vier hellen
     Flächen besteht — bg 5.04:1, Weiß 5.32:1, surface-2 4.86:1, surface-3 4.56:1.
     Gleiches Muster wie --cyan-dark für Cyan.
     Abgeleitet, steht noch nicht in design-system.html — siehe deren README. */
  --orange-text:  #BE4104;

  --tint-cyan:    rgba(34,211,238,.08);
  --tint-cyan-2:  rgba(34,211,238,.16);
  --tint-blue:    rgba(37,99,235,.07);

  --shadow-sm:    0 1px 3px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.04);
  --shadow-md:    0 2px 8px rgba(15,23,42,.06), 0 12px 32px rgba(15,23,42,.05);
  --shadow-lg:    0 4px 16px rgba(15,23,42,.07), 0 24px 56px rgba(15,23,42,.07);
  --shadow-btn:   0 4px 14px rgba(37,99,235,.25);

  --grad-stripe:  linear-gradient(90deg, #22D3EE, #2563EB);
  --grad-hero:    radial-gradient(ellipse 100% 60% at 65% -10%, rgba(34,211,238,.11), transparent 60%),
                  radial-gradient(ellipse 50% 40% at 95% 85%,  rgba(37,99,235,.07),  transparent 55%);

  /* Textverlauf — startet bei Cyan Dark, nicht bei Cyan.
     #22D3EE erreicht auf --bg nur 1.7:1 und ist als Schrift unbrauchbar.
     Diese Fassung liegt bei ~3.7:1 und passt damit für Large Text (≥3:1). */
  --grad-text:    linear-gradient(100deg, #0891B2 0%, #2563EB 55%, #1D4ED8 100%);

  /* Aurora-Wolken für den Hero der Lern-Seite */
  --grad-mesh-1:  radial-gradient(circle, rgba(34,211,238,.38), transparent 70%);
  --grad-mesh-2:  radial-gradient(circle, rgba(37,99,235,.30), transparent 70%);
  --grad-mesh-3:  radial-gradient(circle, rgba(251,124,62,.16), transparent 70%);

  --font-head:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --ease:         cubic-bezier(.4, 0, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.56, .64, 1);
  --transition:   .3s cubic-bezier(.4, 0, .2, 1);

  --r:            12px;
  --r-sm:         8px;
  --r-lg:         20px;
  --r-pill:       100px;

  --section-pad:  clamp(64px, 8vw, 112px) clamp(20px, 5vw, 80px);
  --head-gap:     clamp(32px, 4vw, 48px);   /* Sektionskopf → Inhalt, überall gleich */
  --nav-h:        72px;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  background: var(--bg);
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--tint-cyan-2); color: var(--ink-1); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--ink-1);
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* ─── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: var(--section-pad); }

/* ─── Textverlauf ────────────────────────────────────────── */
/* Nur für Headlines ab ~28px und Gewicht 700+. Nicht für Fließtext. */
.grad-text {
  color: var(--blue);                 /* Fallback, falls background-clip fehlt */
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Eyebrow / Section-Titel ────────────────────────────── */
.section-label,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cyan-dark);
  margin-bottom: 16px;
}

.section-label::before,
.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--cyan);
}

h2.section-headline,
.section-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  letter-spacing: -.03em;
  color: var(--ink-1);
}

.section-sub {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 62ch;
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition),
              box-shadow var(--transition), transform var(--transition),
              border-color var(--transition);
}

/* Primär = Deep Blue. Immer. Cyan ist nie ein CTA. */
.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,99,235,.32);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1.5px solid var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--tint-blue);
}

/* Sekundär, sparsam einsetzen */
.btn-orange {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 4px 14px rgba(251,124,62,.28);
}
.btn-orange:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
}

.btn-sm { padding: 12px 20px; font-size: 14px; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge-cyan   { background: var(--tint-cyan-2);          color: var(--cyan-dark); }
.badge-orange { background: rgba(251,124,62,.12);        color: var(--orange-dark); }
.badge-amber  { background: rgba(245,158,11,.14);        color: #92660a; }

/* ─── Cards ──────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 28px;
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-stripe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-stripe);
}

/* ─── Scroll-Animationen ─────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.delay-1 { transition-delay: .05s; }
.fade-up.delay-2 { transition-delay: .1s; }
.fade-up.delay-3 { transition-delay: .15s; }
.fade-up.delay-4 { transition-delay: .2s; }
.fade-up.delay-5 { transition-delay: .25s; }

/* ═══════════════════════════════════════════════════════════
   NAV — gleiches Markup auf allen Seiten, nur die Links
   unterscheiden sich je Zweig.
   ═══════════════════════════════════════════════════════════ */
nav#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  border-bottom: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease), padding .2s var(--ease);
}
nav#navbar.scrolled {
  background: rgba(247, 249, 252, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
  padding: 10px 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.nav-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-brand img {
  height: 46px;
  width: 46px;
  padding: 5px;
  box-sizing: border-box;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}
.nav-brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-1);
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--blue); }

/* Der Link in den jeweils anderen Zweig — sichtbar, aber nicht laut */
.nav-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  white-space: nowrap;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-switch:hover {
  border-color: var(--cyan);
  color: var(--cyan-dark);
  background: var(--tint-cyan);
}

.nav-cta { flex-shrink: 0; }

/* Eng wird's ab 1180px — dann kürzt der Name auf "Kenzo Weiss", statt ganz zu
   verschwinden. Ein 36px-Logo allein sagt niemandem, wer hier schreibt.
   Die Kurzform steckt als data-short im Markup. */
@media (max-width: 1180px) {
  .nav-brand-name { font-size: 0; }
  .nav-brand-name::after {
    content: attr(data-short);
    font-size: 16px;
  }
}

/* ─── Hamburger + Mobile-Menü ────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-1);
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  /* Über der Nav (100): sonst liegt das Hamburger-Icon auf dem Schließen-X (2026-09-11). */
  z-index: 101;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu .mobile-link {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-1);
  transition: color var(--transition);
}
.mobile-menu .mobile-link:hover { color: var(--blue); }
.mobile-menu .nav-switch { font-size: 16px; padding: 10px 20px; }

/* Querformat auf dem Handy (z.B. 667×375): neun Einträge passen nicht zentriert in die
   Höhe, oben und unten wurde abgeschnitten. Dann oben anfangen und scrollen lassen. */
@media (max-height: 560px) {
  .mobile-menu { justify-content: flex-start; padding-top: 72px; gap: 18px; overflow-y: auto; }
  .mobile-menu .mobile-link { font-size: 22px; }
}

.mobile-close {
  position: absolute;
  top: 20px; right: 20px;
  background: none;
  border: none;
  color: var(--ink-1);
  font-size: 28px;
  line-height: 1;
}

/* Überarbeitung 2026-09-11, Befund 20: Hamburger ab 1200px statt 900px. Vorher mussten
   Links, Switch und CTA zwischen 901 und 1200px auf 12px schrumpfen, damit die
   Zeile passte (Quetsch-Block, entfernt). Jetzt: volle Nav oder Menü, nichts dazwischen. */
@media (max-width: 1200px) {
  .nav-links, .nav-cta, .nav-inner > .nav-switch { display: none; }
  .hamburger { display: flex; }
  /* Im Hamburger-Modus ist wieder Platz: nur Logo und Menü-Icon in der Zeile.
     Die Kurzform "Kenzo Weiss" (data-short, Regel bei 1180px) kommt zurück —
     ein nacktes Logo sagt auf dem Handy niemandem, wer hier schreibt. */
  .nav-brand-name { display: block; }
}

/* ═══════════════════════════════════════════════════════════
   ZWEIG-STREIFEN — der Weg in den jeweils anderen Bereich,
   direkt über dem Footer.
   ═══════════════════════════════════════════════════════════ */
.branch-strip { padding: 0 clamp(20px, 5vw, 80px) 64px; }
.branch-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.branch-strip-text h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}
.branch-strip-text p { font-size: 16px; color: var(--ink-3); }

@media (max-width: 640px) {
  .branch-strip-inner { flex-direction: column; align-items: flex-start; padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 56px clamp(20px, 5vw, 80px) 40px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img {
  height: 42px;
  width: 42px;
  padding: 5px;
  box-sizing: border-box;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-md);
}
.footer-brand-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--ink-1); }

.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--ink-3);
  padding: 4px 0;
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--blue); }

.footer-bottom {
  max-width: 1200px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-4);
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ─── Reduced Motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}