/* ===========================================================================
   ressourcenexperte.de — Übergangsseite
   Stand 14.09.2026

   Die Token-STRUKTUR ist von tagesworkshop.de übernommen (gleiche Namen,
   projekteigene Werte) — so wie es docs/gemeinsam/bausteine-uebertragen.md
   vorsieht. Übertragen wurde ausschliesslich, was laut Markenklammer
   projektübergreifend trägt:

       Petrol  #135E63   und   IBM Plex Sans

   NICHT übernommen, weil Stilmittel von tagesworkshop.de:
       Moderationskarte · Caveat · Polaroid · Papier-Karo · Männchen · Gelb

   Alle Werte stehen NUR hier. Kein fester Farbwert, keine Pixelgrösse
   ausserhalb dieses :root-Blocks.
   =========================================================================== */

/* --------------------------------------------------------------------------
   SCHRIFT — lokal ausgeliefert (web-layout B2). Kein Google-Request.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('schriften/ibm-plex-sans-de.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* Metrisch angeglichener Ersatz (web-layout B2): Bis die Webschrift da
   ist, rendert der Browser mit der Systemschrift. Ohne Ausgleich springt
   das Layout beim Umschalten. Werte gleichen Arial an IBM Plex Sans an. */
@font-face {
  font-family: 'Plex Ersatz';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  /* ------------------------------------------------------------------------
     FARBEN — nach Rolle benannt, nicht nach Aussehen.
     ------------------------------------------------------------------------ */

  /* Flächen. Nur zwei Arbeitsflächen (Flächenordnung, CLAUDE.md):
     --farbe-grund (Seitengrund) und --farbe-flaeche-2 (Ton).
     Weiss steht nur, wo es an Petrol grenzt, sonst gehört es den Karten. */
  --farbe-grund:        #F7F9F9;  /* Seitengrund, kühles Grau */
  --farbe-flaeche:      #FFFFFF;  /* Karten und Flächen, die an Petrol grenzen */
  --farbe-flaeche-2:    #E9EFEF;  /* der Ton — ein Schritt, 0,091 Helligkeit */
  --farbe-petrol-hell:  #DCE7E7;  /* Petrol als Fläche: Hinweis, Zitat */
  --farbe-linie:        #DCE3E3;  /* Rahmen und Trennlinien auf dem Grund */
  --farbe-linie-ton:    #CDD7D7;  /* dieselbe Linie auf --farbe-flaeche-2 */

  /* Schrift */
  --farbe-tinte:        #10282A;  /* Fliesstext und Überschriften */
  --farbe-tinte-mittel: #2C4144;  /* Dachzeilen und Unterzeilen, die tragen */
  --farbe-tinte-leise:  #4E6365;  /* Nebeninformation, nie ganze Absätze */
  --farbe-auf-dunkel:   #FFFFFF;  /* Schrift auf Petrol */

  /* Petrol trägt die Struktur: Kopfzeile, Knöpfe, Kartenkanten */
  --farbe-petrol:       #135E63;
  --farbe-petrol-tief:  #0E4A4F;  /* Hover, gedrückter Zustand */

  /* Der eine warme Akzent — Mikroakzent, kein Flächenton.
     Auf dieser Seite genau zwei Aufgaben: der Strich am Baustellen-
     Hinweis und der Fokusring auf hellem Grund.

     NUR EIN WERT, und zwar der dunkle. Der Tagesworkshop führt zwei
     Orangetöne (#E37222 als Fläche, #A34A12 als Text). Hier tritt
     Orange nie als Fläche auf, sondern nur als 6px-Strich — und ein
     Strich ist ein grafisches Element, für das WCAG 1.4.11 dieselben
     3:1 fordert wie für einen Rahmen. Gemessen:

       #E37222 auf dem Hinweisgrund #DCE7E7   2,48:1   durchgefallen
       #A34A12 auf dem Hinweisgrund #DCE7E7   4,69:1   trägt
       #A34A12 auf Weiss (die Sektion daneben) 5,92:1  trägt

     Der hellere Wert wäre also ausgerechnet dort untergegangen, wo er
     die Aufmerksamkeit holen soll. Er ist deshalb gar nicht erst als
     Token angelegt — was nicht dasteht, wird auch nicht versehentlich
     benutzt. */
  --farbe-akzent:       #A34A12;

  /* Fokusring (web-layout B3: >= 3:1 gegen die Umgebung).
     Zwei Werte, weil einer nicht auf beiden Gründen trägt — auf Petrol
     geht der dunkle Akzent unter (1,26:1), dort übernimmt Weiss. */
  --farbe-fokus:        #A34A12;
  --farbe-fokus-dunkel: #FFFFFF;

  /* ─── KONTRASTNACHWEIS, gerechnet mit docs/gemeinsam/kontrast.mjs ────
     Gegen --farbe-grund #F7F9F9 (AA ab 4,5:1):
       tinte 14,62:1 · tinte-mittel 10,21:1 · tinte-leise 6,03:1
       petrol 7,07:1 · akzent 5,61:1
     Gegen --farbe-flaeche #FFFFFF:
       tinte 15,45:1 · tinte-mittel 10,79:1 · tinte-leise 6,37:1
       petrol 7,48:1 · akzent 5,92:1
     Gegen --farbe-flaeche-2 #E9EFEF (der Ton):
       tinte 13,29:1 · tinte-mittel 9,28:1 · tinte-leise 5,48:1
       petrol 6,43:1 · akzent 5,09:1
     Gegen --farbe-petrol-hell #DCE7E7 (Hinweiskasten):
       tinte 12,24:1 · tinte-mittel 8,55:1 · petrol 5,92:1
       akzent (Strich) 4,69:1
     Auf Petrol #135E63:
       auf-dunkel 7,48:1 · Fokusring weiss 7,48:1
     Flächen gegeneinander (Hausschwelle 0,05 Helligkeit):
       grund -> ton          0,091  trägt
       ton   -> flaeche      0,147  trägt
       grund -> petrol-hell  0,197  trägt
     NICHT brauchbar für Text, bewusst nirgends verwendet:
       tinte auf petrol 2,07:1 · akzent-Fläche als Textgrund
     ------------------------------------------------------------------ */

  /* ------------------------------------------------------------------------
     SCHRIFT-STACKS und GEWICHTE
     ------------------------------------------------------------------------ */
  --schrift-basis: 'IBM Plex Sans', 'Plex Ersatz', ui-sans-serif, system-ui,
                   -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gewicht-normal:   400;
  --gewicht-etikett:  500;  /* Kleinversalien, Wortmarke „ressourcen“ */
  --gewicht-halbfett: 600;  /* Knöpfe, Kartenüberschriften */
  --gewicht-fett:     700;  /* Überschriften */

  /* ------------------------------------------------------------------------
     TYPO-SKALA — fluid via clamp(), Bezugsbereich 360 -> 1280 px.
     Jeder clamp() trägt einen rem-Anteil im mittleren Term, damit Zoom
     und eingestellte Schriftgrösse wirken (web-layout B1). Nie reines vw.
     ------------------------------------------------------------------------ */
  --text-mini:  clamp(0.84rem,   0.81rem   + 0.14vw, 0.92rem);   /* 13,4 -> 14,7 px  Kleinversalien */
  --text-klein: clamp(0.95rem,   0.92rem   + 0.16vw, 1.03rem);   /* 15,2 -> 16,5 px  Beiwerk */
  --text-basis: clamp(1.06rem,   1.02rem   + 0.22vw, 1.19rem);   /* 17   -> 19   px  Fliesstext */
  --text-gross: clamp(1.2rem,    1.119rem  + 0.359vw, 1.406rem); /* 19,2 -> 22,5 px  Vorspann */
  --text-h3:    clamp(1.44rem,   1.316rem  + 0.553vw, 1.758rem); /* 23   -> 28,1 px */
  --text-h2:    clamp(1.728rem,  1.544rem  + 0.816vw, 2.197rem); /* 27,6 -> 35,2 px */
  --text-h1:    clamp(2.074rem,  1.81rem   + 1.17vw,  2.747rem); /* 33,2 -> 43,9 px  Unterseiten */
  --text-h1-gross: clamp(2.488rem, 2.119rem + 1.64vw, 3.433rem); /* 39,8 -> 54,9 px  Startseite */

  /* Zeilenhöhen (web-layout B4): Fliesstext 1,5–1,6 · Kleintext 1,4 ·
     Überschriften 1,1–1,2. */
  --zeile-eng:    1.14;
  --zeile-mittel: 1.2;
  --zeile-klein:  1.4;
  --zeile-weit:   1.58;

  --sperrung-eng:     -0.02em;
  --sperrung-etikett:  0.16em;

  /* Lesebreite. Die Werte sind im Tagesworkshop an gerenderten Zeilen
     abgelesen, nicht über eine mittlere Zeichenbreite hochgerechnet:
     min() aus beiden Einheiten, weil ch allein den Bezug zum Raster
     verliert und rem allein nicht mit der Schriftgrösse wächst. */
  /* 35,5rem statt der 36,5rem des Tagesworkshops. Dort sitzt der
     Fliesstext in einem Astro-Bauteil mit eigenem Innenrand, hier steht
     er direkt in der Bahn — dieselbe Zahl trägt deshalb eine Zeile mehr.
     Gemessen mit layout-pruefen.mjs ueber fuenf Breiten:
       36,5rem  ->  76 Zeichen ab 1024px        (Grenze 75)
       35,5rem  ->  76 Zeichen bei genau 1024px  (Grenze 75)
       34,5rem  ->  74 Zeichen, hoechster Wert im Dokument
     Die schmalste Stelle ist NICHT die breiteste Ansicht: Bei 1024px
     steht --text-basis erst bei 18,6px, bei 1440px schon bei 19px —
     schmalere Zeichen tragen mehr davon in dieselbe Spalte.
     Gerechnet statt geraten: 76 Zeichen auf 584px sind 7,68px je
     Zeichen, fuer 75 Zeichen darf die Spalte also hoechstens 576px
     breit sein. 35,5rem = 568px liegt mit Reserve darunter. */
  --breite-text:   min(34.5rem, 52ch);
  --breite-inhalt: min(37.5rem, 53ch);
  --breite-weit:   72rem;

  /* ------------------------------------------------------------------------
     ABSTÄNDE — eine Skala, keine willkürlichen Werte. Alles fluid.
     ------------------------------------------------------------------------ */
  --raum-1: clamp(0.25rem, 0.2378rem + 0.0543vw, 0.2812rem); /*  4 ->   4,5 px */
  --raum-2: clamp(0.5rem,  0.4755rem + 0.109vw,  0.5625rem); /*  8 ->   9   px */
  --raum-3: clamp(0.75rem, 0.7133rem + 0.163vw,  0.8438rem); /* 12 ->  13,5 px */
  --raum-4: clamp(1rem,    0.9511rem + 0.217vw,  1.125rem);  /* 16 ->  18   px */
  --raum-5: clamp(1.5rem,  1.427rem  + 0.326vw,  1.688rem);  /* 24 ->  27   px */
  --raum-6: clamp(2rem,    1.902rem  + 0.435vw,  2.25rem);   /* 32 ->  36   px */
  --raum-7: clamp(3rem,    2.853rem  + 0.652vw,  3.375rem);  /* 48 ->  54   px */
  --raum-8: clamp(4rem,    3.804rem  + 0.87vw,   4.5rem);    /* 64 ->  72   px */

  --raum-raster:    clamp(1.5rem, 0.913rem + 2.61vw, 3rem);     /* 24 ->  48 px */
  --raum-rand:      clamp(1rem,  0.6087rem + 1.74vw, 2rem);     /* 16 ->  32 px  Seitenrand */
  --raum-sektion:   clamp(4rem, 2.435rem + 6.96vw, 8rem);       /* 64 -> 128 px  Innenabstand jeder Sektion */
  --raum-sektion-leise: clamp(3rem, 1.826rem + 5.22vw, 6rem);   /* 48 ->  96 px  erste/leise Sektion */

  /* ------------------------------------------------------------------------
     FORM
     ------------------------------------------------------------------------ */
  --rundung-klein: 4px;
  --rundung:       6px;
  --rundung-gross: 10px;
  --schatten-karte: 0 2px 0 rgba(16, 40, 42, 0.14),
                    0 16px 30px -14px rgba(16, 40, 42, 0.38);
  --schatten-leise: 0 1px 2px rgba(16, 40, 42, 0.06);
}

