/* ==================================================================
   Hausschrift, vom eigenen Server.

   Supria Sans Condensed von HvD Fonts, Weblizenz mit Selbst-
   Hosting. Vorher kam sie von Adobe Fonts - damit baute jede Seite
   beim Aufruf eine Verbindung zu einem fremden Server auf.

   font-display: swap heisst: der Text steht sofort da, in der
   Ersatzschrift, und wird ausgetauscht, sobald die richtige
   geladen ist. Besser ein Moment mit anderer Schrift als ein
   Moment ohne Text.
   ================================================================== */
@font-face {
  font-family: "supria-sans-condensed";
  src: url("/fonts/Supria-Sans-Web-Cond-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "supria-sans-condensed";
  src: url("/fonts/Supria-Sans-Web-Cond-Light-Italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "supria-sans-condensed";
  src: url("/fonts/Supria-Sans-Web-Cond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Dr. Kluge Seminare — Produktions-Stylesheet
   Mobil zuerst. Breakpoints: 640px / 1024px / 1440px
   (Basisgestaltung gilt ab 360px.)
   Flache Spezifität: nur Klassen- und Elementselektoren,
   keine IDs, kein !important. Regeln überschreiben sich in
   Lesereihenfolge.
   ============================================================ */

/* ---------- Schrift ----------
   Seit 26.08.2026 vom eigenen Server, siehe die @font-face-Regeln
   ganz oben. Familie "supria-sans-condensed", Schnitte 300, 300
   kursiv und 700. */

:root {
  /* Marke */
  --rot: #e03c31;
  --rot-hover: #c62b21;
  --rot-dunkel: #a0121b;
  --verlauf-marke: linear-gradient(135deg, #a0121b 0%, #e03c31 78%);

  /* Neutrale */
  --tinte-900: #14181a;
  --tinte-700: #31383c;
  --tinte-600: #414a4f;
  --tinte-500: #667077;  /* hellster Text auf Weiß mit AA-Kontrast */
  --tinte-300: #b6bdc1;
  --tinte-200: #d7dbde;
  --tinte-100: #e9ebed;
  --tinte-050: #f4f5f6;
  --weiss: #ffffff;

  /* Kapitelfarben (nur Flächen, nie Textfarben) */
  --kap-pfirsich: #fbe1d3;
  --kap-creme: #f3e7d3;
  --kap-blau: #cfe3ec;
  --kap-lavendel: #eae2f0;
  --kap-salbei: #dcead3;
  /* Kachelverläufe, Abstufung 1→3 */
  --verlauf-br1: linear-gradient(150deg, #fdf5ee 0%, #fbeadf 55%, #f7dcc9 100%);
  --verlauf-br2: linear-gradient(150deg, #fdf0e6 0%, #fae3d2 55%, #f6d8bf 100%);
  --verlauf-br3: linear-gradient(150deg, #fceedd 0%, #fae3cc 55%, #f7d9ba 100%);
  --verlauf-ar1: linear-gradient(150deg, #f8fbfd 0%, #f1f7fa 55%, #e9f2f7 100%);
  --verlauf-ar2: linear-gradient(150deg, #f4f9fb 0%, #ecf4f8 55%, #e2eef4 100%);
  --verlauf-ar3: linear-gradient(150deg, #f0f6fa 0%, #e7f1f6 55%, #dceaf2 100%);
  --verlauf-lav: linear-gradient(150deg, #f4eff8 0%, #eae2f0 55%, #ded1e8 100%);
  --verlauf-lav2: linear-gradient(150deg, #f0e9f5 0%, #e6dbee 55%, #dacbe6 100%);
  --verlauf-lav3: linear-gradient(150deg, #eee5f3 0%, #e5d9ed 55%, #dacae5 100%);
  --verlauf-salbei: linear-gradient(150deg, #f9fcf6 0%, #f2f8ea 55%, #eaf2de 100%);
  --verlauf-salbei2: linear-gradient(150deg, #f5faf0 0%, #ecf4e2 55%, #e2edd4 100%);
  --verlauf-salbei3: linear-gradient(150deg, #f1f7ea 0%, #e7f0da 55%, #dce8ca 100%);

  /* Status */
  --gruen: #2e7d43;
  --gruen-flaeche: #e2efe0;
  --fehler: #a0121b;
  --fehler-flaeche: #fbe6e4;

  /* Typografie */
  --schrift: "supria-sans-condensed", "Oswald", "Arial Narrow", sans-serif;
  --text-basis: 17px;          /* Fließtext-Minimum */
  --zeilenhoehe: 1.55;

  /* Abstände (4-px-Raster) */
  --a-1: 4px;  --a-2: 8px;  --a-3: 12px; --a-4: 16px;
  --a-5: 20px; --a-6: 24px; --a-8: 32px; --a-10: 40px;
  --a-12: 48px; --a-16: 64px; --a-21: 84px;

  /* Rahmen, Schatten, Fokus */
  --linie: 1px solid var(--tinte-200);
  --schatten: 0 14px 30px rgba(20, 24, 26, 0.14);
  --fokus: 3px solid var(--rot);

  /* Layout */
  --inhalt-max: 1200px;   /* max. Inhaltsbreite */
  --mass-schmal: 760px;   /* Lesemaß für Artikel */
  --rand: 20px;           /* Seitenrand mobil */
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: var(--text-basis);
  font-weight: 300;
  line-height: var(--zeilenhoehe);
  color: var(--tinte-900);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--rot); text-decoration: none; }
a:hover { color: var(--rot-dunkel); }
:focus-visible { outline: var(--fokus); outline-offset: 2px; }

.sprunglink {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tinte-900); color: var(--weiss);
  padding: var(--a-3) var(--a-5); font-weight: 700;
}
.sprunglink:focus-visible { left: 0; color: var(--weiss); }

/* Inhaltsspalte */
.spalte { max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.spalte--schmal { max-width: calc(var(--mass-schmal) + 2 * var(--rand)); }
.abschnitt { padding-top: var(--a-12); padding-bottom: var(--a-12); }

/* Überschriften-Skala */
.kicker { display: block; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rot-dunkel); margin-bottom: var(--a-3); }
.titel-1 { font-size: clamp(40px, 9vw, 88px); line-height: 0.9; font-weight: 700; letter-spacing: -0.03em; }
.titel-2 { font-size: clamp(28px, 5vw, 52px); line-height: 1; font-weight: 700; letter-spacing: -0.025em; }
.titel-3 { font-size: clamp(21px, 3vw, 26px); line-height: 1.08; font-weight: 700; }
.vorspann { font-size: clamp(18px, 2.4vw, 22px); line-height: 1.35; color: var(--tinte-600); }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; gap: var(--a-3);
  background: var(--rot); color: var(--weiss);
  font-family: var(--schrift); font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid transparent; cursor: pointer;
}
.knopf:hover { background: var(--rot-hover); color: var(--weiss); }
.knopf:active { transform: translateY(1px); }
.knopf--hell { background: var(--weiss); color: var(--rot-dunkel); }
.knopf--hell:hover { background: var(--tinte-900); color: var(--weiss); }
.knopf--dunkel { background: var(--tinte-900); }
.knopf--dunkel:hover { background: var(--rot); }
.knopf--sekundaer { background: transparent; color: var(--tinte-900); border: 1px solid var(--tinte-300); }
.knopf--sekundaer:hover { background: var(--tinte-050); color: var(--tinte-900); }
.knopf--klein { padding: 10px 16px; font-size: 14px; }
.pfeil { flex: none; }

.textlink {
  display: inline-flex; align-items: center; gap: var(--a-2);
  font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--rot-dunkel);
}
.textlink:hover { color: var(--tinte-900); }

/* ---------- Kopfbereich ---------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  /* Bezugsrahmen für das absolute Mobilmenü-Panel */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: var(--linie);
  display: flex; align-items: center; gap: var(--a-4);
  height: 64px;
  padding: 0 max(var(--rand), calc((100% - var(--inhalt-max)) / 2));
}
.kopf-logo img { height: 36px; width: auto; }
.kopf-cta { display: inline-flex; margin-left: auto; order: 2; padding: 9px 12px; font-size: 13px; }
.kopf-cta .pfeil { display: none; }
.kopf-tel { display: inline-flex; align-items: center; justify-content: center; order: 2; padding: 10px; border: var(--linie); color: var(--tinte-900); }
.kopf-tel:hover { color: var(--rot); border-color: var(--rot); }

/* Hauptmenü (Desktop) */
.hauptmenue { display: none; }
.menuepunkt { position: relative; }
.menuepunkt > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 300; letter-spacing: 0.01em; padding: var(--a-2) 0;
}
.menuepunkt > summary::-webkit-details-marker { display: none; }
.menuepunkt > summary::after { content: "›"; transform: rotate(90deg); font-weight: 300; color: var(--tinte-500); }
.menuepunkt[open] > summary { color: var(--rot); }
.hauptmenue-link { font-size: 18px; font-weight: 300; letter-spacing: 0.01em; color: var(--tinte-900); padding: var(--a-2) 0; }
.hauptmenue-link:hover { color: var(--rot); }

/* Mega-Menü-Fläche */
.megamenue {
  position: absolute; left: 0; top: calc(100% + 14px);
  background: var(--weiss); border: var(--linie); box-shadow: var(--schatten);
  padding: var(--a-6); min-width: 280px;
  display: grid; gap: var(--a-6);
}
.megamenue--breit { grid-template-columns: repeat(3, minmax(200px, 1fr)); min-width: 680px; left: 50%; transform: translateX(-50%); }
.megamenue-gruppe { display: flex; flex-direction: column; gap: 2px; }
.megamenue-titel { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rot-dunkel); margin-bottom: var(--a-2); }
.megamenue-gruppe a { color: var(--tinte-900); font-size: 16px; padding: 5px 0; border-bottom: 1px solid transparent; }
.megamenue-gruppe a:hover { color: var(--rot); }

/* Suche */
.suche { display: none; align-items: center; }
.suche-feld {
  font-family: var(--schrift); font-size: 16px; font-weight: 300;
  border: var(--linie); background: var(--weiss); color: var(--tinte-900);
  padding: 9px 12px; width: 170px;
}
.suche-knopf {
  border: var(--linie); border-left: none; background: var(--tinte-050);
  padding: 9px 12px; cursor: pointer; font-family: var(--schrift); font-size: 16px;
}
.suche-knopf:hover { background: var(--tinte-100); }

/* Mobilmenü */
.mobilmenue { order: 3; }
.mobilmenue > summary {
  list-style: none; cursor: pointer; display: inline-flex; flex-direction: column;
  gap: 5px; padding: var(--a-3); border: var(--linie);
}
.mobilmenue > summary::-webkit-details-marker { display: none; }
.mobilmenue-balken { width: 22px; height: 2px; background: var(--tinte-900); }
.mobilmenue-panel {
  /* nicht fixed: backdrop-filter am .kopf würde den Header zum Containing Block machen */
  position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - 64px); overflow-y: auto;
  background: var(--weiss); border-top: var(--linie);
  padding: var(--a-5) var(--rand) var(--a-16);
  display: flex; flex-direction: column; gap: var(--a-2);
}
.mobilmenue-panel .suche { display: flex; margin-bottom: var(--a-4); }
.mobilmenue-panel .suche-feld { flex: 1; width: auto; }
.mobilpunkt { border-bottom: var(--linie); }
.mobilpunkt > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  font-size: 19px; font-weight: 700; padding: var(--a-3) 0;
}
.mobilpunkt > summary::-webkit-details-marker { display: none; }
.mobilpunkt > summary::after { content: "›"; transform: rotate(90deg); font-weight: 300; }
.mobilpunkt[open] > summary { color: var(--rot); }
.mobilpunkt-liste { display: flex; flex-direction: column; padding-bottom: var(--a-3); }
.mobilpunkt-liste a { color: var(--tinte-700); font-size: 17px; padding: 7px 0; }
.mobilpunkt-liste .megamenue-titel { margin-top: var(--a-3); }
.mobillink { display: block; font-size: 19px; font-weight: 700; color: var(--tinte-900); padding: var(--a-3) 0; border-bottom: var(--linie); }

/* ---------- Brotkrumen ---------- */
.brotkrumen { padding-top: var(--a-4); padding-bottom: var(--a-4); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: var(--a-2); list-style: none; padding: 0; font-size: 15px; }
.brotkrumen li { display: flex; gap: var(--a-2); align-items: baseline; color: var(--tinte-500); }
.brotkrumen li + li::before { content: "›"; color: var(--tinte-300); }
.brotkrumen a { color: var(--tinte-500); }
.brotkrumen a:hover { color: var(--rot); }
.brotkrumen .aktuell { color: var(--tinte-900); font-weight: 700; }

/* ---------- Held (Startseite) ---------- */
.held { background: var(--verlauf-marke); color: var(--weiss); position: relative; overflow: hidden; }
.held-inhalt { padding: var(--a-12) var(--rand); display: flex; flex-direction: column; gap: var(--a-5); position: relative; z-index: 1; }
.held .kicker { color: #f6c9c5; }
.held-text { max-width: 30ch; font-size: clamp(19px, 2.2vw, 28px); line-height: 1.2; color: #fbe1d3; }
.held-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); padding-top: var(--a-2); }
.held-bild { position: relative; }
.held-bild img { width: 100%; height: 100%; object-fit: cover; }
.held-bild .held-pfeil { position: absolute; left: -34px; bottom: 0; width: 68px; height: auto; }

/* Zahlenleiste */
.zahlenleiste { border-bottom: var(--linie); display: grid; gap: var(--a-5); padding-top: var(--a-6); padding-bottom: var(--a-6); }
.zahl { display: flex; flex-direction: column; gap: var(--a-1); }
.zahl-wert { font-size: clamp(30px, 2.6vw, 40px); line-height: 1; font-weight: 700; color: var(--rot); }
.zahl-name { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-500); }
.zahlen-zitat { display: flex; flex-direction: column; gap: var(--a-2); }
.zahlen-zitat blockquote { font-size: 18px; line-height: 1.4; color: var(--tinte-700); }
.zahlen-zitat figcaption { display: flex; align-items: center; gap: var(--a-3); font-size: 14px; font-weight: 700; color: var(--tinte-500); }
.sterne { color: var(--rot); letter-spacing: 2px; }

/* ---------- Kacheln (Seminarraster) ---------- */
.kachelraster { display: grid; gap: var(--a-4); }
.kachel {
  position: relative; overflow: hidden; color: var(--tinte-900);
  padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-10);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); color: var(--tinte-900); }
.kachel--br1 { background: var(--verlauf-ar1); }
.kachel--br2 { background: var(--verlauf-ar2); }
.kachel--br3 { background: var(--verlauf-ar3); }
.kachel--ar1 { background: var(--verlauf-salbei); }
.kachel--ar2 { background: var(--verlauf-salbei2); }
.kachel--ar3 { background: var(--verlauf-salbei3); }
.kachel-eck { position: absolute; top: 0; right: 0; width: 52px; }
.kachel-kopf { display: flex; align-items: flex-start; justify-content: space-between; padding-right: 84px; }
.kachel-stufe { font-size: clamp(44px, 4vw, 60px); line-height: 1; font-weight: 700; color: var(--rot); }
.kachel-medaille { height: 40px; width: auto; }
.kachel-formate { display: flex; gap: var(--a-3); align-items: center; margin-top: var(--a-3); position: relative; z-index: 1; }
.kachel-formate img { height: 30px; width: auto; }
.kachel-text { display: flex; flex-direction: column; gap: var(--a-2); }
.kachel-text p { font-size: 16px; line-height: 1.45; color: var(--tinte-600); }
.kachel-titel { font-size: 26px; line-height: 1.05; font-weight: 700; }
.kachel-titel a { color: inherit; }
.kachel-titel a:hover { color: var(--rot); }
.kachel-titel a::after { content: ""; position: absolute; inset: 0; }
.kachel-mehr { position: relative; z-index: 1; align-self: flex-start; margin-top: var(--a-2); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rot); }
.kachel-mehr:hover { color: var(--rot-dunkel, #a0121b); }

/* Linkzeile "Spezielle Seminare" */
.linkzeile { display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-8); align-items: baseline; padding-top: var(--a-8); }
.linkzeile a { font-size: 18px; font-weight: 700; color: var(--tinte-900); }
.linkzeile a:hover { color: var(--rot); }
.linkzeile .kicker { margin: 0; }

/* Portal-Bereichskacheln */
.portalraster { display: grid; gap: var(--a-5); }
.portalkachel { position: relative; overflow: hidden; padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-4); color: var(--tinte-900); }
.portalkachel--wissen { background: var(--verlauf-br1); }
.portalkachel--vorlagen { background: var(--verlauf-ar1); }
.portalkachel--videos { background: var(--verlauf-lav); }
.portalkachel--salbei { background: var(--verlauf-salbei); }
.portalkachel > .kachel-eck { width: 72px; }
.portalkachel-titel { font-size: clamp(26px, 3vw, 36px); line-height: 1.02; font-weight: 700; padding-right: 84px; }
.portalkachel-titel a { color: inherit; }
.portalkachel-titel a:hover { color: var(--rot); }
.portalkachel-titel a::after { content: ""; position: absolute; inset: 0; }
.portalkachel p { max-width: 52ch; color: var(--tinte-700); }
.portalkachel-themen { display: flex; flex-wrap: wrap; gap: var(--a-2); position: relative; z-index: 1; margin-top: var(--a-2); }
.portalkachel-themen a { font-size: 14px; font-weight: 700; color: var(--tinte-900); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(26, 26, 26, 0.12); padding: 6px 12px; }
.portalkachel-themen a:hover { color: var(--rot); border-color: var(--rot); }
.portalkachel-mehr { background: none !important; border-color: transparent !important; color: var(--rot) !important; }
.portalkachel:hover { box-shadow: var(--schatten); }

/* Spezielle Seminare (Karten im Haarlinien-Raster) */
.spez-block { margin-top: var(--a-10); display: flex; flex-direction: column; gap: var(--a-5); }
.spez-block .kicker { margin: 0; }
.spez-raster { display: grid; gap: 1px; background: var(--tinte-200); border: 1px solid var(--tinte-200); }
.spez-karte { background: var(--weiss); padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; position: relative; }
.spez-karte:hover { background: var(--tinte-050); }
.spez-titel { font-size: clamp(21px, 2vw, 27px); line-height: 1.06; font-weight: 700; }
.spez-titel a { color: var(--tinte-900); }
.spez-titel a:hover { color: var(--rot); }
.spez-titel a::after { content: ""; position: absolute; inset: 0; }
.spez-karte p { color: var(--tinte-600); flex: 1; }
.spez-mehr { position: relative; z-index: 1; align-self: flex-start; font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rot); }
.spez-mehr:hover { color: var(--rot-dunkel); }

/* Icon-Fläche in den Format-Karten */
.format-symbol { align-self: flex-start; width: 88px; height: 88px; border-radius: var(--radius-md, 8px); background: var(--tinte-050); border: var(--linie); display: flex; align-items: center; justify-content: center; }
.format-symbol img { height: 44px; width: auto; }

/* Grauer Abschnittsfond */
.grauband { background: var(--tinte-050); border-top: var(--linie); border-bottom: var(--linie); }

/* Intro-Block (Claim + Text) */
.intro { display: grid; gap: var(--a-6); align-items: start; }
.intro-titel { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; text-wrap: pretty; }
.intro-text { font-size: 18px; line-height: 1.6; color: var(--tinte-700); text-wrap: pretty; }
.intro-text a { color: var(--rot-dunkel); font-weight: 700; border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.intro-text a:hover { color: var(--rot); }

/* Gruppen-Kicker im Seminarraster */
.raster-kicker { display: flex; align-items: baseline; gap: 16px; font-size: 16px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rot-dunkel); margin-bottom: var(--a-4); }
.raster-kicker::after { content: ""; flex: 1; height: 1px; background: var(--tinte-200); }

/* Kluge(r) Tipp!-Band */
.tipp-band { background: none; color: var(--tinte-900); margin: 0 0 var(--a-12); }
.tipp-inhalt { display: flex; flex-direction: column; gap: var(--a-5); padding-top: var(--a-8); padding-bottom: var(--a-8); border-top: var(--linie); border-bottom: var(--linie); position: relative; }
.tipp-titel { font-size: clamp(26px, 2.8vw, 38px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tipp-text { display: flex; flex-direction: column; gap: var(--a-3); max-width: 70ch; }
.tipp-text p { font-size: 19px; line-height: 1.55; color: var(--tinte-700); }
.tipp-schluss { font-weight: 700; color: var(--tinte-900) !important; font-size: 19px !important; }
.tipp-pfeil { display: none; }

/* Rotes Band (Schulungsanspruch) */
.band { background: var(--verlauf-marke); color: var(--weiss); position: relative; overflow: hidden; }
.band .band-inhalt { position: relative; }
.band-inhalt { padding-top: var(--a-10); padding-bottom: var(--a-10); display: flex; flex-direction: column; gap: var(--a-5); align-items: flex-start; }
.band .kicker { color: #f6c9c5; margin: 0; }
.band .titel-2 { color: var(--weiss); max-width: 24ch; }
.band p { max-width: 60ch; font-size: 18px; color: #fbe1d3; text-wrap: pretty; }

/* ---------- Karten ---------- */
.kartenraster { display: grid; gap: var(--a-4); }
.karte { background: var(--weiss); border: var(--linie); display: flex; flex-direction: column; }
.karte--flaeche { border: none; }
.karte--creme { background: var(--kap-creme); }
.karte--lavendel { background: var(--kap-lavendel); }
.karte--interaktiv { transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0.2, 1); }
.karte--interaktiv:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.karte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte-koerper { padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-3); flex: 1; }
.karte-koerper p { color: var(--tinte-600); flex: 1; text-wrap: pretty; }
.karte-meta { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); font-size: 14px; color: var(--tinte-500); }
.karte-titel { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.08; font-weight: 700; }
.karte-titel a { color: var(--tinte-900); }
.karte-titel a:hover { color: var(--rot); }

/* Etikett (Kategorie/Status) */
.etikett {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; background: var(--tinte-050); color: var(--tinte-700); border: var(--linie);
}
.etikett--marke { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.etikett--kapitel { background: var(--kap-blau); border-color: transparent; color: var(--tinte-900); }

/* ---------- Seminar-Held (flacher Kopf) ---------- */
.seminarheld { position: relative; overflow: hidden; }
.seminarheld-pfeil { display: none; position: absolute; right: 0; top: 0; height: 100%; max-height: none; width: auto; opacity: 0.16; pointer-events: none; }
.seminarheld-medaille { display: none; position: absolute; top: var(--a-6); right: var(--a-8); height: 84px; width: auto; z-index: 1; }
.seminarheld--br1 { background: var(--verlauf-ar1); }
.seminarheld--br2 { background: var(--verlauf-ar2); }
.seminarheld--br3 { background: var(--verlauf-ar3); }
.seminarheld--ar1 { background: var(--verlauf-salbei); }
.seminarheld--ar2 { background: var(--verlauf-salbei2); }
.seminarheld--ar3 { background: var(--verlauf-salbei3); }
.seminarheld--fresh { background: var(--verlauf-salbei); }
.seminarheld--wahl { background: var(--verlauf-br2); }
.seminarheld .brotkrumen { padding: var(--a-5) var(--a-5) 0; }
.seminarheld .brotkrumen a:hover, .seminarheld .brotkrumen li { color: var(--tinte-700); }
.seminarheld-inhalt { padding: var(--a-4) var(--a-5) var(--a-6); display: flex; flex-direction: column; gap: var(--a-4); align-items: flex-start; position: relative; z-index: 1; }
.seminarheld-inhalt .kicker { margin-bottom: 0; }
.seminarheld-inhalt .vorspann { max-width: 56ch; color: var(--tinte-700); }
.eckdaten { display: flex; flex-wrap: wrap; margin-top: var(--a-2); }
.eckdaten div { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--a-6); border-left: 1px solid rgba(26, 26, 26, 0.18); }
.eckdaten div:first-child { padding-left: 0; border-left: none; }
.eckdaten dt { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-500); }
.eckdaten dd { margin: 0; font-size: 24px; font-weight: 700; }
.seminarheld-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-4); align-items: center; margin-top: var(--a-2); }

/* ---------- Fließtext (Artikel & Seminare) ---------- */
.fliesstext { display: flex; flex-direction: column; gap: var(--a-5); }
.fliesstext h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; padding-top: var(--a-5); }
.fliesstext h3 { font-size: clamp(21px, 2.6vw, 26px); line-height: 1.1; font-weight: 700; padding-top: var(--a-3); }
.fliesstext p { text-wrap: pretty; }
.fliesstext ul, .fliesstext ol { padding-left: 22px; display: flex; flex-direction: column; gap: var(--a-2); }
.fliesstext li::marker { color: var(--rot); font-weight: 700; }
.fliesstext a { font-weight: 300; color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.fliesstext a:hover { color: var(--rot); }

/* Bild mit Unterschrift */
.bildfigur { display: flex; flex-direction: column; gap: var(--a-2); }
.bildfigur img { width: 100%; }
.bildfigur figcaption { font-size: 14px; color: var(--tinte-500); border-left: 3px solid var(--tinte-200); padding-left: var(--a-3); }

/* Tabelle */
.tabellenhuelle { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabelle th { text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-500); padding: var(--a-3) var(--a-4); border-bottom: 2px solid var(--tinte-900); }
.tabelle td { padding: var(--a-3) var(--a-4); border-bottom: var(--linie); vertical-align: top; }
.tabelle .frei { color: var(--gruen); font-weight: 700; }
.tabelle .knapp { color: var(--rot-dunkel); font-weight: 700; }

/* Hinweiskasten */
.hinweis { background: #fbf5ec; border: 1px solid var(--kap-creme); padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-2); }
.hinweis--blau { background: #f1f7fa; border-color: var(--kap-blau); }
.hinweis--gruen { background: #f5f9f2; border-color: var(--kap-salbei); }
.hinweis-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rot-dunkel); }
.hinweis-titel { font-size: 18px; font-weight: 700; }
.hinweis p { color: var(--tinte-700); }

/* Vorteil-Karten (rote Ziffern, schwarze Deckleiste) */
.vorteil-karte { display: flex; flex-direction: column; gap: 14px; color: var(--tinte-900); border-top: 3px solid var(--tinte-900); padding: 20px 0 0; }
.vorteil-ziffer { font-size: 48px; line-height: 1; font-weight: 700; color: var(--rot); }
.vorteil-titel { font-size: 22px; line-height: 1.05; font-weight: 700; }
.vorteil-karte p { font-size: 16px; line-height: 1.45; color: var(--tinte-700); }

/* Pfeilliste */
.pfeilliste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--a-3); }
.pfeilliste li { display: flex; align-items: baseline; gap: 14px; font-weight: 700; }
.pfeilliste svg { flex: none; color: var(--rot); transform: translateY(1px); }

