/* Grundlagen: Farben, Schriften, Typo-Skala
 *
 * Alle Werte aus dem Webflow-Stand vom 01.09.2026 ausgelesen
 * (css/webflow.shared.37d585eb2.css), nicht geschätzt.
 * Variablennamen gegenüber dem Template sprechend umbenannt.
 */

@import url("../schriften/schriften.css");

:root {
  /* --- Farben (1:1 aus dem Entwurf) ------------------------------------ */
  --dunkel-grund:      #262524;   /* war --dark--dark-bg      */
  --dunkel-sektion:    #423f3a;   /* war --dark--section-bg   */
  --dunkel-text:       #ffffff;   /* war --dark--text-primary */
  --dunkel-text-leise: #cfcfcf;   /* war --dark--text-secondary */
  --dunkel-rand:       #6a6a6a;   /* war --dark--border-color */

  --hell-grund:        #fbf8f3;   /* war --light--light-bg      */
  --hell-text:         #060606;   /* war --light--text-primary  */
  --hell-text-leise:   #363636;   /* war --light--text-secondary */
  --hell-rand:         #999794;   /* war --light--border-color  */

  --akzent:            #ece6e3;   /* war --primary */

  /* --- Schriften -------------------------------------------------------
   * Playfair Display ersetzt operetta-12, Barlow ersetzt acumin-pro.
   * Beide selbst gehostet, siehe ../schriften/LIZENZ.md.
   * Die Überschriften stehen im Entwurf kursiv — das ist übernommen.
   */
  --schrift-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --schrift-text:    Barlow, "Helvetica Neue", Arial, sans-serif;

  /* --- Abstände -------------------------------------------------------- */
  --bahn-breite: 1200px;
  --bahn-rand: clamp(20px, 5vw, 56px);
}

/* ---------------------------------------------------------------- Basis */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--dunkel-grund);
  color: var(--dunkel-text-leise);
  font-family: var(--schrift-text);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------------- Überschriften
 * Skala exakt wie im Entwurf. Die Media-Query-Reihenfolge folgt dem
 * Quell-CSS, damit die Kaskade identisch greift.
 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-display);
  font-style: italic;
  font-weight: 500;
  color: var(--dunkel-text);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: 2em; line-height: 1.1; }
h2 { font-size: 32px; line-height: 36px; }
h3 { font-size: 24px; line-height: 30px; }
h4 { font-size: 18px; line-height: 24px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 12px; line-height: 18px; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

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

/* --------------------------------------------------- Breakpoints
 * Reihenfolge aus dem Quell-CSS: erst die max-width-Stufen absteigend,
 * dann die min-width-Stufen aufsteigend.
 */
@media screen and (max-width: 991px) {
  h1 { font-size: 38px; }
  h2 { font-size: 32px; }
  h3 { font-size: 30px; }
  h4 { font-size: 26px; }
}

@media screen and (max-width: 767px) {
  h1 { font-size: 34px; }
  h2 { font-size: 30px; }
  h3 { font-size: 28px; }
  h4 { font-size: 24px; }
  p  { font-size: 18px; }
}

@media screen and (max-width: 479px) {
  h1 { font-size: 30px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  h4 { font-size: 22px; }
}

@media screen and (min-width: 1280px) {
  h1 { font-size: 54px; }
  h2 { font-size: 44px; }
  h3 { font-size: 36px; }
  h4 { font-size: 30px; }
}

@media screen and (min-width: 1440px) {
  h1 { font-size: 60px; }
  h2 { font-size: 52px; }
  h3 { font-size: 40px; }
  h4 { font-size: 32px; }
}

/* ------------------------------------------------------------ Hilfsklassen */
.bahn {
  max-width: var(--bahn-breite);
  margin-inline: auto;
  padding-inline: var(--bahn-rand);
}

/* Heller Abschnitt — der Entwurf kennt beide Gründe */
.hell {
  background: var(--hell-grund);
  color: var(--hell-text-leise);
}
.hell h1, .hell h2, .hell h3, .hell h4, .hell h5, .hell h6 { color: var(--hell-text); }

/* Kleinschrift für Datums- und Ortsangaben.
 * Bewusst NICHT in der Randfarbe (#6a6a6a / #999794): die trägt auf beiden
 * Gründen nur rund 2,8:1 Kontrast und fällt damit unter die WCAG-Schwelle.
 * Zurückgenommen wird über Größe und Laufweite, nicht über Kontrast.
 */
.angabe {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--dunkel-text-leise);
}
.hell .angabe { color: var(--hell-text-leise); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}