/* ============================================================================
   generationa.de — die EINE Stilvorlage der Seite (keine Fremdbibliothek).

   Identität (bewusst nicht mit der herrki-Maschine verwechselbar):
   ruhiges Tiefblau + Anthrazit, EIN warmer Akzent (Bernstein), viel Weißraum,
   Serifen-Überschriften über sachlicher Grotesk — Magazin, kein Kurs.
   Keine Emojis, keine Icons, keine Farbverläufe, kein Dunkelmodus.
   Schriften ausschließlich aus dem System (kein fremder Server, kein Nachladen).
   ========================================================================== */

:root{
  --ga-tinte:#12263F;          /* Tiefblau: Kopf, Überschriften */
  --ga-blau:#1D4E7E;           /* Links, aktive Elemente */
  --ga-blau-hell:#EAF0F7;      /* sehr helle Blaufläche: Merkkasten, Auswahl */
  --ga-anthrazit:#23272E;      /* Fließtext */
  --ga-grau:#5D6773;           /* Meta-Angaben, Datum, Fußzeile */
  --ga-linie:#DFE4EA;          /* Trennlinien, Rahmen */
  --ga-flaeche:#F6F8FA;        /* hervorgehobene Flächen */
  --ga-weiss:#FFFFFF;
  --ga-bernstein:#A96A0D;      /* warmer Akzent — sparsam! */
  --ga-bernstein-hell:#FBF3E4; /* Fläche des Akzents (Einfach gesagt) */
  --ga-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --ga-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ga-spalte:720px;           /* Lesespalte (Vorgabe) */
  --ga-breit:1120px;           /* Gitterbreite für Karten und Kacheln */
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ga-weiss);color:var(--ga-anthrazit);
  font-family:var(--ga-sans);font-size:17px;line-height:1.7;
  /* Lange Fremdwörter und Adressen dürfen die Zeile nicht sprengen (360-px-Ansicht) */
  overflow-wrap:break-word;
}
h1,h2,h3,h4{font-family:var(--ga-serif);color:var(--ga-tinte);line-height:1.25;font-weight:600;}
h1{font-size:2rem;margin:0 0 .6rem;letter-spacing:-.01em;}
h2{font-size:1.5rem;margin:2.4rem 0 .8rem;}
h3{font-size:1.2rem;margin:1.8rem 0 .5rem;}
p{margin:0 0 1.1rem;}
a{color:var(--ga-blau);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(29,78,126,.4);}
a:hover,a:focus{color:var(--ga-tinte);text-decoration-color:var(--ga-bernstein);}
img{max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--ga-bernstein);outline-offset:2px;}

/* ===== Kopfzeile ========================================================== */
.kopf{border-bottom:1px solid var(--ga-linie);background:var(--ga-weiss);}
.kopf-innen{max-width:var(--ga-breit);margin:0 auto;padding:.7rem 1rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.marke{font-family:var(--ga-serif);font-size:1.35rem;color:var(--ga-tinte);
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap;}
.marke-wort{font-weight:600;}
.marke-a{color:var(--ga-bernstein);font-weight:700;margin-left:.18em;}
.kopf-claim{color:var(--ga-grau);font-size:.85rem;letter-spacing:.02em;
  border-left:1px solid var(--ga-linie);padding-left:1rem;display:none;}
.burger{margin-left:auto;font:inherit;font-size:.9rem;color:var(--ga-tinte);
  background:var(--ga-weiss);border:1px solid var(--ga-linie);border-radius:4px;
  padding:.35rem .8rem;cursor:pointer;}
.burger:hover{border-color:var(--ga-blau);}

/* Menü: auf schmalen Geräten eingeklappt, ab 800 px eine Zeile neben der Wortmarke */
.menue{display:none;width:100%;padding:.4rem 0 .2rem;}
.menue.offen{display:block;}
.menue a{display:block;padding:.5rem 0;color:var(--ga-tinte);text-decoration:none;
  border-bottom:1px solid var(--ga-linie);font-size:.95rem;}
.menue a:hover,.menue a.aktiv{color:var(--ga-blau);}
.menue-auf summary{cursor:pointer;padding:.5rem 0;border-bottom:1px solid var(--ga-linie);
  font-size:.95rem;color:var(--ga-tinte);}
.menue-auf ul{list-style:none;margin:0;padding:0 0 0 .9rem;}
.menue-auf a{border-bottom:none;padding:.35rem 0;color:var(--ga-grau);}

/* ===== Grundraster ======================================================== */
.inhalt{display:block;}
.lesespalte{max-width:var(--ga-spalte);margin:0 auto;padding:2rem 1rem 1rem;}
.breitspalte{max-width:var(--ga-breit);margin:0 auto;padding:0 1rem 1rem;}

/* ===== Startseite: Hero =================================================== */
.hero{background:var(--ga-flaeche);border-bottom:1px solid var(--ga-linie);}
.hero-innen{max-width:860px;margin:0 auto;padding:3rem 1rem 2.6rem;}
.hero-oben{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ga-bernstein);margin:0 0 .9rem;}
.hero h1{font-size:2.1rem;margin-bottom:1rem;}
.hero-these{font-size:1.12rem;color:var(--ga-anthrazit);max-width:60ch;margin-bottom:1.6rem;}
.hero-aktion{display:flex;flex-wrap:wrap;gap:.7rem;margin:0;}