/* Grundlagenschulung (§-Block) */
.gs-paragraf { background: var(--weiss); border: 1px solid var(--tinte-200); padding: var(--a-8); display: flex; gap: var(--a-8); align-items: flex-start; }
.gs-paragraf .paragraf { font-size: 110px; line-height: 0.9; font-weight: 700; color: var(--rot); flex: none; }
.gs-paragraf .gs-inhalt { display: flex; flex-direction: column; gap: var(--a-3); }
.gs-paragraf h3 { font-size: 24px; line-height: 1.1; font-weight: 700; margin: 0; }
.gs-paragraf h3 span { display: block; font-size: 17px; font-weight: 300; color: var(--tinte-600); margin-top: 4px; }
.gs-paragraf p { color: var(--tinte-700); margin: 0; }

/* Zitat */
.zitat { border-left: 4px solid var(--rot); padding: var(--a-2) 0 var(--a-2) var(--a-6); display: flex; flex-direction: column; gap: var(--a-3); }
.zitat blockquote { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; }
.zitat figcaption { font-size: 15px; color: var(--tinte-500); }

/* Beispielkasten */
.beispiel { background: #f6f2f9; border: 1px solid var(--kap-lavendel); padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-2); }
.beispiel-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinte-700); }
.beispiel-titel { font-size: 18px; font-weight: 700; }

