/* ==========================================================
   Des Kaisers neue Krone
   Alle Farben und Maße stehen unter :root — dort ändern.
   ========================================================== */

/* --- Schriften: optional selbst gehostet, sonst greifen die
       Ersatzschriften weiter unten. Siehe LIESMICH.md --- */
@font-face {
  font-family: "Lora"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/lora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Lora"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/lora-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
}

:root {
  --gelb:       #ffcf2d;   /* die Flächen */
  --gelb-hell:  #ffe693;   /* Kopf- und Fußzeile */
  --gelb-blass: #fff3c9;   /* zarte Trennfläche */
  --schwarz:    #14120c;   /* Schrift und Knöpfe */
  --schwarz-2:  #3d372a;   /* Nebentext */
  --weiss:      #ffffff;

  --serif: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --breit: 1140px;
  --lesebreite: 40rem;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--gelb);
  color: var(--schwarz);
  font-family: var(--sans);
  font-size: clamp(1.06rem, 0.99rem + 0.32vw, 1.2rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; }

.huelle { width: min(100% - 2.5rem, var(--breit)); margin-inline: auto; }
.lesespalte { max-width: var(--lesebreite); }

.springmarke { position: absolute; left: -9999px; }
.springmarke:focus {
  left: 1rem; top: 1rem; z-index: 200;
  background: var(--schwarz); color: var(--gelb);
  padding: 0.7rem 1.1rem; border-radius: 3px;
}

/* ---------------- Typografie ---------------- */
h1, h2 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 0.55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.1rem + 4.5vw, 4.15rem); }
h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }

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

.unterzeile {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.35;
  margin: 0 0 1.4rem;
}

