/* ==========================================================================
   PVBB - Design-Grundlage
   Farben, Schriften, Abstaende, Grundgeruest.

   Diese Datei enthaelt keine einzige Gestaltung eines konkreten Bausteins.
   Alles, was hier steht, ist die gemeinsame Grundlage - Bausteine liegen in
   bausteine.css. Fuer WordPress wird aus dem :root-Block spaeter die
   theme.json des Themes erzeugt.
   ========================================================================== */

/* Die Schriften bindet WordPress ueber theme.json ein
   (siehe werkzeuge/theme_bauen.py). */

/* --------------------------------------------------------------------------
   1. Farben

   Vorgabe des Verbands:  Blau  RGB 17/43/78   = #112B4E
                          Gruen RGB 203/211/23 = #CBD317

   Wichtig zum Gruen: Auf Weiss erreicht es nur ein Kontrastverhaeltnis von
   1,63:1 und ist damit als Textfarbe unbrauchbar (WCAG AA verlangt 4,5:1).
   Auf dem Verbandsblau dagegen kommt es auf 8,71:1. Daraus die Regel:

       Gruen nur als Flaeche, Linie oder Text AUF Blau - niemals als Text
       auf Weiss. Fuer gruenen Text auf hellem Grund gibt es --akzent-dunkel
       (#6B7200, 5,21:1 auf Weiss).

   Der spaeter geplante Wechsel der Akzentfarbe auf Rot ist eine Aenderung an
   den drei --akzent-Werten. Nichts anderes im Projekt nennt eine Akzentfarbe
   beim Namen.
   -------------------------------------------------------------------------- */

:root {
  /* Hauptfarbe und Abstufungen */
  --blau-900: #0a1c34;
  --blau-800: #112b4e; /* Hauptfarbe */
  --blau-700: #1b3e6c;
  --blau-600: #2b5488;
  --blau-400: #6183ac;
  --blau-300: #8fa6c2;
  --blau-100: #dce4ee;
  --blau-50: #f1f5f9;

  /* Akzentfarbe */
  --akzent: #cbd317; /* Flaechen, Linien, Text auf Blau */
  --akzent-hell: #e3e97a; /* zurueckhaltende Flaechen */
  --akzent-dunkel: #6b7200; /* Text auf hellem Grund */

  /* Neutrale Toene */
  --weiss: #ffffff;
  --papier: #f7f8fa;
  --linie: #e2e6ec;
  --linie-kraeftig: #c8d0da;
  --text: #1a2433; /* 15,6:1 auf Weiss */
  --text-leise: #5a6675; /* 5,85:1 auf Weiss */
  --text-invers: #ffffff;

  /* Bedeutungsfarben, aus der Palette abgeleitet */
  --erfolg: #2f6b3f;
  --hinweis-grund: var(--blau-50);

  /* ------------------------------------------------------------------------
     2. Schrift

     Poppins fuer Ueberschriften (Vorgabe des Verbands), Inter fuer Fliesstext.
     Inter ist eigens fuer Bildschirmlesbarkeit entworfen und traegt laengere
     Absaetze besser als Poppins, das in kleinen Graden schnell breit wirkt.
     Beide liegen lokal - siehe werkzeuge/schriften_holen.py.
     ------------------------------------------------------------------------ */
  --schrift-ueberschrift: "Poppins", "Segoe UI", system-ui, sans-serif;
  --schrift-text: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Groessen wachsen stufenlos mit der Fensterbreite mit (clamp), damit es
     keine Sprunge an Umbruchpunkten gibt. */
  --gr-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
  --gr-s: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --gr-m: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --gr-l: clamp(1.0625rem, 1.02rem + 0.25vw, 1.1875rem);
  --gr-menue: clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --gr-h4: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --gr-h3: clamp(1.3125rem, 1.18rem + 0.62vw, 1.625rem);
  --gr-h2: clamp(1.5rem, 1.24rem + 1.15vw, 2.125rem);
  --gr-h1: clamp(1.875rem, 1.42rem + 2vw, 2.875rem);
  --gr-hero: clamp(2.125rem, 1.4rem + 3.2vw, 3.75rem);

  --zeile-eng: 1.15;
  --zeile-mittel: 1.4;
  --zeile-weit: 1.65;

  /* ------------------------------------------------------------------------
     3. Abstaende, Radien, Schatten
     ------------------------------------------------------------------------ */
  --raum-1: 0.25rem;
  --raum-2: 0.5rem;
  --raum-3: 0.75rem;
  --raum-4: 1rem;
  --raum-5: 1.5rem;
  --raum-6: 2rem;
  --raum-7: 2.5rem;
  --raum-8: 3rem;
  --raum-9: 4rem;
  --raum-10: 5rem;
  --raum-11: 6.5rem;

  /* Abstand zwischen zwei Seitenabschnitten */
  --abschnitt: clamp(3rem, 2rem + 5vw, 6rem);

  --rund-s: 4px;
  --rund-m: 8px;
  --rund-l: 14px;
  --rund-xl: 22px;
  --rund-voll: 999px;

  --schatten-s: 0 1px 2px rgb(17 43 78 / 0.06), 0 1px 3px rgb(17 43 78 / 0.08);
  --schatten-m: 0 2px 4px rgb(17 43 78 / 0.05), 0 6px 16px rgb(17 43 78 / 0.09);
  --schatten-l: 0 4px 8px rgb(17 43 78 / 0.05), 0 16px 36px rgb(17 43 78 / 0.12);

  /* ------------------------------------------------------------------------
     4. Breiten
     ------------------------------------------------------------------------ */
  --breite-text: 44rem; /* angenehme Zeilenlaenge fuer Fliesstext */
  --breite-inhalt: 75rem; /* Standardbreite eines Abschnitts */
  --breite-weit: 84rem;
  --rand: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);

  --uebergang: 160ms ease;
}

