/* =========================================================================
   eingenetzt: base.css
   Gemeinsames Fundament für alle Richtungen (A/B/C) und später alle Seiten.
   Source of Truth: corporate-identity/CORPORATE-IDENTITY.md (v1.1)
   Jede Sektion hier ist als späterer Gutenberg-Block gedacht (BEM-Klassen).
   ========================================================================= */

/* ---------- Schrift: selbst gehostet (keine Drittserver-Requests) -------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional; /* QA 08.10.2026 (S1): kein Tausch nach dem ersten Zeichnen, siehe Ersatzschrift unten */
  src: url('../fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 800;
  font-display: optional; /* QA 08.10.2026 (S1): kein Tausch nach dem ersten Zeichnen, siehe Ersatzschrift unten */
  src: url('../fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Ersatzschrift mit Montserrat-Maßen (QA 08.10.2026, S1) ----------
   Kommt Montserrat nicht rechtzeitig (gedrosselt, erster Besuch), zeichnet
   der Browser die Ersatzschrift. Mit font-display: swap tauschte er danach.
   Arial ist schmaler als Montserrat, beim Wechsel liefen Zeilen anders um und der Hero sprang bei langsamer Verbindung um 30 bis 70 px
   (CLS bis 0,39). Diese Flächen ziehen Arial auf die Laufweite von Montserrat:
   size-adjust je Schnitt gemessen am echten Seitentext (Startseite, SEO-Seite,
   /en/, Über, ein Artikel; 20.000 Zeichen), Ober- und Unterlänge aus
   Montserrat (968/251 von 1000) geteilt durch size-adjust. Auf Android ohne
   Arial greift Roboto mit denselben Werten (ähnliche Laufweite).
   Gemessen blieb auch mit angepasster Ersatzschrift ein Rest (einzelne Zeilen
   laufen anders um, CLS bis 0,11 gedrosselt). Deshalb font-display: optional:
   Die Datei ist vorgeladen und kommt im Normalfall vor dem ersten Zeichnen;
   wenn nicht, bleibt die Seite bei der angepassten Ersatzschrift, und ab der
   nächsten Seite ist Montserrat aus dem Cache da. Kein Layoutsprung. */
@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 112.4%;
  ascent-override: 86.12%;
  descent-override: 22.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 500;
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto');
  size-adjust: 114.0%;
  ascent-override: 84.91%;
  descent-override: 22.02%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 108.4%;
  ascent-override: 89.30%;
  descent-override: 23.15%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 110.2%;
  ascent-override: 87.84%;
  descent-override: 22.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  font-style: normal;
  font-weight: 800;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold');
  size-adjust: 112.2%;
  ascent-override: 86.27%;
  descent-override: 22.37%;
  line-gap-override: 0%;
}

/* ---------- Design-Tokens ------------------------------------------------ */
:root {
  /* Markenpalette (§2a): die einzige Palette für die Website */
  --schwarz: #000000;
  --schwarz-soft: #0d0d0d;
  --dunkelgrau: #1a1a1a;
  --mittelgrau: #2a2a2a;
  --hellgrau: #3a3a3a;
  --weiss: #ffffff;
  --textgrau: #999999;
  --textgrau-hell: #bbbbbb;
  --gelb: #fed526;
  --gelb-dunkel: #d4a800;
  /* Akzent auf HELLEM Grund. Gemessen, nicht geschaetzt:
     #fed526 = 1.42:1, #d4a800 = 2.23:1, #bf9500 = 2.79:1 -> alle drei fallen
     durch WCAG AA. Ersetzt durch zwei gestaffelte Toene: */
  --gelb-gross: #a37f00;  /* 3.75:1 - grosse/fette Schrift ab 24px, Icons */
  --gelb-klein: #7a6000;  /* 6.00:1 - Fliesstext, Labels, Links */

  /* Light-Mode-Tokens (§2c) */
  --hell-grund: #ffffff;
  --hell-text: #141414;
  --hell-text-sek: #3a3a3a;
  --hell-karte: #f5f5f4;
  --hell-rahmen: #e6e4dd;

  /* Semantische Rollen: dark ist Default ("Bühne") */
  --grund: var(--schwarz);
  --grund-alt: var(--schwarz-soft);
  --karte: var(--dunkelgrau);
  --rahmen: var(--mittelgrau);
  --linie: var(--hellgrau);
  /* Rand von BEDIENELEMENTEN braucht 3:1 (WCAG 1.4.11). #3a3a3a schafft nur
     1.85:1 und darf deshalb nie die einzige Begrenzung eines Buttons sein. */
  --rahmen-ui: #767676;
  --text: var(--weiss);
  --text-sek: var(--textgrau-hell);
  --text-leise: var(--textgrau);
  --akzent: var(--gelb);
  --akzent-text: var(--gelb);   /* gross */
  --akzent-klein: var(--gelb);  /* klein */

  /* Maße */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --sektion-y: clamp(64px, 9vw, 128px);
  --radius: 14px;
  --radius-s: 8px;

  /* Bewegung */
  --schnell: 160ms;
  --normal: 260ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Erlaubt das Animieren auf auto-Hoehen, noetig fuers Aufklappen. */
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

/* ---------- Fokus: sichtbar, markentypisch ------------------------------- */
:focus-visible {
  outline: 3px solid var(--gelb);
  outline-offset: 3px;
  border-radius: 3px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gelb); color: #000; padding: 12px 20px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Layout ------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sektion-y); position: relative; }
.section--alt { background: var(--grund-alt); }

/* Heller Modus. Gilt fuer einzelne Sektionen (.section--light) und fuer eine
   komplette Seite im Hellmodus (body.modus-hell). */
.modus-hell,
.section--light {
  --grund: var(--hell-grund);
  --grund-alt: var(--hell-karte);
  --karte: var(--hell-karte);
  --rahmen: var(--hell-rahmen);
  --linie: var(--hell-rahmen);
  --text: var(--hell-text);
  --text-sek: var(--hell-text-sek);
  --text-leise: var(--hell-text-sek);
  /* WICHTIG: Auf hellem Grund ist Gelb KEINE Schriftfarbe.
     Jeder lesbare Gelbton wird zwangslaeufig zu Senf. Stattdessen wird Gelb
     hier zur FLAECHE mit schwarzer Schrift darauf (14,76:1, markentypisch).
     Deshalb zeigen beide Akzent-Rollen auf die Textfarbe. */
  --akzent-text: var(--hell-text);
  --akzent-klein: var(--hell-text);
  background: var(--hell-grund);
  color: var(--hell-text);
}

/* Akzentwort in Headlines: gelber Marker hinter schwarzer Schrift statt
   goldener Schrift. Der Balken sitzt auf der Grundlinie, nicht als Kasten. */
.modus-hell .akzent,
.section--light .akzent {
  background: linear-gradient(to top,
              var(--gelb) 0.02em, var(--gelb) 0.28em, transparent 0.28em);
  padding-inline: 0.04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sektionslabel: schwarze Versalien mit gelbem Quadrat davor */
.modus-hell .sektionslabel,
.section--light .sektionslabel {
  display: inline-flex; align-items: center; gap: 10px;
}
.modus-hell .sektionslabel::before,
.section--light .sektionslabel::before {
  content: ''; width: 12px; height: 12px; flex: 0 0 12px;
  background: var(--gelb); border-radius: 2px;
}

/* Karten-Kicker genauso */
.modus-hell .karte__kicker,
.section--light .karte__kicker {
  display: inline-block;
  background: var(--gelb); color: #000;
  padding: 4px 9px; border-radius: 4px;
}

/* Check-Icons: schwarzer Haken auf gelbem Kreis statt goldenem Haken */
.modus-hell .liste-check svg,
.section--light .liste-check svg {
  color: #000; background: var(--gelb);
  border-radius: 50%; padding: 3px;
  flex: 0 0 24px; width: 24px; height: 24px;
}

/* FAQ-Plus dunkel statt gold */
.modus-hell .faq__plus::before, .modus-hell .faq__plus::after,
.section--light .faq__plus::before, .section--light .faq__plus::after {
  background: var(--hell-text);
}
.modus-hell .faq__frage:hover, .section--light .faq__frage:hover { color: #000; }

/* Kennzahlen: schwarze Ziffern, gelber Balken darueber */
.modus-hell .kennzahl__wert,
.section--light .kennzahl__wert { color: var(--hell-text); }

/* ---------- Typografie (§3) ---------------------------------------------- */
.sektionslabel {
  display: inline-block;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--akzent-klein);
  margin-bottom: 18px;
}
.h-hero { font-size: clamp(36px, 5vw, 60px); }
.h-sektion { font-size: clamp(28px, 3.5vw, 44px); }
.h-karte { font-size: clamp(20px, 2vw, 22px); font-weight: 700; }
.akzent { color: var(--akzent-text); }
.lead {
  font-size: clamp(19px, 1.8vw, 22px);
  color: var(--text-sek);
  line-height: 1.55;
  max-width: 62ch;
}
.prosa { color: var(--text-sek); max-width: 68ch; }
.sektionskopf { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sektionskopf .h-sektion + .prosa { margin-top: 20px; }

/* Ziffern gleich breit: Zahlen sollen sich beim Scrollen nicht verschieben */
.zahl { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- Hero-Schleier ------------------------------------------------
   Ebenfalls geteilt: der Hero-Block braucht ihn, der Artikelkopf im Theme
   auch. Block-CSS wird nur geladen, wo der Block steht, deshalb hier.
   Unveraendert aus design/css/arbeitsvariante.css. ------------------------- */

.hero-schleier {
  position: absolute;
  left: 0; top: 0;
  width: calc(100% + 50vw); height: 100%;
  border-radius: 16px 0 0 16px;
  pointer-events: none;
}

.hero-schleier--dunkel {
  background:
    /* nach links dicht, damit der Uebergang zur weissen Textspalte traegt */
    linear-gradient(90deg,
      rgba(10,10,10,0.96) 0%,
      rgba(10,10,10,0.72) 22%,
      rgba(10,10,10,0.44) 58%,
      rgba(10,10,10,0.34) 100%),
    /* unten dunkler, damit die Trustleiste sauber ansetzt */
    linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 52%);
}

.hero-bogen {
  position: absolute;
  left: 8%; bottom: 10%;
  width: min(74%, calc(100% + 50vw - 16%));
  height: 58%;
  pointer-events: none;
  overflow: visible;
}
@media (max-width: 1000px) {
.hero-schleier {
    width: 100%; border-radius: 0;
    height: clamp(260px, 52vw, 420px);
  }

.hero-bogen { left: 8%; bottom: auto; top: 24%; width: 76%; height: 44%; }
}

/* ---------- Brotkrumen ----------------------------------------------------
   Geteiltes Primitiv: der Artikelkopf braucht sie, der Hero mit Brotkrumen
   auch. Im Prototyp stand sie in inhalt.css, die aber nur auf Beitraegen und
   Archiven geladen wird. Deshalb hier in der Basis. -------------------------- */

.brotkrumen {
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #5a5a5a;
  margin-bottom: 18px;
}
.brotkrumen a { color: #5a5a5a; text-decoration: none; }
.brotkrumen a:hover { color: #000; }
/* Nur das Trennzeichen einfaerben, nicht den aktuellen Seitennamen.
   Ohne [aria-hidden] traf die Regel auch den <span> mit dem Seitentitel und
   setzte ihn auf die Rahmenfarbe: 1,27:1 gegen Weiss, klar unter AA.
   Gefunden am 07.09.2026 beim Kontrastlauf ueber die gebaute Leistungsseite. */
.brotkrumen span[aria-hidden] { margin-inline: 6px; color: var(--hell-rahmen); }
/* QA 08.10.2026 (K7): Tippziel der Brotkrumen-Links 16 -> 24 px hoch
   (WCAG 2.5.8). Polster innen, Gegenrand aussen: die Zeile bleibt gleich hoch. */
.brotkrumen a { display: inline-block; padding-block: 4px; margin-block: -4px; }



/* ---------- Lange Woerter umbrechen ---------------------------------------
   Deutsche Komposita sind lang: "Suchmaschinenoptimierung" ist bei 320 px
   breiter als die Textspalte und schob im Test die ganze Seite quer.
   Der Prototyp fiel nur deshalb nicht auf, weil seine festen Ueberschriften
   zufaellig kurz genug waren. In einem CMS tippt aber irgendwann jemand das
   lange Wort, deshalb gehoert die Regel in die Basis.

   overflow-wrap: break-word bricht NUR, wenn das Wort sonst ueberlaeuft.
   Im Normalfall aendert sich nichts. Ergaenzt am 07.09.2026.
   Seit 08.10.2026 mit hyphens: auto (Entscheidung Dennis nach der QA). ------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h-hero, .h-sektion, .h-karte,
.lead, .prosa, .karte__text, p, li, dd, td, th, figcaption, blockquote, label {
  /* QA 08.10.2026 (B1): break-word statt anywhere. anywhere brach ein zu
     langes Wort an beliebiger Stelle OHNE Trennstrich um ("Industrieunter-
     nehme / n"). Lange Woerter schuetzt jetzt span.wort (siehe unten), das
     hier ist nur noch die letzte Rueckfallebene. */
  overflow-wrap: break-word;
}
/* Lange Woerter (ab 10 Buchstaben) legt inc/wortumbruch.php serverseitig in
   span.wort. Als inline-block ist das Wort fuer den Zeilenumbruch eine
   Einheit: Passt es in eine Zeile, rueckt es ganz in die naechste. Nur wenn
   es allein breiter ist als die Zeile, wird es getrennt, und dann mit Strich
   nach den Regeln der Seitensprache (<html lang>). Mit hyphens: auto auf dem
   ganzen Text trennten die Browser dagegen gierig ("Maschi-nenbau" in jeder
   zweiten H1 auf dem Desktop). Kurze Woerter werden so nie getrennt. */
.wort {
  display: inline-block;
  max-width: 100%;
  text-indent: 0;
  text-decoration: inherit;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  overflow-wrap: break-word;
}
/* Marke immer klein, auch in Versal-Labels (QA 08.10.2026, K1, inc/wortumbruch.php) */
.marke-wort { text-transform: none; }
a[href^="mailto:"] .wort, a[href^="tel:"] .wort, .kontaktweg__wert .wort { -webkit-hyphens: manual; hyphens: manual; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-s);
  font-weight: 700; font-size: 17px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--schnell) var(--kurve),
              background-color var(--schnell), border-color var(--schnell);
}
.btn:hover { transform: translateY(-2px); }
/* Black-on-Yellow ist markentypisch und erlaubt (§2a) */
.btn--primaer { background: var(--gelb); color: #000; }
.btn--primaer:hover { background: #ffe14f; }
.btn--sekundaer { background: transparent; color: var(--text); border-color: var(--rahmen-ui); }
.btn--sekundaer:hover { border-color: var(--gelb); }
.section--light .btn--sekundaer { color: var(--hell-text); border-color: var(--rahmen-ui); }
.btn-gruppe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn__pfeil { transition: transform var(--schnell) var(--kurve); }
.btn:hover .btn__pfeil { transform: translateX(3px); }

/* ---------- Karten ------------------------------------------------------- */
.karte {
  background: var(--karte);
  border: 1px solid var(--rahmen);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 34px);
  transition: transform var(--normal) var(--kurve),
              border-color var(--normal), box-shadow var(--normal);
}
.karte--link { display: block; text-decoration: none; color: inherit; }
.karte--link:hover, .karte--link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(254, 213, 38, 0.45);
  box-shadow: 0 0 0 1px rgba(254, 213, 38, 0.12), 0 18px 44px rgba(0, 0, 0, 0.55);
}
.section--light .karte--link:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10); }
.karte__kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--akzent-klein);
}
.karte__text { color: var(--text-sek); margin-top: 12px; font-size: 17px; }

