/* RausAmWochenende — raw-foundation.css
   Reset, Design-Tokens, Mona Sans SemiExpanded Typografie & Basisstile */

@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght,wdth@0,200..900,75..125;1,200..900,75..125&display=swap');

@layer reset, tokens, base, layout, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
  ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
  img, picture, svg { display: block; max-width: 100%; }
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  fieldset { border: 0; margin: 0; padding: 0; }

  @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;
    }
  }
}

@layer tokens {
  :root {
    /* RausAmWochenende Exklusive Farbpalette */
    --wb-cream: #F6EFED;         /* Primärer Seitenhintergrund */
    --wb-cream-deep: #ECE4E2;    /* Sanfte Karten-/Container-Oberfläche */
    --wb-beige: #DFD5D2;         /* Abgrenzungen & Trennlinien */
    --wb-ink: #233835;           /* Primärer Fließtext & Kontraste */
    --wb-ink-soft: #446762;      /* Sekundärer Text / Marken-Schliff */
    --wb-forest: #446762;        /* Sekundäre Hauptmarkenfarbe (#446762) */
    --wb-orange: #446762;        /* Akzent- und Interaktionsfarbe */
    --wb-orange-dark: #35524E;   /* Dunklere Nuance für Hover-Zustände */
    --wb-mint: #DDE8E6;          /* Zarter Fokus- & Selektionston */
    --wb-line: rgba(68, 103, 98, 0.18);
    --wb-line-soft: rgba(68, 103, 98, 0.09);
    --wb-white: #FFFFFF;
    --wb-star: #D97736;

    --wb-surface: var(--wb-cream);
    --wb-surface-alt: var(--wb-cream-deep);
    --wb-text: var(--wb-ink);
    --wb-text-muted: var(--wb-ink-soft);

    /* Hauptschriftart — Mona Sans SemiExpanded */
    --wb-font-display: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --wb-font-body: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --wb-radius-sm: 0.5rem;
    --wb-radius-md: 0.9rem;
    --wb-radius-lg: 1.4rem;
    --wb-radius-pill: 999px;

    --wb-shadow-card: 0 16px 36px -20px rgba(68, 103, 98, 0.22);
    --wb-shadow-float: 0 24px 50px -16px rgba(68, 103, 98, 0.28);

    --wb-space-1: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
    --wb-space-2: clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem);
    --wb-space-3: clamp(1.4rem, 1.2rem + 0.6vw, 1.9rem);
    --wb-space-4: clamp(2.2rem, 1.8rem + 1.2vw, 3.2rem);
    --wb-space-5: clamp(3.4rem, 2.6rem + 2.4vw, 5.6rem);

    --wb-content-max: 1240px;
    --wb-wide-max: 1520px;

    color-scheme: light;
  }
}

@layer base {
  html { block-size: 100%; }

  body {
    background: var(--wb-surface);
    color: var(--wb-text);
    font-family: var(--wb-font-body);
    font-stretch: semi-expanded;
    font-variation-settings: 'wdth' 115;
    font-size: 1rem;
    line-height: 1.55;
    min-block-size: 100%;
    text-rendering: optimizeLegibility;
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  h1, h2, h3, h4 {
    font-family: var(--wb-font-display);
    font-stretch: semi-expanded;
    font-variation-settings: 'wdth' 115;
    color: var(--wb-forest);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  h1 { font-size: clamp(2.1rem, 1.6rem + 2.6vw, 3.6rem); }
  h2 { font-size: clamp(1.6rem, 1.35rem + 1.4vw, 2.4rem); }
  h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); }
  h4 { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.12rem); }

  p { max-width: 68ch; }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid var(--wb-forest);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection { background: #DDE8E6; color: #233835; }
}

@layer utilities {
  .wb-visually-hidden {
    position: absolute !important;
    inset: auto auto 0 0;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .wb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-family: var(--wb-font-body);
    font-stretch: semi-expanded;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wb-forest);
  }

  .wb-eyebrow::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: currentColor;
  }

  .wb-lede {
    color: var(--wb-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
    max-width: 62ch;
  }

  .wb-text-center { text-align: center; }
  .wb-mx-auto { margin-inline: auto; }

  .wb-skip-link {
    position: absolute;
    left: 1rem;
    top: -3.5rem;
    background: var(--wb-forest);
    color: var(--wb-cream);
    padding: 0.7rem 1.1rem;
    border-radius: var(--wb-radius-sm);
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 200;
    transition: top 0.18s ease;
  }

  .wb-skip-link:focus {
    top: 1rem;
  }
}