/* Rabouz Studio — Shared Tokens + Base */
/* Eingesetzt von allen Seiten, gecached site-weit */

:root {
  /* Neutrale (tinted toward warm hue 60-80) */
  --ink:          oklch(0.24 0.024 256);  /* #142038 dark navy-ink */
  --ink-soft:     oklch(0.45 0.005 80);   /* #4a4a4a neutral */
  --ink-faint:    oklch(0.66 0.005 80);   /* #9a9a9a */
  --navy:         oklch(0.27 0.038 263);  /* #1a2540 */
  --cream:        oklch(0.974 0.006 80);  /* #faf8f5 warm cream */
  --cream-d:      oklch(0.945 0.009 80);  /* #f2ede6 */
  --white:        oklch(1 0 0);           /* #ffffff pure for hero contrast */
  --bdr:          oklch(0.91 0.008 80);   /* #e5e0d9 */

  /* Brand-Akzente (höhere chroma) */
  --gold:         oklch(0.69 0.115 88);   /* #b49640 */
  --acc:          oklch(0.6 0.14 45);     /* #c8602a orange */
  --acc-lt:       oklch(0.9 0.035 50);    /* #f2e0d5 */
  --acc-dk:       oklch(0.5 0.13 40);     /* #a04820 */

  /* Typografie */
  --serif:        'DM Serif Display', Georgia, serif;
  --sans:         'DM Sans', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Spacing/Radius */
  --r:            6px;
  --r-lg:         12px;
  --r-xl:         22px;

  /* Shadows + Easing */
  --sh-md:        0 4px 14px oklch(0.24 0.024 256 / .06);
  --sh-lg:        0 12px 32px oklch(0.24 0.024 256 / .10);
  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-drawer:  cubic-bezier(.32, .72, 0, 1);
}

/* Universal Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* Common Header */
#hdr.scrolled { box-shadow: var(--sh-md); }
.hdr-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 24px; }
.logo-img-link { display: flex; align-items: center; flex-shrink: 0; }

/* Skip-Link (A11y) — transform statt top für GPU-Optimierung */
.skip-link {
  position: absolute;
  top: 0;
  left: 16px;
  background: var(--acc);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  font-size: .875rem;
  z-index: 9999;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* Buttons (shared) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-lg);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 250ms var(--ease-out), background 250ms var(--ease-out), color 250ms var(--ease-out), box-shadow 250ms var(--ease-out), border-color 250ms var(--ease-out);
  white-space: nowrap;
}
.btn-lg  { padding: 15px 34px; font-size: .9375rem; }
.btn-sm  { min-height: 44px; padding: 12px 20px; font-size: .8rem; }
.btn-dark  { background: var(--ink); color: var(--white); }
.btn-dark:hover  { background: oklch(0.32 0.024 256); }
.btn-acc   { background: var(--acc); color: var(--white) !important; border: none; }
.btn-acc:hover   { background: var(--acc-dk); }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--bdr); }
.btn-ghost:hover { background: var(--cream-d); border-color: var(--ink); }

/* FAQ Accordion (Native <details>) — smooth open/close */
/* interpolate-size unlocks height-keyword animation (Baseline 2024) */
:root { interpolate-size: allow-keywords; }

details::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 250ms var(--ease-out), content-visibility 250ms allow-discrete;
  transition-behavior: allow-discrete;
}
details[open]::details-content {
  block-size: auto;
}

/* Reduced Motion (Global Catch-All) */
@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;
  }
}