/* ===========================================================================
   GRUNDLAGEN
   =========================================================================== */

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

html {
  /* Kein glattes Scrollen gegen den Willen der Nutzerin (web-layout B3). */
  scroll-behavior: smooth;
}
@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;
  }
}

body {
  margin: 0;
  background: var(--farbe-grund);
  color: var(--farbe-tinte);
  font-family: var(--schrift-basis);
  font-size: var(--text-basis);
  font-weight: var(--gewicht-normal);
  line-height: var(--zeile-weit);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

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

/* Fokus: nie abschalten, immer sichtbar (web-layout B3). */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: var(--rundung-klein);
}

/* ─── Überschriften ────────────────────────────────────────────────────
   Hierarchie über Grösse UND Gewicht UND Abstand. Abstand oberhalb
   deutlich grösser als unterhalb (web-layout B4). */
h1, h2, h3 {
  margin: 0;
  font-weight: var(--gewicht-fett);
  text-wrap: balance;
  hyphens: manual;
  color: var(--farbe-tinte);
}
h1 { font-size: var(--text-h1); line-height: var(--zeile-eng); letter-spacing: var(--sperrung-eng); }
h2 { font-size: var(--text-h2); line-height: var(--zeile-mittel); letter-spacing: var(--sperrung-eng); }
h3 { font-size: var(--text-h3); line-height: var(--zeile-mittel); }

