/* christine-engelin.de — Gestaltung „warm": Espresso, Creme, Terrakotta.
   Eine Datei, kein Framework, kein JavaScript. Die Schriften liegen unter
   /assets/schriften/ auf demselben Server — nichts wird von einem Drittserver
   nachgeladen, so wie es die Datenschutzerklärung zusagt. */

/* ---------------------------------------------------------------- Schriften */
/* font-display: swap — der Text steht sofort in Georgia da und wird ersetzt,
   sobald die Schrift geladen ist. Unsichtbarer Text ist keine Option. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/cormorant-garamond-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/schriften/spectral-300.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/spectral-400.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/schriften/spectral-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/schriften/spectral-500.woff2") format("woff2");
}
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/schriften/spectral-600.woff2") format("woff2");
}

/* ------------------------------------------------------------------ Palette */
/* Kontraste gegen den Grund #20140f gemessen (WCAG AA verlangt 4,5:1):
   ink 15,4  ·  muted 8,5  ·  akzent 7,4  ·  akzent-soft 10,0  ·  faint 5,2.
   faint erreicht auf dem helleren --panel nur 4,3 und steht deshalb NIE in
   einem Panel, sondern nur auf dem Seitengrund. */

:root {
  color-scheme: dark;

  --bg: #20140f;
  --bg2: #2a1c15;
  --panel: #33241c;
  --line: #473329;

  --ink: #f5ece0;
  --muted: #c8ae9b;
  --faint: #9d8674;

  --akzent: #e0965a;
  --akzent-soft: #f1b57e;
  --knopf-ink: #221a10;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text: "Spectral", Georgia, "Times New Roman", serif;

  /* Zwei Breiten, und das ist der Kern des Layouts:
     --breite  ist die Bühne — Kopf, Fuß, Bilder, Kästen und Überschriften
               nutzen sie ganz (84rem ≈ 1344 px).
     --lese    ist die Zeilenlänge für zusammenhängenden Fließtext. Über etwa
               75 Zeichen findet das Auge den Anfang der nächsten Zeile nicht
               mehr zuverlässig; 38rem liegen bei rund 70 Zeichen. */
  --breite: 84rem;
  --lese: 38rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--akzent); color: var(--knopf-ink); }

/* Tastatur-Bedienung muss sichtbar sein. */
a:focus-visible, summary:focus-visible, .knopf:focus-visible {
  outline: 2px solid var(--akzent-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1.25rem; }

/* Fließtext bleibt lesbar, auch wenn die Bühne breit ist. Es trifft NUR die
   unmittelbaren Textblöcke im Hauptteil — Überschriften, Bilder, Kästen,
   Fakten und die Navigation behalten die volle Breite. */
main .huelle > p,
main .huelle > ul,
main .huelle > ol,
main .huelle > .vorspann,
details p { max-width: var(--lese); }

/* ------------------------------------------------------- Kopf, Navigation */
header[role="banner"] {
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.marke {
  display: block;
  padding: 1.3rem 0 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}
.marke span {
  display: block;
  font-family: var(--text);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-top: 0.25rem;
}
nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin: 0;
  padding: 0.7rem 0 1rem;
}
nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.97rem;
}
nav a:hover, nav a:focus { color: var(--akzent-soft); }
nav a[aria-current="page"] {
  color: var(--akzent);
  border-bottom: 1px solid var(--akzent);
  padding-bottom: 2px;
}

/* --------------------------------------------------------------- Fließtext */
main { padding: 2.5rem 0 3.5rem; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--ink);
}
h1 { font-size: 2.3rem; line-height: 1.15; margin: 0 0 0.7rem; }
h2 { font-size: 1.7rem; line-height: 1.25; margin: 2.6rem 0 0.7rem; }
h3 { font-size: 1.3rem; margin: 1.9rem 0 0.4rem; color: var(--akzent-soft); }

p, ul, ol { margin: 0 0 1.1rem; }

.vorspann {
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 1.9rem;
}

a { color: var(--akzent-soft); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akzent); }

strong { font-weight: 600; color: var(--ink); }

li { margin-bottom: 0.35rem; }

/* ------------------------------------------------- Ruf zur Handlung, Knopf */
.aufruf {
  border-left: 3px solid var(--akzent);
  background: var(--panel);
  border-radius: 0 4px 4px 0;
  padding: 1.15rem 1.25rem;
  margin: 2rem 0;
}
.aufruf p:last-child { margin-bottom: 0; }

.knopf {
  display: inline-block;
  background: var(--akzent);
  color: var(--knopf-ink);
  font-weight: 500;
  padding: 0.6rem 1.2rem;
  border-radius: 3px;
  text-decoration: none;
  margin-top: 0.4rem;
}
.knopf + .knopf { margin-left: 0.5rem; }
.knopf:hover, .knopf:focus { background: var(--akzent-soft); color: var(--knopf-ink); }

/* ------------------------------------------------------------------ Bilder */
/* Auf dunklem Grund braucht ein Foto eine Kante, sonst franst es aus. */
figure { margin: 2rem 0; }

/* Kleine Fotos: mittig, aber NIE ueber ihre native Breite hinaus. Ein
   525-px-Foto auf 1344 px gezogen waere unscharf, und links an den Rand
   geklebt wirkt es in der breiten Spalte verloren. Die Bildunterschrift
   bricht innerhalb derselben Breite um. Das Mohnfeld traegt die Klasse
   nicht — es ist gross genug fuer die volle Buehne. */
figure.klein { max-width: 525px; margin-left: auto; margin-right: auto; }
img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid var(--line);
}
figcaption {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted);
  margin-top: 0.55rem;
}

/* ------------------------------------------------------- Fakten, FAQ, Fuß */
.fakten {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.15rem 1.25rem;
  background: var(--bg2);
}
.fakten dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
.fakten dt { font-weight: 600; color: var(--akzent-soft); }
.fakten dd { margin: 0; }

details { border-bottom: 1px solid var(--line); padding: 0.85rem 0; }
details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
details summary::marker { color: var(--akzent); }
details[open] summary { color: var(--akzent-soft); }
details p { margin: 0.7rem 0 0; color: var(--muted); }

.brotkrumen { font-size: 0.9rem; color: var(--faint); padding-top: 1.3rem; }
.brotkrumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; }
.brotkrumen a { color: var(--faint); }
.brotkrumen li::after { content: "›"; margin-left: 0.45rem; color: var(--line); }
.brotkrumen li:last-child::after { content: ""; }

footer[role="contentinfo"] {
  border-top: 1px solid var(--line);
  background: var(--bg2);
  padding: 1.8rem 0;
  margin-top: 3rem;
  font-size: 0.93rem;
  color: var(--muted);
}
footer a { color: var(--muted); }
footer a:hover { color: var(--akzent-soft); }
footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0; margin: 0.7rem 0 0; }

/* PLATZHALTER: sichtbar unfertig, damit nichts versehentlich live geht. */
.platzhalter {
  background: rgba(224, 150, 90, 0.18);
  border-bottom: 2px dotted var(--akzent);
  padding: 0 0.28rem;
  font-style: normal;
  color: var(--ink);
}

@media (min-width: 40rem) {
  h1 { font-size: 2.8rem; }
  h2 { font-size: 1.9rem; }
  .marke { padding-top: 1.6rem; font-size: 2rem; }
}

/* Ab Tablet-Breite ein schmaler Rand statt des engen Handy-Rands. Darunter
   ändert sich nichts: die Handy-Ansicht bleibt, wie sie war. */
@media (min-width: 60rem) {
  .huelle { padding: 0 2rem; }
}