/* ==========================================================
   die-hoffnung.ch — gemeinsame Stildatei
   Diese Datei niemals kopieren, immer nur verlinken.
   Aenderungen hier wirken sich auf alle Seiten aus.
   ========================================================== */

/* ---------- Schriften, selbst gehostet ----------
   Frueher von fonts.googleapis.com geladen. Dabei ging bei jedem
   Seitenaufruf die IP-Adresse des Besuchers an Google. Die Dateien
   liegen jetzt unter /schrift/ auf dem eigenen Server.

   Benoetigt werden genau fuenf Dateien im Format .woff2:
     literata-400.woff2          Fliesstext
     literata-400-italic.woff2   nur fuer das Bibelzitat im Fussbereich
     literata-500.woff2          Zwischentitel, Marken, Navigation
     petrona-300.woff2           grosse Ueberschriften, Merksaetze
     petrona-500.woff2           Seitentitel in der Kopfleiste

   Bezug: gwfh.mranftl.com, Zeichensatz "latin", danach umbenennen.
   Beide Schriften stehen unter der SIL Open Font License; das
   Selbsthosten ist ausdruecklich erlaubt.

   font-display:swap zeigt sofort die Ersatzschrift und tauscht
   nach, sobald die Datei da ist. So bleibt der Text lesbar,
   falls eine Datei fehlt. */

@font-face{font-family:"Literata";font-style:normal;font-weight:400;
           font-display:swap;src:url("/schrift/literata-400.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;
           font-display:swap;src:url("/schrift/literata-400-italic.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:normal;font-weight:500;
           font-display:swap;src:url("/schrift/literata-500.woff2") format("woff2")}
@font-face{font-family:"Petrona";font-style:normal;font-weight:300;
           font-display:swap;src:url("/schrift/petrona-300.woff2") format("woff2")}
@font-face{font-family:"Petrona";font-style:normal;font-weight:500;
           font-display:swap;src:url("/schrift/petrona-500.woff2") format("woff2")}

:root{
  /* Farben: Morgengrauen */
  --himmel:#F7F9FB;        /* Seitenhintergrund */
  --daemmer:#E8F0F4;       /* kuehl getoenter Abschnitt */
  --morgenlicht:#FBF5E9;   /* warm getoenter Abschnitt */
  --nacht:#1E3A4C;         /* Text und Ueberschriften */
  --horizont:#4E7A8C;      /* Nebentext */
  --gold:#C08A2E;          /* Akzent, sparsam */
  --goldtief:#8A5F14;      /* Akzent als Text auf hell */
  --bildtext:#3D6274;      /* Bildunterschrift; dunkler als --horizont,
                              weil der Text kleiner gesetzt ist (6.2:1) */

  --mass:min(38rem,100% - 2.75rem);   /* Lesebreite */
  --linie:rgba(30,58,76,.16);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--himmel);color:var(--nacht);
  font-family:"Literata",Georgia,serif;
  font-size:1.0625rem;line-height:1.72;font-weight:400;
}
.wrap{width:var(--mass);margin-inline:auto}

/* ---------- Schrift ---------- */
h1,h2,h3.gross,.merksatz{font-family:"Petrona",Georgia,serif;font-weight:300;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,9vw,3.6rem);line-height:1.08;margin:0 0 1.1rem}
h2{font-size:clamp(1.5rem,5.4vw,2rem);line-height:1.2;margin:0 0 .85rem}
h3{font:500 1rem/1.5 "Literata",serif;margin:0 0 .3rem}
p{margin:0 0 1.15rem}
.auge{font:500 .72rem/1.4 "Literata",serif;letter-spacing:.16em;
      text-transform:uppercase;color:var(--goldtief);margin:0 0 1.4rem}
