/* ═══════════════════════════════════════════════════════
   SSV-Rattenberg · main.css
   CSS Custom Properties · Reset · Dark Mode · Typografie
   ═══════════════════════════════════════════════════════ */

/* ── Color Scheme Declaration ── */
:root { color-scheme: light dark; }

/* ══════════════════════════════
   LIGHT MODE (Default)
══════════════════════════════ */
:root,
[data-theme="light"] {
  /* Backgrounds */
  --c-bg:       #f4f4f2;
  --c-surface:  #ffffff;
  --c-surface2: #edece9;
  --c-surface3: #e5e4e1;

  /* Text */
  --c-text:     #1a1a1a;
  --c-text-2:   #444;
  --c-text-3:   #888;

  /* Accent-Tint (heller Rot-Ton; im Dark-Mode bewusst gedämpft, siehe Dark-Blöcke) */
  --c-accent-l: #fde8e8;

  /* Border */
  --c-border:   rgba(0,0,0,0.09);
  --c-border-2: rgba(0,0,0,0.14);

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.18);
}

/* ══════════════════════════════
   DARK MODE (System)
══════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:       #0f1923;
    --c-surface:  #162032;
    --c-surface2: #1c2a3c;
    --c-surface3: #213045;

    --c-text:     #e8eaed;
    --c-text-2:   #b0bac5;
    --c-text-3:   #7a8694;

    --c-border:   rgba(255,255,255,0.1);
    --c-border-2: rgba(255,255,255,0.16);

    --c-accent-l: rgba(200,24,26,0.18);

    --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
    --shadow:     0 2px 12px rgba(0,0,0,0.35);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);
  }
}

/* ══════════════════════════════
   DARK MODE (Manual Toggle)
══════════════════════════════ */
[data-theme="dark"] {
  --c-bg:       #0f1923;
  --c-surface:  #162032;
  --c-surface2: #1c2a3c;
  --c-surface3: #213045;

  --c-text:     #e8eaed;
  --c-text-2:   #b0bac5;
  --c-text-3:   #7a8694;

  --c-border:   rgba(255,255,255,0.1);
  --c-border-2: rgba(255,255,255,0.16);

  --c-accent-l: rgba(200,24,26,0.18);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.25);
  --shadow:     0 2px 12px rgba(0,0,0,0.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);
}

/* ── Fixed Brand Colors (same in both modes) ── */
/* Hinweis: --c-accent-l ist NICHT fix (Light: #fde8e8, Dark: gedämpftes
   transparentes Rot) und wird daher in den Light-/Dark-Blöcken definiert. */
:root {
  --c-accent:   #c8181a;
  --c-accent-d: #a01214;
  --c-navy:     #0d1b2a;
  --c-navy-2:   #162032;
  --c-navy-3:   #1c2a3c;
  --c-green:    #2d6a0a;
  --c-wa:       #25d366;
  --c-wa-d:     #1da855;

  /* Spacing & Radius */
  --r-xs: 5px;
  --r-sm: 7px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Typography Scale (rem-basiert, 1rem = 16px) */
  --fz-xs:   0.625rem;   /* 10px */
  --fz-sm:   0.75rem;    /* 12px */
  --fz-md:   0.875rem;   /* 14px */
  --fz-base: 0.9375rem;  /* 15px */
  --fz-lg:   1.125rem;   /* 18px */
  --fz-xl:   1.4rem;     /* 22.4px */
  --fz-2xl:  1.6rem;     /* 25.6px */
  --fz-3xl:  2rem;       /* 32px */
  --fz-hero: clamp(2rem, 4vw, 2.8rem);
}

/* ══════════════════════════════
   CSS RESET
══════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: 'Barlow', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img { height: auto; }

input, button, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', system-ui, sans-serif;
  line-height: 1.15;
  font-weight: 700;
}

/* ══════════════════════════════
   ACCESSIBILITY
══════════════════════════════ */

/* Skip to main content */
.skip-link {
  position: absolute;
  left: -100%;
  top: 0.5rem;
  padding: 0.6rem 1.2rem;
  background: var(--c-accent);
  color: #fff;
  font-weight: 600;
  font-size: var(--fz-sm);
  border-radius: var(--r);
  z-index: 9999;
  transition: left 0.15s;
}
.skip-link:focus {
  left: 0.5rem;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Focus ring (WCAG 2.2 §2.4.11) */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Screen-reader only */
.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;
}

/* ══════════════════════════════
   REDUCED MOTION
══════════════════════════════ */
@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;
  }
}

/* ══════════════════════════════
   LAYOUT UTILITIES
══════════════════════════════ */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 2rem;
}

.sec {
  padding: 3rem 2rem;
}

.sec + .sec {
  padding-top: 1.5rem;
}

.eyebrow {
  font-family: 'Barlow', sans-serif;
  font-size: var(--fz-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: 0.5rem;
  margin-bottom: 6px;
}

.sec-h {
  font-size: var(--fz-2xl);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 1.75rem;
  line-height: 1.2;
}

/* ══════════════════════════════
   BUTTON BASE
══════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: var(--r);
  font-size: var(--fz-md);
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--c-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--c-accent-d); }
.btn-primary:focus-visible { outline-color: #fff; }

.btn-sm { font-size: 13px; padding: 6px 14px; }

.btn-outline {
  background: transparent;
  color: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.3);
}
.btn-outline:hover { border-color: rgba(255,255,255,0.7); color: #fff; }

.btn-wa {
  background: var(--c-wa);
  color: #fff;
}
.btn-wa:hover { background: var(--c-wa-d); }

.btn-ghost {
  background: var(--c-surface2);
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-surface3); }

/* ══════════════════════════════
   BADGE
══════════════════════════════ */
.badge {
  display: inline-block;
  font-size: var(--fz-xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}
.badge-red  { background: var(--c-accent-l); color: #9a1012; }
.badge-blue { background: #e4f0fb;           color: #0b3f73; }

[data-theme="dark"] .badge-red  { background: rgba(200,24,26,0.2); color: #f08080; }
[data-theme="dark"] .badge-blue { background: rgba(11,63,115,0.25); color: #7ab4e8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-red  { background: rgba(200,24,26,0.2); color: #f08080; }
  :root:not([data-theme="light"]) .badge-blue { background: rgba(11,63,115,0.25); color: #7ab4e8; }
}

/* ══════════════════════════════
   RESPONSIVE BREAKPOINTS
   (used across both CSS files)
══════════════════════════════ */
/*
  xl  ≥ 1400px   Large desktop
  lg  ≥ 1024px   Desktop / Notebook  (default)
  md  ≤ 900px    Tablet
  sm  ≤ 620px    Mobile
  xs  ≤ 420px    Small mobile
*/