/**
 * JUSTANDERSSON – Shared Styles
 * Phase 2, Schritt 2.1
 * 
 * Zentrale CSS-Datei mit allen Design-Tokens, Base-Styles,
 * Glasmorphism-Komponenten und Animationen.
 * 
 * EINBINDUNG auf jeder Seite:
 *   <link rel="stylesheet" href="shared/styles.css">
 * 
 * HINWEIS: Die index.html behält vorerst noch ihre eigenen
 * Styles (da sie seitenspezifische Layouts wie Hero, Timeline
 * etc. enthält). Alle NEUEN Unterseiten nutzen diese Datei.
 */

/* ============================================================
   DESIGN-TOKENS (CSS Custom Properties)
   
   "Custom Properties" sind CSS-Variablen, die mit -- beginnen.
   Sie werden einmal hier definiert und können dann überall mit
   var(--name) verwendet werden. Ändert man den Wert hier,
   ändert er sich automatisch auf allen Seiten.
   ============================================================ */
:root {
  /* ── Farben ── */
  --blue: #3D5E77;
  --blue-dark: #2C4A5E;
  --blue-light: #5A8BA6;
  --lime: #C6CF15;
  --lime-glow: #D4DD30;
  --gray: #A2A2A2;
  --gray-light: #E8E8E8;
  --white: #FFFFFF;
  --bg: #F8F9FA;
  --text: #1A1A2E;
  --text-light: #555566;

  /* ── Glasmorphism ── */
  /* "Glasmorphism" ist ein Designtrend, bei dem Elemente wie
     mattiertes Glas aussehen – halbtransparent mit Unschärfe */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(61, 94, 119, 0.12);
  --glass-blur: blur(20px) saturate(160%);

  /* ── Abstände (Spacing) ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 100px;

  /* ── Abrundungen ── */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 100px;

  /* ── Schriften ── */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Syne', sans-serif;

  /* ── Sonstiges ── */
  --max-width: 1100px;
  --nav-height: 70px;
  --nav-height-scrolled: 56px;
  --transition-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   RESET & BASE-STYLES
   ============================================================ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ============================================================
   ACCESSIBILITY (Barrierefreiheit)
   ============================================================ */

/* Versteckter Text für Screenreader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-Link: Springt direkt zum Hauptinhalt (für Tastatur-User) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Focus-Ring nur bei Tastatur-Navigation */
*:focus { outline: none; }
*:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
  border-radius: 4px;
}
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}

/* Reduzierte Bewegung für Nutzer, die das bevorzugen */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--blue-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  color: var(--blue-dark);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.section-title span { color: var(--lime); }

.section-desc {
  font-size: 17px;
  color: var(--text-light);
  max-width: 680px;
  line-height: 1.8;
}


/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: var(--space-4xl) var(--space-lg);
}

/* Hauptinhalt bekommt oben Platz für die fixierte Navigation */
.page-content {
  padding-top: var(--nav-height);
}


/* ============================================================
   NAVIGATION (Shared – für alle Seiten)
   
   Die Navigation wird per JavaScript in #nav-container eingefügt.
   Auf Unterseiten ist sie immer im "scrolled"-Zustand (also
   mit weißem Hintergrund), da es dort keinen Hero gibt.
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease;
}

/* "scrolled" Zustand: Weißer Glaseffekt-Hintergrund */
.nav.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 40px;
}

/* Auf Unterseiten: Nav ist IMMER im scrolled-Modus */
.nav.nav-subpage {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--glass-border);
  padding: 10px 40px;
}
.nav.nav-subpage .nav-links a { color: var(--text); }
.nav.nav-subpage .nav-toggle span { background: var(--text); }
.nav.nav-subpage .lang-btn {
  background: rgba(61, 94, 119, 0.08);
  color: var(--text);
  border-color: rgba(61, 94, 119, 0.15);
}

.nav-logo {
  height: 38px;
  transition: height 0.3s;
}
.nav.scrolled .nav-logo,
.nav.nav-subpage .nav-logo {
  height: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: all 0.3s;
  letter-spacing: 0.02em;
}
.nav.scrolled .nav-links a { color: var(--text); }

.nav-links a:hover {
  background: rgba(198, 207, 21, 0.15);
  color: var(--blue-dark);
}

/* Aktiver Menüpunkt */
.nav-links a.active {
  background: rgba(198, 207, 21, 0.2);
  color: var(--blue-dark);
  font-weight: 600;
}

/* Shop-Button (hervorgehoben) */
.nav-links a.btn-shop {
  background: var(--lime);
  color: var(--blue-dark);
  font-weight: 600;
  padding: 8px 22px;
}
.nav-links a.btn-shop:hover {
  background: var(--lime-glow);
  transform: scale(1.04);
}


/* ============================================================
   SPRACHWECHSLER (Language Switcher)
   ============================================================ */
