/* @imports MÜSSEN am Anfang der Datei stehen (CSS-Spec).
   Inter ersetzt Cormorant + Parisienne komplett (Selina-Vorgabe).
   Light/Regular/Medium/Bold reicht für Display- und Body-Hierarchie. */
@import "@fontsource/inter/300.css";
@import "@fontsource/inter/400.css";
@import "@fontsource/inter/500.css";
@import "@fontsource/inter/700.css";

/* ============================================================
   BASE · Reset, Body, Typografie-Defaults, Paper, Reduced-Motion
   ============================================================ */

/* ============================================================
   FONTS · Self-Hosted (DSGVO-konform)

   Strategie:
   - Above-the-fold-Schriften: eigene @font-face mit Public-Path
     (für deterministische <link rel="preload">-Tags pro Seite).
   - Restliche Weights: @fontsource (oben via @import).
   - font-display: swap überall (FOIT-Window minimal, Fallback Georgia).
   ============================================================ */

/* Inter 300 — Display-Light (Headlines, Hero) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-latin-300-normal.woff2') format('woff2');
}

/* Inter 400 — Body (häufigste Fold-Schrift) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}

/* Inter 500 — Medium (Nav, Buttons, Eyebrows) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
}

/* Inter 700 — Bold (Akzent-Headlines, Preise, harte Akzente) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-latin-700-normal.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  color: inherit;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* ============================================================
   GLOBAL HEADLINE DEFAULTS (Inter)
   Headlines: Light (300) + tighter tracking → editorial feel.
   Pro-Seite-Overrides bleiben frei (höhere Spezifität).
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.1;
}
h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
strong, b { font-weight: 700; }

/* ============================================================
   PAPER TEXTURE — haptisches Buch-Gefühl
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.82 0 0 0 0 0.78 0 0 0 0 0.72 0 0 0 0.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}

/* ============================================================
   SVG-DEFS Container (Watercolor-Filter wird einmal global injiziert)
   ============================================================ */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================================================
   PAGE SHELL (über dem Paper, unter den Modalen)
   ============================================================ */
.page {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   SKIP LINK — Keyboard-Accessibility
   ============================================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 24px;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 20px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ============================================================
   GLOBAL FOCUS — Bridget-konform, sichtbar aber dezent
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   VIEW TRANSITIONS — Buch-Blätter zwischen Seiten
   Same-Document MPA-Variante (Chrome/Edge stable, Safari 18+,
   Firefox via Flag). Ohne API: normale Page-Loads.
   ============================================================ */
@view-transition { navigation: auto; }

/* Root-Crossfade: kein harter Cut zwischen Seiten */
::view-transition-old(root) {
  animation: 280ms cubic-bezier(0.4, 0, 0.2, 1) both vt-fade-out;
}
::view-transition-new(root) {
  animation: 380ms cubic-bezier(0.16, 1.0, 0.3, 1.0) both vt-fade-in;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Persistierende Elemente — morphen statt zu fadern (Buch-Gefühl).
   Die Selektoren sind bewusst defensiv gegenüber duplicate names:
   wenn aus irgendeinem Grund mehrere Header zugleich existieren
   würden, fällt View Transitions auf Root-Crossfade zurück. */
.site-header__logo { view-transition-name: site-logo; }
.site-header__cta  { view-transition-name: cta-pill;  }
.site-footer       { view-transition-name: site-footer; }

/* Persistierende Elemente bekommen ihre eigene, dezente Move-Animation */
::view-transition-old(site-logo),
::view-transition-new(site-logo),
::view-transition-old(cta-pill),
::view-transition-new(cta-pill),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   PRINT STYLES — minimal, lesbar, ohne Glitter.
   Ziel: User druckt oder speichert als PDF — gerade bei
   Hochzeitsplanung wo Paare Recherche physisch sammeln.
   ============================================================ */
@media print {

  /* ── Atmosphaere weg ──────────────────────────────────────── */
  body::before,
  .ambient,
  .skip-link,
  .site-header,
  .site-footer,
  .mobile-menu,
  .mobile-menu-backdrop,
  nav { display: none !important; }

  /* Dekorative Elemente, die in Druck nichts beitragen */
  .um-action,
  .audio-section,
  .story-section__links,
  .panel--abschied .coming,
  .watercolor-frame::before { display: none !important; }

  /* ── Animationen still ─────────────────────────────────────── */
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }

  /* Reveal-Initialstates → sichtbar (sonst druckt man unsichtbares) */
  .section-reveal,
  [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ── Body ──────────────────────────────────────────────────── */
  body {
    background: white !important;
    color: black !important;
    font-size: 11pt;
    line-height: 1.5;
  }

  /* ── Typografie-Skala (ungefaehr 75% der Bildschirm-Skala) ── */
  h1, .hero__title, .um-hero__title, .ablauf-hero__title,
  .kontakt-intro__title, .err-hero__title {
    font-size: 24pt !important;
    line-height: 1.2 !important;
  }
  h2, .panel__title, .section-title, .pakete-intro__quote {
    font-size: 16pt !important;
    line-height: 1.3 !important;
  }
  h3 { font-size: 13pt !important; }
  p, li { font-size: 11pt !important; }

  /* ── Links ─────────────────────────────────────────────────── */
  a { color: black; text-decoration: underline; }
  /* Externe + mailto/tel: URL anzeigen (User sieht Ziel beim Druck) */
  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
  /* Interne Links bleiben pur — User hat Site eh vor sich */
  a[href^="/"]::after,
  a[href^="#"]::after { content: ""; }

  /* ── Bilder ────────────────────────────────────────────────── */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    /* Watercolor-Filter im Druck weglassen — Druckkosten sparen,
       Detail-Verlust durch Aquarell-Verzerrung unerwuenscht. */
    filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  /* ── Page-Breaks ───────────────────────────────────────────── */
  section,
  header,
  footer,
  blockquote,
  .testimonial-card,
  .um-quote,
  .um-credentials,
  .ablauf-promise,
  .timeline__step,
  .three-step-block__item,
  .ablauf-step,
  .err-card,
  .faq-item { page-break-inside: avoid; }

  /* Pakete-Karten: jede Karte moeglichst auf eigene Druckseite */
  .paket-card { page-break-inside: avoid; }
  .paket-card:not(:first-child) { page-break-before: auto; }

  /* FAQ: alle Akkordeons im Druck offen, sonst druckt sich nichts */
  details { display: block !important; }
  details > summary { list-style: none; }

  /* Section-Hintergruende (accent-hint etc.) im Druck weiss */
  .warum-ich,
  .ablauf-promise,
  .um-credentials,
  .faq-final,
  .faq-item[open] { background: white !important; }

  /* Ueberschuessige Schatten weg */
  .testimonial-card,
  .paket-card,
  .form,
  .err-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================
   REDUCED MOTION — Bridget-Pflicht
   View Transitions auf 0.01ms (nicht ganz aus, sonst springt es)
   ============================================================ */
@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;
  }
  html { scroll-behavior: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-logo),
  ::view-transition-new(site-logo),
  ::view-transition-old(cta-pill),
  ::view-transition-new(cta-pill),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer) {
    animation-duration: 0.01ms !important;
  }
}