p {
  margin: 0 0 var(--raum-4);
  max-width: var(--breite-text);
  text-wrap: pretty;
  hyphens: auto;
}
p:last-child { margin-bottom: 0; }

a { color: var(--farbe-petrol); text-underline-offset: 0.18em; }
a:hover { color: var(--farbe-petrol-tief); }

/* ===========================================================================
   SPRUNGLINK
   =========================================================================== */

.sprung {
  position: absolute;
  inset-block-start: var(--raum-4);
  inset-inline-start: var(--raum-4);
  z-index: 10;
  padding: var(--raum-3) var(--raum-4);
  background: var(--farbe-petrol);
  color: var(--farbe-auf-dunkel);
  border-radius: var(--rundung);
  text-decoration: none;
  /* clip-path statt Versatz nach oben: nimmt den Link aus dem Bild, ohne
     die Scrollfläche zu vergrössern — sonst ist die Seite bei 320 px
     überbreit. Für Screenreader bleibt er lesbar. */
  clip-path: inset(50%);
}
.sprung:focus { clip-path: none; }
/* Auf Petrol trägt der dunkle Fokusring nur 1,26:1. Hier Weiss: 7,48:1. */
.sprung:focus-visible { outline-color: var(--farbe-fokus-dunkel); }

/* ===========================================================================
   KOPFZEILE — Petrol, trägt die Wortmarke
   =========================================================================== */

