/* ============================================================================
   PSC — Basis-Stylesheet (Reset, Layout-Grundgerüst, Hero, Modal, Legal)
   ============================================================================
   Ladereihenfolge (siehe templates/layout.php):
       fonts.css → tokens.css → style.css → components.css → responsive.css

   tokens.css liefert alle Farben/Maße. Diese Datei liefert das Grundgerüst
   (Reset, Container, Hero, Modal, Formular-Erfolgsmeldung, Legal-Titel,
   Scroll-Top-Button). Die eigentlichen Bausteine (Karten, Grids, Nav,
   Footer, Buttons …) kommen unverändert aus okava-website-v2/css/components.css.
   ========================================================================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-soft);
  background-color: var(--cream);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ---------- Container ---------- */
.container { max-width: var(--st-maxw); margin: 0 auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 800px; }

/* ---------- Logo (Header) ---------- */
.logo { display: flex; align-items: center; }
.logo__img { width: 46px; height: auto; filter: none; transition: filter .4s ease; }
.header--transparent .logo__img { filter: brightness(0) invert(1); }

/* =========================================================
   HERO — eigene, einfache Variante (kein Fotomaterial vorhanden):
   volle Höhe, dunkle Fläche in Markenblau, zentrierter Text,
   optionales großes Wasserzeichen des Logo-Symbols.
   ========================================================= */
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--cream);
}
.hero__subtitle {
  font-family: var(--sans); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .26em; color: var(--gold);
}
/* .hero-Präfix nötig: components.css setzt .site h1..h4/.site p auf die
   Dunkeltext-Farben für helle Flächen (Spezifität 0,1,1) — das würde die
   einfachen Klassenselektoren .hero__title/.hero__description (0,1,0) hier
   trotz späterer Ladereihenfolge schlagen und den Hero-Text auf dem dunklen
   Hintergrund unsichtbar machen. Mit .hero-Präfix (0,2,0) gewinnt diese Regel. */
.hero .hero__title {
  font-family: var(--serif); font-weight: 400; margin-top: 22px;
  font-size: var(--fs-heading); line-height: 1.1; color: var(--cream);
}
.hero .hero__title em { font-style: normal; color: var(--gold); }
.hero .hero__description {
  margin-top: 22px; font-size: var(--fs-body); line-height: 1.6;
  color: rgba(243,237,225,.9); max-width: 60ch;
}
.hero__cta {
  position: relative; z-index: 1;
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: 34px;
}
.hero--brand::before {
  content: "";
  position: absolute; top: 50%; right: -8%; transform: translateY(-50%);
  width: 70vh; height: 70vh; max-width: 900px; max-height: 900px;
  background: url('../assets/images/psc-logo-symbol.svg') center / contain no-repeat;
  opacity: .07; pointer-events: none;
}
/* Kompakter Hero auf Unterseiten ohne langen Fließtext (kürzere Höhe als 100svh) */
.hero--bottom .hero__content { justify-content: flex-end; padding-bottom: 64px; }

/* Scroll-Hinweis am unteren Hero-Rand — .hero ist bereits position:relative
   und 100svh hoch (siehe .site .hero in components.css), der Pfeil sitzt
   also unabhängig von der Inhaltslänge immer am Bildschirmrand. */
.hero .scroll-hint {
  position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); transform: translateX(-50%);
  color: rgba(243, 245, 248, .75); pointer-events: none; z-index: 1;
  animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .6; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .scroll-hint { animation: none; opacity: .75; }
}

/* =========================================================
   MODAL — Formular-Overlay (Kontakt), Aufruf via [data-modal]
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(11,33,56,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(20px, 6vh, 80px) clamp(12px, 3vw, 40px);
  overflow-y: auto;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.modal-overlay.is-active { opacity: 1; pointer-events: auto; }
.modal {
  position: relative; width: min(720px, 100%);
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: clamp(14px, 2vw, 28px);
}
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: var(--cream-2); border: 0; border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); cursor: pointer; transition: background .2s ease;
}
.modal__close:hover { background: var(--sand); }
.modal__loading { padding: 60px 0; text-align: center; color: var(--ink-faint); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
/* Im Modal geladene Seite bringt ihren eigenen Hero mit — der ist im
   Overlay-Kontext (nur Formularinhalt) ohnehin nicht vorhanden, diese Regel
   ist reine Absicherung für künftige Modal-Ziele mit Hero. */
.modal__content .hero { display: none; }
.modal__content .section { padding-block: 0; }
.modal__content .wrap { padding-inline: 0; }

/* =========================================================
   Formular-Erfolgsmeldung (nach erfolgreichem Absenden, js/main.js)
   ========================================================= */
.form-success { text-align: center; padding: 40px 0; }
.form-success__icon { color: var(--terra); display: flex; justify-content: center; margin-bottom: 14px; }
.form-success__title { font-family: var(--serif); font-size: var(--fs-heading); color: var(--ink); }
.form-success__divider { width: 46px; height: 2px; background: var(--gold); margin: 18px auto; }
.form-success__text { color: var(--ink-soft); max-width: 44ch; margin: 0 auto 10px; }
.form-success__hint { font-size: var(--fs-hint); color: var(--ink-faint); }

/* =========================================================
   Legal-Seiten (Impressum / Datenschutz) — Titel oberhalb von .legal-body
   ========================================================= */
.legal-body h1 { margin-bottom: 36px; }

/* =========================================================
   Scroll-Top-Button
   ========================================================= */
.scroll-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--terra); color: var(--cream); border: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.scroll-top:hover { background: var(--terra-deep); }