/* Grundlage für alle Seiten: Schriften, Design-Tokens, Reset, Buttons und wiederkehrende Bausteine. */

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

@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../fonts/barlow-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Kaushan Script"; src: url("../fonts/kaushan-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; line-height: 1.5; tab-size: 4; }
  body { line-height: inherit; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  img, svg, video { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  ol, ul { list-style: none; }
  input, button, textarea, select { font: inherit; color: inherit; background-color: transparent; border-radius: 0; }
  button { cursor: pointer; }
  textarea { resize: vertical; }
  ::placeholder { opacity: 1; color: color-mix(in oklab, currentcolor 50%, transparent); }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

@layer tokens {
  :root {
    /* Logo: MDK Stahlblau (Meta theme-color, Anruf-Button) */
    --brand: oklch(0.53 0.09 249.79);
    --brand-light: oklch(0.60 0.09 249.79);

    /* Flyer-Stil: Nachtblau + Leuchtblau */
    --navy-950: #061631;
    --navy-900: #0a2148;
    --navy-800: #0f2f63;
    --navy-700: #16407f;
    --sky: #2f9bf0;
    --sky-light: #6cc0ff;
    --white: #fff;

    --gray-50: oklch(98.5% .002 247.839);
    --gray-100: oklch(96.7% .003 264.542);
    --gray-200: oklch(92.8% .006 264.531);
    --gray-300: oklch(87.2% .01 258.338);
    --gray-500: oklch(55.1% .027 264.364);
    --gray-600: oklch(44.6% .03 256.802);
    --gray-700: oklch(37.3% .034 259.733);
    --gray-800: oklch(27.8% .033 256.848);
    --gray-900: oklch(21% .034 264.665);

    --font-sans: "Barlow", system-ui, sans-serif;
    --font-script: "Kaushan Script", cursive;

    --gutter: 1.5rem;
    --section: 3rem;
    --card: 1.5rem;
    --radius-btn: 0.5rem;
    --radius-2xl: 1rem;
    --radius-xl: 0.75rem;

    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --line-relaxed: 1.625;
  }
}

@layer base {
  html { scroll-behavior: smooth; }
  body { font-family: var(--font-sans); }
  ::selection { background: var(--sky); color: var(--white); }
}

@layer components {
  .container {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .script { font-family: var(--font-script); }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- Buttons ---------- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    text-align: center;
    transition: color .15s var(--ease), background-color .15s var(--ease), border-color .15s var(--ease);

    &.btn-lg { padding: 1rem 2rem; }
  }

  .btn-sky {
    background: var(--sky);
    color: var(--white);
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgb(47 155 240 / .2), 0 4px 6px -4px rgb(47 155 240 / .2);

    &:hover { background: var(--sky-light); color: var(--navy-950); }
  }

  .btn-outline {
    border: 2px solid rgb(255 255 255 / .6);
    color: var(--white);
    font-weight: 600;

    &:hover { background: var(--white); color: var(--navy-950); }
  }

  .btn-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;

    @media (width >= 40rem) { flex-direction: row; }
  }

  /* ---------- Überschriften-Bausteine ---------- */

  /* Pillen-Label über Überschriften */
  .badge {
    display: inline-block;
    margin-bottom: 1.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid rgb(47 155 240 / .4);
    border-radius: 9999px;
    background: rgb(47 155 240 / .1);
    color: var(--sky-light);
    font-size: 0.75rem;
    line-height: calc(1 / .75);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;

    @media (width >= 48rem) { font-size: 0.875rem; line-height: calc(1.25 / .875); }
  }

  .eyebrow {
    color: var(--sky-light);
    font-size: 0.875rem;
    line-height: calc(1.25 / .875);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .section-title {
    margin-top: 0.75rem;
    color: var(--white);
    font-size: 1.875rem;
    line-height: calc(2.25 / 1.875);
    font-weight: 900;
    text-transform: uppercase;

    @media (width >= 48rem) { font-size: 2.25rem; line-height: calc(2.5 / 2.25); }
  }

  /* Leuchtende Linie unter Überschriften */
  .rule {
    height: 0.25rem;
    width: 6rem;
    border-radius: 9999px;
    background: linear-gradient(to right in oklab, var(--sky), transparent);

    &.rule-center { margin-inline: auto; background: linear-gradient(to right in oklab, transparent, var(--sky), transparent); }
    &.rule-thin { height: 0.125rem; width: 4rem; border-radius: 0; }
  }

  /* ---------- Flyer-Elemente ---------- */

  /* Häkchen im Kreis */
  .check-badge {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: radial-gradient(circle at 35% 30%, #5ab4ff, var(--sky) 60%, #1a6fc4);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0 10px rgba(47, 155, 240, 0.45);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    & svg { width: 0.875rem; height: 0.875rem; }
  }

  .check-list {
    display: grid;
    gap: 0.75rem;

    & li { display: flex; align-items: center; gap: 0.75rem; font-weight: 500; }
  }

  /* Glänzende Leistungskarte mit leuchtendem Rand */
  .flyer-card {
    border-radius: var(--radius-2xl);
    background: linear-gradient(180deg, var(--navy-700) 0%, var(--navy-800) 45%, var(--navy-900) 100%);
    border: 1px solid rgba(108, 192, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  }

  /* Foto läuft nach links weich aus (keine harte Bildkante) */
  .hero-photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%);
    mask-image: linear-gradient(to right, transparent 0%, #000 35%);
  }

  /* Runde Kontakt-Icons (Telefon, E-Mail, Instagram, Adresse) */
  .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: var(--navy-800);
    color: var(--white);
    transition: background-color .15s var(--ease);

    & svg { width: 1.25rem; height: 1.25rem; }
    &.is-square { border-radius: var(--radius-xl); }
    &.is-soft { background: rgb(47 155 240 / .15); color: var(--sky); }
    a:hover > & { background: var(--sky); }
  }
}

/* ---------- Fly-in beim ersten Sichtbarwerden ----------
   Der Startzustand gilt nur mit aktivem JavaScript (ohne bleibt alles sichtbar) und ohne Reduced-Motion. */
@layer utilities {
  @media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    .fly-in {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
      transition-delay: var(--fly-delay, 0ms);

      &.revealed { opacity: 1; transform: none; }
    }
  }

  .delay-100 { --fly-delay: 100ms; }
  .delay-120 { --fly-delay: 120ms; }
  .delay-200 { --fly-delay: 200ms; }
  .delay-240 { --fly-delay: 240ms; }
  .delay-300 { --fly-delay: 300ms; }
  .delay-360 { --fly-delay: 360ms; }
}