/* YouTube-Einbettung */
.video-einbettung { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--tinte-900); display: grid; place-items: center; color: var(--weiss); font-size: 14px; font-weight: 700; }
.video-einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Trennlinie */
.trennlinie { border: 0; border-top: var(--linie); margin: var(--a-8) 0; }

/* Liste verwandter Beiträge */
.verwandt, .fliesstext .verwandt { list-style: none; padding-left: 0; display: flex; flex-direction: column; }
.verwandt li { padding: 0; }
.verwandt a { display: flex; justify-content: space-between; gap: var(--a-4); align-items: baseline; padding: 12px 0; border-bottom: var(--linie); font-weight: 700; font-size: 17px; color: var(--tinte-900); }
.verwandt li:last-child a { border-bottom: none; }
.verwandt a:hover { color: var(--rot); }
.verwandt-meta { font-size: 14px; font-weight: 300; color: var(--tinte-500); white-space: nowrap; }

/* Inhaltsverzeichnis */
.inhaltsverzeichnis { background: var(--tinte-050); padding: var(--a-6); display: flex; flex-direction: column; gap: var(--a-3); }
.inhaltsverzeichnis ol { list-style: none; padding: 0; display: flex; flex-direction: column; counter-reset: ivz; }
.inhaltsverzeichnis li { counter-increment: ivz; }
.inhaltsverzeichnis a { display: flex; gap: var(--a-3); align-items: baseline; color: var(--tinte-900); font-weight: 700; font-size: 16px; padding: 7px 0; border-bottom: var(--linie); }
.inhaltsverzeichnis li:last-child a { border-bottom: none; }
.inhaltsverzeichnis a::before { content: counter(ivz, decimal-leading-zero); font-size: 13px; color: var(--rot-dunkel); }
.inhaltsverzeichnis a:hover { color: var(--rot); }

/* FAQ-Raster */
.faq-raster { display: grid; gap: var(--a-6); }

/* Referenten-Teaser-Karte */
.referenten-karte { border-top: 4px solid var(--rot); align-self: start; }
.referenten-karte .karte-koerper { gap: var(--a-3); }

/* Autorenbox */
.autorenbox { border: var(--linie); padding: var(--a-6); display: flex; gap: var(--a-5); align-items: flex-start; }
.autorenbox-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--tinte-100); }
.autorenbox-name { font-size: 18px; font-weight: 700; }
.autorenbox-rolle { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot-dunkel); margin-bottom: var(--a-2); }
.autorenbox p { font-size: 16px; color: var(--tinte-600); }

/* Akkordeon */
.akkordeon { display: flex; flex-direction: column; }
.akkordeon-punkt { border-bottom: var(--linie); }
.akkordeon-punkt:first-child { border-top: var(--linie); }
.akkordeon-punkt > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--a-4);
  font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; padding: var(--a-4) 0;
}
.akkordeon-punkt > summary::-webkit-details-marker { display: none; }
.akkordeon-punkt > summary::after { content: "+"; font-size: 26px; font-weight: 300; color: var(--rot); flex: none; }
.akkordeon-punkt[open] > summary::after { content: "–"; }
.akkordeon-punkt[open] > summary { color: var(--rot-dunkel); }
.akkordeon-inhalt { padding: 0 0 var(--a-5); display: flex; flex-direction: column; gap: var(--a-3); color: var(--tinte-700); }
.akkordeon-inhalt ul { padding-left: 22px; display: flex; flex-direction: column; gap: var(--a-2); }

/* ---------- Funktionsbausteine ---------- */
/* Download */
.download { border: var(--linie); padding: var(--a-5); display: flex; flex-wrap: wrap; gap: var(--a-4); align-items: center; }
.download-typ { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--rot); color: var(--weiss); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; }
.download-typ--zip { background: var(--tinte-900); }
.download-info { flex: 1; min-width: 180px; }
.download-titel { display: block; font-size: 18px; font-weight: 700; }
.download-meta { display: block; font-size: 14px; color: var(--tinte-500); }

/* Musterblatt — Vorlage im Volltext */
.musterblatt { border: var(--linie); background: var(--weiss); border-top: 4px solid var(--rot); padding: var(--a-6); }
.musterblatt p { margin: 0 0 var(--a-4); }
.musterblatt p:last-child { margin-bottom: 0; }
.musterblatt-titel { font-size: 22px; font-weight: 700; margin: 0 0 var(--a-5); }
.musterblatt-feld { background: #fbf5ec; border-bottom: 1px dashed var(--tinte-500); padding: 0 3px; white-space: nowrap; }
.musterblatt-block { margin: var(--a-5) 0; }
.musterblatt-unterschrift { display: flex; flex-wrap: wrap; gap: var(--a-6); margin-top: var(--a-6); }
.musterblatt-unterschrift span { flex: 1; min-width: 180px; border-top: 1px solid var(--tinte-500); padding-top: var(--a-2); font-size: 14px; color: var(--tinte-500); }

/* Blätterleiste */
.blaetterleiste { display: flex; justify-content: center; }
.blaetterleiste ol { display: flex; gap: var(--a-2); list-style: none; padding: 0; flex-wrap: wrap; }
.blaetterleiste a, .blaetterleiste .aktiv, .blaetterleiste .punkte {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--a-3);
  font-size: 16px; font-weight: 700; color: var(--tinte-900); border: var(--linie);
}
.blaetterleiste a:hover { border-color: var(--rot); color: var(--rot); }
.blaetterleiste .aktiv { background: var(--rot); border-color: var(--rot); color: var(--weiss); }
.blaetterleiste .punkte { border: none; color: var(--tinte-500); }

/* Handlungsaufforderung "Seminar buchen" */
.buchen { background: var(--verlauf-marke); color: var(--weiss); padding: var(--a-8); display: flex; flex-direction: column; gap: var(--a-4); align-items: flex-start; }
.buchen-titel { font-size: clamp(24px, 3vw, 34px); line-height: 1.02; font-weight: 700; }
.buchen p { color: #fbe1d3; max-width: 50ch; }
.buchen-preis { font-size: 15px; color: #f6c9c5; }

/* Kontakt-Karte (Randspalte) */
.rand-kontakt { border: var(--linie); background: var(--weiss); display: flex; flex-direction: column; }
.rand-kontakt-foto { aspect-ratio: 4 / 3; overflow: hidden; background: var(--tinte-050); }
.rand-kontakt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rand-kontakt-koerper { padding: var(--a-5); display: flex; flex-direction: column; gap: 10px; }
.rand-kontakt-titel { font-size: 20px; line-height: 1.05; font-weight: 700; }
.rand-kontakt-koerper p { font-size: 15px; line-height: 1.5; color: var(--tinte-600); }
.rand-kontakt-links { display: flex; flex-direction: column; gap: 4px; }
.rand-kontakt-links a { font-weight: 700; color: var(--rot-dunkel); }
.rand-kontakt-links a:hover { color: var(--rot); }

/* Formular */
.formular { display: flex; flex-direction: column; gap: var(--a-5); }
.feld { display: flex; flex-direction: column; gap: var(--a-2); }
.feld-name { font-size: 16px; font-weight: 700; }
.pflicht { color: var(--rot); }
.feld-hinweis { font-size: 14px; color: var(--tinte-500); }
.eingabe {
  font-family: var(--schrift); font-size: 17px; font-weight: 300; color: var(--tinte-900);
  background: var(--weiss); border: 1px solid var(--tinte-300); padding: 12px 14px; width: 100%;
}
.eingabe:hover { border-color: var(--tinte-500); }
textarea.eingabe { min-height: 140px; resize: vertical; }
.feld--fehler .eingabe { border-color: var(--fehler); background: var(--fehler-flaeche); }
.feld-fehlermeldung { font-size: 15px; font-weight: 700; color: var(--fehler); }
.formular-zeile { display: grid; gap: var(--a-5); }
.zustimmung { display: flex; gap: var(--a-3); align-items: flex-start; font-size: 15px; color: var(--tinte-600); }
.zustimmung input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rot); flex: none; }

/* Platzhalter für Fremd-Widgets (unbekannte Höhe) */
.widget-platzhalter {
  border: 2px dashed var(--tinte-300); background: var(--tinte-050);
  min-height: 240px; height: auto; /* wächst mit dem eingebetteten Inhalt */
  display: grid; place-items: center; text-align: center; padding: var(--a-6);
  color: var(--tinte-500); font-size: 15px;
}
.widget-platzhalter strong { display: block; font-size: 17px; color: var(--tinte-700); }

/* Cookie-Hinweis */
.cookie-hinweis {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--tinte-900); color: var(--weiss);
  padding: var(--a-5) var(--rand);
  display: flex; flex-direction: column; gap: var(--a-4);
  box-shadow: 0 -8px 24px rgba(20, 24, 26, 0.25);
}
.cookie-hinweis p { font-size: 15px; color: var(--tinte-300); max-width: 72ch; }
.cookie-hinweis a { color: var(--weiss); text-decoration: underline; }
.cookie-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }
.knopf--geist { background: transparent; border: 1px solid var(--tinte-500); color: var(--weiss); }
.knopf--geist:hover { background: rgba(255, 255, 255, 0.12); color: var(--weiss); }

/* ---------- Fußbereich ---------- */
.fuss { background: var(--rot-dunkel); color: var(--weiss); margin-top: var(--a-16); }
.fuss-inhalt { padding-top: var(--a-12); padding-bottom: var(--a-8); display: flex; flex-direction: column; gap: var(--a-8); }
.fuss-spalten { display: grid; gap: var(--a-8); }
.fuss-logo { height: 56px; width: auto; align-self: flex-start; object-fit: contain; filter: brightness(0) invert(1); margin-bottom: var(--a-6); display: block; }
.fuss address { font-style: normal; font-size: 17px; line-height: 1.6; }
.fuss-titel { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #f6c9c5; margin-bottom: var(--a-3); }
.fuss-liste { display: flex; flex-direction: column; gap: var(--a-2); list-style: none; padding: 0; }
.fuss a { color: var(--weiss); font-weight: 300; }
.fuss a:hover { color: #fbe1d3; }
.fuss-sozial { display: flex; gap: var(--a-3); }
.fuss-sozial a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, 0.4); font-weight: 700; font-size: 14px; }
.fuss-sozial a:hover { background: rgba(255, 255, 255, 0.14); }
.fuss-siegel { display: flex; flex-wrap: wrap; gap: var(--a-4); justify-content: space-between; align-items: center; }
.siegel-platzhalter { border: 1px dashed rgba(255, 255, 255, 0.45); padding: var(--a-3) var(--a-4); font-size: 13px; color: #f6c9c5; display: grid; place-items: center; min-width: 140px; min-height: 64px; text-align: center; }
.fuss-leiste { border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: var(--a-5); display: flex; flex-direction: column; gap: var(--a-3); }
.fuss-rechtslinks { display: flex; flex-wrap: wrap; gap: var(--a-5); font-size: 15px; }
.fuss-rechtslinks a { color: rgba(255, 255, 255, 0.85); }
.fuss-copyright { font-size: 15px; color: rgba(255, 255, 255, 0.6); }

/* ---------- Fehlerseite 404 ---------- */
.fehler404 { text-align: center; padding-top: var(--a-21); padding-bottom: var(--a-21); display: flex; flex-direction: column; gap: var(--a-5); align-items: center; }
.fehler404-code { font-size: clamp(90px, 18vw, 200px); line-height: 0.9; font-weight: 700; color: var(--rot); letter-spacing: -0.04em; }

/* ---------- Bausteine-Seite ---------- */
.baustein { border-top: 2px solid var(--tinte-900); padding-top: var(--a-6); margin-top: var(--a-12); display: flex; flex-direction: column; gap: var(--a-6); }
.baustein-name { font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rot-dunkel); }
.baustein-notiz { font-size: 15px; color: var(--tinte-500); max-width: 72ch; }
.varianten { display: flex; flex-wrap: wrap; gap: var(--a-4); align-items: flex-start; }
.bild-platzhalter { background: var(--kap-blau); display: grid; place-items: center; color: var(--tinte-700); font-size: 14px; font-weight: 700; width: 100%; }

/* ============================================================
   Breakpoint ≥ 640px
   ============================================================ */
