/* ===========================================================================
   diversity-experte.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 „diversity-“ */
  --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);
}

/* ─── ALLES auf Petrol wird hell, nicht nur die Überschrift ─────────────
   Hier stand zuerst nur die Regel für h2 und .dachzeile — übernommen von
   ressourcenexperte.de, wo die Petrol-Sektion keinen Vorspann trug. Auf
   dieser Seite hat der Aufruf einen, und der erbte --farbe-tinte-mittel
   aus `.sektionskopf p` eine Zeile weiter oben. Gemessen:

     #2C4144 auf #135E63   1,44:1   durchgefallen
     #FFFFFF auf #135E63   7,48:1   AAA

   1,44:1 heisst dunkelgrau auf dunkelgrün, praktisch unlesbar. Gefunden
   hat es nicht das Messwerkzeug, sondern der Blick auf den Screenshot —
   layout-pruefen.mjs prüft Abstände und Zeilen, keine Farben.

   WARUM DIE REGEL HIER UNTEN STEHT und nicht oben bei den anderen
   `.sektion-petrol`-Regeln: `.sektionskopf p` und `.sektion-petrol p`
   haben dieselbe Spezifität (0-1-1). Bei Gleichstand gewinnt, was
   später in der Datei steht. Oben notiert war die Regel wirkungslos —
   der erste Korrekturversuch änderte deshalb gar nichts. Unten gewinnt
   sie, ohne dass jemand die Spezifität hochschrauben muss.

   Breit gefasst, damit ein später ergänzter Absatz, eine Liste oder eine
   Anschrift die helle Schrift von selbst bekommt. */
.sektion-petrol p,
.sektion-petrol li,
.sektion-petrol address { color: var(--farbe-auf-dunkel); }


/* ===========================================================================
   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);
  /* Gedeckelt wie jeder andere Textblock. Ohne Deckel lief dieser Satz
     über die ganze Bahn und trug bei 1024px gemessen 129 Zeichen —
     erlaubt sind 75 (web-layout B4). Die Zeile stand nur deshalb so
     lange unbemerkt, weil sie bei ressourcenexperte.de kurz genug war,
     um die Grenze nicht zu reissen. */
  max-width: var(--breite-text);
  /* 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);
  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); }

/* ===========================================================================
   KNOPF — der Handlungsaufruf
   Regel aus CLAUDE.md: EIN haupt-Knopf je Bildschirmabschnitt. Zwei
   gleichwertige heben sich gegenseitig auf. Auf dieser Seite steht er
   genau einmal, im Aufruf.
   =========================================================================== */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Zielgrösse deutlich über den 24px, die WCAG 2.2 verlangt — 44px sind
     die Grösse, die auf dem Telefon mit dem Daumen sicher zu treffen ist
     (web-layout B3). */
  min-height: 52px;
  padding: var(--raum-3) var(--raum-6);
  border-radius: var(--rundung);
  font-size: var(--text-basis);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-mittel);
  text-decoration: none;
  text-align: center;
}

/* Auf Petrol: weisse Fläche, Petrolschrift. Gemessen 7,48:1 — AAA.
   Der umgekehrte Weg (Petrolknopf auf Petrolgrund mit weisser Schrift)
   wäre unsichtbar gewesen: Fläche gegen Fläche 0,000. */
.sektion-petrol .knopf {
  background: var(--farbe-flaeche);
  color: var(--farbe-petrol);
}
.sektion-petrol .knopf:hover {
  background: var(--farbe-petrol-hell);
  color: var(--farbe-petrol-tief);
}

/* ===========================================================================
   FORMATE — Zeilen, keine Karten
   Fünf Formate in einem auto-fit-Raster hätten bei 1280px drei Spalten
   ergeben und damit 3 + 2: eine angebrochene zweite Zeile. Als Zeilen
   gelesen stehen Name, Dauer und Zweck ohnehin besser nebeneinander —
   das ist eine Tabelle, die keine sein muss.
   =========================================================================== */

.formate {
  margin: 0;
  padding: 0;
  list-style: none;
}
.formate > li {
  display: grid;
  /* Erst ab 44em zwei Spalten. Darunter stapelt sich alles — auf dem
     Telefon ist eine 12rem-Spalte neben einem Absatz keine Tabelle
     mehr, sondern ein Quetschsatz. */
  gap: var(--raum-2);
  padding-block: var(--raum-5);
  border-top: 1px solid var(--farbe-linie-ton);
}
.formate > li:last-child { border-bottom: 1px solid var(--farbe-linie-ton); }

@media (min-width: 44em) {
  .formate > li {
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    gap: var(--raum-2) var(--raum-raster);
    align-items: baseline;
  }
}

.formate .name {
  font-size: var(--text-gross);
  font-weight: var(--gewicht-halbfett);
  line-height: var(--zeile-mittel);
  color: var(--farbe-tinte);
}
.formate .dauer {
  display: block;
  margin-top: var(--raum-1);
  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-petrol);
}
.formate p { margin: 0; max-width: var(--breite-text); }

/* ===========================================================================
   ANFRAGE — was in die erste E-Mail gehört
   Steht sichtbar auf der Seite UND im vorbereiteten Mailtext. Nicht nur
   im mailto: Manche Mailprogramme werfen den vorbereiteten Text weg,
   und wer über das Webmail-Fenster schreibt, sieht ihn nie
   (web-layout B7, Progressive Enhancement).
   =========================================================================== */

.anfrage {
  margin: var(--raum-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  /* 18rem, nicht 14rem: Bei 14rem passten in die Bahn vier Spalten, und
     sechs Punkte ergaben 4 + 2 — eine zweite Zeile mit zwei Lücken
     daneben. Mit 18rem sind es drei Spalten und damit 3 + 3, auf dem
     Tablet 2 + 2 + 2, auf dem Telefon eine Spalte. In jeder Stufe eine
     volle letzte Zeile. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--raum-3) var(--raum-raster);
}
.anfrage li {
  padding-inline-start: var(--raum-4);
  border-inline-start: 2px solid rgba(255, 255, 255, 0.35);
  font-size: var(--text-klein);
  line-height: var(--zeile-klein);
  color: var(--farbe-auf-dunkel);
}

/* ===========================================================================
   BARRIEREFREIHEIT — der Kasten am Seitenende
   Auf einer Seite über Vielfalt ist die eigene Zugänglichkeit keine
   Fussnote. Gleiche Form wie der Hinweis oben, damit beide als dieselbe
   Art Aussage gelesen werden (Wiederholung, web-layout B6).
   =========================================================================== */

.barrieren {
  margin-top: var(--raum-8);
  max-width: var(--breite-inhalt);
  background: var(--farbe-petrol-hell);
  border-inline-start: 6px solid var(--farbe-petrol);
  border-radius: 0 var(--rundung) var(--rundung) 0;
  padding: var(--raum-6);
}
.barrieren h2 {
  font-size: var(--text-h3);
  margin-bottom: var(--raum-4);
}
.barrieren p:last-child { margin-bottom: 0; }