/* ==========================================================================
   ADURO — base.css
   Design-Tokens, Reset, Typografie, Zugänglichkeit
   ========================================================================== */

/* ── Design-Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Farben */
  --ink:          #2b2b2b;
  --ink-2:        #4a4a4a;
  --muted:        #6a6a6a;
  --line:         #e3e1dc;
  --line-2:       #dcd9d1;
  --bg:           #f1ede4;
  --page:         #f6f4ee;
  --card:         #ffffff;
  --topbar:       #2d2d2d;
  --accent:       #5a7a2b;
  --accent-2:     #7fa23d;
  --accent-dark:  #3e5a1c;
  --btn:          #c97a3a;
  --btn-hover:    #b06326;
  --star:         #e0a21a;
  --error:        #c0392b;
  --success:      #4a8a2b;

  /* Glassmorphism — auf dunklem Hintergrund */
  --glass-bg:            rgba(255,255,255,.12);
  --glass-bg-strong:     rgba(255,255,255,.22);
  --glass-border:        rgba(255,255,255,.28);
  --glass-border-strong: rgba(255,255,255,.45);
  --glass-blur:          blur(14px) saturate(140%);
  --glass-shadow:        0 8px 30px rgba(0,0,0,.18);

  /* Glassmorphism — auf hellem Hintergrund */
  --glass-light-bg:      rgba(255,255,255,.72);
  --glass-light-border:  rgba(40,30,15,.08);
  --glass-light-blur:    blur(16px) saturate(140%);
  --glass-light-shadow:  0 10px 30px rgba(40,30,15,.1);

  /* Typografie */
  --font-sans:    'Open Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace;

  /* Schriftgrößen-Skala */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  26px;
  --text-3xl:  34px;
  --text-4xl:  clamp(32px, 4vw, 48px);
  --text-5xl:  clamp(40px, 5.2vw, 72px);

  /* Abstände */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radien */
  --radius-sm:   3px;
  --radius:      4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 9999px;

  /* Übergänge */
  --transition: .15s ease;
  --transition-md: .25s ease;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow:     0 4px 14px rgba(0,0,0,.1);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.15);

  /* Layout */
  --max-w:      1280px;
  --max-w-text: 720px;
  --sidebar-w:  280px;

  /* Header-Höhe (für offset-Berechnungen) */
  --header-h: 78px;
}

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

/* ── HTML & Body ────────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Links ──────────────────────────────────────────────────────────────────── */
a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--accent); }

/* Sichtbarer Fokus für Barrierefreiheit */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Bilder & Medien ────────────────────────────────────────────────────────── */
img, video, svg {
  display: block;
  max-width: 100%;
}

img { height: auto; }

/* ── Typografie ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: .02em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p { line-height: 1.65; }

p + p { margin-top: var(--space-4); }

strong { font-weight: 700; }
em     { font-style: italic; }

/* ── Listen ─────────────────────────────────────────────────────────────────── */
ul, ol {
  padding-left: var(--space-6);
}

li { line-height: 1.65; }

/* ── Formulare (Basis) ──────────────────────────────────────────────────────── */
button, input, select, textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

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

/* ── Screenreader-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-width: 0;
}

/* Skip-to-content Link (Barrierefreiheit) */
.skip-to-content {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-3) var(--space-6);
  background: var(--accent);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  font-size: var(--text-sm);
}

.skip-to-content:focus {
  top: 0;
}

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

/* ── Druck ──────────────────────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .nav-cart, .hamburger, .mobile-nav { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  a { color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
}