/* ═══════════════════════════════════════════════════════════════
   📦 CRITICAL CSS - First Paint Styles
   Synchron geladen für schnellen visuellen Aufbau
   Vollständige Styles in style.css (asynchron geladen)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   🎨 DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  /* Responsive Breakpoints */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Colors */
  --clr-bronze: #785c3a;
  --clr-bronze-dark: #5d4730;
  --clr-bronze-light: #9a7a52;
  --clr-gold: #e2c29a;
  --clr-gold-light: #f0dfc4;
  --clr-gold-glow: rgba(226, 194, 154, 0.3);
  --clr-slate: #2c3e50;
  --clr-slate-deep: #1a252f;
  --clr-slate-light: #3d5266;
  --clr-orange: #f39c12;
  --clr-orange-hover: #e67e22;
  --clr-orange-glow: rgba(243, 156, 18, 0.25);
  --clr-bg: #f9f9f9;
  --clr-bg-warm: #fdfcfa;
  --clr-bg-alt: #f0ede8;
  --clr-white: #ffffff;
  --clr-text: #1a1a1a;
  --clr-text-muted: #3d3d3d;
  --clr-text-light: #5a5a5a;
  --clr-border: rgba(120, 92, 58, 0.15);
  --clr-border-strong: rgba(120, 92, 58, 0.3);
  --clr-success: #27ae60;
  --clr-error: #e74c3c;

  /* Gradients */
  --grad-bronze: linear-gradient(135deg, var(--clr-bronze), var(--clr-bronze-dark));
  --grad-hero: linear-gradient(165deg, var(--clr-slate-deep), var(--clr-bronze) 50%, var(--clr-slate-deep));
  --grad-page: linear-gradient(165deg, var(--clr-slate-deep), var(--clr-bronze) 40%, var(--clr-bronze) 60%, var(--clr-slate-deep));
  --grad-radial-glow: radial-gradient(ellipse at center, var(--clr-gold-glow), transparent 70%);

  /* Typography */
  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --fs-hero: clamp(2.5rem, 6vw + 1rem, 4.5rem);
  --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  --fs-h4: clamp(1.1rem, 1.5vw + 0.5rem, 1.35rem);
  --fs-body: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-small: clamp(0.875rem, 0.5vw + 0.75rem, 0.9375rem);
  --fs-xs: 0.8125rem;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --container-max: 1280px;
  --header-height: 80px;
  --header-height-scrolled: 65px;

  /* Shadows & Radius */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-bronze: 0 4px 20px rgba(120, 92, 58, 0.2);
  --shadow-orange: 0 4px 25px var(--clr-orange-glow);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-fast: 150ms var(--ease-smooth);
  --transition-base: 250ms var(--ease-smooth);
}

/* ─────────────────────────────────────────────────────────────
   🌙 DARK MODE
   ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --clr-bg: #1a1a1a;
    --clr-bg-warm: #1e1e1e;
    --clr-bg-alt: #252525;
    --clr-white: #2a2a2a;
    --clr-text: #e8e8e8;
    --clr-text-muted: #a0a0a0;
    --clr-text-light: #888888;
    --clr-border: rgba(226, 194, 154, 0.15);
    --clr-border-strong: rgba(226, 194, 154, 0.25);
    --clr-gold: #c9a876;
    --clr-gold-light: #d4b989;
    --clr-gold-glow: rgba(201, 168, 118, 0.2);
    --clr-bronze-light: #a88a62;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --clr-bg: #1a1a1a;
  --clr-bg-warm: #1e1e1e;
  --clr-bg-alt: #252525;
  --clr-white: #2a2a2a;
  --clr-text: #e8e8e8;
  --clr-text-muted: #a0a0a0;
  --clr-text-light: #888888;
  --clr-border: rgba(226, 194, 154, 0.15);
  --clr-border-strong: rgba(226, 194, 154, 0.25);
  --clr-gold: #c9a876;
  --clr-gold-light: #d4b989;
  --clr-gold-glow: rgba(201, 168, 118, 0.2);
  --clr-bronze-light: #a88a62;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ─────────────────────────────────────────────────────────────
   🔧 MINIMAL RESET - Nur essentielles für First Paint
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

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

/* ─────────────────────────────────────────────────────────────
   🏛️ HEADER - Core Styles für sofortige Anzeige
   ───────────────────────────────────────────────────────────── */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-height);
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}

.header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.header__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
}