@media (min-width: 640px) {
  :root { --rand: 32px; }
  .kopf { height: 76px; }
  .kopf-logo img { height: 44px; }
  .zahlenleiste { grid-template-columns: repeat(3, 1fr); justify-content: stretch; align-items: start; }
  .zahlen-zitat { grid-column: 1 / -1; }
  .kachelraster { grid-template-columns: repeat(2, 1fr); gap: var(--a-5); }
  .spez-raster { grid-template-columns: repeat(3, 1fr); }
  /* Gleich hohe Kacheln nebeneinander. Untereinander (Telefon)
     erzeugt eine feste Mindesthoehe nur Leere unter kurzen
     Texten - deshalb erst ab hier. */
  .spez-karte { min-height: 240px; }
  .intro { grid-template-columns: 1.25fr 1fr; gap: var(--a-10); }
  .portalraster { grid-template-columns: repeat(2, 1fr); gap: var(--a-6); }
  .kartenraster { grid-template-columns: repeat(2, 1fr); gap: var(--a-5); }
  .formular-zeile { grid-template-columns: 1fr 1fr; }
  .buchen { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .cookie-hinweis { flex-direction: row; align-items: center; justify-content: space-between; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
  .fuss-leiste { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .abschnitt { padding-top: var(--a-16); padding-bottom: var(--a-16); }
}

/* ============================================================
   Breakpoint ≥ 1024px
   ============================================================ */
@media (min-width: 1024px) {
  :root { --rand: 48px; }
  .seminarheld-pfeil { display: block; }
  .seminarheld-medaille { display: block; }
  .seminarheld .brotkrumen { padding: var(--a-6) var(--a-8) 0; }
  .seminarheld-inhalt { padding: var(--a-5) var(--a-8) var(--a-8); padding-right: min(340px, 30%); box-sizing: border-box; }
  .kopf { height: 92px; gap: var(--a-8); }
  .kopf-logo img { height: 54px; }
  .mobilmenue { display: none; }
  .hauptmenue { display: flex; align-items: center; gap: var(--a-6); margin-left: auto; }
  .suche { display: flex; }
  .kopf-cta { display: inline-flex; margin-left: 0; order: 0; padding: 10px 16px; font-size: 14px; }
  .kopf-cta .pfeil { display: block; }
  .kopf-tel { display: none; }
  .held { display: grid; grid-template-columns: minmax(0, 1.05fr) 44%; min-height: 72vh; }
  .held-inhalt { padding: var(--a-16) var(--rand); justify-content: center; }
  .held-bild .held-pfeil { left: -48px; width: 96px; }
  .zahlenleiste { grid-template-columns: repeat(3, auto) 1fr; column-gap: var(--a-10); }
  .zahlen-zitat { grid-column: auto; border-left: var(--linie); padding-left: var(--a-8); margin-left: var(--a-6); }
  .kachelraster { grid-template-columns: repeat(3, 1fr); gap: var(--a-6); }
  .portalraster { grid-template-columns: repeat(3, 1fr); }
  .kartenraster { grid-template-columns: repeat(3, 1fr); gap: var(--a-6); }
  .kartenraster--zwei { grid-template-columns: repeat(2, 1fr); }
  .faq-raster { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .tipp-inhalt { flex-direction: row; align-items: center; gap: var(--a-10); }
  .tipp-text { border-left: var(--linie); padding-left: var(--a-8); }
  .tipp-pfeil { display: block; width: 72px; margin-left: auto; opacity: 0.85; }
  .kartenraster--zweier { grid-template-columns: repeat(2, 1fr); }
  .band-inhalt { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--a-10); }
  .band-inhalt .knopf { white-space: nowrap; }
  .fuss-spalten { grid-template-columns: minmax(280px, 1fr) auto auto auto; justify-content: start; column-gap: var(--a-16); }
  .abschnitt { padding-top: var(--a-21); padding-bottom: var(--a-21); }
  /* Seminarseite: zweispaltig mit Randspalte */
  .seitenlayout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--a-16); align-items: start; }
  .randspalte { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--a-6); }
}

/* ============================================================
   Breakpoint ≥ 1440px
   ============================================================ */
@media (min-width: 1440px) {
  .held { min-height: 78vh; }
  .megamenue--breit { min-width: 760px; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel, .karte--interaktiv, .knopf { transition: none; }
}

/* statische Variante für die Bausteine-Übersicht */
.cookie-hinweis--statisch { position: static; box-shadow: none; }

/* ---------- Suche als Baustein (Überlagerung) ---------- */
.suchbaustein { position: relative; max-width: 560px; width: 100%; }
.suchbaustein .suche { display: flex; }
.suchbaustein .suche-feld { flex: 1; width: auto; font-size: 17px; padding: 12px 14px; }
.suchbaustein .suche-knopf { padding: 12px 16px; }
.suchueberlagerung {
  position: absolute; left: 0; right: 0; top: calc(100% - 1px); z-index: 30;
  background: var(--weiss); border: var(--linie); box-shadow: var(--schatten);
  display: flex; flex-direction: column;
}
.such-filter { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); padding: var(--a-3) var(--a-4); border-bottom: var(--linie); background: var(--tinte-050); }
.such-filter label { display: inline-flex; align-items: center; gap: var(--a-2); font-size: 14px; font-weight: 700; color: var(--tinte-700); cursor: pointer; }
.such-filter input { width: 18px; height: 18px; margin: 0; accent-color: var(--rot); }
.such-status { padding: var(--a-3) var(--a-4); font-size: 14px; color: var(--tinte-500); border-bottom: var(--linie); }
.such-treffer { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; max-height: 380px; overflow-y: auto; }
.such-treffer li { border-bottom: var(--linie); }
.such-treffer li:last-child { border-bottom: none; }
.such-treffer a { display: flex; flex-direction: column; gap: 4px; padding: var(--a-3) var(--a-4); color: var(--tinte-900); }
.such-treffer a:hover { background: var(--tinte-050); color: var(--tinte-900); }
.such-treffer-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rot-dunkel); }
.such-treffer-titel { font-size: 17px; font-weight: 700; line-height: 1.15; }
.such-treffer-text { font-size: 15px; color: var(--tinte-600); }
.such-treffer mark { background: var(--kap-pfirsich); color: inherit; font-weight: 700; padding: 0 2px; }
.such-fusszeile { padding: var(--a-3) var(--a-4); border-top: var(--linie); }
.such-leer { padding: var(--a-6) var(--a-4); text-align: center; display: flex; flex-direction: column; gap: var(--a-2); align-items: center; }
.such-leer-titel { font-size: 17px; font-weight: 700; }
.such-leer p { font-size: 15px; color: var(--tinte-600); max-width: 40ch; }
.such-vorschlaege { display: flex; flex-wrap: wrap; gap: var(--a-2); justify-content: center; padding: var(--a-2) var(--a-4) var(--a-5); }
.such-vorschlaege a { font-size: 14px; font-weight: 700; color: var(--tinte-700); border: var(--linie); padding: 5px 12px; }
.such-vorschlaege a:hover { border-color: var(--rot); color: var(--rot); }
/* Ladezustand: Skelettzeilen */
.such-laden { padding: var(--a-4); display: flex; flex-direction: column; gap: var(--a-3); }
.skelett { height: 14px; background: linear-gradient(90deg, var(--tinte-100) 25%, var(--tinte-050) 50%, var(--tinte-100) 75%); background-size: 200% 100%; animation: skelett-schimmer 1.4s ease infinite; }
.skelett--titel { height: 18px; width: 60%; }
.skelett--kurz { width: 40%; }
@keyframes skelett-schimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skelett { animation: none; } }

/* statische Variante für die Bausteine-Übersicht */
.suchueberlagerung--statisch { position: static; }

/* ---------- Newsletter-Anmeldung (Baustein D, Erscheinungsformen D1–D5) ---------- */
.nl-block { background: var(--kap-creme); padding: 44px 36px; display: flex; flex-direction: column; gap: 18px; }
.nl-titel { font-size: clamp(24px, 3vw, 34px); line-height: 1.05; font-weight: 700; letter-spacing: -0.015em; max-width: 26ch; }
.nl-form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.nl-feld { flex: 1 1 260px; min-width: 0; font-family: var(--schrift); font-size: 17px; font-weight: 300; color: var(--tinte-900); background: var(--weiss); border: var(--linie); padding: 13px 16px; }
.nl-hinweis { font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--tinte-500); max-width: 60ch; }
.nl-hinweis a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.nl-hinweis a:hover { color: var(--rot); }
.nl-rueckmeldung { display: none; font-size: 15px; font-weight: 700; line-height: 1.4; padding: 12px 16px; max-width: 620px; }
.nl-rueckmeldung--erfolg { display: block; background: var(--kap-salbei); color: var(--tinte-900); }
.nl-rueckmeldung--fehler { display: block; background: var(--kap-pfirsich); color: var(--rot-dunkel); }
.nl-schliessen { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: none; cursor: pointer; font-family: var(--schrift); font-size: 26px; font-weight: 300; line-height: 1; color: var(--tinte-500); }
.nl-schliessen:hover { color: var(--tinte-900); }

/* D2 – Überlagerung beim Verlassen der Seite */
.nl-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 24, 26, 0.55); backdrop-filter: blur(4px); display: none; }
.nl-scrim[data-offen] { display: grid; place-items: center; padding: 24px; }
.nl-dialog { position: relative; background: var(--weiss); box-shadow: var(--schatten); padding: 44px 40px; max-width: 620px; width: 100%; display: flex; flex-direction: column; gap: 18px; }

/* D3 – Vollbild-Überlagerung */
.nl-voll { position: fixed; inset: 0; z-index: 80; background: var(--verlauf-marke); color: var(--weiss); display: none; overflow: auto; }
.nl-voll[data-offen] { display: grid; place-items: center; padding: 24px; }
.nl-voll-inhalt { position: relative; max-width: 680px; width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 44px 40px; }
.nl-voll .kicker { color: #f6c9c5; margin: 0; }
.nl-voll .nl-titel { font-size: clamp(32px, 5vw, 56px); max-width: 20ch; }
.nl-voll .nl-hinweis { color: rgba(255, 255, 255, 0.78); }
.nl-voll .nl-hinweis a { color: var(--weiss); border-bottom-color: rgba(255, 255, 255, 0.45); }
.nl-voll .nl-schliessen { color: rgba(255, 255, 255, 0.8); }
.nl-voll .nl-schliessen:hover { color: var(--weiss); }
.nl-voll .knopf { background: var(--weiss); color: var(--rot-dunkel); }
.nl-voll .knopf:hover { background: var(--tinte-900); color: var(--weiss); }

/* D4 – schmale Leiste am unteren Fensterrand */
.nl-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--weiss); border-top: var(--linie); box-shadow: 0 -10px 24px rgba(20, 24, 26, 0.10); padding: 14px var(--rand); padding-right: 64px; display: none; }
.nl-leiste[data-offen] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.nl-leiste .nl-titel { font-size: 19px; max-width: none; }
.nl-leiste .nl-form { flex: 1 1 320px; max-width: 520px; }
.nl-leiste .nl-feld { padding: 10px 14px; font-size: 16px; }
.nl-leiste .knopf { padding: 10px 16px; font-size: 14px; }
.nl-leiste .nl-hinweis, .nl-leiste .nl-rueckmeldung { flex-basis: 100%; }
.nl-leiste .nl-rueckmeldung { padding: 8px 12px; }