.kopf {
  background: var(--farbe-petrol);
  color: var(--farbe-auf-dunkel);
}
.kopf-innen {
  max-width: var(--breite-weit);
  margin-inline: auto;
  padding: var(--raum-4) var(--raum-rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  flex-wrap: wrap;
}
.kopf a { color: var(--farbe-auf-dunkel); }
.kopf :focus-visible { outline-color: var(--farbe-fokus-dunkel); }

/* Die Wortmarke. Zweiteilig wie im Tagesworkshop: der beschreibende
   Teil leichter, der tragende Teil fett. Kein Bild, keine Schriftdatei
   mehr als die eine — die Marke ist Satz, nicht Grafik. */
.marke {
  display: inline-flex;
  flex-direction: column;
  gap: var(--raum-1);
  text-decoration: none;
  min-width: 0;
}
.marke-wort {
  font-size: var(--text-h3);
  line-height: var(--zeile-mittel);
  letter-spacing: var(--sperrung-eng);
}
.marke-wort .leicht { font-weight: var(--gewicht-etikett); }
.marke-wort .schwer { font-weight: var(--gewicht-fett); }
.marke-zusatz {
  font-size: var(--text-mini);
  line-height: var(--zeile-klein);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  /* Weiss auf Petrol: 7,48:1. Kein gedämpftes Weiss, das fiele unter AA. */
  color: var(--farbe-auf-dunkel);
}

.kopf-nav {
  display: flex;
  gap: var(--raum-5);
  font-size: var(--text-klein);
  font-weight: var(--gewicht-halbfett);
}
.kopf-nav a {
  /* Zielgrösse >= 44 px (web-layout B3), erreicht über den Innenabstand. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.kopf-nav a:hover { border-bottom-color: var(--farbe-auf-dunkel); }

/* ===========================================================================
   SEKTIONEN
   Die Flächenordnung (CLAUDE.md): zwei Arbeitsflächen, gewechselt wird
   beim Kapitel, nicht bei jeder Sektion. Weiss nur an Petrol.
   Jede Sektion trägt ihren Abstand INNEN, nie aussen — sonst stösst der
   Text auf schmalen Schirmen an die Sektionskante.
   =========================================================================== */

.sektion { padding-block: var(--raum-sektion); }
.sektion-leise { padding-block: var(--raum-sektion-leise); }

.sektion-weiss { background: var(--farbe-flaeche); }   /* nur an Petrol */
.sektion-grund { background: var(--farbe-grund); }
.sektion-ton   { background: var(--farbe-flaeche-2); } /* das Kartenkapitel */
.sektion-petrol {
  background: var(--farbe-petrol);
  color: var(--farbe-auf-dunkel);
}
.sektion-petrol h2 { color: var(--farbe-auf-dunkel); }
.sektion-petrol a { color: var(--farbe-auf-dunkel); }
.sektion-petrol :focus-visible { outline-color: var(--farbe-fokus-dunkel); }

.bahn {
  max-width: var(--breite-weit);
  margin-inline: auto;
  padding-inline: var(--raum-rand);
}

/* Dachzeile über einer Überschrift — Kleinversalien, gesperrt. */
.dachzeile {
  display: block;
  margin-bottom: var(--raum-3);
  font-size: var(--text-mini);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-mittel);
}
.sektion-petrol .dachzeile { color: var(--farbe-auf-dunkel); }

/* Abstand Sektionskopf -> Inhalt. Nähe-Regel (B5): der Abstand zwischen
   Gruppen ist mindestens doppelt so gross wie der innerhalb einer. */
.sektionskopf { margin-bottom: var(--raum-7); }
.sektionskopf p {
  margin-top: var(--raum-4);
  margin-bottom: 0;
  font-size: var(--text-gross);
  line-height: var(--zeile-weit);
  color: var(--farbe-tinte-mittel);
}

/* ===========================================================================
   AUFTAKT — die erste Sektion, grenzt an die Petrol-Kopfzeile
   =========================================================================== */

.auftakt h1 {
  /* Die Startseite trägt die grosse Stufe, die Unterseiten --text-h1.
     20ch deckelt die Zeile, damit die Überschrift nicht quer über die
     ganze Bahn läuft — sonst trägt sie bei 1280px über 60 Zeichen. */
  font-size: var(--text-h1-gross);
  max-width: 20ch;
}
.vorspann {
  margin-top: var(--raum-5);
  font-size: var(--text-gross);
  line-height: var(--zeile-weit);
  color: var(--farbe-tinte-mittel);
  max-width: var(--breite-inhalt);
}

/* ─── Der Hinweis: „Diese Seite wird überarbeitet“ ──────────────────────
   Der eine Ort, an dem der warme Akzent als Fläche auftritt — als
   schmaler Strich an der Kante, nicht als Textgrund. Auf dem Grund
   dahinter (#DCE7E7) hält die Tinte 12,24:1.
   Farbe ist NICHT der einzige Informationsträger (B3): Die Aussage
   steht als Überschrift im Kasten. */
.hinweis {
  margin-top: var(--raum-7);
  max-width: var(--breite-inhalt);
  background: var(--farbe-petrol-hell);
  border-inline-start: 6px solid var(--farbe-akzent);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  /* Text nie näher als eine Zeilenhöhe an einer Kante (B5). */
  padding: var(--raum-6);
}
.hinweis h2 {
  font-size: var(--text-h3);
  margin-bottom: var(--raum-4);
}
.hinweis p { color: var(--farbe-tinte); }
.hinweis p:last-child { margin-bottom: 0; }

/* ===========================================================================
   KARTEN — das Kapitel mit Karten bekommt den Ton, die Karten sind weiss
   =========================================================================== */

.karten {
  display: grid;
  /* Raster ohne Media-Query (web-layout B1): die Spalten fallen von
     selbst weg, sobald 18rem nicht mehr nebeneinander passen. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--raum-raster);
  align-items: start;
}
.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-linie-ton);  /* auf dem Ton die kräftigere Linie */
  border-radius: var(--rundung-gross);
  padding: var(--raum-6);
  box-shadow: var(--schatten-leise);
  /* Was nebeneinander steht, sitzt auf einer Linie: gleiche Höhe, damit
     ungleich lange Texte das Raster nicht verschieben. */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.karte h3 { margin-bottom: var(--raum-4); }
.karte p { max-width: none; margin-bottom: 0; }
.karte .nummer {
  display: block;
  margin-bottom: var(--raum-3);
  font-size: var(--text-mini);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--farbe-petrol);
}

/* Einsatzfelder — eine schlichte Aufzählung, kein Kartenraster.
   Trennung zuerst über Abstand, dann Linie (B5). Die Aufzählung steht im
   selben Kapitel wie die Karten, deshalb der grosse Abstand davor: er
   trennt zwei Gruppen, nicht zwei Zeilen (Nähe-Regel). */
.felder-titel {
  margin-block: var(--raum-8) 0;
  font-size: var(--text-mini);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-mittel);
}
/* Der Nachsatz ist ein ganzer Satz, kein Etikett — und damit Fliesstext.
   Er stand kurz auf --text-klein und wurde von layout-pruefen.mjs mit
   15,3px bei 390px Breite gemeldet. Max' Befund vom 05.09.2026 („Der
   Fliesstext ist teilweise zu klein") gilt auch fuer kurze Absaetze.
   Die Listenpunkte darueber bleiben --text-klein: das sind Etiketten aus
   zwei bis sechs Woertern, kein Lesetext. */