.header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header__identity {
  display: flex;
  flex-direction: column;
}

.header__name {
  font-size: clamp(0.95rem, 2vw + 0.5rem, 1.5rem);
  font-weight: 700;
  color: var(--clr-slate);
  line-height: 1.2;
  white-space: nowrap;
}

.header__tagline {
  font-size: clamp(0.6rem, 0.8vw + 0.4rem, 0.875rem);
  color: var(--clr-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.header__controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ─────────────────────────────────────────────────────────────
   🖼️ LOGO - Dark/Light Mode Switch
   ───────────────────────────────────────────────────────────── */
.logo-dark {
  display: none;
}

.logo-light {
  display: block;
}

[data-theme="dark"] .logo-light {
  display: none;
}

[data-theme="dark"] .logo-dark {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light {
    display: none;
  }

  :root:not([data-theme="light"]) .logo-dark {
    display: block;
  }
}

/* ─────────────────────────────────────────────────────────────
   📱 MOBILE TOGGLE - Basis für Hamburger-Menü
   ───────────────────────────────────────────────────────────── */
.mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

@media (min-width: 768px) {
  .mobile-toggle {
    display: none;
  }
}

.mobile-toggle__line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--clr-slate);
  border-radius: var(--radius-full);
}

/* Desktop Nav - ausblenden auf Mobil */
.nav {
  display: none;
}

@media (min-width: 768px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
}

/* Mobile Nav - initial versteckt */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--clr-white);
  z-index: 990;
  opacity: 0;
  visibility: hidden;
}

.mobile-nav--open {
  opacity: 1;
  visibility: visible;
}

/* ─────────────────────────────────────────────────────────────
   📱 RESPONSIVE - Kritische Breakpoints für Header
   ───────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .header__logo {
    width: 44px;
    height: 44px;
  }

  .header__name {
    font-size: 0.95rem;
  }

  .header__tagline {
    display: none;
  }

  .header__brand {
    gap: var(--space-xs);
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .header__logo {
    width: 56px;
    height: 56px;
  }

  .header__name {
    font-size: 1.05rem;
  }

  .header__tagline {
    font-size: 0.6rem;
  }

  .header__brand {
    gap: var(--space-sm);
  }
}

/* ─────────────────────────────────────────────────────────────
   📱 ULTRA SMALL - Sehr kleine Displays
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  :root {
    --fs-hero: clamp(1.75rem, 8vw, 2.5rem);
    --fs-h1: clamp(1.5rem, 7vw, 2rem);
    --fs-h2: clamp(1.25rem, 6vw, 1.5rem);
    --fs-body: 0.9rem;
    --space-lg: 1.5rem;
  }

  .header__logo {
    width: 40px;
    height: 40px;
  }

  .header__name {
    font-size: 0.85rem;
  }

  .header__brand {
    gap: 0.25rem;
  }
}

@media (max-width: 340px) {
  :root {
    --fs-hero: 1.35rem;
    --fs-h1: 1.2rem;
    --fs-body: 0.85rem;
    --space-lg: 1.25rem;
  }

  .header {
    height: 60px;
  }

  .header__logo {
    width: 36px;
    height: 36px;
  }

  .header__name {
    font-size: 0.75rem;
  }

  .mobile-toggle {
    width: 38px;
    height: 38px;
  }
}

/* ─────────────────────────────────────────────────────────────
   WhatsApp Floating Button
   ───────────────────────────────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  right: 2rem;
  bottom: calc(2rem + 50px + 0.5rem);
  z-index: 1100;
  background: #25D366;
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s, transform 150ms ease, box-shadow 150ms ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.whatsapp-float.visible {
  opacity: 1;
  visibility: visible;
}

.whatsapp-float svg {
  width: 24px;
  height: 24px;
  fill: white;
  stroke: white;
}

.whatsapp-float::after {
  content: "Per WhatsApp kontaktieren";
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(calc(-50% - 90px)) translateY(8px);
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  letter-spacing: 0.5px;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1110;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.whatsapp-float:hover::after,
.whatsapp-float:focus::after,
.whatsapp-float:focus-within::after {
  opacity: 1;
  transform: translateX(calc(-50% - 62px)) translateY(-8px);
}

@media (max-width: 420px) {
  .whatsapp-float::after {
    font-size: 12px;
    padding: 5px 8px;
    transform: translateX(calc(-50% - 60px)) translateY(8px);
  }
}