/* ============================================================
   MEISTERWERKE DER WORTE – stil.css
   Gemeinsames Stylesheet für index.html, impressum.html,
   datenschutz.html.

   SCHRIFTEN (DSGVO): selbst gehostet, NICHT über Google Fonts.
   Legen Sie die Dateien in den Ordner  /schriften/  (siehe @font-face
   weiter unten). Empfohlen: EB Garamond + Cormorant Garamond
   (beide SIL Open Font License, frei selbst hostbar).
   Solange die Dateien fehlen, greift die System-Serife (Georgia) –
   die Seite bleibt voll funktionsfähig.
   ============================================================ */

/* ---------- Selbst gehostete Schriften ---------- */
@font-face {
  font-family: "EB Garamond";
  src: url("schriften/EBGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("schriften/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("schriften/EBGaramond-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("schriften/EBGaramond-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("schriften/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("schriften/CormorantGaramond-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Farb- & Maß-Tokens ---------- */
:root {
  --pergament:    #f4eede;   /* Grundfläche, warmes Pergament   */
  --pergament-2:  #efe7d3;   /* Karten / wechselnde Abschnitte   */
  --pergament-3:  #e9dfc6;   /* tiefere Karten / Steckbrief      */
  --tinte:        #2a2017;   /* Haupttext, dunkle Tinte          */
  --tinte-weich:  #5b4f3f;   /* Zweitfarbe Text                  */
  --gold:         #8c6a2b;   /* Akzent – NUR Linien/Überschr./Akzente */
  --gold-hell:    #b89a5c;   /* dekorative Linien                */
  --gold-linie:   #d3c197;   /* feine Trennlinien                */
  --dunkel:       #1b160e;   /* Kopfleiste, warmes Schwarz       */
  --dunkel-text:  #e9dcc0;   /* Text auf dunkel                  */
  --rahmen:       #d6c79f;   /* Kartenränder                     */
  --rahmen-tief:  #c4b083;

  --serif:   "EB Garamond", Garamond, "Hoefler Text", "Times New Roman", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --mono:    "Courier New", ui-monospace, monospace;

  --max:     1180px;   /* Seitenbreite           */
  --lese:    40rem;    /* Lesebreite Fließtext    */
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;              /* große Grundschrift (65+) */
  line-height: 1.65;
  color: var(--tinte);
  background-color: var(--pergament);
  /* feine Pergament-Körnung – als eingebettetes SVG (kein externer Aufruf) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

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

a { color: var(--tinte); }

::selection { background: #e4d4a6; }

/* sichtbarer Tastatur-Fokus (Barrierefreiheit) */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/* "Zum Inhalt springen" für Screenreader/Tastatur */
.skip-link {
  position: absolute; left: 1rem; top: -100px;
  background: var(--dunkel); color: var(--dunkel-text);
  padding: .75rem 1.25rem; border-radius: 2px; z-index: 100;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout-Hilfen ---------- */
.huelle { max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

/* dekorative goldene Trennlinie mit Fleuron (typografisch, kein Bild) */
.scheider {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin: 0 auto; max-width: 30rem;
  color: var(--gold);
}
.scheider::before, .scheider::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(to var(--dir, right), transparent, var(--gold-hell));
}
.scheider::after { --dir: left; }
.scheider span { font-size: 1.4rem; line-height: 1; }

/* Abschnitts-Augenbraue im Stil des Lexikons:  – Aktuelle Folgen – */
.augenbraue {
  font-style: italic;
  font-size: 1.0625rem;
  letter-spacing: .04em;
  color: var(--gold);
  text-align: center;
  margin: 0 0 .65rem;
}
.augenbraue::before { content: "– "; }
.augenbraue::after  { content: " –"; }

h1, h2, h3 { font-weight: 500; line-height: 1.12; margin: 0; }

.abschnitt-titel {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.4vw, 3.1rem);
  text-align: center;
  color: var(--tinte);
  margin: 0 auto 1rem;
}

.abschnitt-text {
  max-width: var(--lese);
  margin: 0 auto;
  text-align: center;
  text-wrap: pretty;
  color: var(--tinte);
}

/* ---------- Knöpfe (groß, hoher Kontrast, klar klickbar) ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .85rem 2rem;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid var(--dunkel);
  text-align: center;
}
/* Primär: dunkle Tinte, heller Text – maximaler Kontrast */
.knopf--primaer { background: var(--dunkel); color: var(--dunkel-text); }
.knopf--primaer:hover { background: #2c2415; }
/* Sekundär: Pergament mit Tintenrand */
.knopf--sekundaer { background: var(--pergament-2); color: var(--tinte); border-color: var(--rahmen-tief); }
.knopf--sekundaer:hover { background: var(--pergament-3); border-color: var(--gold); }
/* groß / zentral */
.knopf--gross { font-size: 1.3rem; min-height: 64px; padding: 1rem 2.6rem; }
.knopf-zeile { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* kleines YouTube-/Pfeil-Zeichen vor Knopf-Text (typografisch) */
.knopf .marke { font-weight: 700; font-size: .95em; opacity: .85; }

/* ---------- Bild-Platzhalter ---------- */
/* Echte Dateipfade. Solange die Datei fehlt, zeigt der Rahmen einen
   klar erkennbaren Hinweis. Sobald Udo das Bild ablegt, verschwindet er. */
.bild {
  display: block;
  position: relative;
  background: var(--pergament-3);
  border: 1px dashed var(--rahmen-tief);
  overflow: hidden;
}
.bild img { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.bild.geladen img { opacity: 1; }
.bild .hinweis {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1rem; text-align: center;
}
.bild .hinweis .pfad {
  font-family: var(--mono); font-size: .82rem; color: var(--tinte-weich);
  background: #f7f1e2; border: 1px solid var(--rahmen);
  padding: .25rem .55rem; border-radius: 2px; word-break: break-all;
}
.bild .hinweis .was { font-style: italic; color: var(--tinte-weich); font-size: 1rem; }
.bild .hinweis .icon { font-size: 1.6rem; color: var(--gold-hell); }
/* wenn das Bild geladen ist, Hinweis ausblenden */
.bild.geladen .hinweis { display: none; }

@media (max-width: 720px) {
  body { font-size: 19px; }
}