.felder-nachsatz {
  margin-top: var(--raum-5);
  font-size: var(--text-basis);
  line-height: var(--zeile-weit);
  color: var(--farbe-tinte-mittel);
}
.felder {
  margin: var(--raum-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0 var(--raum-raster);
}
/* --text-basis, nicht --text-klein. Die Punkte sind kurz, aber sie sind
   Inhalt und werden gelesen — layout-pruefen.mjs meldete sie bei 390px
   mit 15,3px. Kleintext ist fuer Bildunterschriften und Etiketten da,
   nicht fuer zwoelf Zeilen, die etwas aussagen. */
.felder li {
  padding-block: var(--raum-3);
  border-top: 1px solid var(--farbe-linie-ton);
  font-size: var(--text-basis);
  line-height: var(--zeile-weit);
  color: var(--farbe-tinte-mittel);
}

/* ===========================================================================
   KONTAKT — die eine vollflächige Farbfläche der Seite
   =========================================================================== */

/* DREI Blöcke, nicht vier. Mit vieren passten bei 1280px nur drei
   nebeneinander (4 × 272px + 3 × 48px Abstand = 1232px in eine Bahn von
   1152px), der vierte fiel als einzelne Waise in eine zweite Zeile.
   Der Verweis auf tagesworkshop.de ist ohnehin kein Kontaktweg, sondern
   ein Nachsatz — er steht jetzt als solcher darunter. */
.kontaktraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--raum-raster);
  margin-top: var(--raum-7);
}
.kontakt-nachsatz {
  margin: var(--raum-7) 0 0;
  padding-top: var(--raum-5);
  /* Die Linie auf Petrol: Weiss mit 25 % Deckung. Als reine Trennlinie
     ohne Bedeutung von der 3:1-Anforderung ausgenommen (WCAG 1.4.11
     gilt für Elemente, die zum Verständnis nötig sind) — die Trennung
     trägt zuerst der Abstand, die Linie ist Zugabe. */
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  max-width: none;
  color: var(--farbe-auf-dunkel);
}
.kontaktblock h3 {
  font-size: var(--text-klein);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  color: var(--farbe-auf-dunkel);
  margin-bottom: var(--raum-3);
}
.kontaktblock p, .kontaktblock address {
  max-width: none;
  font-style: normal;
  margin: 0;
  color: var(--farbe-auf-dunkel);
}
.kontaktblock a {
  /* Zielgrösse: Links im Kontaktblock sind Bedienelemente. */
  display: inline-block;
  min-height: 24px;
  padding-block: var(--raum-1);
}