.lang-switcher {
  position: relative;
  margin-left: 8px;
}

.lang-btn {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.3s;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav.scrolled .lang-btn {
  background: rgba(61, 94, 119, 0.08);
  color: var(--text);
  border-color: rgba(61, 94, 119, 0.15);
}
.lang-btn:hover { background: rgba(198, 207, 21, 0.2); }
.lang-btn svg { width: 12px; height: 12px; transition: transform 0.3s; }
.lang-switcher.open .lang-btn svg { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-width: 140px;
  box-shadow: var(--glass-shadow), 0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: all 0.25s var(--transition-smooth);
}
.lang-switcher.open .lang-dropdown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.lang-option {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s;
}
.lang-option:hover { background: rgba(198, 207, 21, 0.15); }
.lang-option.active { background: var(--lime); color: var(--blue-dark); font-weight: 600; }


/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  margin: 6px 0;
  transition: all 0.3s;
  border-radius: 2px;
}
.nav.scrolled .nav-toggle span,
.nav.nav-subpage .nav-toggle span {
  background: var(--text);
}


/* ============================================================
   BUTTONS (Wiederverwendbar)
   ============================================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s;
  background: var(--lime);
  color: var(--blue-dark);
  border: none;
  cursor: pointer;
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(198, 207, 21, 0.4);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }

/* Ghost-Button Variante für helle Hintergründe */
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s;
  background: transparent;
  border: 2px solid var(--blue);
  color: var(--blue);
  cursor: pointer;
}
.btn-ghost-dark:hover {
  background: var(--blue);
  color: var(--white);
}


/* ============================================================
   GLASMORPHISM KARTEN
   
   "Glasmorphism" ist der Effekt, bei dem Elemente wie mattiertes
   Glas aussehen. Der Trick ist backdrop-filter: blur(), das den
   Hintergrund hinter dem Element unscharf macht.
   ============================================================ */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s;
}
.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(61, 94, 119, 0.18);
}

/* Karte ohne Hover-Animation */
.glass-card-static {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}


/* ============================================================
   FOOTER (Shared – für alle Seiten)
   ============================================================ */
footer {
  background: var(--white);
  padding: 48px 24px 32px;
  border-top: 1px solid var(--gray-light);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-logo {
  height: 30px;
  opacity: 0.7;
}

.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--blue); }

.footer-copy {
  width: 100%;
  text-align: center;
  font-size: 13px;
  color: var(--text-light);
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-light);
}


/* ============================================================
   SCROLL-ANIMATIONEN (Reveal-Effekte)
   
   Elemente mit der Klasse "reveal" sind zunächst unsichtbar
   und gleiten sanft herein, wenn sie in den Bildschirm scrollen.
   Der JavaScript IntersectionObserver fügt die Klasse "visible"
   hinzu, sobald das Element sichtbar wird.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }


/* ============================================================
   ANIMATIONEN
   ============================================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Bild-Platzhalter (Ladeanimation) */
.img-placeholder {
  background: linear-gradient(135deg, #e0e4e8 0%, #cdd3d9 50%, #e0e4e8 100%);
  background-size: 200% 200%;
  animation: shimmer 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray);
  font-size: 14px;
  font-weight: 500;
  min-height: 200px;
}


/* ============================================================
   SUCHFELD (Für Konfigurator, Waschzettel, Anleitungen)
   ============================================================ */
.search-container {
  max-width: 640px;
  margin: 0 auto;
}

.search-input-wrap {
  position: relative;
}

.search-input {
  width: 100%;
  padding: 16px 24px 16px 52px;
  font-family: var(--font-body);
  font-size: 16px;
  border: 2px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
.search-input::placeholder {
  color: var(--gray);
}
.search-input:focus {
  border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(198, 207, 21, 0.15), var(--glass-shadow);
}

.search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--gray);
  pointer-events: none;
}


/* ============================================================
   PAGE HEADER (Seitenkopf für Unterseiten)
   ============================================================ */
.page-header {
  padding: calc(var(--nav-height) + 48px) 24px 48px;
  text-align: center;
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(198, 207, 21, 0.12) 0%, transparent 70%);
  border-radius: 50%;
}

.page-header .section-label { color: var(--lime); }
.page-header .section-title { color: var(--white); }
.page-header .section-title span { color: var(--lime); }
.page-header .section-desc { color: rgba(255, 255, 255, 0.75); margin: 0 auto; }


/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    z-index: 999;
  }
  .nav-links.open { display: flex; }
  .nav-links a { color: var(--text); font-size: 18px; padding: 14px 20px; }
  .nav-toggle { display: block; z-index: 1001; }
  .lang-switcher { position: static; }

  section { padding: var(--space-3xl) 20px; }

  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { justify-content: center; }
}