/* ============================================================
   SEOlogie — gemeinsames Stylesheet
   Zen-Garten-Palette (verbindlich):
   Kies #F5F1E6 · Stein #8C8A82 · Moos #5E6F54
   Stilles Wasser #5C7484 · Tusche #2E332C · Das Licht #D9A441
   Farbregel: „Der Garten ist still — nur das Licht leuchtet."
   ============================================================ */

:root {
  --kies: #F5F1E6;
  --stein: #8C8A82;
  --moos: #5E6F54;
  --wasser: #5C7484;
  --tusche: #2E332C;
  --licht: #D9A441;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--kies);
  color: var(--tusche);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.75;
  font-size: 18px;
}

a { color: var(--wasser); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
a:hover { border-bottom-color: var(--wasser); }

/* ---------- Kopf ---------- */
header.seitenkopf {
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand a { display: flex; align-items: center; gap: 12px; border: none; color: var(--tusche); }
.brand svg { height: 44px; width: auto; display: block; }
.brand-name { font-size: 21px; letter-spacing: 4px; color: var(--tusche); }
nav.hauptnav { display: flex; gap: 26px; flex-wrap: wrap; font-size: 15.5px; letter-spacing: 0.4px; }
nav.hauptnav a { color: var(--tusche); opacity: .82; }
nav.hauptnav a:hover { opacity: 1; border-bottom-color: var(--moos); }

/* ---------- Bühne (Startseite) ---------- */
.hero {
  text-align: center;
  padding: 84px 24px 64px;
  max-width: 760px;
  margin: 0 auto;
}
.hero svg.leuchtfeuer { width: 220px; height: auto; margin-bottom: 36px; }
.hero h1 {
  font-weight: normal;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: 9px;
  margin-bottom: 10px;
}
.hero .subline {
  color: var(--stein);
  letter-spacing: 4px;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 46px;
}
.kernformel {
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.55;
}
.kernformel em {
  font-style: normal;
  border-bottom: 3px solid var(--licht);
  padding-bottom: 2px;
}

/* ---------- Inhalt ---------- */
main { max-width: 720px; margin: 0 auto; padding: 0 24px 80px; }
section { margin-top: 72px; }
h2 {
  font-weight: normal;
  font-size: 27px;
  color: var(--tusche);
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--moos);
}
p + p { margin-top: 1em; }

.definition {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(140,138,130,.35);
  padding: 30px 34px;
  margin-top: 64px;
}
.definition .wort { letter-spacing: 2px; }
.definition-leitsatz {
  font-size: 20px;
  font-weight: bold;
  color: var(--tusche);
  margin-bottom: 6px !important;
  letter-spacing: 0.2px;
}
.definition-leitsatz--sub {
  font-size: 16px;
  font-weight: normal;
  color: var(--stein);
  margin-bottom: 4px !important;
}
.definition-leitsatz--punch {
  font-size: 20px;
  font-weight: bold;
  color: var(--tusche);
  margin-bottom: 24px !important;
}

/* SEOlogie-Modell Box */
.modell-box {
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(140,138,130,.35);
  padding: 28px 34px 20px;
  margin-top: 22px;
}
.modell-kontrast {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.8;
  color: var(--tusche);
  margin-bottom: 0 !important;
}
.modell-kontrast br + br { display: none; }
.modell-box figure.schaubild { margin-top: 16px; }
.modell-beschreibung {
  font-size: 15.5px;
  color: var(--stein);
  margin-top: 20px !important;
  line-height: 1.65;
}

blockquote.aphorismus {
  text-align: center;
  font-size: 23px;
  line-height: 1.6;
  padding: 10px 12px 0;
  margin-top: 14px;
  color: var(--tusche);
}
blockquote.aphorismus .licht { color: var(--licht); }

/* ---------- Forschungsfelder-Karten ---------- */
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.feld {
  border: 1px solid rgba(94,111,84,.4);
  padding: 22px 24px;
  background: rgba(255,255,255,.4);
}
.feld h3 { font-weight: normal; font-size: 17px; color: var(--moos); letter-spacing: 0.5px; margin-bottom: 6px; }
.feld-kernfrage { font-size: 13.5px; color: var(--stein); font-style: italic; margin-bottom: 8px !important; }
.feld p { font-size: 15px; line-height: 1.65; color: var(--tusche); }
@media (max-width: 620px) { .felder { grid-template-columns: 1fr; } }

/* ---------- Zitierbox ---------- */
.zitieren {
  border-left: 4px solid var(--licht);
  background: rgba(255,255,255,.5);
  padding: 18px 24px;
  font-size: 15px;
  color: var(--stein);
  margin-top: 28px;
}
.zitieren strong { color: var(--tusche); font-weight: normal; }

/* ---------- Artikel (Wiki-Eintrag) ---------- */
article.eintrag { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
article.eintrag h1 {
  font-weight: normal;
  font-size: clamp(30px, 4.5vw, 40px);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.eintrag-untertitel { color: var(--stein); font-size: 16px; margin-bottom: 34px; }
article.eintrag section { margin-top: 68px; }
article.eintrag h3 { font-weight: normal; font-size: 20px; color: var(--moos); margin: 26px 0 8px; }

article.eintrag blockquote {
  margin: 26px 0;
  padding: 18px 26px;
  border-left: 4px solid var(--licht);
  background: rgba(255,255,255,.5);
  font-size: 20px;
  line-height: 1.6;
}

/* ---------- Erlösung / Licht-Box (emotionaler Höhepunkt) ---------- */
article.eintrag .erloesung {
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(217,164,65,.5);
  border-top: 3px solid var(--licht);
  padding: 28px 34px;
  margin: 34px 0;
  box-shadow: 0 8px 30px rgba(46,51,44,.08);
}
article.eintrag .erloesung p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--tusche);
  margin: 0;
}

article.eintrag ol, article.eintrag ul { margin: 16px 0 16px 26px; }
article.eintrag li { margin-bottom: 8px; }
article.eintrag li::marker { color: var(--moos); }

.inhaltsverzeichnis {
  background: rgba(255,255,255,.45);
  border: 1px solid rgba(140,138,130,.35);
  padding: 22px 28px;
  margin: 38px 0 0;
  font-size: 16px;
}
.inhaltsverzeichnis strong { letter-spacing: 1px; font-weight: normal; color: var(--stein); font-size: 14px; text-transform: uppercase; }
.inhaltsverzeichnis ol { margin: 10px 0 0 22px; }
.inhaltsverzeichnis li { margin-bottom: 4px; }

/* ---------- Schaubilder ---------- */
figure.schaubild { margin: 40px auto 12px; text-align: center; }
figure.schaubild svg { width: 100%; max-width: 540px; height: auto; }
figure.schaubild figcaption {
  font-size: 14.5px;
  color: var(--stein);
  margin-top: 8px;
  line-height: 1.6;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Fotos ---------- */
figure.foto { margin: 36px auto 14px; text-align: center; }
figure.foto img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(46, 51, 44, .18);
}
figure.foto figcaption {
  font-size: 14.5px;
  color: var(--stein);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.6;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.quellen { font-size: 16px; }
.quellen li { margin-bottom: 10px; }

/* ---------- Rechtsseiten ---------- */
.rechtstext { font-size: 16.5px; }
.rechtstext h2 { font-size: 22px; margin-top: 44px; }
.rechtstext .anschrift { margin: 18px 0; line-height: 1.9; }

/* ---------- Fuß ---------- */
footer.seitenfuss {
  border-top: 1px solid rgba(140,138,130,.4);
  margin-top: 40px;
  padding: 36px 24px 56px;
  text-align: center;
  color: var(--stein);
  font-size: 14.5px;
  line-height: 2;
}
footer.seitenfuss a { color: var(--stein); }
footer.seitenfuss a:hover { color: var(--wasser); }

figure.leuchtturm-akzent { text-align: center; margin: 64px auto 0; }

/* Link-Absatz nach Forschungsfelder-Grid und nach Sections */
.felder + p { margin-top: 28px; }
section > p:last-child { margin-top: 20px; }

/* ---------- Startseite: Themen-Blöcke ---------- */
.felder-liste {
  color: var(--moos);
  font-size: 15.5px;
  line-height: 2.4;
  margin: 16px 0 20px;
  font-weight: normal;
  letter-spacing: 0.2px;
}

/* These-Formular */
.these-formular {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.these-formular label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15.5px;
  color: var(--stein);
  letter-spacing: 0.3px;
}
.these-formular input,
.these-formular textarea {
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(140,138,130,.5);
  padding: 10px 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  color: var(--tusche);
  outline: none;
  transition: border-color .2s;
  resize: vertical;
}
.these-formular input:focus,
.these-formular textarea:focus {
  border-color: var(--moos);
}
.these-formular button {
  align-self: flex-start;
  background: none;
  border: 1px solid var(--stein);
  padding: 10px 28px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15.5px;
  color: var(--stein);
  letter-spacing: 0.5px;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Mitforschen-Vorschau auf Startseite */
.mitforschen-zitate {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 28px 0 26px;
}
.mv-zitat {
  flex: 1 1 180px;
  margin: 0;
  padding: 18px 20px;
  border-left: 3px solid var(--licht);
  background: rgba(255,255,255,.45);
  font-size: 16px;
  line-height: 1.55;
  font-style: italic;
  color: var(--tusche);
}
.mv-zitat cite {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-style: normal;
  color: var(--stein);
  letter-spacing: 0.3px;
}

/* ---------- Kreislauf-Phasen-Karten ---------- */
.phasen-karten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 32px;
}
.phase-karte {
  border: 1px solid rgba(94,111,84,.4);
  padding: 24px 26px;
  background: rgba(255,255,255,.4);
}
.phase-nummer {
  font-size: 13px;
  font-weight: bold;
  color: var(--licht);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.phase-karte h3 {
  font-weight: normal;
  font-size: 20px;
  color: var(--moos);
  margin-bottom: 4px;
}
.phase-karte h3 a { color: var(--moos); border: none; }
.phase-karte h3 a:hover { border-bottom: 1px solid var(--moos); }
.phase-uhr {
  font-size: 13px;
  color: var(--stein);
  margin-bottom: 12px !important;
  letter-spacing: 0.3px;
}
.phase-karte p { font-size: 15px; line-height: 1.65; color: var(--tusche); }
@media (max-width: 620px) { .phasen-karten { grid-template-columns: 1fr; } }

/* Download-Link */
.download-link {
  display: inline-block;
  margin: 8px 0 28px;
  padding: 9px 22px;
  border: 1px solid var(--moos) !important;
  color: var(--moos) !important;
  font-size: 15px;
  letter-spacing: 0.3px;
  transition: background .2s;
}
.download-link:hover {
  background: rgba(94,111,84,.08);
}