/* ---------------- Kopfzeile ---------------- */
.kopf {
  position: sticky; top: 0; z-index: 100;
  background: var(--gelb-hell);
}
.kopf__innen {
  display: flex; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 0.5rem + 2vw, 2.4rem);
  padding: 0.9rem 0;
}
.kopf__heim {
  font-size: 1.05rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.kopf__heim:hover { text-decoration-thickness: 2px; }

.kopf__ig { display: flex; }
.kopf__ig svg { width: 1.8rem; height: 1.8rem; }
.kopf__ig:hover svg { opacity: 0.65; }

/* ---------------- Knöpfe ---------------- */
.knopf {
  display: inline-block;
  background: var(--schwarz); color: var(--gelb-hell);
  font-family: var(--sans); font-size: 1rem;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border: 2px solid var(--schwarz); border-radius: 3px;
  transition: background 150ms ease, color 150ms ease;
}
.knopf:hover { background: transparent; color: var(--schwarz); }
.kopf .knopf { padding: 0.7rem 1.3rem; }

/* ---------------- Abschnitt 1: Mosaik ---------------- */
.mosaik {
  position: relative;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
}
.mosaik img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* ---------------- Abschnitt 2: Titel ---------------- */
.titel {
  position: relative;
  isolation: isolate;   /* hält das Gelb-Multiply in diesem Abschnitt */
  display: flex; align-items: center;
  min-height: 100svh;
  padding: 6rem 0;
  overflow: hidden;
  text-align: center;
}
.titel__bild {
  position: absolute; inset: 0;
  background: url("../images/portrait.jpg") center 30% / cover no-repeat;
}
/* Das Gelb liegt über dem Foto — wie auf der alten Seite */
.titel__ton {
  position: absolute; inset: 0;
  background: var(--gelb);
  mix-blend-mode: multiply;
}
.titel__schleier {
  position: absolute; inset: 0;
  background: rgba(255, 207, 45, 0.22);
}
.titel__innen { position: relative; }
/* Schmaler Satz: die Schlagzeile soll nicht quer über das ganze Gesicht brechen */
.titel h1 { max-width: 15ch; margin-inline: auto; }
.titel .lesespalte { margin-inline: auto; }
.titel .knopf { margin-top: 2.2rem; }

/* ---------------- Abschnitt 3: Synopsis ---------------- */
.synopsis {
  position: relative;
  padding: clamp(4rem, 2.5rem + 6vw, 8rem) 0;
  overflow: hidden;
}
.synopsis__bild {
  position: absolute; inset: 0;
  background: url("../images/synopsis-grund.jpg") center / cover no-repeat;
}
.synopsis__innen { position: relative; }
.synopsis h2 { text-align: center; }
/* Fließtext linksbündig und schmaler — deutlich besser lesbar */
.synopsis .lesespalte { margin-inline: auto; }
.synopsis .schluss {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.12em; margin-top: 2rem;
}
.synopsis .knopf { margin-top: 2.6rem; }
.mitte { text-align: center; }

/* ---------------- Abschnitt 4: Banner ---------------- */
.banner {
  background: var(--gelb);
  padding: clamp(3rem, 2rem + 5vw, 6.5rem) 0;
}
.banner img {
  width: min(100%, 46rem);
  margin-inline: auto;
  box-shadow: 0 2px 24px rgba(20, 18, 12, 0.18);
}

/* ---------------- Abschnitt 5: Auszeichnung ---------------- */
.auszeichnung {
  background: var(--weiss);
  padding: clamp(3.5rem, 2rem + 5vw, 6rem) 0;
}
/* Beide Zeichen stehen als Paar auf einer Linie.
   Das Instagram-Zeichen ist etwa halb so hoch wie das Laurel. */
.auszeichnung__reihe {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(2rem, 1rem + 5vw, 5.5rem);
  flex-wrap: wrap;
}
.auszeichnung__ig {
  flex: 0 0 auto;
  display: block;
  width: clamp(3.4rem, 1.5rem + 8vw, 7.6rem);
}
.auszeichnung__ig svg { width: 100%; height: auto; display: block; }
.auszeichnung__ig:hover svg { opacity: 0.65; }

.auszeichnung__laurelverweis {
  flex: 0 1 auto;
  display: block;
  width: clamp(11rem, 6rem + 26vw, 26rem);
}
.auszeichnung__laurel { width: 100%; }
.auszeichnung__laurelverweis:hover .auszeichnung__laurel { opacity: 0.8; }

/* ---------------- Fußzeile ---------------- */
.fuss {
  background: var(--gelb-hell);
  padding: 2.4rem 0;
  font-size: 0.98rem;
}
.fuss__innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.7rem 1.8rem;
  text-align: center;
}
.fuss a { text-decoration: underline; text-decoration-thickness: 1px; }
.fuss__zeile { width: 100%; color: var(--schwarz-2); font-size: 0.88rem; }

/* ---------------- Unterseiten ---------------- */
.blatt {
  background: var(--gelb);
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem);
}
.blatt h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.blatt h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.55rem);
  margin-top: 2.6rem;
}
.blatt .lesespalte > h2:first-of-type { margin-top: 1.8rem; }
.blatt .knopf { margin-top: 1.8rem; }
.hinweis {
  border-left: 3px solid var(--schwarz);
  padding-left: 1.1rem;
  color: var(--schwarz-2);
  font-size: 0.95em;
  margin-top: 2.8rem;
}

/* ---------------- Sanftes Auftauchen ---------------- */
.taucht { opacity: 0; transform: translateY(16px); transition: opacity 800ms ease, transform 800ms ease; }
.taucht.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .taucht { opacity: 1; transform: none; transition: none; }
}

/* ---------------- Kleine Bildschirme ---------------- */
@media (max-width: 640px) {
  .kopf__innen { justify-content: space-between; gap: 0.8rem; }
  .kopf .knopf { padding: 0.6rem 1rem; font-size: 0.92rem; }
  .kopf__heim { font-size: 1rem; }
  .titel { min-height: 92svh; padding: 5rem 0; }
  .banner img { width: 100%; }
}