/* simply-logistic.com — Nachbau der Divi-Seite ohne WordPress.
   Maße, Farben und Schriften sind am Original gemessen (werkzeug/bauplan.mjs,
   28.09.2026), danach nach Review (REVIEW-STARTSEITE-2026-09-28.md) auf Best
   Practice gebracht, Rot #e9474c bleibt als Markenfarbe unverändert.
   Schriften: dieselben Dateien wie im Original (et-fonts/Montserrat-Regular
   und -Bold), als WOFF2 verkleinert und als EINE Familie mit zwei Schnitten
   angemeldet. Bis 500 greift Regular, ab 600 Bold; nichts wird künstlich
   nachgefettet (Divi setzte „Regular“ mit Stärke 700 und ließ den Browser
   fetten). */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("schrift/montserrat-regular.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("schrift/montserrat-bold.woff2") format("woff2"); }

:root {
  --rot: #e9474c;
  --navy: #2f4858;
  --blau: #012863;
  --petrol: #003c4b;
  --grau: #f9f9f9;
  --grau-blau: #d5dee5;
  --titel: #333;
  --text: #4b4d52;
  --weiss: #fff;
  /* Schriftstufen (Review 28.09.2026): jede Größe auf der Seite ist eine davon */
  --fs-s: 14px;     /* Oberleiste, Knöpfe, Tabellen, Bildunterschriften */
  --fs-m: 16px;     /* Fließtext */
  --fs-l: 18px;     /* Kartentitel, h4 */
  --fs-xl: 22px;    /* h3, h2 auf dem Handy */
  --fs-2xl: 28px;   /* h1 auf dem Handy, h2 in Textseiten */
  --fs-3xl: 36px;   /* h2 */
  --fs-4xl: 48px;   /* h1, Zähler */
  --fs-5xl: 72px;   /* Startseiten-Held (1,5 × 48) */
  --schrift: "Montserrat", Helvetica, Arial, Lucida, sans-serif;
  --fokus: var(--blau);            /* auf Weiß 14,1:1, auf Rot 3,68:1 */
  --schatten: 0 5px 83px rgba(40, 40, 40, .12);
  --rahmen-feld: #868c94;          /* 3,39:1 auf Weiß */
  --fehler: #c62828;               /* 5,62:1 auf Weiß */
  --breite: 1170px;
  --rand: max(20px, (100% - var(--breite)) / 2);
  --kurve: cubic-bezier(.23, 1, .32, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; font: 400 var(--fs-m)/1.6 var(--schrift); color: var(--text); background: var(--weiss); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { max-width: 100%; height: auto; display: block; }
html, body { overflow-x: clip; }   /* Einschieben von der Seite erzeugt kein Querscrollen */

/* Einblenden beim Hineinscrollen (28.09.2026, statt der Divi-Werte): einmal, sobald
   ein Element gut im Bild ist; 500 ms mit --kurve (schnell an, weich aus), Weg 24 px
   oder Größe 0,96 (--anim-von), Gruppen im Abstand von 60 ms (--anim-verz, setzt s.js).
   Nur mit JS (s-frueh.js setzt .anim-an). Bei „Bewegung reduzieren“ nur eine kurze
   Überblendung ohne Weg (.anim-ruhig). */
.anim-an [data-anim]:not(.ist-da) { opacity: 0; transform: var(--anim-von, none); }
.anim-an [data-anim].ist-da { animation: anim-rein 500ms var(--kurve) var(--anim-verz, 0ms) both; }
@keyframes anim-rein { from { opacity: 0; transform: var(--anim-von, none); } to { opacity: 1; transform: none; } }
.anim-ruhig [data-anim]:not(.ist-da) { transform: none; }
.anim-ruhig [data-anim].ist-da { animation: anim-ruhig 200ms ease-out var(--anim-verz, 0ms) both !important; }
@keyframes anim-ruhig { from { opacity: 0; } to { opacity: 1; } }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--titel); font-family: var(--schrift); font-weight: 700; line-height: 1.2; padding-bottom: 10px; text-wrap: balance; }
/* Typografie 29.09.2026: große Überschriften enger gesetzt (Zeilenabstand 1,15, Laufweite −0,01 em), damit zweizeilige Titel geschlossen wirken */
h1, h2 { line-height: 1.15; letter-spacing: -0.01em; }
p, li, blockquote, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, h5, h6, p, li, td, th { overflow-wrap: break-word; }
@media (max-width: 359px) { p, li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; } }   /* Fließtext nur auf sehr schmalen Handys trennen (sonst unruhiger Rand) */
@media (max-width: 980px) { h1, h2, h3, h4, h5, h6 { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; } }   /* „Datenschutzerklärung“ bei 390 px; nur Wörter ab 10 Zeichen, je Teil mind. 4 (sonst „Con-tainer“, „Ein-fache“) */
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-l); }
h4 { font-size: var(--fs-s); }
p { margin: 0; padding-bottom: 1em; }
p:last-child { padding-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
@media (min-width: 981px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-xl); }
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--weiss); color: var(--titel); font-weight: 700; border-radius: 5px; }
.sprung:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.held, .schiff, .fuss { --fokus: #fff; }   /* auf Dunkelblau 14,1:1, Petrol 12,0:1, Navy 9,6:1 */
.symbol { width: 1em; height: 1em; flex: none; }

.zeile { width: min(var(--breite), 100% - 40px); margin-inline: auto; }
@media (min-width: 981px) { .zeile { width: min(var(--breite), 81.25%); } }
.zeile--breit { width: min(1290px, 100% - 40px); }
@media (min-width: 981px) { .zeile--breit { width: min(1290px, 89.6%); } }
.zeile--schmal { width: min(1080px, 80%); }
@media (min-width: 981px) { .zeile--schmal { width: min(1080px, 75%); } }

/* ── Knöpfe ─────────────────────────────────────────────────────── */
.knopf { display: inline-block; padding: 17px 38px; border: 2px solid var(--rot); border-radius: 5px; background: var(--rot); color: var(--weiss); font: 700 var(--fs-s)/1.7 var(--schrift); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s ease-out; }
.knopf:active { transform: scale(.97); }   /* Rückmeldung beim Drücken */
.knopf:hover { background: #d63a3f; border-color: #d63a3f; }
.knopf--rand { background: transparent; border-color: var(--weiss); }   /* gleiche Höhe wie der volle Knopf (Rahmen hat beide) */
.knopf--rand:hover { background: rgba(255, 255, 255, .12); border-color: var(--weiss); }
.knopf--klein { font-size: var(--fs-s); padding: 15px 25px; }
@media (min-width: 981px) { .knopf { font-size: var(--fs-s); } .knopf--klein { font-size: var(--fs-s); } }
.knoepfe { display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: center; }

/* ── Kopf ───────────────────────────────────────────────────────── */
.kopf { position: relative; z-index: 50; background: var(--rot); color: var(--weiss); }
.oben { display: none; border-bottom: 2px solid rgba(255, 255, 255, .85); }
.oben__zeile { display: flex; align-items: center; gap: 24px; padding: 17px 0 14px; }
.oben__kontakt { white-space: nowrap; display: inline-flex; align-items: center; gap: 22px; font-family: var(--schrift); font-size: var(--fs-s); font-weight: 700; line-height: 1.2; text-decoration: none; margin-right: 18px; }
.oben__kontakt img { width: 18px; height: 18px; }
.oben__nav { display: flex; gap: 22px; margin-left: auto; font-size: var(--fs-s); font-weight: 700; }
.oben__nav a, .sozial a { text-decoration: none; }
.oben__nav a:hover { opacity: .8; }
.sozial { display: flex; gap: 20px; align-items: center; margin-left: 12px; }
.sozial .symbol { width: 17px; height: 17px; display: block; }
.kopf__zeile { display: flex; align-items: center; gap: 24px; padding: 35px 0 34px; }
.kopf__logo { margin-right: auto; }
.kopf__logo img { width: 220px; }
.kopf__knopf { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; background: none; color: var(--weiss); cursor: pointer; }
.kopf__angebot { white-space: nowrap; }
.kopf__knopf .symbol { width: 30px; height: 30px; }
.kopf__angebot { display: none; }
/* Handy: Telefon neben dem Menü (29.09.2026); am Desktop steht die Nummer in der oberen Leiste */
.kopf__tel { display: grid; place-items: center; width: 44px; height: 44px; }
.kopf__tel img { width: 22px; height: 22px; }
.nav { display: none; }
.nav a { text-decoration: none; }

/* Handy/Tablet: Menü als weiße Liste unter dem Kopf (wie Divi) */
@media (max-width: 980px) {
  .kopf__zeile { padding: 42px 0 92px; position: relative; }
  .kopf__knopf { align-self: flex-start; margin-top: 6px; }
  .kopf__tel { align-self: flex-start; margin-top: 6px; }
  .nav.offen { display: block; position: absolute; top: calc(100% - 95px); left: 0; right: 0; max-height: calc(100vh - 110px); overflow-y: auto; background: var(--weiss); border-top: 3px solid var(--weiss); padding: 5%; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); }
  .nav > ul > li > a { display: block; padding: 10px 5%; color: var(--titel); font-size: var(--fs-s); font-weight: 600; border-bottom: 1px solid rgba(0, 0, 0, .03); }
  .nav__mit > a { background: rgba(0, 0, 0, .03); }
  .nav__mit > .symbol { display: none; }
  .nav ul ul { padding-left: 20px; }
  .nav ul ul a { display: block; padding: 10px 5%; color: var(--titel); font-size: var(--fs-s); font-weight: 600; border-bottom: 1px solid rgba(0, 0, 0, .03); }
  .no-js .nav, .nav:not([hidden]).ohne-js { display: block; }
}
@media (min-width: 981px) {
  .oben { display: block; }
  .kopf__knopf { display: none !important; }
  .kopf__tel { display: none; }
  .kopf__zeile { padding: 35px 0 34px; }
  .kopf__logo img { width: 220px; }
  .kopf__angebot { display: inline-block; }
  .nav { display: block; }
  .nav > ul { display: flex; gap: 22px; }
  .nav > ul > li { position: relative; display: flex; align-items: center; gap: 4px; padding: 16px 0; }
  .nav > ul > li > a { white-space: nowrap; font-size: var(--fs-s); font-weight: 700; line-height: 1; color: var(--weiss); transition: opacity .3s; }
  .nav > ul > li > a:hover, .nav__mit:hover > a, .nav__mit:focus-within > a { opacity: .7; }
  .nav__mit > .symbol { width: 16px; height: 16px; }
  .nav ul ul { position: absolute; top: 100%; left: -10px; width: 240px; padding: 20px 0; background: var(--weiss); border-top: 3px solid var(--weiss); box-shadow: 0 2px 5px rgba(0, 0, 0, .1); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .2s, transform .2s, visibility 0s linear .2s; }
  .nav__mit:hover > ul, .nav__mit:focus-within > ul { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__mit.zu > ul { opacity: 0; visibility: hidden; }   /* nach Escape, bis Maus/Fokus das Menü verlassen */
  .nav > ul > .nav__sprache { display: none; }
  .nav ul ul a { display: block; padding: 6px 40px 6px 40px; color: var(--titel); font-size: var(--fs-s); font-weight: 400; line-height: 2; }
  .nav ul ul a:hover { background: rgba(0, 0, 0, .03); }
}

/* ── Startseite: Held ───────────────────────────────────────────── */
.held { background: linear-gradient(90deg, var(--blau) 0%, rgba(255, 255, 255, 0) 100%), var(--held-bild) center / cover no-repeat; color: var(--weiss); padding: 120px 20px 259px; }
/* Kontrast (Review Skills #1): Am Handy und bis 1279 px lag der weiße Text rechts auf der hellen Fassade
   (bis 1,5:1). Dort bleibt das Blau unter der ganzen Textbreite deckend genug. */
@media (max-width: 980px) { .held { background-image: linear-gradient(90deg, rgba(1, 40, 99, .92) 0%, rgba(1, 40, 99, .7) 100%), var(--held-bild-m, var(--held-bild)); } }   /* Handy-Fassung 1000 px (bau.mjs) */
@media (min-width: 981px) and (max-width: 1279px) { .held { background-image: linear-gradient(90deg, var(--blau) 0%, rgba(1, 40, 99, .75) 55%, rgba(1, 40, 99, 0) 100%), var(--held-bild); } }
.held__innen { width: min(1290px, 100%); margin-inline: auto; }
.held__marke { font-size: var(--fs-l); font-weight: 700; line-height: 1.2; padding-bottom: 20px; }
.held h1 { color: var(--weiss); max-width: 700px; padding-bottom: 25px; font-size: var(--fs-3xl); }   /* Handy: deutlich über der Firmenzeile (18) */
@media (max-width: 359px) { .held h1 { font-size: var(--fs-2xl); } }
.held .knoepfe { gap: 25px 30px; }
.held .knoepfe { flex-direction: column; align-items: flex-start; }
@media (min-width: 981px) {
  .held { padding: 167px 0 307px; }
  .held__innen { width: min(1290px, 89.6%); }
  .held__marke { font-size: var(--fs-l); }
  .held h1 { font-size: var(--fs-5xl); }   /* einzige Stufe 72: der Held der Startseite */
  .held h1 { padding-bottom: 42px; }
  .held .knoepfe { flex-direction: row; }
}

/* Leiste mit drei Produkten, ragt in den Held (nur ab Tablet, wie Divi) */
.leiste { display: none; }
@media (min-width: 981px) {
  .leiste { display: block; padding-bottom: 120px; }
  .leiste__innen { width: min(1290px, 89.6%); margin: -139px auto 0; position: relative; background: var(--weiss); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5.5%; padding: 60px 2.8% 60px; border-bottom: 10px solid var(--rot); text-align: center; }
  .leiste__karte img { width: 120px; margin: 0 auto 20px; }
  .leiste__karte h2 { font-size: var(--fs-2xl); }
  .leiste__karte p { font-size: var(--fs-s); line-height: 1.6; }
  /* Karten führen zum Produkt (Nils 28.09.2026): Titel ist der Link, die ganze Karte die Klickfläche */
  .leiste__karte { position: relative; border-radius: 5px; transition: transform .2s var(--kurve); }
  .leiste__link { color: inherit; text-decoration: none; }
  .leiste__link::after { content: ""; position: absolute; inset: -20px; border-radius: 5px; }
  @media (hover: hover) and (pointer: fine) {
    .leiste__karte:hover { transform: translateY(-4px); }
    .leiste__karte:hover .leiste__link { color: var(--rot); }
  }
  .leiste__link:focus-visible { outline: none; }
  .leiste__karte:has(.leiste__link:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 12px; }
}

/* ── Abschnitte ─────────────────────────────────────────────────── */
.zwei { display: grid; gap: 30px; }
@media (min-width: 981px) { .zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5.5%; align-items: start; } }
.einfuehrung { padding: 25px 0 90px; }
.einfuehrung__bild { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.einfuehrung .text h2 { padding-bottom: 30px; }
.einfuehrung .knopf { margin-top: 20px; }
@media (min-width: 981px) { .einfuehrung { padding: 0 0 180px; } .einfuehrung .zwei { gap: 0; } .einfuehrung .text { padding: 0 0 0 55px; } }

.schiff { background: var(--petrol) var(--schiff-bild) center / cover no-repeat; color: var(--weiss); padding: 55px 0 60px; }
.schiff h2 { color: var(--weiss); }
.schiff__text { position: relative; max-width: 575px; padding-top: 55px; }
@media (min-width: 981px) { .schiff__text { max-width: min(575px, 45vw); } }   /* bei 1024 px nicht ins Schiff */
.schiff__form { position: absolute; left: -35px; top: 0; width: 66px; z-index: 0; }
.schiff__text > :not(.schiff__form) { position: relative; z-index: 1; }
.schiff__text p { color: var(--weiss); }
.schiff__text h2 { padding-bottom: 30px; }
.punkte { display: grid; gap: 8px; margin: 30px 0 50px; }
.punkte li { display: flex; gap: 12px; align-items: flex-start; }
.punkte .symbol { width: 14px; height: 14px; color: var(--rot); margin-top: 4px; }
.punkte strong { font-size: var(--fs-s); line-height: 1.3; font-weight: 700; }
.punkte a { color: inherit; text-decoration: none; padding-block: 3px; }   /* Produktnamen verlinkt (Abschlussprüfung: mehr Wege zum Produkt) */
.punkte a:hover strong, .punkte a:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 981px) {
  .schiff { padding: 55px 0 60px; min-height: 1006px; }
  /* Reihenfolge wie im Original: spaltenweise (DOM = Lesereihenfolge am Handy); unter 1280 px
     zwei Spalten, sonst trennt „Industrie-plattform-wagen“ dreizeilig */
  .punkte { grid-auto-flow: column; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .punkte strong { font-size: var(--fs-l); }
}
@media (min-width: 1280px) {
  .punkte { grid-template-rows: repeat(2, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
}

.palette { background: var(--grau); padding: 86px 0 0; }
.palette__titel { text-align: center; max-width: 480px; margin: 0 auto 50px; }
.palette__karten { display: grid; gap: 30px; position: relative; z-index: 1; }
.karte { background: var(--weiss); box-shadow: var(--schatten); display: flex; flex-direction: column; }
.karte img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.karte__text { padding: 50px clamp(24px, 8%, 50px) 20px; flex: 1; font-size: var(--fs-s); }   /* Innenabstand wächst mit der Karte (bei 1024 px war der Text nur 161 px breit) */
.karte__text h3 { padding-bottom: 10px; }
@media (max-width: 980px) { .karte__text { padding: 34px clamp(24px, 8%, 50px) 10px; } }
.karte .knopf { align-self: flex-end; margin: 20px clamp(24px, 8%, 30px) 45px 0; white-space: nowrap; max-width: calc(100% - 48px); padding-inline: clamp(20px, 3vw, 38px); }   /* bei 1024 px nicht an den Kartenrand */
@media (min-width: 981px) { .karte .knopf { margin-right: clamp(24px, 8%, 45px); } }
.haken li { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.haken .symbol { width: 20px; height: 20px; color: var(--rot); margin-top: 2px; }
.haken strong { font-size: var(--fs-s); line-height: 1.7; font-weight: 700; color: var(--titel); }
.haken--weiss strong, .schiff strong { color: var(--weiss); }
.karte .haken { margin-top: 24px; }
@media (min-width: 981px) {
  .palette { padding-top: 117px; }
  .palette__karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3%; }
}

.vorteile { background: var(--rot); color: var(--weiss); padding: 175px 0 159px; margin-top: -90px; }
.vorteile h2 { color: var(--weiss); }
.vorteile .text p { color: var(--weiss); }
.haken--weiss .symbol { color: var(--weiss); --haken-innen: var(--rot); }
.haken--zwei { display: grid; gap: 4px 30px; margin-top: 40px; }
@media (min-width: 640px) { .haken--zwei { grid-template-columns: repeat(2, minmax(0, max-content)); } }   /* darf bei 1024 px schrumpfen */
@media (min-width: 981px) {
  .vorteile { padding: 204px 0 189px; margin-top: -90px; }
  .zwei--text { grid-template-columns: 400px minmax(0, 575px); justify-content: space-between; }
}

.anfrage { background: linear-gradient(var(--rot) 0, var(--rot) 90px, var(--grau) 90px); padding: 0 0 78px; }
.anfrage__karte { background: var(--weiss); box-shadow: var(--schatten); padding: 20px; display: grid; gap: 30px; border-bottom: 3px solid var(--rot); position: relative; top: -1px; }
.anfrage__rot { background: var(--rot); color: var(--weiss); padding: 40px; }
.anfrage__rot h3 { color: var(--weiss); font-size: var(--fs-l); padding-bottom: 20px; }
@media (min-width: 981px) { .anfrage__rot h3 { font-size: var(--fs-2xl); } }
.anfrage__rot p { color: var(--weiss); }
@media (min-width: 981px) {
  .anfrage { background: linear-gradient(var(--rot) 0, var(--rot) 88px, var(--grau) 88px); padding-bottom: 70px; }
  .anfrage__karte { grid-template-columns: 317px minmax(0, 1fr); gap: 60px; padding: 50px 50px 50px; }
}

/* Formular: Fluent-Forms-Anmutung des Originals (Systemschrift, graue Felder) */
.formular { font-size: var(--fs-m); color: var(--text); }
.ff:not(.ff-wahl, .ff-einwilligung) > label:not(.sr), .ff-wahl legend { display: block; padding-bottom: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--titel); }
.ff-stern { color: var(--fehler); }
.ff-raster { display: grid; gap: 20px 15px; }
@media (min-width: 640px) { .ff-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.ff--ganz { grid-column: 1 / -1; }
.ff-zeile { display: grid; gap: 20px 15px; }
.ff-spalte { display: grid; gap: 20px; align-content: start; }
.ff-spalte:empty { display: none; }
@media (min-width: 640px) { .ff-zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ff-zeile:has(> .ff-spalte:empty) { grid-template-columns: 65fr 35fr; } }
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular select, .formular textarea { width: 100%; min-height: 39px; padding: 9px 15px; border: 1px solid var(--rahmen-feld); border-radius: 5px; background: var(--weiss); color: var(--titel); font: 400 var(--fs-m)/1.4 var(--schrift); }
.formular select { padding-block: 9px; }
/* Einzeilige Felder und Auswahllisten exakt gleich hoch (Nils 28.09.2026: Dropdown auf Höhe der Inputs) */
.formular input[type=text], .formular input[type=email], .formular input[type=tel], .formular select { box-sizing: border-box; height: 42px; min-height: 0; padding-block: 0; line-height: 40px; }
.formular textarea { min-height: 90px; resize: vertical; }
.formular ::placeholder { color: #868e96; opacity: 1; }
.formular input:focus-visible, .formular select:focus-visible, .formular textarea:focus-visible { outline: 3px solid var(--fokus); outline-offset: 1px; border-color: var(--fokus); }
.formular :is(input, select, textarea)[aria-invalid=true] { border-color: var(--fehler); border-width: 2px; }   /* Spezifität über .formular input[type=text] */
.ff-feldfehler { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; padding: 0; color: var(--fehler); font-size: var(--fs-s); font-weight: 700; }
.ff-feldfehler::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--fehler); color: var(--weiss); font-size: var(--fs-s); line-height: 1; }
.ff-wahl { border: 0; margin: 0; padding: 0; }
.ff-wahl legend { padding: 0 0 8px; }
.ff-wahl label { display: flex; gap: 6px; align-items: center; font-size: var(--fs-m); line-height: 1.8; }
.ff-einwilligung label { display: flex; gap: 10px; align-items: flex-start; max-width: 430px; font-size: var(--fs-m); line-height: 1.5; }
.ff-einwilligung input { margin-top: 5px; flex: none; }
.ff-einwilligung a { color: var(--titel); text-decoration: underline; text-underline-offset: 2px; }
.ff-datei label { display: block; padding-bottom: 6px; }
.ff-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ff-fehler { color: var(--fehler); font-weight: 700; margin-top: 16px; }
.ff-senden { text-align: right; margin-top: 24px; }
.ff-senden .knopf { cursor: pointer; }
.ff-senden .knopf:disabled { opacity: .6; cursor: progress; }

.ff-danke { font-size: var(--fs-m); }
/* Anfrageformular seit 29.09.2026: freiwillige Felder gekennzeichnet, Block „Ihr Vorhaben“ */
.ff-frei { font-weight: 400; color: var(--text); }
.ff-vorhaben { border: 0; margin: 0; padding: 20px; background: var(--grau); border-radius: 5px; }
.ff-vorhaben legend { float: left; width: 100%; padding: 0; font-size: var(--fs-s); font-weight: 700; color: var(--titel); }
.ff-vorhaben .ff-hilfe { clear: both; margin: 0 0 14px; padding-top: 4px; font-size: var(--fs-s); }
.ff-hinweis { margin: 0; font-size: var(--fs-s); }
.ff-hinweis a { color: var(--titel); text-decoration: underline; text-underline-offset: 2px; }

/* Kundenstimmen */
.stimmen { position: relative; width: min(1080px, 100% - 40px); margin: 70px auto 0; display: flex; align-items: center; gap: 10px; }
.stimmen__bahn { display: flex; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
.stimmen__bahn::-webkit-scrollbar { display: none; }
.stimme { flex: 0 0 100%; scroll-snap-align: start; margin: 0; padding: 0 25px; position: relative; text-align: center; }
@media (min-width: 981px) { .stimme { flex-basis: 50%; } }
.stimme blockquote { margin: 0; position: relative; }
.stimme blockquote p { text-align: left; font-size: var(--fs-l); line-height: 1.6; color: #6b6b6b; padding: 0; position: relative; z-index: 1; }   /* 5,06:1 auf #f9f9f9 (Original #9b9b9b: 2,64:1) */
.stimme blockquote::after { content: "\201C"; position: absolute; left: 0; top: 0; translate: -12% -18%; font: 700 150px/1 Georgia, serif; color: #ececec; z-index: 0; pointer-events: none; }   /* oben verankert: bei einzeiligen Zitaten lag es sonst über dem Namen */
.stimme figcaption { display: flex; align-items: center; gap: 15px; margin-top: 30px; text-align: left; position: relative; z-index: 1; }
.stimme figcaption img { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--rot); object-fit: contain; background: var(--weiss); }
.stimme strong { display: block; color: var(--titel); font-weight: 700; font-size: var(--fs-m); line-height: 1.2; padding-bottom: 8px; }
.stimme figcaption span { font-size: var(--fs-s); color: var(--text); }
.stimmen__pfeil { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #e5e5e5; color: var(--titel); display: grid; place-items: center; cursor: pointer; }
.stimmen__pfeil .symbol { width: 22px; height: 22px; }

.ueber { background: var(--rot); color: var(--weiss); display: grid; }
.ueber h2 { color: var(--weiss); }
.ueber__text { padding: 86px 20px 40px; }
.ueber__text p { color: var(--weiss); }
.ueber__text h2 { padding-bottom: 30px; }
.ueber__werte { display: grid; gap: 30px; margin: 30px 0 40px; text-align: center; }
.ueber__werte .symbol { width: 42px; height: 42px; margin: 0 auto 12px; }
.ueber__werte strong { display: block; font-size: var(--fs-s); line-height: 1.2; }
.ueber__bild { display: none; background: var(--ueber-bild) center / cover no-repeat; }
@media (min-width: 981px) {
  .ueber { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 120px; }
  .ueber__text { padding: 0 7% 34px 14%; max-width: 720px; justify-self: end; width: 100%; }
  .ueber__text > * { max-width: 518px; }
  .ueber__werte { max-width: 518px; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ueber__werte strong { font-size: var(--fs-l); }
  .ueber__bild { display: block; min-height: 624px; margin-bottom: 34px; }
}

.aktuelles { background: var(--grau-blau); padding: 50px 0; }
.aktuelles h2 { padding-bottom: 40px; }
.beitraege { display: grid; gap: 30px; align-items: stretch; }   /* Kartenunterkanten auf einer Linie */
@media (min-width: 768px) { .beitraege { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }   /* Startseite 3, schmale Spalten (Über uns) 2 wie im Original */
@media (min-width: 981px) { .aktuelles .beitraege { grid-template-columns: repeat(3, minmax(0, 1fr)); } }   /* bei 1024 px 3 statt 2 + 1 */
.beitrag-karte { background: var(--weiss); box-shadow: var(--schatten); }
.beitrag-karte__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.beitrag-karte__text { padding: 30px 30px 20px; }
.beitrag-karte h3 { font-size: var(--fs-m); font-weight: 700; line-height: 1.2; padding-bottom: 10px; }
.beitrag-karte h3 a { text-decoration: none; }
.beitrag-karte h3 a:hover { color: var(--rot); }
.beitrag-karte p { font-size: var(--fs-s); line-height: 1.6; }
@media (min-width: 981px) { .beitrag-karte h3 { font-size: var(--fs-l); } }
.aktuelles__mehr { text-align: center; padding-top: 50px; }
.aktuelles__mehr a { color: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; text-decoration: none; }
.aktuelles__mehr a:hover { color: var(--rot); }
@media (min-width: 981px) { .aktuelles { padding: 54px 0; } }

/* ── Fuß ────────────────────────────────────────────────────────── */
.fuss { background: var(--navy); color: var(--weiss); padding-top: 60px; font-size: var(--fs-s); }
.fuss h2 { color: var(--weiss); }
.fuss__kopf { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding-bottom: 30px; border-bottom: 2px solid var(--weiss); }
.fuss__firma { font-size: var(--fs-s); font-weight: 700; padding: 0; }
@media (min-width: 981px) { .fuss__firma { font-size: var(--fs-l); } }
.fuss__logo { width: 166px; }
.fuss__kontakt { display: grid; gap: 30px; padding: 30px 0 40px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.fuss__marke { font-size: var(--fs-m); font-weight: 700; padding-bottom: 12px; }
.fuss__gross { font-size: var(--fs-l); padding-bottom: 24px; white-space: nowrap; }   /* Mailadresse nicht an „-“ trennen */
.sozial--gross { margin: 0; gap: 34px; }
.sozial--gross .symbol { width: 28px; height: 28px; }
/* Social-Modul (Kontakt): wie im Original weiße Symbole mittig im Band. Die Modul-Regel
   für Listen (Punkte, Einzug) und die Textfarbe dürfen hier nicht greifen. */
.u-sozial .sozial { list-style: none; padding: 0; margin: 0; justify-content: var(--ausr-m, center); gap: 20px; }
@media (min-width: 981px) { .u-sozial .sozial { justify-content: var(--ausr, center); } }
.u-modul.u-sozial .sozial a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--weiss); border-radius: 5px; transition: background-color .2s; }
.u-modul.u-sozial .sozial a:hover { background: rgba(255, 255, 255, .15); }
.fuss__spalten { display: grid; gap: 40px; padding: 60px 0 40px; font-size: var(--fs-s); line-height: 1.6; }
.fuss__spalten h2 { font-size: var(--fs-m); font-weight: 700; letter-spacing: 3px; padding-bottom: 30px; }
.fuss__spalten li { padding-bottom: 12px; }
.fuss__spalten a { text-decoration: none; font-size: var(--fs-s); }
.fuss__spalten a:hover { opacity: .75; }
.fuss .knopf { margin-top: 18px; }
.fuss__spalten a.knopf:hover { opacity: 1; }
.fuss__unten { display: grid; gap: 10px; padding: 20px 0 30px; font-size: var(--fs-s); text-align: center; }
.fuss__unten a { text-decoration: none; }
.fuss__recht { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px; }   /* Abstand statt senkrechter Striche, bricht sauber um */
.fuss__recht a { display: inline-block; padding-block: 4px; }
.fuss__unten a:hover { opacity: .75; }
@media (min-width: 981px) {
  .fuss__kontakt { grid-template-columns: 266px 266px; column-gap: 35px; }
  .fuss__gross { font-size: var(--fs-xl); }
  .fuss__logo { width: 284px; }
  .fuss__spalten { grid-template-columns: 351fr 282fr 271fr 266fr; gap: 0; }
  .fuss__spalten > * { max-width: 266px; }
  .fuss__unten { grid-template-columns: 1fr 1fr; width: 92%; margin: 0 auto; }
}

/* ── Umgebaute Seiten (werkzeug/umbau-bau.mjs) ──────────────────────
   Abschnitt → Zeile → Spalte → Modul wie im Divi-Original, die gemessenen Werte
   stehen als Variablen am Element: ohne Endung Desktop (ab 981 px), „-m“ Handy. */
/* Verschachtelte Zeilen/Spalten erben sonst die Variablen der äußeren (z. B. --s-pr: das
   Produktbild „Kraftpaket“ war 30 px zu schmal). Eigene Werte stehen inline und gehen vor. */
.u-zeile { --z-bg: initial; --z-bild: initial; --z-bild-m: initial; --z-gr: initial; --z-lage: initial; --z-wd: initial; --z-pt: initial; --z-pb: initial; --z-pt-m: initial; --z-pb-m: initial; --z-pl: initial; --z-pr: initial; --z-pl-m: initial; --z-pr-m: initial; --z-schatten: initial; --z-radius: initial; --z-rand: initial; --z-rand-r: initial; --z-rand-u: initial; --z-rand-l: initial; --z-w: initial; --z-wp: initial; --z-wp-m: initial; --spalten: initial; --luecke: initial; }
.u-spalte { --s-bg: initial; --s-bild: initial; --s-bild-m: initial; --s-gr: initial; --s-lage: initial; --s-wd: initial; --s-pt: initial; --s-pb: initial; --s-pt-m: initial; --s-pb-m: initial; --s-pl: initial; --s-pr: initial; --s-pl-m: initial; --s-pr-m: initial; --s-schatten: initial; --s-radius: initial; --s-rand: initial; --s-rand-r: initial; --s-rand-u: initial; --s-rand-l: initial; --s-ausr: initial; }
.u-modul { --modul-w: initial; --modul-w-m: initial; --modul-ml: initial; --modul-mr: initial; --modul-ml-m: initial; --modul-mr-m: initial; }
.u-ab { position: relative; background-color: var(--bg, transparent); background-image: var(--bild-m, var(--bild, none)); background-size: var(--gr, cover); background-position: var(--lage, center); background-repeat: var(--wd, no-repeat); padding: var(--pt-m, 0px) 0 var(--pb-m, 0px); }
.u-zeile { position: relative; width: min(var(--z-w, 1080px), max(var(--z-wp-m, 90%), 90%));   /* Handy mindestens 90 % (Divi hatte teils 80 %: nur 21–27 Zeichen je Zeile) */ margin-inline: auto; display: grid; gap: 30px; padding: var(--z-pt-m, 0px) var(--z-pr-m, 0px) var(--z-pb-m, 0px) var(--z-pl-m, 0px); background-color: var(--z-bg, transparent); background-image: var(--z-bild, none); background-size: var(--z-gr, cover); background-position: var(--z-lage, center); box-shadow: var(--z-schatten, none); border-radius: var(--z-radius, 0); }
.u-spalte { min-width: 0; display: flex; flex-direction: column; padding: var(--s-pt-m, 0px) min(var(--s-pr-m, 0px), 20px) var(--s-pb-m, 0px) min(var(--s-pl-m, 0px), 20px);   /* seitlich am Handy höchstens 20 px */ background-color: var(--s-bg, transparent); background-image: var(--s-bild-m, var(--s-bild, none)); background-size: var(--s-gr, cover); background-position: var(--s-lage, center); background-repeat: var(--s-wd, no-repeat); box-shadow: var(--s-schatten, none); border-radius: var(--s-radius, 0); border-top: var(--s-rand, 0 none); border-right: var(--s-rand-r, 0 none); border-bottom: var(--s-rand-u, 0 none); border-left: var(--s-rand-l, 0 none); }
.u-spalte:empty { display: none; }
/* Überschriften in sehr schmalen Spalten eine Stufe kleiner, statt Wörter zu zerschneiden
   („intelligenten“ in der roten Formularspalte bei 1024 px) */
.u-spalte { container: spalte / inline-size; }
@media (min-width: 981px) {
  @container spalte (max-width: 260px) {
    .u-spalte .u-modul [data-h="1"] { font-size: min(var(--fs-xl), var(--h1-fs, 48px)); }
    .u-spalte .u-modul [data-h="2"] { font-size: min(var(--fs-xl), var(--h2-fs, 36px)); }
    .u-spalte .u-modul [data-h="3"] { font-size: min(var(--fs-xl), var(--h3-fs, 28px)); }
  }
}
.u-modul, .u-spalte > .u-zeile { margin-top: var(--mt-m, 0px); max-width: var(--modul-w-m, none); margin-left: var(--modul-ml-m, 0); margin-right: var(--modul-mr-m, 0); text-align: var(--ausr-m, left); color: var(--c, var(--text)); }
.u-spalte > .u-zeile { width: auto; color: inherit; }
.u-spalte { align-self: var(--s-ausr, stretch); }
.u-nur-d { display: none !important; }
@media (min-width: 981px) {
  .u-ab { background-image: var(--bild, none); padding: var(--pt, 0px) 0 var(--pb, 0px); }
  .u-zeile { width: min(var(--z-w, 1080px), var(--z-wp, 75%)); grid-template-columns: var(--spalten, 1fr); column-gap: var(--luecke, 0px); padding: var(--z-pt, 0px) var(--z-pr, 0px) var(--z-pb, 0px) var(--z-pl, 0px); }
  .u-spalte { padding: var(--s-pt, 0px) var(--s-pr, 0px) var(--s-pb, 0px) var(--s-pl, 0px); background-image: var(--s-bild, none); }
  .u-modul, .u-spalte > .u-zeile { margin-top: var(--mt, 0px); max-width: var(--modul-w, none); margin-left: var(--modul-ml, 0); margin-right: var(--modul-mr, 0); text-align: var(--ausr, left); }
  .u-nur-d { display: revert !important; }
  .u-nur-m { display: none !important; }
}
/* Typografie im Modul: Größen wie im Original gemessen, Stärke echt (400/700) */
.u-modul [data-h="1"] { text-align: var(--h1-ausr-m, inherit); font-size: var(--h1-fs-m, 28px); font-weight: var(--h1-fw, 700); color: var(--h1-c, var(--titel)); line-height: min(var(--h1-lh, 1.15), 1.15); text-transform: var(--h1-tt, none); letter-spacing: var(--h1-ls, -0.01em); }
.u-modul [data-h="2"] { text-align: var(--h2-ausr-m, inherit); font-size: var(--h2-fs-m, 28px); font-weight: var(--h2-fw, 700); color: var(--h2-c, var(--titel)); line-height: min(var(--h2-lh, 1.15), 1.15); text-transform: var(--h2-tt, none); letter-spacing: var(--h2-ls, -0.01em); }
.u-modul [data-h="3"] { text-align: var(--h3-ausr-m, inherit); font-size: var(--h3-fs-m, 18px); font-weight: var(--h3-fw, 700); color: var(--h3-c, var(--titel)); line-height: var(--h3-lh, 1.2); text-transform: var(--h3-tt, none); letter-spacing: var(--h3-ls, normal); }
.u-modul [data-h="4"] { text-align: var(--h4-ausr-m, inherit); font-size: var(--h4-fs-m, 18px); font-weight: var(--h4-fw, 700); color: var(--h4-c, var(--titel)); line-height: var(--h4-lh, 1.2); text-transform: var(--h4-tt, none); letter-spacing: var(--h4-ls, normal); }
.u-modul [data-h="5"] { text-align: var(--h5-ausr-m, inherit); font-size: var(--h5-fs-m, 18px); font-weight: var(--h5-fw, 700); color: var(--h5-c, var(--titel)); line-height: var(--h5-lh, 1.2); text-transform: var(--h5-tt, none); letter-spacing: var(--h5-ls, normal); }
.u-modul [data-h="6"] { text-align: var(--h6-ausr-m, inherit); font-size: var(--h6-fs-m, 18px); font-weight: var(--h6-fw, 700); color: var(--h6-c, var(--titel)); line-height: var(--h6-lh, 1.2); text-transform: var(--h6-tt, none); letter-spacing: var(--h6-ls, normal); }
.u-modul p, .u-modul li { text-align: var(--p-ausr-m, inherit); font-size: var(--p-fs-m, 16px); color: var(--p-c, inherit); font-weight: var(--p-fw, 400); line-height: min(var(--p-lh, 1.6), 1.6); text-transform: var(--p-tt, none); letter-spacing: var(--p-ls, normal); }   /* Versalien wie im Original: Aufforderungen („Weitere Nachrichten lesen“, „SIMPLY. erleben.“) einheitlich */
.u-modul li { font-size: var(--li-fs-m, var(--p-fs-m, 16px)); color: var(--li-c, var(--p-c, inherit)); }
.u-text { column-count: var(--text-spalten-m, 1); column-gap: var(--text-luecke, 1em); }
@media (min-width: 981px) { .u-text { column-count: var(--text-spalten, 1); } }
.u-modul ul, .u-modul ol { padding-left: 1.3em; margin: 0 0 1em; list-style: disc; }
.u-modul ol { list-style: decimal; }
.u-modul a:not(.knopf) { color: var(--a-c, inherit); text-underline-offset: 2px; }
.u-modul strong { font-weight: 700; }
@media (min-width: 981px) {
  .u-modul [data-h="1"] { text-align: var(--h1-ausr, inherit); font-size: var(--h1-fs, 48px); }
  .u-modul [data-h="2"] { text-align: var(--h2-ausr, inherit); font-size: var(--h2-fs, 36px); }
  .u-modul [data-h="3"] { text-align: var(--h3-ausr, inherit); font-size: var(--h3-fs, 28px); }
  .u-modul [data-h="4"] { text-align: var(--h4-ausr, inherit); font-size: var(--h4-fs, 18px); }
  .u-modul [data-h="5"] { text-align: var(--h5-ausr, inherit); font-size: var(--h5-fs, 18px); }
  .u-modul [data-h="6"] { text-align: var(--h6-ausr, inherit); font-size: var(--h6-fs, 18px); }   /* Überschriften nie kleiner als Fließtext (Abschlussprüfung #2) */
  .u-modul p { text-align: var(--p-ausr, inherit); font-size: var(--p-fs, 16px); }
  .u-modul li { font-size: var(--li-fs, var(--p-fs, 16px)); }
}
.u-bild { background-color: var(--bild-bg, transparent); }
/* Layout-Sprung (Lighthouse 29.09.2026, /referenzen/ CLS 0,10): Ein zentriertes Bildmodul (margin auto)
   schrumpft auf seinen Inhalt, und ein noch nicht geladenes Bild hat keine Breite. Die Divi-Breite gilt
   deshalb als width, nicht nur als Obergrenze; ohne Divi-Breite bleibt es wie bisher. */
.u-bild { width: var(--modul-w-m, auto); max-width: 100%; }
@media (min-width: 981px) { .u-bild { width: var(--modul-w, auto); } }
.u-bild--logo img { filter: saturate(0); opacity: .68; transition: filter .2s ease, opacity .2s ease; }
.u-bild--logo a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
.u-bild img { display: inline-block; vertical-align: top; width: 100%; max-width: var(--bild-w, 100%); border-radius: var(--bild-radius, 0); box-shadow: var(--bild-schatten, none); }
.knopf--rand-dunkel { background: transparent; border-color: var(--titel); color: var(--titel); }
.knopf--rand-dunkel:hover { background: rgba(0, 0, 0, .05); border-color: var(--titel); }
.u-blurb { display: flex; flex-direction: column; gap: 12px; align-items: var(--blurb-ausr, flex-start); }
.u-blurb[style*="--ausr:center"] { align-items: center; }
.u-blurb--left { flex-direction: row; align-items: flex-start; gap: 15px; text-align: left; }
.u-blurb__symbol { display: inline-grid; place-items: center; flex: none; color: var(--sym-c, var(--rot)); font-size: min(var(--sym-fs, 32px), 96px); background: var(--sym-bg, transparent); padding: var(--sym-pad, 0px); border-radius: var(--sym-radius, 0); line-height: 1; }
.u-blurb__symbol .symbol { width: 1em; height: 1em; display: block; }
.u-blurb__bild img { width: var(--sym-w, auto); max-width: 100%; }
.u-blurb__text { min-width: 0; }
.u-modul .u-blurb__titel { font-size: var(--bt-fs-m, 18px); color: var(--bt-c, var(--titel)); font-weight: var(--bt-fw, 700); line-height: 1.3; margin: 0; padding: 0 0 8px; }
.u-modul .u-blurb__titel strong { font-weight: var(--bt-fw, 700); }
.u-blurb__titel a { color: inherit; text-decoration: none; }
.u-blurb__titel a:hover { text-decoration: underline; }
@media (min-width: 981px) { .u-modul .u-blurb__titel { font-size: var(--bt-fs, 18px); } }
@media (max-width: 480px) { .u-modul .u-blurb__titel { line-height: 1.4; } }   /* bricht hier oft dreizeilig */
.u-tabelle__rahmen { overflow-x: auto; }
.u-tabelle { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 2px; font-size: var(--fs-s); text-align: center; color: var(--text); }
.u-tabelle th, .u-tabelle td { padding: 10px 12px; }
.u-tabelle th { background: #d9d9d9; color: var(--titel); font-weight: 700; }
.u-tabelle thead th { font-size: var(--fs-l); }
.u-tabelle td { background: #f6f9fb; }
.u-tabelle { font-variant-numeric: tabular-nums; }
@media (min-width: 1280px) { .u-tabelle td { white-space: nowrap; } }   /* „2500 x 1250“ zusammenhalten, wo Platz ist */
.u-tabelle__notiz { font-size: var(--fs-s) !important; padding-top: 10px; color: var(--c, inherit) !important; }
.u-ab[style*="--bg:#e9474c"] .u-tabelle__notiz { color: #fff !important; }   /* auf Markenrot wie der übrige Text weiß */
.u-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.u-zaehler__zahl { font-size: var(--z-fs, 48px) !important; color: var(--z-c, var(--weiss)) !important; font-weight: 700 !important; line-height: 1.1 !important; padding: 0; font-variant-numeric: tabular-nums; }
.u-zaehler__titel { font-weight: 700 !important; color: var(--zt-c, var(--titel)) !important; font-size: var(--zt-fs, 16px) !important; }
/* Handy/Tablet: je Datenspalte ein Block wie Table Maker „blocks“ (unter 981 px) */
.u-tabelle__bloecke { display: grid; gap: 20px; }
.u-tabelle--block { table-layout: auto; }
.u-tabelle--block th, .u-tabelle--block td { border-radius: 5px; }
.u-tabelle--block tbody th { width: 50%; }
@media (max-width: 980px) { .u-tabelle__rahmen { display: none; } }
@media (min-width: 981px) { .u-tabelle__bloecke { display: none; } }
.u-abstand { height: var(--hoehe-m, 0px); }
.u-abstand--bild { background: var(--a-bild-m, var(--a-bild)) var(--a-lage, center) / var(--a-gr, cover) no-repeat; }
@media (min-width: 981px) { .u-abstand { height: var(--hoehe, 0px); } .u-abstand--bild { background-image: var(--a-bild); } }
/* FAQ und Detail-Akkordeons (Nils 28.09.2026: „nach best practices, gerne gestalterisch
   anpassen“). Natives <details>/<summary>: per Tastatur bedienbar, ohne JS, der Browser meldet
   offen/geschlossen. Statt grauer Kästen, die beim Öffnen weiß wurden, eine ruhige Liste mit
   Trennlinien: Die Form bleibt gleich, nur der Inhalt klappt auf. Die ganze Zeile ist die
   Klickfläche (mind. 44 px), der runde Knopf zeigt den Zustand (Plus → Minus). */
.u-akkordeon { --ak-linie: var(--ak-rand, var(--grau-blau)); }
.u-akkordeon details { border-bottom: 1px solid var(--ak-linie); }
.u-akkordeon details:first-of-type { border-top: 1px solid var(--ak-linie); }
.u-akkordeon summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 18px 0; color: var(--titel); border-radius: 2px; }
.u-akkordeon summary::-webkit-details-marker { display: none; }
.u-akkordeon summary::after { content: ""; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ak-linie);
  background: linear-gradient(var(--rot), var(--rot)) center / 12px 2px no-repeat, linear-gradient(var(--rot), var(--rot)) center / 2px 12px no-repeat, var(--weiss);
  transition: background-size .2s var(--kurve), background-color .15s ease, rotate .2s var(--kurve); }
.u-akkordeon details[open] > summary::after { background-size: 12px 2px, 2px 0; rotate: 180deg; }
@media (hover: hover) and (pointer: fine) {
  .u-akkordeon summary:hover::after { background-color: var(--grau); border-color: var(--rot); }
  .u-akkordeon summary:hover .u-akkordeon__titel { text-decoration: underline; text-decoration-color: var(--ak-linie); text-underline-offset: 4px; }
}
.u-akkordeon summary:focus-visible { outline-offset: 2px; }
.u-akkordeon__titel { flex: 1; font-size: var(--fs-m) !important; line-height: 1.4; margin: 0; padding: 0; }
@media (min-width: 981px) { .u-akkordeon__titel { font-size: var(--fs-l) !important; } }
.u-akkordeon__inhalt { padding: 0 0 22px 0; }
@media (min-width: 981px) { .u-akkordeon__inhalt { padding-right: 48px; } }
/* Weiches Auf- und Zuklappen, wo der Browser es kann (::details-content); sonst sofort.
   Nur ohne „Bewegung reduzieren“: die Sammelregel oben erfasst ::details-content nicht */
@media (prefers-reduced-motion: no-preference) { @supports selector(::details-content) {
  .u-akkordeon { interpolate-size: allow-keywords; }
  .u-akkordeon details::details-content { block-size: 0; overflow: clip; transition: block-size .3s var(--kurve), content-visibility .3s allow-discrete; }
  .u-akkordeon details[open]::details-content { block-size: auto; }
} }
.u-akkordeon__inhalt :is(p, li) { max-width: 38em; }   /* Satzbreite ~70 Zeichen */
.u-linie hr { border: 0; border-top: var(--linie-d, 1px) solid var(--linie-c, var(--rot)); margin: 0; }
.karussell { position: relative; display: flex; align-items: center; gap: 10px; }
.karussell__bahn { display: flex; gap: 30px; flex: 1; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px 2px 30px; }
.karussell__bahn::-webkit-scrollbar { display: none; }
.karussell__bahn > * { flex: 0 0 85%; min-width: 0; scroll-snap-align: start; }   /* min-width 0: alle Karten gleich breit, lange Wörter setzen keine Mindestbreite */
@media (min-width: 768px) { .karussell__bahn > * { flex-basis: calc((100% - 30px) / 2); } }
@media (min-width: 981px) { .karussell__bahn > * { flex-basis: calc((100% - 60px) / 3); } }
.karussell .beitrag-karte { text-align: left; }
.karussell .beitrag-karte__text :is(h3, p) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* gleich breite, schmale Karten: lange Komposita trennen statt hart brechen */
.u-textseite { padding: 60px 0 80px; }
.u-textseite__innen { max-width: 1080px; }
.u-textseite__innen h1 { font-size: var(--fs-2xl); padding-bottom: 30px; }
.u-textseite__innen h2 { font-size: var(--fs-xl); padding: 30px 0 12px; }
.u-textseite__innen h3 { font-size: var(--fs-l); padding: 24px 0 10px; }
.u-textseite__innen h4 { font-size: var(--fs-l); padding: 20px 0 8px; }
.u-textseite__innen ul, .u-textseite__innen ol { padding-left: 1.3em; margin: 0 0 1em; list-style: disc; }
.u-textseite__innen a { color: var(--titel); text-underline-offset: 2px; overflow-wrap: anywhere; }
.u-textseite__innen p, .u-textseite__innen li { max-width: 38em; }   /* ~70 Zeichen je Zeile in Montserrat */
@media (min-width: 981px) { .u-textseite__innen h1 { font-size: var(--fs-3xl); } }

/* ── Blog (_system/blog.php): Beitrag, Übersicht, Archive, Seitenleiste ──
   Aufbau und Maße wie Divis Standard-Blog im Original (Inhalt 795 px, Leiste
   225 px mit Trennlinie), Fließtext nach Review 16 px. */
.blog { display: grid; gap: 50px; padding: 40px 0 60px; width: min(1080px, 100% - 40px); }
.blog-haupt { min-width: 0; }
.beitrag__titel { font-size: var(--fs-2xl); line-height: 1.15; padding-bottom: 10px; }
.blog-meta { font-size: var(--fs-s); color: var(--text); padding-bottom: 15px; }
.blog-meta a { color: #595959; text-decoration: underline; text-underline-offset: 2px; }
.blog-meta a:hover { color: var(--rot); text-decoration: underline; }
.beitrag__bild { width: 100%; height: auto; margin: 0 0 30px; }
.beitrag__inhalt { font-size: var(--fs-m); line-height: 1.6; }
.beitrag__inhalt p { padding-bottom: 1em; }
.beitrag__inhalt p, .beitrag__inhalt li, .blog-eintrag p { max-width: 38em; }   /* Satzbreite ~70 Zeichen */
.beitrag__inhalt h2 { font-size: var(--fs-xl); padding: 24px 0 10px; }   /* darüber deutlich mehr Luft als darunter: die Überschrift gehört zum Folgetext */
.beitrag__inhalt h3 { font-size: var(--fs-l); padding: 20px 0 8px; }
.beitrag__inhalt h4 { font-size: var(--fs-l); padding: 16px 0 6px; }
.beitrag__inhalt ul, .beitrag__inhalt ol { padding: 0 0 1em 1.3em; list-style: disc; }
.beitrag__inhalt ol { list-style: decimal; }
.beitrag__inhalt a { color: var(--titel); text-underline-offset: 2px; }
.beitrag__inhalt img { height: auto; margin: 10px 0 20px; }
.beitrag__inhalt figure { margin: 0 0 20px; }
.beitrag__inhalt figcaption { font-size: var(--fs-s); color: #666; padding-top: 6px; }
.beitrag__inhalt .video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.blog-archiv__titel { font-size: var(--fs-2xl); padding-bottom: 30px; }
.blog-eintrag { margin-bottom: 60px; }
.blog-eintrag__bild img { width: 100%; max-width: 530px; height: auto; margin-bottom: 30px; }
.blog-eintrag__titel { font-size: var(--fs-xl); line-height: 1.15; padding-bottom: 10px; }
.blog-eintrag__titel a { text-decoration: none; }
.blog-eintrag__titel a:hover { color: var(--rot); }
.blog-eintrag__text { font-size: var(--fs-m); }
.blog-blaettern { display: flex; justify-content: space-between; gap: 20px; font-weight: 700; }
.blog-blaettern a { color: var(--titel); text-decoration: none; }
.blog-blaettern a:hover { color: var(--rot); text-decoration: underline; }
.blog-blaettern__neuer { margin-left: auto; }
.blog-leiste { font-size: var(--fs-s); }
.blog-leiste__titel { color: var(--rot); font-size: var(--fs-2xl); line-height: 1; padding: 0 0 30px; }
.blog-leiste ul + .blog-leiste__titel { padding-top: 30px; border-top: 2px solid var(--rot); }
.blog-leiste__neueste li { padding-bottom: 12px; line-height: 1.6; }
.blog-leiste__neueste a, .blog-leiste__kategorien a { color: #666; text-decoration: none; }
.blog-leiste__neueste a:hover, .blog-leiste__kategorien a:hover { color: var(--rot); text-decoration: underline; }
.blog-leiste__neueste span { display: block; font-size: var(--fs-s); color: var(--text); }
.blog-leiste__kategorien { padding-bottom: 30px; }
.blog-leiste__kategorien li { padding-bottom: 7px; }
.blog-leiste__produkte { padding-bottom: 20px; }
.blog-leiste__produkte a { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding-bottom: 16px; color: var(--titel); font-weight: 700; text-decoration: none; line-height: 1.5; }
.blog-leiste__produkte a:hover span { color: var(--rot); text-decoration: underline; }
.blog-leiste__sozial { justify-content: center; margin: 0; padding-top: 15px; border-top: 2px solid var(--rot); gap: 4px; color: var(--titel); }
.blog-leiste__sozial a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 5px; transition: background-color .2s; }   /* Trefferfläche 44 px wie im Social-Band (u-sozial) */
.blog-leiste__sozial .symbol { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .blog-leiste__sozial a:hover { background: rgba(0, 0, 0, .06); } }
@media (min-width: 981px) {
  .blog { grid-template-columns: minmax(0, 795px) 225px; gap: 0 60px; padding-top: 58px; position: relative; }
  .blog::after { content: ""; position: absolute; top: 0; bottom: 0; right: 255px; border-left: 1px solid #e2e2e2; }
  .blog-leiste { padding-left: 30px; }
  .beitrag__titel { font-size: var(--fs-3xl); }
  .beitrag__inhalt h2 { font-size: var(--fs-2xl); }
}

/* ── Hinweisbanner (Aufbau wie Hohenberg) ───────────────────────── */
.meldung { --m-grund: var(--navy); --m-text: #fff; position: fixed; z-index: 60; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(760px, 100% - 32px); margin-inline: auto; background: var(--m-grund); color: var(--m-text); border-radius: 12px; box-shadow: 0 2px 6px rgba(10, 20, 40, .16), 0 18px 48px rgba(10, 20, 40, .28); font-size: var(--fs-m); line-height: 1.55; animation: meldung-rein .5s var(--kurve) .5s both; }
.meldung--messe { --m-grund: var(--rot); }
.meldung--wichtig { --m-grund: #8a1c1c; }
.meldung--neu { --m-grund: var(--blau); }
.meldung__innen { display: flex; gap: 14px; align-items: flex-start; padding: 16px 8px 16px 20px; }
.meldung__innen > .symbol { width: 24px; height: 24px; margin-top: 1px; }
.meldung p { margin: 0; padding: 1px 0; flex: 1; }
.meldung__art { font-weight: 700; }
.meldung a { font-weight: 700; text-decoration-thickness: 2px; }
.meldung :focus-visible { outline-color: currentColor; }
.meldung__zu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.meldung__zu .symbol { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .meldung__zu:hover { background: color-mix(in srgb, currentColor 14%, transparent); } }
@media (min-width: 900px) { .meldung { font-size: var(--fs-l); bottom: calc(32px + env(safe-area-inset-bottom, 0px)); } .meldung__innen { padding: 20px 16px 20px 32px; align-items: center; } }
.meldung--geht { animation: meldung-raus .25s ease-out both; }
@keyframes meldung-rein { from { opacity: 0; transform: translateY(24px); } }
@keyframes meldung-raus { to { opacity: 0; transform: translateY(8px); } }
body:has(.meldung:not([hidden])) .fuss__unten { padding-bottom: 150px; }
.blog-vorschau { background: #fff4d6; color: #5c4200; text-align: center; padding: 12px 16px; font-weight: 700; }

/* Großansicht für Galeriebilder (wie Divis Lightbox), <dialog> mit Schließen per Esc */
.grossbild { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; }
.grossbild::backdrop { background: rgba(10, 20, 30, .85); }
.grossbild img { max-width: 100%; max-height: 86vh; width: auto; height: auto; margin: 0 auto; }
.grossbild__zu { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.grossbild__zu .symbol { width: 22px; height: 22px; }
.grossbild__zu:focus-visible { outline-color: #fff; }

/* Zustimmung (eigenes Banner statt tarteaucitron, 28.09.2026, s.js). Gleiche Form wie der
   Hinweis (.meldung): schwebende Karte unten, Navy. „Alle ablehnen“ und „Alle akzeptieren“
   sehen gleich aus, damit keine Wahl bevorzugt wirkt. Solange das Banner steht, wartet
   der Hinweis. */
.zustimmung { position: fixed; z-index: 70; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(760px, 100% - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; margin-inline: auto; background: var(--navy); color: var(--weiss); border-radius: 12px; box-shadow: 0 2px 6px rgba(10, 20, 40, .16), 0 18px 48px rgba(10, 20, 40, .28); font-size: var(--fs-s); line-height: 1.6; animation: meldung-rein .5s var(--kurve) .3s both; }
.zustimmung__innen { padding: 16px 16px 8px; }
.zustimmung__text { padding: 0 0 12px; }
.zustimmung a { color: inherit; font-weight: 700; text-underline-offset: 2px; }
.zustimmung :focus-visible { outline-color: currentColor; }
.zustimmung__knoepfe { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.zustimmung__knoepfe .knopf { flex: 1 1 180px; padding-block: 10px; cursor: pointer; }
.zustimmung__mehr { flex: 1 1 100%; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: inherit; font: 700 var(--fs-s)/1.4 var(--schrift); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (min-width: 700px) {
  .zustimmung__innen { padding-bottom: 16px; }
  .zustimmung__knoepfe .knopf { flex: 0 0 auto; padding-block: 15px; }
  .zustimmung__mehr { flex: 0 0 auto; margin-left: auto; }
}
@media (min-width: 900px) { .zustimmung { bottom: calc(32px + env(safe-area-inset-bottom, 0px)); font-size: var(--fs-m); } .zustimmung__innen { padding: 24px 32px; } }
body:has(.zustimmung:not([hidden])) .meldung { display: none; }
body:has(.zustimmung:not([hidden])) .fuss__unten { padding-bottom: 320px; }

.z-dialog { width: min(640px, 100% - 32px); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--text); box-shadow: 0 18px 48px rgba(10, 20, 40, .28); }
.z-dialog::backdrop { background: rgba(10, 20, 30, .6); }
.z-dialog__innen { position: relative; padding: 28px 24px 24px; }
.z-dialog h2 { font-size: var(--fs-xl); padding: 0 48px 10px 0; }
.z-dialog__intro { font-size: var(--fs-s); padding-bottom: 8px; }
.z-dialog a { color: var(--titel); text-underline-offset: 2px; }
.z-dialog__zu { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--titel); cursor: pointer; }
.z-dialog__zu .symbol { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .z-dialog__zu:hover { background: rgba(0, 0, 0, .06); } }
.z-dienste { margin: 0; }
.z-dienst { display: grid; grid-template-columns: 24px 1fr; gap: 2px 14px; padding: 16px 0; border-top: 1px solid var(--grau-blau); }
.z-dienst input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blau); cursor: pointer; }
.z-dienst label { color: var(--titel); font-weight: 700; cursor: pointer; }
.z-dienst p { grid-column: 2; font-size: var(--fs-s); line-height: 1.6; padding: 0; }
.z-dienst__anbieter { display: block; color: #5f6368; }
.z-dialog__knoepfe { display: flex; flex-wrap: wrap; gap: 10px 12px; padding-top: 16px; border-top: 1px solid var(--grau-blau); }
.z-dialog__knoepfe .knopf { flex: 1 1 160px; padding-inline: 16px; white-space: nowrap; cursor: pointer; }
@media (min-width: 600px) { .z-dialog__innen { padding: 36px 40px 32px; } }

/* YouTube erst nach Klick (video_klick() in _system/kern.php): eigenes Vorschaubild,
   roter Abspielknopf, darunter der Hinweis auf die Übertragung an YouTube. */
.yt { margin: 0; }
.yt__start { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--petrol); color: var(--weiss); }
.yt__start img { width: 100%; height: 100%; object-fit: cover; margin: 0; }   /* .beitrag__inhalt img setzt sonst 10 px Rand */
.yt__knopf { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--rot); box-shadow: 0 4px 24px rgba(0, 0, 0, .3); transition: background-color .15s ease, transform .16s ease-out; }
.yt__knopf .symbol { width: 30px; height: 30px; margin-left: 4px; }
.yt__start:active .yt__knopf { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .yt__start:hover .yt__knopf { background: #d63a3f; } }
.yt__start:focus-visible { outline-offset: 3px; }
.yt iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.yt__hinweis { font-size: var(--fs-s); line-height: 1.6; color: var(--text); padding-top: 8px; text-align: left; }
.yt__hinweis a { color: var(--titel); text-underline-offset: 2px; }
.beitrag__inhalt .video { margin-bottom: 20px; }

/* Karussell und Kundenstimmen auf dem Handy (Review Skills #2): Pfeile unter die Bahn,
   damit die Karten die ganze Breite haben (bei 320 px war der Kartentext 71 px breit)
   und die nächste Karte sichtbar hereinschaut. */
@media (max-width: 767px) {
  .stimmen, .karussell { flex-wrap: wrap; justify-content: center; gap: 12px 16px; }
  .stimmen__bahn, .karussell__bahn { order: -1; flex: 1 0 100%; min-width: 0; }
  .stimme { padding: 0 8px; }
  /* Die Divi-Zeile ist am Handy nur 80 % breit; das Karussell nutzt die Seite bis 20 px vor dem Rand */
  .karussell { width: calc(100vw - 40px); margin-inline: calc(50% - 50vw + 20px); }
  .karussell__bahn { gap: 16px; scroll-padding-inline: 0; }
  .karussell .beitrag-karte__text { padding: 24px 20px 16px; }
}

/* Klickbare Kacheln (Divi „et_clickable“, z. B. Produkte, Über uns; Nils 28.09.2026: „müssen
   besser gemacht werden“). Die Überschrift ist der Link und deckt die Kachel ab. Text mit
   Innenabstand statt an der Kante, die Aufforderung („SIMPLY. erleben.“) steht mit Pfeil
   unten, in allen Kacheln einer Reihe auf derselben Höhe. */
.u-spalte--link { position: relative; overflow: hidden; transition: background-color .2s ease; }
.u-spalte.u-spalte--link > .u-modul:not(.u-bild) { padding-inline: 24px; }
.u-spalte.u-spalte--link > .u-modul:last-child:not(:first-child) { margin-top: auto; padding-top: 16px; padding-bottom: 22px; }
.u-spalte--link [data-h] { font-size: var(--fs-l); line-height: 1.25; }
.u-spalte--link .u-bild { overflow: hidden; }
.u-spalte--link .u-bild img { transition: transform .5s var(--kurve); }
.u-flaechenlink { color: inherit; text-decoration: none; }
.u-flaechenlink::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.u-flaechenlink:focus-visible { outline: none; }
.u-spalte--link:has(.u-flaechenlink:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.u-spalte--link > .u-modul:last-child:not(:first-child) p::after { content: "→" / ""; display: inline-block; margin-left: .4em; transition: translate .2s var(--kurve); }
@media (hover: hover) and (pointer: fine) {
  .u-spalte--link:hover { background-color: color-mix(in srgb, var(--s-bg, transparent) 86%, #000); }
  .u-spalte--link:hover .u-bild img { transform: scale(1.03); }
  .u-spalte--link:hover > .u-modul:last-child:not(:first-child) p::after { translate: 4px 0; }
}

/* Produkt-Blurbs auf /produkte/ als Links (Abschlussprüfung Design #8) */
.u-blurb--link { position: relative; }
.u-blurb--link .u-blurb__titel a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .u-blurb--link:hover .u-blurb__titel a { text-decoration: underline; text-underline-offset: 3px; } .u-blurb--link:hover .u-blurb__symbol { translate: 3px 0; } }
.u-blurb--link .u-blurb__symbol { transition: translate .2s var(--kurve); }
.u-blurb--link:has(.u-flaechenlink:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 6px; border-radius: 4px; }

.ff-ohne-js { padding: 12px 16px; margin-bottom: 20px; border-left: 4px solid var(--rot); background: var(--grau); color: var(--titel); }
.ff-ohne-js a { color: inherit; font-weight: 700; }

/* ── Karten mit Link: ganze Fläche klickbar, Rückmeldung beim Überfahren (Nils 29.09.2026) ──
   Die Karte hebt sich um 4 px und bekommt mehr Schatten. Die Hebung läuft über „translate“,
   nicht „transform“, damit sie die Einblend-Animation (transform, fill both) nicht stört.
   Nur mit Maus (hover: hover); bei „Bewegung reduzieren“ nur der Schatten. Die ganze Fläche
   ist Link über ein ::after des vorhandenen Links, der Fokusrahmen liegt um die Karte. */
.karte, .beitrag-karte { position: relative; transition: translate .25s var(--kurve), box-shadow .25s var(--kurve); }
.karte .knopf::after, .beitrag-karte h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.karte img, .beitrag-karte__bild img { transition: scale .5s var(--kurve); }
.karte, .beitrag-karte__bild { overflow: hidden; }
.beitrag-karte__bild { display: block; }
.karte:has(.knopf:focus-visible), .beitrag-karte:has(h3 a:focus-visible) { outline: 3px solid var(--fokus); outline-offset: 3px; }
.karte .knopf:focus-visible, .beitrag-karte h3 a:focus-visible { outline: none; }
.u-spalte--link { transition: background-color .2s ease, translate .25s var(--kurve), box-shadow .25s var(--kurve); }
.u-blurb--link .u-blurb__symbol, .u-blurb--link .u-blurb__titel { transition: translate .2s var(--kurve), color .2s ease; }
@media (hover: hover) {
  .karte:hover, .beitrag-karte:hover, .u-spalte--link:hover { box-shadow: 0 14px 40px rgba(40, 40, 40, .18); }
  .karte:hover .knopf { background: #d63a3f; border-color: #d63a3f; }
  .beitrag-karte:hover h3 a, .u-blurb--link:hover .u-blurb__titel { color: var(--rot); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .karte:hover, .beitrag-karte:hover, .u-spalte--link:hover { translate: 0 -4px; }
  .karte:hover img, .beitrag-karte:hover .beitrag-karte__bild img { scale: 1.03; }
  .u-blurb--link:hover .u-blurb__symbol { translate: 4px 0; }
}

/* Textmodule in zwei Textspalten wie im Original (Divi column-count, ab 768 px; darunter eine Spalte) */
@media (min-width: 768px) { .u-text--spalten { column-count: 2; column-gap: var(--tsp-luecke, 1em); } }