/* ===========================================================================
   FUSSZEILE — grenzt an Petrol, darf deshalb weiss stehen
   =========================================================================== */

.fuss {
  background: var(--farbe-flaeche);
  padding-block: var(--raum-7);
  font-size: var(--text-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-tinte-leise);
}
.fuss-innen {
  max-width: var(--breite-weit);
  margin-inline: auto;
  padding-inline: var(--raum-rand);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-4) var(--raum-6);
  align-items: center;
  justify-content: space-between;
}
.fuss-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-5);
}
.fuss-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--gewicht-halbfett);
}
.fuss p { margin: 0; max-width: none; }

/* ===========================================================================
   RECHTSTEXTE — Impressum und Datenschutz
   =========================================================================== */

.rechtstext { max-width: var(--breite-inhalt); }
.rechtstext h2 {
  font-size: var(--text-h3);
  /* Abstand oberhalb deutlich grösser als unterhalb (B4). */
  margin-block: var(--raum-8) var(--raum-4);
}
/* Die erste Überschrift trägt KEINEN eigenen Vorlauf. Der Innenabstand
   der Sektion (--raum-sektion, bis 128px) steht schon darüber; zusammen
   mit --raum-7 klaffte dort gemessen ein Loch von rund 280px, das wie
   ein Fehler aussah und nicht wie Absicht. */
