/* ============================================================
   RAHMEN DER NEUEN GESTALTUNG – auf allen Seiten (body.ds-site)
   ------------------------------------------------------------
   Topbar, Navigation/Megamenü, Fuß als Schriftfeld, Überschriften-
   Format der alten Abschnitte und der Einschub „Nächster Kurs/Event“.
   Bausteine der Segment-Seiten liegen in ds.css (body.ds).
   ============================================================ */

@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap; }

.ds-site {
  --ds-ink:    #0e1116;
  --ds-text:   #22262c;
  --ds-muted:  #5a6270;
  --ds-line:   #dfe3e8;
  --ds-grau:   #f2f5f7; /* = Grau der alten Abschnitte */
  --ds-dunkel: #0d1724;
  --ds-blau:   #004f9e;
  --ds-blau-d: #003a75;
  --ds-mono:   'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ds-gutter: var(--global-gutter, 2.5em);
}

/* Überschriften der alten Abschnitte im Format der Design-Schicht (.ds-h2) */
/* Nur Abschnittstitel – Überschriften im Fließtext (Kursbeschreibung, Beiträge) bleiben, wie sie sind */
.ds-site main .segment-inner > h2, .ds-site main .segment-inner > .segment-text > h2,
.ds-site main .segment-inner > .text-left > h2, .ds-site main .segment-inner > .text-right > h2,
.ds-site main .ctls-sec-head-text > h2 { font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; color: var(--ds-ink); text-transform: none;
  overflow-wrap: break-word; }

/* Titel trennen: nur sehr lange Wörter (ab 16 Zeichen, je 7 davor/danach) – „Produktdatenmanagement“
   ja, „Kompetenzfelder“ oder „Planung“ nie. Browser ohne diese Steuerung (Safari) trennen gar nicht.
   text-wrap: balance verteilt mehrzeilige Titel gleichmäßig statt ein Wort allein in die letzte Zeile. */
.ds-site main .segment-inner > h2, .ds-site main .segment-inner > .segment-text > h2,
.ds-site main .segment-inner > .text-left > h2, .ds-site main .segment-inner > .text-right > h2,
.ds-site main .ctls-sec-head-text > h2, .ds-site .training-main > h2, .ds-site .training-zv-titel,
.ds-site .shop-origin-text h2, .ds-site .ds-ende .ds-ende__titel, .ds-site .ds-ende-cta > .segment-inner > h2,
.ds-site .shop-intro > .shop-intro-title + p { text-wrap: balance; hyphens: manual; }
@supports (hyphenate-limit-chars: 16 7 7) {
  .ds-site main .segment-inner > h2, .ds-site main .segment-inner > .segment-text > h2,
  .ds-site main .segment-inner > .text-left > h2, .ds-site main .segment-inner > .text-right > h2,
  .ds-site main .ctls-sec-head-text > h2, .ds-site .training-main > h2, .ds-site .training-zv-titel,
  .ds-site .shop-origin-text h2, .ds-site .ds-ende .ds-ende__titel, .ds-site .ds-ende-cta > .segment-inner > h2,
  .ds-site .shop-intro > .shop-intro-title + p { hyphens: auto; hyphenate-limit-chars: 16 7 7; }
}

/* Halbe Breite (Text neben Bild/Video): eine Stufe kleiner, sonst drei, vier Zeilen */
.ds-site main .segment-inner > .text-left > h2, .ds-site main .segment-inner > .text-right > h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.08; }

/* Alter Abschnittskopf: 46rem reichten für die kleinere Überschrift; die größere soll
   die Breite neben dem Knopf nutzen, nur der Text darunter bleibt schmal */
.ds-site .ctls-sec-head-text { max-width: none; flex: 1; min-width: 0; }
.ds-site .ctls-sec-head-text .ctls-sec-lead { max-width: 46rem; }