/* ===== Knöpfe (Text, keine Icons) ========================================= */
.knopf{display:inline-block;font:inherit;font-size:.95rem;text-decoration:none;cursor:pointer;
  padding:.6rem 1.15rem;border-radius:4px;border:1px solid var(--ga-tinte);
  background:var(--ga-tinte);color:var(--ga-weiss);}
.knopf:hover,.knopf:focus{background:var(--ga-blau);border-color:var(--ga-blau);color:var(--ga-weiss);}
.knopf-still{background:var(--ga-weiss);color:var(--ga-tinte);border-color:var(--ga-linie);}
.knopf-still:hover,.knopf-still:focus{background:var(--ga-blau-hell);color:var(--ga-tinte);
  border-color:var(--ga-blau);}
.knopf[disabled],.knopf-still[disabled]{opacity:.5;cursor:default;}

/* ===== Abschnitte der Startseite ========================================== */
.einstiege,.felder,.aktuell-leiste{max-width:var(--ga-breit);margin:0 auto;padding:2.6rem 1rem;}
.einstiege h2,.felder h2,.aktuell-leiste h2{margin-top:0;}
.abschnitt-lead{color:var(--ga-grau);max-width:62ch;margin-top:-.3rem;}
.felder{border-top:1px solid var(--ga-linie);}
.aktuell-leiste{border-top:1px solid var(--ga-linie);}

/* ===== Karten (Artikel in Listen, Einstiege, Weiterlesen) ================= */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;}
.karten-drei{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.karte{display:flex;flex-direction:column;gap:.4rem;text-decoration:none;color:inherit;
  border:1px solid var(--ga-linie);border-radius:4px;background:var(--ga-weiss);
  padding:1.1rem 1.15rem;transition:border-color .15s ease,background .15s ease;}
.karte:hover,.karte:focus{border-color:var(--ga-blau);background:var(--ga-flaeche);}
.karte-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;}
.karte-gattung{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ga-bernstein);}
.karte-titel{font-family:var(--ga-serif);font-size:1.16rem;color:var(--ga-tinte);line-height:1.3;}
.karte-text{color:var(--ga-anthrazit);font-size:.95rem;}
.karte-fuss{margin-top:auto;padding-top:.5rem;color:var(--ga-grau);font-size:.8rem;}
.karte-einstieg{border-left:3px solid var(--ga-bernstein);}

/* gelesen-Haken: wird von assets/js/app.js aus dem lokalen Browserspeicher eingeblendet */
.haken{font-size:.72rem;color:var(--ga-grau);white-space:nowrap;}
[hidden]{display:none !important;}

/* ===== Themenfeld-Kacheln ================================================= */
.feld-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;}
.feld-kachel{display:block;text-decoration:none;color:inherit;background:var(--ga-weiss);
  border:1px solid var(--ga-linie);border-top:3px solid var(--ga-tinte);border-radius:4px;
  padding:1.2rem 1.2rem 1rem;}
