/* ============================================================
   Zurück zur Mitte — Basis: Reset, Typografie, Grundregeln
   Keine Boxen, keine Rahmen, keine Kacheln, keine Schatten —
   Trennung nur über Weißraum und hauchdünne Linien.
   ============================================================ */

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

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

body {
  background: var(--farbe-beige);
  color: var(--farbe-anthrazit);
  font-family: var(--schrift-sans);
  font-size: var(--groesse-fliesstext);
  letter-spacing: var(--laufweite-fliesstext);
  line-height: 1.7;
}

h1,
h2,
h3 {
  font-family: var(--schrift-serif);
  font-weight: 400;
  line-height: var(--zeilenhoehe-headline);
  letter-spacing: 0;
}

h1,
h2 {
  font-size: var(--groesse-headline);
}

p {
  max-width: var(--spaltenbreite-text);
}

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

a {
  color: inherit;
}

/* Metatext: 01 / DER ZUSTAND — Versalien, sehr klein, weite Laufweite */
.metatext {
  font-family: var(--schrift-sans);
  font-size: var(--groesse-metatext);
  font-weight: 500;
  letter-spacing: var(--laufweite-metatext);
  text-transform: uppercase;
  color: var(--farbe-gold-text);
}

/* 100vw in --rand-buehne rechnet die Scrollbar mit — hauchfeine
   Überstände (Panorama-Vollbreite) hier abschneiden statt scrollen */
html {
  overflow-x: clip;
}

/* Sektionen: ein Screen = ein Raum; Inhalt auf der Bühne zentriert */
.screen {
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(3rem, 8vh, 8rem) var(--rand-buehne);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Hintergrund-Varianten; auf Dunkel: Text Beige, Akzente Gold */
.screen--beige {
  background: var(--farbe-beige);
}

.screen--waldgruen,
.screen--anthrazit {
  color: var(--farbe-beige);
}

.screen--waldgruen {
  background: var(--farbe-waldgruen);
}

.screen--anthrazit {
  background: var(--farbe-anthrazit);
}

.screen--waldgruen .metatext,
.screen--anthrazit .metatext {
  color: var(--farbe-gold);
}

/* Screenreader-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sanftes Scrollen nur ohne reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Einheitlicher Seitenfuß (snippet „seitenfuss"): Footer-Text plus
   Linkliste aus footer-rechtliches — klein und still auf allen Seiten.
   Editorial wie die Metatexte: keine Box, kein Rahmen, Trennung nur
   über Weißraum; Links mit hauchdünner border-bottom-Linie. */
.seitenfuss {
  margin-top: var(--abstand-elemente);
  padding: 0 1.5rem clamp(2.5rem, 6vh, 4.5rem);
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.seitenfuss p {
  max-width: none;
  margin-inline: auto;
}

.seitenfuss nav {
  margin-top: 0.75rem;
  display: flex;
  justify-content: center;
  /* Fünf Links passen auf schmalen Viewports (~360px) nicht mehr in
     eine Zeile — umbrechen lassen, Zeilenabstand enger als Spaltenabstand */
  flex-wrap: wrap;
  gap: 1.5rem;
  row-gap: 0.75rem;
}

.seitenfuss a {
  text-decoration: none;
  border-bottom: 1px solid rgba(44, 44, 44, 0.55);
  padding-bottom: 0.15em;
}

.seitenfuss a:hover,
.seitenfuss a:focus-visible {
  border-color: var(--farbe-anthrazit);
}

/* Dunkle Variante für den Anthrazit-Abschluss-Screen der Startseite:
   Beige halbtransparent, Hover/Fokus hellt auf statt abzudimmen —
   Kontrast steigt (≥ 4,5:1). Linienoptik wie die helle Variante,
   nur mit heller Linienfarbe auf Beige-Basis. */
.seitenfuss--dunkel {
  color: rgba(249, 246, 240, 0.7);
  opacity: 1;
}

.seitenfuss--dunkel a {
  border-bottom-color: rgba(249, 246, 240, 0.45);
}

.seitenfuss--dunkel a:hover,
.seitenfuss--dunkel a:focus-visible {
  color: var(--farbe-beige);
  border-bottom-color: var(--farbe-beige);
}

/* Sanfter Farbwechsel nur ohne reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .seitenfuss--dunkel a {
    transition: color 0.3s ease, border-color 0.3s ease;
  }
}

/* Optionales Scroll-Snapping: nur Desktop, nur ohne reduced-motion,
   proximity statt mandatory — mobil fließt die Seite frei */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y proximity;
  }

  .screen {
    scroll-snap-align: start;
  }

  /* Letzter Screen: an der UNTERkante einrasten — so ist das Seitenende
     (Footerzeile mit Impressum/Datenschutz) die Einrastposition. Snap-align
     none wäre falsch: Firefox kennt dann dort keine gültige Scroll-Position
     und wirft einen zur vorherigen Sektion zurück. */
  .screen:last-of-type {
    scroll-snap-align: end;
  }
}