/* Conspiratio - conspiratio.net
   Eine Datei, kein Framework. Die Custom Properties sind die einzige
   Schaltstelle: Farben je Thema, Schriften je Schriftschalter. */

/* ---------- Schriften (selbst ausgeliefert, SIL OFL) ---------- */
@font-face { font-family: "Grenze Gotisch"; src: url("/assets/schriften/grenze-gotisch-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/schriften/eb-garamond-400.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/schriften/eb-garamond-400-kursiv.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/assets/schriften/eb-garamond-600.woff2") format("woff2");
             font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/schriften/atkinson-hyperlegible-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/schriften/atkinson-hyperlegible-700.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

/* ---------- Helles Thema: Pergament, stark entsaettigt ---------- */
:root {
  --grund:          #f7f3e9;
  --grund-erhoben:  #fdfbf5;
  --schrift:        #2b2822;
  --schrift-leise:  #5d574c;
  --akzent:         #8a5a12;
  --akzent-hell:    #6d4509;
  --linie:          #e2dccc;

  --schrift-zier:   "Grenze Gotisch", "Palatino Linotype", serif;
  --schrift-text:   "EB Garamond", Georgia, serif;
  --zeilenhoehe:    1.65;
  --buchstabenabstand: 0;

  /* Die Textspalte waechst mit dem Fenster, statt bei 38rem stehenzubleiben:
     Auf FullHD und 4K wirkte die Seite sonst verloren. Die Obergrenze haelt
     die Zeile bei rund 90 Zeichen - darueber wird das Zurueckspringen an den
     Zeilenanfang muehsam. */
  --spaltenbreite:  clamp(38rem, 50vw, 52rem);
  --tafelbreite:    clamp(68rem, 92vw, 104rem);   /* Galerie und breite Blöcke */
}

/* ---------- Dunkles Thema: warm, aber fast neutral ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:         #1b1a18;
    --grund-erhoben: #252320;
    --schrift:       #e9e6df;
    --schrift-leise: #aba79f;
    --akzent:        #e0a84a;
    --akzent-hell:   #f2c477;
    --linie:         #3a3733;
  }
}
:root[data-thema="dunkel"] {
  --grund:         #1b1a18;
  --grund-erhoben: #252320;
  --schrift:       #e9e6df;
  --schrift-leise: #aba79f;
  --akzent:        #e0a84a;
  --akzent-hell:   #f2c477;
  --linie:         #3a3733;
}

/* ---------- Gut lesbare Schrift ---------- */
:root[data-schrift="lesbar"] {
  --schrift-zier: "Atkinson Hyperlegible", system-ui, sans-serif;
  --schrift-text: "Atkinson Hyperlegible", system-ui, sans-serif;
  --zeilenhoehe: 1.8;
  --buchstabenabstand: 0.01em;
}

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: var(--schrift-text);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: var(--zeilenhoehe);
  letter-spacing: var(--buchstabenabstand);
}

h1, h2, h3, .wortmarke {
  font-family: var(--schrift-zier);
  font-weight: 400;
  line-height: 1.15;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-top: 1.5rem; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: 2rem; }
h3 { font-size: 1.3rem; }

a { color: var(--akzent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--akzent-hell); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

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

.zum-inhalt { position: absolute; left: -9999px; }
.zum-inhalt:focus {
  position: fixed; left: 0.5rem; top: 0.5rem; z-index: 10;
  background: var(--grund-erhoben); padding: 0.5rem 1rem;
}

.textspalte { max-width: var(--spaltenbreite); margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ---------- Kopf ---------- */
.kopf { position: relative; text-align: center; padding: 1.15rem 1rem 1.35rem; }
.wortmarke {
  /* baseline, nicht center: Das Siegel soll auf derselben Linie stehen wie das
     "C", nicht in der Mitte einer Zeilenbox, die von den langen Ober- und
     Unterlaengen der gebrochenen Schrift bestimmt wird. */
  display: inline-flex; align-items: baseline; gap: 0.28em;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  text-decoration: none; color: var(--schrift);
}

/* Das rote Wachssiegel mit dem Fraktur-C, buendig zum Versal daneben.
   Die Werte sind gemessen, nicht geschaetzt: Das "C" der Grenze Gotisch reicht
   0,611 em ueber die Grundlinie und 0,014 em darunter (der uebliche Ueberschuss
   runder Formen), zusammen 0,625 em. Atkinson Hyperlegible hat eine groessere
   Versalhoehe, daher der eigene Wert beim Schriftschalter.
   Die Grafik ist auf ihren sichtbaren Bereich beschnitten - mit dem
   transparenten Rand des Originals waere die Ausrichtung um dessen Breite
   daneben. */
:root            { --versalhoehe: 0.625em; }
:root[data-schrift="lesbar"] { --versalhoehe: 0.694em; }

.siegel {
  height: var(--versalhoehe);
  width: auto;
  flex: none;
  /* align-items: baseline setzt die Unterkante auf die Grundlinie; diese
     Verschiebung gibt ihr denselben Ueberschuss nach unten wie dem "C". */
  transform: translateY(0.014em);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.35));
}