.feld-kachel:hover,.feld-kachel:focus{border-top-color:var(--ga-bernstein);background:var(--ga-flaeche);}
.feld-kachel h3{margin:0 0 .45rem;font-size:1.15rem;}
.feld-kachel p{margin:0 0 .8rem;font-size:.95rem;color:var(--ga-anthrazit);}
.feld-zahl{font-size:.78rem;letter-spacing:.06em;color:var(--ga-grau);text-transform:uppercase;}
.felder-quer{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--ga-linie);
  color:var(--ga-grau);font-size:.95rem;max-width:70ch;}

/* ===== Leiste „Aktuell“ =================================================== */
.aktuell-liste{list-style:none;margin:0;padding:0;}
.aktuell-liste li{padding:.9rem 0;border-bottom:1px solid var(--ga-linie);}
.aktuell-liste li:first-child{border-top:1px solid var(--ga-linie);}
.aktuell-liste a{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .9rem;
  text-decoration:none;}
.aktuell-datum{font-size:.8rem;color:var(--ga-bernstein);letter-spacing:.04em;
  min-width:9.5rem;flex-shrink:0;}
.aktuell-titel{font-family:var(--ga-serif);font-size:1.1rem;color:var(--ga-tinte);}
.aktuell-liste a:hover .aktuell-titel{color:var(--ga-blau);}
.aktuell-text{margin:.25rem 0 0;color:var(--ga-grau);font-size:.92rem;}
.aktuell-mehr{margin:1.1rem 0 0;font-size:.92rem;}

/* ===== Artikelseite ======================================================= */
.brotkrumen{font-size:.82rem;color:var(--ga-grau);margin-bottom:1.1rem;}
.brotkrumen a{color:var(--ga-grau);}
.artikel-kopf{border-bottom:1px solid var(--ga-linie);padding-bottom:1.2rem;margin-bottom:1.8rem;}
.artikel-kopf h1{font-size:2.1rem;}
.lead{font-size:1.12rem;color:var(--ga-grau);margin-bottom:1.1rem;}
.artikel-datum{font-size:.82rem;color:var(--ga-grau);margin:.7rem 0 0;}

/* Badges: Gattung, Themenfeld, Zeithorizont, Lesezeit */
.badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;}
.badge{display:inline-block;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ga-tinte);background:var(--ga-flaeche);border:1px solid var(--ga-linie);
  border-radius:3px;padding:.22rem .55rem;}
.badge-thema,.badge-szenario,.badge-stimme,.badge-aktuell{
  color:var(--ga-bernstein);border-color:var(--ga-bernstein);background:var(--ga-bernstein-hell);}
.badge-still{color:var(--ga-grau);}
/* querliegendes Feld „Mach dich bereit“ — blau statt bernstein, damit es die Gattung nicht überstrahlt */
.badge-quer{color:var(--ga-blau);border-color:var(--ga-blau);background:var(--ga-blau-hell);}
.badge-entwurf{color:var(--ga-weiss);background:var(--ga-grau);border-color:var(--ga-grau);}

/* Fließtext im Artikel */
.artikel-inhalt h2{padding-top:.6rem;border-top:1px solid var(--ga-linie);}
.artikel-inhalt h2:first-child{border-top:none;padding-top:0;margin-top:.4rem;}
.artikel-inhalt ul,.artikel-inhalt ol{margin:0 0 1.1rem;padding-left:1.3rem;}
.artikel-inhalt li{margin-bottom:.45rem;}
.artikel-inhalt strong{color:var(--ga-tinte);}
.vorspann{color:var(--ga-grau);font-size:.95rem;border-left:2px solid var(--ga-linie);
  padding:.2rem 0 .2rem 1rem;margin:0 0 1.6rem;}

/* „Einfach gesagt“ — der warme Akzent, genau EIN Kasten pro Artikel */
.einfach-gesagt{background:var(--ga-bernstein-hell);border-left:3px solid var(--ga-bernstein);
  border-radius:0 4px 4px 0;padding:1rem 1.15rem;margin:0 0 1.6rem;}
.einfach-gesagt .titel{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ga-bernstein);margin-bottom:.35rem;}
.einfach-gesagt p{margin:0;}