/* --------------------------------------------------------------------------
   5. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* Sprungziele nicht unter die Kopfzeile schieben */
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--gr-m);
  line-height: var(--zeile-weit);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0 0 var(--raum-4);
  font-family: var(--schrift-ueberschrift);
  font-weight: 600;
  line-height: var(--zeile-eng);
  color: var(--blau-800);
  letter-spacing: -0.015em;
  text-wrap: balance; /* verhindert einzelne Woerter in der letzten Zeile */
}

h1 {
  font-size: var(--gr-h1);
  font-weight: 700;
}
h2 {
  font-size: var(--gr-h2);
  font-weight: 700;
}
h3 {
  font-size: var(--gr-h3);
}
h4 {
  font-size: var(--gr-h4);
}

p,
ul,
ol {
  margin: 0 0 var(--raum-4);
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding-left: 1.3em;
}

li {
  margin-bottom: var(--raum-2);
}

li::marker {
  color: var(--blau-400);
}

a {
  color: var(--blau-700);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--uebergang);
}

a:hover {
  color: var(--blau-600);
}

strong {
  font-weight: 600;
  color: var(--blau-800);
}

small {
  font-size: var(--gr-s);
}

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

hr {
  height: 1px;
  margin: var(--raum-7) 0;
  border: 0;
  background: var(--linie);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--raum-2);
  font-size: var(--gr-s);
  color: var(--text-leise);
}

/* Sichtbarer, kraeftiger Fokusrahmen - Grundlage der Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--blau-600);
  outline-offset: 2px;
  border-radius: var(--rund-s);
}

/* Nur fuer Screenreader */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Sprungmarke zum Inhalt, erscheint beim ersten Tabulatorschritt */
.sprungmarke {
  position: absolute;
  left: var(--raum-4);
  top: -100%;
  z-index: 100;
  padding: var(--raum-3) var(--raum-5);
  background: var(--blau-800);
  color: var(--text-invers);
  border-radius: 0 0 var(--rund-m) var(--rund-m);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--uebergang);
}

.sprungmarke:focus {
  top: 0;
  color: var(--text-invers);
}

/* --------------------------------------------------------------------------
   6. Layout-Geruest
   -------------------------------------------------------------------------- */

.huelle {
  width: min(100% - 2 * var(--rand), var(--breite-inhalt));
  margin-inline: auto;
}

.huelle--weit {
  width: min(100% - 2 * var(--rand), var(--breite-weit));
}

.huelle--text {
  width: min(100% - 2 * var(--rand), var(--breite-text));
}

.abschnitt {
  padding-block: var(--abschnitt);
}

.abschnitt--eng {
  padding-block: calc(var(--abschnitt) * 0.6);
}

.abschnitt--papier {
  background: var(--papier);
}

.abschnitt--blau {
  background: var(--blau-800);
  color: var(--text-invers);
}

.abschnitt--blau h2,
.abschnitt--blau h3,
.abschnitt--blau h4 {
  color: var(--text-invers);
}

.abschnitt--blau a {
  color: var(--akzent);
}

/* Hauptblock und Seitenspalte (HB | SB der Navigationsskizze).
   Auf schmalen Geraeten stehen beide untereinander - die Seitenspalte
   rutscht dabei unter den Hauptblock. */
.gespann {
  display: grid;
  gap: var(--raum-8);
  align-items: start;
}

@media (min-width: 62rem) {
  .gespann {
    grid-template-columns: minmax(0, 1fr) 20.5rem;
    gap: var(--raum-9);
  }

  .gespann__spalte {
    position: sticky;
    top: 6rem;
  }
}

/* Gleichmaessiges Raster fuer Karten */
.raster {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.raster--zwei {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.raster--eng {
  gap: var(--raum-4);
}

/* --------------------------------------------------------------------------
   7. Wiederkehrende Textbausteine
   -------------------------------------------------------------------------- */

.augenbraue,
.is-style-pvbb-augenbraue {
  display: block;
  margin-bottom: var(--raum-3);
  font-family: var(--schrift-ueberschrift);
  font-size: var(--gr-s);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blau-600);
}

/* Auf allen dunklen Flaechen. Die Grundfarbe der Augenbraue ist ein
   mittleres Blau - auf dunkelblauem Grund waere sie praktisch unsichtbar. */
.abschnitt--blau .augenbraue,
.hero .augenbraue,
.aufruf .augenbraue,
.karte--blau .augenbraue,
.spaltenblock--teaser .augenbraue {
  color: var(--akzent);
}

.vorspann,
.is-style-pvbb-vorspann {
  max-width: 42rem;
  font-size: var(--gr-l);
  line-height: var(--zeile-weit);
  color: var(--text-leise);
}

.abschnitt--blau .vorspann {
  color: var(--blau-100);
}

.abschnitt-kopf {
  margin-bottom: var(--raum-7);
}

/* Kurzer Akzentstrich unter einer Ueberschrift */
.strich::after,
.is-style-pvbb-strich::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: var(--raum-4);
  background: var(--akzent);
  border-radius: var(--rund-voll);
}

/* --------------------------------------------------------------------------
   8. Bewegung nur, wenn erwuenscht

   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat - etwa wegen
   Migraene oder Schwindel - bekommt eine ruhige Seite.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .kopfzeile,
  .fusszeile,
  .gespann__spalte,
  .sprungmarke {
    display: none;
  }

  body {
    color: #000;
  }
}