.fuehrung{font-size:1.14rem;line-height:1.66;color:#2E5468}
.klein{font-size:.92rem;color:var(--horizont)}

/* ---------- Kopfbereich ---------- */
.kopfleiste{border-bottom:1px solid var(--linie);padding:.9rem 0}
.kopfleiste .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.marke{font:500 1.02rem/1 "Petrona",serif;color:var(--nacht);text-decoration:none;letter-spacing:.01em}
.marke span{color:var(--goldtief)}
nav ul{list-style:none;display:flex;gap:1.1rem;margin:0;padding:0;flex-wrap:wrap}
nav a{font-size:.9rem;color:var(--horizont);text-decoration:none;padding:.2rem 0;
      border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{color:var(--nacht)}
nav a[aria-current="page"]{color:var(--nacht);border-bottom-color:var(--gold)}

/* ---------- Seitenanfang ---------- */
header.kopf{padding:3.6rem 0 2rem}
@media(min-width:48rem){header.kopf{padding:5.5rem 0 2.6rem}}

/* ---------- Abschnitte ---------- */
section{padding:3rem 0}
section.getoent{background:var(--daemmer)}
section.warm{background:var(--morgenlicht)}

/* ---------- Horizontbild ---------- */
.himmel{margin:0 0 1.6rem}
.horizont{display:block;width:100%;height:auto}

/* Bildunterschrift.
   Sie gehoert zum Bild, nicht zum Fliesstext. Damit der Leser das sofort
   sieht, ist sie zentriert, schmaler als die Lesespalte und durch einen
   kurzen Goldstrich vom Text darunter getrennt. Vorher stand sie
   linksbuendig auf voller Lesebreite und wurde als Einleitungssatz
   des Artikels gelesen. */
.bildtext{
  width:min(28rem,100% - 2.75rem);
  margin:0 auto;
  padding-top:1.1rem;
  text-align:center;
  font-size:.84rem;
  line-height:1.55;
  color:var(--bildtext);
  font-style:normal;
  position:relative;
}
.bildtext::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:1.5rem;height:2px;background:var(--gold);
}
/* Die Stelle steht auf eigener Zeile — so ist erkennbar, dass sie
   den Bildvers belegt und nicht den nachfolgenden Abschnitt. */
.bildtext em{
  display:block;margin-top:.4rem;
  font-style:normal;font-size:.75rem;
  letter-spacing:.07em;color:var(--goldtief);
}
#glut{opacity:0;animation:aufgehen 2.6s ease-out .3s forwards}
@keyframes aufgehen{to{opacity:1}}
@media(prefers-reduced-motion:reduce){#glut{animation:none;opacity:1}}

/* ---------- Stationen (nummerierte Kette) ---------- */
ol.stationen{list-style:none;margin:2rem 0 0;padding:0}
ol.stationen li{border-top:1px solid var(--linie);padding:1.15rem 0 1.15rem 2.6rem;position:relative}
ol.stationen li:last-child{border-bottom:1px solid var(--linie)}
ol.stationen li::before{content:"";position:absolute;left:0;top:1.75rem;
                        width:1.5rem;height:2px;background:var(--gold)}
ol.stationen li:last-child::before{height:3px;background:var(--goldtief)}
.stelle{display:block;margin-top:.35rem;font-size:.86rem;color:var(--horizont)}

/* ---------- Merksatz ---------- */
.merksatz{margin:2.3rem 0 0;padding:1.4rem 0 0;border-top:2px solid var(--gold);
          font-size:clamp(1.25rem,4.4vw,1.55rem);line-height:1.34}

/* ---------- Hinweiskasten ---------- */
.hinweis{background:var(--morgenlicht);border-left:3px solid var(--gold);
         padding:1.1rem 1.2rem;margin:2rem 0;font-size:.98rem;border-radius:0}
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{display:block;margin-bottom:.3rem}

/* ---------- Ebenen-Karten (Startseite) ---------- */
ul.ebenen{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1px;
          background:var(--linie);border-block:1px solid var(--linie)}
ul.ebenen li{background:var(--himmel)}
ul.ebenen a{display:block;padding:1.4rem 0;color:var(--nacht);text-decoration:none}
ul.ebenen a:hover h3,ul.ebenen a:focus-visible h3{color:var(--goldtief)}
ul.ebenen .nr{font:500 .72rem/1 "Literata",serif;letter-spacing:.14em;
              text-transform:uppercase;color:var(--goldtief);display:block;margin-bottom:.45rem}
ul.ebenen h3{font-family:"Petrona",serif;font-weight:300;font-size:1.35rem;line-height:1.25}
ul.ebenen p{margin:.2rem 0 0;font-size:.95rem;color:var(--horizont)}

/* ---------- Weiterlesen ---------- */
ul.tiefgang{list-style:none;margin:1.6rem 0 0;padding:0}
ul.tiefgang li{border-top:1px solid var(--linie)}
ul.tiefgang li:last-child{border-bottom:1px solid var(--linie)}
ul.tiefgang a{display:block;padding:1.05rem 0;color:var(--nacht);text-decoration:none}
ul.tiefgang a:hover h3,ul.tiefgang a:focus-visible h3{color:var(--goldtief)}
ul.tiefgang p{margin:0;font-size:.94rem;color:var(--horizont)}

/* ---------- Fussbereich ---------- */
footer{border-top:1px solid var(--linie);padding:2.6rem 0 3.4rem;
       font-size:.9rem;color:var(--horizont);margin-top:1rem}
footer a{color:var(--horizont)}
footer .offenlegung{margin-bottom:1.2rem}
footer nav ul{gap:1rem}

a:focus-visible{outline:2px solid var(--goldtief);outline-offset:3px}

/* ---------- Seite "Wenn ein Kind stirbt" ----------
   Ruhiger gesetzt: mehr Zeilenabstand, Belegstellen als eigene Zeile. */
.beleg{display:block;margin:-.5rem 0 1.3rem;font-size:.86rem;color:var(--horizont)}

/* ---------- Waage: Argument und Gegenargument ----------
   Zwei Punkte je Stelle, mit kurzer Marke davor. Die Marken sind
   bewusst gleich gewichtet — der Text urteilt nicht, er stellt
   gegenueber. Deshalb kein Gruen/Rot, sondern beide in Gold. */
ul.waage{list-style:none;margin:.4rem 0 1.6rem;padding:0}
ul.waage li{position:relative;padding:.55rem 0 .55rem 1.1rem;
            border-left:2px solid var(--linie)}
ul.waage li + li{margin-top:.2rem}
.seite{display:inline-block;font:500 .7rem/1.4 "Literata",serif;
       letter-spacing:.13em;text-transform:uppercase;color:var(--goldtief);
       margin-right:.45rem}
.still{line-height:1.82}
.still h2{margin-top:.4rem}
.zuspruch{font-family:"Petrona",Georgia,serif;font-weight:300;
          font-size:clamp(1.2rem,4.2vw,1.45rem);line-height:1.4;
          margin:2rem 0;padding:0 0 0 1.2rem;border-left:3px solid var(--gold)}
.weiterfuehrung{border-top:1px solid var(--linie);margin-top:2.4rem;padding-top:1.6rem}
.knopf{display:inline-block;margin-top:.6rem;padding:.7rem 1.3rem;
       background:var(--nacht);color:var(--himmel);text-decoration:none;
       border-radius:4px;font-size:.98rem}
.knopf:hover,.knopf:focus-visible{background:var(--goldtief)}
.einstieg{border-top:1px solid var(--linie);margin-top:2.6rem;padding-top:1.8rem}
.einstieg a{color:var(--nacht);text-decoration:none;display:block}
.einstieg a:hover h3,.einstieg a:focus-visible h3{color:var(--goldtief)}
.einstieg h3{font-family:"Petrona",serif;font-weight:300;font-size:1.3rem;line-height:1.25;margin:0 0 .3rem}
.einstieg p{margin:0;font-size:.95rem;color:var(--horizont)}

/* ---------- Uebersichtstabelle ----------
   Auf schmalen Bildschirmen seitlich scrollbar statt gequetscht. */
.uebersicht{overflow-x:auto;margin:1.6rem 0 1.4rem;
            -webkit-overflow-scrolling:touch}
.uebersicht table{border-collapse:collapse;width:100%;min-width:34rem;
                  font-size:.92rem;line-height:1.5}
.uebersicht th,.uebersicht td{text-align:left;vertical-align:top;
                              padding:.6rem .7rem;border-bottom:1px solid var(--linie)}
.uebersicht th{font-weight:500;font-size:.8rem;letter-spacing:.04em;
               text-transform:uppercase;color:var(--horizont);
               border-bottom:1px solid var(--nacht)}
.uebersicht td:first-child{font-weight:500}
.uebersicht .bedingt{color:var(--goldtief)}
.uebersicht caption{caption-side:bottom;text-align:left;padding-top:.7rem;
                    font-size:.88rem;color:var(--horizont)}

/* ---------- Kopfbild nach Tageszeit ----------
   Vier Phasen: nacht, morgen, tag, abend. Umgeschaltet von /himmel.js
   ueber das Attribut data-phase. Ohne Skript bleibt "morgen" stehen.
   In JEDER Phase steht die Sonne unter der Linie. Das ist die Aussage
   der Seite, nicht ein Versehen. Nicht "korrigieren". */
.himmel [data-teil]{display:none}
.himmel[data-phase="nacht"]  [data-teil="nacht"],
.himmel[data-phase="morgen"] [data-teil="morgen"],
.himmel[data-phase="tag"]    [data-teil="tag"],
.himmel[data-phase="abend"]  [data-teil="abend"]{display:block}
.himmel [data-teil="morgen"]{display:block}          /* Voreinstellung ohne Skript */
.himmel[data-phase] [data-teil="morgen"]{display:none}
.himmel[data-phase="morgen"] [data-teil="morgen"]{display:block}

.himmel .horizont rect,
.himmel .horizont circle,
.himmel .horizont line{transition:opacity 1.2s ease}

/* Der Morgenstern flimmert nicht. Das ist der Punkt: die anderen Sterne
   schwanken, er steht ruhig. Offenbarung 22,16 / 2. Petrus 1,19 */
.morgenstern circle{animation:none}

/* Sterne nur nachts, sehr ruhig */
.stern{animation:flimmern 6s ease-in-out infinite}
.stern:nth-of-type(3n){animation-delay:2s}
.stern:nth-of-type(5n){animation-delay:4s}
@keyframes flimmern{0%,100%{opacity:.85}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){
  .stern{animation:none}
  .himmel .horizont rect,
  .himmel .horizont circle,
  .himmel .horizont line{transition:none}
}