/* Merkkasten — das Blau-Gegenstück, für Kernaussagen und Handlungsteile */
.merkkasten{background:var(--ga-blau-hell);border-left:3px solid var(--ga-blau);
  border-radius:0 4px 4px 0;padding:1rem 1.15rem;margin:1.6rem 0;}
.merkkasten h3{margin:0 0 .5rem;font-size:1.08rem;}
.merkkasten p:last-child,.merkkasten ul:last-child{margin-bottom:0;}

/* Neutraler Kasten (Hinweise, leere Listen) */
.kasten{background:var(--ga-flaeche);border:1px solid var(--ga-linie);border-radius:4px;
  padding:1rem 1.15rem;margin:1.5rem 0;}

/* Zitate */
.zitat{margin:1.6rem 0;padding:.2rem 0 .2rem 1.15rem;border-left:3px solid var(--ga-bernstein);
  font-family:var(--ga-serif);font-size:1.2rem;line-height:1.5;color:var(--ga-tinte);}
.zitat p{margin:0 0 .4rem;}
.zitat cite{display:block;font-family:var(--ga-sans);font-size:.82rem;font-style:normal;
  color:var(--ga-grau);}

/* Dezenter Hinweis auf einen noch nicht geschriebenen Artikel */
.kommt-noch{font-size:.85rem;color:var(--ga-grau);}

/* Verweis auf andere Themenfelder/Artikel am Ende eines Abschnitts */
.verweis{font-size:.9rem;color:var(--ga-grau);border-left:2px solid var(--ga-linie);
  padding:.15rem 0 .15rem .9rem;margin:1.2rem 0 1.6rem;}

/* Der „Vertrag“ einer Generation — hervorgehobene Kernzeile eines Abschnitts */
.vertrag{border-left:3px solid var(--ga-bernstein);padding:.1rem 0 .1rem 1rem;
  margin:0 0 1rem;font-size:1.05rem;}

/* Hervorgehobene Punkteliste im Merkkasten (ohne Aufzählungszeichen, mehr Luft) */
.punkte{list-style:none;padding-left:0;margin-bottom:0;}
.punkte li{margin-bottom:.9rem;padding-left:1rem;border-left:2px solid rgba(29,78,126,.35);}
.punkte li:last-child{margin-bottom:0;}

/* Kursiv gesetzter Schlusssatz eines Artikels */
.schluss{margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--ga-linie);
  font-family:var(--ga-serif);font-size:1.08rem;color:var(--ga-tinte);}

/* Kleingesetzte Fußnote (Quellen-/Einordnungshinweise) */
.fussnote{font-size:.85rem;color:var(--ga-grau);margin-top:1.6rem;}

/* ===== Tabellen ==========================================================
   Der Rahmen scrollt waagerecht, damit auf 360 px NICHTS über den Seitenrand läuft. */
.tabelle-rahmen{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--ga-linie);border-radius:4px;}
.tabelle{border-collapse:collapse;width:100%;min-width:44rem;font-size:.92rem;}
.tabelle th,.tabelle td{border-bottom:1px solid var(--ga-linie);
  border-right:1px solid var(--ga-linie);padding:.6rem .7rem;text-align:left;vertical-align:top;}
.tabelle thead th{background:var(--ga-flaeche);color:var(--ga-tinte);font-family:var(--ga-sans);
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;}
.tabelle tbody th{background:var(--ga-flaeche);font-family:var(--ga-serif);font-size:1rem;
  white-space:nowrap;}
.tabelle tr:last-child th,.tabelle tr:last-child td{border-bottom:none;}
.tabelle th:last-child,.tabelle td:last-child{border-right:none;}
.tab-klein{display:block;font-family:var(--ga-sans);font-size:.75rem;font-weight:400;
  color:var(--ga-grau);white-space:nowrap;}

/* ===== Weiterlesen ======================================================== */
.weiterlesen{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--ga-linie);}
.weiterlesen h2{margin-top:0;border-top:none;padding-top:0;}