/* Der Zierbalken, in Anlehnung an den Kopf der alten Seite: eine Holzleiste
   ueber die volle Fensterbreite, darauf die Symbole des Spiels.

   Die Leiste ist EINE durchgehend gekachelte Maserung (die Kachel stammt aus
   dem glatten Mittelstueck des Originalbalkens und ist an sich selbst
   gespiegelt, also nahtlos). Die Symbole sind eigene Bilder mit Rahmen und
   liegen darauf - dadurch gibt es keinen Uebergang zwischen zwei Maserungen
   mehr, den man sehen koennte. Genau der war am Originalbalken das Problem:
   Er brachte seine eigene Maserung mit, die links und rechts sichtbar auf die
   gekachelte stiess. */
.zierbalken {
  height: clamp(52px, 5vw, 96px);
  background: url("/assets/bilder/holzleiste.webp") repeat-x center / auto 100%;
  border-block: 1px solid var(--linie);

  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 5rem);
  overflow: hidden;
}
.zierbalken-symbol {
  height: 74%;
  width: auto;
  flex: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.45));
}
:root[data-thema="dunkel"] .zierbalken { filter: brightness(0.72); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .zierbalken { filter: brightness(0.72); }
}

/* ---------- Navigation ---------- */
.hauptnavigation { background: var(--grund-erhoben); border-bottom: 1px solid var(--linie); }
.hauptnavigation ul {
  list-style: none; margin: 0; padding: 0.5rem 1rem;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: center;
}
.hauptnavigation a {
  text-decoration: none; font-family: var(--schrift-zier); font-size: 1.25rem;
}
.hauptnavigation a[aria-current="page"] { color: var(--schrift); text-decoration: underline; }

@media (max-width: 700px) {
  .hauptnavigation ul { gap: 0.25rem 1rem; padding: 0.6rem 0.75rem; }
  .hauptnavigation a { font-size: 1.15rem; }
}

/* ---------- Schalter ----------
   Oben rechts neben dem Titel statt als eigene Zeile unter der Navigation: Drei
   Schalter rechtfertigen keine volle Bildschirmbreite. Beschriftet sind sie ueber
   title und aria-label; sichtbar sind nur Symbole. */
.schalter {
  position: absolute; top: 0.75rem; right: 0.9rem;
  display: flex; gap: 0.35rem; align-items: center;
}
.schalter button, .schalter a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1rem; height: 2.1rem; padding: 0 0.45rem;
  background: none; border: 1px solid var(--linie); border-radius: 4px;
  color: var(--schrift-leise); cursor: pointer;
  font: inherit; font-size: 0.85rem; line-height: 1; text-decoration: none;
}
.schalter button:hover, .schalter a:hover { color: var(--schrift); border-color: var(--akzent); }
.schalter button[aria-pressed="true"] { color: var(--schrift); border-color: var(--akzent); }

.schalter .ikon { width: 1.05rem; height: 1.05rem; }
/* "Aa" erbt die aktive Schriftart und zeigt so selbst, was der Schalter tut. */
.schalter .ikon-aa { font-family: var(--schrift-text); font-size: 1rem; }

