/* Planerjahr – nur Variablen (K4a, Design-Kit Version 1). Kontrastwerte in DESIGN.md (node tools/bild/kontrast.js). */
:root {
  --marke: #1d4f7a;        /* Dunkelblau wie Logo und PDFs: 8,57:1 auf Weiß */
  --marke-dunkel: #143a5c;
  --marke-hell: #e9f1f9;   /* Ferienblau der Kalender */
  --akzent: #c9822a;       /* nur Fokusrahmen, nie Text */
  --flaeche: #f6f4ef;      /* Papierton */
  --radius: 12px;
}

/* Seitenspezifisch (wenige Zeilen): Länderauswahl als Kachelraster, Bildergalerie der Produktseiten,
   Linkliste im Fuß (die Kopfnavigation blendet das Kit mobil aus). */
.laender { list-style: none; padding: 0; max-width: none; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.laender a { display: flex; align-items: center; min-height: 48px; padding: .6rem 1rem; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius-klein); text-decoration: none; font-weight: 600; }
.laender a:hover { border-color: var(--marke); }
.galerie { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.galerie figure { margin: 0; } .galerie img { box-shadow: 0 0 0 1px var(--linie); } .galerie figcaption { font-size: .9rem; color: var(--text-leise); margin-top: .4rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; padding: 0; margin: 0 0 1rem; max-width: none; flex-basis: 100%; }
/* 390 px: lange deutsche Wörter in Überschriften und lange Quell-URLs umbrechen; das zweite, schräg versetzte Vorschaublatt nicht überstehen lassen. */
h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
main { overflow-wrap: break-word; }
.hero { overflow-x: clip; }
/* Hochformat-Vorschau (A4-Seiten der Planer) im Startbereich schmaler, damit sie auf dem ersten Bildschirm bleibt. */
.hochformat { position: relative; max-width: 24rem; margin-inline: auto; }