/* ===== Feedback-Box ======================================================= */
.feedback-box{margin-top:2rem;}
.feedback-box h2{margin:0 0 .8rem;font-size:1.15rem;border-top:none;padding-top:0;}
.fb-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem;}
.fb-text label{display:block;font-size:.9rem;color:var(--ga-grau);margin:.6rem 0 .35rem;}
.fb-text textarea{width:100%;font:inherit;font-size:.95rem;padding:.6rem .7rem;
  border:1px solid var(--ga-linie);border-radius:4px;background:var(--ga-weiss);
  color:var(--ga-anthrazit);resize:vertical;}
.fb-text textarea:focus{border-color:var(--ga-blau);outline:none;
  box-shadow:0 0 0 3px rgba(29,78,126,.15);}
.fb-aktion{margin:.6rem 0 0;}
.fb-danke{margin:.4rem 0 0;color:var(--ga-tinte);font-weight:600;}
.fb-fehler{color:#A3272F;font-weight:400;}
.fb-hinweis{margin:.7rem 0 0;font-size:.82rem;color:var(--ga-grau);}

/* ===== Fußzeile (schlank) ================================================= */
.fuss{border-top:1px solid var(--ga-linie);background:var(--ga-flaeche);margin-top:3rem;}
.fuss-innen{max-width:var(--ga-breit);margin:0 auto;padding:2rem 1rem 2.4rem;}
.fuss-marke{font-family:var(--ga-serif);font-size:1.15rem;color:var(--ga-tinte);margin:0 0 .6rem;}
.fuss-links{margin:0 0 .9rem;font-size:.9rem;color:var(--ga-grau);}
.fuss-links a{color:var(--ga-grau);}
.fuss-links a:hover{color:var(--ga-blau);}
.fuss-hinweis{margin:0 0 .5rem;font-size:.82rem;color:var(--ga-grau);max-width:75ch;}

/* ===== Ab 800 px: Menü in einer Zeile, größere Überschriften ============== */
@media (min-width:800px){
  body{font-size:18px;}
  .burger{display:none;}
  .kopf-claim{display:inline;}
  .menue{display:flex;align-items:center;gap:1.4rem;width:auto;margin-left:auto;padding:0;}
  .menue a{border-bottom:none;padding:.2rem 0;}
  .menue a.aktiv{border-bottom:2px solid var(--ga-bernstein);}
  /* Aufklapper als Klappmenü: die sechs Felder legen sich über den Inhalt */
  .menue-auf{position:relative;}
  .menue-auf summary{border-bottom:none;padding:.2rem 0;list-style:none;}
  .menue-auf summary::-webkit-details-marker{display:none;}
  .menue-auf summary::after{content:" ▾";color:var(--ga-grau);}
  .menue-auf[open] > ul{position:absolute;top:1.9rem;left:-.9rem;z-index:20;min-width:16rem;
    background:var(--ga-weiss);border:1px solid var(--ga-linie);border-radius:4px;
    padding:.5rem .9rem;box-shadow:0 6px 24px rgba(18,38,63,.12);}
  .menue-auf a{padding:.4rem 0;color:var(--ga-tinte);}
  /* Sechs Kacheln als sauberes 2x3-Raster statt 4+2 */
  .feld-gitter{grid-template-columns:repeat(3,1fr);}
  .hero h1{font-size:2.7rem;}
  .hero-innen{padding:4.2rem 1rem 3.4rem;}
  .artikel-kopf h1{font-size:2.5rem;}
  .lesespalte{padding-top:2.6rem;}
  .aktuell-liste a{flex-wrap:nowrap;}
}

/* Zwischen 800 und 960 px bleiben zwei Spalten lesbarer als drei */
@media (min-width:800px) and (max-width:960px){
  .feld-gitter{grid-template-columns:repeat(2,1fr);}
}

/* ===== Schmale Geräte (360 px): nichts darf über den Rand ================= */
@media (max-width:420px){
  .hero-innen{padding:2.2rem 1rem 2rem;}
  .hero h1{font-size:1.65rem;}
  .h1,h1{letter-spacing:0;}
  .artikel-kopf h1{font-size:1.65rem;}
  .lesespalte,.breitspalte,.einstiege,.felder,.aktuell-leiste{padding-left:1rem;padding-right:1rem;}
  .aktuell-datum{min-width:0;}
  .zitat{font-size:1.05rem;}
  .hero-aktion .knopf{width:100%;text-align:center;}
}