/* D5 – von der Seite einfahrende Karte */
.nl-karte { position: fixed; right: 24px; bottom: 24px; z-index: 70; width: min(400px, calc(100vw - 48px)); background: var(--weiss); border: var(--linie); box-shadow: var(--schatten); padding: 32px 28px; display: none; flex-direction: column; gap: 14px; transform: translateX(32px); opacity: 0; transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
.nl-karte[data-offen] { display: flex; }
.nl-karte[data-sichtbar] { transform: none; opacity: 1; }
.nl-karte .nl-titel { font-size: 24px; }


/* --------------------------------------------------
   Aus den einzelnen Seiten herausgeloest, damit der
   Browser sie einmal laedt statt auf jeder Seite neu.
   -------------------------------------------------- */
/* /seminare/arbeitsrecht-1-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /seminare/arbeitsrecht-2-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /seminare/arbeitsrecht-3-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /betriebsrat-1-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /betriebsrat-2-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /betriebsrat-3-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /betriebsrat-broschueren-pdf-fuer-shop-kunden/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.bro-raster { display: grid; gap: 1px; background: var(--tinte-200); border: 1px solid var(--tinte-200); margin-top: 40px; }
@media (min-width: 640px) { .bro-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bro-raster { grid-template-columns: repeat(4, 1fr); } }
.bro-karte { background: var(--weiss); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.bro-karte img { width: 100%; max-width: 220px; height: auto; }
.bro-karte h2 { font-size: 22px; line-height: 1.06; font-weight: 700; }
.bro-karte h3 { font-size: 15px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-raster--klein { margin-top: 0; }
@media (min-width: 640px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
.bro-raster--klein img { max-width: 140px; }
.bro-raster--klein h2 { font-size: 18px; }
.bro-raster--klein h3 { font-size: 14px; }
.bro-held { border: 1px solid var(--tinte-200); background: var(--weiss); padding: 36px 32px; display: grid; gap: 32px; align-items: center; margin-top: 40px; }
@media (min-width: 900px) { .bro-held { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bro-held img { width: 100%; max-width: 300px; height: auto; }
.bro-held-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bro-held-text h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.bro-held-text h3 { font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-bonus { margin-top: 56px; }
.nl-block { margin-top: 64px; }

/* /betriebsrat-broschueren/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.bro-raster { display: grid; gap: 1px; background: var(--tinte-200); border: 1px solid var(--tinte-200); margin-top: 40px; }
@media (min-width: 640px) { .bro-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bro-raster { grid-template-columns: repeat(4, 1fr); } }
.bro-karte { background: var(--weiss); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.bro-karte img { width: 100%; max-width: 220px; height: auto; }
.bro-karte h2 { font-size: 22px; line-height: 1.06; font-weight: 700; }
.bro-karte h3 { font-size: 15px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-raster--klein { margin-top: 0; }
@media (min-width: 640px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
.bro-raster--klein img { max-width: 140px; }
.bro-raster--klein h2 { font-size: 18px; }
.bro-raster--klein h3 { font-size: 14px; }
.bro-held { border: 1px solid var(--tinte-200); background: var(--weiss); padding: 36px 32px; display: grid; gap: 32px; align-items: center; margin-top: 40px; }
@media (min-width: 900px) { .bro-held { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bro-held img { width: 100%; max-width: 300px; height: auto; }
.bro-held-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bro-held-text h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.bro-held-text h3 { font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-bonus { margin-top: 56px; }
.nl-block { margin-top: 64px; }

/* /betriebsrat-plakate-pdf-fuer-shop-kunden/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.nl-block { margin-top: 64px; }

/* /betriebsrat-plakate-yt/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.nl-block { margin-top: 64px; }

/* /betriebsrat-plakate/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.nl-block { margin-top: 64px; }

/* /betriebsrat-poster/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.nl-block { margin-top: 64px; }

/* /betriebsratswahl-normal/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /betriebsratswahl-vereinfacht/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /seminare/betrvg-fresh-up-webinar/ */
.schritte .karte-koerper a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160,18,27,0.35); } .schritte .karte-koerper a:hover { color: var(--rot); }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /brbase/ */
.wk-tipp { background: var(--kap-creme); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.wk-tipp-titel { font-size: 24px; line-height: 1.05; font-weight: 700; }
.wk-tipp p { font-size: 15px; line-height: 1.5; color: var(--tinte-700); }
.wk-tipp .knopf { align-self: flex-start; }
.wk-tipp-klein { font-size: 13px; color: var(--tinte-500); }
.wk-tipp-klein a { color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); font-weight: 300; }
.wk-tipp-klein a:hover { color: var(--rot); }
.wk-tipp-spalte { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .wk-tipp-spalte { position: sticky; top: 96px; } }
.wk-tipp-bild { display: block; border: var(--linie); background: var(--weiss); padding: 14px; }
.wk-tipp-bild img { width: 100%; height: auto; display: block; }
.wk-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (min-width: 1000px) { .wk-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.brbase-angebot { background: var(--kap-blau); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.brbase-angebot a { color: var(--rot-dunkel); font-weight: 300; border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.brbase-angebot a:hover { color: var(--rot); }

/* /broschuere-betriebsratsbeschluss-yt/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.bro-raster { display: grid; gap: 1px; background: var(--tinte-200); border: 1px solid var(--tinte-200); margin-top: 40px; }
@media (min-width: 640px) { .bro-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bro-raster { grid-template-columns: repeat(4, 1fr); } }
.bro-karte { background: var(--weiss); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.bro-karte img { width: 100%; max-width: 220px; height: auto; }
.bro-karte h2 { font-size: 22px; line-height: 1.06; font-weight: 700; }
.bro-karte h3 { font-size: 15px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-raster--klein { margin-top: 0; }
@media (min-width: 640px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
.bro-raster--klein img { max-width: 140px; }
.bro-raster--klein h2 { font-size: 18px; }
.bro-raster--klein h3 { font-size: 14px; }
.bro-held { border: 1px solid var(--tinte-200); background: var(--weiss); padding: 36px 32px; display: grid; gap: 32px; align-items: center; margin-top: 40px; }
@media (min-width: 900px) { .bro-held { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bro-held img { width: 100%; max-width: 300px; height: auto; }
.bro-held-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bro-held-text h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.bro-held-text h3 { font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-bonus { margin-top: 56px; }
.nl-block { margin-top: 64px; }

/* /broschuere-neu-im-br-4e7c9k/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /broschueren-download-7f92cx/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /broschueren-download-shop-kunden-7f92cx/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /datenschutzerklaerung/ */
.fliesstext h2 { scroll-margin-top: 96px; }
html { scroll-behavior: smooth; }

/* /erste-aufgaben-betriebsrat-yt/ */
.mat-raster { display: grid; gap: 40px; align-items: start; margin-top: 40px; }
@media (min-width: 900px) { .mat-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mat-bild { border: var(--linie); background: var(--weiss); padding: 20px; margin: 0; }
.mat-bild img { width: 100%; height: auto; display: block; }
.mat-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mat-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.mat-titel-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mat-titel-liste li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tinte-100); font-size: 18px; font-weight: 300; line-height: 1.3; }
.mat-titel-liste li:last-child { border-bottom: none; }
.mat-titel-liste li::before { content: "→"; font-weight: 700; color: var(--rot); flex: none; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.bro-raster { display: grid; gap: 1px; background: var(--tinte-200); border: 1px solid var(--tinte-200); margin-top: 40px; }
@media (min-width: 640px) { .bro-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .bro-raster { grid-template-columns: repeat(4, 1fr); } }
.bro-karte { background: var(--weiss); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.bro-karte img { width: 100%; max-width: 220px; height: auto; }
.bro-karte h2 { font-size: 22px; line-height: 1.06; font-weight: 700; }
.bro-karte h3 { font-size: 15px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-raster--klein { margin-top: 0; }
@media (min-width: 640px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .bro-raster--klein { grid-template-columns: repeat(3, 1fr); } }
.bro-raster--klein img { max-width: 140px; }
.bro-raster--klein h2 { font-size: 18px; }
.bro-raster--klein h3 { font-size: 14px; }
.bro-held { border: 1px solid var(--tinte-200); background: var(--weiss); padding: 36px 32px; display: grid; gap: 32px; align-items: center; margin-top: 40px; }
@media (min-width: 900px) { .bro-held { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.bro-held img { width: 100%; max-width: 300px; height: auto; }
.bro-held-text { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.bro-held-text h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.bro-held-text h3 { font-size: 18px; line-height: 1.4; font-weight: 300; color: var(--tinte-600); }
.bro-bonus { margin-top: 56px; }
.nl-block { margin-top: 64px; }

/* / */
.fheld { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(320px, 45%); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 32px auto 0; background: var(--verlauf-lav); }
.fheld-inhalt { grid-column: 1; position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.fheld-bild { position: absolute; inset: 0; }
.fheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.fheld-inhalt .titel-1 { color: var(--tinte-900); font-size: clamp(48px, 5.4vw, 80px); line-height: 0.95; letter-spacing: -0.03em; }
.fheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); max-width: 30ch; }
.fheld-aktionen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
@media (max-width: 999px) {
  .fheld { min-height: 0; display: block; }
  .fheld-bild { display: none; }
  .fheld-inhalt { padding: 40px var(--rand) 56px; }
}

/* /inhouse-seminare/ */
.iheld { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(320px, 45%); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; background: linear-gradient(150deg, #fdf9ec 0%, #faf2da 55%, #f7ebc8 100%); }
.iheld-inhalt { grid-column: 1; position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.iheld-bild { position: absolute; inset: 0; }
.iheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 78% center; }
.iheld .titel-1 { color: var(--tinte-900); font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.iheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); max-width: 30ch; }
@media (max-width: 999px) {
  .iheld { min-height: 0; display: block; }
  .iheld-bild { display: none; }
  .iheld-inhalt { padding: 40px var(--rand) 56px; }
}
.kombi-liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kombi-liste li { display: flex; gap: 12px; align-items: baseline; }
.kombi-liste li::before { content: "→"; font-weight: 700; flex: none; }
.band .kombi-liste li::before { color: #f6c9c5; }
.kombi-band .band-inhalt { flex-direction: column; align-items: flex-start; gap: var(--a-5); }
.kombi-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 48px; align-items: start; width: 100%; }
@media (max-width: 899px) { .kombi-zeile { grid-template-columns: 1fr; } }
.kombi-tage { display: flex; flex-direction: column; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.kombi-tag { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.35); font-size: 17px; }
.kombi-tag strong { font-size: 20px; }
.durchfuehrung { display: flex; gap: 24px; }
.durchfuehrung label { display: flex; gap: 8px; align-items: center; font-size: 17px; }
.durchfuehrung input { width: 20px; height: 20px; accent-color: var(--rot); }
.held-pfeil-ecke { position: absolute; top: 0; right: 0; width: clamp(72px, 9vw, 120px); height: auto; z-index: 2; }
@media (max-width: 999px) { .held-pfeil-ecke { width: 56px; } }

/* /kontakt/ */
.kontakt-karten { display: grid; gap: var(--a-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 32px; }
.kontakt-karte { background: var(--weiss); border: 1px solid var(--tinte-200); display: flex; flex-direction: column; }
.kontakt-foto { aspect-ratio: 4 / 3; background: var(--tinte-050); overflow: hidden; }
.kontakt-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kontakt-koerper { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.kontakt-name { font-size: 24px; line-height: 1.05; font-weight: 700; }
.kontakt-koerper p { font-size: 16px; line-height: 1.5; color: var(--tinte-600); }
.kontakt-links { display: flex; flex-direction: column; gap: 6px; }
.kontakt-links a { font-weight: 700; color: var(--rot-dunkel); }
.kontakt-links a:hover { color: var(--rot); }

/* /br-portal/muster-vorlagen/ */
.wk-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (min-width: 1000px) { .wk-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.wk-suche { display: flex; gap: 0; max-width: 520px; }
.wk-suche input { flex: 1; font-family: var(--schrift); font-size: 17px; font-weight: 300; color: var(--tinte-900); background: var(--weiss); border: var(--linie); padding: 12px 16px; min-width: 0; }
.wk-suche input:focus { outline: 3px solid rgba(224, 60, 49, 0.35); outline-offset: 0; }
.wk-suche button { flex-shrink: 0; }
.wk-anzahl { font-size: 14px; font-weight: 300; color: var(--tinte-500); margin-left: auto; flex: none; }
.wk-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.wk-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.wk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wk-liste li { border-bottom: 1px solid var(--tinte-100); }
.wk-liste li:last-child { border-bottom: none; }
.wk-liste li a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; font-size: 17px; font-weight: 300; color: var(--tinte-900); line-height: 1.3; }
.wk-liste li a::before { content: "→"; font-weight: 700; color: var(--rot); flex-shrink: 0; }
.wk-liste li a:hover { color: var(--rot-dunkel); }
.wk-tipp { background: var(--kap-creme); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) { .wk-tipp { position: sticky; top: 96px; } }
.wk-tipp-buch { aspect-ratio: 3 / 4; max-width: 180px; background: var(--weiss); border: var(--linie); display: grid; place-items: center; font-size: 13px; color: var(--tinte-500); text-align: center; padding: 12px; }
.wk-tipp-titel { font-size: 24px; line-height: 1.05; font-weight: 700; }
.wk-tipp p { font-size: 15px; line-height: 1.5; color: var(--tinte-700); }
.wk-tipp input { font-family: var(--schrift); font-size: 16px; font-weight: 300; background: var(--weiss); border: var(--linie); padding: 11px 14px; width: 100%; }
.wk-tipp .knopf { align-self: flex-start; }
.wk-tipp-klein { font-size: 13px; color: var(--tinte-500); }


.wk-tipp-spalte { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .wk-tipp-spalte { position: sticky; top: 96px; } .wk-tipp { position: static; } }
.wk-tipp-bild { display: block; border: var(--linie); background: var(--weiss); padding: 14px; }
.wk-tipp-bild img { width: 100%; height: auto; display: block; }
.wk-tipp-klein a { color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); font-weight: 300; }
.wk-tipp-klein a:hover { color: var(--rot); }

/* /newsletter-anmeldung-bestaetigt/ */
.status-blatt { max-width: 680px; display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.status-blatt p { font-size: 18px; line-height: 1.5; color: var(--tinte-700); max-width: 56ch; }
.shop-verweis { margin-top: 56px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /newsletter-bestaetigungslink-versendet/ */
.status-blatt { max-width: 680px; display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.status-blatt p { font-size: 18px; line-height: 1.5; color: var(--tinte-700); max-width: 56ch; }
.shop-verweis { margin-top: 56px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /plakate-download-5g2h8k/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /plakate-download-shop-kunden-5g2h8k/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /plakate-herunterladen-fuer-youtube-zuschauer-7f92cx/ */
.dl-liste { list-style: none; margin: 40px 0 0; padding: 0; max-width: 760px; }
.dl-liste li { border-bottom: 1px solid var(--tinte-100); }
.dl-liste li:last-child { border-bottom: none; }
.dl-liste a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 16px 0; color: var(--tinte-900); font-size: 18px; font-weight: 300; }
.dl-liste a::before { content: "↓"; font-weight: 700; color: var(--rot); flex: none; }
.dl-name { font-weight: 700; }
.dl-liste a:hover .dl-name { color: var(--rot-dunkel); }
.dl-typ { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rot-dunkel); border: 1px solid var(--tinte-200); padding: 2px 8px; }
.dl-groesse { font-size: 14px; color: var(--tinte-500); margin-left: auto; }
.shop-verweis { margin-top: 64px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* /referenten-fuer-betriebsratsschulungen-gesucht/ */
.fb-abschnitt { display: flex; flex-direction: column; gap: var(--a-4); padding-top: var(--a-6); margin-top: var(--a-6); border-top: var(--linie); }
.fb-titel { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.wahl-gruppe { display: flex; flex-direction: column; gap: 10px; }
.wahl { display: flex; gap: 10px; align-items: baseline; font-size: 17px; font-weight: 300; cursor: pointer; }
.wahl input { accent-color: var(--rot); width: 16px; height: 16px; flex-shrink: 0; transform: translateY(2px); }
.teilnehmer-zeile { display: grid; gap: var(--a-3); grid-template-columns: 1fr; padding: var(--a-4); border: var(--linie); background: var(--weiss); }
@media (min-width: 720px) { .teilnehmer-zeile { grid-template-columns: 1fr 1fr 1.2fr; } }
.teilnehmer-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }

/* /betriebsrat-seminare/ */
.sheld { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(320px, 45%); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; background: linear-gradient(150deg, #f0f6ea 0%, #e6efdd 55%, #dbe8ce 100%); }
.sheld-inhalt { grid-column: 1; position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.sheld-bild { position: absolute; inset: 0; }
.sheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 85% 10%; }
.sheld .titel-1 { color: var(--tinte-900); font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.sheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); max-width: 30ch; }
@media (max-width: 999px) {
  .sheld { min-height: 0; display: block; }
  .sheld-bild { display: none; }
  .sheld-inhalt { padding: 40px var(--rand) 56px; }
}
.termin-platzhalter { border: 1px dashed var(--tinte-300); background: var(--weiss); padding: 48px 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; color: var(--tinte-500); }
.held-pfeil-ecke { position: absolute; top: 0; right: 0; width: clamp(72px, 9vw, 120px); height: auto; z-index: 2; }
@media (max-width: 999px) { .held-pfeil-ecke { width: 56px; } }

/* /teilnehmerliste-firmeninterne-schulung/ */
.fb-abschnitt { display: flex; flex-direction: column; gap: var(--a-4); padding-top: var(--a-6); margin-top: var(--a-6); border-top: var(--linie); }
.fb-titel { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.wahl-gruppe { display: flex; flex-direction: column; gap: 10px; }
.wahl { display: flex; gap: 10px; align-items: baseline; font-size: 17px; font-weight: 300; cursor: pointer; }
.wahl input { accent-color: var(--rot); width: 16px; height: 16px; flex-shrink: 0; transform: translateY(2px); }
.teilnehmer-zeile { display: grid; gap: var(--a-3); grid-template-columns: 1fr; padding: var(--a-4); border: var(--linie); background: var(--weiss); }
@media (min-width: 720px) { .teilnehmer-zeile { grid-template-columns: 1fr 1fr 1.2fr; } }
.teilnehmer-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }

/* /ueber-uns/ */
.wheld { position: relative; overflow: hidden; min-height: 420px; display: grid; align-items: center; max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; }
.wheld-inhalt { position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; }
.wheld .titel-1 { color: var(--tinte-900); font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.wheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); }
@media (max-width: 999px) { .wheld { min-height: 0; } .wheld-inhalt { padding: 40px var(--rand) 56px; } }
.team-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--a-6); }
.team-karte { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.team-foto { aspect-ratio: 4 / 5; background: var(--tinte-100); border: 1px solid var(--tinte-200); display: grid; place-items: center; font-weight: 700; font-size: 40px; color: var(--tinte-300); letter-spacing: 0.02em; }
.team-karte figcaption { display: flex; flex-direction: column; gap: 2px; }
.team-name { font-weight: 700; font-size: 18px; color: var(--tinte-900); }
.team-rolle { font-size: 15px; color: var(--tinte-500); }

/* /br-portal/betriebsrat-videos/ */
.wk-tipp { background: var(--kap-creme); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.wk-tipp-titel { font-size: 24px; line-height: 1.05; font-weight: 700; }
.wk-tipp p { font-size: 15px; line-height: 1.5; color: var(--tinte-700); }
.wk-tipp .knopf { align-self: flex-start; }
.wk-tipp-klein { font-size: 13px; color: var(--tinte-500); }
.wk-tipp-klein a { color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); font-weight: 300; }
.wk-tipp-klein a:hover { color: var(--rot); }
.wk-tipp-spalte { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .wk-tipp-spalte { position: sticky; top: 96px; } }
.wk-tipp-bild { display: block; border: var(--linie); background: var(--weiss); padding: 14px; }
.wk-tipp-bild img { width: 100%; height: auto; display: block; }
.wk-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (min-width: 1000px) { .wk-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.wk-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 4px; display: flex; align-items: center; gap: 14px; }
.wk-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.video-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.video-kachel { display: flex; flex-direction: column; gap: 12px; }
.video-vorschau { aspect-ratio: 16 / 9; background: linear-gradient(150deg, var(--tinte-700), var(--tinte-900)); display: grid; place-items: center; }
.video-kachel:hover .video-vorschau svg circle { fill: #fff; }
.video-titel { font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--tinte-900); }
.video-kachel:hover .video-titel { color: var(--rot-dunkel); }

/* /vorbereitung-firmeninterne-schulung/ */
.fb-abschnitt { display: flex; flex-direction: column; gap: var(--a-4); padding-top: var(--a-6); margin-top: var(--a-6); border-top: var(--linie); }
.fb-titel { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.wahl-gruppe { display: flex; flex-direction: column; gap: 10px; }
.wahl { display: flex; gap: 10px; align-items: baseline; font-size: 17px; font-weight: 300; cursor: pointer; }
.wahl input { accent-color: var(--rot); width: 16px; height: 16px; flex-shrink: 0; transform: translateY(2px); }
.teilnehmer-zeile { display: grid; gap: var(--a-3); grid-template-columns: 1fr; padding: var(--a-4); border: var(--linie); background: var(--weiss); }
@media (min-width: 720px) { .teilnehmer-zeile { grid-template-columns: 1fr 1fr 1.2fr; } }
.teilnehmer-aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3); }

/* /webinare/ */
.wheld { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(320px, 45%); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; background: linear-gradient(150deg, #f2f8fb 0%, #e6f1f7 55%, #daeaf2 100%); }
.wheld-inhalt { grid-column: 1; position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.wheld-bild { position: absolute; inset: 0; }
.wheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; filter: brightness(1.05) saturate(0.92); }
.wheld .titel-1 { color: var(--tinte-900); font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.wheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); max-width: 30ch; }
@media (max-width: 999px) {
  .wheld { min-height: 0; display: block; }
  .wheld-bild { display: none; }
  .wheld-inhalt { padding: 40px var(--rand) 56px; }
}
.schritt-karte { background: var(--weiss); border: 1px solid var(--tinte-200); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.schritt-karte p { font-size: 16px; line-height: 1.5; color: var(--tinte-700); }
.schritt-karte a { color: var(--rot-dunkel); font-weight: 700; border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.termin-platzhalter { border: 1px dashed var(--tinte-300); background: var(--weiss); padding: 48px 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; color: var(--tinte-500); }
.held-pfeil-ecke { position: absolute; top: 0; right: 0; width: clamp(72px, 9vw, 120px); height: auto; z-index: 2; }
@media (max-width: 999px) { .held-pfeil-ecke { width: 56px; } }
.ws-element { font-size: 15px; }
.ws-element table, .ws-element th, .ws-element td, .ws-element button, .ws-element a { font-size: 15px !important; line-height: 1.4 !important; }
.ws-element th { font-size: 14px !important; }
.ws-element button, .ws-element a[class*="book"], .ws-element [class*="book"] button {
  font-family: var(--schrift) !important; font-weight: 700 !important; font-size: 13px !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; white-space: nowrap !important;
  background: var(--rot) !important; color: var(--weiss) !important;
  border: none !important; border-radius: 0 !important; padding: 12px 18px !important;
}
.ws-element button:hover, .ws-element a[class*="book"]:hover { background: var(--rot-hover) !important; }

/* /br-portal/wissen/ */
.wk-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (min-width: 1000px) { .wk-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.wk-suche { display: flex; gap: 0; max-width: 520px; }
.wk-suche input { flex: 1; font-family: var(--schrift); font-size: 17px; font-weight: 300; color: var(--tinte-900); background: var(--weiss); border: var(--linie); padding: 12px 16px; min-width: 0; }
.wk-suche input:focus { outline: 3px solid rgba(224, 60, 49, 0.35); outline-offset: 0; }
.wk-suche button { flex-shrink: 0; }
.wk-anzahl { font-size: 14px; font-weight: 300; color: var(--tinte-500); margin-left: auto; flex: none; }
.wk-zwischen { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 18px; display: flex; align-items: center; gap: 14px; }
.wk-zwischen::before { content: ""; width: 28px; height: 4px; background: var(--rot); flex: none; }
.wk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wk-liste li { border-bottom: 1px solid var(--tinte-100); }
.wk-liste li:last-child { border-bottom: none; }
.wk-liste li a { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; font-size: 17px; font-weight: 300; color: var(--tinte-900); line-height: 1.3; }
.wk-liste li a::before { content: "→"; font-weight: 700; color: var(--rot); flex-shrink: 0; }
.wk-liste li a:hover { color: var(--rot-dunkel); }
.wk-tipp { background: var(--kap-creme); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) { .wk-tipp { position: sticky; top: 96px; } }
.wk-tipp-buch { aspect-ratio: 3 / 4; max-width: 180px; background: var(--weiss); border: var(--linie); display: grid; place-items: center; font-size: 13px; color: var(--tinte-500); text-align: center; padding: 12px; }
.wk-tipp-titel { font-size: 24px; line-height: 1.05; font-weight: 700; }
.wk-tipp p { font-size: 15px; line-height: 1.5; color: var(--tinte-700); }
.wk-tipp input { font-family: var(--schrift); font-size: 16px; font-weight: 300; background: var(--weiss); border: var(--linie); padding: 11px 14px; width: 100%; }
.wk-tipp .knopf { align-self: flex-start; }
.wk-tipp-klein { font-size: 13px; color: var(--tinte-500); }

.wk-tipp-spalte { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .wk-tipp-spalte { position: sticky; top: 96px; } .wk-tipp { position: static; } }
.wk-tipp-bild { display: block; border: var(--linie); background: var(--weiss); padding: 14px; }
.wk-tipp-bild img { width: 100%; height: auto; display: block; }
.wk-tipp-klein a { color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); font-weight: 300; }
.wk-tipp-klein a:hover { color: var(--rot); }

/* Portalvorlage */
.status-blatt { max-width: 680px; display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.status-blatt p { font-size: 18px; line-height: 1.5; color: var(--tinte-700); max-width: 56ch; }
.shop-verweis { margin-top: 56px; border-top: var(--linie); padding-top: 40px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.shop-verweis p { max-width: 56ch; color: var(--tinte-700); }
.shop-verweis h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.015em; }

/* Portalvorlage */
.wheld { position: relative; overflow: hidden; min-height: 560px; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(320px, 45%); max-width: calc(var(--inhalt-max) + 2 * var(--rand)); margin: 0 auto; background: linear-gradient(150deg, #f2f8fb 0%, #e6f1f7 55%, #daeaf2 100%); }
.wheld-inhalt { grid-column: 1; position: relative; z-index: 1; padding: 84px var(--rand); display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.wheld-bild { position: absolute; inset: 0; }
.wheld-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; filter: brightness(1.05) saturate(0.92); }
.wheld .titel-1 { color: var(--tinte-900); font-size: clamp(44px, 5.4vw, 76px); line-height: 0.95; letter-spacing: -0.03em; }
.wheld-text { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.25; color: var(--tinte-700); max-width: 30ch; }
@media (max-width: 999px) {
  .wheld { min-height: 0; display: block; }
  .wheld-bild { display: none; }
  .wheld-inhalt { padding: 40px var(--rand) 56px; }
}
.schritt-karte { background: var(--weiss); border: 1px solid var(--tinte-200); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.schritt-karte p { font-size: 16px; line-height: 1.5; color: var(--tinte-700); }
.schritt-karte a { color: var(--rot-dunkel); font-weight: 700; border-bottom: 1px solid rgba(160, 18, 27, 0.35); }
.termin-platzhalter { border: 1px dashed var(--tinte-300); background: var(--weiss); padding: 48px 32px; display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; color: var(--tinte-500); }
.held-pfeil-ecke { position: absolute; top: 0; right: 0; width: clamp(72px, 9vw, 120px); height: auto; z-index: 2; }
@media (max-width: 999px) { .held-pfeil-ecke { width: 56px; } }

/* Portalvorlage */
/* Zwei Kacheln in einem Raster, das sonst drei nebeneinander stellt -
   sonst bliebe rechts ein Drittel leer. */
@media (min-width: 1024px) {
  .kachelraster--zwei { grid-template-columns: repeat(2, 1fr); }
}

/* Portalvorlage */
.wk-layout { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; margin-top: 40px; }
@media (min-width: 1000px) { .wk-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.wk-suche { display: flex; gap: 0; max-width: 520px; }
.wk-suche input { flex: 1; font-family: var(--schrift); font-size: 17px; font-weight: 300; color: var(--tinte-900); background: var(--weiss); border: var(--linie); padding: 12px 16px; min-width: 0; }
.wk-suche input:focus { outline: 3px solid rgba(224, 60, 49, 0.35); outline-offset: 0; }
.wk-suche button { flex-shrink: 0; }
.wk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wk-liste li { border-bottom: var(--linie); }
.wk-liste li a { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; font-size: 18px; font-weight: 300; color: var(--tinte-900); line-height: 1.3; }
.wk-liste li a::before { content: "→"; font-weight: 700; color: var(--rot); flex-shrink: 0; }
.wk-liste li a:hover { color: var(--rot-dunkel); }
.wk-tipp { background: var(--kap-creme); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1000px) { .wk-tipp { position: sticky; top: 96px; } }
.wk-tipp-buch { aspect-ratio: 3 / 4; max-width: 180px; background: var(--weiss); border: var(--linie); display: grid; place-items: center; font-size: 13px; color: var(--tinte-500); text-align: center; padding: 12px; }
.wk-tipp-titel { font-size: 24px; line-height: 1.05; font-weight: 700; }
.wk-tipp p { font-size: 15px; line-height: 1.5; color: var(--tinte-700); }
.wk-tipp input { font-family: var(--schrift); font-size: 16px; font-weight: 300; background: var(--weiss); border: var(--linie); padding: 11px 14px; width: 100%; }
.wk-tipp .knopf { align-self: flex-start; }
.wk-tipp-klein { font-size: 13px; color: var(--tinte-500); }

.wk-tipp-spalte { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1000px) { .wk-tipp-spalte { position: sticky; top: 96px; } .wk-tipp { position: static; } }
.wk-tipp-bild { display: block; border: var(--linie); background: var(--weiss); padding: 14px; }
.wk-tipp-bild img { width: 100%; height: auto; display: block; }
.wk-tipp-klein a { color: var(--rot-dunkel); border-bottom: 1px solid rgba(160, 18, 27, 0.35); font-weight: 300; }
.wk-tipp-klein a:hover { color: var(--rot); }


/* ---------- Buchempfehlung „Mustergültiger Betriebsrat!" (Artikelfuß) ---------- */
/* Entwurf gegen die Containerbreite, nicht gegen die Fensterbreite. */
.buch { container-type: inline-size; }
.buch-innen {
  display: flex; flex-direction: column; gap: var(--a-6);
  padding: var(--a-6); border-top: 4px solid var(--rot);
}
.buch .buch-innen { background: var(--verlauf-salbei2); }

.buch-kopf { display: flex; flex-direction: column; gap: var(--a-5); }
.buch-seite { display: flex; flex-direction: column; gap: var(--a-4); flex: none; }
.buch-bild { margin: 0; flex: none; }
.buch-bild img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.buch .buch-seite { width: 156px; }

.buch-text { display: flex; flex-direction: column; gap: var(--a-3); min-width: 0; }
.buch-kicker { margin-bottom: 0; }
.buch-titel { font-size: clamp(24px, 6.4cqi, 36px); line-height: 1.02; font-weight: 700; letter-spacing: -0.02em; }
.buch-unter { font-size: clamp(16px, 3.2cqi, 19px); line-height: 1.28; color: var(--tinte-600); text-wrap: pretty; }
.buch-autor { font-size: 15px; font-weight: 700; }

/* Eckdaten */
.buch-eckdaten { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); font-size: 14px; line-height: 1.3; color: var(--tinte-600); }
.buch-eckdaten li { display: flex; align-items: flex-start; gap: 8px; }
.buch-eckdaten li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 6px; background: var(--rot); }
.buch .buch-eckdaten { padding-top: var(--a-3); border-top: 1px solid rgba(20, 24, 26, 0.14); }

/* Fließtext im Baustein */
.buch-fliess { display: flex; flex-direction: column; gap: var(--a-4); font-size: 16px; line-height: 1.5; color: var(--tinte-600); }
.buch-fliess p { text-wrap: pretty; }
.buch-fliess strong { font-weight: 700; color: var(--tinte-900); }

/* Bestellwege — der Hausweg steht unten und trägt das Rot */
.buch-aktion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-3); padding-top: var(--a-5); border-top: 1px solid rgba(20, 24, 26, 0.14); }
.buch-aktion .knopf { white-space: normal; text-align: left; }
.buch-zwischen { font-size: 15px; font-weight: 700; margin-top: var(--a-3); }
.buch-hinweis { font-size: 13px; color: var(--tinte-500); }

@container (max-width: 400px) {
  .buch-aktion .knopf { width: 100%; justify-content: space-between; }
}
/* Schmale Spalte: Cover zentriert, Eckdaten direkt darunter */
@container (max-width: 439px) {
  .buch .buch-seite { width: 100%; align-items: center; }
  .buch .buch-bild { width: 156px; }
  /* Kein order:-1 - sonst stehen "540 Seiten / 39,90 EUR" ueber dem
     Titel, und der Leser bekommt die Eckdaten eines Buches, dessen
     Namen er noch nicht kennt. */
}
@container (min-width: 440px) {
  .buch-kopf { flex-direction: row; align-items: flex-start; gap: var(--a-6); }
  .buch .buch-seite { width: 172px; }
}
@container (min-width: 640px) {
  .buch-innen { padding: var(--a-8); }
  .buch .buch-seite { width: 210px; }
  .buch-aktion .knopf { flex: none; white-space: nowrap; }
}

/* Der Baustein steht in <article class="fliesstext">, und dort gilt
   `.fliesstext a { color: var(--rot-dunkel); border-bottom: ... }`.
   Diese Regel ist spezifischer als `.knopf` und faerbte die Knopfschrift
   dunkelrot - rot auf Schwarz und Dunkelrot auf Rot, beides unlesbar.
   Deshalb hier zurueckgeholt. */
.buch .knopf { font-weight: 700; border-bottom: 0; color: var(--weiss); }
.buch .knopf:hover { color: var(--weiss); }
.buch .knopf--hell { color: var(--rot-dunkel); }
.buch .knopf--hell:hover { color: var(--weiss); }
.buch .knopf--sekundaer { color: var(--tinte-900); }

/* "Aus dem Inhalt" - nur beim zweiten Buch */
.buch-inhalt-titel { font-weight: 700; color: var(--tinte-900); }
.buch-inhalt { list-style: none; padding: 0; margin: 0;
               display: flex; flex-direction: column; gap: var(--a-2); }
.buch-inhalt li { display: flex; gap: var(--a-3); align-items: baseline; }
.buch-inhalt li::before { content: ""; flex: none; width: 5px; height: 5px;
                          background: var(--rot); transform: translateY(-3px); }

/* Zweite Farbe fuer das zweite Buch. Der Grund ist nicht Abwechslung:
   Der Salbeigrund ist auf das gruene Cover von "Mustergueltiger
   Betriebsrat" abgestimmt; "Betriebsrat fuer Aufsteiger" ist hellblau. */
.buch--blau .buch-innen { background: var(--verlauf-ar2); }


/* ---------- "Das koennte Dich ebenfalls interessieren" ---------- */
/* Stand vorher auf 239 Seiten des Portals und war mit rund 1.400 inneren
   Verweisen das Bindeglied zwischen Beitraegen und Vorlagen. */
.verwandte { border-top: var(--linie); padding-top: var(--a-6);
             display: flex; flex-direction: column; gap: var(--a-4); }
.verwandte-titel { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.1;
                   font-weight: 700; letter-spacing: -0.01em;
                   padding-top: 0 !important; }
.verwandte-liste { list-style: none; padding: 0; margin: 0;
                   display: flex; flex-direction: column; gap: var(--a-3); }
.verwandte-liste li { display: flex; gap: var(--a-3); align-items: baseline; }
.verwandte-liste li::before { content: ""; flex: none; width: 5px;
                              height: 5px; background: var(--rot);
                              transform: translateY(-3px); }
.verwandte-liste a { font-weight: 400; border-bottom: 0;
                     color: var(--tinte-900); }
.verwandte-liste a:hover { color: var(--rot-dunkel); }


/* ---------- Einblendungen (.einbl-) ---------- */
/* Zustände, an denen das Verhalten anpackt:
   .ist-offen (sichtbar) · .wird-gesendet · .ist-erfolgreich
   Alle Umbrüche folgen der Elementbreite (@container), damit die Bausteine
   auch im Kontrollbogen und in der Artikelspalte richtig brechen. */

.einbl { display: none; container-type: inline-size; }
.einbl.ist-offen { display: block; }
.einbl--bar.ist-offen { display: block; }

.einbl-tafel { background: var(--weiss); color: var(--tinte-900); position: relative; }
.einbl-koerper { display: flex; flex-direction: column; align-items: flex-start; gap: var(--a-4); padding: var(--a-6); }
.einbl-titel { font-size: clamp(22px, 5.4cqi, 30px); line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; }
.einbl-text { font-size: 16px; line-height: 1.45; color: var(--tinte-600); text-wrap: pretty; }
.einbl-text strong { font-weight: 700; color: var(--tinte-900); }
.einbl-klein { font-size: 13px; line-height: 1.4; color: var(--tinte-500); }

/* Bilder */
.einbl-kopf { background: var(--weiss); display: flex; justify-content: center; padding: var(--a-5) var(--a-6) 0; }
.einbl-kopf .einbl-bild { width: 158px; height: auto; display: block; }
.einbl-kopf--breit { padding: var(--a-5) var(--a-5) 0; background: var(--weiss); }
.einbl-kopf--breit .einbl-bild { width: 100%; max-width: 420px; }
.einbl-auslage { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: flex-end; }
.einbl-auslage .einbl-bild { width: 100%; height: auto; display: block; }
.einbl-bild--klein { max-width: calc(50% - var(--a-2)); }

/* Aufzählung mit Inline-Haken statt Emoji */
.einbl-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-2); font-size: 16px; line-height: 1.35; color: var(--tinte-600); }
.einbl-liste li { display: flex; gap: var(--a-3); align-items: flex-start; }
.einbl-haken { flex: none; margin-top: 2px; color: var(--rot-dunkel); }

/* Formular */
.einbl-formular { width: 100%; gap: var(--a-4); }
.einbl-formular .eingabe { width: 100%; }
.einbl-absenden { align-self: flex-start; }
.einbl-t--sendet { display: none; }
.einbl.wird-gesendet .einbl-t--ruhe { display: none; }
.einbl.wird-gesendet .einbl-t--sendet { display: inline; }
.einbl.wird-gesendet .einbl-absenden { background: var(--tinte-500); pointer-events: none; }
.einbl.wird-gesendet .einbl-absenden .pfeil { opacity: 0; }
.einbl.wird-gesendet .eingabe { color: var(--tinte-500); pointer-events: none; }
.einbl-erfolg { display: none; gap: var(--a-3); align-items: flex-start; width: 100%; padding: var(--a-4); background: var(--tinte-050); font-size: 16px; line-height: 1.4; color: var(--tinte-900); }
.einbl-erfolg .einbl-haken { color: var(--tinte-900); }
.einbl.ist-erfolgreich .einbl-formular,
.einbl.ist-erfolgreich .einbl-klein,
.einbl.ist-erfolgreich .einbl-liste { display: none; }
.einbl.ist-erfolgreich .einbl-erfolg { display: flex; }

/* Schließknopf */
.einbl-zu {
  position: absolute; top: var(--a-3); right: var(--a-3); z-index: 2;
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--weiss); color: var(--tinte-900); border: var(--linie); cursor: pointer;
}
.einbl-zu:hover { background: var(--tinte-900); color: var(--weiss); border-color: var(--tinte-900); }
.einbl-absage { background: none; border: 0; padding: 0; font-family: var(--schrift); font-size: 15px; font-weight: 300; color: var(--tinte-500); text-decoration: underline; cursor: pointer; }
.einbl-absage:hover { color: var(--tinte-900); }
.einbl :focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; }

/* 1 — Slide-in: fest an der Ecke, verschiebt nichts */
.einbl--slidein { position: fixed; z-index: 60; right: var(--a-5); bottom: var(--a-5); width: min(368px, calc(100vw - 2 * var(--a-5))); }
.einbl--slidein .einbl-tafel { border: var(--linie); border-top: 4px solid var(--rot); box-shadow: 0 18px 44px rgba(20, 24, 26, 0.18); }

/* 2 — Inline: im Textfluss, ruhig, ohne Schirm */
.einbl--inline { margin: var(--a-10) 0; }
.einbl--inline .einbl-tafel { display: flex; flex-direction: column-reverse; gap: 0; background: var(--weiss); border: var(--linie); border-top: 4px solid var(--rot); }
.einbl--inline .einbl-auslage { padding: var(--a-6) var(--a-6) 0; justify-content: flex-start; }
.einbl--inline .einbl-koerper { padding: var(--a-6); max-width: 640px; }
.einbl--inline .einbl-text, .einbl--inline .einbl-liste { color: var(--tinte-900); }
.einbl--inline .einbl-klein { color: var(--tinte-600); }
.einbl--inline .einbl-erfolg { background: var(--tinte-050); }

/* 3 — Fullscreen: auf dem Telefon ganzer Schirm, am Schreibtisch Tafel */
.einbl--voll { position: fixed; inset: 0; z-index: 80; background: rgba(20, 24, 26, 0.66); }
.einbl--voll.ist-offen { display: grid; place-items: center; }
.einbl--voll .einbl-tafel { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; }
.einbl--voll .einbl-auslage { background: var(--weiss); padding: var(--a-8) var(--a-6); justify-content: center; }
.einbl--voll .einbl-auslage .einbl-bild { max-width: 210px; }

/* 4 — Popup (Exit-Intent) */
.einbl--popup { position: fixed; inset: 0; z-index: 80; background: rgba(20, 24, 26, 0.66); padding: var(--a-5); }
.einbl--popup.ist-offen { display: grid; place-items: center; }
.einbl--popup .einbl-tafel { width: min(468px, 100%); max-height: 100%; overflow: auto; border-top: 4px solid var(--rot); box-shadow: 0 24px 60px rgba(20, 24, 26, 0.3); }
.einbl-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-5); }

/* 5 — Floating Bar: fest am unteren Rand, verschiebt nichts */
.einbl--bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; }
.einbl--bar .einbl-tafel { background: var(--tinte-900); color: var(--weiss); display: flex; flex-wrap: wrap; align-items: center; gap: var(--a-4); padding: var(--a-4) calc(var(--a-6) + 44px) var(--a-4) var(--a-6); }
.einbl-bar-text { font-size: 17px; font-weight: 700; line-height: 1.2; flex: 1 1 240px; }
.einbl--bar .knopf--klein { background: var(--weiss); color: var(--rot-dunkel); }
.einbl--bar .knopf--klein:hover { background: var(--rot); color: var(--weiss); }
.einbl--bar .einbl-zu { top: 50%; transform: translateY(-50%); background: transparent; color: var(--weiss); border-color: var(--tinte-500); }
.einbl--bar .einbl-zu:hover { background: rgba(255, 255, 255, 0.14); color: var(--weiss); }

/* Breitere Fassungen */
@container (min-width: 560px) {
  /* Bleibt einspaltig: Heft oben, darunter Text, Feld und roter Knopf */
  .einbl--inline .einbl-auslage .einbl-bild { max-width: 232px; }
}
@container (min-width: 680px) {
  /* Eine Spalte: Heft oben, darunter Text, Feld und roter Knopf */
  .einbl--voll .einbl-tafel { width: min(620px, 100%); height: auto; max-height: calc(100vh - 2 * var(--a-8)); border-top: 4px solid var(--rot); }
  /* Heft, Feld und Knopf in einer linksbündigen Spalte */
  .einbl--voll .einbl-auslage { padding: var(--a-6) var(--a-8) 0; justify-content: flex-start; }
  .einbl--voll .einbl-auslage .einbl-bild { max-width: 268px; }
  .einbl--voll .einbl-koerper { padding: var(--a-6) var(--a-8) var(--a-8); }
}

/* Leiste und Slide-in sitzen beide unten. Solange die Leiste steht,
   rueckt das Slide-in darueber - sonst verdeckt eines das andere.
   Die Hoehe misst das Skript und legt sie in --einbl-bar-hoehe ab. */
:root { --einbl-bar-hoehe: 0px; }
.einbl--slidein { bottom: calc(var(--a-5) + var(--einbl-bar-hoehe)); }


/* --------------------------------------------------------------------
   Abstand zwischen Kopfleiste und Aufmacher, angeglichen an die
   Startseite (.fheld hat ihn, die drei anderen hatten ihn nicht).
   -------------------------------------------------------------------- */
.sheld, .iheld, .wheld { margin-top: 32px; }

/* --------------------------------------------------------------------
   Die Hauptpunkte im Kopfmenue sind jetzt Verweise. Ohne diese Regel
   faerbt der Browser sie rot und unterstreicht sie - sie sollen aber
   aussehen wie vorher.
   -------------------------------------------------------------------- */
.hauptmenue summary a { color: inherit; text-decoration: none; }
.hauptmenue summary a:hover { color: inherit; }

/* --------------------------------------------------------------------
   Videos im Fliesstext: Abstand nach oben und unten. Die Groesse regelt
   .video-einbettung aus dem Entwurf.
   -------------------------------------------------------------------- */
.fliesstext .video-einbettung { margin: 28px 0; }

/* --------------------------------------------------------------------
   Eckdaten im Seminarkopf. Nebeneinander trennt der senkrechte Strich
   die Spalten - vor der ersten gehoert keiner hin. Untereinander ist er
   dagegen kein Trenner mehr, sondern eine Randlinie: dann braucht sie
   auch der erste Punkt, sonst steht "Dauer" als einziger ohne Linie und
   ohne Einzug da.

   Wann wird umgebrochen? Nicht die Fensterbreite entscheidet das,
   sondern der Platz im Seminarkopf - und der ist nicht ueberall
   derselbe: bei 1024 Pixeln Fensterbreite ist die Spalte schmaler als
   bei 1000, weil dort das Seitenlayout wechselt. Eine Regel nach
   Fensterbreite trifft deshalb daneben; die drei Punkte brechen dann in
   zwei Zeilen um und "Preis" steht allein in der zweiten, mit einem
   Strich davor, der ins Leere zeigt. Genau das war zu sehen.

   Gefragt wird deshalb nach der Breite des Kastens selbst. Die drei
   Punkte brauchen nebeneinander 633 Pixel; unterhalb von 680 stapeln
   sie. Die Regel nach Fensterbreite bleibt als Rueckfallebene fuer
   Browser, die Container-Abfragen nicht kennen.
   -------------------------------------------------------------------- */
@media (max-width: 639px) {
  .eckdaten { flex-direction: column; gap: 14px; }
  .eckdaten div,
  .eckdaten div:first-child {
    padding-left: var(--a-6);
    border-left: 1px solid rgba(26, 26, 26, 0.18);
  }
}

/* Der Schwellenwert ist gemessen, nicht geschaetzt: nebeneinander
   brauchen die drei Punkte je nach Seite zwischen 381 und 754 Pixel -
   am meisten auf /seminare/betriebsrat-1/. Die Spalte im Seminarkopf
   ist 536 bis 896 Pixel breit, je nach Fenster. Unterhalb von 780 wird
   deshalb gestapelt; darueber passt auch die breiteste Seite mit
   Spielraum in eine Zeile. */
.seminarheld-inhalt { container-type: inline-size; }

@container (max-width: 780px) {
  .eckdaten { flex-direction: column; gap: 14px; }
  .eckdaten div,
  .eckdaten div:first-child {
    padding-left: var(--a-6);
    border-left: 1px solid rgba(26, 26, 26, 0.18);
  }
}


/* Der Kasten "Angebot anfordern" in der Randspalte
   ------------------------------------------------
   Er springt zum Formular derselben Seite. Auf schmalen Bildschirmen
   rutscht er unter das Formular, und dort stand er bis Stand 44 ohne
   Ueberschrift und ohne Knopf da - ich hatte beides ausgeblendet, weil
   die Ueberschrift denselben Wortlaut hat wie der Absendeknopf direkt
   darueber. Uebrig blieben zwei Zusagen ohne Zusammenhang.

   Entscheidung von Henning Kluge vom 27.08.2026: lieber der ganze
   Kasten, so wie er am Rechner aussieht. Der Absendeknopf des Formulars
   bleibt selbstverstaendlich stehen - ohne ihn liesse sich die Anfrage
   nicht abschicken. */
@media (max-width: 1023px) {
  .buchen--wiederholung { padding: var(--a-6); }
}

/* ... und auf dem Telefon steht er vor den Themen der Schulung.
   Hinter dem Formular war er wirkungslos, ganz oben stand er direkt
   unter dem gleichlautenden Knopf der Kopfkarte. Vor den Themen passt
   er: Der Leser weiss dann, worum es geht, und der Knopf zeigt nach
   vorn aufs Formular.

   Der Kasten steht dafuer zweimal im Quelltext - ein Element kann nicht
   an zwei Stellen zugleich stehen. Sichtbar ist immer nur einer. */
.buchen--mobil { display: none; }
@media (max-width: 1023px) {
  .buchen--mobil { display: flex; margin: var(--a-10) 0; }
  .buchen--randspalte { display: none; }
}

/* Die Randspalte bekommt ihre Abstaende erst ab 1024 px, wo sie eine
   Spalte ist. Darunter stapeln sich Kasten, Kontaktkarte und
   Herunterladen ohne jeden Zwischenraum - auf dem Telefon klebte der
   rote Kasten unmittelbar am Absendeknopf. */
.randspalte { display: flex; flex-direction: column; gap: var(--a-6); }
@media (max-width: 1023px) {
  .seitenlayout > .randspalte { margin-top: var(--a-10); }

}


/* Sprungziele unter der Kopfleiste
   ---------------------------------
   Die Kopfleiste klebt oben (position: sticky). Ein Sprung zu #anmelden
   oder #abschnitt-3 scrollt das Ziel an den oberen Rand des Fensters -
   und dort liegt die Leiste darueber. Man landet also scheinbar zu weit
   unten: Die Ueberschrift, zu der man wollte, steckt hinter dem Menue.

   scroll-margin-top haelt genau so viel Platz frei, wie die Leiste hoch
   ist, plus etwas Luft. Die Hoehe wechselt an denselben Haltepunkten wie
   die Leiste selbst: 64 / 76 / 92 Pixel. */
:root { --kopf-hoehe: 64px; }
@media (min-width: 640px)  { :root { --kopf-hoehe: 76px; } }
@media (min-width: 1024px) { :root { --kopf-hoehe: 92px; } }

[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px); }

/* Der Sprung "Zum Inhalt springen" soll an den Anfang, nicht 24 Pixel
   darunter - dort steht ohnehin nichts. */
#inhalt { scroll-margin-top: var(--kopf-hoehe); }

/* Sprungziele, die selbst schon Innenabstand haben
   ------------------------------------------------
   Bei einer blossen Ueberschrift stimmen die 24 Pixel oben. Ein ganzer
   Abschnitt bringt seinen eigenen Innenabstand mit - 48, 64 oder 84
   Pixel, je nach Bildschirmbreite. Beides zusammen landete auf
   /inhouse-seminare/#anfrage 108 Pixel unter der Kopfleiste; es sah aus,
   als sei die Seite zu weit gerutscht. Der eigene Innenabstand wird
   deshalb abgezogen: Was man lesen will, steht dann immer genau 24 Pixel
   unter der Leiste - bei der Ueberschrift wie beim Abschnitt.
   Dieselben Haltepunkte wie oben. */
.abschnitt[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px - var(--a-12)); }
.nl-block[id]  { scroll-margin-top: calc(var(--kopf-hoehe) + 24px - 44px); }
@media (min-width: 640px) {
  .abschnitt[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px - var(--a-16)); }
}
@media (min-width: 1024px) {
  .abschnitt[id] { scroll-margin-top: calc(var(--kopf-hoehe) + 24px - var(--a-21)); }
}

/* Die Erfolgsmeldung der Einblendungen war grau auf hellgrau und damit
   kaum vom Rest der Seite zu unterscheiden - wer sich eingetragen hat,
   soll das auf einen Blick sehen. Gruen und Flaeche sind die, die in der
   Palette schon stehen (--gruen, --gruen-flaeche); erfunden ist nichts.
   Der Wortlaut bleibt unveraendert. */
.einbl-erfolg {
  background: var(--gruen-flaeche);
  color: var(--tinte-900);
  border-left: 4px solid var(--gruen);
  font-weight: 600;
}
.einbl--inline .einbl-erfolg { background: var(--gruen-flaeche); }
.einbl-erfolg .einbl-haken { color: var(--gruen); }

/* Absendeknopf und der Abstand danach
   -----------------------------------
   Das Formular ist eine Flex-Spalte; ein Knopf ohne align-self wird
   deshalb so breit wie das Formular. Auf den meisten Seiten steht das
   als style am Knopf, auf den beiden Video-Kurs-Seiten fehlte es - der
   Knopf lief ueber die ganze Breite. Als Regel gilt es jetzt ueberall;
   die Einblendungen bleiben aussen vor, dort ist der breite Knopf
   gewollt.

   Und nach dem Formular faengt ein neuer Abschnitt an: "Haeufig
   gestellte Fragen" klebte am Knopf. */
/* In den Rechtstexten stehen einzelne Adressen als Code ausgezeichnet
   (kluge-seminare.de, shop.kluge-seminare.de). Ohne eigene Regel waere
   das die Schreibmaschinenschrift des Browsers - hier reicht eine
   leicht abgesetzte Flaeche. */
.fliesstext code {
  font-family: inherit;
  background: var(--tinte-050);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.95em;
}

/* Die Eckdaten ueber jedem Muster
   -------------------------------
   Absender, Empfaenger, Stichworte, Paragraphen - vier Angaben, die
   sich vergleichen lassen sollen. Als Absatz mit Zeilenumbruechen
   standen die Werte auf keiner gemeinsamen Kante. Jetzt zwei Spalten. */
.musterdaten {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px var(--a-6);
  margin: var(--a-6) 0;
  padding: var(--a-5) var(--a-6);
  background: #fbf5ec;
  border: 1px solid var(--kap-creme);
  font-size: 16px;
  line-height: 1.4;
}
.musterdaten dt { font-weight: 700; color: var(--tinte-700); }
.musterdaten dd { margin: 0; color: var(--tinte-900); }
@media (max-width: 479px) {
  .musterdaten { grid-template-columns: 1fr; gap: 2px var(--a-6); }
  .musterdaten dd { margin-bottom: 8px; }
}

/* Beispiele im Fliesstext
   -----------------------
   Ueber 200 Beispiele standen im Portal wie jeder andere Absatz - wer
   quer liest, uebersieht sie. Ein ruhiger Kasten mit rotem Balken
   links hebt sie heraus, ohne zu schreien. Wortlaut und Auszeichnungen
   bleiben, wie sie waren. */
.beispiel {
  background: var(--tinte-050);
  border-left: 4px solid var(--rot);
  padding: var(--a-5) var(--a-6);
  margin: var(--a-6) 0;
}
.beispiel > p:first-child { margin-top: 0; }
.beispiel > *:last-child { margin-bottom: 0; }
.beispiel-marke { margin: 0 0 10px; font-weight: 700; }
.beispiel ul, .beispiel ol { margin-bottom: 0; }

/* Die Titel in den Vorlagenlisten waren rot wie ein Knopf. In der
   Wissensliste daneben sind sie schwarz und werden erst beim
   Darueberfahren rot - so liest sich eine Liste ruhiger. Jetzt gleich.
   Entscheidung von Henning Kluge vom 27.08.2026. */
.vorlagen-liste .download-titel a { color: var(--tinte-900); }
.vorlagen-liste .download-titel a:hover { color: var(--rot-dunkel); }

.formular:not(.einbl-formular) > button[type="submit"] { align-self: flex-start; }
.formular:not(.einbl-formular) + h2 { margin-top: var(--a-16); }

/* Die Leiste am unteren Rand
   --------------------------
   War schwarz mit weissem Knopf, der Text klebte ganz links und der
   Knopf ganz rechts - dazwischen nichts. Jetzt rot mit schwarzem Knopf,
   und Text und Knopf stehen zusammen in der Mitte des Bildschirms.
   Der Innenabstand ist auf beiden Seiten gleich gross (die 44 Pixel
   sind das Schliesskreuz rechts), sonst waere die Mitte nicht die
   Mitte. Entscheidung von Henning Kluge vom 27.08.2026. */
.einbl--bar .einbl-tafel {
  background: var(--rot);
  color: var(--weiss);
  justify-content: center;
  padding: var(--a-4) calc(var(--a-6) + 44px);
}
.einbl--bar .einbl-bar-text { flex: 0 1 auto; text-align: center; }
.einbl--bar .knopf--klein {
  background: var(--tinte-900);
  color: var(--weiss);
}
.einbl--bar .knopf--klein:hover {
  background: var(--weiss);
  color: var(--tinte-900);
}
.einbl--bar .einbl-zu { border-color: rgba(255, 255, 255, 0.55); }

/* <picture> statt <img>: das Element ist von Haus aus inline und
   haette sonst keine Hoehe - die Titelbilder wuerden zusammen-
   fallen. */
.fheld-bild picture,.wheld-bild picture,.iheld-bild picture,.sheld-bild picture,.kontakt-foto picture{display:block;width:100%;height:100%}
.mat-bild picture{display:block}