/* Sonne oder Mond - je nachdem, wohin der Klick fuehrt. Ueber CSS, damit das
   Skript nur Attribute setzt und die SVG nicht ersetzen muss. */
.ikon-hell { display: none; }
:root[data-thema="dunkel"] .ikon-hell { display: block; }
:root[data-thema="dunkel"] .ikon-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .ikon-hell { display: block; }
  :root:not([data-thema="hell"]) .ikon-dunkel { display: none; }
}

/* Auf schmalen Schirmen wuerden die Schalter den Titel beruehren, also
   stehen sie dort in einer eigenen, rechtsbuendigen Zeile darueber. */
@media (max-width: 700px) {
  .kopf { padding-top: 0.5rem; }
  .schalter { position: static; justify-content: flex-end; padding: 0 0 0.4rem; }
}

/* ---------- Bausteine ---------- */
.knopf {
  display: inline-block; background: var(--akzent); color: var(--grund);
  padding: 0.7rem 1.4rem; border-radius: 3px; text-decoration: none;
  font-family: var(--schrift-zier); font-size: 1.25rem;
}
.knopf:hover { background: var(--akzent-hell); color: var(--grund); }

.aufmacher img {
  width: 100%; height: auto; display: block;
  max-height: 60vh; object-fit: cover;
}
.vorspann { font-size: 1.2em; }

.galerie {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  max-width: var(--tafelbreite); margin: 0 auto; padding: 0 1.25rem; list-style: none;
}
.galerie figure { margin: 0; }
.galerie figcaption { font-size: 0.9rem; color: var(--schrift-leise); }

/* ---------- Meldungen ----------
   Zwei Karten derselben Form: Die neueste Meldung traegt einen Akzentstreifen
   und einen Knopf, alle uebrigen dieselbe Karte in ruhig. Beide stehen auf
   Textbreite, damit die Kanten mit dem uebrigen Inhalt fluchten. */
.neuigkeit { max-width: var(--spaltenbreite); margin: 2.5rem auto 0; padding: 0 1.25rem; }

.neuigkeit-karte, .news-anriss {
  display: grid; gap: 0.4rem;
  background: var(--grund-erhoben);
  border: 1px solid var(--linie);
  border-radius: 4px;
}
.neuigkeit-karte h2, .news-anriss h3 { margin: 0; }
.neuigkeit-karte h2 a, .news-anriss h3 a { color: var(--schrift); text-decoration: none; }
.neuigkeit-karte h2 a:hover, .news-anriss h3 a:hover {
  color: var(--akzent); text-decoration: underline;
}
.neuigkeit-datum, .news-datum { margin: 0; color: var(--schrift-leise); font-size: 0.92rem; }
.neuigkeit-text, .news-text { margin: 0.3rem 0 0.4rem; }
.news-mehr { margin: 0; }

/* Die hervorgehobene: Akzentstreifen, mehr Luft, groessere Zeile. */
.neuigkeit-karte {
  border-top: 4px solid var(--akzent);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.neuigkeit-marke {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--akzent);
}
.neuigkeit-karte h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); }
.neuigkeit-text { font-size: 1.05em; }

/* Die uebrigen: dieselbe Karte, nur leiser. */
.news-anriss {
  padding: clamp(1rem, 2vw, 1.4rem);
  margin-top: 1rem;
}
.news-anriss h3 { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); }
.news-anriss:hover { border-color: var(--akzent); }

.hinweis {
  background: var(--grund-erhoben); border-left: 3px solid var(--akzent);
  padding: 0.75rem 1rem;
}

.fuss {
  border-top: 1px solid var(--linie); text-align: center; padding: 1.5rem 1rem;
  color: var(--schrift-leise); font-size: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Linkliste ----------
   Eine echte <ul>: Titel als Verweis, Beschreibung als eigene Zeile darunter.
   Vorher stand beides als Fließtext hintereinander und ließ nicht erkennen,
   wo ein Eintrag endet und der nächste beginnt. */
.linkliste { padding-left: 1.2rem; }
.linkliste li { margin-bottom: 1rem; }
.linkliste-text {
  display: block;
  color: var(--schrift-leise);
  font-size: 0.95em;
}