.rechtstext h2:first-of-type { margin-block-start: 0; }
.rechtstext h3 {
  font-size: var(--text-gross);
  margin-block: var(--raum-6) var(--raum-3);
}
.rechtstext ul { padding-inline-start: var(--raum-5); margin-block: 0 var(--raum-4); }
.rechtstext li { margin-bottom: var(--raum-2); }
.rechtstext address { font-style: normal; margin-bottom: var(--raum-4); }
.rechtstext .stand {
  margin-top: var(--raum-8);
  padding-top: var(--raum-4);
  border-top: 1px solid var(--farbe-linie);
  font-size: var(--text-klein);
  color: var(--farbe-tinte-leise);
}

/* Inhaltsverzeichnis der Rechtstexte */
.inhalt {
  margin-block: var(--raum-6) 0;
  padding: var(--raum-5) var(--raum-6);
  background: var(--farbe-flaeche-2);
  border-radius: var(--rundung);
  max-width: var(--breite-inhalt);
}
.inhalt h2 {
  font-size: var(--text-klein);
  font-weight: var(--gewicht-etikett);
  letter-spacing: var(--sperrung-etikett);
  text-transform: uppercase;
  margin-block: 0 var(--raum-3);
  color: var(--farbe-tinte-mittel);
}
.inhalt ul { list-style: none; margin: 0; padding: 0; }
.inhalt li { margin-bottom: var(--raum-1); }
.inhalt a { font-size: var(--text-klein); }