/* Kursliste: Linien und Raster neu, Schrift wie die alte Terminliste (ctls-sec-list) */
.ds-schulungen .ds-zeile__datum { font-family: var(--font-body); font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
  text-transform: none; color: #0d0e0f; }
.ds-schulungen .ds-zeile__titel { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: #0d0e0f; }
.ds-schulungen .ds-zeile__ort { font-family: var(--font-body); font-size: .78rem; font-weight: 400; color: #999; margin-top: .15rem; }
.ds-schulungen .ds-zeile__art { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: #6b6f75; }

/* Spezialisierungen: Zwischentitel ruhiger, damit sie neben der leichten h2 nicht schreien */
.ds-site main .spec-block h3 { font-weight: 500; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ds-ink); }
.ds-site main .spec-block p { color: var(--ds-muted); }

/* Verzeichnis im Listen-Look der Kurse: Nummer | Name | Beschreibung */
.ds-site .ctls-sec-list--verz .ctls-sec-list-row { grid-template-columns: 3rem minmax(14rem, 22rem) 1fr; align-items: baseline; }
.ds-site .ctls-sec-list-titel, .ds-site .ctls-sec-list-titel a { font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  letter-spacing: -.02em; color: #0d0e0f; line-height: 1.3; text-decoration: none; }
.ds-site .ctls-sec-list-row:hover .ctls-sec-list-titel a { color: var(--color-primary, var(--ds-blau)); }
.ds-site .ctls-sec-list-text { font-size: .88rem; line-height: 1.5; color: #666; }
@media (max-width: 760px) { .ds-site .ctls-sec-list--verz .ctls-sec-list-row { grid-template-columns: 1fr; gap: .25rem; } }

/* Dachzeilen über den Titeln entfallen – der Titel trägt allein, die Seite bleibt ruhig */
.ds-site .ctls-sec-kicker, .ds-site .ctls-nl-box-kicker { display: none; }

/* ============================================================
   ANSPRECHPARTNER (segment-ansprechpartner.php) – ohne Karte,
   Dachzeile und Farbbalken: die Aussage der Person vorn, groß und
   leicht, darunter Name, Rolle und die beiden Wege.
   ============================================================ */
.ds-site .segment-ansprechpartner .ansprechpartner-wrapper { background: transparent; border-radius: 0; box-shadow: none;
  overflow: visible; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); }
.ds-site .segment-ansprechpartner .ansprechpartner-image { flex: 0 0 200px; background: none; border-radius: 8px; }
.ds-site .segment-ansprechpartner .ansprechpartner-image img { height: auto; aspect-ratio: 4 / 5; border-radius: 8px; }
.ds-site .segment-ansprechpartner .ansprechpartner-text { padding: 0; }
.ds-site .segment-ansprechpartner .ap-kicker { display: none; }
.ds-site .segment-ansprechpartner .ap-zitat { order: -1; margin: 0 0 1.4rem; padding: 0; border: 0; max-width: 38ch;
  font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.3;
  letter-spacing: -.02em; color: var(--ds-ink); }
.ds-site .segment-ansprechpartner .ap-zitat::before { content: "„"; }
.ds-site .segment-ansprechpartner .ap-zitat::after { content: "“"; }
.ds-site .segment-ansprechpartner .ap-name { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.ds-site .segment-ansprechpartner .ap-rolle { color: var(--ds-muted); }
.ds-site .segment-ansprechpartner .ap-actions { margin-top: 1.3rem; padding-top: 0; border-top: 0; }
@media (max-width: 768px) {
  .ds-site .segment-ansprechpartner .ansprechpartner-wrapper { align-items: flex-start; gap: 1.5rem; }
  .ds-site .segment-ansprechpartner .ansprechpartner-image { flex: none; width: 140px; height: auto; }
}

/* ============================================================
   ABSCHLUSS „Sprechen Sie mit uns“ (includes/forms/page.php) –
   läuft im normalen Weiß/Grau-Wechsel der Abschnitte mit (keine eigene
   Farbe); den Fuß trennt seine durchgehende Linie oben
   ============================================================ */
.ds-site .ds-ende { color: var(--ds-text); padding: clamp(3.5rem, 7vw, 6rem) 0; }
.ds-site .ds-ende__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem var(--ds-gutter); align-items: start; }
.ds-site .ds-ende__links { grid-column: 1 / 6; }
.ds-site .ds-ende .ds-ende__titel { margin: 0; color: var(--ds-ink); font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; letter-spacing: -.035em; text-transform: none; }
.ds-site .ds-ende__text { grid-column: 7 / 13; }
.ds-site .ds-ende__text p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.65; color: var(--ds-text); }
.ds-site .ds-ende__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin: 1.6rem 0 0 !important; }
.ds-site .ds-ende__aktionen a { color: var(--ds-ink); text-decoration: none; font-weight: 500; }
.ds-site .ds-ende__aktionen a:hover { color: var(--ds-blau); }
.ds-site .ds-ende .ds-ende__knopf { display: inline-flex; align-items: center; gap: .6em; padding: .8rem 1.25rem; border-radius: 6px;
  background: var(--ds-blau); color: #fff; transition: background .2s ease, color .2s ease; }
.ds-site .ds-ende .ds-ende__knopf::after { content: "→"; transition: transform .2s ease; }
.ds-site .ds-ende .ds-ende__knopf:hover { background: var(--ds-blau-d); color: #fff; }
.ds-site .ds-ende .ds-ende__knopf:hover::after { transform: translateX(3px); }
/* mit Ansprechpartner der Seite: Foto, Name, Rolle, Aussage */
.ds-site .ds-ende__person { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.4rem; }
.ds-site .ds-ende__foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center top;
  background: rgba(13,23,36,.06); flex-shrink: 0; }
.ds-site .ds-ende .ds-ende__name { margin: 0; color: var(--ds-ink); font-weight: 600; font-size: 1.05rem; }
.ds-site .ds-ende .ds-ende__rolle { margin: .15rem 0 0; font-size: .88rem; color: var(--ds-muted); }
.ds-site .ds-ende .ds-ende__zitat { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.6; color: var(--ds-text); }
/* Eigene Abschluss-Segmente (Shop „Angebot anfragen“, Event-Anmeldung) im selben Look:
   heller Grund, Titel links, Text und Knopf rechts, Hauptknopf blau */
.ds-site .ds-ende-cta { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.ds-site .ds-ende-cta > .segment-inner { display: grid; grid-template-columns: 5fr 1fr 6fr; column-gap: var(--ds-gutter);
  align-items: start; text-align: left !important; }
.ds-site .ds-ende-cta > .segment-inner > * { grid-column: 3; justify-self: start; }
.ds-site .ds-ende-cta > .segment-inner > h2 { grid-column: 1; grid-row: 1 / span 8; margin: 0;
  font-size: clamp(2rem, 3.2vw, 2.7rem); hyphens: manual; } /* schmale Spalte: lange Event-Titel sonst „Vorfüh-rung“ */
.ds-site .ds-ende-cta > .segment-inner > p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.65; color: var(--ds-text); }
.ds-site .ds-ende-cta .button-cta { display: inline-flex; align-items: center; gap: .6em; margin-top: .5rem; padding: .8rem 1.25rem;
  border-radius: 6px; background: var(--ds-blau); color: #fff; border: 0; font-weight: 500; }
.ds-site .ds-ende-cta .button-cta::after { content: "→"; transition: transform .2s ease; }
.ds-site .ds-ende-cta .button-cta:hover { background: var(--ds-blau-d); color: #fff; }
.ds-site .ds-ende-cta .button-cta:hover::after { transform: translateX(3px); }
@media (max-width: 900px) {
  .ds-site .ds-ende-cta > .segment-inner { display: block; }
  .ds-site .ds-ende-cta > .segment-inner > h2 { margin-bottom: 1.4rem; }
}
@media (max-width: 560px) { .ds-site .ds-ende__foto { width: 96px; height: 96px; } }
/* Freigestellte Person unten links: steht auf der Unterkante, Text rechts mittig */
.ds-site .ds-ende--figur { padding-bottom: 0; }
.ds-site .ds-ende--figur .ds-ende__grid { align-items: stretch; }
.ds-site .ds-ende--figur .ds-ende__links { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.ds-site .ds-ende__figur { display: block; width: auto; max-width: 100%; height: clamp(280px, 28vw, 400px); object-fit: contain;
  object-position: left bottom; margin: 0; border-radius: 0; box-shadow: none; }
.ds-site .ds-ende--figur .ds-ende__text { align-self: center; padding-bottom: clamp(3.5rem, 7vw, 6rem); }
@media (max-width: 900px) {
  .ds-site .ds-ende--figur .ds-ende__grid { display: flex; flex-direction: column; }
  .ds-site .ds-ende--figur .ds-ende__links { display: contents; }
  .ds-site .ds-ende--figur .ds-ende__titel { order: 1; }
  .ds-site .ds-ende--figur .ds-ende__text { order: 2; padding-bottom: 1.5rem; }
  .ds-site .ds-ende__figur { order: 3; height: 240px; align-self: flex-start; }
}
@media (max-width: 900px) { .ds-site .ds-ende__grid { display: block; } .ds-site .ds-ende .ds-ende__titel { margin-bottom: 1.4rem; } }

/* ============================================================
   RUHE: Kacheln bewegen sich beim Überfahren nicht (kein Bild-Zoom,
   keine wachsende Linie, kein Schatten-Sprung, kein Pfeil-Rutschen) –
   Hinweis-Linien „Findet statt“ & Co. (promo-*) bleiben stehen
   ============================================================ */
.ds-site .ctls-card:hover, .ds-site .kurs-tile:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.05); }
.ds-site .ctls-card:not([class*="promo-"]):hover::before,
.ds-site .kurs-tile:not([class*="promo-"]):hover::before { transform: scaleX(0); }
.ds-site .ctls-card:hover .ctls-card-img img, .ds-site .kurs-tile:hover .kurs-tile-img-wrap img,
.ds-site .ctls-card:hover .ctls-card-img-bg { transform: none; }
.ds-site .ctls-card:hover .ctls-card-cta, .ds-site .kurs-tile:hover .kurs-tile-link { gap: .3rem; }
.ds-site .ctls-sec-qn:hover { box-shadow: none; }
.ds-site .ctls-sec-qn:hover::before { transform: scaleX(0); }
.ds-site .ctls-sec-qn:hover .ctls-sec-qn-icon { background: var(--color-gray-light); color: var(--color-primary); }
.ds-site .ctls-sec-qn:hover .ctls-sec-qn-more, .ds-site .ctls-sec-list-row:hover .ctls-sec-list-cta,
.ds-site a.ctls-sec-logocard:hover .ctls-sec-logocard-more { gap: .3rem; }
.ds-site .ctls-yt-card:hover .ctls-yt-play { transform: translate(-50%, -50%); }

/* Zusatzlinks („Ebenfalls mit Termin“, „Kein passender Termin dabei?“): dunkel mit feiner
   Unterstreichung statt fett-blau – Blau erst beim Überfahren */
.ds-site .ctls-sec-footnote a, .ds-site .ctls-sec-morelist a, .ds-site .ds-fussnote a {
  color: var(--ds-ink); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(14,17,22,.25);
  text-decoration-thickness: 1px; text-underline-offset: .22em; border-bottom: 0; }
.ds-site .ctls-sec-footnote a:hover, .ds-site .ctls-sec-morelist a:hover, .ds-site .ds-fussnote a:hover {
  color: var(--ds-blau); text-decoration-color: currentColor; }
.ds-site .ctls-sec-morelist > span { font-weight: 500; color: var(--ds-muted); }

/* Unterzeile unter dem Abschnittstitel entfällt – Titel und Text tragen allein (Inhalt bleibt im Markup) */
.ds-site .segment-subheadline { display: none; }

/* Shop-Produkt neben dem Kaufkasten: Produktname steht schon als H1 im Kopfbild – die doppelte
   H2 entfällt; der fette Leitsatz darunter wird zum Titel im Abschnittsformat */
.ds-site .shop-intro > .shop-intro-title { display: none; }
.ds-site .shop-intro > .shop-intro-title + p { font-family: var(--font-heading); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -.03em; color: var(--ds-ink); margin: 0 0 1.4rem; }
.ds-site .shop-intro > .shop-intro-title + p strong { font-weight: inherit; }

/* Shop: Anfrage läuft über die Buy-Box („Angebot anfragen“ öffnet dasselbe Formular-Fenster) –
   das eigene Segment am Ende entfällt, das Fenster (Modal) bleibt im Markup */
.ds-site #segment-shop-cta { display: none; }

/* Kursseite (single-training): Abschnittstitel leicht, Kästen und blauer Balken weg, Link dezent */
.ds-site .training-main > h2 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.035em; color: var(--ds-ink); }
.ds-site .kb-block-titel { font-weight: 600; letter-spacing: -.01em; color: var(--ds-ink); }
.ds-site .kb-block--abschluss { border-left: 0; padding-left: 0; }
.ds-site .kb-block--voraussetzungen { background: none; border-radius: 0; padding: 0; }
.ds-site .training-hub-links { border-top-color: var(--ds-line); }
/* Buy-Box Shop und Training gleich: Hinweiskasten wie die Shop-Infobox (grau, Text gedämpft, kein
   blauer Balken), Warenkorb-Knopf in beiden ohne Symbol */
.ds-site .ctls-buybox .tb-hinweise-box { border-left: 0; background: var(--bb-surface-2, #f5f7fa); border-radius: 8px; padding: 11px 12px; }
.ds-site .ctls-buybox .tb-hinweise-box strong { color: var(--ds-ink); font-weight: 600; font-size: 12px; }
.ds-site .ctls-buybox .tb-hinweise-box span { color: var(--bb-muted, #5f6b7a); }
.ds-site .ctls-buybox .bb-cta.primary svg { display: none; }

/* Listen neben der Buy-Box gleich: Kursinhalte mit normalen Punkten wie der Shop (keine Haken),
   nicht mehr durchgehend fett */
.ds-site .kb-block--kursinhalte .kb-block-inhalt ul { list-style: disc; padding-left: 1.2rem; }
.ds-site .kb-block--kursinhalte .kb-block-inhalt li { padding-left: 0; }
.ds-site .kb-block--kursinhalte .kb-block-inhalt li::before { display: none; }
.ds-site .kb-block--kursinhalte .kb-block-inhalt li strong { font-weight: 500; }
/* Gegliederte Kursinhalte (Zwischentitel + kurze Liste, z. B. Vault): bisher griff die Zweispaltigkeit
   nur bei einer Liste ab 8 Punkten – hier gibt es viele kurze Listen, die Spalte lief endlos.
   Ab drei Gruppen fließen die Gruppen in zwei Spalten; Titel bleibt bei seiner Liste. */
.ds-site .kb-block--kursinhalte .kb-block-inhalt:has(> ul:nth-of-type(3)) { columns: 300px 2; column-gap: 2.5rem; }
.ds-site .kb-block--kursinhalte .kb-block-inhalt:has(> ul:nth-of-type(3)) > p { break-after: avoid; margin-bottom: .4rem; }
.ds-site .kb-block--kursinhalte .kb-block-inhalt:has(> ul:nth-of-type(3)) > ul { break-inside: avoid; margin-top: 0; columns: auto; }

/* Kursseite unten: „Ziel und Voraussetzungen“ als Abschnittstitel, darunter Abschluss und
   Voraussetzungen nebeneinander; Blöcke mit Bild über die volle Breite */
.ds-site .training-zv-titel { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.035em; color: var(--ds-ink); margin: 0 0 1.8rem; }
/* Raster sitzt auf .kursbeschreibung-content (enthält die Blöcke, bei Revit je Fassung einmal) */
.ds-site .training-zv .kursbeschreibung-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ds-gutter); align-items: start; }
.ds-site .training-zv .kb-block { margin-bottom: 2rem; }
/* Lange freie Abschnitte (z. B. „Teil 2“ der BIM-Kurse) und Blöcke mit Bild brauchen die volle Breite */
.ds-site .training-zv .kb-block--sonstiges, .ds-site .training-zv .kb-block:has(img) { grid-column: 1 / -1; }
.ds-site .training-zv .kb-block-titel { font-size: 1.15rem; }
@media (max-width: 900px) { .ds-site .training-zv .kursbeschreibung-content { display: block; } }
.ds-site .training-hub-link { color: var(--ds-ink); font-weight: 500; text-decoration: underline;
  text-decoration-color: rgba(14,17,22,.25); text-underline-offset: .22em; }
.ds-site .training-hub-link:hover { color: var(--ds-blau); text-decoration-color: currentColor; }

/* Shop „Aus eigener Entwicklung“ (shop-origin): kein Kasten, kein blauer Seitenbalken, keine
   Dachzeile – Titel im Abschnittsformat, rechte Spalte ohne Trennlinie */
.ds-site .shop-origin { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.ds-site .shop-origin-kicker { display: none; }
.ds-site .shop-origin-text h2 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08; letter-spacing: -.035em; color: var(--ds-ink); margin: 0 0 1rem; }
.ds-site .shop-origin-tech { color: var(--ds-muted); }
.ds-site .shop-origin-cta { border: 0; padding: 0; }
@media (max-width: 900px) { .ds-site .shop-origin-cta { border: 0; padding: 0; } }

/* Weniger Blau: Zähler und Symbole der Kachelleisten dunkel/grau statt blau */
.ds-site .ctls-sec-qn-count { color: var(--ds-muted); }
.ds-site .ctls-sec-qn-icon, .ds-site .ctls-sec-qn:hover .ctls-sec-qn-icon { color: var(--ds-ink); }

/* Verzeichnis-Liste mit Zielen (Unternehmen › Kompetenzfelder): ganze Zeile klickbar, Pfeil am Ende */
.ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-row { position: relative; grid-template-columns: 3rem minmax(14rem, 22rem) 1fr 1.5rem; }
.ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-row::after { content: "→"; color: var(--ds-ink); justify-self: end; }
.ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-row:hover::after { color: var(--ds-blau); }
.ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-titel a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 760px) {
  .ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-row { grid-template-columns: 1fr; gap: .25rem; }
  .ds-site .ctls-sec-list--zeilenlink .ctls-sec-list-row::after { display: none; }
}

/* ============================================================
   KENNZAHLEN als Maßkette (.ctls-fact-band): Maßlinie oben, an jeder
   Grenze ein Schrägstrich, Maßhilfslinien nach unten. Zeichnet sich beim
   ersten Sichtkontakt, Zahlen zählen hoch (ds-rahmen.js); ohne JS fertig.
   ============================================================ */
.ds-site .ctls-fact-band { position: relative; margin-top: 3rem; padding-top: 1.9rem; background: none; border: 0;
  border-radius: 0; overflow: visible; }
.ds-site .ctls-fact-band::before { content: ""; position: absolute; left: 0; right: 0; top: .8rem; height: 1px;
  background: var(--ds-ink); transform-origin: left; }
.ds-site .ctls-fact-band > div, .ds-site .ctls-fact-band > div:first-child { position: relative; text-align: left;
  border: 0; border-left: 1px solid var(--ds-line); padding: .2rem 1.4rem .4rem; }
.ds-site .ctls-fact-band > div:last-child { border-right: 1px solid var(--ds-line); }
.ds-site .ctls-fact-band > div::before, .ds-site .ctls-fact-band > div:last-child::after { content: ""; position: absolute;
  top: calc(-1.9rem + .8rem - 7px); left: -1px; width: 1.5px; height: 14px; background: var(--ds-ink); transform: rotate(45deg); }
.ds-site .ctls-fact-band > div:last-child::after { left: auto; right: -1px; }
.ds-site .ctls-fact-band .fact-value { font-weight: 300; font-size: clamp(2.4rem, 4vw, 3.4rem); letter-spacing: -.04em;
  color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.ds-site .ctls-fact-band .fact-label { color: var(--ds-muted); font-size: .88rem; max-width: 22ch; }
.ds-site .ctls-fact-band.is-armed::before { transition: transform 1s cubic-bezier(.6,0,.3,1); }
.ds-site .ctls-fact-band.is-armed:not(.is-drawn)::before { transform: scaleX(0); }
.ds-site .ctls-fact-band.is-armed > div { transition: opacity .5s ease; transition-delay: calc(.25s + var(--i, 0) * .15s); }
.ds-site .ctls-fact-band.is-armed:not(.is-drawn) > div { opacity: 0; }
@media (max-width: 860px) {
  .ds-site .ctls-fact-band > div:nth-child(n+3) { border-top: 0; margin-top: 1.6rem; }
  .ds-site .ctls-fact-band > div:nth-child(n+3)::before { display: none; }
  .ds-site .ctls-fact-band > div:nth-child(2) { border-right: 1px solid var(--ds-line); }
  .ds-site .ctls-fact-band > div:nth-child(2)::after { content: ""; position: absolute; top: calc(-1.9rem + .8rem - 7px);
    right: -1px; width: 1.5px; height: 14px; background: var(--ds-ink); transform: rotate(45deg); }
}
/* Handy: senkrechte Maßkette am linken Rand, ein Schrägstrich je Kennzahl */
@media (max-width: 560px) {
  .ds-site .ctls-fact-band { display: block; padding: 0 0 0 1.4rem; margin-left: .4rem; }
  .ds-site .ctls-fact-band::before { left: 0; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; }
  .ds-site .ctls-fact-band.is-armed:not(.is-drawn)::before { transform: scaleY(0); }
  .ds-site .ctls-fact-band > div, .ds-site .ctls-fact-band > div:first-child, .ds-site .ctls-fact-band > div:last-child,
  .ds-site .ctls-fact-band > div:nth-child(2), .ds-site .ctls-fact-band > div:nth-child(n+3) {
    border: 0; margin: 0; padding: 0 0 1.4rem; }
  .ds-site .ctls-fact-band > div::before, .ds-site .ctls-fact-band > div:nth-child(n+3)::before { display: block;
    top: .9rem; left: calc(-1.4rem - 1px); }
  .ds-site .ctls-fact-band > div:last-child::after, .ds-site .ctls-fact-band > div:nth-child(2)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ds-site .ctls-fact-band.is-armed::before, .ds-site .ctls-fact-band.is-armed > div { transition: none; } }

/* Partnerlogos im Netzwerk-Abschnitt: ruhige Reihe, einheitlich gedämpft */
/* Die Logodateien sind weiße Kacheln mit viel Rand: multiply lässt das Weiß im Abschnittsgrund
   verschwinden, das Raster verteilt sie über die volle Breite */
.ds-site .ctls-netzlogos { list-style: none; margin: 2.2rem 0 2.4rem; padding: 0; display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: center; gap: 1.5rem 2rem; }
.ds-site .ctls-netzlogos li { margin: 0; }
.ds-site .ctls-netzlogos img { display: block; width: 100%; height: 96px; object-fit: contain;
  mix-blend-mode: multiply; filter: grayscale(1) contrast(1.1); opacity: .8; }
@media (max-width: 900px) { .ds-site .ctls-netzlogos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ds-site .ctls-netzlogos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-site .ctls-netzlogos img { height: 80px; } }

/* Adresse als Schriftfeld: Feldname in Mono wie im Fuß, Haarlinien */
.ds-site .ctls-adresse { margin: 1.4rem 0 1.6rem; max-width: 34rem; border-top: 1px solid var(--ds-ink); }
.ds-site .ctls-adresse > div { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--ds-line); }
.ds-site .ctls-adresse dt { font-family: var(--ds-mono); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ds-muted); padding-top: .2rem; }
.ds-site .ctls-adresse dd { margin: 0; color: var(--ds-ink); line-height: 1.5; }
.ds-site .ctls-adresse a { color: var(--ds-ink); text-decoration: none; }
.ds-site .ctls-adresse a:hover { color: var(--ds-blau); }
@media (max-width: 560px) { .ds-site .ctls-adresse > div { grid-template-columns: 1fr; gap: .2rem; } }

/* Zwischenüberschrift „Vor Ort“/„Online“: blaue Textzeile wie die Dachzeile über dem Titel, keine Pille */
.ds-site .ctls-sec-subhead { gap: .8rem; align-items: baseline; }
.ds-site .ctls-sec-subhead > span { background: none; border-radius: 0; padding: 0; font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; color: var(--ds-muted); }

/* ============================================================
   KOPF – bestehendes Markup (global-topbar/-header), nur umgestaltet.
   Megamenü, Warenkorb und Burger bleiben die alten, JS unverändert.
   Oberkante als Kennzeile, Navigation mit Maßlinie statt Pill/Schatten.
   ============================================================ */
.ds-site .global-header-topbar { background: var(--ds-dunkel); }
.ds-site .gh-left, .ds-site .gh-top-right a { font-family: var(--ds-mono); font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; }
.ds-site .gh-left .gh-phone, .ds-site .gh-phone-link { color: #fff; font-weight: 400; }
.ds-site .gh-dot { color: rgba(255,255,255,.35); }
.ds-site .gh-hours { color: #fff; font-weight: 400; }
.ds-site .gh-top-right a:hover, .ds-site .gh-phone-link:hover, .ds-site .gh-phone-link:hover .gh-phone { color: #fff;
  text-decoration: underline; text-decoration-color: var(--ds-blau); text-underline-offset: .35em; }

.ds-site .global-header-mainbar { border-bottom: 1px solid var(--ds-line); transition: border-color .25s ease; }
.ds-site.has-scrolled .global-header-mainbar { box-shadow: none; border-bottom-color: var(--ds-ink); }

.ds-site .gh-mainnav > a, .ds-site .gh-menu-item.has-mega > a, .ds-site .gh-menu-item.has-mini > a {
  font-family: var(--font-heading); font-weight: 400; font-size: 1.02rem; color: var(--ds-muted); letter-spacing: -.005em; }
.ds-site .gh-mainnav > a:hover, .ds-site .gh-mainnav > a.active,
.ds-site .gh-menu-item.has-mega > a:hover, .ds-site .gh-menu-item.has-mega.is-active > a, .ds-site .gh-menu-item.has-mega > a.open,
.ds-site .gh-menu-item.has-mini > a:hover, .ds-site .gh-menu-item.has-mini.is-active > a, .ds-site .gh-menu-item.has-mini > a.open {
  color: var(--ds-ink); font-weight: 400; }
/* Maßlinie unter dem Punkt: eckig, auf Textbreite, blau nur hier */
.ds-site .gh-mainnav > a::after, .ds-site .gh-menu-item.has-mega > a::after, .ds-site .gh-menu-item.has-mini > a::after {
  left: .85rem; right: .85rem; bottom: -1px; border-radius: 0; background: var(--ds-blau); }

.ds-site .gh-btn-primary { display: inline-flex; align-items: center; gap: .5em; border-radius: 6px; background: var(--ds-blau);
  font-family: var(--font-body); font-weight: 500; font-size: .92rem; padding: .62em 1.05em; }
.ds-site .gh-btn-primary::after { content: "→"; transition: transform .2s ease; }
.ds-site .gh-btn-primary:hover { background: var(--ds-blau-d); }
.ds-site .gh-btn-primary:hover::after { transform: translateX(3px); }

/* Megamenü: Blatt unter der Leiste, Haarlinien statt Schatten und Karten */
.ds-site .gh-megamenu { box-shadow: none; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-ink); }
.ds-site .gh-mega-inner { padding-top: 2rem; padding-bottom: 2.2rem; }
.ds-site .gh-mega-column, .ds-site .gh-mega-group { border-left-color: var(--ds-line); }
.ds-site .gh-mega-headlink h4 { font-family: var(--font-heading); font-weight: 500; font-size: 1rem; color: var(--ds-ink); }
.ds-site .gh-mega-headlink:hover h4 { color: var(--ds-blau); }
.ds-site .gh-mega-column.is-active .gh-mega-headlink h4 { color: var(--ds-blau); }
.ds-site .gh-mega-col-head { padding-bottom: .55rem; border-bottom: 1px solid var(--ds-ink); margin-bottom: .7rem; }
.ds-site .gh-mega-column ul { gap: .1rem; }
.ds-site .gh-mega-column ul li a { font-size: .84rem; color: var(--ds-muted); padding: .18rem 0; white-space: normal; }
.ds-site .gh-mega-column ul li a:hover { color: var(--ds-blau); }
/* Rechte Spalte: keine Bereiche, sondern Seiten-Tipps – leise abgesetzt als graue
   Randzone über die volle Menühöhe (negativer Rand = Innenabstand von .gh-mega-inner) */
.ds-site .gh-mega-cta-stack { gap: 1.4rem; width: 13.5rem; margin: -2rem 0 -2.2rem 1.5rem; padding: 2rem 1.5rem 2.2rem;
  background: var(--ds-grau); align-self: stretch; box-shadow: 50vw 0 0 var(--ds-grau); }
/* bis an den rechten Bildschirmrand (Schatten), Überstand abgeschnitten */
.ds-site .gh-megamenu { overflow: hidden; }
.ds-site .gh-mega-cta-card { width: auto; margin: 0; padding: .55rem 0 0; background: none; border: 0;
  border-top: 1px solid var(--ds-ink); border-radius: 0; gap: .35rem; }
.ds-site .gh-cta-eyebrow { font-family: var(--ds-mono); font-weight: 400; font-size: .66rem; letter-spacing: .05em;
  color: var(--ds-muted); margin: 0 0 .2rem; }
.ds-site .gh-cta-headline { font-family: var(--font-heading); font-weight: 500; font-size: .95rem; color: var(--ds-ink); }
.ds-site .gh-cta-body { font-size: .8rem; color: var(--ds-muted); }
/* kleiner, ruhiger Umrandungsknopf (Radius wie alle Knöpfe) */
.ds-site .gh-cta-link { font-size: .76rem; font-weight: 500; color: var(--ds-ink); margin-top: .45rem; padding: .28rem .6rem;
  border: 1px solid rgba(14,17,22,.35); border-radius: 6px; background: #fff; }
.ds-site .gh-cta-link:hover { color: var(--ds-blau); border-color: var(--ds-blau); }

/* Wissen-Klappmenü */
.ds-site .gh-mini-megamenu { border-radius: 0; box-shadow: none; padding: 0; border: 1px solid var(--ds-line);
  border-top: 1px solid var(--ds-ink); border-bottom-color: var(--ds-ink); }
.ds-site .gh-mini-link { border-radius: 0; padding: .85rem 1.1rem .9rem; border-top: 1px solid var(--ds-line); }
.ds-site .gh-mini-link:first-child { border-top: 0; }
.ds-site .gh-mini-link:hover, .ds-site .gh-mini-link:focus-visible { background: var(--ds-grau); }
.ds-site .gh-mini-title { font-family: var(--font-heading); font-weight: 500; color: var(--ds-ink); }
.ds-site .gh-mini-link:hover .gh-mini-title { color: var(--ds-blau); }
.ds-site .gh-mini-sub { color: var(--ds-muted); }

.ds-site #globalOverlay { background: rgba(13,23,36,.28); }

/* Burger + Klappmenü (bis 1180 px) */
.ds-site .menu-toggle span { border-radius: 0; background: var(--ds-ink); height: 1.5px; }
@media (max-width: 1180px) {
  .ds-site .menu-overlay { background: #fff; }
  .ds-site .menu-overlay.open { overflow-y: auto; padding-bottom: 2rem; }
  .ds-site .menu-accordion { border-top: 1px solid var(--ds-ink); }
  .ds-site .menu-btn { font-family: var(--font-heading); font-weight: 400; font-size: 1.12rem; color: var(--ds-ink);
    padding: .85rem .1rem; border-bottom-color: var(--ds-line); }
  .ds-site .menu-btn .arrow { color: var(--ds-blau); }
  .ds-site .menu-btn.active { color: var(--ds-blau); }
  .ds-site .submenu { padding: .3rem 0 .8rem 1rem; border-bottom: 1px solid var(--ds-line); }
  .ds-site .submenu a { color: var(--ds-muted); font-size: .95rem; padding: .45rem .1rem; }
  .ds-site .submenu a:first-child { font-family: var(--ds-mono); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ds-ink); }
  .ds-site .submenu a:hover { color: var(--ds-blau); }
}

/* ============================================================
   FUSS als Schriftfeld: Felder mit Haarlinien, Feldnamen in Mono
   wie im Zeichnungskopf. Auf dem Handy derselbe Fuß im Fluss statt
   der festen Leiste – das Schriftfeld hat Kontakt und Rechtliches.
   ============================================================ */
/* Linie über die volle Breite oben am Fuß – trennt auch dann, wenn darüber ein weißer Abschnitt endet */
.ds-site .ctls-footer { border-top: 1px solid rgba(14,17,22,.16); color: var(--ds-text); }
.ds-site .footer-inner { max-width: var(--max-width, 1350px); padding: clamp(2.5rem, 5vw, 4rem) var(--ds-gutter) 2rem; }
/* nur innere Feldgrenzen – außen offen, sonst wird es ein Kasten */
.ds-site .footer-top { gap: 0; border-top: 0; border-bottom: 1px solid var(--ds-line); }
.ds-site .footer-col { border-left: 1px solid var(--ds-line); padding: .8rem 1.2rem 1.6rem; }
.ds-site .footer-col--brand { border-left: 0; padding-left: 0; }
.ds-site .footer-col h4 { font-family: var(--ds-mono); font-weight: 400; font-size: .68rem; letter-spacing: .05em;
  color: var(--ds-muted); margin: 0 0 1rem; }
.ds-site .footer-col ul { gap: .35rem; }
.ds-site .footer-col ul li a, .ds-site .footer-contact-link { color: var(--ds-ink); font-size: .92rem; }
.ds-site .footer-col ul li a:hover, .ds-site .footer-contact-link:hover { color: var(--ds-blau); }
.ds-site .footer-contact-link svg, .ds-site .footer-contact-link:hover svg { color: var(--ds-blau); }
.ds-site .footer-brand-name { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: var(--ds-ink); }
.ds-site .footer-brand-tag { font-family: var(--ds-mono); font-weight: 400; font-size: .68rem; letter-spacing: .05em; color: var(--ds-muted); }
.ds-site .footer-brand-addr { color: var(--ds-text); font-size: .92rem; }
.ds-site .footer-award-btn { border-radius: 0; }
.ds-site .footer-award-btn:hover { transform: none; box-shadow: none; }
.ds-site .footer-award-btn img { opacity: 1; max-height: 64px; }
.ds-site .footer-sep { display: none; }
.ds-site .footer-bottom { padding: 1.6rem 0 0; }
.ds-site .footer-partner-logos { gap: 2.2rem; }
.ds-site .footer-partner-logos img { height: 28px; }
.ds-site .footer-social a, .ds-site .footer-copy, .ds-site .footer-legal a { font-family: var(--ds-mono); font-weight: 400; font-size: .68rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ds-muted); }
.ds-site .footer-social a:hover, .ds-site .footer-legal a:hover { color: var(--ds-blau); }
.ds-site .footer-legal { gap: .5rem 1.1rem; }
.ds-site .footer-lightbox img { border-radius: 0; }
.ds-site .footer-lightbox-close { border-radius: 0; }

@media (max-width: 1060px) {
  .ds-site .desktop-footer { display: block; }
  .ds-site .mobile-footer { display: none; }
  body.ds-site { padding-bottom: 0; }
  .ds-site footer.ctls-footer { background: #fff; }
}
/* Eigenes Raster statt der alten Umbrüche (dort spannt die letzte Spalte 2/4) */
@media (max-width: 1100px) {
  .ds-site .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-site .footer-top .footer-col--brand { grid-column: 1 / -1; border-bottom: 1px solid var(--ds-line); padding-bottom: 1.6rem; }
  .ds-site .footer-top .footer-col:last-of-type { grid-column: auto; }
  .ds-site .footer-top .footer-col:nth-child(2) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .ds-site .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-site .footer-top .footer-col:last-of-type { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--ds-line); }
  .ds-site .footer-partner-logos { gap: 1.2rem 1.6rem; }
  .ds-site .footer-partner-logos img { height: 24px; }
}
@media (max-width: 400px) {
  .ds-site .footer-top { grid-template-columns: 1fr; }
  .ds-site .footer-top .footer-col { border-left: 0; padding-left: 0; }
  .ds-site .footer-top .footer-col:nth-child(n+3) { border-top: 1px solid var(--ds-line); }
}

/* ============================================================
   HINWEIS-KARTEN am linken Rand, mittig gestapelt (ds-karten.php):
   nächster Termin und/oder Newsletter. Zu = nach links geschoben,
   nur die blaue Lasche schaut heraus (ds-rahmen.js).
   ============================================================ */
.ds-karten { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 9000; display: flex; flex-direction: column;
  align-items: flex-start; gap: .75rem; pointer-events: none; }
/* Mindesthöhe = Höhe der Lasche (Zahl/Symbol + senkrechter Text), sonst steht sie über */
.ds-karte { position: relative; width: 290px; min-height: 8.25rem; display: flex; background: #fff; border: 1px solid var(--ds-line);
  border-left: 0; border-top: 2px solid var(--ds-blau); border-radius: 0 8px 8px 0;
  touch-action: pan-y; pointer-events: auto; font-family: var(--font-body); will-change: transform; }
/* Schatten als eigene Ebene: nur Deckkraft animieren (billig), kein box-shadow-Übergang */
.ds-karte::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  box-shadow: 0 10px 30px rgba(13,23,36,.14); transition: opacity .3s ease; }
.ds-karte.is-zu::before { opacity: 0; }
/* Herein weich auslaufend, hinaus zügig und gleichmäßig */
.ds-karte.is-bereit { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ds-karte.is-bereit.is-zu { transition: transform .38s cubic-bezier(.4,0,.2,1); }
.ds-karte.is-zu { transform: translateX(-100%); }
.ds-karte.is-ziehen { transition: none; }
.ds-karte .ctls-next-kurs-link { flex: 1; min-width: 0; } /* sonst schiebt die einzeilige Ortszeile Link und Pfeil über die Karte hinaus */
.ds-karte .ctls-next-kurs-link { display: flex; align-items: center; text-decoration: none; }
.ds-karte .ctls-next-kurs-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ds-karte .ctls-next-kurs-close { position: absolute; top: .5rem; right: .5rem; z-index: 1; width: 20px; height: 20px; border: 0;
  padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ds-site .ctls-next-kurs-link { background: transparent; color: var(--ds-ink); padding: .8rem 2.2rem .85rem 1.1rem; gap: .7rem;
  border-radius: 0 8px 8px 0; }
.ds-site .ctls-next-kurs-link:hover { background: var(--ds-grau); color: var(--ds-ink); }
.ds-site .ctls-next-kurs-pulse { display: none; }
.ds-site .ctls-next-kurs-body { gap: .25rem; }
.ds-site .ctls-next-kurs-eyebrow { font-family: var(--ds-mono); font-weight: 400; font-size: .64rem; letter-spacing: .05em; color: var(--ds-muted); }
.ds-site .ctls-next-kurs-days { font-family: var(--font-heading); font-weight: 400; font-size: .95rem; color: var(--ds-ink); }
.ds-site .ctls-next-kurs-days strong { font-weight: 500; font-size: 1.25rem; }
.ds-site .ctls-next-kurs-name { font-size: .82rem; line-height: 1.3; color: var(--ds-ink); white-space: normal; }
.ds-site .ctls-next-kurs-meta { font-family: var(--ds-mono); font-size: .64rem; letter-spacing: .03em; color: var(--ds-muted);
  line-height: 1.4; } /* darf umbrechen – abgeschnittene Angaben helfen niemandem */
.ds-site .ctls-next-kurs-arrow { color: var(--ds-blau); }
.ds-site .ctls-next-kurs-link:hover .ctls-next-kurs-name { color: var(--ds-blau); }
/* „Schließen“ schiebt nur weg – Pfeil nach links statt Kreuz wäre missverständlich, das X bleibt */
.ds-site .ctls-next-kurs-close { border-radius: 6px; background: none; color: var(--ds-muted); }
.ds-site .ctls-next-kurs-close:hover { background: var(--ds-grau); color: var(--ds-ink); }

/* Lasche: hängt rechts am Einschub, sichtbar nur im Zu-Zustand */
.ds-kurs-lasche { position: absolute; left: 100%; top: -2px; bottom: -1px; width: 3rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .45rem; padding: .7rem 0; border: 0; border-radius: 0 8px 8px 0;
  background: var(--ds-blau); color: #fff; cursor: pointer; opacity: 0; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,79,158,.25); transition: opacity .25s ease .15s, width .2s ease; }
.ds-karte.is-zu .ds-kurs-lasche { opacity: 1; pointer-events: auto; }
.ds-kurs-lasche:hover { width: 3.3rem; }
.ds-kurs-lasche:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.ds-kurs-lasche__zahl { font-family: var(--font-heading); font-weight: 600; font-size: 1.45rem; line-height: 1; }
/* Lesbarkeit: Hausschrift halbfett statt winziger Mono, etwas größer */
.ds-kurs-lasche__text { font-family: var(--font-body); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: none;
  writing-mode: vertical-rl; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ds-karte.is-bereit { transition: none; } }
/* Lasche der Newsletter-Karte: Briefsymbol statt Zahl */
.ds-kurs-lasche__brief { width: 19px; height: 19px; }
@media (max-width: 1060px) { .ds-karte { width: 260px; } }
/* Auf dem Handy gar nicht – dort verdeckt jede Einblendung den Inhalt */
@media (max-width: 760px) { .ds-karten { display: none; } }