.raster { display: grid; gap: clamp(16px, 2vw, 24px); }
.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }
.raster--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; }
}

/* ---------- Zahlen-Kreise / Check-Kreise (§4: Icons statt Emojis) -------- */
.kreis {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 16px;
}
.kreis--zahl { background: var(--gelb); color: #000; }
.kreis--check { border: 2px solid var(--gelb); color: var(--gelb); }
.section--light .kreis--check { border-color: var(--gelb-gross); color: var(--gelb-gross); }

.liste-check { display: grid; gap: 14px; }
.liste-check li { display: flex; gap: 14px; align-items: flex-start; }
.liste-check svg { flex: 0 0 22px; margin-top: 4px; color: var(--akzent-text); }

/* ---------- Kennzahl-Block ----------------------------------------------- */
.kennzahl__wert {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 800; line-height: 1;
  color: var(--akzent-text);
}
.kennzahl__label {
  margin-top: 12px; font-size: 15px; line-height: 1.45;
  color: var(--text-sek);
}

/* ---------- Logo-Wand ---------------------------------------------------- */
.logowand {
  display: flex; flex-wrap: wrap;
  gap: clamp(28px, 5vw, 64px);
  align-items: center; justify-content: center;
}
.logowand__item {
  font-weight: 700; font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.02em;
  color: var(--text-leise);
  opacity: 0.75;
  transition: opacity var(--normal), color var(--normal);
}
.logowand__item:hover { opacity: 1; color: var(--text); }

/* ---------- FAQ (natives details/summary, kein JS) ----------------------- */
.faq { border-top: 1px solid var(--linie); }
.faq__item { border-bottom: 1px solid var(--linie); }
.faq__frage {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0;
  font-weight: 700; font-size: clamp(17px, 1.8vw, 20px);
  cursor: pointer; list-style: none;
}
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage:hover { color: var(--akzent-klein); }
.faq__plus {
  flex: 0 0 22px; width: 22px; height: 22px;
  position: relative;
  transition: transform var(--normal) var(--kurve);
}
.faq__plus::before, .faq__plus::after {
  content: ''; position: absolute; background: var(--akzent-klein);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.faq__plus::before { width: 100%; height: 2px; }
.faq__plus::after { width: 2px; height: 100%; }
.faq__item[open] .faq__plus { transform: rotate(45deg); } /* Plus wird zu × (§4) */
.faq__antwort { padding-bottom: 26px; color: var(--text-sek); max-width: 72ch; }

/* Aufklappen: kurz und schnell, keine Show. 200 ms, danach steht der Text.
   Der moderne Weg ueber ::details-content animiert beide Richtungen. */
@supports selector(details::details-content) {
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 200ms var(--kurve),
                content-visibility 200ms allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}
/* Rueckfall fuer Browser ohne ::details-content: der Inhalt springt zwar auf,
   gleitet aber wenigstens herein statt hart zu erscheinen. */
@supports not selector(details::details-content) {
  .faq__item[open] .faq__antwort { animation: faqAuf 200ms var(--kurve); }
  @keyframes faqAuf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq__item::details-content { transition: none; }
  .faq__item[open] .faq__antwort { animation: none; }
}

/* ---------- Header / Navigation ------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mittelgrau);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 92px; /* 74 -> 92 px, Dennis 07.10.2026: weniger gedrungen */
}
/* Wortmarke als Text gesetzt: token-getrieben, überlebt einen Namenswechsel */
.wortmarke {
  font-weight: 800; font-size: 23px; letter-spacing: -0.035em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.wortmarke__punkt { color: var(--gelb); }
.hauptnav { display: flex; align-items: center; gap: 30px; }


/* Verteilung (Dennis 07.10.2026): Marke links, Menü mittig im freien Raum,
   Sprachwahl und Beratungsknopf als Gruppe rechts. Vorher verteilte
   space-between die Lücken gleichmäßig, das wirkte zufällig. */
@media (min-width: 1061px) {
  .site-header__inner { justify-content: flex-start; gap: 28px; }
  /* Menü mittig im freien Raum (Dennis 07.10.2026, nach Test rechtsbündig
     bewusst zurück auf mittig). */
  .hauptnav { margin-inline: auto; gap: 36px; }
}


/* Header-Proportion (Dennis 07.10.2026, nach Vergleich mit Teledoor): Die
   Wortmarke war mit 23 px zu leicht für den Header, links fehlte das Gewicht.
   Menü in normaler Schreibung, 16 px, mit größeren Klickflächen. */
@media (min-width: 1061px) {
  .site-header .wortmarke { font-size: 28px; }
  .hauptnav { gap: 8px; }
  .hauptnav > a, .hauptnav .leistungen-nav__link { padding: 10px 12px; }
  .hauptnav .leistungen-nav__link { padding-right: 2px; }
}
@media (min-width: 1061px) and (max-width: 1180px) {
  .site-header .wortmarke { font-size: 24px; }
  .hauptnav > a, .hauptnav .leistungen-nav__link { padding-inline: 8px; font-size: 15px; }
}


/* Header breiter als der Inhalt (Dennis 07.10.2026, wie Teledoor gemessen:
   Header 1360 px, Inhalt 1200 px). Gibt dem Menü Luft, der Inhalt behält
   seine Zeilenlänge. */
@media (min-width: 1061px) {
  .site-header__inner { max-width: 1360px; }
}

/* ---------- Aufklappmenü Leistungen -------------------------------------- */
/* Elternpunkt: Link plus kleiner Aufklapp-Knopf daneben, seit 25.09.2026. */
.leistungen-nav { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.leistungen-nav__link {
  display: inline-flex; align-items: center;
  text-decoration: none; font-size: 16px; font-weight: 600;
  color: var(--textgrau-hell);
  padding: 10px 0;
  transition: color var(--schnell);
}
.leistungen-nav__knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  color: var(--textgrau-hell);
  /* Eigene Flaeche, damit der Pfeil auf dem Handy treffbar ist. */
  width: 32px; height: 32px; padding: 0;
  transition: color var(--schnell);
}
.leistungen-nav__link:hover,
.leistungen-nav__knopf:hover,
.leistungen-nav:hover .leistungen-nav__link,
.leistungen-nav[data-offen='true'] .leistungen-nav__link,
.leistungen-nav[data-offen='true'] .leistungen-nav__knopf { color: #fff; }
.leistungen-nav__link[aria-current='page'] { color: #fff; }
.leistungen-nav__pfeil { transition: transform var(--normal) var(--kurve); }
.leistungen-nav[data-offen='true'] .leistungen-nav__pfeil { transform: rotate(180deg); }

.leistungen-nav__liste {
  position: absolute; top: calc(100% + 14px); left: -18px;
  width: 310px; /* kurze Titel plus Unterzeile, Dennis 07.10.2026 */
  background: var(--dunkelgrau);
  border: 1px solid var(--mittelgrau);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.62);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--normal), transform var(--normal) var(--kurve),
              visibility var(--normal);
}
/* QA 08.10.2026 (S3): data-offen='false' setzt site.js nach Escape. Dann
   bleibt die Liste zu, auch wenn die Maus noch darueber steht oder der Fokus
   auf dem Pfeilknopf liegt (WCAG 1.4.13). Verlassen Maus und Fokus das Menue,
   entfernt site.js das Attribut wieder. */
.leistungen-nav[data-offen='true'] .leistungen-nav__liste,
.leistungen-nav:not([data-offen='false']):hover .leistungen-nav__liste,
.leistungen-nav:not([data-offen='false']):focus-within .leistungen-nav__liste {
  opacity: 1; visibility: visible; transform: none;
}
.leistungen-nav__liste a {
  display: block; padding: 12px 14px;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: background-color var(--schnell);
}
.leistungen-nav__liste a:hover { background: var(--mittelgrau); }
.leistungen-nav__liste strong {
  display: block; font-size: 16px; font-weight: 700; color: #fff;
}
.leistungen-nav__liste span {
  display: block; margin-top: 3px; font-size: 14px; color: var(--textgrau);
  line-height: 1.35;
}
.hauptnav a {
  text-decoration: none; font-size: 16px; font-weight: 600;
  color: var(--textgrau-hell);
  transition: color var(--schnell);
}
.hauptnav a:hover, .hauptnav a[aria-current='page'] { color: #fff; }
/* Kompakt im Header (Dennis 07.10.2026): Wortlaut bleibt, Pfeil und Polster weg. */
.site-header .btn { padding: 9px 16px; font-size: 14.5px; }
.site-header .btn .btn__pfeil { display: none; }

/* Header-Knopf zweizeilig (Dennis 07.10.2026) */
.site-header .site-header__cta--zweizeilig {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 0; padding: 7px 18px; line-height: 1.15;
}
.site-header__cta-haupt { font-size: 15px; font-weight: 700; }
.site-header__cta-zusatz { font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.8; }

/* Beratungsknopf im Burger-Menü (07.10.2026). Auf dem Desktop aus, sichtbar nur
   in .site-header--offen (Media-Query unten). Farbe und Größe gegen
   `.hauptnav a` und `.modus-hell .hauptnav > a` zurücksetzen. */
.hauptnav__cta-zeile { display: none; }
.hauptnav .hauptnav__cta,
.hauptnav .hauptnav__cta:hover {
  color: #000; font-size: 16px; font-weight: 700; padding: 13px 22px;
}



/* ---------- Sprachwahl (Markup in inc/sprachumschalter.php) ---------------
   Variante A, Kuerzelpaar. Entscheidung Dennis 24.09.2026: bei zwei Sprachen
   ein Klick statt zwei, kein JavaScript, nichts das aufklappt.
   Bewusst hier in base.css und nicht als eigene Datei: ein zusaetzlicher
   CSS-Request kostet LCP (Latte: unter 2,0 s).
   Das CSS des alten Aufklappmenues (.lang-switcher) ist am 24.09.2026
   entfernt worden. Wer die Plugin-Vorgabe wieder einschaltet, braucht es
   zurueck, es steht in der Sicherung /tmp und in der Versionsgeschichte. */
.sprachwahl { display: inline-flex; align-items: center; }
.sprachwahl__aktiv,
.sprachwahl__link {
  display: inline-flex; align-items: center;
  min-height: 38px; padding-inline: 9px;
  font-size: 13px; line-height: 1;
  text-decoration: none; white-space: nowrap;
  letter-spacing: 0.04em;
}
/* Duenner Trenner statt Kasten: der Umschalter soll findbar sein, nicht laut.
   Die Flaeche bleibt trotzdem 38 px hoch, damit das Tippziel nicht schrumpft. */
.sprachwahl > * + * { border-left: 1px solid var(--mittelgrau); }
.sprachwahl__aktiv { color: #fff; font-weight: 700; }
.sprachwahl__link {
  color: var(--textgrau); font-weight: 600;
  transition: color var(--schnell);
}
.sprachwahl__link:hover,
.sprachwahl__link:focus-visible { color: #fff; }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 10px; color: #fff;
}
@media (max-width: 1060px) { /* Burger ab 1060 statt 940 px (07.10.2026): das Menü passt darunter nicht mehr */
  /* Der Sprachumschalter bleibt hier absichtlich stehen: Variante A ist
     schmal und klappt nichts auf, sie passt neben das Burger-Zeichen. */
  .hauptnav, .site-header .btn { display: none; }
  .nav-toggle { display: block; }
  .site-header--offen .hauptnav {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 4px; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--schwarz-soft);
    border-bottom: 1px solid var(--mittelgrau);
    padding: 12px var(--gutter) 26px;
  }
  .site-header--offen .hauptnav > a { padding: 12px 0; font-size: 18px; }
  /* Nur der Knopf im Menü, nicht der Kopfzeilen-Knopf (07.10.2026). Vorher
     `.site-header--offen .btn`: bei 375 px 443 px Seitenbreite, Schließen-Knopf
     außerhalb des Bildes. */
  .site-header--offen .hauptnav__cta-zeile { display: block; width: 100%; margin-top: 14px; }
  .site-header--offen .hauptnav__cta { display: inline-flex; }
  .leistungen-nav { width: 100%; }
  .leistungen-nav__knopf { font-size: 18px; padding: 12px 0; }
  .leistungen-nav__liste {
    position: static; width: 100%; left: 0;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 8px 14px;
    border-left: 2px solid var(--mittelgrau);
    display: none;
  }
  .leistungen-nav[data-offen='true'] .leistungen-nav__liste { display: block; }
  .leistungen-nav:hover .leistungen-nav__liste { display: none; }
  .leistungen-nav[data-offen='true']:hover .leistungen-nav__liste { display: block; }
  /* Audit 08.10.2026 (B3): Untermenü unter dem Elternpunkt statt als Schwebekarte
     daneben, offenes Menü scrollt, wenn es höher ist als das Fenster. */
  .site-header--offen .hauptnav {
    max-height: calc(100vh - 100%); max-height: calc(100dvh - 100%);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .leistungen-nav { flex-wrap: wrap; }
  .leistungen-nav__liste { flex-basis: 100%; }
}

/* ---------- Footer ------------------------------------------------------- */
.site-footer {
  background: var(--schwarz-soft);
  border-top: 1px solid var(--mittelgrau);
  padding-block: clamp(48px, 6vw, 80px) 32px;
}
.site-footer__raster {
  display: grid; gap: 40px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 860px) { .site-footer__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__raster { grid-template-columns: 1fr; } }
.site-footer h3 {
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gelb); margin-bottom: 16px;
}
.site-footer a { color: var(--textgrau-hell); text-decoration: none; font-size: 16px; }
.site-footer a:hover { color: #fff; }
.site-footer li { margin-bottom: 10px; }
/* Elevator Pitch im Footer. Im Prototyp stand das als Inline-Style am
   <p class="prosa">; hier als Klasse, damit es aus dem Customizer kommen kann.
   Werte 1:1 uebernommen: margin-top 16px, font-size 16px, max-width 34ch. */
.site-footer__pitch {
  color: var(--text-sek);
  margin-top: 16px;
  font-size: 16px;
  max-width: 34ch;
}
/* Profile der Firma (LinkedIn, YouTube), dezent unter dem Pitch, 08.10.2026.
   Farbe erbt von .site-footer a (dunkel und modus-hell). Tippziel 32 px hoch. */
.site-footer__profile {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 24px;
}
.site-footer__profile li { margin: 0; }
.site-footer__profile a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; font-size: 15px;
}
.site-footer__profil-symbol { flex: none; width: 20px; height: 20px; }

.site-footer__unten {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--mittelgrau);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  color: var(--textgrau); font-size: 14px;
}

/* ---------- CTA-Band (austauschbarer Block, §Briefing) ------------------- */
.cta-band { background: var(--grund-alt); border-top: 1px solid var(--mittelgrau); }
.cta-band__box {
  display: grid; gap: 32px; align-items: center;
  grid-template-columns: 1.4fr 1fr;
}
@media (max-width: 860px) { .cta-band__box { grid-template-columns: 1fr; } }
.cta-band__zweitpfad { font-size: 16px; color: var(--text-leise); margin-top: 16px; }
.cta-band__zweitpfad a { color: var(--akzent-klein); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bild-Platzhalter (bis echte Fotos da sind) ------------------- */
.platzhalter {
  position: relative;
  background:
    repeating-linear-gradient(45deg, #141414 0 12px, #191919 12px 24px);
  border: 1px dashed var(--hellgrau);
  border-radius: var(--radius);
  display: grid; place-items: center;
  color: var(--textgrau);
  font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase;
  text-align: center; padding: 24px;
  min-height: 240px;
}

/* ---------- Bewegung: bewusst KEIN Scroll-Reveal ------------------------
   Entfernt am 06.09.2026. Begruendung: Der Inhalt ist bereits geladen, eine
   Einblendung beim Scrollen haelt den Leser nur auf. Die Nielsen Norman Group
   misst, dass Nutzer den Unterschied zwischen einer Design-Verzoegerung und
   einer langsamen Seite nicht wahrnehmen: Beides fuehlt sich lahm an. Ab etwa
   500 ms scrollen viele am Element vorbei, bevor es fertig eingeblendet ist.

   Bewegung bleibt dort, wo sie eine Aufgabe hat:
   - Hover: zeigt an, dass etwas anklickbar ist
   - Nutzerinteraktion: FAQ klappt auf, Plus wird zum Kreuz, Menue oeffnet
   Beides ist Reaktion auf eine Handlung, keine Verzoegerung ohne Anlass.

   .reveal bleibt als No-Op bestehen, damit vorhandenes Markup nicht bricht. */
.reveal { opacity: 1; transform: none; }

/* ---------- Hilfsklassen ------------------------------------------------- */
.nur-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.br-ab-tablet { display: none; }
@media (min-width: 760px) { .br-ab-tablet { display: inline; } }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }


/* ---------- Logo als Inline-SVG (Dennis 07.10.2026) ----------------------
   --logo-g ist die Schriftgröße von „eingenetzt", --logo-h kommt aus der SVG.
   Grund (dunkel) ist der Standard, .modus-hell schaltet auf hell. */
.marke { --logo-g: 23px; }
.marke .logo { display: block; width: auto; height: calc(var(--logo-h) * var(--logo-g)); }
.logo__wort { fill: #fff; }
.logo__feld { fill: none; }
.logo__punkt, .logo__zeile { fill: var(--gelb); }
.modus-hell .logo__wort { fill: var(--hell-text); }
.modus-hell .logo__feld { fill: var(--gelb); }
.modus-hell .logo__punkt { fill: #000; }
.modus-hell .logo__zeile { fill: #5a5a5a; }
.marke .logo:not(.logo--zeile) { display: none; }
@media (max-width: 520px) {
  .marke .logo--zeile { display: none; }
  .marke .logo:not(.logo--zeile) { display: block; }
}
@media (min-width: 1061px) { .site-header .marke { --logo-g: 28px; } }
@media (min-width: 1061px) and (max-width: 1180px) { .site-header .marke { --logo-g: 24px; } }
.site-footer .marke { --logo-g: 26px; margin-bottom: 4px; }

/* ---------- Marke mit Zusatzzeile ---------------------------------------
   Die Zeile wird auf die Breite der Wortmarke gesperrt und verschwindet auf
   kleinen Bildschirmen. Grund: unter rund 20 px Wortmarke ist sie nicht mehr
   lesbar und wird zu grauem Rauschen. */
.marke { display: inline-block; text-decoration: none; line-height: 1; }
.marke__zeile {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gelb);
  white-space: nowrap;
}
@media (max-width: 520px) { .marke__zeile { display: none; } }
.site-footer .marke__zeile { margin-bottom: 4px; }

/* QA 08.10.2026 (K7): Tippziele im Fuss mindestens 24 px hoch (WCAG 2.5.8).
   Polster innen, Gegenrand aussen, damit Zeilenabstand und Raster bleiben. */
.site-footer .menu > li > a,
.site-footer__unten a,
.funnel-fuss a { display: inline-block; padding-block: 3px; margin-block: -3px; }

/* Aus inhalt.css hierher verlegt (14.10.2026): inhalt.css laedt nur auf
   Artikeln, Archiven und Standardseiten, nie auf Funnel-Seiten. Bis dahin
   hatten Kopf und Fuss der Squeeze-Pages gar keine Gestaltung. */
/* ------------------------------------------------------------------ */
/* Funnel-Seiten (Template „Funnel-Seite ohne Navigation")             */
/* Weniger Ausgaenge ist der ganze Zweck: Kopf traegt nur die          */
/* Wortmarke, Fuss nur das Rechtliche.                                  */
/* ------------------------------------------------------------------ */
.funnel-kopf {
	/* Schwarze Leiste, helle Wortmarke (Dennis 14.10.2026) */
	background: #000;
	padding-block: 20px;
}
.funnel-kopf .wortmarke {
	font-weight: 800;
	letter-spacing: -.02em;
	text-decoration: none;
	color: inherit;
}
.funnel-inhalt {
	min-height: 60vh;
}
.funnel-fuss {
	padding-block: 40px 28px;
	font-size: .8125rem;
	color: var(--text-leise, #5a5a5a);
}
.funnel-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 20px;
	align-items: baseline;
	margin: 0;
}
.funnel-fuss__rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.funnel-fuss__rechtliches a,
.funnel-fuss__einstellungen { color: inherit; }
/* Wortmarke wie im Seitenkopf (QA 08.10.2026, K2) */
.funnel-kopf .marke { --logo-g: 24px; display: inline-block; flex: none; }
.funnel-kopf .container { display: flex; align-items: center; gap: 22px; }
.funnel-kopf__claim {
	padding-left: 22px;
	border-left: 1px solid #3a3a3a;
	font-size: 14px; line-height: 1.4; font-weight: 600;
	color: #d6d6d6;
	max-width: 30em;
}
.funnel-fuss__marke {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	margin-bottom: 24px; padding-bottom: 24px;
	border-bottom: 1px solid var(--linie, #e3ded4);
	text-align: center;
}
.funnel-fuss__marke .marke { --logo-g: 22px; }
.funnel-fuss__phrase { margin: 0; font-size: 14px; font-weight: 600; color: var(--hell-text, #141414); }
@media (max-width: 600px) {
	.funnel-kopf .container { gap: 14px; }
	.funnel-kopf__claim { padding-left: 14px; font-size: 12px; }
}
/* Helle Wortmarke auf Schwarz, auch wenn die Seite im Hell-Modus laeuft */
.funnel .funnel-kopf .logo__wort { fill: #fff; }
.funnel .funnel-kopf .logo__feld { fill: none; }
.funnel .funnel-kopf .logo__punkt,
.funnel .funnel-kopf .logo__zeile { fill: var(--gelb); }


/* Unterstrichene Hervorhebung im Fliesstext (Danke-Seite, Dennis 16.10.2026) */
.unterstrichen { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.unterstrichen .wort { text-decoration: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Calendly-Overlay: Schliessen-Knopf mittig auf der rechten oberen Ecke
   der weissen Kalenderkarte (Dennis 17.10.2026). site.js haengt Calendlys X
   dafuer in den Kalenderkasten (.calendly-popup). Die Karte liegt im iframe,
   ist also nicht messbar; ihre Lage ist am 17.10.2026 mit Playwright
   gemessen: 66 px unter der Kastenoberkante, mittig, Breite min(680 px, 95 %),
   ab 1250 px Fensterbreite (Kasten 1000 px) 800 px. Unter 650 px fuellt die
   Karte den Kasten, dort sitzt das X ueber dem Kasten.
   Gelber Kreis mit schwarzem X, 44 px Tippziel. */
.calendly-overlay .calendly-popup .calendly-popup-close {
  position: absolute !important;
  top: -50px !important; right: 0 !important; left: auto !important;
  width: 44px !important; height: 44px !important;
  border-radius: 50%;
  background: var(--gelb, #fed526) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 20px no-repeat !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  cursor: pointer; z-index: 10;
}
@media (min-width: 650px) {
  .calendly-overlay .calendly-popup .calendly-popup-close {
    top: 44px !important;
    right: max(0px, calc((100% - min(680px, 95%)) / 2 - 22px)) !important;
  }
}
@media (min-width: 1250px) {
  .calendly-overlay .calendly-popup .calendly-popup-close {
    right: calc((100% - 800px) / 2 - 22px) !important;
  }
}
.calendly-overlay .calendly-popup .calendly-popup-close:hover { background-color: #ffe14f !important; }
.calendly-overlay .calendly-popup .calendly-popup-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Hinweis hinter Calendly-Links im Fliesstext (inc/calendly-links.php) */
.calendly-hinweis { font-size: .85em; color: var(--hell-text-sek, #5a5a5a); }

/* VDI-Foerdermitgliedschaft im Footer (17.10.2026): weisse Kachel = Schutzraum */
.site-footer__mitglied { margin: 28px 0 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.site-footer__mitglied-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--textgrau-hell, #bbb); }
.site-footer__mitglied img { display: block; width: 120px; height: auto; box-sizing: content-box; padding: 16px; background: #fff; border-radius: 6px; }