/* =====================================================================
   5FSoftware · Komponenten-Bibliothek v2 für Elementor (Hello Child)
   Quelle: 5f-components-2.html · inkl. B19 Content-Tabs, B20 Video-
   Kachel ausklappbar, B21 Feature-Tabs, .sicherheit-dark, Neutral 200.
   Klassen im Elementor-Feld "CSS-Klassen" vergeben, nie im Widget stylen.
   ===================================================================== */

/* =================================================================
   NEWS TICKER (dünne Leiste, drei Varianten: Navy · Weiß · Blau)
   Brand-Kontrastregeln: Navy+Weiß, Weiß+Blau, Blau+Weiß. Kein Lila.
   ================================================================= */
.news-bar{background:var(--c-base);color:var(--c-white);font-size:var(--fs-caption);
  letter-spacing:0.01em;overflow:hidden;position:relative;height:34px;border-radius:var(--r-card);
  --news-bg:var(--c-base);--news-fade:var(--c-base)}
.news-bar::before,.news-bar::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.news-bar::before{left:0;background:linear-gradient(90deg,var(--news-fade),transparent)}
.news-bar::after{right:0;background:linear-gradient(270deg,var(--news-fade),transparent)}
.news-bar .track{display:flex;gap:var(--s8);align-items:center;height:100%;width:max-content;
  animation:news-scroll 45s linear infinite;padding-left:60px}
.news-bar .track:hover{animation-play-state:paused}
.news-bar .item{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;flex-shrink:0}
.news-bar .item::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;opacity:0.9}
.news-bar .item .tag{font-size:10px;font-weight:var(--fw-semibold);letter-spacing:0.08em;text-transform:uppercase;margin-right:4px}
@keyframes news-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.news-bar .track{animation:none;justify-content:center;padding-left:0}}

/* Navy (default) · Weiß auf Navy, Akzent Weiß */
.news-bar{background:var(--c-base);color:rgba(255,255,255,0.82)}
.news-bar .item:hover{color:var(--c-white)}
.news-bar .item .tag{color:var(--c-white)}
.news-bar .item::before{background:var(--c-white)}

/* Weiß · Navy-Text auf Weiß, Akzent Blau */
.news-bar.is-white{background:var(--c-white);color:var(--c-text-muted);border:1px solid var(--c-neutral-300);--news-fade:#ffffff}
.news-bar.is-white .item:hover{color:var(--c-base)}
.news-bar.is-white .item .tag{color:var(--c-primary)}
.news-bar.is-white .item::before{background:var(--c-primary)}

/* Blau · Weiß auf Brand-Blau (7.19:1), kein transluzentes Weiß (würde lila) */
.news-bar.is-blue{background:var(--c-primary);color:var(--c-white);--news-fade:#432df4}
.news-bar.is-blue .item{color:var(--c-white)}
.news-bar.is-blue .item:hover{color:var(--c-white);text-decoration:underline}
.news-bar.is-blue .item .tag{color:var(--c-white)}
.news-bar.is-blue .item::before{background:var(--c-white);opacity:1}


/* =================================================================
   TOKEN-FREE BUILDING BLOCKS (used throughout the page itself)
   Buttons, pills, inputs reused in demos
   ================================================================= */

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;
  border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  border:1.5px solid transparent;cursor:pointer;transition:all var(--dur) var(--ease);
  text-decoration:none;font-family:inherit;min-height:48px;white-space:nowrap}
.btn--primary{background:var(--c-primary);color:var(--c-white)}
.btn--primary:hover{background:#3520d4;color:var(--c-white)}
.btn--primary:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.btn--primary:disabled,.btn--primary.is-disabled{opacity:0.5;cursor:not-allowed}
.btn--secondary{background:transparent;color:var(--c-base);border-color:var(--c-base)}
.btn--secondary:hover{background:var(--c-base);color:var(--c-white);border-color:var(--c-base)}
.btn--secondary:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.btn--ghost{background:transparent;color:var(--c-primary);padding-left:0;padding-right:0;min-height:auto}
.btn--ghost:hover{text-decoration:underline;color:var(--c-primary)}
.btn--sm{padding:8px 16px;font-size:13px;min-height:32px}
.btn--lg{padding:16px 32px;font-size:16px;min-height:52px}
.btn--full{width:100%}
.btn svg{width:15px;height:15px}
/* On dark background variants */
.btn--on-color-primary{background:var(--c-white);color:var(--c-primary)}
.btn--on-color-primary:hover{background:var(--c-base);color:var(--c-white)}
.btn--on-color-secondary{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,0.6)}
.btn--on-color-secondary:hover{background:var(--c-white);color:var(--c-primary);border-color:var(--c-white)}

/* PILLS */
.pill{display:inline-flex;align-items:center;background:var(--c-primary);color:var(--c-white);
  padding:6px 14px;border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.02em;line-height:1.2}
.pill.lg{padding:8px 18px;font-size:var(--fs-body-sm)}
.pill.sm{padding:4px 11px;font-size:11px}
.pill.outline{background:transparent;border:1.5px solid currentColor;padding:5px 12px}
/* Audit 27.07 · Farbcodierung nach Kategorie ist seit dem Feedback vom 11.06
   aufgehoben (Farben sind von Themen entkoppelt). Die drei Sonderfarben lagen
   zudem außerhalb der Palette und #4a8a55 fiel mit 4,15:1 durch AA.
   Die Klassen bleiben stehen, damit bestehende Seiten nicht brechen — sie
   färben nur nicht mehr unterschiedlich. */
.pill.outline.cat-daten,
.pill.outline.cat-aufgaben,
.pill.outline.cat-sicherheit,
.pill.outline.cat-philosophie{color:var(--c-base)}

/* INPUTS */
.input,.textarea,.select{width:100%;padding:11px 14px;font:inherit;font-size:var(--fs-body);
  background:var(--c-white);color:var(--c-base);border:1.5px solid var(--c-border-field);border-radius:var(--r-btn);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);font-family:inherit}
.input:hover,.textarea:hover,.select:hover{border-color:var(--c-base)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(67,45,244,0.18)}
.input.is-error{border-color:var(--c-red)}
.input:disabled,.textarea:disabled,.select:disabled{opacity:0.5;cursor:not-allowed;background:var(--c-neutral-300)}
.textarea{min-height:120px;resize:vertical}
.field-row{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s4)}
.field-row label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--c-base)}
.field-row .hint{font-size:var(--fs-caption);color:var(--c-text-muted)}
.field-row .err{font-size:var(--fs-caption);color:var(--c-red);font-weight:var(--fw-medium)}

.cb,.rd{appearance:none;width:20px;height:20px;border:1.5px solid var(--c-border);background:var(--c-white);
  cursor:pointer;display:grid;place-items:center;transition:all var(--dur) var(--ease);flex-shrink:0;margin:0}
.cb{border-radius:5px}
.rd{border-radius:50%}
.cb:hover,.rd:hover{border-color:var(--c-base)}
.cb:focus-visible,.rd:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.cb:checked,.rd:checked{background:var(--c-primary);border-color:var(--c-primary)}
.cb:checked::after{content:"";width:5px;height:9px;border:solid var(--c-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.rd:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-white)}
.check-row{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);line-height:1.45}
.check-row label{cursor:pointer;color:var(--c-text)}

/* =================================================================
   A1 · DESKTOP NAV
   ================================================================= */
.nav-demo{margin-top:var(--s4);border:1px solid var(--c-neutral-300);border-radius:var(--r-card);background:var(--c-white);position:relative;padding-bottom:280px}
.nav-demo .nav-panel{position:absolute}
.nav-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5);padding:0 var(--s5);height:64px;border-bottom:1px solid var(--c-neutral-300);background:rgba(255,255,255,0.92);backdrop-filter:blur(12px)}
.nav-bar.scrolled{box-shadow:0 1px 0 rgba(28,36,51,0.04),0 6px 24px rgba(28,36,51,0.06)}
.nav-logo{display:inline-flex;align-items:center;gap:8px;color:var(--c-base);text-decoration:none;justify-self:start}
.nav-logo svg{width:26px;height:26px}
.nav-logo svg path{fill:var(--c-base)}
.nav-logo .word{font-weight:var(--fw-semibold);font-size:var(--fs-subline);letter-spacing:-0.01em}
.nav-items{display:flex;gap:var(--s5);justify-self:center;align-items:center}
.nav-link{position:relative;display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-subline);
  font-weight:var(--fw-medium-2);color:var(--c-base);padding:6px 2px;text-decoration:none;
  transition:color var(--dur) var(--ease)}
.nav-link .chev{width:11px;height:11px;display:inline-block;transition:transform var(--dur) var(--ease);color:var(--c-text-muted)}
.nav-link .chev svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{color:var(--c-primary)}
.nav-item{position:relative}
.nav-item:hover .nav-link .chev,.nav-item.is-open .nav-link .chev{transform:rotate(180deg)}
.nav-panel{position:absolute;top:calc(100% + 22px);left:50%;transform:translateX(-50%) translateY(-8px) scale(0.98);
  background:var(--c-white);border:1px solid var(--c-neutral-300);border-radius:18px;
  box-shadow:var(--sh-2);padding:var(--s7) var(--s7);min-width:640px;z-index:30;
  opacity:0;visibility:hidden;transform-origin:top center;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s7);
  transition:opacity 200ms var(--ease),transform 260ms cubic-bezier(0.16,1,0.3,1),visibility 0s linear 200ms}
.nav-item:hover .nav-panel,.nav-item.is-open .nav-panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity 200ms var(--ease),transform 300ms cubic-bezier(0.16,1,0.3,1),visibility 0s}
.nav-panel h5,.nav-panel .as-h5{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s4)}
.nav-panel a{display:block;padding:8px 0;font-size:var(--fs-subline);color:var(--c-base);text-decoration:none;transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.nav-panel a:hover{color:var(--c-primary);padding-left:4px}
.nav-right{display:flex;align-items:center;gap:var(--s4);justify-self:end}
.lang-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  color:var(--c-text-muted);cursor:pointer;padding:6px 8px;border-radius:var(--r-sm);
  border:1px solid var(--c-neutral-300);background:var(--c-white)}
.lang-btn:hover{color:var(--c-base);border-color:var(--c-neutral-400)}
.nav-login{font-size:var(--fs-subline);font-weight:var(--fw-medium-2);color:var(--c-base);text-decoration:none}
.nav-login:hover{color:var(--c-primary)}
.nav-cta{display:inline-flex;align-items:center;padding:9px 18px;background:var(--c-primary);color:var(--c-white);
  border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);border:none;cursor:pointer}
.nav-cta:hover{background:#3520d4;color:var(--c-white)}
.scroll-strip{display:flex;gap:var(--s5);align-items:center;padding:var(--s4) var(--s5);background:var(--c-neutral-300);font-size:var(--fs-caption);color:var(--c-text-muted)}
.scroll-strip .pip{width:8px;height:8px;border-radius:50%;background:var(--c-primary)}

/* =================================================================
   A2 · MOBILE NAV + DRAWER
   ================================================================= */
.mobile-nav-demo{display:grid;grid-template-columns:1fr 320px;gap:var(--s4);margin-top:var(--s4);align-items:start}
@media(max-width:768px){.mobile-nav-demo{grid-template-columns:1fr}}
.mobile-bar{border:1px solid var(--c-neutral-300);border-radius:var(--r-card);overflow:hidden;background:var(--c-white);height:200px;position:relative}
.mobile-bar .bar{display:flex;align-items:center;justify-content:space-between;padding:0 var(--s4);height:56px;border-bottom:1px solid var(--c-neutral-300)}
.mobile-bar .placeholder{padding:var(--s5);color:var(--c-text-muted);font-size:var(--fs-body-sm);text-align:center}
.hamburger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:none;background:transparent;cursor:pointer;border-radius:var(--r-sm)}
.hamburger span{display:block;width:22px;height:2px;background:var(--c-base);transition:transform 0.3s var(--ease),opacity 0.2s var(--ease);transform-origin:center}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer-static{border:1px solid var(--c-neutral-300);border-radius:var(--r-card);background:var(--c-white);overflow:hidden;display:flex;flex-direction:column}
.drawer-static .head{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) var(--s5);border-bottom:1px solid var(--c-neutral-300)}
.drawer-static .items{display:flex;flex-direction:column;padding:var(--s4) 0}
.drawer-static .items a{padding:14px var(--s5);color:var(--c-base);font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);text-decoration:none}
.drawer-static .items a:hover{background:var(--c-neutral-300)}
.drawer-static .foot{padding:var(--s4) var(--s5);border-top:1px solid var(--c-neutral-300);display:flex;flex-direction:column;gap:var(--s3)}

/* =================================================================
   A3 · HOME HERO (Variant A · zentriert, aus home-v2)
   Punktraster im Hintergrund · sehr dezent · radiale Maske an den Rändern
   ================================================================= */
.hero-home{position:relative;padding:var(--s10) var(--s5);background:var(--c-white);overflow:hidden;
  border-radius:var(--r-card-lg);border:1px solid var(--c-neutral-300);min-height:520px;text-align:center;
  display:flex;align-items:center;justify-content:center}
.hero-home canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0.10;
  -webkit-mask-image:radial-gradient(ellipse 82% 78% at 50% 46%,#000 34%,transparent 100%);
  mask-image:radial-gradient(ellipse 82% 78% at 50% 46%,#000 34%,transparent 100%)}
.hero-home::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 48% 54% at 50% 47%,var(--c-white) 0%,rgba(255,255,255,0.82) 36%,rgba(255,255,255,0) 72%)}
.hero-home .inner{position:relative;z-index:2;max-width:780px;width:100%;margin-inline:auto}
.hero-home .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s5)}
.hero-home h1,.hero-home .as-h1{font-size:clamp(40px,5vw,72px);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h1);
  line-height:var(--lh-heading);color:var(--c-base);font-variation-settings:"opsz" 32;max-width:14ch;margin:0 auto}
.hero-home .subline{margin-top:var(--s5);font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;max-width:42ch;margin-left:auto;margin-right:auto}
.hero-home .actions{margin-top:var(--s6);display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
@media(max-width:520px){.hero-home .actions{flex-direction:column;align-items:stretch}}

/* Variant B · linksbündig mit Raster rechts */
.hero-home.split{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s7);text-align:left;
  align-items:center;padding:var(--s10) var(--s8);min-height:520px}
.hero-home.split::after{display:none}
.hero-home.split canvas{position:relative;width:100%;height:100%;min-height:360px;opacity:0.16;
  border-radius:var(--r-card);background:var(--c-bg-subtle);
  -webkit-mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 76% 76% at 50% 50%,#000 30%,transparent 100%)}
.hero-home.split .inner{max-width:none}
.hero-home.split h1,.hero-home.split .as-h1{margin:0;max-width:none}
.hero-home.split .subline{margin-left:0;margin-right:0;max-width:48ch}
.hero-home.split .actions{justify-content:flex-start}
@media(max-width:860px){.hero-home.split{grid-template-columns:1fr;text-align:left;padding:var(--s9) var(--s5)}
  .hero-home.split canvas{min-height:240px}}

/* =================================================================
   A4 · INNER PAGE HERO
   ================================================================= */
.hero-inner{padding:var(--s10) var(--s8);background:var(--c-neutral-300);border-radius:var(--r-card-lg);
  display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s9);align-items:center;margin-top:var(--s4)}
.hero-inner.no-image{grid-template-columns:1fr}
.hero-inner h2,.hero-inner .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);color:var(--c-base);font-variation-settings:"opsz" 32}
.hero-inner p{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.55;max-width:52ch}
.hero-inner .actions{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero-inner .image-slot{border-radius:var(--r-card-lg);background:linear-gradient(135deg,rgba(67,45,244,0.10),rgba(67,45,244,0.02));aspect-ratio:1/1;display:grid;place-items:center;color:var(--c-text-muted);font-size:var(--fs-caption);font-family:var(--font);font-weight:var(--fw-medium-2)}
@media(max-width:768px){.hero-inner{grid-template-columns:1fr;padding:var(--s8) var(--s5);gap:var(--s7)}}

/* =================================================================
   A5 · TRUST BAR (aus home-v2, mit echten Logos und Edge-Fade)
   ================================================================= */
.trust{margin-top:0;padding:var(--s5) 0 var(--s6);background:var(--c-white);border-radius:var(--r-card);
  border:1px solid var(--c-neutral-300);overflow:hidden;position:relative}
.trust .label{text-align:center;font-size:var(--fs-caption);color:var(--c-text-muted);
  letter-spacing:0.06em;text-transform:uppercase;font-weight:var(--fw-semibold);margin-bottom:var(--s4)}
.trust::before,.trust::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.trust::before{left:0;background:linear-gradient(90deg,var(--c-white),transparent)}
.trust::after{right:0;background:linear-gradient(270deg,var(--c-white),transparent)}
.trust .track{display:flex;gap:var(--s7);align-items:center;animation:trust-scroll 50s linear infinite;width:max-content}
.trust-item{flex-shrink:0;width:160px;height:60px;object-fit:contain;opacity:1;filter:none;
  transition:filter var(--dur) var(--ease),opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.trust .track:hover .trust-item{filter:grayscale(1);opacity:0.35}
.trust .track:hover .trust-item:hover{filter:grayscale(0);opacity:1;transform:scale(1.05)}
@keyframes trust-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.trust .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}
/* Trust Bar H06 (Theme 1.10.47): Band als Schalter .trust-hit; Hover-Pause nur mit Zeigegerät, .is-paused per Klick/Tippen/Tastatur, .is-playing hebt die Hover-Pause bis mouseleave auf */
@media(hover:hover){.trust:not(.is-playing):hover .track{animation-play-state:paused}}
.trust.is-paused .track{animation-play-state:paused}
.trust.is-ready{cursor:pointer}
.trust-hit{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit}
.trust-hit:focus{outline:none}
.trust-hit:focus-visible{outline:3px solid var(--c-primary);outline-offset:-3px}
.elementor-editor-active .trust-hit{display:none}
@media(prefers-reduced-motion:reduce){
  .trust.is-ready{cursor:auto}
  .trust-hit{display:none}
  .trust::before,.trust::after{display:none}
  .trust .track{gap:var(--s5) var(--s7);padding:0 var(--s5)}
  .trust .track>[aria-hidden="true"]{display:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:600px){
  .trust .track{gap:var(--s4) var(--s5)}
  .trust .track .trust-item{width:120px;height:48px}
}

/* =================================================================
   A6 · SECURITY SECTION (aus home-v2)
   Eyebrow + Head + Cred · Seals (Logos + Badges) · Stats
   ================================================================= */
.sicherheit-demo{margin-top:var(--s4);padding:var(--s9) var(--s8);background:var(--c-white);
  border-radius:var(--r-card-lg);border:1px solid var(--c-neutral-300)}
@media(max-width:860px){.sicherheit-demo{padding:var(--s7) var(--s5)}}
.sicherheit-demo .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s5)}
.sicherheit-demo .head{max-width:66.67%;margin-bottom:var(--s8)}
.sicherheit-demo .head h2,.sicherheit-demo .head .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;
  line-height:1.2;font-variation-settings:"opsz" 32;margin-bottom:var(--s4)}
.sicherheit-demo .head h2 .muted,.sicherheit-demo .head .as-h2 .muted{color:var(--c-text-muted)}
.sicherheit-demo .cred{font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);color:var(--c-base);letter-spacing:-0.01em}
@media(max-width:768px){.sicherheit-demo .head{max-width:100%}}

.sicherheit-demo .seals{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5) var(--s7);margin:var(--s8) 0}
.sicherheit-demo .seal{display:flex;align-items:center;justify-content:center}
.sicherheit-demo .seal img{display:block;width:auto;object-fit:contain}
.sicherheit-demo .seal--logo img{height:36px;max-width:200px}
.sicherheit-demo .seal--badge img{height:96px;max-width:140px}

.sicherheit-demo .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.sicherheit-demo .stat .num{font-size:clamp(40px,5vw,64px);font-weight:var(--fw-medium-2);letter-spacing:-0.04em;
  line-height:0.95;color:var(--c-base);font-variation-settings:"opsz" 32;display:flex;align-items:flex-start}
.sicherheit-demo .stat .num .unit{font-size:0.42em;color:var(--c-primary);font-weight:var(--fw-medium-2);margin-left:4px;margin-top:0.15em}
.sicherheit-demo .stat .label{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.4;margin-top:var(--s4);max-width:22ch;font-weight:var(--fw-regular-2)}
@media(max-width:768px){
  .sicherheit-demo .stat-row{grid-template-columns:1fr;gap:var(--s6)}
  .sicherheit-demo .seals{justify-content:center;gap:var(--s6)}
}

/* A6 · Variante Dunkelblau: boxed Karte auf weißem/grauem Abschnitts-Hintergrund.
   Regel (Kundenfeedback Juli 2026): Dunkelblau nur für größere Karten/Slider,
   niemals für ganze Abschnitte. */
.sicherheit-dark{margin-top:var(--s4);background:var(--c-base);border-radius:var(--r-card-lg);
  padding:var(--s9) var(--s8);display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s8);
  align-items:center;color:var(--c-white)}
.sicherheit-dark .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary-t2);margin-bottom:var(--s4)}
.sicherheit-dark h2,.sicherheit-dark .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;
  line-height:1.2;font-variation-settings:"opsz" 32;color:var(--c-white);margin-bottom:var(--s4)}
.sicherheit-dark p{font-size:var(--fs-body);color:rgba(255,255,255,0.72);line-height:1.5;max-width:44ch}
.sicherheit-dark ul{list-style:none;display:grid;gap:var(--s4)}
.sicherheit-dark li{position:relative;padding-left:22px;font-size:var(--fs-subline);line-height:1.45;color:var(--c-white)}
.sicherheit-dark li::before{content:"";position:absolute;left:0;top:0.5em;width:8px;height:8px;
  border-radius:50%;background:var(--c-primary-t2)}
@media(max-width:860px){.sicherheit-dark{grid-template-columns:1fr;padding:var(--s7) var(--s5);gap:var(--s6)}}

/* =================================================================
   A7 · FEATURE CARDS (Option D)
   ================================================================= */
.fc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6);margin-top:var(--s4)}
/* Brand-Book Qualitätskontrast-Variante (Original, 4 Farben) */
.fc.fc-sicherheit{background:var(--c-red)}
.fc.fc-aufgaben{background:var(--c-amber)}
.fc.fc-daten{background:var(--c-primary)}
.fc.fc-philosophie{background:var(--c-green)}
.fc.fc-sicherheit .fc-title,.fc.fc-sicherheit .fc-icon{color:var(--c-red-t2)}
.fc.fc-aufgaben .fc-title,.fc.fc-aufgaben .fc-icon{color:var(--c-amber-t2)}
.fc.fc-daten .fc-title,.fc.fc-daten .fc-icon{color:var(--c-primary-t2)}
.fc.fc-philosophie .fc-title,.fc.fc-philosophie .fc-icon{color:var(--c-green-t2)}
.fc.fc-sicherheit .fc-desc,.fc.fc-aufgaben .fc-desc,.fc.fc-daten .fc-desc,.fc.fc-philosophie .fc-desc{color:var(--c-white)}
.fc .hex-tag{position:absolute;left:var(--s6);bottom:var(--s6);font-size:11px;font-family:var(--font);font-weight:var(--fw-medium-2);letter-spacing:0.02em;z-index:3;color:inherit;opacity:0.85}
.fc.fc-sicherheit:hover{box-shadow:0 16px 40px rgba(237,59,81,0.20)}
.fc.fc-aufgaben:hover{box-shadow:0 16px 40px rgba(246,166,0,0.20)}
.fc.fc-philosophie:hover{box-shadow:0 16px 40px rgba(131,204,142,0.20)}
@media(max-width:1024px){.fc-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.fc-row{grid-template-columns:1fr}}
.fc{background:var(--c-primary);border-radius:var(--r-card-lg);padding:var(--s6);aspect-ratio:1/1;
  position:relative;overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  transition:transform var(--dur) var(--ease),box-shadow 0.4s var(--ease)}
.fc:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(67,45,244,0.20)}
.fc:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.fc .fc-title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--c-white);
  letter-spacing:-0.025em;line-height:1.1;position:relative;z-index:3;max-width:14ch}
.fc .fc-icon{position:absolute;bottom:var(--s6);right:var(--s6);width:38%;max-width:90px;
  color:var(--c-white);opacity:0.92;z-index:1;
  transition:opacity 0.4s var(--ease),transform 0.5s var(--ease)}
.fc .fc-icon .ic{width:100%;height:100%}
.fc .fc-icon svg{width:100%;height:auto;display:block}
.fc:hover .fc-icon{opacity:0;transform:translate(12px,12px)}
.fc .fc-desc{position:absolute;bottom:var(--s6);left:var(--s6);right:var(--s6);
  font-size:var(--fs-body-sm);color:var(--c-white);line-height:1.5;
  opacity:0;transform:translateY(14px);z-index:2;
  transition:opacity 0.45s var(--ease) 0.08s,transform 0.5s var(--ease) 0.08s}
.fc:hover .fc-desc{opacity:1;transform:translateY(0)}

/* =================================================================
   A8 · BENTO GRID + MODAL
   ================================================================= */
.bento{margin-top:var(--s4);background:var(--c-bg-subtle);padding:var(--s7) var(--s6);border-radius:var(--r-card-lg);
  --bento-section:var(--c-bg-subtle);--bento-card:var(--c-white);--bento-border:var(--c-border-subtle);--bento-radius:16px}
.bento-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bento .row1-a{grid-column:span 2}
.bento .row1-b{grid-column:span 1}
.bento .row2{grid-column:span 1}
.bento .row1-a,.bento .row1-b{min-height:300px}
.bento .card{background:var(--bento-card);border:1px solid var(--bento-border);
  border-radius:var(--bento-radius);position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:340px;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.bento .card:hover{border-color:var(--c-neutral-400);box-shadow:0 12px 32px rgba(28,36,51,0.06)}
.bento .card-head{padding:28px 28px 0;position:relative;z-index:3}
.bento .card h3,.bento .card .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;line-height:1.2;
  font-variation-settings:"opsz" 32;max-width:18ch;padding-right:60px;color:var(--c-text)}
.bento .card .sub{font-size:var(--fs-body-sm);color:var(--c-text-muted);margin-top:10px;max-width:34ch;line-height:1.5}
.bento .expand{position:absolute;top:24px;right:24px;width:32px;height:32px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;color:var(--c-text-muted);
  background:var(--bento-section);transition:all .2s var(--ease);z-index:4;cursor:pointer;
  border:none;padding:0;font-family:inherit}
.bento .card:hover .expand{background:var(--c-primary);color:#fff}
.bento .expand svg{width:15px;height:15px}
.bento .card-media{margin-top:auto;position:relative;z-index:2}
.bento .media-angled{padding:24px 0 0 28px;text-align:right}
.bento .media-angled img{width:auto;max-width:92%;max-height:200px;margin-left:auto;display:block;
  filter:drop-shadow(0 20px 40px rgba(28,36,51,0.14))}
.bento .media-frontal{margin-top:auto;padding-top:20px}
.bento .media-frontal .frame{margin:0 20px;border-radius:8px 8px 0 0;overflow:hidden;
  border:1px solid var(--bento-border);border-bottom:none;
  box-shadow:0 14px 32px rgba(28,36,51,0.10)}
.bento .media-frontal img{width:100%;display:block}
.bento /* 30.07: Eigen-Padding raus — stammte vom alten Layout (Zahl unten);
   jetzt tragen Zahl und Kopf ihr Padding selbst, Inset einheitlich 28px. */
.card--stat{justify-content:flex-start;align-items:stretch;padding:0}
.bento .card--stat .stat-num{font-size:clamp(40px,5vw,72px);font-weight:var(--fw-medium-2);letter-spacing:-0.04em;
  line-height:0.95;color:var(--c-primary);font-variation-settings:"opsz" 32}
.bento .card--stat h3,.bento .card--stat .as-h3{margin-top:16px;padding-right:0}
.bento .card--stat .sub{margin-top:8px}
.bento .card--icon{justify-content:flex-start}
.bento /* 30.07: Icons saßen zu dicht am rechten Rand (Kundenfeedback) —
   Innenabstand rauf, Maske statt <img> für Palettenfarben. */
.media-icon{padding:0 40px 36px;margin-top:auto;display:flex;justify-content:flex-end}
.micon{width:132px;height:132px;display:block;background:var(--c-base);
  -webkit-mask-image:var(--micon);mask-image:var(--micon);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
.micon--violett{background:var(--c-primary-t2)}
.micon--neutral{background:var(--c-neutral-300)}
@media(max-width:700px){.media-icon{padding:0 28px 28px}.micon{width:104px;height:104px}}

/* Stat-Karte: Zahl oben, Titel darunter (Referenz 30.07). Zahl sitzt
   außerhalb von .card-head → eigener Innenabstand. */
.card--stat .stat-num--top{padding:28px 28px 0;margin-bottom:var(--s2)}
.card--stat .card-head h3,.card--stat .card-head .as-h3{margin-top:0}
.bento .media-icon svg{width:120px;height:120px;color:var(--c-primary);opacity:0.16}
@media(max-width:768px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .bento .row1-a{grid-column:span 2}
  .bento .row1-b{grid-column:span 2}
  .bento .row2{grid-column:span 1}
}
@media(max-width:520px){
  .bento-grid{grid-template-columns:1fr}
  .bento .row1-a,.bento .row1-b,.bento .row2{grid-column:span 1}
  .bento .card{min-height:300px}
}

/* Modal */
.modal-shell{position:fixed;inset:0;z-index:300;display:none}
.modal-shell.is-open{display:block}
.modal-bd{position:absolute;inset:0;background:rgba(28,36,51,0.6);backdrop-filter:blur(4px);
  animation:bd-in .3s var(--ease)}
.modal-pn{position:relative;max-width:780px;margin:5vh auto;background:var(--c-white);border-radius:var(--r-card-lg);
  box-shadow:var(--sh-3);overflow:hidden;padding:var(--s7);animation:pn-in .3s var(--ease)}
.modal-x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:var(--r-pill);background:var(--c-base);color:var(--c-white);
  display:grid;place-items:center;border:none;cursor:pointer;transition:background var(--dur) var(--ease)}
.modal-x:hover{background:var(--c-primary);color:var(--c-white)}
.modal-x svg{width:18px;height:18px}
@keyframes bd-in{from{opacity:0}to{opacity:1}}
@keyframes pn-in{from{opacity:0;transform:scale(0.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
body.modal-open{overflow:hidden}

.modal-static{margin-top:var(--s4);padding:var(--s7);background:var(--c-base);border-radius:var(--r-card-lg);
  position:relative}
.modal-static-panel{max-width:680px;margin:0 auto;background:var(--c-white);padding:var(--s7);border-radius:var(--r-card);position:relative}

/* =================================================================
   A9 · TESTIMONIALS
   ================================================================= */
.testi{margin-top:var(--s4)}
.testi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:768px){.testi-row{grid-template-columns:1fr}}
.testi-card{background:var(--c-bg-subtle);padding:var(--s7);border-radius:var(--r-card-lg);display:flex;flex-direction:column;gap:var(--s5)}
.testi-card blockquote{font-size:var(--fs-body-lg);font-weight:var(--fw-light-2);line-height:1.55;color:var(--c-base);letter-spacing:-0.005em}
.testi-card blockquote::before{content:"\201C";display:block;font-size:48px;line-height:0.4;color:var(--c-primary);margin-bottom:var(--s4);font-family:Georgia,serif}
.testi-card .author{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.testi-card .name{font-weight:var(--fw-semibold);color:var(--c-base);font-size:var(--fs-body-sm)}
.testi-card .role{font-size:var(--fs-caption);color:var(--c-text-muted)}
.dots{display:flex;justify-content:center;gap:8px;margin-top:var(--s5)}
.dots button{width:8px;height:8px;border-radius:50%;background:var(--c-neutral-400);border:none;cursor:pointer;transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.dots button.active{background:var(--c-primary)}
.dots button:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}

/* =================================================================
   A10 · FAQ ACCORDION — entfernt (25.07)
   Legacy-Block aus einem frühen Seiten-Port; kollidierte über die
   Klassennamen .faq/.faq-item/.faq-q/.faq-a mit dem 5F-FAQ-Widget und
   legte eine Karten-Border um die gesamte Sektion. Kein Markup nutzt
   .faq-a-inner/.icn mehr — maßgeblich ist allein der Widget-Block
   („FAQ · Widget-Styles") weiter unten.
   ================================================================= */

/* =================================================================
   A11 · BLOG PREVIEW — entfernt (04.08)
   Legacy-Port aus der Komponenten-Library mit WP-RESERVIERTEN
   Klassennamen: `.blog` liegt auf <body> der Beitragsseite (WordPress-
   Body-Klasse!) -> der Body wurde display:grid mit 3 Spalten, main und
   footer rendereten NEBENEINANDER (Bug Blog-Uebersicht 04.08).
   `.post` liegt via post_class() auf jedem <article> -> Karten-Border
   + Hover-Lift auf dem gesamten Einzelbeitrag. Kein Theme-Markup nutzt
   die Familie; das Plugin-Widget laeuft namespaced (bl5f/post5f).
   Merker: WP-reservierte Namen (blog, post, page, home, single,
   search, archive, ...) NIE als Komponenten-Klassen. */

/* =================================================================
   A12 · CTA SECTION (zwei Varianten: mit Raster, ohne Raster)
   ================================================================= */
.cta{margin-top:var(--s4);padding:var(--s9) var(--s7);background:var(--c-primary);color:var(--c-white);
  border-radius:var(--r-card-lg);text-align:center;position:relative;overflow:hidden}
.cta canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0.18;pointer-events:none}
.cta.no-raster canvas{display:none}
.cta .inner{position:relative;z-index:2;max-width:48ch;margin:0 auto}
.cta .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-white);margin-bottom:var(--s3)}
.cta h2,.cta .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.08;color:var(--c-white);margin-bottom:var(--s4);font-variation-settings:"opsz" 32}
.cta p{font-size:var(--fs-body-lg);color:var(--c-white);margin-bottom:var(--s6);line-height:1.5}
.cta .actions{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* dedupe 04.08: A13-Footer (Port aus home-v2) entfernt — generischer
   .footer-Namespace kollidierte mit dem echten Footer: border + radius +
   margin-top von hier gewannen die Kaskade -> Footer als 'Karte' mit
   Rundung/Rahmen gerendert (Bug Blog-Uebersicht 04.08). Live-Footer wird
   allein von der FOOTER-Familie (footer.php) gestylt; .footer-legal-Regeln
   uebernommen, da footer.php sie emittiert. Merker: Port-Klassen IMMER
   namespacen. */
.footer-legal{border-top:1px solid var(--c-border-subtle);padding-top:var(--s5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer-legal .copy{font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer-legal .badges{display:flex;gap:var(--s5);font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer-legal .badges span{display:inline-flex;align-items:center;gap:7px}
.footer-legal .badges .dot{width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
.footer-legal{flex-direction:column;align-items:flex-start;gap:var(--s4)}

/* =================================================================
   B1 · BREADCRUMBS
   ================================================================= */
/* Ein Stil für alle Breadcrumbs (C05, 26.10.2026): nav > ol aus
   inc/breadcrumbs.php (5f-blocks), die Zeile fließt als Text und bricht um.
   Links Grau-hell (5,1:1) unterstrichen, Gruppen ohne Seite Grau-hell ohne
   Linie, aktuelle Seite Grau (7,4:1), Trenner dekorativ (aria-hidden).
   Doppelte Klasse schlägt die Link-Farbe des Elementor-Kits. */
:root{--c-text-subtle:#696e7e}
.crumbs{font-size:var(--fs-caption);line-height:1.4;color:var(--c-text-subtle)}
.crumbs>ol{list-style:none;margin:0;padding:0}
.crumbs>ol>li{display:inline;margin:0}
.crumbs.crumbs a,.crumbs.crumbs a:visited,.crumbs.crumbs a:focus{
  color:var(--c-text-subtle);font-weight:400;padding-block:4px;text-decoration-line:underline;
  text-decoration-thickness:1px;text-decoration-color:currentColor;text-underline-offset:.2em}
.crumbs.crumbs a:hover{color:var(--c-primary)}
.crumbs.crumbs a:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:2px}
.crumbs.crumbs .sep{color:var(--c-neutral-400);margin:0 3px}
.crumbs.crumbs [aria-current="page"]{color:var(--c-text-muted);font-weight:400}

/* =================================================================
   B2 · CONTENT BLOCK TEXT+IMAGE
   ================================================================= */
.cb-ti{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center;margin-top:var(--s4)}
.cb-ti.reverse .cb-text{order:2}.cb-ti.reverse .cb-img{order:1}
@media(max-width:768px){.cb-ti{grid-template-columns:1fr}.cb-ti.reverse .cb-text{order:2}.cb-ti.reverse .cb-img{order:1}}
.cb-ti .pill-wrap{margin-bottom:var(--s3)}
.cb-ti h3,.cb-ti .as-h3{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:1.1;color:var(--c-base);font-variation-settings:"opsz" 32}
.cb-ti p{margin-top:var(--s4);color:var(--c-text-muted);line-height:1.55;max-width:52ch}
.cb-ti .actions{margin-top:var(--s5)}
.cb-ti .cb-img{aspect-ratio:5/4;border-radius:var(--r-card-lg);background:linear-gradient(135deg,rgba(67,45,244,0.12),rgba(67,45,244,0.02));box-shadow:var(--sh-1);display:grid;place-items:center;color:var(--c-text-muted);font-size:var(--fs-caption);font-family:var(--font);font-weight:var(--fw-medium-2)}

/* =================================================================
   B3 · CONTENT BLOCK FULL WIDTH TEXT
   ================================================================= */
.prose{max-width:720px;margin:var(--s4) auto 0}
.prose h2,.prose .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:1.1;color:var(--c-base);margin-bottom:var(--s4);font-variation-settings:"opsz" 32}
.prose h3,.prose .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.015em;line-height:1.2;color:var(--c-base);margin:var(--s6) 0 var(--s3)}
.prose p{color:var(--c-text);line-height:1.65;margin-top:var(--s3)}
.prose blockquote{margin:var(--s5) 0;padding:var(--s2) var(--s5);border-left:3px solid var(--c-primary);font-style:normal;font-size:var(--fs-body-lg);color:var(--c-text-muted)}
.prose ul,.prose ol{margin:var(--s4) 0;padding-left:var(--s5);display:flex;flex-direction:column;gap:8px}
.prose ul{list-style:none;padding-left:0}
.prose ul li{position:relative;padding-left:var(--s5);color:var(--c-text);line-height:1.55}
.prose ul li::before{content:"";position:absolute;left:0;top:0.55em;width:10px;height:10px;border-radius:50%;background:var(--c-primary)}
.prose ol li{padding-left:6px}

/* =================================================================
   B5 · STATS BLOCK
   ================================================================= */
.stats-block{margin-top:var(--s4)}
.stats-block.inline{display:flex;gap:var(--s7);flex-wrap:wrap}
.stats-block.stacked{display:flex;flex-direction:column;gap:var(--s5)}
.stat-tile{padding:var(--s5) var(--s6);border-radius:var(--r-card);border:1px solid var(--c-border-subtle);background:var(--c-white)}
.stat-tile.on-gray{background:var(--c-bg-subtle);border-color:transparent}
.stat-tile.on-blue{background:var(--c-primary);border-color:transparent}
.stat-tile.on-blue .num,.stat-tile.on-blue .label{color:var(--c-white)}
.stat-tile .num{font-size:clamp(36px,4vw,56px);font-weight:var(--fw-medium-2);letter-spacing:-0.04em;color:var(--c-primary);line-height:1;font-variation-settings:"opsz" 32}
.stat-tile .label{font-size:var(--fs-caption);color:var(--c-text-muted);margin-top:6px;letter-spacing:0.04em;text-transform:uppercase}

/* =================================================================
   B6 · VIDEO EMBED CARD
   ================================================================= */
.video{display:flex;flex-direction:column;gap:var(--s3);background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card);overflow:hidden;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);text-decoration:none;color:inherit}
.video:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.video .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(67,45,244,0.22),rgba(28,36,51,0.05));position:relative;overflow:hidden;transition:transform 0.4s var(--ease)}
.video:hover .thumb{transform:scale(1.03)}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:var(--c-white);display:grid;place-items:center;box-shadow:var(--sh-2)}
.video .play svg{width:18px;height:18px;color:var(--c-primary);margin-left:3px}
.video .dur{position:absolute;bottom:10px;right:10px;background:rgba(28,36,51,0.85);color:var(--c-white);font-size:11px;padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.video .tag-wrap{position:absolute;top:10px;left:10px}
.video .body{padding:var(--s4) var(--s5) var(--s5)}
.video .title{font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);color:var(--c-base);letter-spacing:-0.01em;line-height:1.3}

/* =================================================================
   B8 · COOKIE BANNER
   ================================================================= */
.cookie{margin-top:var(--s4);padding:var(--s4) var(--s5);background:var(--c-bg-subtle);border-radius:var(--r-card);display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.cookie p{font-size:var(--fs-body-sm);color:var(--c-text);line-height:1.5;max-width:64ch}
.cookie a{color:var(--c-primary);text-decoration:underline}

/* =================================================================
   B9 · TABS
   ================================================================= */
.tabs{margin-top:var(--s4)}
.tab-list{display:flex;gap:var(--s5);border-bottom:1px solid var(--c-border-subtle);overflow-x:auto;scrollbar-width:none}
.tab-list::-webkit-scrollbar{display:none}
.tab{position:relative;padding:14px 4px;font-size:var(--fs-subline);font-weight:var(--fw-medium-2);
  color:var(--c-text-muted);background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease)}
.tab:hover{color:var(--c-base)}
.tab.is-active{color:var(--c-base)}
.tab.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--c-primary);border-radius:2px 2px 0 0}
.tab:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}
.tab-panel{padding:var(--s6) 0;opacity:0;height:0;overflow:hidden}
.tab-panel.is-active{opacity:1;height:auto;animation:fade-in 0.3s var(--ease)}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* =================================================================
   B19 · CONTENT-TABS (Pill-Stil, wie der Lizenz-Filter der Extras-Seite)
   ================================================================= */
.ctabs{margin-top:var(--s4)}
.ctab-list{display:flex;gap:var(--s2);flex-wrap:wrap}
.ctab{display:inline-flex;align-items:center;gap:var(--s2);padding:10px 18px;border-radius:var(--r-pill);
  border:1px solid var(--c-neutral-400);background:var(--c-white);font-family:var(--font);
  font-size:var(--fs-subline);font-weight:var(--fw-medium-2);color:var(--c-base);cursor:pointer;
  transition:all var(--dur) var(--ease)}
.ctab:hover{border-color:var(--c-base);background:var(--c-neutral-300)}
.ctab .count{font-size:var(--fs-micro);color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.ctab.is-active{background:var(--c-base);color:var(--c-white);border-color:var(--c-base)}
.ctab.is-active .count{color:rgba(255,255,255,0.7)}
.ctab:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.ctab-panel{display:none;margin-top:var(--s5);padding:var(--s6);background:var(--c-neutral-200);border-radius:var(--r-card)}
.ctab-panel.is-active{display:block;animation:fade-in 0.3s var(--ease)}
.ctab-panel h3,.ctab-panel .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;color:var(--c-base);
  margin-bottom:var(--s3);font-variation-settings:"opsz" 32}
.ctab-panel p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.5;max-width:60ch}

/* =================================================================
   B20 · VIDEO-KACHEL · AUSKLAPPBAR (Meeting 07.07.2026)
   Kachel wie B6, darunter ausklappbar: Beschreibung, Downloads, FAQ.
   Alternative: eigenständige Video-Post-Seite (5f-video-post.html).
   ================================================================= */
.vx{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);background:var(--c-white);overflow:hidden;
  transition:box-shadow var(--dur) var(--ease)}
.vx:hover{box-shadow:var(--sh-1)}
.vx .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(67,45,244,0.22),rgba(28,36,51,0.05));cursor:pointer}
.vx .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;
  background:var(--c-white);display:grid;place-items:center;box-shadow:var(--sh-2)}
.vx .play svg{width:16px;height:16px;color:var(--c-primary);margin-left:2px}
.vx .dur{position:absolute;bottom:10px;right:10px;background:rgba(28,36,51,0.85);color:var(--c-white);
  font-size:11px;padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.vx-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);background:none;border:none;cursor:pointer;text-align:left;font-family:var(--font)}
.vx-head .title{display:block;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);color:var(--c-base);letter-spacing:-0.01em;line-height:1.3}
.vx-head .sub{display:block;margin-top:2px;font-size:var(--fs-caption);color:var(--c-text-muted)}
.vx-head .chev{flex-shrink:0;width:18px;height:18px;color:var(--c-text-muted);transition:transform var(--dur) var(--ease)}
.vx-head .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vx.is-open .vx-head .chev{transform:rotate(180deg)}
.vx-body{max-height:0;overflow:hidden;transition:max-height 0.35s var(--ease)}
.vx.is-open .vx-body{max-height:640px}
.vx-body-inner{padding:0 var(--s5) var(--s5);border-top:1px solid var(--c-border-subtle)}
.vx-body-inner>p{padding-top:var(--s4);font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55}
.vx-label{display:block;margin:var(--s5) 0 var(--s3);font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted)}
.vx-dl{list-style:none;display:grid;gap:var(--s2)}
.vx-dl a{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);border-radius:var(--r-btn);
  background:var(--c-neutral-200);color:var(--c-base);font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  text-decoration:none;transition:background var(--dur) var(--ease)}
.vx-dl a:hover{background:var(--c-neutral-300)}
.vx-dl .size{margin-left:auto;font-size:var(--fs-micro);color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.vx-faq{display:grid;gap:var(--s2)}
.vx-faq li{list-style:none;font-size:var(--fs-body-sm);line-height:1.5}
.vx-faq .q{font-weight:var(--fw-medium-2);color:var(--c-base)}
.vx-faq .a{color:var(--c-text-muted)}
.vx-more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);color:var(--c-primary);text-decoration:none}
.vx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:start;margin-top:var(--s4)}
@media(max-width:920px){.vx-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vx-grid{grid-template-columns:1fr}}

/* =================================================================
   B21 · FEATURE-TABS · SHOWCASE
   Zentrierte Pillen-Leiste (weiße aktive Pille auf grauem Track),
   darunter ein zweispaltiges Panel: Text links (farbige Eyebrow +
   Headline + Fließtext + Button), gerahmte Produkt-Mockup-Karte rechts
   auf grauer Fläche. Inhalt und Visual wechseln pro Tab.
   ================================================================= */
.ftabs{margin-top:var(--s4)}
/* ── Kopf: zentriert (Referenz-Muster 25.07) ── */
.ftabs-head{text-align:center;max-width:640px;margin:0 auto var(--s7)}
.fth-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);color:var(--c-primary)}
.ftabs-head h2,.ftabs-head .as-h2{margin-top:var(--s3);font-size:var(--fs-h2);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h2);line-height:var(--lh-heading);color:var(--c-base);
  font-variation-settings:"opsz" 32}
.fth-lead{margin:var(--s4) auto 0;font-size:var(--fs-lead);color:var(--c-text-muted);
  line-height:1.5;max-width:52ch}

/* ── Track: breit, Tabs gleichmäßig verteilt, ohne Rahmenlinie ── */
/* Fix 28.07 (v2): Bei 7 Tabs ragten Buttons über den Pillen-Hintergrund
   hinaus (Track war auf 920px gedeckelt, Tabs nowrap). Erste Fassung legte
   overflow auf die Liste selbst — falsch: der Hintergrund eines Scrollers
   malt nur die eigene Box, gescrollte Tabs lägen wieder auf Weiß.
   Deshalb: Wrapper scrollt, Liste trägt den Hintergrund und wächst per
   max-content mit dem Inhalt; min() bewahrt den bisherigen 920er-Look
   bei wenigen Tabs, margin:auto zentriert. */
.ftab-listwrap{display:flex;overflow-x:auto}
.ftab-list{display:flex;flex:0 0 auto;width:max-content;min-width:min(920px,100%);margin:0 auto;
  gap:4px;padding:6px;background:var(--c-bg-subtle);border-radius:var(--r-pill)}
.ftab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:12px 18px;border-radius:var(--r-pill);
  background:transparent;border:none;font-family:var(--font);font-size:var(--fs-subline);
  font-weight:var(--fw-medium-2);color:var(--c-text-muted);cursor:pointer;white-space:nowrap;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.ftab .ic{width:16px;height:16px;flex-shrink:0;color:currentColor}
.ftab:hover{color:var(--c-base)}
.ftab.is-active{background:var(--c-white);color:var(--c-base);box-shadow:var(--sh-2)}
.ftab:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
@media(max-width:760px){.ftab-list{flex-wrap:wrap;justify-content:center;width:auto;min-width:0;max-width:100%}.ftab{flex:0 1 auto}}

/* 28.07: Panel-Inhalt ~13% schmaler als der Wrap (Kundenfeedback),
   Media-Spalte von 1.35fr auf 1.2fr — Bild einen Tick kleiner. */
.ftab-panel{display:none;margin-top:var(--s8);max-width:87%;margin-left:auto;margin-right:auto;
  grid-template-columns:1fr 1.2fr;gap:var(--s8);align-items:center}
.ftab-panel.is-active{display:grid;animation:fade-in 0.35s var(--ease)}
@media(max-width:860px){.ftab-panel.is-active{grid-template-columns:1fr;gap:var(--s6)}.ftab-panel{max-width:100%}}
.ft-icon.ic{display:block;width:calc(132px*var(--icz,1));height:auto;color:var(--c-base);margin-bottom:var(--s6)}
.ft-icon.ic>svg{width:100%;height:auto}
@media(max-width:700px){.ft-icon.ic{width:calc(104px*var(--icz,1));margin-bottom:var(--s5)}}
.ftabs--ic-violett .ft-icon.ic{color:var(--c-primary-t1)}
.ftabs--ic-neutral .ft-icon.ic{color:var(--c-neutral-400)}
.ftabs--ic-primary .ft-icon.ic{color:var(--c-primary)}
/* Ruhigere Panel-Typo (Referenz: kompakter Titel statt H3-Display) */
.ft-text h3,.ft-text .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:-0.015em;
  line-height:1.25;color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s3);max-width:24ch}
.ft-text p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:44ch;margin-bottom:var(--s6)}
.ft-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:var(--r-pill);
  background:var(--c-white);border:1px solid var(--c-border);color:var(--c-base);
  font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);text-decoration:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.ft-btn:hover{border-color:var(--c-base);box-shadow:var(--sh-1)}
.ft-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* rechte Spalte: große, weiche Fläche mit schwebender Karte (Referenz 25.07) */
.ft-visual{background:var(--c-bg-subtle);border-radius:var(--r-card-lg);padding:var(--s8) var(--s7);
  display:flex;align-items:center;justify-content:center;min-height:460px}
.ft-mock{width:100%;max-width:420px;background:var(--c-white);border:1px solid var(--c-border-subtle);
  border-radius:var(--r-card);box-shadow:var(--sh-2);padding:var(--s5)}
.ft-mock-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4)}
.ft-mock-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.ft-mock-ic .ic{width:18px;height:18px}
.ft-mock-ttl{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--c-base);line-height:1.2}
.ft-mock-sub{font-size:var(--fs-caption);color:var(--c-text-muted);margin-top:1px}
.ft-mock-dots{margin-left:auto;color:var(--c-neutral-400);font-weight:var(--fw-semibold);letter-spacing:1px}
.ft-mock-body{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5}
.ft-mock-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px 0;border-top:1px solid var(--c-border-subtle);font-size:var(--fs-body-sm)}
.ft-mock-row .lbl{display:inline-flex;align-items:center;gap:var(--s2);color:var(--c-base)}
.ft-mock-row .swatch{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ft-mock-row .val{font-weight:var(--fw-semibold);color:var(--c-base);font-variant-numeric:tabular-nums}
.ft-mock-meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--s4)}
.ft-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold)}
.ft-chip--progress{background:rgba(67,45,244,0.10);color:var(--c-primary)}
.ft-chip .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ft-mock-when{font-size:var(--fs-caption);color:var(--c-text-muted);display:inline-flex;align-items:center;gap:6px}
.ft-prog{margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--c-border-subtle)}
.ft-prog-top{display:flex;align-items:center;justify-content:space-between;font-size:var(--fs-body-sm);margin-bottom:8px}
.ft-prog-top .pct{font-weight:var(--fw-semibold);color:var(--c-base);font-variant-numeric:tabular-nums}
.ft-prog-bar{height:6px;border-radius:3px;background:var(--c-neutral-300);overflow:hidden}
.ft-prog-bar span{display:block;height:100%;border-radius:3px;background:var(--c-primary)}
/* Checklisten-Mockup */
.ft-check{list-style:none;display:grid;gap:var(--s2)}
.ft-check li{display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-body-sm);color:var(--c-base)}
.ft-check .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--c-border);flex-shrink:0;display:grid;place-items:center}
.ft-check li.done .box{background:var(--c-primary);border-color:var(--c-primary)}
.ft-check li.done .box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ft-check li.done .txt{color:var(--c-text-muted);text-decoration:line-through}
/* Datenraum-Mockup */
.ft-rooms{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ft-room{background:var(--c-bg-subtle);border:1px solid var(--c-border-subtle);border-radius:var(--r-sm);padding:var(--s4)}
.ft-room .rt{display:flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);color:var(--c-base)}
.ft-room .rt .ic{width:15px;height:15px;color:var(--c-primary)}
.ft-room .rm{margin-top:6px;font-size:var(--fs-micro);color:var(--c-text-muted)}

/* =================================================================
   B11 · SIDEBAR LAYOUT
   ================================================================= */
.sb-layout{display:grid;grid-template-columns:280px 1fr;gap:var(--s7);margin-top:var(--s4)}
@media(max-width:768px){.sb-layout{grid-template-columns:1fr}}
.sb-filter{background:var(--c-bg-subtle);border-radius:var(--r-card);padding:var(--s5)}
.sb-filter h4,.sb-filter .as-h4{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s3)}
.sb-filter .group{margin-bottom:var(--s5)}
.sb-filter .group:last-child{margin-bottom:0}
.sb-filter .check-list{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0}
.sb-filter .pill-list{display:flex;flex-wrap:wrap;gap:6px}
.sb-content{display:flex;flex-direction:column;gap:var(--s3);font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.sb-mobile-toggle{display:none;width:100%;padding:12px var(--s4);background:var(--c-bg-subtle);border-radius:var(--r-pill);font-weight:var(--fw-semibold);align-items:center;justify-content:space-between;border:none;cursor:pointer}
@media(max-width:768px){.sb-mobile-toggle{display:flex}.sb-filter{display:none}.sb-filter.is-open{display:block}}

/* =================================================================
   B12 · PAGINATION
   ================================================================= */
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.pg{min-width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 14px;border:1.5px solid var(--c-border-subtle);background:var(--c-white);color:var(--c-base);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);border-radius:var(--r-pill);
  cursor:pointer;text-decoration:none;transition:all var(--dur) var(--ease)}
.pg:hover{border-color:var(--c-base)}
.pg.is-current{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
.pg:disabled,.pg.is-disabled{opacity:0.4;cursor:not-allowed}
.pg.is-gap{border:none;cursor:default;background:transparent}

/* =================================================================
   B13 · EMPTY STATE
   ================================================================= */
.empty{margin-top:var(--s4);padding:var(--s8) var(--s5);background:var(--c-bg-subtle);border-radius:var(--r-card);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s4)}
.empty .ic{width:64px;height:64px;color:var(--c-neutral-400)}
.empty h3,.empty .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);color:var(--c-base);letter-spacing:-0.015em}
.empty p{color:var(--c-text-muted);max-width:42ch;line-height:1.55}

/* =================================================================
   B14 · SKELETON
   ================================================================= */
@keyframes pulse{0%,100%{opacity:0.5}50%{opacity:1}}
.sk{background:var(--c-bg-subtle);border-radius:var(--r-sm);animation:pulse 1.5s ease-in-out infinite}
.sk-card{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);overflow:hidden;background:var(--c-white)}
.sk-thumb{aspect-ratio:16/9}
.sk-body{padding:var(--s5);display:flex;flex-direction:column;gap:10px}
.sk-line{height:14px;width:100%}
.sk-line.short{width:60%}
.sk-line.tiny{width:30%;height:11px}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* =================================================================
   B15 · ALERTS
   ================================================================= */
.alert{display:flex;gap:var(--s3);padding:var(--s4) var(--s5);border-radius:var(--r-card);border-left:3px solid;
  margin-top:var(--s3);font-size:var(--fs-body-sm)}
.alert .dot{flex-shrink:0;width:12px;height:12px;border-radius:50%;margin-top:5px}
.alert .body{flex:1}
.alert .title{font-weight:var(--fw-semibold);color:var(--c-base);margin-bottom:2px;font-size:var(--fs-body-sm)}
.alert .desc{color:var(--c-text);line-height:1.55}
.alert .x{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--r-pill);color:var(--c-text-muted);background:transparent;border:none;cursor:pointer}
.alert .x:hover{background:rgba(28,36,51,0.06);color:var(--c-base)}
.alert .x svg{width:14px;height:14px}
.alert-success{background:#f1faf3;border-color:var(--c-green)}
.alert-success .dot{background:var(--c-green)}
.alert-error{background:#fff3f5;border-color:var(--c-red)}
.alert-error .dot{background:var(--c-red)}
.alert-warning{background:#fff8e8;border-color:var(--c-amber)}
.alert-warning .dot{background:var(--c-amber)}
.alert-info{background:#f0eefe;border-color:var(--c-primary)}
.alert-info .dot{background:var(--c-primary)}

/* =================================================================
   B16 · TOOLTIP
   ================================================================= */
.tt{position:relative;display:inline-block}
.tt .tt-trigger{padding:8px 12px;border:1px solid var(--c-border);border-radius:var(--r-pill);background:var(--c-white);cursor:pointer;color:var(--c-base);font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2)}
.tt-pop{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--c-base);color:var(--c-white);font-size:var(--fs-caption);padding:6px 10px;
  border-radius:var(--r-sm);white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.tt-pop::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--c-base)}
.tt:hover .tt-pop,.tt:focus-within .tt-pop{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:200ms}

/* =================================================================
   B18 · PRICING
   Drei Stufen · die beliebte Stufe ist eine solide Brand-Blau Karte
   (Brand-Book "Karte"), die anderen weiß. Einheitliche Pillenbox-Badges,
   Aufzählungspunkte als gefüllte Dots. Nur Blau, Navy, Neutral, Weiß.
   ================================================================= */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s4);align-items:stretch}
@media(max-width:1024px){.pricing-grid{grid-template-columns:1fr;gap:var(--s5);max-width:440px;margin-left:auto;margin-right:auto}}
.pricing-card{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  padding:var(--s7) var(--s6);display:flex;flex-direction:column;position:relative;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
/* Beliebte Stufe = solide Brand-Blau Karte, weiße Typo (7.19:1) */
.pricing-card.is-featured{background:var(--c-primary);border-color:transparent;box-shadow:0 16px 40px rgba(67,45,244,0.20)}
.pricing-card.is-featured:hover{box-shadow:0 22px 50px rgba(67,45,244,0.28)}

/* Badge · Pillenbox (gefüllt Blau / Weiß), auf der blauen Karte invertiert */
.pricing-badge{align-self:flex-start;display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--r-pill);
  background:var(--c-primary);color:var(--c-white);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.02em;margin-bottom:var(--s6)}
.pricing-card.is-featured .pricing-badge{background:var(--c-white);color:var(--c-primary)}

.pricing-name{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;line-height:1.05;
  color:var(--c-base);font-variation-settings:"opsz" 32}
.pricing-card.is-featured .pricing-name{color:var(--c-white)}
.pricing-price{font-size:var(--fs-body-lg);font-weight:var(--fw-medium);color:var(--c-text-muted);margin-top:var(--s3)}
.pricing-card.is-featured .pricing-price{color:var(--c-white)}
.pricing-desc{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5;margin-top:var(--s4);
  padding-bottom:var(--s5);border-bottom:1px solid var(--c-border-subtle)}
.pricing-card.is-featured .pricing-desc{color:var(--c-white);border-color:rgba(255,255,255,0.28)}

.pricing-listlabel{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--c-text-muted);margin:var(--s5) 0 var(--s4)}
.pricing-card.is-featured .pricing-listlabel{color:var(--c-white)}
.pricing-features{list-style:none;padding:0;margin:0 0 var(--s6);display:flex;flex-direction:column;gap:12px;flex-grow:1}
.pricing-features li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-body-sm);color:var(--c-base);line-height:1.45}
.pricing-features li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-primary);flex-shrink:0;margin-top:6px}
.pricing-card.is-featured .pricing-features li{color:var(--c-white)}
.pricing-card.is-featured .pricing-features li::before{background:var(--c-white)}

/* CTA am Boden, alle drei auf gleicher Höhe */
.pricing-cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:48px;
  padding:13px 24px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);
  background:var(--c-primary);color:var(--c-white);border:none;cursor:pointer;text-decoration:none;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pricing-cta:hover{background:#3520d4;color:var(--c-white)}
.pricing-cta:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
/* auf der blauen Karte: weißer Button, blauer Text */
.pricing-card.is-featured .pricing-cta{background:var(--c-white);color:var(--c-primary)}
.pricing-card.is-featured .pricing-cta:hover{background:var(--c-base);color:var(--c-white)}
.pricing-card.is-featured .pricing-cta:focus-visible{outline-color:var(--c-white);outline-offset:3px}

/* =================================================================
   B17 · TABLE
   ================================================================= */
.tbl-wrap{margin-top:var(--s4);overflow-x:auto;border-radius:var(--r-card);border:1px solid var(--c-border-subtle)}
.tbl{width:100%;border-collapse:collapse;min-width:560px;background:var(--c-white)}
.tbl thead th{background:var(--c-base);color:var(--c-white);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);text-align:left;padding:14px 18px;letter-spacing:0.01em}
.tbl thead th:first-child{position:sticky;left:0;background:var(--c-base);z-index:1}
.tbl tbody td{padding:14px 18px;font-size:var(--fs-body-sm);color:var(--c-text);border-bottom:1px solid var(--c-border-subtle)}
.tbl tbody td:first-child{position:sticky;left:0;background:inherit;font-weight:var(--fw-medium-2);color:var(--c-base)}
.tbl tbody tr:nth-child(even) td{background:var(--c-bg-subtle)}
.tbl tbody tr:nth-child(even) td:first-child{background:var(--c-bg-subtle)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl .yes{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c-primary)}
.tbl .no{display:inline-block;width:18px;height:2px;background:var(--c-neutral-400)}

/* =================================================================
   FOOTER

/* Icon system */
.ic{display:inline-block;line-height:0}
.ic>svg{width:100%;height:100%;display:block;fill:currentColor}
.nav-logo img{width:26px;height:26px}
.footer-brand .logo img{width:30px;height:30px}

/* =================================================================
   ELEMENTOR-ADAPTER · macht native Widgets Design-System-konform
   ================================================================= */

/* Headings: NUR neutralisieren, wo die 5F-Klasse auf dem WIDGET liegt.
   Komponenten-Selektoren wie ".hero-home h1" greifen weiterhin voll. */
:is(.fc-title,.fc-desc,.stat-num,.stat-label,.pricing-name,.pricing-desc,
.pricing-price,.eyebrow,.subline) :is(.elementor-heading-title,p){
  font-size:inherit;font-weight:inherit;color:inherit;
  letter-spacing:inherit;line-height:inherit;margin:0}

h1.elementor-heading-title,h2.elementor-heading-title,h3.elementor-heading-title,
h4.elementor-heading-title,h5.elementor-heading-title,h6.elementor-heading-title,.as-h1.elementor-heading-title,.as-h2.elementor-heading-title,.as-h3.elementor-heading-title,.as-h4.elementor-heading-title,.as-h5.elementor-heading-title,.as-h6.elementor-heading-title{
  line-height:var(--lh-heading)}

/* Buttons: Klasse "btn-el btn-el--primary|secondary|ghost" auf dem Widget */
.btn-el .elementor-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  border:1.5px solid transparent;transition:all var(--dur) var(--ease);text-decoration:none;
  font-family:inherit;min-height:48px;white-space:nowrap;background:none}
.btn-el--primary .elementor-button{background:var(--c-primary);color:var(--c-white)}
.btn-el--primary .elementor-button:hover{background:#3520d4;color:var(--c-white)}
.btn-el--secondary .elementor-button{background:var(--c-white);color:var(--c-primary);border-color:var(--c-primary)}
.btn-el--secondary .elementor-button:hover{background:var(--c-white);color:var(--c-primary)}
.btn-el--ghost .elementor-button{background:transparent;color:var(--c-primary);padding-left:0;padding-right:0;min-height:auto}
.btn-el .elementor-button:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.btn-el--lg .elementor-button{padding:18px 36px;font-size:var(--fs-body-lg)}

/* FAQ: natives Accordion-Widget mit Klasse "faq-el" im 5F-Look */
.faq-el .elementor-accordion-item{border:1px solid var(--c-neutral-300);border-radius:var(--r-card);
  margin-bottom:var(--s3);background:var(--c-white);overflow:hidden}
.faq-el .elementor-tab-title{padding:var(--s5);font-weight:var(--fw-medium-2);font-size:var(--fs-body-lg);
  color:var(--c-base);border:none}
.faq-el .elementor-tab-title a{color:inherit}
.faq-el .elementor-tab-title.elementor-active{color:var(--c-primary)}
.faq-el .elementor-tab-content{padding:0 var(--s5) var(--s5);color:var(--c-text-muted);
  line-height:1.5;border:none}
.faq-el .elementor-accordion-icon{color:var(--c-primary)}

/* Trust Bar · Variante ohne Rahmen/Karte (Kundenwunsch Juli 2026):
   weißer Hintergrund, kein Border, keine abgerundete Karte.
   Klasse "trust trust--plain" auf dem Container. */
.trust--plain{background:var(--c-white);border:none;border-radius:0}

/* Trust Bar · statische editierbare Variante (native Image-Widgets):
   weiß, kein Border, zentrierte Logo-Reihe, kein Auto-Scroll.
   Klasse "trust trust--plain trust--static" auf dem Container.
   Logos = einzelne Bild-Widgets → per Mediathek austauschbar. */
.trust--static{padding:var(--s6) 0}
.trust--static::before,.trust--static::after{display:none}       /* keine Edge-Fades */
.trust-inner{display:flex;flex-direction:column;gap:var(--s4);align-items:center}
.trust-static-row{display:flex;flex-wrap:wrap;gap:var(--s7);align-items:center;justify-content:center}
.trust--static .trust-item{width:160px;height:60px;object-fit:contain;
  filter:grayscale(1);opacity:0.55;transition:all var(--dur) var(--ease)}
.trust--static .trust-item:hover{filter:grayscale(0);opacity:1}

/* =================================================================
   REVIEW-ERGÄNZUNGEN (Code-Review Juli 2026)
   ================================================================= */

/* Trust Bar · Pause/Play-Button (WCAG 2.2.2 Pause, Stop, Hide) */
[data-5f-trust]{position:relative}
.trust-pause{position:absolute;top:12px;right:12px;z-index:5;width:32px;height:32px;
  border-radius:var(--r-pill);border:1px solid var(--c-neutral-300);background:var(--c-white);
  color:var(--c-text-muted);display:grid;place-items:center;cursor:pointer;
  transition:all var(--dur) var(--ease)}
.trust-pause:hover{color:var(--c-primary);border-color:var(--c-primary)}
.trust-pause svg{width:14px;height:14px}
.trust-pause .ic-play{display:none}
[data-5f-trust].is-paused .ic-pause{display:none}
[data-5f-trust].is-paused .ic-play{display:block}
@media(prefers-reduced-motion:reduce){.trust-pause{display:none}} /* Animation läuft ohnehin nicht */

/* Bento · Karte als <div> + Expand als echter <button> (valides HTML).
   Der Button erbt die bestehende .expand-Optik; hier nur Button-Resets. */
.bento .expand{border:none;font:inherit;padding:0}
.bento .card--modal{cursor:pointer}
.bento .card:not(.card--modal){cursor:default}
/* Fokus sichtbar auf dem Expand-Button (Tastatur) */
.bento .expand:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}

/* =================================================================
   HOME · FEATURES / GRUNDFUNKTIONEN-KARUSSELL (aus 5f-home-v2-3)
   Dunkelblaue Karten (Kundenregel Juli 2026), weicher Loop,
   Hover: Icon blendet aus, Text ein. Reduced-Motion: statische Reihe.
   ================================================================= */
.features{padding:var(--s10) 0}
.features-header{text-align:center;margin-bottom:var(--s8)}
.features-header .badge{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  color:var(--c-primary);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:var(--s4)}
.features-header h2,.features-header .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;max-width:30ch;margin:0 auto;text-wrap:balance}
.features-header .lead{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.5;max-width:68ch;margin:var(--s5) auto 0}

/* soft sliding carousel (Brand Book: weiche Bewegung, ruhig) */
.features-carousel{position:relative;overflow:hidden}
.features-track{display:flex;gap:var(--s5);justify-content:center;flex-wrap:wrap}
.features-track.is-animated{width:max-content;flex-wrap:nowrap;justify-content:flex-start;animation:features-slide 48s linear infinite}
.features-track.is-animated:hover{animation-play-state:paused}
.features-track .feature-card{flex:0 0 clamp(240px,24vw,300px)}
@keyframes features-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Qualitätskontrast-Karten (Brand Book S.8)
   Kundenfeedback Juli 2026: große Karten/Slider in Dunkelblau,
   Electric Blue (#432df4) bleibt den CTAs vorbehalten */
.feature-card{background:var(--c-base);border-radius:24px;padding:var(--s7);
  display:flex;flex-direction:column;aspect-ratio:1/1;min-height:320px;
  position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow 0.4s var(--ease)}
.feature-card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(28,36,51,0.24)}
.feature-card .card-title{font-size:var(--fs-h4);font-weight:var(--fw-semibold);
  color:var(--c-white);letter-spacing:-0.025em;line-height:1.1;
  font-variation-settings:"opsz" 32;position:relative;z-index:3;max-width:14ch}
.feature-card .card-icon{position:absolute;bottom:var(--s7);right:var(--s7);width:calc(42%*var(--icz,1));max-width:calc(140px*var(--icz,1));
  color:var(--c-white);opacity:0.92;z-index:1;
  transition:opacity 0.4s var(--ease),transform 0.5s var(--ease)}
.feature-card .card-icon svg{width:100%;height:auto;display:block}
.feature-card:hover .card-icon{opacity:0;transform:translate(12px,12px)}
.feature-card .card-text{position:absolute;bottom:var(--s7);left:var(--s7);right:var(--s7);
  font-size:var(--fs-body-sm);font-weight:var(--fw-regular-2);color:var(--c-white);line-height:1.55;
  opacity:0;transform:translateY(14px);z-index:2;
  transition:opacity 0.45s var(--ease) 0.08s,transform 0.5s var(--ease) 0.08s}
.feature-card:hover .card-text{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  .features-track,.features-track.is-animated{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .features-track .feature-card{flex:0 0 clamp(240px,40vw,300px)}
  .features-track .dup{display:none}
}

/* Pause-Button generisch (Trust Bar + Karussells) */
[data-5f-pausable]{position:relative}
[data-5f-pausable] .trust-pause{top:-44px;right:0}
[data-5f-pausable].is-paused .ic-pause{display:none}
[data-5f-pausable].is-paused .ic-play{display:block}

/* =================================================================
   TESTIMONIALS-KARUSSELL (Redesign Juli 2026 · nur weiße Karten)
   Scroll-Snap: 3 sichtbar → 1 mobil. Dots = Brand-Book Option B,
   24px-Zielfläche. Kein Auto-Rotate.
   ================================================================= */
.tcar{padding:var(--s9) 0;background:var(--c-bg-subtle)}
.tcar .t-head{text-align:center;margin-bottom:var(--s8)}
.tcar .t-head .badge{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  color:var(--c-primary);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:var(--s4)}
.tcar .t-head h2,.tcar .t-head .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32}

.tcar-viewport{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
  max-width:var(--wrap);margin:0 auto;padding:0 var(--s5);scroll-padding-inline:var(--s5)}
.tcar-viewport::-webkit-scrollbar{display:none}
.tcar-viewport:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}
.tcar-track{display:flex;gap:var(--s5)}
.tcar-card{flex:0 0 calc((100% - 2*var(--s5))/3);scroll-snap-align:start;
  background:var(--c-white);border:1px solid var(--c-neutral-300);border-radius:var(--r-card-lg);
  padding:var(--s6);display:flex;flex-direction:column;margin:0;
  transition:box-shadow var(--dur) var(--ease)}
.tcar-card:hover{box-shadow:0 12px 32px rgba(28,36,51,0.08)}
.tcar-mark{font-size:44px;line-height:1;font-weight:var(--fw-semibold);color:var(--c-primary);
  margin-bottom:var(--s4);font-variation-settings:"opsz" 32;user-select:none}
.tcar-quote{font-size:var(--fs-body-lg);line-height:1.55;letter-spacing:-0.005em;flex:1;
  border:none;margin:0;padding:0}
.tcar-meta{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--c-neutral-300)}
.tcar-name{font-weight:var(--fw-semibold);font-size:var(--fs-body-sm)}
.tcar-role{font-size:var(--fs-caption);color:var(--c-text-muted);margin-top:2px}

.tcar-nav{display:flex;justify-content:center;gap:4px;margin-top:var(--s6)}
.t-dot{width:24px;height:24px;display:grid;place-items:center;background:none;border:none;cursor:pointer;padding:0}
.t-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-neutral-400);
  transition:all var(--dur) var(--ease)}
.t-dot[aria-current="true"]::after{background:var(--c-primary);transform:scale(1.35)}
.t-dot:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:8px}
/* Punkte nur, wenn es etwas zu blättern gibt (JS setzt hidden). */
.tcar-nav[hidden],.t-dot[hidden]{display:none}

/* Foto / Logo je Zitat (optional) */
.tcar-meta.has-photo,.tcar-meta:has(.tcar-logo){display:flex;align-items:center;gap:var(--s3)}
.tcar-who{min-width:0;flex:1}
.tcar-photo{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--c-bg-subtle)}
.tcar .tcar-photo-img{display:block;width:100%;height:100%;object-fit:cover;max-width:none}
.tcar-logo{flex:0 0 auto;margin-left:auto;display:flex;align-items:center}
.tcar .tcar-logo-img{display:block;height:auto;max-height:28px;max-width:96px;width:auto;object-fit:contain}
/* Auto-Durchlauf: Pause-Button neben den Dots */
.tcar-nav{align-items:center}
.tcar-pause.tcar-pause{width:24px;height:24px;margin-left:var(--s3);padding:0;display:grid;place-items:center;background:none;border:none;cursor:pointer;color:var(--c-text-muted)}
.tcar-pause span{width:10px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.tcar-pause.is-paused span{width:0;height:0;border:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.tcar-pause:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:8px}
/* Genau zwei Zitate: Karten mittig (Desktop; mobil bleibt Scroll-Snap) */
@media(min-width:769px){
  .tcar--duo .tcar-viewport{overflow:visible}
  .tcar--duo .tcar-track{justify-content:center}
  .tcar--duo .tcar-card{flex:0 1 calc((100% - var(--s5))/2);max-width:560px}
}
@media(max-width:1024px){
  .tcar-card{flex-basis:calc((100% - var(--s5))/2)}
}
@media(max-width:768px){
  .tcar-card{flex-basis:88%}
}

/* =================================================================
   CTA SECTION (Redesign Juli 2026)
   Neonblaue Karte (reservierter Einsatzort für Electric Blue),
   Demo buchen primär + Ghost-Link, Fußnote, optionales Punktraster.
   ================================================================= */
/* Audit 27.07 · Doppeltes Polster aufgelöst. Vorher: s9 (96) an der Sektion
   PLUS s9 (96) in der Karte = 192px bis zum Eyebrow, dazu die 96 der Sektion
   davor — zusammen 288px Luft. Die blaue Karte IST der sichtbare Rahmen; die
   Sektion muss ihn nicht noch einmal umpolstern. Jetzt 64 + 64 = 128px. */
.cta5f{padding:var(--s8) 0}
.cta5f-inner{background:var(--c-primary);color:var(--c-white);border-radius:var(--r-card-lg);
  padding:var(--s8);text-align:center;position:relative;overflow:hidden;
  max-width:var(--wrap-in);margin:0 auto}
.cta5f-content{position:relative;z-index:2;max-width:48ch;margin:0 auto}
/* Audit 27.07 · --c-primary-t2 (#b2b2f9) auf #432df4 misst 3,64:1 und fällt
   AA für 13px/600 durch. Weiß misst 7,19:1. Dieselbe Entscheidung war bei
   .cta-a-eyebrow längst dokumentiert, nur hier nie nachgezogen. */
.cta5f .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-white);margin-bottom:var(--s4)}
.cta5f h2,.cta5f .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.1;font-variation-settings:"opsz" 32;margin-bottom:var(--s5);color:var(--c-white)}
.cta5f .sub{font-size:var(--fs-body-lg);line-height:1.5;margin-bottom:var(--s6);color:var(--c-white)}

.cta5f-actions{display:flex;justify-content:center;align-items:center;gap:var(--s3);flex-wrap:wrap}
.btn5f{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);
  font-size:var(--fs-body);text-decoration:none;transition:all var(--dur) var(--ease);
  border:1.5px solid transparent;min-height:48px}
.btn5f--white{background:var(--c-white);color:var(--c-primary)}
.btn5f--white:hover{background:var(--c-base);color:var(--c-white);text-decoration:none}
.btn5f--white:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.btn5f--ghost-inv{background:transparent;color:var(--c-white);padding-left:var(--s4);padding-right:var(--s4)}
.btn5f--ghost-inv:hover{text-decoration:underline;text-underline-offset:4px;color:var(--c-white)}
.btn5f--ghost-inv:focus-visible{outline:2px solid var(--c-white);outline-offset:3px;border-radius:var(--r-pill)}

/* Audit 27.07 · .72 ergab 4,39:1 (AA verfehlt). .78 ergibt 4,93:1 — identisch
   zu .cta-a-note, wo der Wert bereits als Untergrenze dokumentiert ist. */
.cta5f-note{font-size:var(--fs-body-sm);color:rgba(255,255,255,0.78);margin-top:var(--s3);line-height:1.5}

/* Audit 27.07 · Fokus auf blauer Fläche. Der globale Ring ist --c-primary und
   damit auf #432df4 unsichtbar (1,00:1). Die Buttons hatten eigene Overrides,
   die Mail- und Trust-Links nicht. Gilt für alle blauen CTA-Flächen. */
.cta5f-inner :focus-visible,
.cta-a-box :focus-visible,
.rf2-cta .box :focus-visible{outline:3px solid var(--c-white);outline-offset:3px}

@media(max-width:640px){
  .cta5f-inner{padding:var(--s7) var(--s5);border-radius:var(--r-card)}
  .cta5f-actions{flex-direction:column}
}


/* =================================================================
   WISSEN / VIDEO-KACHELN (Home · Zwei-Klick-Einbindung, DSGVO)
   ================================================================= */
.blog5f{padding:var(--s10) 0;background:var(--c-bg-subtle)}
.blog5f-head{text-align:center;max-width:30ch;margin:0 auto var(--s6)}
.blog5f-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.blog5f-head h2,.blog5f-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:-0.022em;
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.blog5f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}

.post5f{background:var(--c-white);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.post5f:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(28,36,51,0.10)}

.post5f-video{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-base)}
.post5f-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post5f-video iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.post5f-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(28,36,51,0.86);color:var(--c-white);display:grid;place-items:center;
  transition:all var(--dur) var(--ease);z-index:2}
.post5f-play svg{width:22px;height:22px;margin-left:3px}
.post5f-play:hover{background:var(--c-primary);transform:translate(-50%,-50%) scale(1.06)}
.post5f-play:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.post5f-hint{position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:20px var(--s4) 8px;font-size:11px;line-height:1.35;color:rgba(255,255,255,0.85);
  background:linear-gradient(transparent,rgba(28,36,51,0.7));text-align:center;
  opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none}
.post5f-video:hover .post5f-hint,
.post5f-play:focus-visible ~ .post5f-hint{opacity:1}

.post5f-body{padding:var(--s6);display:flex;flex-direction:column;flex:1}
.post5f-tag{display:inline-block;align-self:flex-start;font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);color:var(--c-primary);background:var(--c-neutral-200);
  padding:4px 12px;border-radius:999px;margin-bottom:var(--s4)}
.post5f-body h3,.post5f-body .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;
  line-height:1.25;margin-bottom:var(--s3)}
.post5f-body h3 a,.post5f-body .as-h3 a{color:inherit;text-decoration:none}
.post5f-body h3 a:hover,.post5f-body .as-h3 a:hover{color:var(--c-primary);text-decoration:none}
.post5f-body p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;
  margin-bottom:var(--s5);flex:1}
.post5f-meta{font-size:var(--fs-caption);color:var(--c-text-muted);display:flex;align-items:center;gap:8px}
.post5f-meta::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-primary)}

@media(max-width:1024px){.blog5f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.blog5f-grid{grid-template-columns:1fr}}

/* Hero-Rhythmus: Abstände aller Heros, einmal definiert. */
.hero5f,.ihero,.lb-hero,.lzhero,.rf2-hero,.uc-hero,.blog5f-hero,.vp-hero{
  --hero-gap-crumbs:var(--s5);--hero-gap-eyebrow:var(--s4);--hero-gap-pill:var(--s5);
  --hero-gap-lead:var(--s5);--hero-gap-actions:var(--s7);--hero-gap-note:var(--s6)}
/* Reset-Ränder von Hello (h1..h6, p) in Heros auf 0, die Abstände setzen nur die Hero-Regeln. */
:where(.hero5f,.ihero,.lb-hero,.lzhero,.rf2-hero,.uc-hero,.blog5f-hero,.vp-hero) :is(h1,h2,h3,h4,h5,h6,p){margin-block:0}
:is(.hero5f,.ihero,.lb-hero,.lzhero,.rf2-hero,.uc-hero,.blog5f-hero,.vp-hero) .hs-h3.hs-h3.hs-h3{line-height:var(--lh-heading)}

/* =================================================================
   HERO (kompakt · 3 Varianten) — kein Full-Height, Höhe aus Inhalt
   ================================================================= */
/* Höhe reduziert (Feedback Juli 2026: Hero zu hoch, 22.07: Abstand zur
   Trust-Bar zu groß) — s8 oben, s5 unten */
.hero5f{position:relative;overflow:hidden;padding:var(--s8) var(--s5) var(--s5)}
.hero5f-content{position:relative;z-index:2;max-width:var(--wrap-in);margin:0 auto}

.hero5f h1,.hero5f .as-h1{font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h1);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base)}
.hero5f-sub{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;margin-top:var(--hero-gap-lead)}
.hero5f-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--hero-gap-actions)}
.hero5f-note{font-size:var(--fs-caption);color:var(--c-text-subtle);margin-top:var(--hero-gap-note);line-height:1.5;max-width:90ch}

/* Buttons auf hellem Grund */
.btn5f--blue{background:var(--c-primary);color:var(--c-white)}
.btn5f--blue:hover{background:#3520d4;color:var(--c-white);text-decoration:none}
.btn5f--blue:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.btn5f--outline{background:transparent;color:var(--c-base);border-color:var(--c-base)}  /* DS v3-2 Secondary: dunkelblau, nicht grau */
.btn5f--outline:hover{background:var(--c-base);color:var(--c-white);border-color:var(--c-base);text-decoration:none}
.btn5f--outline:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}

/* ── Variante A · Zentriert ──
   H1 auf 16ch begrenzt → zwei ausgewogene Zeilen statt Einwort-Mitte */
.hero5f--a{text-align:center}
/* 1:1 aus 5f-home-v2-3.html (.hero): Kundenfeedback Juli 2026 —
   schmalerer Header, 60vh, vertikal zentriert. */
.hero5f--a{min-height:60vh;display:flex;align-items:center;justify-content:center}
.hero5f--a .hero5f-content{max-width:820px;width:100%}
.hero5f--a h1,.hero5f--a .as-h1{font-size:clamp(40px,5.6vw,76px);max-width:16ch;margin:0 auto}
.hero5f--a .hero5f-sub{max-width:42ch;margin-left:auto;margin-right:auto}
.hero5f--a .hero5f-actions{justify-content:center}

/* ── Variante B · Linksbündig (Bündigkeit, Raster-Block rechts) ── */
.hero5f--b{text-align:left}
.hero5f--b .hero5f-content{max-width:var(--wrap-in)}
.hero5f--b h1,.hero5f--b .as-h1{font-size:clamp(40px,5.2vw,72px);max-width:16ch}
.hero5f--b .hero5f-sub{max-width:38ch}
/* ── Variante Kompakt · Pill ── */
.hero5f--pill{text-align:center;padding-top:var(--s8);padding-bottom:var(--s8)}
.hero5f--pill .hero5f-content{max-width:760px}
.hero5f--pill h1,.hero5f--pill .as-h1{font-size:clamp(36px,5vw,68px);max-width:16ch;margin:0 auto}
.hero5f--pill .hero5f-sub{max-width:44ch;margin-left:auto;margin-right:auto}
.hero5f--pill .hero5f-actions{justify-content:center}
.hero5f-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:var(--hero-gap-pill);vertical-align:top;
  padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--c-neutral-300);
  background:var(--c-white);font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  color:var(--c-text-muted);text-decoration:none;transition:border-color var(--dur) var(--ease)}
.hero5f-pill:hover{border-color:var(--c-primary);text-decoration:none;color:var(--c-text-muted)}
.hero5f-pill em{font-style:normal;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  color:var(--c-primary);background:var(--c-primary-t2);padding:3px 10px;border-radius:999px}
.hero5f-pill:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}

@media(max-width:768px){
  /* B kollabiert auf zentriert-gestapelt (= A-Verhalten) */
  .hero5f--b{text-align:center}
  .hero5f--b h1,.hero5f--b .hero5f-sub,.hero5f--b .as-h1{margin-left:auto;margin-right:auto}
  .hero5f--b .hero5f-actions{justify-content:center}
  .hero5f{padding:var(--s7) var(--s5)}
  .hero5f-actions{flex-direction:column}
}

/* =================================================================
   NAVIGATION (Header · Option 2: Theme-Template + WP-Menüs)
   ================================================================= */

/* =================================================================
   NAV
   ================================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-neutral-300);transition:box-shadow var(--dur) var(--ease)}
.nav.scrolled{box-shadow:0 1px 0 rgba(28,36,51,0.04),0 6px 24px rgba(28,36,51,0.06)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 var(--s5);height:76px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5)}
.nav-logo{display:inline-flex;align-items:center;justify-self:start;color:var(--c-base);text-decoration:none}
.nav-logo svg{display:block}
.nav-logo svg path,.nav-logo svg polygon{fill:var(--c-base)}
.nav-logo-full svg{height:36px;width:auto}
.nav-logo-mark svg{height:34px;width:34px}
.nav-items{display:flex;align-items:center;justify-content:center;gap:var(--s5);justify-self:center}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-subline);font-weight:var(--fw-medium-2);
  color:var(--c-base);text-decoration:none;cursor:pointer;padding:6px 2px;transition:color var(--dur) var(--ease)}
.nav-link .chev{width:10px;height:10px;display:inline-flex;font-size:10px;transition:transform var(--dur) var(--ease);color:var(--c-text-muted)}
.nav-link .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{color:var(--c-primary)}
.nav-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px) scale(.98);background:var(--c-white);
  border:1px solid var(--c-neutral-300);border-radius:16px;box-shadow:0 4px 12px rgba(28,36,51,.10),0 12px 32px rgba(28,36,51,.08);
  padding:var(--s5);min-width:240px;z-index:30;
  opacity:0;visibility:hidden;transform-origin:top center;
  transition:opacity 200ms var(--ease),transform 260ms cubic-bezier(.16,1,.3,1),visibility 0s linear 200ms}
/* Unsichtbare Hover-Brücke über den 14px-Spalt zwischen Link und Panel —
   ohne sie verliert .nav-item:hover beim Runterfahren der Maus und das
   Panel schließt (Glitch aus dem Juli-Review). */
.nav-panel::before{content:"";position:absolute;left:-12px;right:-12px;top:-18px;height:18px}
.nav-item:hover .nav-panel{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);
  transition:opacity 200ms var(--ease),transform 300ms cubic-bezier(.16,1,.3,1),visibility 0s}
.nav-item:hover .nav-link .chev{transform:rotate(180deg)}
.nav-panel.wide{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);min-width:560px}
.nav-panel.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5);min-width:440px}
.nav-panel h5,.nav-panel .as-h5{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-text-muted);margin-bottom:var(--s3)}
.nav-panel a{display:block;font-size:var(--fs-subline);color:var(--c-base);text-decoration:none;padding:6px 0;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease)}
.nav-panel a:hover{color:var(--c-primary);padding-left:4px}
.nav-right{display:flex;align-items:center;gap:var(--s4);justify-self:end}
.lang-sel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  color:var(--c-text-muted);cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--c-neutral-300);background:var(--c-white)}
.lang-btn:hover{color:var(--c-base);border-color:var(--c-neutral-400)}
.lang-btn .chev{font-size:9px}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--c-white);border:1px solid var(--c-neutral-300);
  border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(28,36,51,.06),0 8px 24px rgba(28,36,51,.04);
  padding:4px;min-width:120px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all 180ms var(--ease)}
.lang-sel:hover .lang-menu,.lang-sel.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{display:block;font-size:var(--fs-body-sm);color:var(--c-base);text-decoration:none;padding:8px 12px;border-radius:6px;cursor:pointer}
.lang-menu a:hover{background:var(--c-neutral-300)}
.nav-login{font-size:var(--fs-subline);font-weight:var(--fw-medium-2);color:var(--c-base);text-decoration:none;cursor:pointer}
.nav-login:hover{color:var(--c-primary)}
.nav-cta{display:inline-flex;align-items:center;padding:9px 18px;background:var(--c-primary);color:var(--c-white)!important;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);transition:opacity var(--dur) var(--ease);border:none;cursor:pointer}
.nav-cta:hover{opacity:0.88}
.nav-link:focus-visible,.lang-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:4px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:var(--s2);justify-self:end}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--c-base);margin:4px 0;transition:all 0.3s}
@media(max-width:768px){
  .nav-inner{display:flex;align-items:center}
  .nav-logo{margin-right:auto}
  .nav-logo-full svg{height:29px}
  .nav-items{display:none}
  .nav-right{display:flex;gap:var(--s3)}
  .nav-right .lang-sel,.nav-login{display:none}
  .nav-toggle{display:block}
  .nav-items.open{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:76px;left:0;right:0;background:var(--c-white);border-bottom:1px solid var(--c-neutral-300);padding:var(--s5);gap:var(--s4);z-index:101}
  .nav-items.open .nav-panel{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;padding:0 0 0 var(--s4);min-width:0}
  .nav-items.open .nav-panel.wide,.nav-items.open .nav-panel.cols2{display:flex;flex-direction:column;min-width:0}
}

/* =================================================================
   BUTTONS
   ================================================================= */
/* dedupe: .btn → Designsystem-Primitiv oben (Port-Kopie entfernt) */
/* dedupe: .btn--primary → Designsystem-Primitiv oben */
/* dedupe: .btn--primary:hover → Designsystem-Primitiv oben */
/* dedupe: .btn--primary:focus-visible → Designsystem-Primitiv oben */
/* (Duplikat aus gf-Port entfernt — Button-Primitive gehören dem Designsystem, Zeile ~61) */
/* dedupe: .btn--secondary:hover → Kanon oben */
.btn svg{width:15px;height:15px}

/* =================================================================
   HERO

/* Footer · Sprachwechsler · Drawer · Burger (aus home-v2-3) */
.lang-sel{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  color:var(--c-text-muted);cursor:pointer;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--c-neutral-300);background:var(--c-white)}
.lang-btn:hover{color:var(--c-base);border-color:var(--c-neutral-400)}
.lang-btn .chev{font-size:9px}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--c-white);border:1px solid var(--c-neutral-300);
  border-radius:var(--radius-sm);box-shadow:0 2px 8px rgba(28,36,51,.06),0 8px 24px rgba(28,36,51,.04);
  padding:4px;min-width:120px;z-index:30;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all 180ms var(--ease)}
.lang-sel:hover .lang-menu,.lang-sel.is-open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{display:block;font-size:var(--fs-body-sm);color:var(--c-base);text-decoration:none;padding:8px 12px;border-radius:6px;cursor:pointer}
.lang-menu a:hover{background:var(--c-neutral-300)}
.nav-cta{display:inline-flex;align-items:center;padding:9px 18px;background:var(--c-primary);color:var(--c-white)!important;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);transition:opacity var(--dur) var(--ease);border:none;cursor:pointer}
.nav-cta:hover{opacity:0.88}
.nav-link:focus-visible,.lang-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:4px}
@media(max-width:768px){
.nav-right .lang-sel,.nav-login{display:none}
}
.footer{padding:var(--s9) 0 var(--s7);border-top:1px solid var(--c-border-subtle);background:var(--c-white)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:var(--s7);margin-bottom:var(--s9)}
.footer-brand .logo{display:flex;align-items:center;gap:10px;font-weight:var(--fw-semibold);font-size:var(--fs-body-lg);
  color:var(--c-base);margin-bottom:var(--s5);text-decoration:none}
.footer-brand .logo svg{width:30px;height:30px}
.footer-brand .logo .lp{fill:var(--c-base)}
/* 31.07: margin-bottom:s6 entfernt — Doppeldefinition (Altlast),
   addierte 32px auf den s4-Spalten-Gap → 48px Beschreibung→Socials.
   Jetzt trägt allein der Flex-Gap (16px). */
.footer-brand p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;max-width:30ch;margin-bottom:0}
.socials{display:flex;gap:var(--s4)}
.socials a{width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--c-border-subtle);
  display:flex;align-items:center;justify-content:center;color:var(--c-text-muted);
  transition:all var(--dur) var(--ease)}
.socials a:hover{color:var(--c-primary);border-color:var(--c-primary)}
.socials svg{width:16px;height:16px}
.footer-col h5,.footer-col .as-h5{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.04em;color:var(--c-base);margin-bottom:var(--s5)}
.footer-col a{display:block;font-size:var(--fs-body-sm);color:var(--c-text-muted);padding:6px 0;text-decoration:none;
  transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--c-primary)}
.footer-legal{border-top:1px solid var(--c-border-subtle);padding-top:var(--s6);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap}
.footer-legal .copy{font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer-legal .badges{display:flex;gap:var(--s5);font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer-legal .badges span{display:inline-flex;align-items:center;gap:7px}
.footer-legal .badges .dot{width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
@media(max-width:768px){
.footer-top{grid-template-columns:1fr 1fr;gap:var(--s7) var(--s6)}
.footer-brand{grid-column:1 / -1;margin-bottom:var(--s5)}
}
@media(max-width:520px){
.footer-top{grid-template-columns:1fr 1fr}
.footer-legal{flex-direction:column;align-items:flex-start;gap:var(--s4)}
}
.footer-brand .logo img{height:40px;width:auto}
.zg-header .badge{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--c-primary);background:rgba(67,45,244,.08);padding:5px 12px;border-radius:var(--radius-pill);margin-bottom:var(--s4)}
/* ── WordPress-Integration & Ergänzungen ── */
body.fivef-has-nav{padding-top:76px}          /* fixe Nav-Höhe ausgleichen */
/* Angemeldet: WordPress schiebt die Seite um die Admin-Leiste nach unten
   (html margin-top 32/46 px). Die fixe Nav rückt mit, sonst bleibt unter
   ihr ein leerer Streifen über dem Hero. Bis 600 px scrollt die Leiste
   sonst weg, dort bleibt sie fix wie auf dem Desktop. */
.admin-bar .nav{top:32px}
.admin-bar .drawer{top:108px}
@media screen and (max-width:782px){.admin-bar .nav{top:46px}.admin-bar .drawer{top:122px}}
@media screen and (max-width:600px){.admin-bar #wpadminbar{position:fixed}}

/* Abstand Hero → Trust-Bar (Feedback 22.07: zu viel Weißraum).
   Elementor-Kit legt zwischen Widgets eigenen Abstand (Widgets Space /
   Container-Gap) — für diese beiden Vollbreiten-Sektionen auf 0 ziehen.
   Bleibt der Spalt trotzdem groß: Padding des Elementor-Containers
   selbst prüfen (Layout → Padding im Editor). */
.elementor-widget-5f-hero{margin-bottom:0!important}
.elementor-widget-5f-hero + .elementor-widget-5f-trust-bar,
.elementor-widget-5f-trust-bar{margin-top:0!important}
.e-con:has(> .elementor-widget-5f-hero),
.e-con:has(> .e-con-inner > .elementor-widget-5f-hero){row-gap:0}
/* Auch Container-Eigenpadding an der Naht neutralisieren (Hero-Container
   unten, Trust-Container oben) — häufigste Quelle für Rest-Weißraum. */
.e-con:has(.elementor-widget-5f-hero){padding-bottom:0}
.e-con:has(.elementor-widget-5f-trust-bar){padding-top:0}
body.drawer-open{overflow:hidden}
.nav-logo img,.custom-logo{height:30px;width:auto;display:block}
.nav-logo img{height:44px}
.nav-logo-text{font-weight:var(--fw-semibold);font-size:18px;letter-spacing:-0.02em;color:var(--c-base)}
.nav-panel .panel-group h5,.nav-panel .panel-group .as-h5{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s3)}
.nav-panel:has(.panel-group){display:none;grid-template-columns:1fr 1fr;gap:var(--s6)}
.nav-item.is-open .nav-panel,.nav-item:hover .nav-panel{display:block}
.nav-item.is-open .nav-panel:has(.panel-group),
.nav-item:hover .nav-panel:has(.panel-group){display:grid}

/* Drawer (Mobile) */
.drawer{position:fixed;inset:76px 0 0 0;z-index:99;background:var(--c-white);overflow-y:auto}
.drawer-inner{padding:var(--s6) var(--s5) var(--s8)}
.drawer-menu{list-style:none;margin:0;padding:0}
.drawer-menu a{display:block;padding:14px 0;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);
  color:var(--c-base);text-decoration:none;border-bottom:1px solid var(--c-neutral-300)}
.drawer-menu .sub-menu{list-style:none;margin:0;padding-left:var(--s4)}
.drawer-menu .sub-menu a{font-size:var(--fs-body);font-weight:var(--fw-regular-2);color:var(--c-text-muted)}
.drawer-cta{display:flex;justify-content:center;margin-top:var(--s6)}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:none;border:none;cursor:pointer;padding:10px}
.burger span{display:block;height:2px;background:var(--c-base);border-radius:2px;transition:all var(--dur) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.burger:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.nav-right{display:flex;align-items:center;gap:var(--s4);justify-self:end}

/* Footer-Menü-Listen (WP-Markup) */
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col ul a{display:block;padding:5px 0;color:var(--c-text-muted);text-decoration:none;font-size:var(--fs-body-sm)}
.footer-col ul a:hover{color:var(--c-primary)}
.legal-links{list-style:none;display:flex;gap:var(--s5);margin:0;padding:0}
.legal-links a{color:var(--c-text-muted);text-decoration:none;font-size:var(--fs-caption)}
.legal-links a:hover{color:var(--c-primary)}
/* Polylang-Ausgabe im Sprachmenü (li kommen nackt von pll_the_languages) */
.lang-menu ul,.lang-menu li{list-style:none;margin:0;padding:0}
.lang-menu li::marker{content:""}
.lang-menu li a{display:block;font-size:var(--fs-body-sm);color:var(--c-base);text-decoration:none;
  padding:8px 12px;border-radius:6px;cursor:pointer}
.lang-menu li a:hover,.lang-menu li a:focus{background:var(--c-neutral-300);color:var(--c-base)}
.lang-menu li.current-lang a{font-weight:var(--fw-semibold);color:var(--c-primary)}
/* Hover-Brücke über den 6px-Spalt (gleicher Glitch wie beim Mega-Panel) */
.lang-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}

/* Sprach-Button härten: Hello/Elementor-Kit dürfen hier NIE reinfärben
   (Pink-Hover-Bug Juli 2026 — Hellos Platzhalterfarbe #c36). */
.nav .lang-btn,
.nav .lang-btn:hover,
.nav .lang-btn:focus,
.nav .lang-btn:active{background:var(--c-white)!important;color:var(--c-text-muted)!important;
  border:1px solid var(--c-neutral-300)!important}
.nav .lang-btn:hover{color:var(--c-base)!important;border-color:var(--c-neutral-400)!important}
.nav .lang-btn:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px}

/* Audit 27.07 · ENTFERNT: der alte 1024/1025-Block.
   Er setzte `.drawer{display:none}` ab 1025px und wurde nie zurückgenommen,
   während der neuere Block (weiter unten) den Burger schon ab 1180px zeigt.
   Ergebnis: zwischen 1025 und 1180px war der Burger sichtbar, das Panel aber
   ausgeblendet — Klick ohne Wirkung. Gültig ist allein das Paar 1180/1181. */

/* Footer · Siegel, Socials, Legal-Chips (Audit Juli 2026) */
.footer-badges{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s4);flex-wrap:wrap}
/* 31.07: Siegel größer. Live rendrten sie ~45px trotz height:88 —
   Umgebungs-CSS (img{height:auto} o.ä.) überschrieb. Guard-Muster
   (gedoppelte Klasse) + max-height:none nagelt die Größe fest.
   Originalfarben — nie umfärben. */
.footer-badges.footer-badges img{height:96px;max-height:none;width:auto;display:block}
@media(max-width:520px){.footer-badges.footer-badges img{height:76px}}
/* 31.07: Abstand Beschreibung→Socials reduziert — margin-top raus,
   der s4-Gap der .footer-brand-Spalte übernimmt (16px statt 40px). */
.footer .socials{display:flex;gap:var(--s3);margin-top:0}
.footer .socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);
  border:1px solid var(--c-neutral-300);background:var(--c-white);color:var(--c-base);
  transition:all var(--dur) var(--ease)}
.footer .socials a:hover{border-color:var(--c-primary);color:var(--c-primary)}
.footer .socials svg{width:17px;height:17px}
.footer .socials a:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.legal-chips{list-style:none;display:flex;gap:var(--s5);margin:0;padding:0;flex-wrap:wrap}
.legal-chips li{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-caption);color:var(--c-text-muted)}
.legal-chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-primary)}
.footer-legal{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
/* Logo beim Scrollen: die Wortmarke klappt von rechts auf die Breite der
   Bildmarke ein (clip-path in %, ohne bekannte Logo-Breite), danach
   übernimmt die Bildmarke. Nur mit .nav-logo--swap (Bildmarke gesetzt). */
.nav-logo-mark{display:none}
.nav-logo-mark img{height:30px;width:auto}
.nav-logo--swap{position:relative}
.nav-logo--swap .nav-logo-full{display:block;clip-path:inset(0);transform-origin:left center;
  transition:clip-path .35s var(--ease),transform .35s var(--ease),opacity .15s var(--ease)}
.nav-logo--swap .nav-logo-mark{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);
  opacity:0;pointer-events:none;transition:opacity .15s var(--ease)}
/* Wortmarke 44px, Bildmarke 30px: beim Einklappen schrumpft die Wortmarke
   auf die Höhe der Bildmarke (30/44), damit der Wechsel nahtlos ist. */
.nav.scrolled .nav-logo--swap .nav-logo-full{clip-path:inset(0 calc(100% - 44px) 0 0);transform:scale(.682);opacity:0;
  transition:clip-path .35s var(--ease),transform .35s var(--ease),opacity .15s var(--ease) .2s}
.nav.scrolled .nav-logo--swap .nav-logo-mark{opacity:1;transition:opacity .15s var(--ease) .2s}
@media(prefers-reduced-motion:reduce){
  .nav-logo--swap .nav-logo-full,.nav-logo--swap .nav-logo-mark,
  .nav.scrolled .nav-logo--swap .nav-logo-full,.nav.scrolled .nav-logo--swap .nav-logo-mark{transition:none}
}
@media(max-width:520px){
  .nav-logo--swap .nav-logo-full{display:none}
  .nav-logo--swap .nav-logo-mark{position:static;transform:none;opacity:1}
  .nav-logo--swap .nav-logo-mark img{height:36px}
}

/* Utility: .wrap (Basisregel aus home-v2-3 — Fix: war nicht portiert) */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
/* dedupe 04.08: Footer-Kopie (Port home-v2-3, bg-subtle-Variante)
   entfernt — generische .footer-Klassen kollidierten mit dem echten
   Footer (kanonische Familie oben, footer.php). */

/* ── Nav-Responsiveness (Fix Juli 2026) ──
   1) Kein Umbruch in Menüpunkten/CTA ("Use Cases" brach zweizeilig).
   2) Burger-Breakpoint auf 1180px angehoben: darunter passt das volle
      Menü (6 Punkte + CTA + Sprache) nicht verlässlich in 1200px. */
.nav-link,.nav-cta,.lang-btn{white-space:nowrap}
@media(min-width:1181px) and (max-width:1320px){
  .nav-items{gap:var(--s4)}
  .nav-inner{gap:var(--s4)}
}
@media(max-width:1180px){
  .nav-items{display:none}
  .lang-sel{display:none}
  .burger{display:flex}
}
@media(min-width:1181px){
  .burger{display:none}
  .drawer{display:none}
}

/* =================================================================
   BENTO · Intro-Header + Lightbox-Modal (Referenz-Design Juli 2026)
   ================================================================= */
.bento-intro{max-width:66.67%;margin-bottom:var(--s7)}
.bento-intro h2,.bento-intro .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.02em;
  line-height:1.2;font-variation-settings:"opsz" 32}
.bento-intro h2 .muted,.bento-intro .as-h2 .muted{color:var(--c-text-muted)}
@media(max-width:768px){.bento-intro{max-width:100%}}
@media(max-width:768px){.bento-intro{max-width:100%}}
.bento-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:var(--s5)}
.bento-modal.is-open{display:flex}
.bento-modal-backdrop{position:absolute;inset:0;background:rgba(28,36,51,0.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:bento-fade .3s var(--ease)}
.bento-modal-panel{position:relative;background:#fff;border-radius:24px;max-width:1080px;width:100%;max-height:90vh;
  overflow:auto;box-shadow:0 30px 80px rgba(28,36,51,0.25);animation:bento-rise .35s var(--ease)}
.bento-modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:var(--r-pill);
  border:none;background:var(--c-base);cursor:pointer;display:flex;align-items:center;
  justify-content:center;color:var(--c-white);transition:all .2s var(--ease);z-index:2;font-family:inherit;padding:0}
.bento-modal-close:hover{background:var(--c-primary)}
.bento-modal-close:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.bento-modal-close svg{width:18px;height:18px}

.bento-modal-content{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);padding:var(--s9) var(--s7) var(--s8)}
.bento-modal-content .mleft{display:flex;flex-direction:column;gap:var(--s5)}
.bento-modal-content h2,.bento-modal-content .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.1;font-variation-settings:"opsz" 32;max-width:18ch;color:var(--c-text)}
.bento-modal-content .mlead{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55;max-width:42ch}
.bento-modal-content .mbullets{display:flex;flex-direction:column;gap:var(--s3);list-style:none;padding:0;margin:0}
.bento-modal-content .mbullets li{display:flex;align-items:flex-start;gap:var(--s3);font-size:var(--fs-subline);color:var(--c-text);line-height:1.5}
/* Brand Book bullet: solid primary dot, no glyph inside */
.bento-modal-content .mbullets .bullet{width:10px;height:10px;border-radius:50%;
  background:var(--c-primary);flex-shrink:0;margin-top:9px}
.bento-modal-content .mcta-row{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s2)}
.bento-modal-content .mcta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;background:var(--c-primary);
  color:var(--c-white);border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-subline);text-decoration:none;
  transition:opacity .2s var(--ease);letter-spacing:-0.01em}
.bento-modal-content .mcta:hover{opacity:.88}
.bento-modal-content .mcta svg{width:16px;height:16px;flex-shrink:0}
.bento-modal-content .mcta-secondary{background:transparent;color:var(--c-primary);border:1.5px solid var(--c-primary)}
/* ghost stays white on hover (no fill change). Only the border tightens to brand blue. */
.bento-modal-content .mcta-secondary:hover{border-color:var(--c-primary);opacity:1}
/* Brand-book icon card: solid neutral stage, no gradient, generous radius */
.bento-modal-content .mright{display:flex;align-items:center;justify-content:center;
  background:var(--c-neutral-400);border-radius:24px;padding:var(--s6);min-height:340px;
  overflow:hidden;position:relative}
.bento-modal-content .mright img{max-width:100%;max-height:380px;width:auto;height:auto;display:block;
  filter:drop-shadow(0 16px 32px rgba(28,36,51,0.18));border-radius:8px}
.bento-modal-content .mstat-big{font-size:var(--fs-display-xl);font-weight:var(--fw-medium-2);color:var(--c-base);
  font-variation-settings:"opsz" 32;letter-spacing:-0.04em;line-height:0.9}
.bento-modal-content .mstat-big sup{font-size:0.45em;color:var(--c-primary);font-weight:var(--fw-medium-2);margin-left:6px;vertical-align:super}
.bento-modal-content .mstat-caption{font-size:var(--fs-caption);color:var(--c-base);margin-top:var(--s4);text-align:center;letter-spacing:.04em;text-transform:uppercase;font-weight:var(--fw-semibold);opacity:.7}
.bento-modal-content .micon{width:55%;max-width:240px;color:var(--c-base);opacity:.85}
.bento-modal-content .mshield{width:60%;max-width:260px;color:var(--c-base)}

@keyframes bento-fade{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
  .bento-modal-content{grid-template-columns:1fr;padding:var(--s7) var(--s5) var(--s6)}
  .bento-modal-content .mright{min-height:240px}
}
@keyframes bento-fade{from{opacity:0}to{opacity:1}}
@keyframes bento-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .bento-modal-backdrop,.bento-modal-panel{animation:none}
}

/* =================================================================
   FAQ (Referenz-Design)
   ================================================================= */
.faq{padding:var(--s10) 0}
.faq-header{text-align:center;margin-bottom:var(--s8)}
.faq-header .badge{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  color:var(--c-primary);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:var(--s4)}
.faq-header h2,.faq-header .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.faq-list{max-width:740px;margin:0 auto}
.faq--left .faq-list{margin-left:0} /* linksbündig (25.07) */
/* Trennlinien zwischen den Fragen entfernt (25.07: keine Borders) */
.faq-item{border-bottom:none}
.faq-item:first-child{border-top:none}
/* Kit-Guard (Fix 25.07): Elementor-Kit-Regeln wie
   „.elementor-kit-XX button:hover" schlagen die einfache Klasse
   .faq-q und legten die globale Button-Hintergrundfarbe (pink) über
   die Fragen. Höhere Spezifität + alle States explizit neutralisiert;
   Hover bleibt ruhig — nur der Text wechselt zu Primär. */
.faq .faq-q,.faq .faq-q:hover,.faq .faq-q:focus,.faq .faq-q:active{
  background:transparent;border:none;box-shadow:none;border-radius:0;
  padding:var(--s5) 0;font-family:var(--font);font-size:var(--fs-body);
  font-weight:var(--fw-medium);line-height:1.4;letter-spacing:var(--ls-body)}
.faq .faq-q{color:var(--c-text)}
.faq .faq-q:hover,.faq .faq-q:focus{color:var(--c-primary)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--s5) 0;
  background:none;border:none;cursor:pointer;font-family:var(--font);font-size:var(--fs-body);
  font-weight:var(--fw-medium);color:var(--c-text);text-align:left;line-height:1.4;letter-spacing:var(--ls-body);gap:var(--s4)}
.faq-q:hover{color:var(--c-primary)}
.faq-q:focus-visible{outline:3px solid var(--c-primary);outline-offset:-2px}
.faq-q svg{flex-shrink:0;width:20px;height:20px;color:var(--c-text-muted);transition:transform 0.3s var(--ease)}
.faq-item.open .faq-q svg{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;visibility:hidden;transition:max-height 0.35s var(--ease),visibility 0s linear 0.35s}
.faq-item.open .faq-a{max-height:400px;visibility:visible;transition:max-height 0.35s var(--ease),visibility 0s linear 0s}
.faq-a p{padding:0 0 var(--s5);font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:60ch}
/* Frage im Heading (h2 bis h4): Heading ohne eigene Gestaltung, der Button bestimmt das Aussehen. */
.faq .faq-h{margin:0;padding:0;border:0;font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;text-transform:none;max-width:none}
/* Antworten aus der FAQ-Liste: Listen und Hervorhebung */
.faq-a ul,.faq-a ol{margin:0 0 0.9rem;padding:0 0 var(--s5) 1.25em;font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:60ch}
.faq-a ul{list-style:disc}
.faq-a ol{list-style:decimal}
.faq-a li{margin:0 0 var(--s2)}
.faq-a li:last-child{margin-bottom:0}
.faq-a strong{font-weight:var(--fw-semibold);color:var(--c-text)}
.faq-a > :not(:last-child){padding-bottom:var(--s3)}

/* Trust-Pause: im Elementor-Editor ausblenden (dort funktionslos,
   wirkte als "seltsame Checkbox"); Frontend-Stile gehärtet. */
.elementor-editor-active .trust-pause{display:none}
.trust-pause{color:var(--c-text-muted);background:var(--c-white)}
.trust-pause svg{display:block}
[data-5f-trust]:not(.is-paused) .ic-play,
[data-5f-pausable]:not(.is-paused) .ic-play{display:none}

/* Trust-Pause · dezentes Muster (Fix "seltsame Checkbox", Juli 2026):
   Button ist unsichtbar, bis die Leiste gehovt oder er per Tastatur
   fokussiert wird — WCAG 2.2.2 bleibt erfüllt (Mechanismus vorhanden
   und per Tastatur erreichbar), das UI bleibt ruhig. Farben explizit,
   damit kein teilgeladener Zustand mehr "rot" rendern kann. */
.trust-pause,[data-5f-pausable] .trust-pause{
  opacity:0;pointer-events:none;
  background:#ffffff;border:1px solid #ededed;color:#4f5567;
  transition:opacity var(--dur) var(--ease)}
.trust:hover .trust-pause,
[data-5f-pausable]:hover .trust-pause,
.trust-pause:focus-visible{
  opacity:1;pointer-events:auto}
.trust-pause svg{fill:currentColor;stroke:none;width:14px;height:14px}
.trust-pause:hover{color:#432df4;border-color:#432df4}

/* Sicherheit · Standard OHNE Karte (wie Home-Referenz). Die Karten-Optik
   der Bibliothek bleibt als Modifier erhalten (.sicherheit-demo--card),
   die dunkle Variante ist ohnehin boxed. */
.sicherheit-demo{border:none;border-radius:0;background:transparent;padding-left:0;padding-right:0}
.sicherheit-demo--card{background:var(--c-white);border:1px solid var(--c-neutral-300);
  border-radius:var(--r-card-lg);padding-left:var(--s8);padding-right:var(--s8)}
/* =================================================================
   VIDEO-POST · Entwurf (Meeting 07.07.2026)
   Eigenständige Landingpage pro Use-Case-Video: Player, Beschreibung,
   Downloadbereich, FAQ. Alternative: ausklappbare Video-Kachel (B20
   in der Komponenten-Bibliothek). Abschnitts-Hintergrund bleibt Weiß;
   der Player ist die große dunkelblaue boxed Fläche (Dunkelblau-Regel).
   ================================================================= */
.vp-hero{padding:calc(76px + var(--s8)) 0 var(--s6)}
.vp-hero .meta{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.vp-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:0.03em;text-transform:uppercase;background:rgba(67,45,244,0.10);color:var(--c-primary)}
.vp-dur{font-size:var(--fs-caption);color:var(--c-text-muted);font-weight:var(--fw-medium);font-variant-numeric:tabular-nums}
.vp-hero h1,.vp-hero .as-h1{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);line-height:var(--lh-heading);color:var(--c-base);font-variation-settings:"opsz" 32;max-width:22ch}
.vp-hero .lead{margin-top:var(--hero-gap-lead);font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;max-width:56ch}

/* Player: große Dunkelblau-Karte, boxed im Wrap */
.vp-player-section{padding-bottom:var(--s8)}
.vp-player{position:relative;aspect-ratio:16/9;border-radius:var(--r-card-lg);overflow:hidden;background:var(--c-base);
  display:grid;place-items:center;cursor:pointer}
.vp-player::before{content:"";position:absolute;inset:0;opacity:0.14;
  background-image:radial-gradient(rgba(255,255,255,0.7) 1px,transparent 1.4px);background-size:20px 20px;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 65% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 75% 75% at 65% 30%,#000,transparent 75%)}
.vp-player .play{position:relative;width:84px;height:84px;border-radius:50%;background:var(--c-white);display:grid;place-items:center;box-shadow:var(--sh-3);transition:transform var(--dur) var(--ease)}
.vp-player:hover .play{transform:scale(1.06)}
.vp-player .play svg{width:26px;height:26px;color:var(--c-primary);margin-left:4px}
.vp-player .note{position:absolute;bottom:var(--s4);left:var(--s5);font-size:var(--fs-caption);color:rgba(255,255,255,0.6)}
.vp-player .dur{position:absolute;bottom:var(--s4);right:var(--s5);background:rgba(255,255,255,0.14);color:var(--c-white);font-size:var(--fs-caption);padding:4px 10px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}

/* Content: Hauptspalte + Sidebar */
.vp-content{padding-bottom:var(--s9)}
.vp-grid{display:grid;grid-template-columns:1fr 340px;gap:var(--s8);align-items:start}
@media(max-width:920px){.vp-grid{grid-template-columns:1fr}}
.vp-main h2,.vp-main .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s4)}
.vp-main>p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:62ch;margin-bottom:var(--s4)}
.vp-chapters{list-style:none;display:grid;gap:var(--s3);margin:var(--s5) 0 var(--s7)}
.vp-chapters li{position:relative;padding-left:20px;font-size:var(--fs-body);line-height:1.5}
.vp-chapters li::before{content:"";position:absolute;left:0;top:0.55em;width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
.vp-chapters li .ts{color:var(--c-text-muted);font-variant-numeric:tabular-nums;font-size:var(--fs-body-sm);margin-left:6px}

/* FAQ — sauber unter .vp-faq gescopt (Fix 25.07: die Regeln waren
   unscoped und überschrieben das 5F-FAQ-Widget mit Trennlinien) */
.vp-faq{margin-top:var(--s7)}
.vp-faq .faq-item{border-bottom:1px solid var(--c-border-subtle)}
.vp-faq .faq-item:first-of-type{border-top:1px solid var(--c-border-subtle)}
.vp-faq .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s5) 0;background:none;border:none;cursor:pointer;text-align:left;
  font-family:var(--font);font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);color:var(--c-base);letter-spacing:-0.01em}
.vp-faq .faq-q .chev{flex-shrink:0;width:20px;height:20px;color:var(--c-text-muted);transition:transform var(--dur) var(--ease)}
.vp-faq .faq-q .chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp-faq .faq-item.is-open .faq-q .chev{transform:rotate(180deg)}
.vp-faq .faq-a{max-height:0;overflow:hidden;transition:max-height 0.3s var(--ease)}
.vp-faq .faq-item.is-open .faq-a{max-height:300px}
.vp-faq .faq-a p{padding:0 0 var(--s5);font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:60ch}

/* Sidebar: Downloads + CTA */
.vp-side{display:grid;gap:var(--s5)}
.vp-card{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);padding:var(--s6);background:var(--c-neutral-200)}
.vp-card h3,.vp-card .as-h3{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--c-base);margin-bottom:var(--s4)}
.vp-dl{list-style:none;display:grid;gap:var(--s2)}
.vp-dl a{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-radius:var(--r-btn);
  background:var(--c-white);border:1px solid var(--c-border-subtle);color:var(--c-base);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.vp-dl a:hover{border-color:var(--c-primary);box-shadow:var(--sh-1)}
.vp-dl .ic{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(67,45,244,0.10);display:grid;place-items:center;color:var(--c-primary)}
.vp-dl .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vp-dl .size{margin-left:auto;font-size:var(--fs-micro);color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.vp-cta{background:var(--c-base);border:none;color:var(--c-white)}
.vp-cta h3,.vp-cta .as-h3{color:var(--c-white)}
.vp-cta p{font-size:var(--fs-body-sm);color:rgba(255,255,255,0.72);line-height:1.55;margin-bottom:var(--s5)}
.vp-cta .btn{width:100%}

/* Weitere Videos */
.vp-related{padding-bottom:var(--s9)}
.vp-related h2,.vp-related .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s6)}
.vp-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
@media(max-width:920px){.vp-rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vp-rel-grid{grid-template-columns:1fr}}
.rel-video{display:flex;flex-direction:column;border-radius:var(--r-card);transition:transform var(--dur) var(--ease)}
.rel-video:hover{transform:translateY(-3px)}
.rel-video .thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(135deg,rgba(67,45,244,0.20),rgba(28,36,51,0.06))}
.rel-video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:var(--c-white);display:grid;place-items:center;box-shadow:var(--sh-2)}
.rel-video .play svg{width:15px;height:15px;color:var(--c-primary);margin-left:2px}
.rel-video .dur{position:absolute;bottom:10px;right:10px;background:rgba(28,36,51,0.85);color:var(--c-white);font-size:11px;padding:3px 8px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.rel-video h3,.rel-video .as-h3{margin-top:var(--s4);font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);letter-spacing:-0.012em;line-height:1.3;color:var(--c-base);transition:color var(--dur) var(--ease)}
.rel-video:hover h3,.rel-video:hover .as-h3{color:var(--c-primary)}
.rel-video .cat{margin-top:var(--s2);font-size:var(--fs-caption);color:var(--c-text-muted)}

/* dedupe: .btn → Designsystem-Primitiv oben (Port-Kopie entfernt) */
/* dedupe: .btn--primary → Designsystem-Primitiv oben *//* dedupe: .btn--primary:hover → Designsystem-Primitiv oben */
/* dedupe 04.08: Footer-Kopie (Page-Port, weisse Variante inkl.
   footer-seals/f-seal — von footer.php nicht emittiert) entfernt —
   dritte .footer-Kollision. Kanonische Familie: siehe oben. */
/* Streunender style-Endtag entfernt (25.07) — verschluckte die Folgeregel */

/* =================================================================
   BLOG · Einzelartikel + Archiv (native Posts, Gutenberg + .prose)
   ================================================================= */
/* Layout v2 (Entwurf 5f-single-post-entwurf-v1, freigegeben 03.08.2026):
   zentrierter Kopf (Pill + H1 auf H2-Skala + Meta mit violetten
   Punkt-Separatoren) → Beitragsbild 1000px → Lesespalte 740px.
   Prose-Overrides bewusst unter .article5f gescoped — die globale
   .prose (Use-Case-Seiten) bleibt unberührt. */
.article5f{padding:calc(76px + var(--s5)) 0 var(--s9)}
.article5f-head{max-width:880px;margin:0 auto var(--s7);text-align:center;padding:0 var(--s5)}
.article5f-head .cat{margin-bottom:var(--s5)}
.article5f-head h1,.article5f-head .as-h1{font-size:clamp(32px,4.6vw,57px);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h2);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;
  max-width:24ch;margin:0 auto}
.article5f-head .meta{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;justify-content:center;
  align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.article5f-head .meta li{display:inline-flex;align-items:center;gap:8px}
.article5f-head .meta li + li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-primary)}
.article5f-thumb{max-width:1000px;margin:0 auto var(--s8);padding:0 var(--s5)}
.article5f-thumb img{width:100%;height:auto;border-radius:var(--r-card-lg);display:block}
.article5f-thumb figcaption{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted);text-align:center}
.article5f .prose{max-width:740px;margin:0 auto;padding:0 var(--s5)}

/* Prose-Overrides · Artikel-Typografie (schlagen die globale .prose) */
.article5f .prose > * + *{margin-top:var(--s5)}
.article5f .prose p{font-size:var(--fs-body-lg);line-height:1.65;color:var(--c-text);margin-top:0}
.article5f .prose > p + p{margin-top:var(--s5)}
.article5f .prose h2,.article5f .prose .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;
  line-height:1.15;font-variation-settings:"opsz" 32;margin:var(--s8) 0 0}
.article5f .prose h3,.article5f .prose .as-h3{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:-0.01em;margin:var(--s7) 0 0}
.article5f .prose h2 + p,.article5f .prose h3 + p,.article5f .prose .as-h2 + p,.article5f .prose .as-h3 + p{margin-top:var(--s4)}
.article5f .prose strong{font-weight:var(--fw-semibold)}
.article5f .prose ul{list-style:none;padding:0;margin:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s3)}
.article5f .prose ul li{position:relative;padding-left:26px;font-size:var(--fs-body-lg);line-height:1.55}
/* Prose-Bullet: 8px/regular-Adaption für Lesetext (DS-Bullet 12px semibold
   ist Feature-Listen-Element) — [PRÜFEN Bene] */
.article5f .prose ul li::before{content:"";position:absolute;left:2px;top:0.62em;width:8px;height:8px;
  border-radius:50%;background:var(--c-primary)}
.article5f .prose ol{padding-left:22px;margin:var(--s5) 0 0;display:flex;flex-direction:column;gap:var(--s3)}
.article5f .prose ol li{padding-left:4px;font-size:var(--fs-body-lg);line-height:1.55}
.article5f .prose ol li::marker{color:var(--c-primary);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
/* Zitat: Rule in Base — Neonblau bleibt CTAs/Links vorbehalten (Governance) */
.article5f .prose blockquote{border-left:3px solid var(--c-base);padding:var(--s2) 0 var(--s2) var(--s5);
  margin:var(--s6) 0 0;font-style:normal;color:var(--c-base)}
.article5f .prose blockquote p{font-size:var(--fs-lead);font-weight:var(--fw-medium-2);line-height:1.4;
  letter-spacing:-0.012em;color:var(--c-base)}
.article5f .prose blockquote cite{display:block;margin-top:var(--s3);font-style:normal;
  font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.article5f .prose figure{margin:var(--s6) 0 0}
.article5f .prose figure img{border-radius:var(--r-card)}
.article5f .prose figcaption{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted)}
.article5f .prose .wp-block-image img{border-radius:var(--r-card)}

/* Bild-Ausrichtungen — Classic (Ausrichtung rechts/links) + Gutenberg.
   Float-Breite gedeckelt, damit die 740px-Spalte lesbar bleibt. */
.article5f .prose img.alignright,.article5f .prose .alignright img,
.article5f .prose img.alignleft,.article5f .prose .alignleft img{border-radius:var(--r-card)}
.article5f .prose .alignright{float:right;margin:6px 0 var(--s4) var(--s5);max-width:min(46%,340px)}
.article5f .prose .alignleft{float:left;margin:6px var(--s5) var(--s4) 0;max-width:min(46%,340px)}
.article5f .prose .aligncenter{display:block;margin:var(--s6) auto 0}
.article5f .prose h2,.article5f .prose h3,.article5f .prose .as-h2,.article5f .prose .as-h3{clear:both}
.article5f .prose .wp-caption{max-width:100%}
.article5f .prose .wp-caption-text{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted)}

/* Medien und Text (Gutenberg core/media-text) — Screenshot neben Text,
   Muster wie im Redaktionshandbuch (Doku-Layout). Mobil gestapelt. */
.article5f .prose .wp-block-media-text{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center;margin-top:var(--s6)}
.article5f .prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:2}
.article5f .prose .wp-block-media-text__media img{border-radius:var(--r-card);border:1px solid var(--c-border-subtle);width:100%;height:auto}
.article5f .prose .wp-block-media-text__content{padding:0}
.article5f .prose .wp-block-media-text__content p{font-size:var(--fs-body);line-height:1.6}
@media(max-width:640px){
  .article5f .prose .wp-block-media-text{grid-template-columns:1fr}
  .article5f .prose .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media{order:0}
  .article5f .prose .alignright,.article5f .prose .alignleft{float:none;margin:var(--s5) 0 0;max-width:100%}
}

/* Hinweis-Box (Block Pattern "5F · Hinweis") */
.art5f-note{background:var(--c-bg-subtle);border-radius:var(--r-card);padding:var(--s5) var(--s6)}
.art5f-note h4,.art5f-note .as-h4{font-size:var(--fs-body);font-weight:var(--fw-semibold);margin:0 0 var(--s2);letter-spacing:0}
.article5f .prose .art5f-note p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55}

/* Video Zwei-Klick (Block Pattern "5F · Video Ignite") — Poster + Play,
   iframe erst nach Klick (DSGVO); Loader: assets/js/5f-article.js */
.art5f-video{margin:var(--s6) 0 0}
.art5f-video .frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:radial-gradient(circle at 60% 40%, rgba(67,45,244,0.16), rgba(28,36,51,0.06) 65%),var(--c-bg-subtle);
  border:1px solid var(--c-border-subtle)}
.art5f-video .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art5f-video .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.art5f-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;
  border-radius:50%;background:var(--c-primary);border:none;display:grid;place-items:center;
  box-shadow:var(--sh-2);cursor:pointer;transition:transform var(--dur) var(--ease);z-index:2}
.art5f-play svg{width:22px;height:22px;margin-left:3px}
.art5f-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.art5f-play:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.art5f-video .hint{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted)}

/* Zurück-Link (ghost, ersetzt btn5f--outline) */
.article5f-back{max-width:740px;margin:var(--s8) auto 0;padding:0 var(--s5)}
.article5f-back a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium-2);color:var(--c-base);text-decoration:none}
.article5f-back a:hover{color:var(--c-primary)}

/* Weitere Beiträge — Karten wie 5F · Blog-Grid (.bl5f .bcard) auf --c-bg-subtle */
.related5f{padding:var(--s9) 0;background:var(--c-bg-subtle)}
.related5f-head{text-align:center;max-width:30ch;margin:0 auto var(--s7)}
.related5f-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.related5f-head h2,.related5f-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:1.1;font-variation-settings:"opsz" 32}
@media(max-width:640px){
  .article5f{padding-top:calc(76px + var(--s4))}
  .article5f-thumb{margin-bottom:var(--s7)}
}
/* Blog-Übersicht Layout v3 (Entwurf 5f-blog-uebersicht-v3_1,
   freigegeben 03.08.2026): zentrierter Kopf mit Eyebrow + Suche,
   Featured-Split (Sticky), FLACHES Listing (fpost5f — kein
   Karten-Container). Blog-Seite mit Zahlen-Pager (.pager5f, seit 26.10.2026),
   Archiv und Suche mit "Mehr laden". .post5f bleibt unten erhalten (Plugin-Kompatibilität). */
.archive5f{padding:calc(76px + var(--s7)) 0 var(--s9)}
.archive5f-empty{text-align:center;color:var(--c-text-muted);padding:var(--s8) 0}

/* Kopf zentriert */
.blog5f-hero{text-align:center;padding-bottom:var(--s7)}
.blog5f-hero .eyebrow{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--hero-gap-eyebrow)}
.blog5f-hero h1,.blog5f-hero .as-h1{font-size:clamp(40px,6vw,72px);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h2);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;
  max-width:16ch;margin:0 auto}
.blog5f-hero .sub{margin:var(--hero-gap-lead) auto 0;max-width:52ch;font-size:var(--fs-lead);
  font-weight:var(--fw-light-2);line-height:1.5;color:var(--c-text-muted)}
.blog5f-hero--sub h1,.blog5f-hero--sub .as-h1{font-size:clamp(32px,4.6vw,57px)}

/* Suche · zentriert im Kopf (WP-nativ GET ?s=) */
.search5f{position:relative;margin:var(--s6) auto 0;max-width:420px}
.blog5f-hero .search5f{margin-top:var(--hero-gap-actions)}
.search5f input{width:100%;padding:13px 20px 13px 46px;border-radius:var(--r-pill);
  border:1px solid var(--c-border-subtle);font:inherit;font-size:var(--fs-body-sm);color:var(--c-base);
  background:var(--c-white);transition:border-color var(--dur) var(--ease)}
.search5f input:hover{border-color:var(--c-neutral-400)}
.search5f input:focus-visible{outline:3px solid var(--c-primary);outline-offset:1px;border-color:var(--c-primary)}
.search5f svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);stroke:var(--c-text-muted);pointer-events:none}

/* Featured · flache Split-Zeile (Sticky, nur Seite 1) */
.feat5f{padding-bottom:var(--s8)}
.feat5f > .wrap > a{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);align-items:center;
  color:inherit;text-decoration:none}
.feat5f .media{display:block;aspect-ratio:16/9;border-radius:var(--r-card-lg);overflow:hidden;background:var(--c-bg-subtle)}
.feat5f .media img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s var(--ease)}
.feat5f a:hover .media img{transform:scale(1.025)}
.feat5f .body{display:block}
.feat5f .cat{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-primary)}
.feat5f h2,.feat5f .as-h2{margin-top:var(--s3);font-size:clamp(26px,3vw,38px);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:1.12;font-variation-settings:"opsz" 32;
  transition:color var(--dur) var(--ease)}
.feat5f a:hover h2,.feat5f a:hover .as-h2{color:var(--c-primary)}
.feat5f .meta{display:block;margin-top:var(--s4);font-size:var(--fs-body-sm);color:var(--c-text-muted)}
@media(max-width:860px){.feat5f > .wrap > a{grid-template-columns:1fr}}

/* Flaches Listing */
.blog5f-grid--flat{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s6);padding:0}
@media(max-width:1024px){.blog5f-grid--flat{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.blog5f-grid--flat{grid-template-columns:1fr;gap:var(--s7)}}
.fpost5f{display:flex;flex-direction:column}
.fpost5f .media{display:block;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;
  background:var(--c-bg-subtle);margin-bottom:var(--s4)}
.fpost5f .media img{width:100%;height:100%;object-fit:cover;transition:transform 0.35s var(--ease)}
.fpost5f .media:hover img{transform:scale(1.03)}
/* Kategorie-Label: violett für ALLE Kategorien (keine Farb-Kopplung, 11.06) */
.fpost5f .cat{align-self:flex-start;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);text-decoration:none}
.fpost5f .cat:hover{color:#3520d4}
.fpost5f h3,.fpost5f .as-h3{margin-top:var(--s2);font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);
  letter-spacing:-0.01em;line-height:1.35}
.fpost5f h3 a,.fpost5f .as-h3 a{color:var(--c-base);text-decoration:none;transition:color var(--dur) var(--ease)}
.fpost5f h3 a:hover,.fpost5f .as-h3 a:hover{color:var(--c-primary)}
.fpost5f h3 a:focus-visible,.fpost5f .as-h3 a:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:4px}
.fpost5f .meta{margin-top:var(--s2);font-size:var(--fs-body-sm);color:var(--c-text-muted)}

/* Mehr laden — echte /page/N-URL */
.more5f{display:flex;justify-content:center;margin-top:var(--s8)}
.more5f a{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;
  border-radius:var(--r-pill);border:1.5px solid var(--c-base);font-weight:var(--fw-semibold);
  font-size:var(--fs-body-sm);color:var(--c-base);text-decoration:none;
  transition:all var(--dur) var(--ease);min-height:46px}
.more5f a:hover{background:var(--c-base);color:var(--c-white)}

/* Legacy (Plugin-Blog-Grid nutzt ggf. noch Karten-Optik) */
.archive5f-head{text-align:center;max-width:34ch;margin:0 auto var(--s7)}
.archive5f-head h1,.archive5f-head .as-h1{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.archive5f .blog5f-grid{padding:0}
.archive5f .pager5f{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s2);margin-top:var(--s8)}
.archive5f .pager5f .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--c-border);color:var(--c-base);background:var(--c-white);
  text-decoration:none;font-weight:var(--fw-medium-2);font-size:var(--fs-body-sm);line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.archive5f .pager5f .page-numbers.current{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}
.archive5f .pager5f a.page-numbers:hover{border-color:var(--c-primary);color:var(--c-primary);text-decoration:none}
.archive5f .pager5f a.page-numbers:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.archive5f .pager5f .page-numbers.dots{min-width:24px;padding:0 4px;border-color:transparent;background:transparent;color:var(--c-text-muted)}
.archive5f .pager5f .page-numbers svg{display:block}
@media(max-width:480px){.archive5f .pager5f{gap:var(--s1)}.archive5f .pager5f .page-numbers{padding:0 10px}}
@media(prefers-reduced-motion:reduce){.archive5f .pager5f .page-numbers{transition:none}}

/* =================================================================
   MEDIATHEK (CPT-Übersicht mit Filter, Juli 2026 · ~50 Videos)
   ================================================================= */
.mtk{padding:var(--s9) var(--s5);max-width:var(--wrap);margin:0 auto}
.mtk .section-head{margin-bottom:var(--s6)}
.mtk-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.mtk-search{position:relative;flex:1 1 280px;max-width:420px}
.mtk-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--c-text-muted);pointer-events:none}
.mtk-search input{width:100%;padding:11px 14px 11px 40px;border-radius:var(--r-pill);border:1px solid var(--c-border-field);
  background:var(--c-white);color:var(--c-base);font-family:var(--font);font-size:var(--fs-body-sm);line-height:1.2;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mtk-search input::placeholder{color:var(--c-text-muted)}
.mtk-search input:hover{border-color:var(--c-base)}
.mtk-search input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(67,45,244,0.14)}
.mtk-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;
  background:var(--c-text-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.mtk-count{margin:0;font-size:var(--fs-body-sm);color:var(--c-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mtk-filters{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s6);
  padding-bottom:var(--s5);border-bottom:1px solid var(--c-border-subtle)}
.mtk-filters:empty{display:none}
.mtk-filter{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.mtk-filter-label{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--c-text-muted);
  text-transform:uppercase;letter-spacing:0.05em;margin-right:var(--s2);min-width:88px}
.mtk-pill{padding:8px 16px;border-radius:999px;border:1px solid var(--c-neutral-300);
  background:var(--c-white);color:var(--c-base);font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium-2);cursor:pointer;transition:all var(--dur) var(--ease);min-height:36px}
.mtk-pill:hover{border-color:var(--c-primary);color:var(--c-primary)}
.mtk-pill[aria-pressed="true"]{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}
.mtk-pill:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.mtk-reset{background:none;border:0;padding:4px 0;cursor:pointer;font:inherit;font-size:var(--fs-body-sm);
  color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.mtk-reset[hidden]{display:none}
.mtk-reset:hover{color:var(--c-primary-hover)}
.mtk-reset:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:4px}
.mtk-grid{padding:0}
.mtk-card[hidden]{display:none}
.mtk-play{pointer-events:none}
.mtk-dur{position:absolute;bottom:var(--s3);right:var(--s3);z-index:2;
  background:rgba(28,36,51,0.8);color:var(--c-white);font-size:var(--fs-micro);
  padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums}
.mtk-empty{text-align:center;color:var(--c-text-muted)}
.post5f-video--icon{background:var(--c-bg-subtle);border-bottom:1px solid var(--c-border-subtle)}
.post5f-icon{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-primary);opacity:.16}
.post5f-icon svg{width:42%;max-width:150px;height:auto;max-height:60%}
.post5f-video--icon .post5f-play{background:var(--c-base)}
.post5f-video--icon:hover .post5f-play{background:var(--c-primary)}
@media(max-width:640px){.mtk-filter-label{min-width:0;flex-basis:100%}.mtk-search{max-width:none}}

/* Inner Hero · Seiten-Standard (Referenz Steuerberatung Juli 2026):
   volle Breite, heller Verlauf, KEIN grauer Kasten. Bibliotheks-Karte
   bleibt als Modifier (.hero-inner--card). H1-Abdeckung ergänzt
   (Bibliothek stylte nur h2; Widget rendert semantisch korrekt H1). */
.ihero{padding:0}
.ihero--tint{background:linear-gradient(180deg,#f6f7fb 0%,var(--c-white) 100%)}
.ihero .hero-inner{background:transparent;border-radius:0;padding:var(--s8) 0;margin-top:0}
.ihero .hero-inner--card{background:var(--c-neutral-300);border-radius:var(--r-card-lg);
  padding:var(--s10) var(--s8);margin-top:var(--s4)}
.hero-inner h1,.hero-inner .as-h1{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;
  color:var(--c-base);max-width:18ch}
.hero-inner .btn--primary svg{margin-left:2px}
@media(max-width:860px){.ihero .hero-inner{padding:var(--s7) 0}}

/* =================================================================
   ZIELGRUPPEN-SEITEN-KOMPONENTEN (Steuerberatung-Referenz Juli 2026)
   ================================================================= */

/* FAQ · linksbündige Variante */
.faq--left .faq-header{text-align:left;max-width:none;margin-left:0}
.faq--left .faq-header h2,.faq--left .faq-header .as-h2{max-width:24ch}

/* Funktionsliste (Icon-Zeilen mit Hairlines) */
.fl5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.fl5f-head{max-width:56ch;margin-bottom:var(--s6)}
.fl5f-head .eyebrow,.st5f-head .eyebrow,.sb5f .eyebrow,.mc5f-head .eyebrow,.ak5f-head .eyebrow,.zg5f-head .eyebrow,.ab5f-head .eyebrow,.kk5f-head .eyebrow{display:inline-block;
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.fl5f-head h2,.st5f-head h2,.sb5f h2,.mc5f-head h2,.ak5f-head h2,.zg5f-head h2,.ab5f-head h2,.kk5f-head h2,.fl5f-head .as-h2,.st5f-head .as-h2,.sb5f .as-h2,.mc5f-head .as-h2,.ak5f-head .as-h2,.zg5f-head .as-h2,.ab5f-head .as-h2,.kk5f-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:-0.022em;line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.fl5f-head p{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;margin-top:var(--s4)}
.fl5f-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-neutral-300)}
.fl5f-row{display:grid;grid-template-columns:56px 1fr;gap:var(--s5);align-items:start;
  padding:var(--s6) 0;border-bottom:1px solid var(--c-neutral-300)}
.fl5f-ic{width:56px;height:56px;border-radius:14px;background:#efedfe;color:var(--c-primary);
  display:grid;place-items:center}
.fl5f-ic svg,.fl5f-ic .icu5f{width:calc(26px*var(--icz,1));height:calc(26px*var(--icz,1))}
/* Option „Icon-Farbe: Weiß auf Dunkelblau" */
.fl5f--ic-dark .fl5f-ic{background:var(--c-base);color:var(--c-white)}
.fl5f-row.fl5f-row--noic{grid-template-columns:minmax(0,1fr)}
.fl5f-copy h3,.fl5f-copy .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.015em;margin-bottom:var(--s2)}
.fl5f-copy p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55;max-width:64ch}
@media(max-width:640px){.fl5f-row{grid-template-columns:44px 1fr;gap:var(--s4)}
  .fl5f-ic{width:44px;height:44px;border-radius:11px}.fl5f-ic svg,.fl5f-ic .icu5f{width:calc(21px*var(--icz,1));height:calc(21px*var(--icz,1))}}

/* Schritte (nummerierte Karten, graue Fläche) */
.st5f{background:var(--c-bg-subtle);padding:var(--s9) var(--s5)}
.st5f-head{max-width:var(--wrap-in);margin:0 auto var(--s7)}
.st5f-head h2,.st5f-head .as-h2{max-width:22ch}
.st5f-grid{list-style:none;margin:0 auto;padding:0;max-width:var(--wrap-in);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);counter-reset:none}
.st5f-card{background:var(--c-white);border-radius:var(--r-card-lg);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s3)}
.st5f-num{width:40px;height:40px;border-radius:50%;background:var(--c-base);color:var(--c-white);
  display:grid;place-items:center;font-weight:var(--fw-semibold);font-size:var(--fs-body);margin-bottom:var(--s2)}
.st5f-card h3,.st5f-card .as-h3{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:-0.01em}
.st5f-card p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;flex:1}
.st5f-shot{margin-top:var(--s4);border:1px solid var(--c-neutral-300);border-radius:12px;overflow:hidden}
.st5f-shot img{width:100%;height:auto;display:block}
.st5f-shot--placeholder{position:relative;background:linear-gradient(160deg,#f2f0fe 0%,#fbfbfe 70%);
  min-height:190px;padding:12px}
.st5f-shot--placeholder .dots{position:absolute;top:0;left:0;right:0;height:26px;background:var(--c-white);
  border-bottom:1px solid var(--c-neutral-300);display:flex;align-items:center;gap:4px;padding:0 10px}
.st5f-shot--placeholder .dots i{width:6px;height:6px;border-radius:50%;background:var(--c-neutral-400)}
.st5f-shot--placeholder .bar{display:block;height:8px;border-radius:4px;background:var(--c-neutral-300);
  margin:10px 0 0;width:70%}
.st5f-shot--placeholder .bar--accent{margin-top:36px;background:var(--c-primary-t2);width:55%}
.st5f-shot--placeholder .bar--short{width:40%}
.st5f-chip{position:absolute;left:10px;bottom:10px;background:var(--c-white);
  border:1px solid var(--c-neutral-300);border-radius:999px;padding:3px 10px;
  font-size:var(--fs-micro);color:var(--c-text-muted)}
@media(max-width:960px){.st5f-grid{grid-template-columns:1fr}}

/* Zweispalter Text + Bullets */
/* Text + Bullets · Pixel-Spez (25.07, Feinschliff):
   4px-Raster, alle Abstände Token-genau und einzeln nachgemessen:
   Eyebrow 13/1 →16→ H2 →24→ Fließtext · Textblock →64→ Label 13/1
   →16→ Chips (feste Kontrollhöhe 36, Gap 12) · Bullets: erste Zeile
   exakt auf Eyebrow-Oberkante (Δ 0.0), Punkt per em-Rechnung auf der
   Zeilenmitte, Reihen 16. */
.sb5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5);
  display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s8);row-gap:0;align-items:start}
/* Eyebrow: Block + line-height 1 — deterministischer Zeilenkasten,
   kein 3px-Strut-Versatz; darunter exakt 16px. */
.sb5f .eyebrow{display:block;line-height:1;margin-bottom:var(--s4)}
/* Default-Margins neutralisiert (25.07): h2 brachte 34px UA-Margin mit
   (kollabierte über die 16px des Eyebrows), p 17px Bottom-Margin
   (blähte die Zelle → 81 statt 64 zur unteren Reihe). */
.sb5f h2,.sb5f .as-h2{max-width:14ch;margin:0}
.sb5f-copy p{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.55;margin:var(--s5) 0 0;max-width:44ch}
/* Kompositions-Fix (25.07): Liste vertikal gegen den Textblock
   zentriert — beseitigt das Loch unter kurzen Listen rechts. */
.sb5f-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s4);align-content:start;align-self:center}
.sb5f-list li{display:grid;grid-template-columns:14px 1fr;gap:var(--s3);align-items:start;
  font-size:var(--fs-body);line-height:1.5}
.sb5f-list .bullet{width:9px;height:9px;border-radius:50%;background:var(--c-primary);
  justify-self:center;margin-top:calc((1.5em - 9px) / 2)} /* optisch mittig in der 14px-Zelle */
/* Untere Reihe: Kategorien als Chips (Pillen-Element, gefüllt, ohne
   Rahmen) mit Versalien-Label — bewusst anderer visueller Code als die
   Argument-Bullets rechts (UX-Entscheidung 25.07). */
.sb5f-bottom{grid-column:1 / -1;margin-top:var(--s8)}
/* Konsistenz-Fix (25.07): EIN Label-Stil im Modul — Gruppenlabel
   in derselben Farbe wie der Eyebrow (Neonblau), keine zweite
   Grauvariante, die Bene erklären müsste. */
.sb5f-bottom-lbl{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);
  line-height:1;margin:0 0 var(--s4)}
.sb5f-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.sb5f-chips li{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;
  border-radius:var(--r-pill);background:var(--c-bg-subtle);color:var(--c-base);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);letter-spacing:-0.005em;
  line-height:1;white-space:nowrap}
/* Optionaler Text-Link unter dem Text (linke Spalte), Stil wie
   „Mehr zu den Kernfunktionen" (.features-cta .btn--ghost). */
.sb5f-more{margin-top:var(--s5)}
.sb5f-more a.btn--ghost,.sb5f-more a.btn--ghost:visited,.sb5f-more a.btn--ghost:focus{display:inline-flex;align-items:center;gap:8px;
  font-weight:var(--fw-semibold);color:var(--c-primary)}
.sb5f-more a.btn--ghost:hover{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.sb5f-more a.btn--ghost:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.sb5f--dark .sb5f-more a.btn--ghost,.sb5f--dark .sb5f-more a.btn--ghost:visited,
.sb5f--dark .sb5f-more a.btn--ghost:focus{color:var(--c-primary-t2)}
.sb5f--dark .sb5f-more a.btn--ghost:hover{color:var(--c-white)}
.sb5f--dark .sb5f-more a.btn--ghost:focus-visible{outline-color:var(--c-primary-t2)}
@media(max-width:860px){
  .sb5f{grid-template-columns:1fr;row-gap:var(--s6)}
  .sb5f-bottom{margin-top:var(--s2)}
  .sb5f-chips li{white-space:normal;line-height:1.3;padding:8px 16px;min-height:0}
}

/* Modul-Karten (Neonblau · Option D) */
.mc5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.mc5f-head{margin-bottom:var(--s6)}
.mc5f-head h2,.mc5f-head .as-h2{max-width:24ch}
.mc5f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.mc5f-card{background:var(--c-primary);color:var(--c-white);border-radius:20px;padding:var(--s6);
  display:flex;flex-direction:column;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.mc5f-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(67,45,244,0.30)}
.mc5f-pill{align-self:flex-start;font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:0.05em;text-transform:uppercase;color:var(--c-white);
  border:1px solid rgba(255,255,255,0.45);border-radius:999px;padding:4px 11px;margin-bottom:var(--s4)}
.mc5f-card h3,.mc5f-card .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.015em;margin-bottom:var(--s3)}
.mc5f-card p{font-size:var(--fs-body-sm);line-height:1.55;color:rgba(255,255,255,0.92);flex:1}
.mc5f-more{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s5);
  color:var(--c-white);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);text-decoration:none}
.mc5f-more:hover{text-decoration:underline;text-underline-offset:4px;color:var(--c-white)}
.mc5f-more:focus-visible{outline:2px solid var(--c-white);outline-offset:3px;border-radius:6px}
@media(max-width:960px){.mc5f-grid{grid-template-columns:1fr}}

/* =================================================================
   GRUNDFUNKTIONEN-SCROLLER + PLATTFORM-EBENEN (aus gf-v2, Juli 2026)
   ================================================================= */
.eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary)}
.section-head{max-width:720px;margin:0 0 var(--s7)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head .eyebrow{margin-bottom:var(--s4)}
.section-head h2,.section-head .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.section-head .lead{margin-top:var(--s4);font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.55}
.kf-scroller{padding:var(--s9) 0 var(--s10);overflow:hidden}
.kf-scroller .wrap{max-width:1200px}
.kf-scroller-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);margin-bottom:var(--s7);flex-wrap:wrap}
.kf-scroller-head .txt{max-width:680px}
.kf-scroller-head .eyebrow{margin-bottom:var(--s4)}
.kf-scroller-head h2,.kf-scroller-head .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.kf-arrows{display:flex;gap:var(--s3);flex-shrink:0}
.kf-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--c-border);background:var(--c-white);
  display:grid;place-items:center;cursor:pointer;color:var(--c-base);transition:all var(--dur) var(--ease)}
.kf-arrow:hover:not(:disabled){border-color:var(--c-primary);color:var(--c-primary)}
.kf-arrow:disabled{opacity:.3;cursor:not-allowed}
.kf-arrow svg{width:18px;height:18px}
.kf-track{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - var(--s5) - 8%) / 2);
  gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin:0 calc(-1*var(--s5));padding:0 var(--s5) var(--s2);scroll-padding-inline:var(--s5);
  scrollbar-width:none;-ms-overflow-style:none}
.kf-track::-webkit-scrollbar{display:none}
.kf-fcard{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;
  background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  overflow:hidden;transition:box-shadow .4s var(--ease),transform var(--dur) var(--ease)}
.kf-fcard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.kf-fcard .kf-cardmedia{position:relative;padding:var(--s6) var(--s6) 0;
  background:linear-gradient(150deg,#eef0fb 0%,#f6f7fc 60%,#fff 100%)}
.kf-fcard .kf-wire{aspect-ratio:16/10;margin:0;border-radius:var(--r-card) var(--r-card) 0 0;
  border-bottom:none;box-shadow:0 -1px 0 rgba(28,36,51,.04),0 12px 28px rgba(28,36,51,.10)}
.kf-fcard .kf-cardbody{padding:var(--s6);display:flex;flex-direction:column;flex:1}
.kf-fcard .p-num{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--c-primary);
  letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums;margin-bottom:var(--s3);display:block}
.kf-fcard h3,.kf-fcard .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:-0.02em;line-height:1.15;margin-bottom:var(--s3)}
.kf-fcard .p-sub{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.5;margin-bottom:var(--s5)}
.kf-fcard .p-bullets{list-style:none;display:flex;flex-direction:column;gap:var(--s3);margin-bottom:var(--s6)}
.kf-fcard .p-bullets li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);color:var(--c-text);line-height:1.45}
.kf-fcard .p-bullets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-primary);flex-shrink:0;margin-top:6px}
.kf-fcard .p-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium-2);color:var(--c-primary);text-decoration:none;align-self:flex-start}
.kf-fcard .p-link svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.kf-fcard .p-link:hover svg{transform:translateX(3px)}
@media(max-width:760px){
.kf-track{grid-auto-columns:calc(100% - 14%)}
}
.kf-wire .wire-bar{position:absolute;top:0;left:0;right:0;height:34px;background:var(--c-white);
  border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;gap:6px;padding:0 14px}
.kf-wire .wire-bar i{width:8px;height:8px;border-radius:50%;background:var(--c-neutral-400);display:block}
.kf-wire .wire-body{position:absolute;top:34px;left:0;right:0;bottom:0;padding:var(--s5);display:flex;gap:var(--s5)}
.kf-wire .wire-side{width:28%;display:flex;flex-direction:column;gap:10px}
.kf-wire .wire-main{flex:1;display:flex;flex-direction:column;gap:10px}
.kf-wire .wire-chip{height:26px;border-radius:6px;background:var(--c-white);border:1px solid var(--c-border-subtle)}
/* Guard-Fund 28.07: der GF-Scroller-Wireframe emittiert .ln/.accent/.w40–.w100
   — diese Klassen hatten im Theme NIE Regeln (sie existierten nur in den
   Standalone-Referenzen). Die Balken renderten als leere Spans; kaschiert
   durch die gestylten .wire-chip. Hier nachgerüstet, gescoped auf .kf-wire. */
.kf-wire .ln{display:block;height:10px;border-radius:4px;background:var(--c-neutral-300);width:100%}
.kf-wire .ln.accent{background:var(--c-primary-t2)}
.kf-wire .ln.w40{width:40%}.kf-wire .ln.w60{width:60%}
.kf-wire .ln.w80{width:80%}.kf-wire .ln.w100{width:100%}
.kf-wire .wire-ico{position:absolute;right:18px;bottom:16px;width:calc(40px*var(--icz,1));height:calc(40px*var(--icz,1));color:var(--c-primary);opacity:.5}
.kf-wire .wire-cap{position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--c-text-muted);
  background:var(--c-white);border:1px solid var(--c-border-subtle);padding:3px 9px;border-radius:var(--r-pill)}
/* 28.07: Kopf breiter (Kundenwunsch) + Ebene steuert Größe.
   Bewusst auf .kf-tiers gescoped — .section-head h2 ist global doppelt
   definiert (Z. ~2023 vs. ~2719, Altlast) und bleibt hier unangetastet. */
/* 28.07: 920 war für den Titel zu lang (Feedback) — 800 als Mittelweg
   zwischen dem ursprünglichen 720er-Korsett und der vollen Kartenbreite. */
.kf-tiers .section-head{max-width:800px}
.kf-tiers .tiers-title{color:var(--c-base);font-weight:var(--fw-medium-2);
  line-height:var(--lh-heading);margin-bottom:var(--s4)}
h1.tiers-title,.as-h1.tiers-title{font-size:clamp(40px,5vw,64px);letter-spacing:-0.030em}
h2.tiers-title,.as-h2.tiers-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
h3.tiers-title,.as-h3.tiers-title{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
h4.tiers-title,.as-h4.tiers-title{font-size:var(--fs-h4);letter-spacing:var(--ls-h3)}
.kf-tiers .section-head h2,.kf-tiers .section-head .as-h2{color:var(--c-base)}
.kf-tiers .section-head .lead{color:var(--c-text-muted)}
.kf-tiers .section-head .eyebrow{color:var(--c-primary)}
.tier-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s5);max-width:1080px;margin:0 auto}
.tier-grid > .tier{flex:0 1 calc((100% - 2*var(--s5))/3);min-width:0}
.tier{border-radius:var(--r-card-lg);padding:var(--s7);display:flex;flex-direction:column;min-height:260px;
  text-decoration:none;transition:transform var(--dur) var(--ease)}
.tier:hover{transform:translateY(-3px)}
.tier .tier-tag{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--s4)}
.tier h3,.tier .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:-0.02em;margin-bottom:var(--s3)}
.tier p{font-size:var(--fs-body-sm);line-height:1.55;margin-bottom:var(--s5)}
.tier .tier-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2)}
.tier .tier-link svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.tier:hover .tier-link svg{transform:translateX(3px)}
.tier--current{background:var(--c-base);color:var(--c-white)}  /* DS-Regel: Karten dunkelblau, Neonblau nur CTAs */
.tier--current .tier-tag{color:var(--c-primary-t2)}
.tier--current .tier-link{color:var(--c-white)}
.tier--other{background:var(--c-white);color:var(--c-base);border:1.5px solid var(--c-border-subtle)}
.tier--other:hover{border-color:var(--c-primary);box-shadow:var(--sh-2)}
.tier--other .tier-tag{color:var(--c-primary)}
.tier--other p{color:var(--c-text-muted)}
.tier--other .tier-link{color:var(--c-primary)}
@media(max-width:760px){
.tier-grid > .tier{flex-basis:100%}
}
.cta .eyebrow{color:var(--c-white);opacity:.9;margin-bottom:var(--s4)}
/* Scroller: echtes Bild statt Wireframe */
.kf-shot{border-radius:12px;overflow:hidden;height:100%}
.kf-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Modul-Karten · Dunkelblau-Variante (Kundenwunsch Juli 2026) + Lead */
.mc5f-lead{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;margin-top:var(--s4);max-width:56ch}
.mc5f-card{text-decoration:none}
a.mc5f-card:hover{text-decoration:none;color:var(--c-white)}
.mc5f--dark .mc5f-card{background:var(--c-base)}
.mc5f--dark .mc5f-card:hover{box-shadow:0 18px 40px rgba(28,36,51,0.35)}
.mc5f--dark .mc5f-pill{border-color:rgba(255,255,255,0.35)}
a.mc5f-card:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.mc5f--dark a.mc5f-card:focus-visible{outline-color:var(--c-base)}


/* Designsystem-Konformität (v3-2): Buttons unterstreichen NIE auf Hover —
   nur .btn--ghost (Text-Button) darf. Schutz gegen globale a:hover-Regeln. */
a.btn:hover,a.btn5f:hover,.nav-cta:hover,a.mc5f-card:hover,a.tier:hover,
.hero5f-pill:hover,.mtk-pill:hover{text-decoration:none}

/* Kit-Guard Buttons als Links: .elementor-kit-N a (0,1,1) und a:hover (0,2,1) */
a.btn5f.btn5f--blue,a.btn5f.btn5f--blue:visited,a.btn5f.btn5f--blue:focus,a.btn5f.btn5f--blue:active{color:var(--c-white)}
a.btn5f.btn5f--blue.btn5f--blue:hover{background:#3520d4;color:var(--c-white)}
a.btn5f.btn5f--white,a.btn5f.btn5f--white:visited,a.btn5f.btn5f--white:focus,a.btn5f.btn5f--white:active{color:var(--c-primary)}
a.btn5f.btn5f--white.btn5f--white:hover{color:var(--c-white)}
a.btn5f.btn5f--outline,a.btn5f.btn5f--outline:visited,a.btn5f.btn5f--outline:focus,a.btn5f.btn5f--outline:active{color:var(--c-base)}
a.btn5f.btn5f--outline.btn5f--outline:hover{color:var(--c-white)}
a.btn5f.btn5f--ghost-inv,a.btn5f.btn5f--ghost-inv:visited,a.btn5f.btn5f--ghost-inv.btn5f--ghost-inv:hover,a.btn5f.btn5f--ghost-inv:focus,a.btn5f.btn5f--ghost-inv:active{color:var(--c-white)}


/* =================================================================
   DS-DURCHSETZUNG (Juli 2026): Neonblau NUR für CTAs.
   Karten-Flächen (Module, Ebenen) = Dunkelblau #1c2433.
   Explizite Textfarben auf allen Karten-Nachfahren, damit die
   Heading-Grundregeln (h1–h6 = c-base) dunkle Karten nie unterlaufen.
   ================================================================= */
.tier--dark{background:var(--c-base);color:var(--c-white)}
.tier--dark h3,.tier--current h3,.tier--dark .as-h3,.tier--current .as-h3{color:var(--c-white)}
.tier--dark p,.tier--current p{color:rgba(255,255,255,0.88)}
.tier--dark .tier-tag{color:var(--c-primary-t2)}
.tier--dark .tier-link{color:var(--c-white)}
a.tier--dark:hover{color:var(--c-white)}

.mc5f-card{background:var(--c-base)}  /* Dunkelblau fest — Neon-Option entfernt */
.mc5f-card h3,.mc5f-card .as-h3{color:var(--c-white)}
.mc5f-card p{color:rgba(255,255,255,0.88)}
.mc5f-card .mc5f-pill{color:var(--c-white);border-color:rgba(255,255,255,0.35)}
.mc5f-card .mc5f-more{color:var(--c-white)}
.mc5f-card:hover{box-shadow:0 18px 40px rgba(28,36,51,0.35)}


/* =================================================================
   CTA RICHTUNG A · Punktraster interaktiv ("Ordnung, die atmet")
   1:1 aus 5f-cta-a.html (Referenz). Kontrast-Entscheidungen im
   Original dokumentiert — nicht "korrigieren".
   ================================================================= */
/* ============================================================
   CTA-A — Komponente (Klassen-Präfix cta-a-, kollisionsfrei)
   ============================================================ */
/* Audit 27.07 · Gleiches doppeltes Polster wie bei .cta5f, nur ausgeprägter:
   s9 (96) an der Sektion plus 112px in der Karte = 208px bis zum Eyebrow,
   mit der Vorsektion 304px. Jetzt 64 + 96 = 160px auf Desktop, und 112px
   weicht der Skalenstufe s9. */
.cta-a{padding:var(--s8) 0}
.cta-a-box{
  position:relative;overflow:hidden;
  background:var(--c-primary);color:var(--c-white);
  border-radius:var(--r-card-lg);
  padding:var(--s8) var(--s6);text-align:center;
}
@media(min-width:768px){.cta-a-box{padding:var(--s9) var(--s8)}}
@media(max-width:600px){.cta-a-box{padding:var(--s7) var(--s5)}}


.cta-a-inner{position:relative;z-index:1;max-width:720px;margin:0 auto}

/* Eyebrow bewusst in Weiß, NICHT --c-primary-t2: #b2b2f9 auf #432df4
   ergibt 3,64:1 und fällt AA für 13px/600 durch (Ton-auf-Ton-Falle,
   siehe Audit). Weiß auf #432df4 = 7,19:1 (AA + AAA). */
.cta-a-eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-white);margin-bottom:20px}

.cta-a-box h2,.cta-a-box .as-h2{
  font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-white);
  text-wrap:balance;margin-bottom:20px;
}
.cta-a-box .nowrap{white-space:nowrap}

/* Lead: rgba(weiß,.85) auf #432df4 = 5,58:1 (AA, siehe QA-Report) */
.cta-a-box .lead{
  font-size:clamp(16px,1.3vw,19px);font-weight:var(--fw-regular-2);line-height:var(--lh-body);
  letter-spacing:-0.01em;color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 40px;
}

.cta-a-actions{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.cta-a-btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font);font-size:16px;font-weight:var(--fw-semibold);
  padding:14px 28px;border-radius:var(--r-pill);min-height:48px;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.cta-a-btn:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.cta-a-btn--primary{background:var(--c-white);color:var(--c-primary)}
.cta-a-btn--primary:hover{background:var(--c-neutral-300);transform:translateY(-1px)}
.cta-a-btn--primary .arrow{transition:transform var(--dur) var(--ease)}
.cta-a-btn--primary:hover .arrow{transform:translateX(3px)}
.cta-a-btn--ghost{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.45)}
.cta-a-btn--ghost:hover{border-color:var(--c-white);background:rgba(255,255,255,.08)}

/* Note: rgba(weiß,.78) auf #432df4 = 4,92:1 (AA, knapp aber sicher —
   siehe QA-Report; NICHT weiter absenken) */
.cta-a-note{font-size:var(--fs-body-sm);font-weight:var(--fw-regular-2);line-height:var(--lh-body);
  color:rgba(255,255,255,.78)}
.cta-a-note strong{color:var(--c-white);font-weight:var(--fw-semibold)}

/* reduced-motion: Bewegung aus, Opazitäts-Reaktion bleibt zulässig
   (wird im JS gated), Button-Übergänge aus */
@media(prefers-reduced-motion:reduce){
  .cta-a *{transition:none!important;animation:none!important}
}


/* =================================================================
   EXTRAS-SEITE (gescoped unter .x5f — eigene Formensprache der
   Referenz, kollisionsfrei zu Bibliothek/anderen Seiten-Ports)
   ================================================================= */


/* =================================================================
   EXTRAS-SEITE · Lizenz-Übersicht (lz-*, kollisionfrei zu kf-tiers),
   Sticky-Filter, Extras-Grid, Vergleichstabelle (aus 5f-extras-2-3)
   ================================================================= */
/* =================================================================
   TIER OVERVIEW · zwei Karten, side-by-side
   D5: Rhythmus var(--s10) 0.
   ================================================================= */
.lz-tiers{padding:var(--s10) 0}.x5f .section-head{margin-bottom:var(--s8);max-width:680px}.x5f .section-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}.x5f .section-head h2,.x5f .section-head .as-h2{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:1.05;color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s4);
  text-wrap:balance}.x5f .section-head .lead{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;
  max-width:58ch;text-wrap:pretty}.x5f .lz-tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}.x5f .lz-tier{position:relative;border-radius:var(--r-card-lg);padding:var(--s8) var(--s7);
  display:flex;flex-direction:column;min-height:520px;overflow:hidden;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.x5f .lz-tier:hover{transform:translateY(-2px)}.x5f .lz-tier-team{background:var(--c-white);border:1px solid var(--c-border-subtle);box-shadow:var(--sh-1)}.x5f .lz-tier-team:hover{box-shadow:var(--sh-2)}

/* D3: Zwei-Pol-Kartensystem wiederhergestellt — Custom = Dunkelblau
   (Premium-Anker), Violett bleibt Aktionsfarbe. Entscheidung 11.06
   erlaubt Karten in Dunkelblau ODER Neonblau. Das Mobile-Problem
   ("liest sich als Section-Bande", Blocker 3 aus v2) wird geometrisch
   gelöst: siehe @media ≤860px — Inset + Schatten machen die Fläche
   eindeutig als Karte lesbar, ohne die Farbarchitektur zu opfern. */
.lz-tier-custom{background:var(--c-base);color:var(--c-white)}.x5f .lz-tier-custom .lz-tier-num, .x5f .lz-tier-custom .lz-tier-name, .x5f .lz-tier-custom .lz-tier-list li, .x5f .lz-tier-custom .lz-tier-desc{color:var(--c-white)}.x5f .lz-tier-custom .lz-tier-list li::before{background:var(--c-primary-t2)}
/* Bonus-Punkte: Weiß — maximal sichtbar auf Dunkelblau, keine
   Off-Palette-Farbe (Amber bleibt entfernt). */
.lz-tier-custom .lz-tier-list li.is-bonus::before{background:var(--c-white)}.x5f .lz-tier-custom .lz-tier-badge{background:rgba(255,255,255,0.12);color:var(--c-white)}.x5f .lz-tier-custom .lz-tier-cta{background:var(--c-white);color:var(--c-base)}
/* Hover: der eine Violett-Moment der dunklen Karte = Aktion */
.lz-tier-custom .lz-tier-cta:hover{background:var(--c-primary);color:var(--c-white)}.x5f .lz-tier-head{display:flex;align-items:flex-start;justify-content:space-between;
  margin-bottom:var(--s7);gap:var(--s4)}.x5f .lz-tier-badge{display:inline-block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:0.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);
  background:var(--c-neutral-300);color:var(--c-text-muted)}.x5f .lz-tier-num{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--c-text-muted);
  letter-spacing:0.04em;text-transform:uppercase;margin-bottom:var(--s2)}.x5f .lz-tier-name{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.05;color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s3)}.x5f .lz-tier-desc{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.5;margin-bottom:var(--s6)}/* Fix 31.07: nativer UL-Marker (disc) wurde nie zurückgesetzt →
   Browser-Punkt + ::before-Punkt = Doppel-Bullet. list-style/padding/
   margin explizit nullen (auf ul UND li — Hello setzt Marker teils
   auf li-Ebene). */
.x5f .lz-tier-list{display:flex;flex-direction:column;gap:var(--s3);margin:0 0 var(--s7);padding:0;list-style:none;flex:1}.x5f .lz-tier-list li{list-style:none;position:relative;padding-left:var(--s5);font-size:var(--fs-body);
  color:var(--c-base);line-height:1.5}.x5f .lz-tier-list li::before{content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:50%;background:var(--c-primary)}.x5f .lz-tier-list li.is-bonus{font-weight:var(--fw-semibold)}.x5f .lz-tier-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border-radius:var(--r-pill);font-weight:var(--fw-medium);font-size:var(--fs-body);
  align-self:flex-start;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.x5f .lz-tier-team .lz-tier-cta{background:var(--c-primary);color:var(--c-white)}.x5f .lz-tier-team .lz-tier-cta:hover{background:var(--c-primary-hover);transform:translateY(-1px);box-shadow:var(--sh-2)}.x5f .lz-tier-cta svg{width:14px;height:14px}

@media(max-width:860px){.x5f .lz-tier-grid{grid-template-columns:1fr}.x5f .lz-tier{min-height:auto;padding:var(--s7) var(--s6)}
  /* D3: geometrische Karten-Lesbarkeit der dunklen Fläche */
  .lz-tier-custom{margin-inline:var(--s2);box-shadow:var(--sh-2)}
}

/* =================================================================
   FILTER · sticky — D10: mobil einzeilig scrollbar; D14: Buttons
   mit aria-pressed statt tablist.
   ================================================================= */
.filter-bar{position:sticky;top:76px;z-index:50;background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-neutral-300);padding:var(--s4) 0}.x5f .filter-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}.x5f .filter-label{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  color:var(--c-text-muted)}.x5f .filter-pills{display:flex;gap:var(--s2);flex-wrap:wrap}.x5f .filter-pill{display:inline-flex;align-items:center;gap:var(--s2);
  padding:8px 16px;border-radius:var(--r-pill);font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);color:var(--c-base);background:transparent;
  border:1px solid var(--c-border-subtle);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
    border-color var(--dur) var(--ease)}.x5f .filter-pill:hover{border-color:var(--c-base);background:var(--c-neutral-300)}.x5f .filter-pill .count{font-size:var(--fs-micro);color:var(--c-text-muted);
  font-variant-numeric:tabular-nums}
/* Aktiv = Dunkelblau (Violett bleibt Aktionen/Links vorbehalten) */
.filter-pill.is-active{background:var(--c-base);color:var(--c-white);border-color:var(--c-base)}.x5f .filter-pill.is-active .count{color:rgba(255,255,255,0.7)}

@media(max-width:680px){.x5f .filter-inner{flex-direction:column;align-items:flex-start;gap:var(--s3);flex-wrap:nowrap}.x5f .filter-pills{flex-wrap:nowrap;max-width:100%;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.x5f .filter-pills::-webkit-scrollbar{display:none}.x5f .filter-pill{flex-shrink:0}
}

/* =================================================================
   EXTRAS GRID
   Rhythmus-Ausnahme 2 (D5): folgt der Sticky-Filterbar → s7 oben.
   ================================================================= */
.extras-section{padding:var(--s7) 0 var(--s10)}.x5f .extras-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);
  transition:opacity 160ms var(--ease)}.x5f .extras-grid.is-filtering{opacity:.35}

/* D6: Ruhe-Border --c-border (#cecece) statt quasi unsichtbarem
   neutral-300 — Grid hat Struktur im Ruhezustand, Hover-Sprung
   (→ base) fällt kleiner aus. Transition enumeriert. */
.extra{position:relative;background:var(--c-white);border:1px solid var(--c-border);
  border-radius:var(--r-card);padding:var(--s6);display:flex;flex-direction:column;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
  text-decoration:none;color:inherit;min-height:280px}.x5f .extra:hover{border-color:var(--c-base);box-shadow:var(--sh-2);transform:translateY(-3px)}.x5f .extra:hover .extra-arrow{transform:translateX(4px)}.x5f .extra-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--s4);margin-bottom:var(--s5)}
/* 31.07: Icon-Behandlung an das kanonische Feature-Karten-Muster
   angeglichen (DS §13: "Icon unten rechts, Titel oben links") —
   Benes Icons groß, monochrom #1c2433, unten rechts in der Fuß-
   zeile neben dem Link. Kein Farbwechsel auf Hover (Neonblau bleibt
   dem CTA/Link vorbehalten). */
.x5f .extra-foot{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s4);margin-top:auto}
.x5f .extra-icon{width:calc(84px*var(--icz,1));height:calc(84px*var(--icz,1));color:var(--c-base);
  display:flex;align-items:flex-end;justify-content:flex-end;
  flex-shrink:0;margin-left:auto}
.x5f .extra-icon .ic{width:100%;height:100%}
.x5f .extra-icon .ic svg{width:100%;height:auto;display:block}
/* background-color:currentColor kommt für Masken-Icons aus der
   globalen .ic-mask-Regel — NICHT auf .ic generell (der Embedded-
   SVG-Fallback würde sonst als Vollflächen-Quadrat rendern). */
.x5f .extra-badges{display:flex;gap:6px;align-items:flex-start}.x5f .extra-badge{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  padding:4px 12px;border-radius:var(--r-pill);white-space:nowrap}.x5f .extra-badge.is-team{background:var(--c-neutral-300);color:var(--c-text-muted)}
/* Neutral, Unterschied über Text und Form: beide Lizenzen = gefüllt,
   nur Custom = Kontur. */
.extra-badge.is-both{background:var(--c-neutral-300);color:var(--c-base);border:1.5px solid var(--c-neutral-300)}.x5f .extra-badge.is-custom{background:transparent;color:var(--c-base);border:1.5px solid var(--c-base)}.x5f .extra-name{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);
  color:var(--c-base);letter-spacing:-0.01em;line-height:1.25;margin-bottom:var(--s3)}.x5f .extra-desc{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;flex:1;
  margin-bottom:var(--s4)}.x5f .extra-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium);color:var(--c-primary)}.x5f .extra-link .extra-arrow{transition:transform var(--dur) var(--ease)}.x5f .extra.is-hidden{display:none}

@media(max-width:980px){.x5f .extras-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.x5f .extras-grid{grid-template-columns:1fr}}

/* Section sub-head between groups (rendered when filter = all) */
.group-head{grid-column:1/-1;display:flex;align-items:center;gap:var(--s4);
  margin:var(--s7) 0 var(--s2);padding-top:var(--s6);
  border-top:1px solid var(--c-border-subtle)}.x5f .group-head:first-of-type{margin-top:0;padding-top:0;border-top:0}.x5f .group-head h3,.x5f .group-head .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);
  color:var(--c-base);letter-spacing:-0.018em;font-variation-settings:"opsz" 32}.x5f .group-head .group-tag{font-size:var(--fs-body-sm);font-weight:var(--fw-medium);
  color:var(--c-text-muted)}.x5f .group-head.is-hidden{display:none}
/* Filter: [hidden] gegen display:flex der Karten und Gruppen-Köpfe durchsetzen */
.x5f .extra[hidden],.x5f .group-head[hidden]{display:none}
.x5f[data-filter="custom"] .group-head[data-group="custom"]{margin-top:0;padding-top:0;border-top:0}
.x5f .filter-pill.is-active:hover{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}

/* Extras-Grid: Popup wie Bento (Expand-Button oben rechts, Bento-Modal) */
.x5f .extra-top{min-height:32px;align-items:center}
.x5f .extra--modal{cursor:pointer}
.x5f .extra-expand{flex-shrink:0;width:32px;height:32px;border-radius:var(--r-pill);border:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font:inherit;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.x5f .extra-expand,.x5f .extra-expand:focus,.x5f .extra-expand:active{background:var(--c-bg-subtle);color:var(--c-text-muted)}
.x5f .extra-expand:hover,.x5f .extra--modal:hover .extra-expand{background:var(--c-primary);color:var(--c-white)}
.x5f .extra-expand:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.x5f .extra-expand svg{width:15px;height:15px}
.x5f a.extra-link:hover{color:var(--c-primary)}
.bento-modal-content .mright .ic{width:55%;max-width:240px;aspect-ratio:1;color:var(--c-base);display:block}
.bento-modal-content .mright .ic svg{width:100%;height:100%;display:block}
.bento-modal--single .bento-modal-panel{max-width:760px}
.bento-modal--single .bento-modal-content{grid-template-columns:1fr}
.bento-modal--single .bento-modal-content .mlead{max-width:60ch}
.x5f .bento-modal-content .mlead{margin:0}

/* =================================================================
   COMPARISON TABLE (Stripe-style, ruhig)
   D1: graues Band rendert wieder. D5: Rhythmus s10.
   D11: innerer Scroll-Container statt Clipping; sticky-thead
   entfernt (war durch overflow-Ancestor ohnehin funktionslos).
   ================================================================= */
.compare{padding:var(--s10) 0;background:var(--c-bg-subtle)}.x5f .compare .section-head h2,.x5f .compare .section-head .as-h2{color:var(--c-base)}.x5f .compare-table-wrap{margin-top:var(--s7);background:var(--c-white);
  border-radius:var(--r-card-lg);overflow:hidden;border:1px solid var(--c-border-subtle)}.x5f .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.x5f .compare-table{width:100%;min-width:640px;border-collapse:collapse}.x5f .compare-table thead th{padding:var(--s5) var(--s5);text-align:left;
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.04em;
  text-transform:uppercase;color:var(--c-text-muted);
  border-bottom:1px solid var(--c-border-subtle);background:var(--c-white)}.x5f .compare-table thead th.col-tier{text-align:center;width:140px}.x5f .compare-table thead th .tier-h{display:block;font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);
  color:var(--c-base);letter-spacing:-0.01em;text-transform:none;margin-top:2px}.x5f .compare-table tbody td, .x5f .compare-table tbody th.feat{padding:var(--s4) var(--s5);font-size:var(--fs-body);
  color:var(--c-base);border-bottom:1px solid var(--c-border-subtle);vertical-align:top}.x5f .compare-table tbody tr:last-child td, .x5f .compare-table tbody tr:last-child th.feat{border-bottom:0}.x5f .compare-table th.feat{text-align:left;font-weight:var(--fw-medium)}.x5f .compare-table th.feat .name{font-weight:var(--fw-medium);color:var(--c-base);margin-bottom:2px}.x5f .compare-table th.feat .desc{font-size:var(--fs-body-sm);font-weight:var(--fw-regular-2);color:var(--c-text-muted);line-height:1.5}.x5f .compare-table td.cell{text-align:center;width:140px;vertical-align:middle}.x5f .tick{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--c-primary);color:var(--c-white)}.x5f .tick svg{width:13px;height:13px;stroke:currentColor;stroke-width:3;fill:none}.x5f .tick.is-accent{background:transparent;color:var(--c-primary);border:2px solid var(--c-primary)}.x5f .no-mark{color:var(--c-text-muted);font-size:18px;line-height:1}.x5f .compare-foot{margin-top:var(--s6);font-size:var(--fs-body-sm);color:var(--c-text-muted);
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}.x5f .compare-foot .legend-dot{display:inline-block;width:12px;height:12px;border-radius:50%;
  background:var(--c-primary);margin-right:4px;vertical-align:-2px}.x5f .compare-foot .legend-dot.is-accent{background:transparent;border:2px solid var(--c-primary)}

@media(max-width:760px){.x5f .compare-table thead th .tier-h{font-size:var(--fs-body)}
}



/* Bene-Icons als CSS-Maske (Dateien: Theme /assets/icons/Icon-*.svg).
   Farbe = currentColor; mask-image kommt inline vom Widget. */
.ic-mask{display:inline-block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

.x5f .legend-sep{margin:0 var(--s2);opacity:.4}

/* Vergleichstabelle · Härtung (Fix "Border/ugly", Juli 2026):
   Basistabellen-Stile von Theme/Editor durchschlugen die Portlücken
   (vertikale Spaltenlinien, hartes Zebra). Hier explizit alles setzen,
   was die Referenz meint: KEINE vertikalen Linien, nur ruhige
   horizontale Hairlines, weiße Karte, großzügige Zellen. */
.x5f .compare-table{border-collapse:collapse;border:none;width:100%;background:var(--c-white)}
.x5f .compare-table th,
.x5f .compare-table td{border:none;background:transparent;vertical-align:middle}
.x5f .compare-table thead th{padding:var(--s5) var(--s5) var(--s4);
  border-bottom:1px solid var(--c-neutral-300)}
.x5f .compare-table tbody tr{border:none}
.x5f .compare-table tbody tr + tr th,
.x5f .compare-table tbody tr + tr td{border-top:1px solid var(--c-neutral-300)}
.x5f .compare-table tbody tr:nth-child(odd),
.x5f .compare-table tbody tr:nth-child(even){background:transparent}
.x5f .compare-table .feat{padding:var(--s5);text-align:left}
.x5f .compare-table .cell{padding:var(--s5);text-align:center;width:150px}
.x5f .compare-table .feat .name{font-weight:var(--fw-medium-2);color:var(--c-base)}
.x5f .compare-table .feat .desc{font-size:var(--fs-body-sm);color:var(--c-text-muted);margin-top:2px}
.x5f .compare-table-wrap{background:var(--c-white);border-radius:var(--r-card-lg);
  border:1px solid var(--c-neutral-300);box-shadow:0 10px 30px rgba(28,36,51,0.05);overflow:hidden}
.x5f .compare-scroll{overflow-x:auto}
.x5f .compare-foot{margin-top:var(--s5)}
@media(max-width:640px){
  .x5f .compare-table .feat,.x5f .compare-table .cell{padding:var(--s4)}
  .x5f .compare-table .cell{width:96px}
}
/* Lizenz-Vergleich: enthalten / zubuchbar / nicht verfügbar, Legende, Hintergrund */
.x5f .compare-table tbody th.feat{vertical-align:middle}
.x5f .compare-table-wrap{border-color:var(--c-neutral-400)}
/* Kopfzeile: helles Band, gedämpfte Labels, einzeilig; keine Linie oben (Hello-Reset) */
.x5f .compare-table.compare-table thead th{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  letter-spacing:0;text-transform:none;color:var(--c-text-muted);white-space:nowrap;
  background:var(--c-neutral-200);padding-top:var(--s4);padding-bottom:var(--s4);
  border-top:0;border-block-start:0;border-bottom:1px solid var(--c-neutral-400)}
.x5f .compare-table thead th .tier-h{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit;margin:0}
.x5f .tier-h-short{display:none}
.x5f .compare-table thead th.col-tier,.x5f .compare-table .cell{width:190px}
@media(min-width:1024px){.x5f .compare-table thead th.col-tier,.x5f .compare-table .cell{width:240px}}
/* Status-Icons: Standard Dunkelblau, optional Neonblau */
.x5f .compare .tick{background:var(--c-base);color:var(--c-white)}
.x5f .cmp-plus{display:inline-flex;width:24px;height:24px;color:var(--c-base);vertical-align:middle}
.x5f .cmp-plus svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.x5f .compare--ic-primary .tick{background:var(--c-primary)}
.x5f .compare--ic-primary .cmp-plus{color:var(--c-primary)}
/* Legende über der Tabelle */
.x5f .cmp-legend{list-style:none;padding:0;margin:var(--s6) 0 0;display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);
  font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.x5f .cmp-legend + .compare-table-wrap{margin-top:var(--s4)}
.x5f .cmp-legend li{display:inline-flex;align-items:center;gap:var(--s2);margin:0}
.x5f .cmp-legend .tick,.x5f .cmp-legend .cmp-plus{width:20px;height:20px;flex-shrink:0}
.x5f .cmp-legend .tick svg{width:11px;height:11px}
.x5f .cmp-legend .no-mark{display:inline-block;width:20px;text-align:center;font-size:16px}
/* Mobil: passt ohne Querscrollen, Kurzlabels (Langform bleibt für Screenreader) */
@media(max-width:640px){
  .x5f .compare-table{min-width:0;table-layout:fixed}
  .x5f .compare-table thead th.col-tier,.x5f .compare-table .cell{width:72px;box-sizing:border-box;
    padding-left:var(--s2);padding-right:var(--s2)}
  .x5f .compare-table .feat,.x5f .compare-table thead th:first-child{padding-left:var(--s4);padding-right:var(--s3)}
  .x5f .compare-table .feat{hyphens:auto}
  .x5f .tier-h--has-short .tier-h-full{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .x5f .tier-h--has-short .tier-h-short{display:inline}
  .x5f .cmp-legend{gap:var(--s2) var(--s5)}
}
.compare.compare--bg-dark{background:var(--c-neutral-300)}
.compare.compare--bg-white{background:var(--c-white)}
/* =================================================================
   CHANGELOG · Entwurf (Meeting 07.07.2026)
   Ergänzung zum Blog: Releases chronologisch, Monat/Version links,
   Änderungen rechts. Hintergrund bleibt Weiß (Dunkelblau-Regel).
   ================================================================= */
.cl5f .cl-section{padding-bottom:var(--s9)}.cl5f .cl-release{display:grid;grid-template-columns:260px 1fr;gap:var(--s7);padding:var(--s8) 0;border-top:1px solid var(--c-border-subtle)}.cl5f .cl-release:first-of-type{border-top:none;padding-top:var(--s4)}.cl5f .cl-aside{position:relative}.cl5f .cl-aside .inner{position:sticky;top:calc(76px + var(--s5))}.cl5f .cl-version{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--r-pill);
  background:var(--c-base);color:var(--c-white);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.02em;font-variant-numeric:tabular-nums}.cl5f .cl-date{display:block;margin-top:var(--s3);font-size:var(--fs-body-sm);color:var(--c-text-muted);font-weight:var(--fw-medium)}.cl5f .cl-body h2,.cl5f .cl-body .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;line-height:1.2;
  color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s3)}.cl5f .cl-body>p.lead{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55;max-width:60ch;margin-bottom:var(--s5)}.cl5f .cl-group{margin-top:var(--s5)}.cl5f .cl-group:first-of-type{margin-top:0}.cl5f .cl-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:0.03em;text-transform:uppercase;margin-bottom:var(--s3)}.cl5f .cl-badge--neu{background:var(--c-green-t2);color:#1f5b30}.cl5f .cl-badge--verbessert{background:rgba(67,45,244,0.10);color:var(--c-primary)}.cl5f .cl-badge--behoben{background:#fff3d6;color:#8a5d00}.cl5f .cl-list{list-style:none;display:grid;gap:var(--s3)}.cl5f .cl-list li{position:relative;padding-left:20px;font-size:var(--fs-body);line-height:1.55;color:var(--c-text)}.cl5f .cl-list li::before{content:"";position:absolute;left:0;top:0.62em;width:7px;height:7px;border-radius:50%;background:var(--c-primary)}.cl5f .cl-list li .muted{color:var(--c-text-muted)}.cl5f .cl-list li a{font-weight:var(--fw-semibold)}.cl5f .cl-media{margin-top:var(--s5);aspect-ratio:16/7;border-radius:var(--r-card);overflow:hidden;position:relative;
  background:linear-gradient(135deg,var(--c-neutral-200) 0%,var(--c-neutral-300) 100%);border:1px solid var(--c-border-subtle);
  display:flex;align-items:center;justify-content:center;color:var(--c-text-muted);font-size:var(--fs-caption)}
@media(max-width:860px){.cl5f .cl-release{grid-template-columns:1fr;gap:var(--s4);padding:var(--s7) 0}.cl5f .cl-aside .inner{position:static;display:flex;align-items:center;gap:var(--s4)}.cl5f .cl-date{margin-top:0}
}/* NEWSLETTER CTA */
.cl5f .news{padding:var(--s9) 0}.cl5f .news-inner{background:var(--c-bg-subtle);border-radius:var(--r-card-lg);padding:var(--s8);
  display:grid;grid-template-columns:1fr auto;gap:var(--s6);align-items:center}
@media(max-width:760px){.cl5f .news-inner{grid-template-columns:1fr;text-align:center}}.cl5f .news h2,.cl5f .news .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;color:var(--c-base);font-variation-settings:"opsz" 32}.cl5f .news p{margin-top:var(--s2);font-size:var(--fs-body);color:var(--c-text-muted);max-width:50ch}.cl5f .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body);letter-spacing:-0.01em;cursor:pointer;border:none;transition:all var(--dur) var(--ease);line-height:1;text-decoration:none;white-space:nowrap}.cl5f .btn--primary{background:var(--c-primary);color:var(--c-white)}.cl5f .btn--primary:hover{background:#3520d4}/* FOOTER */
.cl5f .footer{padding:var(--s9) 0 var(--s6);background:var(--c-white);border-top:1px solid var(--c-border-subtle);color:var(--c-text-muted)}.cl5f .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:var(--s7);padding-bottom:var(--s7);margin-bottom:0}.cl5f .footer-brand a{display:inline-block}.cl5f .footer-brand img{height:42px;width:auto}.cl5f .footer-brand p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.6;margin-top:var(--s4);max-width:32ch}.cl5f .footer-social{display:flex;gap:var(--s2);margin-top:var(--s5)}.cl5f .footer-social a{width:36px;height:36px;border-radius:50%;border:1px solid var(--c-border);display:grid;place-items:center;color:var(--c-text-muted);transition:all var(--dur) var(--ease)}.cl5f .footer-social a:hover{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}.cl5f .footer-social svg{width:17px;height:17px}.cl5f .footer-col h5,.cl5f .footer-col .as-h5{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s4)}.cl5f .footer-col a{display:block;font-size:var(--fs-body-sm);color:var(--c-text);padding:5px 0;transition:color var(--dur) var(--ease)}.cl5f .footer-col a:hover{color:var(--c-primary)}.cl5f .footer-seals{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);padding:var(--s6) 0;border-top:1px solid var(--c-border-subtle)}.cl5f .footer-seals .seals-label{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted)}.cl5f .f-seal{display:grid;place-items:center;height:58px;padding:8px 18px;background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-btn)}.cl5f .f-seal img{max-height:38px;width:auto;display:block}.cl5f .f-badge{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-caption);color:var(--c-text-muted)}.cl5f .f-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--c-green)}.cl5f .footer-seals .sp{margin-left:auto}.cl5f .footer-legal{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;padding-top:var(--s6);border-top:1px solid var(--c-border-subtle)}.cl5f .footer-legal .copy{font-size:var(--fs-caption);color:var(--c-text-muted)}.cl5f .footer-legal nav{display:flex;gap:var(--s5);flex-wrap:wrap}.cl5f .footer-legal nav a{font-size:var(--fs-caption);color:var(--c-text-muted);transition:color var(--dur) var(--ease)}.cl5f .footer-legal nav a:hover{color:var(--c-primary)}.cl5f :focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--r-sm)}
@media(prefers-reduced-motion:reduce){.cl5f *, .cl5f *::before, .cl5f *::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}.cl5f html{scroll-behavior:auto}.cl5f .post:hover, .cl5f .featured a.card:hover{transform:none}}
@media(max-width:768px){.cl5f .footer-top{grid-template-columns:1fr 1fr;gap:var(--s6)}.cl5f .news-inner{padding:var(--s6)}}
@media(max-width:480px){.cl5f .footer-top{grid-template-columns:1fr}.cl5f .footer-legal{flex-direction:column;align-items:flex-start;gap:var(--s3)}}.cl5f .trial-note{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted);line-height:1.5}.cl5f .cta .trial-note, .cl5f .cta-section .trial-note{color:rgba(255,255,255,0.85)}
/* Streunender style-Endtag entfernt (25.07) — verschluckte die Folgeregel */

/* =================================================================
   NEWSLETTER (nl5f) · Dunkelblau-Karte (erlaubte dunkle Fläche;
   volle dunkle Sektionen sind Regel-widrig) + helle Variante.
   ================================================================= */
.nl5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.nl5f-card{background:var(--c-base);color:var(--c-white);border-radius:var(--r-card-lg);
  padding:var(--s8);max-width:760px;margin:0 auto}
.nl5f-card h2,.nl5f-card .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:-0.022em;
  line-height:var(--lh-heading);color:var(--c-white);margin-bottom:var(--s3)}
.nl5f-intro{font-size:var(--fs-body-lg);color:rgba(255,255,255,0.85);line-height:1.5;margin-bottom:var(--s4)}
.nl5f-note{font-size:var(--fs-body-sm);color:rgba(255,255,255,0.78);line-height:1.55;margin-bottom:var(--s6)}
.nl5f-form{display:grid;gap:var(--s4)}
.nl5f-field label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  color:var(--c-white);margin-bottom:6px}
.nl5f-field input{width:100%;padding:12px 14px;border-radius:var(--r-btn);
  border:1.5px solid transparent;background:var(--c-white);color:var(--c-base);
  font-family:var(--font);font-size:var(--fs-body)}
.nl5f-field input:focus-visible{outline:3px solid var(--c-primary-t2);outline-offset:2px}
.nl5f-consent label{display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start;cursor:pointer}
.nl5f-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-primary)}
.nl5f-consent span{font-size:var(--fs-body-sm);color:rgba(255,255,255,0.85);line-height:1.5}
.nl5f-consent a{color:var(--c-white);text-decoration:underline;text-underline-offset:3px}
.nl5f-consent a:hover{color:var(--c-white)}
.nl5f-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;min-height:48px;border-radius:var(--r-pill);border:1.5px solid transparent;
  background:var(--c-white);color:var(--c-base);font-family:var(--font);font-size:16px;
  font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.nl5f-btn:hover{background:var(--c-neutral-300);color:var(--c-base)}
.nl5f-btn:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.nl5f-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.nl5f-warn{font-size:var(--fs-caption);color:#ffd7a1}
/* Helle Variante */
.nl5f--light .nl5f-card{background:var(--c-neutral-200);color:var(--c-base);
  border:1px solid var(--c-neutral-300)}
.nl5f--light .nl5f-card h2,.nl5f--light .nl5f-card .as-h2{color:var(--c-base)}
.nl5f--light .nl5f-intro{color:var(--c-text-muted)}
.nl5f--light .nl5f-note{color:var(--c-text-muted)}
.nl5f--light .nl5f-field label{color:var(--c-base)}
.nl5f--light .nl5f-field input{border-color:var(--c-border-field)}
.nl5f--light .nl5f-field input:focus-visible{outline-color:var(--c-primary)}
.nl5f--light .nl5f-consent span{color:var(--c-text-muted)}
.nl5f--light .nl5f-consent a{color:var(--c-base)}
.nl5f--light .nl5f-btn{background:var(--c-primary);color:var(--c-white)}
.nl5f--light .nl5f-btn:hover{background:#3520d4;color:var(--c-white)}
@media(max-width:640px){.nl5f-card{padding:var(--s6)}}

/* =================================================================
   KONTAKTFORMULAR (kt5f) · hell (Standard) / Dunkelblau-Karte
   ================================================================= */
.kt5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.kt5f-card{background:var(--c-neutral-200);border:1px solid var(--c-neutral-300);
  border-radius:var(--r-card-lg);padding:var(--s8);max-width:760px;margin:0 auto;color:var(--c-base)}
.kt5f-card h2,.kt5f-card .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:-0.022em;
  line-height:var(--lh-heading);margin-bottom:var(--s3)}
.kt5f-intro{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.5;margin-bottom:var(--s5)}
.kt5f-form{display:grid;gap:var(--s4)}
.kt5f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.kt5f-field label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);margin-bottom:6px}
.kt5f-field input,.kt5f-field textarea{width:100%;padding:12px 14px;border-radius:var(--r-btn);
  border:1.5px solid var(--c-border-field);background:var(--c-white);color:var(--c-base);
  font-family:var(--font);font-size:var(--fs-body);resize:vertical}
.kt5f-field input:focus-visible,.kt5f-field textarea:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.kt5f-consent label{display:grid;grid-template-columns:18px 1fr;gap:var(--s3);align-items:start;cursor:pointer}
.kt5f-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-primary)}
.kt5f-consent span{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5}
.kt5f-consent a{color:var(--c-base);text-decoration:underline;text-underline-offset:3px}
.kt5f-btn{justify-self:start;display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;min-height:48px;border-radius:var(--r-pill);border:1.5px solid transparent;
  background:var(--c-primary);color:var(--c-white);font-family:var(--font);font-size:16px;
  font-weight:var(--fw-semibold);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.kt5f-btn:hover{background:#3520d4;color:var(--c-white)}
.kt5f-btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.kt5f-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kt5f-msg{padding:12px 16px;border-radius:var(--r-btn);font-size:var(--fs-body-sm);margin-bottom:var(--s4)}
.kt5f-msg--ok{background:var(--c-green-t2);color:#1f5b30}
.kt5f-msg--err{background:#fde8ea;color:#8c1d2b}
/* Dunkle Variante */
.kt5f--dark .kt5f-card{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}
.kt5f--dark .kt5f-card h2,.kt5f--dark .kt5f-card .as-h2{color:var(--c-white)}
.kt5f--dark .kt5f-intro{color:rgba(255,255,255,0.85)}
.kt5f--dark .kt5f-field label{color:var(--c-white)}
.kt5f--dark .kt5f-field input,.kt5f--dark .kt5f-field textarea{border-color:transparent}
.kt5f--dark .kt5f-field input:focus-visible,.kt5f--dark .kt5f-field textarea:focus-visible{outline-color:var(--c-primary-t2)}
.kt5f--dark .kt5f-consent span{color:rgba(255,255,255,0.85)}
.kt5f--dark .kt5f-consent a{color:var(--c-white)}
.kt5f--dark .kt5f-btn{background:var(--c-white);color:var(--c-base)}
.kt5f--dark .kt5f-btn:hover{background:var(--c-neutral-300);color:var(--c-base)}
@media(max-width:640px){.kt5f-card{padding:var(--s6)}.kt5f-row{grid-template-columns:1fr}}


/* =================================================================
   BLOG-ÜBERSICHT (bl5f, gescoped) · aus 5f-blog-uebersicht-v2
   Filter als echte URLs (crawlbar), Mehr-laden progressiv erweitert.
   ================================================================= */
.bl5f .bh{padding:calc(76px + var(--s9)) 0 var(--s8);text-align:center;background:linear-gradient(180deg,var(--c-tint-1),transparent 75%)}
.bl5f .bh .ip-pill{display:inline-flex;align-items:center;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:.04em;text-transform:uppercase;color:var(--c-primary);background:var(--c-tint-2);border-radius:var(--r-pill);padding:6px 14px;margin-bottom:var(--s5)}
.bl5f .bh h1,.bl5f .bh .as-h1{font-size:var(--fs-h1-inner);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h1);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;max-width:18ch;margin:0 auto}
.bl5f .bh .sub{margin:var(--s5) auto 0;font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;max-width:52ch}
.bl5f .bh-sub{margin:var(--s7) auto 0;display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;max-width:520px}
.bl5f .bh-sub input{flex:1;min-width:240px;font-family:inherit;font-size:var(--fs-body);padding:14px 18px;border-radius:var(--r-btn);border:1.5px solid var(--c-neutral-400);background:var(--c-white);color:var(--c-base);min-height:48px;transition:border-color var(--dur) var(--ease)}
.bl5f .bh-sub input::placeholder{color:var(--c-text-muted)}
.bl5f .bh-sub input:hover{border-color:var(--c-text-muted)}
.bl5f .bh-sub button{appearance:none;border:none;background:var(--c-primary);color:var(--c-white);font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);padding:14px 26px;border-radius:var(--r-pill);min-height:48px;transition:background var(--dur) var(--ease)}
.bl5f .bh-sub button:hover{background:#3520d4}
.bl5f .bh-note{margin-top:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted)}
.bl5f .bh-note a{color:var(--c-text-muted);text-decoration:underline}
.bl5f .bh-note a:hover{color:var(--c-primary)}
.bl5f .btool{border-top:1px solid var(--c-border-subtle);border-bottom:1px solid var(--c-border-subtle);background:var(--c-white);position:sticky;top:76px;z-index:50}
.bl5f .btool .wrap{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);flex-wrap:wrap}
.bl5f .btool-pills{display:flex;gap:var(--s2);flex-wrap:wrap;margin-right:auto}
.bl5f .fpill.fpill{display:inline-flex;align-items:center;padding:8px 16px;min-height:36px;border-radius:var(--r-pill);border:1px solid var(--c-neutral-300);
  background:var(--c-white);color:var(--c-base);font-family:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);line-height:1.2;text-decoration:none;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.bl5f .fpill.fpill:hover{border-color:var(--c-primary);color:var(--c-primary)}
.bl5f .fpill.fpill.is-active,.bl5f .fpill.fpill[aria-pressed="true"]{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}
.bl5f .fpill:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.bl5f .bsearch{position:relative;flex:0 1 320px;min-width:200px}
.bl5f .bsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--c-text-muted);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.bl5f .bsearch.bsearch input{width:100%;margin:0;font-family:inherit;font-size:var(--fs-body-sm);line-height:1.2;padding:9px 38px 9px 40px;border-radius:var(--r-pill);border:1px solid var(--c-border-field);
  background:var(--c-white);color:var(--c-base);min-height:40px;box-shadow:none;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.bl5f .bsearch.bsearch input::placeholder{color:var(--c-text-muted)}
.bl5f .bsearch.bsearch input:hover{border-color:var(--c-base)}
.bl5f .bsearch.bsearch input:focus,.bl5f .bsearch.bsearch input:focus-visible{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(67,45,244,0.14)}
.bl5f .bsearch input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;margin-right:-24px;cursor:pointer;
  background:var(--c-text-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bl5f .bstatus{padding-top:var(--s6);font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.bl5f .bstatus:empty{display:none}
.bl5f .bstatus strong{color:var(--c-base);font-weight:var(--fw-semibold)}
.bl5f .bstatus a{margin-left:var(--s3);color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.bl5f .bstatus a:hover{color:var(--c-base)}
.bl5f .bfeat{padding:var(--s8) 0 0}
.bl5f .btool ~ .bfeat{padding-top:var(--s7)}
.bl5f .bfeat-card{display:grid;grid-template-columns:1.15fr 1fr;background:var(--c-bg-subtle);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);overflow:hidden;text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow .4s var(--ease)}
.bl5f .bfeat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.bl5f .bfeat-thumb{position:relative;min-height:320px;background:linear-gradient(150deg,var(--c-tint-2),var(--c-tint-1) 60%,var(--c-white))}
.bl5f .bfeat-thumb .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-primary);opacity:.85}
.bl5f .bfeat-thumb .glyph svg{width:72px;height:72px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bl5f .bfeat-thumb .cap{position:absolute;left:12px;bottom:12px;font-size:10px;color:var(--c-text-muted);background:var(--c-white);border:1px solid var(--c-border-subtle);padding:2px 8px;border-radius:var(--r-pill)}
.bl5f .bfeat-body{padding:var(--s7);display:flex;flex-direction:column;align-items:flex-start}
.bl5f .bcat{display:inline-flex;font-size:11px;font-weight:var(--fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--c-primary);background:var(--c-tint-2);border-radius:var(--r-pill);padding:4px 12px}
.bl5f .bfeat-body h2,.bl5f .bfeat-body .as-h2{margin-top:var(--s4);font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:-0.02em;line-height:1.15;color:var(--c-base);font-variation-settings:"opsz" 32}
.bl5f .bfeat-card:hover h2,.bl5f .bfeat-card:hover .as-h2{color:var(--c-primary)}
.bl5f .bfeat-body p{margin-top:var(--s4);color:var(--c-text-muted);line-height:1.55;font-size:var(--fs-body)}
.bl5f .bmeta{margin-top:auto;padding-top:var(--s5);display:flex;align-items:center;gap:var(--s3);font-size:var(--fs-caption);color:var(--c-text-muted)}
.bl5f .bmeta .dot{width:4px;height:4px;border-radius:50%;background:var(--c-neutral-400)}
@media(max-width:860px){
.bl5f .bfeat-card{grid-template-columns:1fr}
.bl5f .bfeat-thumb{min-height:220px}
}
.bl5f .bgrid-sec{padding:var(--s7) 0 var(--s8);transition:opacity var(--dur) var(--ease)}
.bl5f .bgrid-sec[aria-busy="true"]{opacity:.5}
.elementor-widget-5f-blog-grid.elementor-element .btool ~ .bgrid-sec{padding-top:var(--s7)}
.elementor-widget-5f-blog-grid.elementor-element .bstatus:not(:empty) ~ .bgrid-sec{padding-top:var(--s5)}
.bl5f .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
@media(max-width:960px){
.bl5f .bgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
.bl5f .bgrid{grid-template-columns:1fr}
}
.bl5f .bcard{display:flex;flex-direction:column;background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);overflow:hidden;text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow .4s var(--ease)}
.bl5f .bcard:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.bl5f .bcard.hidden-by-filter, .bl5f .bcard.hidden-by-more{display:none}
.bl5f .bthumb{aspect-ratio:16/9;position:relative;background:linear-gradient(150deg,var(--c-tint-2),var(--c-tint-1) 60%,var(--c-white));border-bottom:1px solid var(--c-border-subtle)}
.bl5f .bthumb .glyph{position:absolute;inset:0;display:grid;place-items:center;color:var(--c-primary);opacity:.85}
.bl5f .bthumb .glyph svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl5f .bcard-body{padding:var(--s5);display:flex;flex-direction:column;flex:1;align-items:flex-start;gap:var(--s3)}
.bl5f .bcard-body h3,.bl5f .bcard-body .as-h3{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:-0.01em;line-height:1.3;color:var(--c-base)}
.bl5f .bcard:hover h3,.bl5f .bcard:hover .as-h3{color:var(--c-primary)}
.bl5f .bcard-body time{margin-top:auto;padding-top:var(--s2);font-size:var(--fs-caption);color:var(--c-text-muted)}
.bl5f .bempty{display:none;border:1px dashed var(--c-neutral-400);border-radius:var(--r-card-lg);padding:var(--s7);text-align:center;color:var(--c-text-muted)}
.bl5f .bempty.show{display:block}
.bl5f .bempty strong{color:var(--c-base);font-weight:var(--fw-semibold)}
.bl5f .bmore{display:flex;justify-content:center;padding-top:var(--s7)}
.bl5f .bmore button{appearance:none;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--c-base);background:transparent;border:1.5px solid var(--c-base);border-radius:var(--r-pill);padding:14px 32px;min-height:48px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.bl5f .bmore button:hover{background:var(--c-base);color:var(--c-white)}
.bl5f .bmore button[hidden]{display:none}
.bl5f .bmore a.bmore-btn{display:inline-flex;align-items:center;justify-content:center;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);
  color:var(--c-base);background:transparent;border:1.5px solid var(--c-base);border-radius:var(--r-pill);padding:14px 32px;min-height:48px;text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.bl5f .bmore a.bmore-btn:hover{background:var(--c-base);color:var(--c-white)}
.bl5f .bmore a.bmore-btn[aria-busy="true"]{opacity:.6;pointer-events:none}
/* Inner Hero · zentrierte Variante (Blog-Hero) */
.hero-inner--center{text-align:center}
.hero-inner--center>div{margin-left:auto;margin-right:auto}
.hero-inner--center h1,.hero-inner--center h2,.hero-inner--center .as-h1,.hero-inner--center .as-h2{margin-left:auto;margin-right:auto}
.hero-inner--center p{margin-left:auto;margin-right:auto}
.hero-inner--center .actions{justify-content:center}
.hero-inner--center .pill-wrap{display:flex;justify-content:center}

/* Newsletter-Zeile (nlz5f) · zentriert unter Hero; Checkbox volle Breite */
.nlz5f{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5) var(--s7);text-align:center}
.nlz5f .bh-sub{margin-left:auto;margin-right:auto}
.nlz5f-consent{display:flex;gap:var(--s3);align-items:start;justify-content:center;
  width:100%;margin-top:var(--s3);cursor:pointer;font-size:var(--fs-body-sm);
  color:var(--c-text-muted);text-align:left;max-width:480px;margin-left:auto;margin-right:auto}
.nlz5f-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-primary);flex-shrink:0}
.nlz5f-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.nlz5f .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* =================================================================
   SICHERHEIT-REDESIGN · Komponenten (07/2026)
   Fakten-Leiste · Standards-Wand · Punktraster-Trenner ·
   Partner-Karten · Zugriff & Kontrolle
   Alle Flächen hell (Kundenentscheidung). Keine Eyebrow-Nummern.
   ================================================================= */

/* ── Fakten-Leiste ── */
.fact-ribbon{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin:0;padding:var(--s4) 0 0;border-top:1px solid var(--c-border-subtle);max-width:820px}
.fact-ribbon.no-line{border-top:none;padding-top:0}
.fact-ribbon li{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium-2);color:var(--c-text-muted);white-space:nowrap}
.fact-ribbon li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-primary);flex-shrink:0}

/* ── Standards-Wand (hell) ── */
.wall{position:relative;overflow:hidden;background:var(--c-neutral-200);color:var(--c-base);
  border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);padding:var(--s8)}
.wall-head{position:relative;z-index:1;max-width:52ch;margin-bottom:var(--s7)}
.wall-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s3)}
.wall-head h2,.wall-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base);text-wrap:balance}
.wall-grid{position:relative;z-index:1;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);margin:0;padding:0}
.wall-grid li{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);min-height:118px}
.wall-grid strong{display:flex;align-items:center;gap:10px;
  font-family:var(--font);font-feature-settings:"tnum","cv01","cv02","cv03","cv04";font-size:15px;
  font-weight:600;letter-spacing:0.01em;color:var(--c-base)}
.wall-grid strong::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-primary);flex-shrink:0}
.wall-grid span{font-size:var(--fs-caption);line-height:1.5;color:var(--c-text-muted)}
.wall-grid .lead-stamp{grid-column:span 2;border-color:var(--c-neutral-400)}
.wall-grid .lead-stamp strong{font-size:20px}
.wall-grid .lead-stamp span{font-size:var(--fs-body-sm);max-width:56ch}
@media(max-width:960px){.wall-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.wall{padding:var(--s6)}.wall-grid{grid-template-columns:1fr}
  .wall-grid .lead-stamp{grid-column:auto}}

/* ── Punktraster-Trenner (Konzept 3 · Roter Faden) ── */
.pr-divider{height:72px}
.pr-divider canvas{width:100%;height:100%;display:block}
@media(prefers-reduced-motion:reduce){.pr-divider{display:none}}

/* ── Partner-Karten (Erweiterung .icard) ── */
.infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media(max-width:860px){.infra-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
.icard{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  padding:var(--s7);display:flex;flex-direction:column;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.icard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s3)}
/* Guard-Fund 28.07: .kicker war unstylter Wrapper um .kpill. */
.pk5f .kicker{display:block;margin-bottom:var(--s3)}
.kpill{display:inline-flex;align-items:center;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.05em;text-transform:uppercase;color:var(--c-primary);
  background:rgba(67,45,244,0.07);border-radius:var(--radius-pill);padding:5px 12px;
  white-space:normal;text-align:left}
/* Logo-Slot: Originalfarben, nie umfärben. Ohne Bild = ehrlicher Platzhalter. */
.plogo{display:grid;place-items:center;width:128px;height:44px;flex-shrink:0;
  border:1px dashed var(--c-neutral-400);border-radius:var(--radius-sm);
  font-size:var(--fs-micro);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-neutral-400)}
.plogo.has-logo{border:none}
.plogo img{max-height:32px;max-width:112px;width:auto;display:block}
.icard h3,.icard .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;
  font-variation-settings:"opsz" 32;line-height:1.15;color:var(--c-base)}
.icard .lead{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55;margin-top:var(--s3);
  padding-bottom:var(--s5);border-bottom:1px solid var(--c-border-subtle)}
.icard ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:var(--s5) 0 var(--s6);padding:0}
.icard li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);color:var(--c-base);line-height:1.45}
.icard li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-primary);flex-shrink:0;margin-top:6px}
.icard .ilink{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  color:var(--c-primary);margin-top:auto}
.icard .ilink:hover{color:var(--c-primary-hover)}
.icard .ilink svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.icard:hover .ilink svg{transform:translateX(3px)}
@media(max-width:480px){.icard{padding:var(--s5)}}
/* Kategorie-Filter (Pill-Stil der Mediathek) */
.pfilter{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin:0 0 var(--s6)}
.pfilter--start{justify-content:flex-start}
.pfilter-pill.pfilter-pill,.pfilter-pill.pfilter-pill:hover,.pfilter-pill.pfilter-pill:focus,.pfilter-pill.pfilter-pill:active{
  padding:8px 16px;min-height:36px;border-radius:var(--r-pill,999px);border:1px solid var(--c-neutral-300);
  background:var(--c-white);color:var(--c-base);font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);
  line-height:1.2;cursor:pointer;box-shadow:none;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.pfilter-pill.pfilter-pill:hover{border-color:var(--c-primary);color:var(--c-primary)}
.pfilter-pill.pfilter-pill[aria-pressed="true"]{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}
.pfilter-pill:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.icard[hidden]{display:none}

/* ── Zugriff & Kontrolle (Produktbeweis) ── */
.proof-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:var(--s8);align-items:center}
.proof-points{list-style:none;margin:var(--s5) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.proof-points li{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-body);
  color:var(--c-text-muted);line-height:1.6;max-width:52ch}
.proof-points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-primary);
  flex-shrink:0;margin-top:8px}
.ui-card{margin:0;background:var(--c-white);border:1px solid var(--c-border-subtle);
  border-radius:var(--r-card);box-shadow:var(--sh-2);overflow:hidden}
.ui-card--img img{display:block;width:100%;height:auto}
.ui-bar{display:flex;align-items:center;gap:6px;padding:12px var(--s5);
  border-bottom:1px solid var(--c-border-subtle);background:var(--c-neutral-200)}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:var(--c-neutral-400)}
.ui-bar span{margin-left:var(--s3);font-family:var(--font);font-feature-settings:"tnum";font-weight:var(--fw-medium-2);
  font-size:var(--fs-micro);letter-spacing:0.02em;color:var(--c-text-muted)}
.ui-row{display:flex;align-items:center;gap:var(--s3);padding:14px var(--s5);
  border-bottom:1px solid var(--c-border-subtle)}
.ui-av{width:28px;height:28px;border-radius:50%;background:var(--c-neutral-300);flex-shrink:0}
.ui-name{height:10px;border-radius:5px;background:var(--c-neutral-300)}
.ui-chip{margin-left:auto;font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--c-neutral-400);color:var(--c-text-muted)}
.ui-chip+.ui-chip{margin-left:0}
.ui-chip.on{background:var(--c-tint-1);border-color:transparent;color:var(--c-primary)}
.ui-chip.green{background:var(--c-green-t2);border-color:transparent;color:#1f5b30}
.ui-foot{padding:11px var(--s5);font-family:var(--font);font-feature-settings:"tnum";font-weight:var(--fw-medium-2);
  font-size:var(--fs-micro);color:var(--c-text-muted);background:var(--c-neutral-200)}
@media(max-width:860px){.proof-grid{grid-template-columns:1fr;gap:var(--s6)}}


/* ── Sektionskopf (Redesign, von Widgets genutzt) ── */
.section-head .eyebrow,.nsplit-head .eyebrow,.wall-head .eyebrow{display:inline-block;
  font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s3)}
.section-head h2,.section-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base)}

/* ── Nummerierte Schritte (Verschlüsselungs-Layout) ── */
/* minmax(0,…): lange Wörter im Titel (z. B. „Dokumentensynchronisierung")
   dürfen die Spalte nicht verbreitern — alle Schritte-Blöcke gleich breit. */
.nsplit{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:var(--s8);align-items:start}
.nsplit-head{position:sticky;top:calc(76px + var(--s6));min-width:0}
.nsplit-head h2,.nsplit-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base);
  hyphens:auto;overflow-wrap:break-word}
.nsplit-head p{margin-top:var(--s3);color:var(--c-text-muted);font-size:var(--fs-body-lg);line-height:1.6}
.nsplit-head .nsplit-note{margin-top:var(--s5);font-size:var(--fs-body-sm);line-height:1.5}
.nsplit-head .nsplit-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.nsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Zähler einstellig (1, 2, 3): schmalere Spalte, sonst klafft eine Lücke. */
.nstep{display:grid;grid-template-columns:56px 1fr;gap:var(--s5);align-items:start;
  padding:var(--s6) 0;border-top:1px solid var(--c-border-subtle)}
.nstep:last-child{border-bottom:1px solid var(--c-border-subtle)}
.nstep .num{font-size:clamp(40px,4vw,56px);font-weight:var(--fw-light);letter-spacing:-0.02em;
  line-height:1;color:var(--c-primary);font-variation-settings:"opsz" 32;font-feature-settings:"tnum"}
.nstep h4,.nstep .as-h4{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.015em;
  color:var(--c-base);margin-bottom:var(--s2);font-variation-settings:"opsz" 32}
.nstep p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:52ch}
.nstep code{font-family:var(--font);font-weight:var(--fw-medium-2);font-feature-settings:"tnum";
  font-size:13px;background:var(--c-neutral-200);border:1px solid var(--c-border-subtle);
  border-radius:5px;padding:1px 6px;color:var(--c-base)}
@media(max-width:860px){.nsplit{grid-template-columns:1fr;gap:var(--s6)}
  .nsplit-head{position:static}
  .nstep{grid-template-columns:44px 1fr;gap:var(--s4)}}

/* ── FAQ zweispaltig (Seitenspalte + Unterlagen-Karte) ── */
.faq--side .faq-layout{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--s8);align-items:start}
.faq--side .faq-side{position:sticky;top:calc(76px + var(--s6));display:grid;gap:var(--s4)} /* 25.07: mehrere Kontakt-Karten */
.faq--side .faq-header{text-align:left;margin-bottom:var(--s5)}
.docs-card{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);padding:var(--s5);
  background:var(--c-neutral-200);max-width:380px}
.docs-card .lbl{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.05em;
  text-transform:uppercase;color:var(--c-text-muted);margin-bottom:var(--s2)}
.docs-card p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;margin:0 0 var(--s4)}
.docs-card a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);color:var(--c-primary)}
.docs-card a svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.docs-card a:hover svg{transform:translateX(3px)}
@media(max-width:860px){.faq--side .faq-layout{grid-template-columns:1fr;gap:var(--s6)}
  .faq--side .faq-side{position:static}}

/* ── CTA: Kontakt-Adressen (schlichte Zeilen, keine Pills) ── */
.cta5f-mails{display:flex;justify-content:center;gap:var(--s2) var(--s6);flex-wrap:wrap;margin-top:var(--s6)}
.cta5f-mails a{display:inline-flex;align-items:baseline;gap:10px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-medium-2);color:var(--c-white);text-decoration:none;
  max-width:100%;flex-wrap:wrap;overflow-wrap:anywhere}
.cta5f-mails a:hover{text-decoration:underline;text-underline-offset:3px;color:var(--c-white)}
.cta5f-mails span{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.05em;text-transform:uppercase;color:rgba(255,255,255,0.7)}


/* =================================================================
   LIZENZMODELL · Komponenten (07/2026) — 1:1 aus 5f-lizenzmodell-2
   Lizenz-Hero · Lizenz-Karten · Lizenz-Matrix · CTA-Trust
   ================================================================= */

/* ── Lizenz-Hero (zentriert, kurz) ── */
.lzhero{padding:var(--s8) 0 var(--s5);text-align:center}
.lzhero .eyebrow{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--hero-gap-eyebrow)}
.lzhero h1,.lzhero .as-h1{font-size:var(--fs-h2);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h2);
  line-height:var(--lh-heading);color:var(--c-base);font-variation-settings:"opsz" 32;max-width:20ch;margin:0 auto}
.lzhero .subline{margin-top:var(--hero-gap-lead);font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;max-width:50ch;margin-left:auto;margin-right:auto}
.lzhero .free-note,.hero5f .hero5f-free{margin-top:var(--hero-gap-lead);vertical-align:top;font-size:var(--fs-body);color:var(--c-base);font-weight:var(--fw-medium);display:inline-flex;align-items:center;gap:10px}
.lzhero .free-note .check,.hero5f-free .check{width:22px;height:22px;border-radius:50%;background:var(--c-green);display:grid;place-items:center;flex-shrink:0}
.lzhero .free-note .check svg,.hero5f-free .check svg{width:13px;height:13px;stroke:var(--c-white)}

/* ── Lizenz-Karten ── */
/* 31.07: Sektionsabstand aus der Referenz (5f-lizenzmodell-2). */
.summary{padding:var(--s5) 0 var(--s9)}
.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);align-items:stretch}
@media(max-width:980px){/* 31.07: Sektionsabstand aus der Referenz (5f-lizenzmodell-2). */
.summary{padding:var(--s5) 0 var(--s9)}
.summary-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.scard{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  padding:var(--s7);display:flex;flex-direction:column;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.scard:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.scard.featured{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}
.scard.featured:hover{box-shadow:0 12px 40px rgba(67,45,244,0.28);transform:translateY(-3px)}
.scard .badge{display:inline-flex;align-self:flex-start;align-items:center;padding:5px 14px;border-radius:var(--r-pill);
  font-size:var(--fs-micro);font-weight:var(--fw-semibold);letter-spacing:0.04em;text-transform:uppercase;
  background:rgba(67,45,244,0.08);color:var(--c-primary);margin-bottom:var(--s4);min-height:24px}
.scard.featured .badge{background:rgba(255,255,255,0.18);color:var(--c-white)}
.scard .badge.ghost{visibility:hidden}
.scard .name{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:1.1;font-variation-settings:"opsz" 32}
.scard .price{font-size:var(--fs-body-lg);font-weight:var(--fw-medium);color:var(--c-text-muted);margin-top:var(--s5)}
.scard.featured .price{color:var(--c-white);opacity:0.85}
.scard .who{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5;margin-top:var(--s3)}
.scard.featured .who{color:var(--c-white);opacity:0.9}
.scard .points{list-style:none;display:flex;flex-direction:column;gap:12px;margin:var(--s5) 0 var(--s6);
  padding:var(--s5) 0 0;border-top:1px solid var(--c-border-subtle)}
.scard.featured .points{border-color:rgba(255,255,255,0.22)}
.scard .points li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);color:var(--c-base);line-height:1.45}
.scard .points li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-primary);flex-shrink:0;margin-top:6px}
.scard.featured .points li{color:var(--c-white)}
.scard.featured .points li::before{background:var(--c-white)}
.scard .scta{display:inline-flex;align-items:center;justify-content:center;align-self:center;min-height:48px;
  padding:14px 28px;border-radius:var(--r-pill);font-weight:var(--fw-semibold);font-size:var(--fs-body);
  background:var(--c-primary);color:var(--c-white);transition:background var(--dur) var(--ease);margin-top:auto}
.scard .scta:hover{background:var(--c-primary-hover,#3520d4);color:var(--c-white)}
.scard.featured .scta{background:var(--c-white);color:var(--c-base)}
.scard.featured .scta:hover{background:var(--c-base);color:var(--c-white)}
.scard .detail-link{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--c-base);
  margin:calc(var(--s4) - var(--s6)) 0 var(--s6) 17px}
.scard .detail-link:hover{color:var(--c-primary)}
.scard.featured .detail-link{color:var(--c-white)}
.scard.featured .detail-link:hover{color:rgba(255,255,255,0.8)}
.scard .detail-link svg{width:12px;height:12px}
/* Lizenz-Karten: Preiszeile, Umschalter, Fußzeile */
.scard .lzk-period[hidden]{display:none}
.scard .lzk-price{display:flex;align-items:flex-end;gap:12px;margin-top:var(--s5)}
.scard .lzk-amount{font-size:clamp(40px,4vw,52px);font-weight:var(--fw-medium-2);letter-spacing:-0.03em;line-height:1;
  color:var(--c-base);font-variant-numeric:tabular-nums;white-space:nowrap;font-variation-settings:"opsz" 32}
.scard .lzk-unit{font-size:var(--fs-caption);line-height:1.3;color:var(--c-text-muted);max-width:16ch;padding-bottom:4px}
.scard .lzk-base{margin:var(--s2) 0 0;min-height:2.9em;font-size:var(--fs-body-sm);line-height:1.45;color:var(--c-text-muted)}
.scard .lzk-base strong{font-weight:var(--fw-semibold);color:var(--c-base);font-variant-numeric:tabular-nums}
.scard .lzk-base.ghost{visibility:hidden}
.scard.featured .lzk-amount{color:var(--c-white)}
.scard.featured .lzk-unit,
.scard.featured .lzk-base{color:rgba(255,255,255,0.85)}
.scard.featured .lzk-base strong{color:var(--c-white)}
.lzk-navy .scard.featured{background:var(--c-base);border-color:var(--c-base)}
.lzk-navy .scard.featured:hover{box-shadow:var(--sh-3)}
.lzk-navy .scard.featured .badge{background:rgba(255,255,255,0.14)}
.lzk-navy .scard.featured .scta:hover{background:var(--c-neutral-300);color:var(--c-base)}
.lzk-switch{display:flex;justify-content:center}
.lzk-switch + .summary-grid{margin-top:var(--s6)}
.lzk-switch-track{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--c-neutral-300)}
.lzk-switch .lzk-opt.lzk-opt{appearance:none;margin:0;border:0;border-radius:var(--r-pill);background:transparent;
  color:var(--c-text-muted);font:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);line-height:1.2;
  min-height:40px;padding:8px 22px;cursor:pointer;box-shadow:none;text-transform:none;letter-spacing:normal;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lzk-switch .lzk-opt.lzk-opt:hover,
.lzk-switch .lzk-opt.lzk-opt:focus{background:rgba(255,255,255,0.6);color:var(--c-base)}
.lzk-switch .lzk-opt.lzk-opt[aria-pressed="true"]{background:var(--c-white);color:var(--c-base);box-shadow:var(--sh-1)}
.lzk-switch .lzk-opt.lzk-opt:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.lzk-net{margin:0 0 var(--s6);text-align:center;font-size:var(--fs-body-sm);line-height:1.45;color:var(--c-text-muted)}
.lzk-switch + .lzk-net{margin-top:var(--s3)}
.lzk-foot{max-width:72ch;margin:var(--s4) auto 0;text-align:center;font-size:var(--fs-caption);line-height:1.5;color:var(--c-text-muted)}
.summary-grid + .lzk-foot{margin-top:var(--s7)}
@media(max-width:980px){.scard .lzk-base{min-height:0}.scard .lzk-base.ghost{display:none}}
@media(prefers-reduced-motion:reduce){.lzk-switch .lzk-opt.lzk-opt{transition:none}}

/* ── Lizenz-Matrix ── */
.detail-anchor{scroll-margin-top:96px}
/* 30.07: Titel der Lizenz-Matrix mit wählbarer Ebene — eigene Klasse,
   entkoppelt von der doppelt definierten .section-head-h2-Altlast.
   KEIN Sektionshintergrund: das Grau der Live-Seite kam vom falschen
   Widget (5f-lizenz-vergleich / .compare, Extras-Seite). */
.detail-anchor .lzm-title{font-weight:var(--fw-medium-2);line-height:var(--lh-heading);
  color:var(--c-base);font-variation-settings:"opsz" 32;margin-bottom:var(--s3)}
h2.lzm-title,.as-h2.lzm-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
h3.lzm-title,.as-h3.lzm-title{font-size:var(--fs-h3);letter-spacing:var(--ls-h3)}
h4.lzm-title,.as-h4.lzm-title{font-size:var(--fs-h4);letter-spacing:var(--ls-h3)}
/* ── Matrix-Guard (31.07): neutralisiert Umgebungs-CSS. Auf der
   Live-Seite malte globales table/td/th-Styling (Kit oder Fremd-Plugin)
   Spaltenrahmen und Zebra in die Lizenz-Matrix — Muster wie beim
   Button-Kit-Guard: gedoppelte Klasse schlägt generische Selektoren,
   danach setzen unsere spezifischen Regeln das gewollte Design. ── */
.matrix.matrix{border:0;background:transparent;border-collapse:collapse;border-spacing:0}
.matrix.matrix thead th,.matrix.matrix tbody td,.matrix.matrix tbody th{border:0;background:transparent;box-shadow:none}
/* I03 (Theme 1.10.47): Leistung th scope=row, Gruppe th scope=rowgroup, ein tbody je Gruppe */
.matrix.matrix tbody th{font-weight:inherit;text-align:start}
.matrix.matrix tbody+tbody{border:0}
.matrix.matrix tbody tr{border:0;background:transparent}
.matrix.matrix tbody tr:nth-child(odd)>td,
.matrix.matrix tbody tr:nth-child(even)>td,
.matrix.matrix tbody tr:nth-child(odd)>th,
.matrix.matrix tbody tr:nth-child(even)>th{background:transparent}
/* Design-Werte auf Guard-Spezifität wiederherstellen (der Reset oben
   würde sonst auch unsere eigenen Zeilentrenner mitnehmen): */
.matrix.matrix .feat-row td,
.matrix.matrix .feat-row th,
.matrix.matrix .group-row th{border-bottom:1px solid var(--c-border-subtle)}
/* Guard-Erweiterung 31.07 (Screenshot-Befund): Umgebungs-Zebra malte
   auf td:first-child weiter (Selektor-Muster "tr:nth-child(odd)
   td:first-child" schlägt den einfachen td-Reset), und die Kopf-Spans
   (Name/Preis) fielen auf inline zurück → "Test Kostenlos · 14 Tage"
   in einer Zeile. Beides auf Guard-Spezifität festgenagelt. */
.matrix.matrix tbody tr:nth-child(odd)>td:first-child,
.matrix.matrix tbody tr:nth-child(even)>td:first-child,
.matrix.matrix tbody tr:hover>td:first-child,
.matrix.matrix tbody tr:hover>th{background:transparent}
.matrix.matrix thead .tier-name,
.matrix.matrix thead .tier-price{display:block}
.matrix.matrix thead .tier-badge{display:inline-block}
/* Sauberkeit: letzte Zeile ohne Trenner (die Wrap-Karte hat bereits
   ihren eigenen Rahmen — Doppellinie am Fuß vermeiden). */
.matrix.matrix tbody:last-of-type tr:last-child>td,
.matrix.matrix tbody:last-of-type tr:last-child>th{border-bottom:0}
/* Erste Gruppen-Zeile direkt nach dem Kopf: reduzierter Abstand
   (s6 ist für Gruppen MITTEN in der Tabelle dimensioniert). */
.matrix.matrix tbody:first-of-type tr.group-row:first-child>th{padding-top:var(--s4)}
.matrix-wrap{position:relative;background:var(--c-white);border:1px solid var(--c-border-subtle);
  border-radius:var(--r-card-lg);padding:var(--s7) var(--s7) var(--s6);box-shadow:var(--sh-1)}
.matrix{width:100%;border-collapse:collapse;table-layout:fixed;position:relative;z-index:1}
.matrix col.col-feat{width:34%}
.matrix col.col-tier{width:22%}
/* 16px oben: das "Besonders beliebt"-Badge saß bündig auf der
   Band-Oberkante (0px Luft) — Atemraum im 4er-Raster. */
.matrix thead th{vertical-align:bottom;text-align:left;padding:16px var(--s5) var(--s5)}
.matrix thead .tier-name{display:block;font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;color:var(--c-base);font-variation-settings:"opsz" 32;line-height:1.1}
.matrix thead .tier-price{display:block;font-size:var(--fs-body-sm);color:var(--c-text-muted);margin-top:4px;font-weight:var(--fw-regular-2)}
.matrix thead .tier-badge{display:inline-block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:0.04em;text-transform:uppercase;color:var(--c-primary);background:rgba(67,45,244,0.08);padding:3px 10px;border-radius:var(--r-pill);margin-bottom:var(--s3)}
.matrix thead .tier-cta{margin-top:var(--s4);display:inline-flex;align-items:center;justify-content:center;
  padding:9px 18px;border-radius:var(--r-pill);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  background:transparent;border:1.5px solid var(--c-border);color:var(--c-base);transition:all var(--dur) var(--ease)}
.matrix thead .tier-cta:hover{border-color:var(--c-primary);color:var(--c-primary)}
.matrix thead .tier-head.featured .tier-cta{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-white)}
.matrix thead .tier-head.featured .tier-cta:hover{background:var(--c-primary-hover,#3520d4)}
/* 31.07 (2. Runde, Screenshot-Befund): der 0.12-Violett-Rahmen des
   Bands las sich als Spalten-Linie durch die ganze Tabelle — genau
   der Fehler, den der Guard töten soll. Band = nur weiche Fläche,
   keine Kontur. */
.matrix-band{position:absolute;top:var(--s7);bottom:var(--s6);background:rgba(67,45,244,0.04);
  border-radius:var(--r-card);z-index:0;pointer-events:none;border:0}
.matrix .group-row th{padding:var(--s7) var(--s5) var(--s3);border-bottom:1px solid var(--c-border-subtle)}
.matrix .group-row .group-name{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-base)}
/* 31.07 (3. Runde, UI/UX): Custom-Werte klebten 4px neben der Band-
   Kante (16px Zellen-Padding − 12px Band-Überhang). Neu: Padding-x
   auf s5 (24) + Band-Überhang auf 8 (JS) → 16px Luft außen, 32px
   innen, symmetrisch. Vertikal auf 16px → ~53px-Zeilen, ruhigeres
   Scannen. */
.matrix .feat-row td,.matrix .feat-row th{padding:16px var(--s5);border-bottom:1px solid var(--c-border-subtle);font-size:var(--fs-body-sm);vertical-align:middle}
.matrix .feat-row:hover td{background:rgba(28,36,51,0.015)}
.matrix .feat-row .feat-name{color:var(--c-base);line-height:1.4}
.matrix .feat-row .cell{text-align:left;color:var(--c-text-muted)}
.cell .dot-inc{width:8px;height:8px;border-radius:50%;background:var(--c-primary);display:inline-block;vertical-align:middle}
.cell .dash{display:inline-block;width:12px;height:1.5px;background:var(--c-neutral-400);border-radius:2px;vertical-align:middle}
.cell .val{color:var(--c-base);font-weight:var(--fw-medium)}
.cell .note{color:var(--c-text-muted);font-size:var(--fs-caption)}
@media(max-width:860px){
  .matrix-wrap{padding:var(--s5) var(--s4)}
  .matrix col{width:auto!important}
  .matrix,.matrix thead,.matrix tbody,.matrix th,.matrix td,.matrix tr{display:block}
  .matrix thead{position:sticky;top:76px;background:var(--c-white);z-index:2;
    display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2);padding:var(--s3) 0;border-bottom:1px solid var(--c-border)}
  .matrix thead th:first-child{display:none}
  .matrix thead th{padding:0}
  .matrix thead .tier-name{font-size:var(--fs-body-lg)}
  .matrix thead .tier-price,.matrix thead .tier-badge,.matrix thead .tier-cta{display:none}
  .matrix-band{display:none}
  .matrix .group-row th{padding:var(--s5) 0 var(--s2)}
  .matrix .feat-row td,.matrix .feat-row th{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--s3) 0;border-bottom:1px solid var(--c-border-subtle)}
  .matrix .feat-row .feat-name{font-weight:var(--fw-medium);margin-bottom:4px}
  .matrix .feat-row .cell{display:grid;grid-template-columns:90px 1fr;gap:var(--s3);align-items:center}
  .matrix .feat-row .cell::before{content:attr(data-tier);font-size:var(--fs-caption);color:var(--c-text-muted);text-transform:uppercase;letter-spacing:0.04em}
}

/* ── CTA: Trust-Punkte (mit · getrennt) ── */
.cta5f-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) 0;
  font-size:var(--fs-micro);color:var(--c-white);margin-top:var(--s6);padding:0}
.cta5f-trust li{display:inline-flex;align-items:center}
.cta5f-trust li+li::before{content:"·";margin:0 var(--s3)}


/* =================================================================
   USE-CASE-MEDIATHEK · Widget-Styles (07/2026)
   Suche · Ergebniskopf · Karten mit Themen-Icon.
   Alle Flächen hell, Neonblau bleibt dem CTA vorbehalten.
   ================================================================= */
/* Global (Fix 25.07): mehrere Widgets (Mediathek, Blog-Grid,
   Lizenz-Matrix, Newsletter) rendern sr-only-Labels — die Utility war
   aber nur unter .nlz5f gescopt, daher stand „Use Cases durchsuchen"
   sichtbar über dem Suchfeld. WCAG-Standard-Clip-Muster, unscoped. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ── Hero: kompakt, zentriert (1:1 aus 5f-use-cases_1.html, ohne
   uc-meta-Trust-Zeile — gestrichen 25.07) ── */
.uc-hero{padding:var(--s8) 0 var(--s7);text-align:center}
.uc-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--r-pill);
  margin-bottom:var(--hero-gap-pill);vertical-align:top;
  background:rgba(67,45,244,0.08);color:var(--c-primary);
  font-size:13px;font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase}
.uc-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-primary)}
.uc-hero h1,.uc-hero .as-h1{margin:0 auto;font-size:var(--fs-h2);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h2);line-height:var(--lh-heading);color:var(--c-base);
  font-variation-settings:"opsz" 32;max-width:16ch;text-wrap:balance}
.uc-hero .lead{margin:var(--hero-gap-lead) auto 0;font-size:var(--fs-lead);color:var(--c-text-muted);
  line-height:1.45;max-width:58ch;text-wrap:pretty}

/* ── Suchleiste: weiß, ohne Trennlinien (Entscheidung 25.07:
   alles weiß, keine Divider) ── */
.uc-fbar{position:relative}
.uc-fbar>.wrap{background:var(--c-white);   /* bewusst NICHT sticky: zwei Pillenreihen
     würden geklebt 211 px Viewport fressen — bei 10 Karten ist Hochscrollen zumutbar */
  max-width:none;padding-left:0;padding-right:0}
.fbar-inner{max-width:1200px;margin:0 auto;padding:var(--s5);
  display:flex;align-items:center;justify-content:center}

.fbar-search{position:relative;width:100%;max-width:420px}
.fbar-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--c-text-muted);pointer-events:none}
.fbar-search input{width:100%;padding:11px 14px 11px 40px;border-radius:var(--r-pill);
  border:1px solid var(--c-border-field);background:var(--c-white);color:var(--c-base);
  font-family:var(--font);font-size:var(--fs-body-sm);line-height:1.2}
.fbar-search input::placeholder{color:var(--c-text-muted)}
.fbar-search input:focus{outline:none;border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(67,45,244,0.14)}

/* ── Ergebnisbereich ── */
/* Weiß statt Grau-Band (Entscheidung 25.07) */
.uc-list{padding:var(--s7) 0 var(--s9);background:var(--c-white)}
.list-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding-bottom:var(--s4);margin-bottom:var(--s5)}  /* Divider entfernt (25.07) */
.list-head h2,.list-head .as-h2{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;
  color:var(--c-base);font-variation-settings:"opsz" 32}
.list-count{font-size:var(--fs-body-sm);color:var(--c-text-muted);font-feature-settings:"tnum";white-space:nowrap}
.mtk-empty{text-align:center;color:var(--c-text-muted);padding:var(--s8) 0}

.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:1000px){.uc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.uc-grid{grid-template-columns:1fr}}
.mtk-card[hidden]{display:none}

/* ── Karte: Themen-Icon statt Foto-Attrappe ──
   Jedes Thema hat ein eigenes Symbol → Vielfalt ohne Farbcodierung
   und ohne Bilder, die es noch nicht gibt. Sobald echte Standbilder
   vorliegen, ersetzt <img> das .uc-visual. */
.uc-card{display:flex;flex-direction:column;background:var(--c-white);
  border:1px solid var(--c-border-subtle);border-radius:var(--r-card);overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.uc-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.uc-card:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.uc-visual{position:relative;display:grid;place-items:center;aspect-ratio:16/9;
  background-color:var(--c-neutral-200);
  background-image:radial-gradient(circle at center,var(--c-neutral-400) 1px,transparent 1.2px);
  background-size:16px 16px}  /* Trennlinie unter dem Visual entfernt (25.07) */
.uc-visual svg{width:62px;height:62px;fill:var(--c-base);position:relative}
.uc-card:hover .uc-visual svg{transform:scale(1.04);transition:transform var(--dur) var(--ease)}
.uc-visual--play{background-color:var(--c-neutral-200)}
.uc-play{width:64px;height:64px;border-radius:50%;background:var(--c-white);
  display:grid;place-items:center;box-shadow:var(--sh-2)}
.uc-play svg{width:24px;height:24px;fill:var(--c-primary);margin-left:3px}
.uc-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.uc-tag{display:inline-flex;align-self:flex-start;align-items:center;padding:4px 11px;
  border-radius:var(--r-pill);background:var(--c-neutral-200);color:var(--c-text-muted);
  font-size:12px;font-weight:var(--fw-semibold);letter-spacing:0.04em;text-transform:uppercase}
.uc-tag.is-accent{background:rgba(67,45,244,0.08);color:var(--c-primary)}
.uc-title{margin:0;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);color:var(--c-base);
  letter-spacing:-0.012em;line-height:1.3;font-variation-settings:"opsz" 32;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Feste Zeilenzahl → alle Karten exakt gleich hoch, unabhängig von der Textlänge */
.uc-desc{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.uc-grid{grid-auto-rows:1fr}
.uc-card{height:100%}

/* Überblick-Karte quer über zwei Spalten */

/* ── Mobil ── */
@media(max-width:900px){
  .fbar-inner{padding:var(--s4) var(--s5)}
  .fbar-search{max-width:none}
}
@media(max-width:640px){
  .uc-hero{padding:var(--s6) 0 var(--s5);text-align:left}
  .uc-hero h1,.uc-hero .lead,.uc-hero .as-h1{margin-left:0;margin-right:0;max-width:none}
  .uc-meta{justify-content:flex-start}
        /* Listenkarten statt Kacheln — spart rund zwei Drittel Scrollweg */
  .uc-card{flex-direction:row;align-items:flex-start;gap:var(--s3);padding:var(--s3)}
  .uc-visual{width:104px;flex-shrink:0;aspect-ratio:1/1;align-self:flex-start;
    border:1px solid var(--c-border-subtle);border-radius:10px}
  .uc-visual svg{width:40px;height:40px}
  .uc-play{width:38px;height:38px}
  .uc-play svg{width:15px;height:15px}
  .uc-body{padding:2px 0 0;gap:5px}
  .uc-title{font-size:var(--fs-body);line-height:1.3;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .uc-desc{display:none}
  .uc-grid{gap:var(--s3)}
  .list-head{margin-bottom:var(--s4)}
}
@media(prefers-reduced-motion:reduce){
  .uc-card,.uc-visual svg{transition:none}
  .uc-card:hover{transform:none}
}

/* ═════════════════════════════════════════════════════════════════
   ELEMENTOR-KIT-GUARD · global (25.07)
   Kit-Regeln wie „.elementor-kit-XX button:hover" (Spezifität 0,2,1)
   überstimmen einfache Klassen (0,1,0) und legten die globale Button-
   Farbe (pink) über 5F-Widget-Buttons — erst FAQ, dann Feature-Tabs.
   Hier einmal ALLE <button>-Elemente der 5F-Widgets abgesichert:
   verdoppelte Klasse (.x.x = 0,2,0; mit :hover 0,3,0) gewinnt gegen
   das Kit in jedem State. Nur background/color/box-shadow — Layout
   bleibt bei den Komponenten-Regeln oben.
   ═════════════════════════════════════════════════════════════════ */
/* Feature-Tabs */
.ftab.ftab,.ftab.ftab:hover,.ftab.ftab:focus,.ftab.ftab:active{
  background:transparent;color:var(--c-text-muted);border:none;box-shadow:none}
.ftab.ftab:hover{color:var(--c-base)}
.ftab.ftab.is-active,.ftab.ftab.is-active:hover,.ftab.ftab.is-active:focus{
  background:var(--c-white);color:var(--c-base);box-shadow:var(--sh-2)}
/* Mediathek-Pillen */
.mtk-pill.mtk-pill,.mtk-pill.mtk-pill:hover,.mtk-pill.mtk-pill:focus,.mtk-pill.mtk-pill:active{
  background:var(--c-white);color:var(--c-base)}
.mtk-pill.mtk-pill:hover{color:var(--c-primary)}
.mtk-pill.mtk-pill[aria-pressed="true"]{background:var(--c-base);color:var(--c-white)}
/* Testimonial-Dots */
.t-dot.t-dot,.t-dot.t-dot:hover,.t-dot.t-dot:focus,.t-dot.t-dot:active{background:none;border:none}
/* Trust-Bar Pause */
.trust-pause.trust-pause,.trust-pause.trust-pause:focus,.trust-pause.trust-pause:active{
  background:var(--c-white);color:var(--c-text-muted)}
.trust-pause.trust-pause:hover{background:var(--c-white);color:var(--c-primary)}
/* Bento: Expand + Modal-Close */
.bento .expand,.bento .expand:focus,.bento .expand:active{background:var(--bento-section);color:var(--c-text-muted)}
.bento .expand:hover,.bento .card:hover .expand{background:var(--c-primary);color:#fff}
.bento-modal-close.bento-modal-close,.bento-modal-close.bento-modal-close:focus{
  background:var(--c-base);color:var(--c-white)}
.bento-modal-close.bento-modal-close:hover{background:var(--c-primary);color:var(--c-white)}
/* Kontakt / Newsletter Submit */
.kt5f-btn.kt5f-btn,.kt5f-btn.kt5f-btn:focus,.kt5f-btn.kt5f-btn:active{
  background:var(--c-primary);color:var(--c-white)}
.kt5f-btn.kt5f-btn:hover{background:var(--c-primary-hover,#3520d4);color:var(--c-white)}
.nl5f-btn.nl5f-btn,.nl5f-btn.nl5f-btn:focus,.nl5f-btn.nl5f-btn:active{
  background:var(--c-white);color:var(--c-base)}
.nl5f-btn.nl5f-btn:hover{background:var(--c-neutral-300);color:var(--c-base)}
/* Video-Play (Zwei-Klick, DSGVO) */
.post5f-play.post5f-play,.post5f-play.post5f-play:focus{background:rgba(28,36,51,0.86);color:var(--c-white)}
.post5f-play.post5f-play:hover{background:var(--c-primary);color:var(--c-white)}
/* Kernfunktionen-Pfeile */
.kf-arrow.kf-arrow,.kf-arrow.kf-arrow:focus,.kf-arrow.kf-arrow:active{
  background:var(--c-white);color:var(--c-base)}
.kf-arrow.kf-arrow:hover:not(:disabled){background:var(--c-white);color:var(--c-primary)}
/* Video-Extras Accordion-Kopf */
.vx-head.vx-head,.vx-head.vx-head:hover,.vx-head.vx-head:focus,.vx-head.vx-head:active{
  background:none;color:inherit}
/* Sidebar-Mobile-Toggle */
.sb-mobile-toggle.sb-mobile-toggle,.sb-mobile-toggle.sb-mobile-toggle:hover,
.sb-mobile-toggle.sb-mobile-toggle:focus{background:var(--c-bg-subtle);color:var(--c-base)}
/* Burger (Audit 27.07) — der einzige <button> des Headers, der bislang NICHT
   abgesichert war. `.burger` ist (0,1,0), die Kit-Regel `.elementor-kit-N button`
   ist (0,1,1) und gewinnt: daher der pinke Kasten im Header. Verdoppelte Klasse
   (0,2,0) dreht das um. Layout bleibt bei der Komponentenregel oben. */
.burger.burger,.burger.burger:hover,.burger.burger:focus,.burger.burger:active{
  background:none;border:none;box-shadow:none;border-radius:0;padding:10px}
.burger.burger span{background:var(--c-base)}
/* Drawer-CTA im Panel: gleiche Kit-Falle wie oben. */
.drawer .nav-cta.nav-cta,.drawer .nav-cta.nav-cta:hover,.drawer .nav-cta.nav-cta:focus{
  background:var(--c-primary);color:var(--c-white)}

/* ═════════════════════════════════════════════════════════════════
   EINSATZ-BEISPIELE · Widget v4 (25.07)
   Rendert das Modul „5F · Text + Bullets" (sb5f) 1:1 — links Text,
   rechts Bullets — und erbt dessen pixelgenaue Abstände. Hier nur
   der Modifier für die längeren Inhalte dieser Sektion.
   ═════════════════════════════════════════════════════════════════ */
.sb5f--beispiele h2,.sb5f--beispiele h3,.sb5f--beispiele .as-h2,.sb5f--beispiele .as-h3{max-width:22ch}
.sb5f--beispiele .sb5f-copy p+p{margin-top:var(--s5)}
.sb5f--beispiele .sb5f-copy strong{font-weight:var(--fw-medium-2);color:var(--c-base)}
.sb5f--beispiele h3,.sb5f--beispiele .as-h3{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);color:var(--c-base);
  font-variation-settings:"opsz" 32}


/* ═════════════════════════════════════════════════════════════════
   STELLEN · Widget (25.07, aus 5f-karriere.html)
   Kopf + Stellen-Reihen (Status-Pill, Flyer-Download, Bewerben).
   Sektion weiß statt Grau-Band (Richtung 25.07); Karten behalten
   die feine Kontur der Referenz. Namespace .stl5f.
   ═════════════════════════════════════════════════════════════════ */
.stl5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.stl5f-head{max-width:640px;margin-bottom:var(--s6)}
.stl5f-head .eyebrow5x{display:block;line-height:1;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.stl5f-head h2,.stl5f-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);color:var(--c-base);font-variation-settings:"opsz" 32;margin:0}
.stl5f-head p{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.6;margin:var(--s4) 0 0}
.stl5f-jobs{display:grid;gap:var(--s4)}
.stl5f .job{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  padding:var(--s6) var(--s7);transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.stl5f .job.open:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.stl5f .job.filled{opacity:0.72}
.stl5f .j-main{display:flex;flex-direction:column;gap:var(--s2)}
.stl5f .j-title{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;
  font-variation-settings:"opsz" 32;color:var(--c-base);line-height:1.15;margin:0}
.stl5f .j-status{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:4px 12px;
  border-radius:var(--r-pill);font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  letter-spacing:0.03em;text-transform:uppercase}
.stl5f .j-status.is-open{background:var(--c-green-t2,#d7f2d9);color:#1f5b30}
.stl5f .j-status.is-open .d{width:7px;height:7px;border-radius:50%;background:var(--c-green,#83cc8e)}
.stl5f .j-status.is-filled{background:var(--c-bg-subtle);color:var(--c-text-muted)}
.stl5f .j-status.is-filled .d{width:7px;height:7px;border-radius:50%;background:var(--c-neutral-400)}
.stl5f .j-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.stl5f .flyer{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-semibold);color:var(--c-primary);text-decoration:none}
.stl5f .flyer svg{width:15px;height:15px}
.stl5f .flyer:hover{color:var(--c-primary-hover,#3520d4)}
.stl5f .job.filled .flyer{color:var(--c-text-muted)}
.stl5f .btnx{display:inline-flex;align-items:center;gap:8px;background:var(--c-primary);color:var(--c-white);
  font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);padding:12px 22px;border-radius:var(--r-pill);text-decoration:none}
@media(max-width:620px){.stl5f .job{grid-template-columns:1fr;gap:var(--s4)}}

/* ─── Modul-Karten · Hell-Variante (25.07) ─── */
.mc5f--light .mc5f-card{background:var(--c-bg-subtle);color:var(--c-base)}
.mc5f--light .mc5f-card:hover{box-shadow:0 18px 40px rgba(28,36,51,0.10)}
.mc5f--light .mc5f-card h3,.mc5f--light .mc5f-card .as-h3{color:var(--c-base)}
.mc5f--light .mc5f-card p{color:var(--c-text-muted)}
.mc5f--light .mc5f-pill{color:var(--c-text-muted);border:none;background:var(--c-white)}
.mc5f--light .mc5f-more{color:var(--c-primary)}
.mc5f--light .mc5f-more:hover{color:var(--c-primary-hover,#3520d4)}

/* ─── Hero · Eyebrow (25.07, optional) ─── */
.hero5f-eyebrow{display:block;line-height:1;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--hero-gap-eyebrow)}
.hero5f--b .hero5f-eyebrow{text-align:left}


/* ═════════════════════════════════════════════════════════════════
   REFERENZEN · rf2-Widgets (26.07, aus freigegebenem Entwurf v2)
   Big-4-Duktus, 5F-Essenz: linksbündige Editorial-Achse, Versalien-
   Kicker (0.14em), violetter Satzpunkt-Akzent, flaches Stimmen-Raster
   (diplomatische Gleichgewichtung), Fakten-Reihe, Logo-Platzhalter,
   dunkle CTA-Karte (Karte, kein Band — Governance) mit corner-Raster.
   ═════════════════════════════════════════════════════════════════ */
.rf2{font-family:var(--font),system-ui,sans-serif;color:var(--c-base)}
.rf2 .wrapx{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.rf2 .kick{display:block;line-height:1;font-size:12px;font-weight:var(--fw-semibold);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--c-text-muted)}
.rf2 .dot{color:var(--c-primary)}
.rf2-hero .kick{margin-bottom:var(--hero-gap-eyebrow)}

.rf2-hero{padding:var(--s10) 0 var(--s8)}
.rf2-hero .grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  column-gap:var(--s8);align-items:end}
.rf2-hero h1,.rf2-hero .as-h1{margin:0;font-size:clamp(36px,5.4vw,76px);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h1);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;max-width:22ch}
.rf2-hero .lead{margin:0;font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.6;max-width:36ch}
@media(max-width:860px){.rf2-hero .grid{grid-template-columns:1fr;row-gap:var(--hero-gap-lead);align-items:start}
  .rf2-hero .grid>*{min-width:0}}

.rf2-stories{padding:0 0 var(--s9)}
.rf2-shead{display:grid;grid-template-columns:1fr auto;align-items:end;margin-bottom:var(--s6)}
.rf2-shead h2,.rf2-shead .as-h2{margin:var(--s4) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base)}
.rf2-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.rf2-scard{background:var(--c-bg-subtle);border-radius:12px;padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s5);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.rf2-scard:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(28,36,51,0.10)}
.rf2-scard .kick{color:var(--c-primary);letter-spacing:0.12em}
.rf2-scard blockquote{margin:0;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);
  letter-spacing:-0.012em;line-height:1.5;color:var(--c-base);flex:1;font-variation-settings:"opsz" 32}
.rf2-scard .who{margin:0;font-size:var(--fs-body-sm);color:var(--c-text-muted)}
.rf2-scard .who b{font-weight:var(--fw-medium-2);color:var(--c-base)}
@media(max-width:980px){.rf2-sgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.rf2-sgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.rf2-scard{transition:none}}

.rf2-facts{padding:0 0 var(--s9)}
.rf2-facts .row{display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--s7);row-gap:var(--s6);
  margin-top:var(--s6)}
.rf2-fact .t{display:block;margin-top:var(--s3);font-size:var(--fs-body-lg);
  font-weight:var(--fw-medium-2);letter-spacing:-0.012em;line-height:1.35;
  font-variation-settings:"opsz" 32;color:var(--c-base)}
.rf2-fact .kick{color:var(--c-primary);letter-spacing:0.12em}
@media(max-width:980px){.rf2-facts .row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rf2-facts .row{grid-template-columns:1fr}}

.rf2-logos{padding:0 0 var(--s9)}
.rf2-logos .row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4);margin-top:var(--s5)}
.rf2-logos .ph{height:56px;border-radius:10px;background:var(--c-bg-subtle);
  display:grid;place-items:center;font-size:12px;color:var(--c-text-muted);font-weight:var(--fw-medium-2)}
.rf2-logos .ph--img img{max-height:32px;max-width:80%;width:auto;filter:grayscale(1);opacity:0.8}
@media(max-width:820px){.rf2-logos .row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.rf2-logos .row{grid-template-columns:1fr 1fr}}

.rf2-cta{padding:0 0 var(--s10)}
.rf2-cta .box{position:relative;overflow:hidden;background:var(--c-base);color:var(--c-white);
  border-radius:16px;padding:var(--s9) var(--s8);display:grid;
  grid-template-columns:minmax(0,1.5fr) auto;column-gap:var(--s8);align-items:center}
.rf2-cta h2,.rf2-cta .as-h2{color:var(--c-white);margin:var(--s4) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);font-variation-settings:"opsz" 32}
.rf2-cta p{margin:var(--s4) 0 0;font-size:var(--fs-body-lg);color:rgba(255,255,255,0.78);max-width:46ch}
.rf2-cta .kick{color:rgba(255,255,255,0.6)}
.rf2-cta .btnn{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;
  background:var(--c-primary);color:var(--c-white);font-weight:var(--fw-semibold);
  font-size:var(--fs-body-lg);padding:16px 30px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap}
.rf2-cta .btnn:hover{background:var(--c-primary-hover,#3520d4);color:var(--c-white)}
.rf2-cta .btnn:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.rf2-cta canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.rf2-cta .lft{position:relative;z-index:2}
@media(max-width:860px){.rf2-cta .box{grid-template-columns:1fr;row-gap:var(--s6)}}


/* ─── Stimmen-Slider stv3 (26.07, freigegebener Entwurf v3) ───
   Eine Stimme pro Slide · Foto 64px · Logo 24px graustufig ·
   nüchterne Pfeile + Zähler · kein Autoplay. */
.stv3{background:var(--c-bg-subtle);border-radius:16px;padding:var(--s8);position:relative;overflow:hidden}
.stv3-viewport{overflow:hidden}
.stv3-track{display:flex;transition:transform 0.45s var(--ease)}
@media(prefers-reduced-motion:reduce){.stv3-track{transition:none}}
.stv3-slide{flex:0 0 100%;min-width:0;padding-right:1px}
.stv3-slide .kick{color:var(--c-primary);letter-spacing:0.12em}
.stv3-slide blockquote{margin:var(--s5) 0 0;font-size:clamp(20px,2.2vw,28px);
  font-weight:var(--fw-medium-2);letter-spacing:-0.018em;line-height:1.45;
  color:var(--c-base);font-variation-settings:"opsz" 32;max-width:34em;text-wrap:pretty}
.stv3-attr{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
img.stv3-foto{width:64px;height:64px;border-radius:14px;flex-shrink:0;object-fit:cover}
.stv3-who .n{font-weight:var(--fw-medium-2);font-size:var(--fs-body);color:var(--c-base)}
.stv3-who .r{font-size:var(--fs-body-sm);color:var(--c-text-muted)}
img.stv3-logo{margin-left:auto;max-height:24px;width:auto;filter:grayscale(1);opacity:0.75}
.stv3-nav{margin-top:var(--s6);display:flex;align-items:center;gap:var(--s4)}
.stv3-btn{width:44px;height:44px;border-radius:50%;border:none;background:var(--c-white);
  color:var(--c-base);display:grid;place-items:center;cursor:pointer;
  transition:color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.stv3-btn:hover:not(:disabled){color:var(--c-primary);box-shadow:var(--sh-2)}
.stv3-btn:disabled{opacity:0.35;cursor:default}
.stv3-btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.stv3-btn svg{width:18px;height:18px}
.stv3-count{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;letter-spacing:0.04em}
@media(max-width:640px){.stv3{padding:var(--s6)}img.stv3-logo{margin-left:0}}
@media(prefers-reduced-motion:reduce){.stv3-btn{transition:none}}
/* Kit-Guard: Slider-Pfeile gegen Elementor-Globalbuttons absichern */
.stv3-btn.stv3-btn,.stv3-btn.stv3-btn:focus,.stv3-btn.stv3-btn:active{
  background:var(--c-white);color:var(--c-base);border:none;box-shadow:none;padding:0;border-radius:50%}
.stv3-btn.stv3-btn:hover:not(:disabled){background:var(--c-white);color:var(--c-primary);box-shadow:var(--sh-2)}


/* ═════════════════════════════════════════════════════════════════
   ÜBER UNS · Widgets (26.07): Mission · Werte · Team
   Werte ersetzt die farbcodierten Icon-Kacheln der Bestandsseite
   (Regel 11.06: keine Farbe↔Kategorie-Kopplung). Ein Duktus mit den
   rf2-Widgets: Kicker, violetter Satzpunkt, linksbündige Achse.
   ═════════════════════════════════════════════════════════════════ */
.abt5f{font-family:var(--font),system-ui,sans-serif;color:var(--c-base)}
.abt5f .kick,.wrt5f .kick{display:block;line-height:1;font-size:12px;font-weight:var(--fw-semibold);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--c-text-muted)}
.abt5f .dot,.wrt5f .dot{color:var(--c-primary)}

.abt5f-mission{max-width:var(--wrap);margin:0 auto;padding:var(--s10) var(--s5) var(--s8)}
.abt5f-mission h1,.abt5f-mission .as-h1{margin:var(--s5) 0 0;font-size:clamp(34px,4.6vw,64px);font-weight:var(--fw-medium-2);
  letter-spacing:-0.03em;line-height:1.08;font-variation-settings:"opsz" 32;max-width:22ch;text-wrap:balance;color:var(--c-base)}

.wrt5f{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.wrt5f-head{max-width:640px;margin-bottom:var(--s7)}
.wrt5f-head h2,.wrt5f-head .as-h2{margin:var(--s4) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base)}
.wrt5f-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--s8);row-gap:var(--s7)}
.wrt5f-item .t{display:block;font-size:var(--fs-h4);font-weight:var(--fw-medium-2);
  letter-spacing:-0.016em;line-height:1.2;color:var(--c-base);font-variation-settings:"opsz" 32}
.wrt5f-item p{margin:var(--s3) 0 0;font-size:var(--fs-body);line-height:1.6;
  color:var(--c-text-muted);max-width:38ch}
@media(max-width:980px){.wrt5f-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.wrt5f-grid{grid-template-columns:1fr;row-gap:var(--s6)}}

.abt5f-team{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5) var(--s9)}
.abt5f-team h2,.abt5f-team .as-h2{margin:var(--s4) 0 var(--s6);font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base)}
.abt5f-tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.abt5f-tcard .foto{aspect-ratio:1;width:100%;border-radius:14px;background:var(--c-bg-subtle);
  display:grid;place-items:center;font-size:12px;color:var(--c-text-muted);font-weight:var(--fw-semibold)}
img.abt5f-tcard .foto{object-fit:cover}
.abt5f-tcard img.foto{object-fit:cover;display:block}
.abt5f-tcard .n{margin-top:var(--s3);font-weight:var(--fw-medium-2);font-size:var(--fs-body);color:var(--c-base)}
.abt5f-tcard .r{font-size:var(--fs-body-sm);color:var(--c-text-muted)}
@media(max-width:900px){.abt5f-tgrid{grid-template-columns:1fr 1fr}}


/* ═════════════════════════════════════════════════════════════════
   VERBÄNDE · Widgets (27.07): Editorial-Intro · Einsatz-Karte Dunkel
   + zweizeilige Bullets (Begriff fett, Beispiel-Zeile gedämpft) im
   Text+Bullets-Modul. Aus dem freigegebenen Verbände-Entwurf v2.
   Satzpunkt auf Dunkelblau in Tint #7a70f7 (Neon bleibt dem CTA-
   Button vorbehalten; Tint = zulässiger Akzent, 3.64:1 nur groß).
   ═════════════════════════════════════════════════════════════════ */
.vb2-intro{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.vb2-intro .row{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.6fr);gap:var(--s7)}
.vb2-intro .lbl{margin:0;font-family:var(--font);font-size:12px;font-weight:var(--fw-semibold);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--c-primary);padding-top:5px;line-height:1;font-variation-settings:normal}
.vb2-intro .txt p{margin:0 0 var(--s5);font-size:var(--fs-lead);line-height:1.6;
  color:var(--c-text-muted);max-width:58ch}
.vb2-intro .txt p:last-child{margin-bottom:0}
.vb2-intro .txt strong{font-weight:var(--fw-medium-2);color:var(--c-base)}
@media(max-width:860px){.vb2-intro .row{grid-template-columns:1fr;gap:var(--s4)}}

.vb2-einsatz{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5) var(--s9)}
.vb2-einsatz .card{background:var(--c-base);color:var(--c-white);border-radius:20px;
  padding:var(--s8);position:relative;overflow:hidden}
.vb2-einsatz canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.vb2-einsatz .inner{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.vb2-einsatz .kick{display:block;line-height:1;font-size:12px;font-weight:var(--fw-semibold);
  letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6)}
.vb2-einsatz h2,.vb2-einsatz .as-h2{margin:var(--s4) 0 0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);color:var(--c-white);
  font-variation-settings:"opsz" 32;max-width:16ch}
.vb2-einsatz .tdot{color:var(--c-primary-t1,#7a70f7)}
.vb2-einsatz .lead{margin:var(--s5) 0 0;font-size:var(--fs-body-lg);line-height:1.6;
  color:rgba(255,255,255,0.78);max-width:44ch}
.vb2-einsatz ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.vb2-einsatz li{display:flex;gap:var(--s4);align-items:flex-start;
  font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);letter-spacing:-0.01em;
  line-height:1.45;color:var(--c-white);font-variation-settings:"opsz" 32}
.vb2-einsatz li::before{content:"";flex-shrink:0;width:9px;height:9px;border-radius:50%;
  background:var(--c-primary-t1,#7a70f7);margin-top:calc((1.45em - 9px)/2)}
@media(max-width:900px){.vb2-einsatz .inner{grid-template-columns:1fr;gap:var(--s6)}
  .vb2-einsatz .card{padding:var(--s6)}}

/* Zweizeilige Bullets im Text+Bullets-Modul */
.sb5f-list .vb2-art{display:flex;flex-direction:column;gap:2px;min-width:0}
.sb5f-list .vb2-art b{font-weight:var(--fw-medium-2);color:var(--c-base)}
.sb5f-list .vb2-art .ex{font-size:var(--fs-body-sm);color:var(--c-text-muted)}


/* ═════════════════════════════════════════════════════════════════
   RECHTSTEXT · Widget (27.07, aus 5f-impressum.html)
   Kopf + zweispaltig: klebendes Inhaltsverzeichnis links, Blöcke
   rechts (Lesebreite 72ch). Namespace .lg5f — die Referenzklassen
   (.legal/.toc/.content/.block) waren fürs geteilte Stylesheet viel
   zu generisch. Für Impressum, Datenschutz und AGB.
   ═════════════════════════════════════════════════════════════════ */
.lg5f-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
/* Das Logo-Raster nutzt ebenfalls .lg5f (Abschnitts-Padding --sec-y + seitliche
   --s5) — hier zurücksetzen, sonst doppelter Rand und viel zu viel Luft oben. */
.elementor-widget-5f-rechtstext .lg5f{padding:0}
.lg5f-hero{padding:var(--s7) 0 var(--s6)}
.lg5f-eyebrow{display:block;line-height:1;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s3)}
.lg5f-hero h1,.lg5f-hero .as-h1{margin:0;font-size:var(--fs-h1-inner);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h1);line-height:var(--lh-heading);color:var(--c-base);
  font-variation-settings:"opsz" 32}
.lg5f-meta{margin:var(--s3) 0 0;font-size:var(--fs-body-sm);color:var(--c-text-muted)}

.lg5f-body{padding:var(--s7) 0 var(--s9)}
.lg5f-grid{display:grid;grid-template-columns:240px 1fr;gap:var(--s8);align-items:start}
.lg5f-grid--notoc{grid-template-columns:1fr}
@media(max-width:860px){.lg5f-grid{grid-template-columns:1fr;gap:var(--s5)}}

.lg5f-toc{position:sticky;top:96px}
@media(max-width:860px){.lg5f-toc{position:static;background:var(--c-bg-subtle);
  border-radius:var(--r-card);padding:var(--s5)}}
.lg5f-toc h2,.lg5f-toc .as-h2{margin:0 0 var(--s4);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted)}
.lg5f-toc a{display:block;font-size:var(--fs-body-sm);color:var(--c-text-muted);
  padding:7px 0 7px var(--s3);border-left:2px solid var(--c-border-subtle);text-decoration:none;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.lg5f-toc a:hover,.lg5f-toc a.is-active{color:var(--c-primary);border-left-color:var(--c-primary)}
.lg5f-toc a:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}

.lg5f-content{min-width:0} /* volle Spaltenbreite (vorher 72ch) */
.lg5f-block{margin-bottom:var(--s8);scroll-margin-top:120px}
.lg5f-block:last-child{margin-bottom:0}
.lg5f-content h2,.lg5f-content .as-h2{margin:0 0 var(--s4);font-size:var(--fs-h3);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h3);line-height:var(--lh-heading);color:var(--c-base);
  font-variation-settings:"opsz" 32}
.lg5f-content h3,.lg5f-content .as-h3,.lg5f-text h4{margin:var(--s5) 0 var(--s2);font-size:var(--fs-body-lg);
  font-weight:var(--fw-medium-2);color:var(--c-base)}
.lg5f-text p{margin:0 0 var(--s4);font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.65}
.lg5f-text p:last-child{margin-bottom:0}
.lg5f-text strong{font-weight:var(--fw-medium-2);color:var(--c-base)}
.lg5f-text ul,.lg5f-text ol{margin:0 0 var(--s4);padding-left:1.25em;
  font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.65}
.lg5f-text li{margin-bottom:var(--s2)}
.lg5f-addr{padding:var(--s5) var(--s6);background:var(--c-bg-subtle);border-radius:var(--r-card);
  font-size:var(--fs-body);color:var(--c-base);line-height:1.7}
.lg5f-addr p{margin:0}

/* Downloads unter Titel und Stand (Dokument-Kacheln wie .vp-dl) */
.lg5f-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--s3);
  max-width:880px;margin:var(--s6) 0 0;padding:0;list-style:none}
.lg5f-dl li{margin:0;min-width:0}
.lg5f-dl li::before,.lg5f-dl li::marker{content:none}
.lg5f-dl-tile{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);min-height:56px;
  border:1px solid var(--c-border-subtle);border-radius:var(--r-btn);background:var(--c-white);color:var(--c-base);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);text-decoration:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.lg5f-dl-tile:hover{border-color:var(--c-primary);box-shadow:var(--sh-1);color:var(--c-base);text-decoration:none}
.lg5f-dl-tile:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.lg5f-dl-ic{flex-shrink:0;width:32px;height:32px;border-radius:8px;background:rgba(67,45,244,0.10);
  display:grid;place-items:center;color:var(--c-primary)}
.lg5f-dl-ic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lg5f-dl-label{min-width:0;overflow-wrap:anywhere}
.lg5f-dl-size{margin-left:auto;font-size:var(--fs-micro);color:var(--c-text-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:560px){.lg5f-dl{grid-template-columns:1fr}}


/* ═════════════════════════════════════════════════════════════════
   AUDIT 27.07 · ÜBERLAUF-SCHUTZ FÜR text-wrap:balance
   Chromium meldet auf Elementen mit `text-wrap:balance` eine zu große
   scrollWidth (Phantom-Breite). Das schlägt bis zum <html> durch und
   erzeugt horizontales Scrollen, obwohl optisch nichts überläuft.
   Gegenmittel ist `overflow-x:clip` am umgebenden Abschnitt — NICHT
   `overflow:hidden`, das würde `position:sticky` im selben Teilbaum
   abschalten (Filterleiste in .x5f, Matrix-Band, Changelog-Aside).
   Fünf Stellen tragen balance; hier sind ihre Container abgedeckt.
   ═════════════════════════════════════════════════════════════════ */
.cta-a,
.x5f .section-head,
.wall,
.abt5f,
.rf2{overflow-x:clip}


/* ═════════════════════════════════════════════════════════════════
   MODUL-SEITEN-WIDGETS (Labels-Redesign 27.07 · Plugin 1.30)
   Portiert aus der freigegebenen Vorschau 5f-labels-v2.html.
   Namespace .lb- · vier Widgets: Modul-Hero, Chip-Zeilen,
   Feature-Zeilen, Vorteile-Liste.
   ═════════════════════════════════════════════════════════════════ */

.lb-wrap{max-width:var(--wrap,1200px);margin:0 auto;padding:0 var(--s5)}
.lb-eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.lb-kicker{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-primary);background:rgba(67,45,244,0.08);border-radius:var(--r-pill);
  padding:6px 14px;margin-bottom:var(--hero-gap-pill);vertical-align:top}

/* ── Modul-Hero ── */
.lb-hero{padding:var(--s7) 0 var(--s9)}
.lb-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--s9);align-items:center}
.lb-hero-body{min-width:0} /* Grid-Kind: verhindert Überlauf langer Wörter */
/* Feedback 28.07: die gewählte Ebene steuert Ebene UND Größe.
   h1 = Inner-Page-H1 (clamp 40–64), h2 = --fs-h2. */
.lb-hero-title{font-weight:var(--fw-medium-2);letter-spacing:-0.030em;
  line-height:var(--lh-heading,1.05);margin:0;font-variation-settings:"opsz" 32}
h1.lb-hero-title,.as-h1.lb-hero-title{font-size:clamp(40px,5vw,64px)}
h2.lb-hero-title,.as-h2.lb-hero-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2,-0.025em)}
/* Titel und Subline mit lesbarer Zeilenlänge, auch bei „Volle Breite" (ohne Media). */
.lb-hero-title{max-width:22ch}
.lb-hero-sub{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;
  margin:var(--hero-gap-lead) 0 0;max-width:60ch}
.lb-hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;margin-top:var(--hero-gap-actions)}
.lb-hero-media img{width:100%;height:auto;border-radius:var(--r-card-lg);
  border:1px solid var(--c-border-subtle);box-shadow:var(--sh-2)}
.lb-hero-media .lb-wire{aspect-ratio:4/3}
@media(max-width:860px){.lb-hero-grid{grid-template-columns:1fr;gap:var(--s7)}}

/* ── Wireframe-Platzhalter (.lb-wire, NICHT .kf-wire!)
   Der ursprüngliche Port aus der Vorschau nutzte .kf-wire — die Klasse
   existiert aber bereits für die Kernfunktionen-Wireframes (Zeile ~2049,
   .wire-main dort column-flex). Eine Redefinition hätte deren Layout
   verändert. Deshalb hier eigener Name; Regel „Namespace von Anfang an"
   gilt auch für vermeintlich generische Hilfsklassen. (bis echte Screenshots vorliegen).
   Farbtöne = Sekundärpalette-Tints — gleiche Bene-Entscheidung wie
   die Chips; fliegen mit den echten Screenshots ohnehin raus. ── */
.lb-wire{border-radius:var(--r-card-lg);background:var(--c-bg-subtle);
  border:1px solid var(--c-border-subtle);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.lb-wire .wire-bar{position:absolute;top:0;left:0;right:0;height:34px;background:var(--c-white);
  border-bottom:1px solid var(--c-border-subtle);display:flex;align-items:center;gap:6px;padding:0 14px}
.lb-wire .wire-bar i{width:8px;height:8px;border-radius:50%;background:var(--c-neutral-400);display:block}
.lb-wire .wire-body{position:absolute;top:34px;left:0;right:0;bottom:0;padding:var(--s5);display:flex}
.lb-wire .wire-main{flex:1;display:flex;align-items:center;justify-content:center}
.lb-wire .wire-cap{position:absolute;left:16px;bottom:14px;font-size:11px;color:var(--c-text-muted);
  background:var(--c-white);border:1px solid var(--c-border-subtle);padding:3px 9px;border-radius:var(--r-pill)}
.lb-wire .ln{display:block;height:10px;border-radius:4px;background:var(--c-neutral-300);width:100%}
.lb-wire .ln.accent{background:var(--c-primary-t2)}
.lb-wire .ln.w60{width:60%}.lb-wire .ln.w40{width:40%}
.lb-wire .wire-rows{display:flex;flex-direction:column;gap:11px;width:100%}
.lb-wire .wire-row{display:flex;align-items:center;gap:8px}
.lb-wire .wire-row .ln{flex:1}
.lb-wire .tag{height:14px;border-radius:var(--r-pill);background:var(--c-neutral-400);flex-shrink:0}
.lb-wire .tag.t1{width:34px}.lb-wire .tag.t2{width:26px}.lb-wire .tag.t3{width:44px}
.lb-wire .tag.c-r{background:#f17d8b}.lb-wire .tag.c-a{background:#fbc63e}
.lb-wire .tag.c-g{background:#addfb3}.lb-wire .tag.c-v{background:#b2b2f9}
.lb-wire .wire-stack{width:100%}
.lb-wire .wire-filter{display:flex;gap:7px;margin-bottom:12px}
.lb-wire .wire-filter .tag{height:16px}
.lb-wire .wire-dialog{background:var(--c-white);border:1px solid var(--c-border-subtle);
  border-radius:var(--r-btn);box-shadow:var(--sh-1);padding:14px;width:78%;margin:0 auto}
.lb-wire .wire-dialog .ln{margin-bottom:10px}
/* Formular-Variante (5F Lohn): Label/Input-Paare + Bestätigungszeile */
.lb-wire .wire-dialog--form{display:flex;flex-direction:column;gap:12px}
.lb-wire .wf-pair{display:flex;align-items:center;gap:10px}
.lb-wire .wf-lab{display:block;height:9px;border-radius:4px;background:var(--c-neutral-300)}
.lb-wire .wf-input{flex:1;height:22px;border-radius:var(--r-sm);background:var(--c-white);
  border:1px solid var(--c-neutral-400)}
.lb-wire .wf-check{width:16px;height:16px;border-radius:50%;background:var(--c-green);flex-shrink:0;position:relative}
.lb-wire .wf-check::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:8px;
  border:solid var(--c-white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.lb-wire .wf-pair--ok .wf-lab{background:var(--c-green-t2,#d7f2d9)}
/* Login-Variante (White Label): Kanzlei-Logo-Kreis, Willkommenszeilen,
   E-Mail-Feld mit Absende-Punkt. Neutraler Logo-Kreis — bewusst KEINE
   Farbe: das Logo ist das des Kunden, nicht unseres. */
.lb-wire .wire-dialog--login{display:flex;flex-direction:column;align-items:center;text-align:center}
.lb-wire .wl-logo{width:44px;height:44px;border-radius:50%;background:var(--c-neutral-300);
  display:block;margin:0 auto 12px}
.lb-wire .wire-dialog--login .wf-pair{width:100%}
.lb-wire .wl-go{width:22px;height:22px;border-radius:50%;background:var(--c-primary-t2);flex-shrink:0}
.lb-wire .swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:7px}
.lb-wire .sw{aspect-ratio:1;border-radius:50%;background:var(--c-neutral-300)}
.lb-wire .sw.c-r{background:var(--c-red)}.lb-wire .sw.c-r2{background:#f17d8b}
.lb-wire .sw.c-a{background:var(--c-amber)}.lb-wire .sw.c-a2{background:#fbc63e}
.lb-wire .sw.c-g{background:var(--c-green)}.lb-wire .sw.c-g2{background:#addfb3}
.lb-wire .sw.c-v{background:#7a70f7}.lb-wire .sw.c-v2{background:#b2b2f9}
.lb-wire .bars{display:flex;flex-direction:column;gap:10px;width:100%}
.lb-wire .bar{display:flex;align-items:center;gap:9px}
.lb-wire .bar .lab{width:24%;height:9px;border-radius:4px;background:var(--c-neutral-300)}
.lb-wire .bar .val{height:14px;border-radius:4px;background:var(--c-neutral-400)}
.lb-wire .bar .val.c-r{background:#f17d8b}.lb-wire .bar .val.c-a{background:#fbc63e}
.lb-wire .bar .val.c-g{background:#addfb3}.lb-wire .bar .val.c-v{background:#b2b2f9}

/* ── Chip-Zeilen ──
   ▶ CHIP-FARBEN = VORSCHLAG FÜR BENE (v2-Vorschau 27.07). Begründung:
   Die Chips sind demonstrativer Inhalt der Funktion „Labels mit
   unterschiedlichen Farben versehen" — graue Beispiele kommunizieren
   das Gegenteil des Produkts. Die Entkopplung vom 11.06 betraf
   Farbe↔Navigationskategorie; hier codiert Farbe nichts (Zuordnung
   steht im Chip-Text), sie ZEIGT die Funktion. Neonblau bleibt außen
   vor (CTA-Reservat). Text überall --c-base auf Tint-2 (≥12:1).
   Fallback bei Ablehnung: Redakteur lässt die Farbangabe in den
   Widget-Feldern weg — kein Code-Eingriff nötig. ── */
.lb-value{padding:var(--s9) 0;background:var(--c-white)}
.lb-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.lb-value-title{font-weight:var(--fw-medium-2);line-height:var(--lh-heading,1.05);
  margin:0 0 var(--s5);font-variation-settings:"opsz" 32}
h2.lb-value-title,.as-h2.lb-value-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2,-0.025em)}
h3.lb-value-title,.as-h3.lb-value-title{font-size:var(--fs-h4);letter-spacing:var(--ls-h3,-0.015em)}
h4.lb-value-title,.as-h4.lb-value-title{font-size:clamp(19px,2vw,22px);letter-spacing:-0.01em}
.lb-value-p{font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.6;margin:0 0 var(--s4)}
.lb-flag{display:inline-flex;align-items:center;gap:10px;margin-top:var(--s4);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);color:var(--c-base)}
.lb-flag::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-primary);flex-shrink:0}
.lb-chipset{display:grid;gap:var(--s5)}
.lb-chiprow{display:grid;grid-template-columns:150px 1fr;gap:var(--s5);align-items:baseline}
.lb-chiprow .rowlab{font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);padding-top:3px}
.lb-chiplist{display:flex;flex-wrap:wrap;gap:10px}
.lb-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border:1px solid var(--c-border-subtle);border-radius:var(--r-pill);
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--c-base);
  background:var(--c-bg-subtle)}
.lb-chip::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--c-neutral-400);flex-shrink:0}
.lb-chip--r{background:#f4bec5;border-color:#f4bec5}.lb-chip--r::before{background:var(--c-red)}
.lb-chip--a{background:#ffe67b;border-color:#ffe67b}.lb-chip--a::before{background:var(--c-amber)}
.lb-chip--g{background:#d7f2d9;border-color:#d7f2d9}.lb-chip--g::before{background:var(--c-green)}
.lb-chip--v{background:#b2b2f9;border-color:#b2b2f9}.lb-chip--v::before{background:var(--c-primary-t1)}
@media(max-width:860px){.lb-value-grid{grid-template-columns:1fr;gap:var(--s7)}}
@media(max-width:700px){.lb-chiprow{grid-template-columns:1fr;gap:var(--s2)}}

/* ── Feature-Zeilen ──
   H2 auf H4-Skala: Ebene wählbar (Dokumentstruktur), Größe fix —
   Regel „Section-H2 auf H3/H4-Skala", gehört ins Designsystem. ── */
/* Feedback 28.07: kein grauer Sektionshintergrund — alles hell. */
.lb-features{padding:var(--s9) 0;background:var(--c-white)}
.lb-feature{display:grid;grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
.lb-feature + .lb-feature{margin-top:var(--s10)}
.lb-feature:nth-child(even) .lb-feature-media{order:-1}
.lb-feature .kicker-sm{display:block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s3)}
.lb-feature-title{font-weight:var(--fw-medium-2);line-height:1.15;
  margin:0 0 var(--s5);font-variation-settings:"opsz" 32}
h2.lb-feature-title,.as-h2.lb-feature-title{font-size:var(--fs-h3);letter-spacing:var(--ls-h3,-0.015em)}
h3.lb-feature-title,.as-h3.lb-feature-title{font-size:var(--fs-h4);letter-spacing:var(--ls-h3,-0.015em)}
h4.lb-feature-title,.as-h4.lb-feature-title{font-size:clamp(19px,2vw,22px);letter-spacing:-0.01em}
.lb-feature p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;margin:0}
.lb-feature p + p{margin-top:var(--s4)}
.lb-feature-media img{width:100%;height:auto;border-radius:var(--r-card-lg);
  border:1px solid var(--c-border-subtle);box-shadow:var(--sh-2)}
.lb-feature-media .lb-wire{aspect-ratio:16/11}
@media(max-width:860px){
  .lb-feature{grid-template-columns:1fr;gap:var(--s6)}
  .lb-feature + .lb-feature{margin-top:var(--s8)}
  .lb-feature:nth-child(even) .lb-feature-media{order:0}
}

/* ── Vorteile-Liste ── */
.lb-benefits{padding:var(--s9) 0}
.lb-section-head{max-width:680px;margin:0 0 var(--s8)}
.lb-benefits-title{font-weight:var(--fw-medium-2);line-height:var(--lh-heading,1.05);
  margin:0;font-variation-settings:"opsz" 32}
h2.lb-benefits-title,.as-h2.lb-benefits-title{font-size:var(--fs-h2);letter-spacing:var(--ls-h2,-0.025em)}
/* h3/h4 eine ECHTE Stufe kleiner — 28.07: h3 lag auf fs-h3 und war damit
   gleich groß wie die Feature-H2 (die designbedingt auf fs-h3 sitzt).
   Auf der DATEV-Seite kollabierte dadurch die Sub-Produkt-Hierarchie. */
h3.lb-benefits-title,.as-h3.lb-benefits-title{font-size:var(--fs-h4);letter-spacing:var(--ls-h3,-0.015em)}
h4.lb-benefits-title,.as-h4.lb-benefits-title{font-size:clamp(19px,2vw,22px);letter-spacing:-0.01em}
.lb-bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s7);max-width:920px}
.lb-benefit{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4) 0;
  border-bottom:1px solid var(--c-border-subtle)}
.lb-benefit::before{content:"";flex-shrink:0;width:9px;height:9px;border-radius:50%;
  background:var(--c-primary);margin-top:7px}
.lb-benefit p{font-size:var(--fs-body);color:var(--c-text);line-height:1.45;margin:0}
@media(max-width:700px){.lb-bgrid{grid-template-columns:1fr}}


/* =================================================================
   A38 · TEXT+BULLETS VARIANTE DUNKEL + VORTEILE-GRID (02.08)
   WÖRTLICHE Ports aus 5f-verbaende-entwurf-v3_1.html:
   · .sb5f--dark  = vb2-einsatz  (Einsatz-Karte dunkel, Eck-Raster)
     Klassen-Mapping: .card→.sb5f-card · .inner→.sb5f-inner ·
     .kick→.sb5f-kick · .card-lead→.sb5f-lead · ul→.sb5f-dlist
   · .vt5f        = vb5f-vorteile (zweispaltiges Vorteile-Grid)
     Klassen-Mapping: .vb5f-vorteile→.vt5f · .in→.vt5f-in ·
     .head→.vt5f-head · ul→.vt5f-list
   Governance: #1c2433 nur Kartenfläche · Satzpunkt-Signatur:
   Neonblau auf Weiß, Tint #7a70f7 auf Dunkelblau · Raster aria-hidden.
   ================================================================= */
.sb5f--dark{display:block}
.sb5f--dark .sb5f-card{background:var(--c-base);color:var(--c-white);border-radius:var(--r-card);
  padding:var(--s8);position:relative;overflow:hidden}
.sb5f--dark .sb5f-raster{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.sb5f--dark .sb5f-inner{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--s8);align-items:start}
.sb5f--dark .sb5f-kick{display:block;line-height:1;font-size:12px;font-weight:var(--fw-semibold);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--c-primary-t1);margin-bottom:var(--s4)}
.sb5f--dark h2,.sb5f--dark .as-h2{font-size:clamp(28px,3vw,41px);font-weight:var(--fw-medium-2);
  letter-spacing:-0.015em;line-height:1.1;color:var(--c-white);max-width:15ch}
.sb5f--dark h2 .dot,.sb5f--dark .as-h2 .dot{color:var(--c-primary-t1)}
.sb5f--dark .sb5f-lead{margin:var(--s5) 0 0;font-size:var(--fs-body-lg);line-height:1.6;
  color:rgba(255,255,255,0.78);max-width:44ch}
.sb5f--dark .sb5f-dlist{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:var(--s4)}
.sb5f--dark .sb5f-dlist li{display:flex;align-items:flex-start;gap:14px;font-size:var(--fs-body-lg);
  font-weight:var(--fw-medium-2);color:var(--c-white);line-height:1.45}
.sb5f--dark .sb5f-dlist .bullet{width:12px;height:12px;border-radius:50%;background:var(--c-primary-t1);
  flex-shrink:0;margin-top:5px}
/* Zweizeilige Items (Punkt + Beispiel) auf dunkler Karte */
.sb5f--dark .vb2-art b{display:block;font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--c-white)}
.sb5f--dark .vb2-art .ex{display:block;margin-top:3px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-regular-2);color:rgba(255,255,255,0.65);line-height:1.5}
/* Chips-Reihe invertiert (Erweiterung ggü. Referenz — Karte hat dort
   keine Chips; Stil analog Pillen-Element, Weiß gedämpft) */
.sb5f--dark .sb5f-bottom{position:relative;z-index:2;margin-top:var(--s7)}
.sb5f--dark .sb5f-bottom-lbl{color:var(--c-primary-t1)}
.sb5f--dark .sb5f-chips li{background:rgba(255,255,255,0.10);color:var(--c-white)}
@media(max-width:920px){
  .sb5f--dark .sb5f-inner{grid-template-columns:1fr;gap:var(--s6)}
  .sb5f--dark .sb5f-card{padding:var(--s6)}
}

.vt5f{background:var(--c-neutral-200);border-block:1px solid var(--c-neutral-300)}
.vt5f-in{max-width:var(--wrap);margin:0 auto;padding:var(--s9) var(--s5)}
.vt5f-head{margin-bottom:var(--s7);max-width:640px}
.vt5f-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:0.10em;text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.vt5f-head h2,.vt5f-head .as-h2{font-size:clamp(30px,3.4vw,41px);font-weight:var(--fw-medium-2);
  letter-spacing:-0.015em;line-height:1.1;color:var(--c-base);margin:0}
.vt5f-head h2 .dot,.vt5f-head .as-h2 .dot{color:var(--c-primary)}
.vt5f-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s6) var(--s8)}
.vt5f-list li{display:flex;align-items:flex-start;gap:14px;line-height:1.45}
.vt5f-list .bullet{width:12px;height:12px;border-radius:50%;background:var(--c-primary);
  flex-shrink:0;margin-top:6px}
.vt5f-list .vt b{display:block;font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);color:var(--c-base)}
.vt5f-list .vt span{display:block;margin-top:3px;font-size:var(--fs-body-sm);
  font-weight:var(--fw-regular-2);color:var(--c-text-muted);line-height:1.5}
@media(max-width:820px){.vt5f-list{grid-template-columns:1fr;gap:var(--s5)}}

/* =================================================================
   WAS IST 5F? · Aufbau-Karten (ak5f) · v1.4.0
   Dreispaltige Taxonomie: weiße Karten mit Rahmen, Pill (DS-Primitive),
   Bullet-Liste mit violettem Brand-Book-Punkt. Nur bestehende Tokens,
   keine neuen Schriftgewichte.
   ================================================================= */
.ak5f{padding:var(--s9) var(--s5)}
.ak5f-head{max-width:var(--wrap-in);margin:0 auto var(--s7)}
.ak5f-head h2,.ak5f-head .as-h2{max-width:24ch}
.ak5f-grid{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.ak5f-card{background:var(--c-white);border:1px solid var(--c-neutral-300);border-radius:var(--r-card);
  padding:var(--s6);display:flex;flex-direction:column}
.ak5f-card .pill{align-self:flex-start;margin-bottom:var(--s4)}
.ak5f-card h3,.ak5f-card .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);letter-spacing:-0.01em;margin:0 0 var(--s2)}
.ak5f-card > p{font-size:var(--fs-subline);color:var(--c-text-muted);line-height:1.55;margin:0 0 var(--s4)}
.ak5f-list{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.ak5f-list li{display:flex;align-items:center;gap:12px;font-size:var(--fs-subline);
  font-weight:var(--fw-semibold);color:var(--c-base)}
/* Brand Book bullet: solider violetter Punkt, kein Glyph */
.ak5f-list li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c-primary);flex-shrink:0}
@media(max-width:860px){.ak5f-grid{grid-template-columns:1fr}}

/* =================================================================
   WAS IST 5F? · Zielgruppen-Karten (zg5f) · v1.4.0
   Kompakte weiße Karten, monochromes Icon (ic-mask, currentColor=Base),
   ganze Karte als Link. Hover: Lift + Schatten (Hausmuster).
   ================================================================= */
.zg5f{padding:var(--s9) var(--s5)}
.zg5f-head{max-width:var(--wrap-in);margin:0 auto var(--s7)}
.zg5f-head h2,.zg5f-head .as-h2{max-width:26ch}
.zg5f-grid{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.zg5f-card{background:var(--c-white);border:1px solid var(--c-neutral-300);border-radius:var(--r-card);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);color:var(--c-base);text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
a.zg5f-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);color:var(--c-base)}
.zg5f-ic{width:calc(32px*var(--icz,1));height:calc(32px*var(--icz,1));color:var(--c-base)}
.zg5f-ic.ic-mask{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;display:block}
.zg5f-t{font-size:var(--fs-subline);font-weight:var(--fw-semibold);letter-spacing:-0.01em}
@media(max-width:1000px){.zg5f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.zg5f-grid{grid-template-columns:1fr}}

/* =================================================================
   WAS IST 5F? · Ablauf-Schritte (ab5f) · v1.4.0 · v1.10.22
   Drei Schritte des Conversion-Modells: weiße Karten auf grauer
   Fläche, Pill + Titel + Text. Bewusst ohne Screenshot-Fläche
   (dafür existiert st5f).
   ================================================================= */
/* v1.10.22 · Fläche immer über die volle Seitenbreite (Schatten-Trick,
   kein 100vw → kein Querscrollen); Farbe wählbar (--bg-dark/--bg-white).
   Karten breiter und flacher: Raster 1280px, Titel eine Stufe kleiner. */
.ab5f{--ab5f-bg:var(--c-bg-subtle);background:var(--ab5f-bg);box-shadow:0 0 0 100vmax var(--ab5f-bg);clip-path:inset(0 -100vmax);
  padding:var(--s9) var(--s5)}
.ab5f--bg-dark{--ab5f-bg:var(--c-neutral-300)}
.ab5f--bg-white{--ab5f-bg:var(--c-white)}
.ab5f-head{max-width:var(--wrap-in);margin:0 auto var(--s7)}
.ab5f-head h2,.ab5f-head .as-h2{max-width:22ch}
.ab5f-head .lead{margin:var(--s4) 0 0;font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;max-width:60ch}
.ab5f-head .lead + .lead{margin-top:var(--s3)}
.ab5f-grid{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.ab5f-card{background:var(--c-white);border-radius:var(--r-card);padding:28px var(--s6) var(--s6);box-shadow:var(--sh-1);
  display:flex;flex-direction:column}
.ab5f-card .pill{align-self:flex-start;margin-bottom:var(--s3)}
.ab5f-card h3,.ab5f-card .as-h3{font-size:var(--fs-h5);font-weight:var(--fw-semibold);letter-spacing:-0.008em;margin:0 0 var(--s2);line-height:1.25}
.ab5f-card p{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.6;margin:0}
@media(max-width:820px){.ab5f-grid{grid-template-columns:1fr}}

/* =================================================================
   WAS IST 5F? · Kernfunktionen-Karten (kk5f) · v1.5.0
   Karten-Grid mit Icon-Kachel, drei Flächen-Varianten per Widget-
   Control: Weiß (Rahmen) · Grau (neutral-200) · Dunkelblau (#1c2433,
   erlaubte Kartenfläche). Icons monochrom via ic-mask (currentColor).
   Nur bestehende Tokens, keine neuen Schriftgewichte.
   ================================================================= */
.kk5f{padding:var(--s9) var(--s5)}
.kk5f-head{max-width:var(--wrap-in);margin:0 auto var(--s7)}
.kk5f .kk5f-head h2,.kk5f .kk5f-head .as-h2{max-width:60rem;text-wrap:balance}
.kk5f .kk5f-intro{font-size:var(--fs-lead);color:var(--c-text-muted);line-height:1.5;margin-top:var(--s4);max-width:52rem}
.kk5f-grid{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.kk5f-card{background:var(--c-white);border:1px solid var(--c-neutral-300);border-radius:var(--r-card);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.kk5f-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.kk5f-tile{width:44px;height:44px;border-radius:12px;background:var(--c-bg-subtle);
  display:grid;place-items:center;color:var(--c-base)}
.kk5f-ic{width:calc(22px*var(--icz,1));height:calc(22px*var(--icz,1));display:block}
.kk5f-ic.ic-mask{background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.kk5f-card h3,.kk5f-card .as-h3{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.01em;margin:0;line-height:1.15}
.kk5f-card p{font-size:var(--fs-subline);color:var(--c-text-muted);line-height:1.55;margin:0}
/* Variante Grau: Karten auf neutral-200, ohne Rahmen (Tile auf Weiß) */
.kk5f--grey .kk5f-card{background:var(--c-bg-subtle);border-color:transparent}
.kk5f--grey .kk5f-card:hover{box-shadow:var(--sh-1)}
.kk5f--grey .kk5f-tile{background:var(--c-white)}
/* Variante Dunkelblau: Kartenfläche #1c2433 (DS-erlaubt), Text weiß,
   Tile abgesetzt, Icon bleibt monochrom (currentColor = Weiß) */
.kk5f--dark .kk5f-card{background:var(--c-base);border-color:transparent}
.kk5f--dark .kk5f-card:hover{box-shadow:0 16px 40px rgba(28,36,51,0.28)}
.kk5f--dark .kk5f-card h3,.kk5f--dark .kk5f-card .as-h3{color:var(--c-white)}
.kk5f--dark .kk5f-card p{color:rgba(255,255,255,0.72)}
.kk5f--dark .kk5f-tile{background:rgba(255,255,255,0.08);color:var(--c-white)}
@media(max-width:960px){.kk5f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.kk5f-grid{grid-template-columns:1fr}}

/* A11y: visually hidden (WP-Konvention screen-reader-text) */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Defensiv-Guard 04.08: <body> ist in diesem Theme immer block.
   (Korrektur: Root-Cause des Grid-Bodys war der eigene A11-Port
   `.blog` — in 1.7.3 entfernt —, nicht Elementors Dialog-Klassen.
   Guard bleibt als billige Versicherung gegen künftige Body-Klassen-
   Kollisionen; Doppelklasse = Spezifität 0,2,1 ohne !important.) */
body.fivef-has-nav.fivef-has-nav{display:block}


/* =================================================================
   KUNDENFEEDBACK 09/2026 · Theme 1.8.0 / Plugin 1.39.0
   Alle Ergänzungen dieser Runde in einem Block, nur bestehende Tokens.
   Reihenfolge = Feedback-Liste (Landingpage-Anpassungen → Allgemein →
   neue Komponenten).
   ================================================================= */

/* ── Breadcrumb in allen Kopfbereichen (inc/breadcrumbs.php) ──
   Sitzt oberhalb von Kicker/Eyebrow; in zentrierten Heros zentriert. */
.lb-hero .crumbs,.rf2-hero .crumbs{margin-bottom:var(--hero-gap-crumbs)}
.lzhero .crumbs{margin-bottom:var(--hero-gap-crumbs)}
.blog5f-hero .crumbs,.vp-hero .crumbs{margin-bottom:var(--hero-gap-crumbs)}
.lg5f-hero .crumbs,.article5f-head .crumbs{margin-bottom:var(--s5)}

/* ── Modul-Hero: ohne Media, Breite 2/3 oder voll, Hinweis unter CTAs ── */
.lb-hero-grid--text{grid-template-columns:1fr}
.lb-hero-grid--two-thirds .lb-hero-body{max-width:66.667%}
.lb-hero-grid--full .lb-hero-body{max-width:none}
.lb-hero-note{font-size:var(--fs-caption);color:var(--c-text-subtle);line-height:1.5;margin:var(--hero-gap-note) 0 0;max-width:90ch}
.lb-hero-note--normal{font-size:var(--fs-body);color:var(--c-text)}
@media(max-width:860px){.lb-hero-grid--two-thirds .lb-hero-body{max-width:none}}
/* Modul-Hero mit Media (21.10.2026): zwei gleich breite Spalten, 64 statt
   96 px Abstand (Media wird größer), Überschrift max. 56 px, damit lange
   Modulnamen in der halben Spalte nicht umbrechen oder überstehen.
   Fußnote optional über ganze Breite unter Text und Media. */
.lb-hero-grid--media{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}
.lb-hero-grid--media h1.lb-hero-title,.lb-hero-grid--media .as-h1.lb-hero-title{font-size:clamp(38px,4.4vw,56px)}
.lb-hero-grid--media .lb-hero-sub{max-width:46ch}
.lb-hero-note-full{margin-top:var(--s7)}
.lb-hero-note-full .lb-hero-note{margin-top:0;max-width:100%}
@media(max-width:860px){
  .lb-hero-grid--media{grid-template-columns:1fr;gap:var(--s7)}
  .lb-hero-note-full{margin-top:var(--s6)}
}

/* ── Feature-Zeilen als reine Textkomponente ── */
.lb-feature--text{grid-template-columns:1fr;gap:0}
.lb-feature--text.lb-feature--w-half{max-width:50%}
.lb-feature--text.lb-feature--w-two-thirds{max-width:66.667%}
.lb-feature--text.lb-feature--w-full{max-width:none}
.lb-feature--text.lb-feature--left{margin-right:auto;text-align:left}
.lb-feature--text.lb-feature--center{margin-left:auto;margin-right:auto;text-align:center}
.lb-feature--text.lb-feature--right{margin-left:auto;text-align:right}
.lb-feature--text.lb-feature--center .kicker-sm{text-align:center}
.lb-features--text .lb-feature + .lb-feature{margin-top:var(--s8)}
@media(max-width:860px){
  .lb-feature--text.lb-feature--w-half,.lb-feature--text.lb-feature--w-two-thirds{max-width:none}
}

/* Vorteile im Überblick: Trennlinien, Hintergrund, Punktgröße */
.vt5f--bg-dark{background:var(--c-neutral-300);border-block-color:var(--c-neutral-400)}
.vt5f--bg-white{background:var(--c-white);border-block:0}
.vt5f--lines .vt5f-list{gap:0 var(--s8)}
.vt5f--lines .vt5f-list li{padding:var(--s4) 0;border-bottom:1px solid var(--c-border-subtle)}
.vt5f--bg-dark.vt5f--lines .vt5f-list li{border-bottom-color:var(--c-neutral-400)}
.vt5f--dot-small .vt5f-list .bullet{width:8px;height:8px;margin-top:8px}
.vt5f--dot-large .vt5f-list .bullet{width:16px;height:16px;margin-top:4px}
@media(max-width:820px){.vt5f--lines .vt5f-list{gap:0}}

/* ── CTA Karte (Dunkel): Kompakt + Outline-Button ── */
.rf2-cta--compact{padding:var(--s7) 0}
.rf2-cta--compact .box{max-width:960px;margin:0 auto;padding:var(--s6) var(--s7);
  grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s7);border-radius:var(--r-card)}
.rf2-cta--compact h2,.rf2-cta--compact .as-h2{font-size:var(--fs-h4);margin-top:var(--s2)}
.rf2-cta--compact p{font-size:var(--fs-body);margin-top:var(--s2)}
.rf2-cta--compact .btnn{padding:12px 22px;font-size:var(--fs-body)}
.rf2-cta .btnn--outline{background:transparent;border:1.5px solid var(--c-white);color:var(--c-white)}
.rf2-cta .btnn--outline:hover{background:var(--c-white);color:var(--c-base)}
@media(max-width:860px){.rf2-cta--compact .box{grid-template-columns:1fr;row-gap:var(--s5)}}
@media(max-width:640px){.rf2-cta--compact .box{padding:var(--s5)}}

/* ── Ablauf-Schritte: 2 Karten pro Zeile ── */
.ab5f-grid--2{grid-template-columns:repeat(2,1fr);gap:var(--s6);max-width:920px}
.ab5f-grid--2 .ab5f-card{padding:var(--s7)}
.ab5f-grid--2.ab5f-grid--wide{max-width:var(--wrap-in)}
@media(max-width:820px){.ab5f-grid--2{grid-template-columns:1fr}}

/* ── Testimonials: eine einzelne Stimme (zentriert, ohne Punkte) ── */
.tcar--single .tcar-viewport{overflow:visible;scroll-snap-type:none}
.tcar--single .tcar-track{justify-content:center}
.tcar--single .tcar-card{flex:0 1 auto;width:100%}
.tcar--single-half .tcar-card{max-width:calc((100% - var(--s5))/2)}
.tcar--single-third .tcar-card{max-width:calc((100% - 2*var(--s5))/3)}
@media(max-width:960px){.tcar--single-third .tcar-card{max-width:calc((100% - var(--s5))/2)}}
@media(max-width:640px){.tcar--single .tcar-card{max-width:none}}

/* ── Kernfunktionen-Karten: Grafik zwischen Kopf und Karten ── */
.kk5f-media{margin:0 auto var(--s7)}
.kk5f-media img{display:block;width:100%;height:auto}

/* ── Zielgruppen-Karten: Ausrichtung Icon + Text ── */
.zg5f-grid--center .zg5f-card{align-items:center;text-align:center}
.zg5f-grid--right .zg5f-card{align-items:flex-end;text-align:right}

/* ── FAQ: Trennlinie oder Boxed (Widget-Control „Darstellung") ── */
.faq--line .faq-item{border-bottom:1px solid var(--c-border-subtle)}
.faq--line .faq-item:first-child{border-top:1px solid var(--c-border-subtle)}
.faq--boxed .faq-list{display:flex;flex-direction:column;gap:var(--s3)}
.faq--boxed .faq-item{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);background:var(--c-white);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.faq--boxed .faq-item:hover,.faq--boxed .faq-item.open{border-color:var(--c-border);box-shadow:var(--sh-1)}
/* Spezifität 0,3,0 — schlägt den Kit-Guard (.faq .faq-q:hover …), der
   sonst beim Hover das Padding auf „var(--s5) 0" zurücksetzt. */
.faq--boxed .faq-q,.faq--boxed .faq-q:hover,.faq--boxed .faq-q:focus,.faq--boxed .faq-q:active{padding:var(--s4) var(--s5)}
.faq--boxed .faq-q:focus-visible{outline-offset:-4px;border-radius:var(--r-card)}
.faq--boxed .faq-a p{padding:0 var(--s5) var(--s5)}
.faq--boxed .faq-a ul,.faq--boxed .faq-a ol{margin:0 var(--s5) 0.9rem calc(var(--s5) + 1.25em);padding-left:0}
.faq--boxed .faq-a > :not(:last-child){padding-bottom:var(--s3)}
/* Boxed zeigt ein Chevron (Entwurf „Beispiel Boxed"), Trennlinie das Plus.
   Das Widget rendert das passende Icon; hier nur die Drehung. */
.faq--boxed .faq-q svg{transform:rotate(0)}
.faq--boxed .faq-item.open .faq-q svg{transform:rotate(180deg)}

/* ── Grundfunktionen-Karussell: optionaler CTA darunter ── */
.features-cta{text-align:center;margin-top:var(--s6)}
.features-cta .btn--ghost{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-semibold)}

/* ── Header: Login-Link + breiteres „Lösungen"-Panel ── */
.nav-login{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-subline);font-weight:var(--fw-medium-2);
  color:var(--c-base);text-decoration:none;padding:6px 2px;transition:color var(--dur) var(--ease)}
.nav-login:hover{color:var(--c-primary)}
.nav-login:focus-visible{outline:2px solid var(--c-primary);outline-offset:3px;border-radius:4px}
.drawer-login{display:block;padding:14px 0;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);
  color:var(--c-base);text-decoration:none;border-bottom:1px solid var(--c-neutral-300)}
/* Panel mit Gruppen (2 Spalten): Mindestbreite hoch, Gruppentitel ohne
   Umbruch → „Für Organisationen" bleibt einzeilig. */
.nav-panel:has(.panel-group){min-width:560px;gap:var(--s7)}
.nav-panel .panel-group h5,.nav-panel .panel-group .as-h5{white-space:nowrap}
.nav-panel .panel-group{min-width:0}
@media(max-width:768px){.nav-login{display:none}}

/* =================================================================
   NEU · 5F · Kennzahlen (kz5f) — aus der Sicherheit-Komponente gelöst,
   bis zu vier Zahlen. Optik = bisherige Stat-Zeile.
   ================================================================= */
.kz5f{padding:var(--s9) var(--s5)}
.kz5f--grey{background:var(--c-bg-subtle)}
.kz5f-in{max-width:var(--wrap-in);margin:0 auto}
.kz5f-head{max-width:640px;margin-bottom:var(--s7)}
.kz5f-head h2,.kz5f-head h3,.kz5f-head h4,.kz5f-head .as-h2,.kz5f-head .as-h3,.kz5f-head .as-h4{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);margin:0;font-variation-settings:"opsz" 32}
.kz5f-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.kz5f--n4 .kz5f-row{grid-template-columns:repeat(4,1fr)}
.kz5f--n2 .kz5f-row{grid-template-columns:repeat(2,1fr)}
.kz5f--n1 .kz5f-row{grid-template-columns:1fr}
.kz5f-stat .num{font-size:clamp(40px,5vw,64px);font-weight:var(--fw-medium-2);letter-spacing:-0.04em;
  line-height:1;color:var(--c-base);font-variation-settings:"opsz" 32;display:flex;align-items:flex-start}
.kz5f-stat .num .unit{font-size:0.42em;color:var(--c-primary);font-weight:var(--fw-medium-2);margin-left:4px;margin-top:0.15em}
.kz5f-stat .label{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.4;margin-top:var(--s4);max-width:22ch;font-weight:var(--fw-regular-2)}
.kz5f--center{text-align:center}
.kz5f--center .kz5f-head{margin-left:auto;margin-right:auto}
.kz5f--center .kz5f-stat .num{justify-content:center}
.kz5f--center .kz5f-stat .label{margin-left:auto;margin-right:auto}
@media(max-width:960px){.kz5f--n4 .kz5f-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .kz5f{padding:var(--s8) var(--s5)}
  .kz5f-row,.kz5f--n4 .kz5f-row{grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
}
@media(max-width:520px){.kz5f-row,.kz5f--n4 .kz5f-row,.kz5f--n2 .kz5f-row{grid-template-columns:1fr}}

/* =================================================================
   NEU · 5F · Solo-Media (sm5f) — Grafik/Mockup mit Bildunterschrift,
   Breite 1/2 · 2/3 · voll, Ausrichtung links/mittig/rechts.
   Wird auch von Kernfunktionen-Karten (Grafik zwischen Kopf und
   Karten) genutzt.
   ================================================================= */
.sm5f{display:block;margin:0 auto;max-width:var(--wrap);padding:0}
.sm5f--sp-normal{margin-top:var(--s6);margin-bottom:var(--s6)}
.sm5f--sp-large{margin-top:var(--s9);margin-bottom:var(--s9)}
.sm5f--sp-none{margin-top:0;margin-bottom:0}
.sm5f--w-quarter{max-width:min(25%,calc(var(--wrap) * .25))}
.sm5f--w-half{max-width:min(50%,calc(var(--wrap) * .5))}
.sm5f--w-two-thirds{max-width:min(66.667%,calc(var(--wrap) * .6667))}
.sm5f--w-full{max-width:var(--wrap)}
.sm5f--left{margin-left:0;margin-right:auto}
.sm5f--right{margin-left:auto;margin-right:0}
.sm5f--center{margin-left:auto;margin-right:auto}
.sm5f img{display:block;width:100%;height:auto}
.sm5f--frame img{border-radius:var(--r-card-lg);border:1px solid var(--c-border-subtle);box-shadow:var(--sh-2)}
.sm5f a{display:block}
.sm5f a:focus-visible{outline:3px solid var(--c-primary);outline-offset:4px;border-radius:var(--r-card-lg)}
.sm5f figcaption,.sm5f.sm5f figcaption{margin-top:var(--s3);font-size:var(--fs-body-sm);font-style:normal;color:var(--c-text-muted);line-height:1.5;text-align:center}
.sm5f--left figcaption{text-align:left}
.sm5f--right figcaption{text-align:right}
/* Innerhalb der Elementor-Widget-Box: seitliche Luft wie die Sektionen */
.elementor-widget-5f-solo-media .sm5f{padding-left:var(--s5);padding-right:var(--s5)}
@media(max-width:860px){.sm5f--w-half,.sm5f--w-two-thirds{max-width:var(--wrap)}.sm5f--w-quarter{max-width:50%}}

/* =================================================================
   NEU · 5F · SEO/GEO-Block (seo5f) — Einleitung + Tabelle (Lizenz-
   Matrix-Stil, 2–3 Vergleichsspalten) + Beschreibungskachel.
   Lesebreite standard (860px), optional volle Breite.
   ================================================================= */
.seo5f{padding:var(--s9) var(--s5)}
.seo5f-in{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s7)}
.seo5f--full .seo5f-in{max-width:var(--wrap-in)}
.seo5f-title{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:var(--lh-heading);
  margin:0 0 var(--s4);color:var(--c-base);font-variation-settings:"opsz" 32}
.seo5f-subtitle{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.015em;line-height:1.15;
  margin:0 0 var(--s3);color:var(--c-base);font-variation-settings:"opsz" 32}
.seo5f-lead{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;margin:0 0 var(--s5);max-width:70ch}
.seo5f-rich{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.6;max-width:70ch}
.seo5f-rich p{margin:0}
.seo5f-rich p + p,.seo5f-rich ul,.seo5f-rich ol{margin-top:var(--s4)}
.seo5f-rich ul,.seo5f-rich ol{padding-left:1.2em}
.seo5f-rich strong,.seo5f-rich b{font-weight:var(--fw-semibold);color:var(--c-base)}
.seo5f-rich--sm{font-size:var(--fs-body-sm)}

/* Tabelle — bewusst dieselben Rezepte wie .matrix (Kopf unten bündig,
   feine Zeilenlinien, Punkt/Strich/Notiz/Wert), ohne Band und ohne
   Preis/CTA-Kopf. table-layout:auto → Textspalten dürfen atmen. */
.seo5f-tablewrap{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card-lg);
  padding:var(--s5) var(--s6) var(--s4);box-shadow:var(--sh-1)}
.seo5f-matrix.seo5f-matrix{width:100%;border-collapse:collapse;border-spacing:0;border:0;background:transparent;table-layout:fixed}
.seo5f-matrix.seo5f-matrix thead th,.seo5f-matrix.seo5f-matrix tbody td,.seo5f-matrix.seo5f-matrix tbody th{border:0;background:transparent;box-shadow:none}
.seo5f-matrix col.col-feat{width:30%}
.seo5f-matrix--c2 col.col-tier{width:35%}
.seo5f-matrix--c3 col.col-tier{width:23.333%}
.seo5f-matrix thead th{vertical-align:bottom;text-align:left;padding:var(--s3) var(--s4) var(--s4);
  border-bottom:1px solid var(--c-border)}
.seo5f-matrix thead th:first-child{padding-left:0}
.seo5f-matrix thead .tier-name{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--c-base);line-height:1.3}
.seo5f-matrix thead .feat-head{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted)}
.seo5f-matrix thead .tier-head.featured .tier-name{color:var(--c-primary)}
.seo5f-matrix .feat-row th,.seo5f-matrix .feat-row td{padding:14px var(--s4);border-bottom:1px solid var(--c-border-subtle);
  font-size:var(--fs-body-sm);vertical-align:top;text-align:left;line-height:1.45}
.seo5f-matrix .feat-row th{padding-left:0}
.seo5f-matrix .feat-row:last-child th,.seo5f-matrix .feat-row:last-child td{border-bottom:0}
.seo5f-matrix .feat-name{color:var(--c-base);font-weight:var(--fw-semibold)}
.seo5f-matrix .cell{color:var(--c-text-muted)}
.seo5f-matrix .cell .val{color:var(--c-text-muted);font-weight:var(--fw-regular-2)}
.seo5f-matrix .cell.featured .val{color:var(--c-base);font-weight:var(--fw-medium)}
.seo5f-matrix .cell .dot-inc{width:8px;height:8px;border-radius:50%;background:var(--c-primary);display:inline-block;vertical-align:middle}
.seo5f-matrix .cell .dash{display:inline-block;width:12px;height:1.5px;background:var(--c-neutral-400);border-radius:2px;vertical-align:middle}
.seo5f-matrix .cell .note{color:var(--c-text-muted);font-size:var(--fs-caption)}
/* Alle-Spalten-gleich (highlight=0): Werte einheitlich dunkel */
.seo5f-matrix:not(:has(.cell.featured)) .cell .val{color:var(--c-base)}

/* Beschreibungskachel */
.seo5f-box{background:var(--c-bg-subtle);border-radius:var(--r-card);padding:var(--s6);max-width:66.667%}
.seo5f-box--full{max-width:none}
.seo5f-box-title{font-size:var(--fs-body-lg);font-weight:var(--fw-semibold);letter-spacing:-0.01em;line-height:1.25;
  margin:0 0 var(--s3);color:var(--c-base)}
.seo5f-box .seo5f-rich{max-width:none}

@media(max-width:860px){
  .seo5f{padding:var(--s8) var(--s5)}
  .seo5f-box{max-width:none}
}
@media(max-width:640px){
  .seo5f-tablewrap{padding:var(--s4) var(--s4) var(--s2)}
  .seo5f-matrix col{width:auto!important}
  .seo5f-matrix,.seo5f-matrix thead,.seo5f-matrix tbody,.seo5f-matrix th,.seo5f-matrix td,.seo5f-matrix tr{display:block}
  .seo5f-matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .seo5f-matrix .feat-row{padding:var(--s3) 0;border-bottom:1px solid var(--c-border-subtle)}
  .seo5f-matrix .feat-row:last-child{border-bottom:0}
  .seo5f-matrix .feat-row th,.seo5f-matrix .feat-row td{padding:4px 0;border-bottom:0}
  .seo5f-matrix .feat-row th{font-size:var(--fs-body);margin-bottom:4px}
  .seo5f-matrix .feat-row .cell{display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:var(--s3);align-items:start}
  .seo5f-matrix .feat-row .cell::before{content:attr(data-tier);font-size:var(--fs-caption);color:var(--c-text-muted);line-height:1.4}
  .seo5f-matrix .cell.featured::before{color:var(--c-primary);font-weight:var(--fw-semibold)}
}


/* =================================================================
   Runde 2 · Theme 1.9.0 / Plugin 1.40.0
   ================================================================= */

/* FAQ: Umbruch langer Fragen, Breite */
.faq .faq-q,.faq .faq-q:hover,.faq .faq-q:focus,.faq .faq-q:active{white-space:normal;min-width:0;overflow-wrap:anywhere}
.faq--w-two-thirds .faq-list{max-width:66.667%}
.faq--w-full .faq-list{max-width:none}
@media(max-width:860px){.faq--w-two-thirds .faq-list{max-width:none}}

/* Heros: Textbreite, Eyebrow-Stile, Fußnote */
.hw-half{max-width:50%}
.hw-two-thirds{max-width:66.667%}
.hw-full{max-width:none}
.hero-note{font-size:var(--fs-caption);color:var(--c-text-subtle);line-height:1.5;margin:var(--hero-gap-note) 0 0;max-width:90ch}
/* Zentrierte Heros: Fußnote als Block mittig */
.hero5f--a .hero5f-note,.hero5f--pill .hero5f-note,.lzhero .hero-note{margin-left:auto;margin-right:auto}
@media(max-width:768px){.hero5f--b .hero5f-note{margin-left:auto;margin-right:auto}}
/* 5F Hero, Schalter note_full: Fußnote nach dem Textblock über die ganze
   Inhaltsbreite, über dem Punktraster; Variante A stapelt in Spalte. */
.hero5f--a.hero5f--note-full{flex-direction:column}
.hero5f-note-full{position:relative;z-index:2;width:100%;max-width:var(--wrap-in);margin:var(--hero-gap-note) auto 0}
.hero5f-note-full .hero5f-note{max-width:100%;margin-top:0}
.hero-note--normal,.hero5f-note--normal,.lb-hero-note--normal{font-size:var(--fs-body);color:var(--c-text)}
.hero5f-eyebrow--pill{display:inline-flex;background:rgba(67,45,244,0.08);color:var(--c-primary);border-radius:var(--r-pill);padding:6px 14px;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--hero-gap-pill);vertical-align:top}
.hero5f-content.hw-half,.hero5f-content.hw-two-thirds{margin-left:auto;margin-right:auto}
.hero5f--b .hero5f-content.hw-half,.hero5f--b .hero5f-content.hw-two-thirds{margin-left:0}
.hero5f--a .hero5f-content.hw-full,.hero5f--pill .hero5f-content.hw-full{max-width:var(--wrap-in)}
.hero5f--a .hero5f-content.hw-half{max-width:min(50%,var(--wrap))}
.hero5f--a .hero5f-content.hw-two-thirds{max-width:min(66.667%,var(--wrap))}
.hero5f--pill .hero5f-content.hw-half{max-width:min(50%,var(--wrap))}
.hero5f--pill .hero5f-content.hw-two-thirds{max-width:min(66.667%,var(--wrap))}
/* Mit gewählter Breite steuert der Textblock; Titel und Subline behalten
   trotzdem eine lesbare Zeilenlänge (auch bei „Volle Breite"). */
.hero5f .hero5f-content:is(.hw-half,.hw-two-thirds,.hw-full) :is(h1,.as-h1){max-width:22ch}
/* H1-Größe wählbar (Widget „Überschrift: Größe") */
.hero5f.hero5f--t-large :is(h1,.as-h1){font-size:clamp(44px,6.4vw,92px);max-width:18ch}
.hero5f.hero5f--t-xlarge :is(h1,.as-h1){font-size:clamp(48px,7.4vw,112px);max-width:20ch}
@media(max-width:640px){
  .hero5f.hero5f--t-large :is(h1,.as-h1){font-size:clamp(40px,11vw,52px)}
  .hero5f.hero5f--t-xlarge :is(h1,.as-h1){font-size:clamp(42px,12.5vw,60px)}
}
.hero5f.hero5f--t-large .hero5f-content:is(.hw-half,.hw-two-thirds,.hw-full) :is(h1,.as-h1),
.hero5f.hero5f--t-xlarge .hero5f-content:is(.hw-half,.hw-two-thirds,.hw-full) :is(h1,.as-h1){max-width:24ch}
.hero5f .hero5f-content:is(.hw-half,.hw-two-thirds,.hw-full) .hero5f-sub{max-width:60ch}
.hero-inner-body{min-width:0}
.hero-inner.no-image .hero-inner-body.hw-half{max-width:50%}
.hero-inner.no-image .hero-inner-body.hw-two-thirds{max-width:66.667%}
.hero-inner.no-image .hero-inner-body.hw-full{max-width:none}
.hero-inner .hero-inner-body .crumbs{margin-bottom:var(--hero-gap-crumbs)}
.hero-inner .hero-inner-body .pill-wrap{display:flex;margin-bottom:var(--hero-gap-eyebrow)}
.hero-inner .hero-inner-body .pill-wrap:has(> .pill){margin-bottom:var(--hero-gap-pill)}
.hero-inner .hero-inner-body .pill-wrap .eyebrow{display:inline-block}
.hero-inner .hero-inner-body .as-h1,.hero-inner .hero-inner-body .as-h2{margin:0}
.hero-inner .hero-inner-body p{margin:0}
.hero-inner .hero-inner-body :is(h1,h2,h3,h4,h5,h6) + p{margin-top:var(--hero-gap-lead)}
.hero-inner .hero-inner-body .actions{margin-top:var(--hero-gap-actions)}
/* Die Option „Breite des Textblocks" steuert den Block; mit Bild die Spaltenaufteilung
   (Volle Breite = Bild darunter). Titel und Text behalten eine lesbare Zeilenlänge. */
.hero-inner .hero-inner-body :is(h1,h2,.as-h1,.as-h2){max-width:22ch}
.hero-inner .hero-inner-body p{max-width:60ch}
.hero-inner--center .hero-inner-body :is(h1,h2,.as-h1,.as-h2,p){margin-left:auto;margin-right:auto}
@media(min-width:769px){
  .hero-inner:not(.no-image):has(> .hero-inner-body.hw-half){grid-template-columns:1fr 1fr}
  .hero-inner:not(.no-image):has(> .hero-inner-body.hw-two-thirds){grid-template-columns:2fr 1fr}
  .hero-inner:not(.no-image):has(> .hero-inner-body.hw-full){grid-template-columns:1fr}
  .hero-inner:not(.no-image) > .hero-inner-body{max-width:none}}
/* Fußnote: eigene Größe gegen .hero-inner p, heller als der Fließtext. */
.hero-inner .hero-inner-body .hero-note{margin-top:var(--hero-gap-note);font-size:var(--fs-caption);line-height:1.5;color:var(--c-text-subtle)}
.hero-inner .hero-inner-body .hero-note--normal{font-size:var(--fs-body)}
.hero-inner--center .hero-inner-body{margin-left:auto;margin-right:auto}
.lb-hero-grid--text .lb-hero-body.hw-full{max-width:none}
.lb-hero-grid--text .lb-hero-body.hw-half{max-width:50%}
.lb-hero-grid--text .lb-hero-body.hw-two-thirds{max-width:66.667%}
.lb-hero-grid:not(.lb-hero-grid--text) .lb-hero-body{max-width:none}
.lb-hero-body .lb-eyebrow{display:block;margin-bottom:var(--hero-gap-eyebrow)}
.lzhero .pill{margin-bottom:var(--hero-gap-pill);vertical-align:top}
.lzhero.hw-half,.lzhero.hw-two-thirds{margin-left:auto;margin-right:auto}
.lzhero.hw-half{max-width:50%}
.lzhero.hw-two-thirds{max-width:66.667%}
.rf2-hero .pill{display:inline-flex;vertical-align:top;margin-bottom:var(--hero-gap-pill)}
.rf2-hero .grid.hw-half{max-width:50%}
.rf2-hero .grid.hw-two-thirds{max-width:66.667%}
@media(max-width:860px){
  .hw-half,.hw-two-thirds,.hero-inner.no-image .hero-inner-body.hw-half,.hero-inner.no-image .hero-inner-body.hw-two-thirds,
  .lb-hero-grid--text .lb-hero-body.hw-half,.lb-hero-grid--text .lb-hero-body.hw-two-thirds,.lzhero.hw-half,.lzhero.hw-two-thirds,
  .rf2-hero .grid.hw-half,.rf2-hero .grid.hw-two-thirds,.hero5f--a .hero5f-content.hw-half,.hero5f--a .hero5f-content.hw-two-thirds,.hero5f--pill .hero5f-content.hw-half,.hero5f--pill .hero5f-content.hw-two-thirds{max-width:none}
}

/* Bulletpoints: Farbe und Größe über Variablen (Widget-Control) */
.vt5f-list .bullet{width:calc(12px * var(--fivef-bullet-scale,1));height:calc(12px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.lb-benefit::before{width:calc(9px * var(--fivef-bullet-scale,1));height:calc(9px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.sb5f-list .bullet{width:calc(9px * var(--fivef-bullet-scale,1));height:calc(9px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.fact-ribbon li::before{width:calc(6px * var(--fivef-bullet-scale,1));height:calc(6px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.ak5f-list li::before{width:calc(10px * var(--fivef-bullet-scale,1));height:calc(10px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.icard li::before{width:calc(7px * var(--fivef-bullet-scale,1));height:calc(7px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.vb2-einsatz li::before{width:calc(9px * var(--fivef-bullet-scale,1));height:calc(9px * var(--fivef-bullet-scale,1));background:var(--fivef-bullet,var(--c-primary))}
.sb5f--dark .sb5f-list .bullet{background:var(--fivef-bullet,var(--c-primary-t2))}

/* Mega-Panel: mehr Luft */
.nav-panel:has(.panel-group){padding:var(--s6) var(--s7);gap:var(--s8);min-width:620px}
.nav-panel .panel-group h5,.nav-panel .panel-group .as-h5{margin-bottom:var(--s4)}
.nav-panel .panel-group a{padding:9px 0}

/* Sicherheit: 1 bis 4 Kennzahlen in einer Zeile */
.sicherheit-demo .stat-row--n4{grid-template-columns:repeat(4,1fr)}
.sicherheit-demo .stat-row--n2{grid-template-columns:repeat(2,1fr)}
.sicherheit-demo .stat-row--n1{grid-template-columns:1fr}
.sicherheit-demo .seals + .stat-row{margin-top:var(--s8)}
@media(max-width:960px){.sicherheit-demo .stat-row--n4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sicherheit-demo .stat-row--n4,.sicherheit-demo .stat-row--n2{grid-template-columns:1fr}}

/* Sektionskopf (Partner-Karten u. a.): Breite, Text */
.section-head--two-thirds{max-width:66.667%}
.section-head--full{max-width:none}
.section-head .lead + .lead{margin-top:var(--s3)}
@media(max-width:860px){.section-head--two-thirds{max-width:none}}

/* Region-Hinweis (CH/LI) */
.rg5f{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.rg5f-note{background:var(--c-bg-subtle);border-top:1px solid var(--c-border-subtle);border-bottom:1px solid var(--c-border-subtle);
  padding:var(--s3) var(--s5);text-align:center;font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.5;margin:0}
.rg5f-note a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.rg5f-banner{background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:var(--r-card);box-shadow:var(--sh-2);
  padding:var(--s5) var(--s6);margin:var(--s4) 0 0;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.rg5f-banner[hidden]{display:none}
.rg5f-banner-text{margin:0;font-size:var(--fs-body-lg);color:var(--c-base);line-height:1.45;flex:1 1 320px}
.rg5f-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.rg5f-actions .btn5f{padding:10px 20px;font-size:var(--fs-body-sm)}
.rg5f-actions .btn--ghost{background:none;border:0;font:inherit;font-weight:var(--fw-medium-2);color:var(--c-base);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.rg5f-actions .btn--ghost:hover{color:var(--c-primary)}
.rg5f-close{width:36px;height:36px;display:grid;place-items:center;background:none;border:0;border-radius:var(--r-pill);color:var(--c-text-muted);cursor:pointer;padding:0}
.rg5f-close:hover{background:var(--c-bg-subtle);color:var(--c-base)}
.rg5f-close:focus-visible,.rg5f-actions .btn--ghost:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
@media(max-width:640px){.rg5f-banner{padding:var(--s4) var(--s5)}}
.rg5f .rg5f-close.rg5f-close,.rg5f .rg5f-close.rg5f-close:focus,.rg5f .rg5f-close.rg5f-close:active{background:none;color:var(--c-text-muted);border:0;box-shadow:none}
.rg5f .rg5f-close.rg5f-close:hover{background:var(--c-bg-subtle);color:var(--c-base)}
.rg5f .btn--ghost.btn--ghost,.rg5f .btn--ghost.btn--ghost:focus,.rg5f .btn--ghost.btn--ghost:active{background:none;color:var(--c-base);border:0;box-shadow:none}
.rg5f .btn--ghost.btn--ghost:hover{background:none;color:var(--c-primary)}

/* Footer: Rhythmus */
.footer{padding:var(--s10) 0 var(--s7)}
.footer-top{gap:var(--s8) var(--s7);margin-bottom:var(--s9);align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:var(--s5);padding-right:var(--s6)}
.footer-brand .custom-logo,.footer-brand .nav-logo-text{margin-bottom:var(--s2)}
.footer-brand .custom-logo-link{display:inline-block;line-height:0}
.footer-brand p{max-width:32ch;font-size:var(--fs-body-sm);line-height:1.6}
.footer .socials{margin-top:var(--s1)}
.footer-badges{margin-top:var(--s3);gap:var(--s5);align-items:center}
.footer-badges.footer-badges img{height:84px;max-width:130px;object-fit:contain}
.footer-col h5,.footer-col .as-h5{font-size:var(--fs-caption);letter-spacing:0.06em;text-transform:uppercase;color:var(--c-base);margin:var(--s2) 0 var(--s5)}
.footer-col ul{display:flex;flex-direction:column;gap:2px}
.footer-col ul a{padding:5px 0;line-height:1.4;color:var(--c-text-muted)}
.footer-col ul a:hover{color:var(--c-primary)}
.footer .footer-legal{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--s5);flex-wrap:wrap;
  border-top:1px solid var(--c-border-subtle);padding-top:var(--s6);font-size:var(--fs-caption);color:var(--c-text-muted)}
.footer .legal-chips{gap:var(--s5)}
@media(max-width:768px){
  .footer{padding:var(--s9) 0 var(--s7)}
  .footer-top{gap:var(--s7) var(--s6)}
  .footer-brand{padding-right:0}
  .footer .footer-legal{flex-direction:column;align-items:flex-start;gap:var(--s4)}
}
.infra-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:860px){.infra-grid{grid-template-columns:minmax(0,1fr)}}
.icard{min-width:0}
.icard .as-h3,.icard h3{overflow-wrap:anywhere}
@media(max-width:480px){.chead{flex-wrap:wrap}}
.icard .kpill{white-space:normal;max-width:100%}

/* SEO/GEO-Tabelle: sichtbare Zeilenlinien (schlägt den Reset oben) */
.seo5f-matrix.seo5f-matrix thead th{border-bottom:1px solid var(--c-neutral-400)}
.seo5f-matrix.seo5f-matrix tbody .feat-row th,.seo5f-matrix.seo5f-matrix tbody .feat-row td{border-bottom:1px solid var(--c-neutral-300);padding-top:12px;padding-bottom:12px}
.seo5f-matrix.seo5f-matrix tbody .feat-row:last-child th,.seo5f-matrix.seo5f-matrix tbody .feat-row:last-child td{border-bottom:0}

/* SEO/GEO-Tabelle · Feedback 22.09
   — mehr Luft zwischen Titel und Tabelle,
   — kein Zeilen-Hover (die Tabelle ist nicht klickbar),
   — hervorgehobene Spalte als gerahmte, getönte Karte in der Tabelle.
   Der Rahmen entsteht aus inset-Schatten an den Zellen (links/rechts
   durchgehend, oben am Kopf, unten an der letzten Zeile) — eine echte
   Spalte kann man nicht umranden, <col> nimmt weder Rahmen noch Radius. */
.seo5f-tablewrap{margin-top:var(--s6)}
.seo5f-matrix.seo5f-matrix .featured{background:var(--c-tint-2);
  box-shadow:inset 1px 0 0 var(--c-primary),inset -1px 0 0 var(--c-primary)}
.seo5f-matrix.seo5f-matrix thead .tier-head.featured{
  box-shadow:inset 1px 0 0 var(--c-primary),inset -1px 0 0 var(--c-primary),inset 0 1px 0 var(--c-primary);
  border-top-left-radius:var(--r-card);border-top-right-radius:var(--r-card);
  border-bottom-color:var(--c-primary-t2)}
.seo5f-matrix.seo5f-matrix tbody .feat-row:last-child .cell.featured{
  box-shadow:inset 1px 0 0 var(--c-primary),inset -1px 0 0 var(--c-primary),inset 0 -1px 0 var(--c-primary);
  border-bottom-left-radius:var(--r-card);border-bottom-right-radius:var(--r-card)}
/* Zeilenlinien in der Karte heller, damit sie den Rahmen nicht zerschneiden. */
.seo5f-matrix.seo5f-matrix tbody .feat-row .cell.featured{border-bottom-color:var(--c-primary-t2)}
/* Luft zum Rahmen. */
.seo5f-matrix.seo5f-matrix thead .tier-head.featured,
.seo5f-matrix.seo5f-matrix tbody .cell.featured{padding-left:var(--s5);padding-right:var(--s5)}
.seo5f-matrix.seo5f-matrix thead .tier-head.featured{padding-top:var(--s4)}
.seo5f-matrix.seo5f-matrix tbody .feat-row:last-child .cell.featured{padding-bottom:var(--s5)}
/* Mobil ist die Tabelle gestapelt — dort kein Rahmen, nur die violette Zeile. */
@media(max-width:640px){
  .seo5f-matrix.seo5f-matrix .featured,
  .seo5f-matrix.seo5f-matrix tbody .feat-row:last-child .cell.featured{
    background:transparent;box-shadow:none;border-radius:0;
    padding-left:0;padding-right:0;padding-bottom:4px}
}

/* Größenstufen der gewählten Überschriften-Ebene (hs-hN, gesetzt von fivef_h,
   wenn die Ebene vom Design-Tag abweicht). Dreifache Klasse schlägt jede
   Widget-Regel mit zwei Klassen. */
.hs-h1.hs-h1.hs-h1{font-size:var(--fs-h1);letter-spacing:var(--ls-h1);line-height:var(--lh-heading)}
.hs-h2.hs-h2.hs-h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-heading)}
.hs-h3.hs-h3.hs-h3{font-size:var(--fs-h3);letter-spacing:var(--ls-h3);line-height:1.1}
.hs-h4.hs-h4.hs-h4{font-size:var(--fs-h4);letter-spacing:-0.012em;line-height:1.15}
.hs-h5.hs-h5.hs-h5{font-size:var(--fs-h5);letter-spacing:-0.008em;line-height:1.25}
.hs-h6.hs-h6.hs-h6{font-size:var(--fs-h6);letter-spacing:-0.005em;line-height:1.3}
[class*="hs-h"]{overflow-wrap:break-word;hyphens:auto}
.icard ul,.icard ul li{list-style:none}
.icard ul li::marker{content:""}
.icard.icard li::before{border-radius:50%;box-sizing:border-box;border:0}

/* Abschnitts-Rhythmus */
:root{--sec-y:clamp(48px,calc(31px + 4.5vw),96px);--sec-y-s:clamp(24px,calc(15px + 2.25vw),48px)}
.elementor-widget-5f-ablauf-schritte.elementor-element.elementor-element,
.elementor-widget-5f-aufbau-karten.elementor-element.elementor-element,
.elementor-widget-5f-beitrags-liste.elementor-element.elementor-element,
.elementor-widget-5f-bento.elementor-element.elementor-element,
.elementor-widget-5f-blog-grid.elementor-element.elementor-element,
.elementor-widget-5f-chip-zeilen.elementor-element.elementor-element,
.elementor-widget-5f-cta.elementor-element.elementor-element,
.elementor-widget-5f-cta-dunkel.elementor-element.elementor-element,
.elementor-widget-5f-cta-interaktiv.elementor-element.elementor-element,
.elementor-widget-5f-editorial-intro.elementor-element.elementor-element,
.elementor-widget-5f-einsatz-beispiele.elementor-element.elementor-element,
.elementor-widget-5f-einsatz-karte.elementor-element.elementor-element,
.elementor-widget-5f-extras-grid.elementor-element.elementor-element,
.elementor-widget-5f-fakten.elementor-element.elementor-element,
.elementor-widget-5f-fakten-leiste.elementor-element.elementor-element,
.elementor-widget-5f-faq.elementor-element.elementor-element,
.elementor-widget-5f-feature-tabs.elementor-element.elementor-element,
.elementor-widget-5f-feature-zeilen.elementor-element.elementor-element,
.elementor-widget-5f-features.elementor-element.elementor-element,
.elementor-widget-5f-funktionsliste.elementor-element.elementor-element,
.elementor-widget-5f-gf-scroller.elementor-element.elementor-element,
.elementor-widget-5f-hero.elementor-element.elementor-element,
.elementor-widget-5f-inner-hero.elementor-element.elementor-element,
.elementor-widget-5f-kennzahlen.elementor-element.elementor-element,
.elementor-widget-5f-kernfunktionen-karten.elementor-element.elementor-element,
.elementor-widget-5f-kontakt.elementor-element.elementor-element,
.elementor-widget-5f-kontakt-termin.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-hero.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-karten.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-matrix.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-uebersicht.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-vergleich.elementor-element.elementor-element,
.elementor-widget-5f-logo-raster.elementor-element.elementor-element,
.elementor-widget-5f-app-download.elementor-element.elementor-element,
.elementor-widget-5f-team-abschnitt.elementor-element.elementor-element,
.elementor-widget-5f-einordnung.elementor-element.elementor-element,
.elementor-widget-5f-ausgangslage.elementor-element.elementor-element,
.elementor-widget-5f-logo-zeile.elementor-element.elementor-element,
.elementor-widget-5f-mediathek.elementor-element.elementor-element,
.elementor-widget-5f-mission.elementor-element.elementor-element,
.elementor-widget-5f-modul-hero.elementor-element.elementor-element,
.elementor-widget-5f-modul-karten.elementor-element.elementor-element,
.elementor-widget-5f-newsletter.elementor-element.elementor-element,
.elementor-widget-5f-newsletter-zeile.elementor-element.elementor-element,
.elementor-widget-5f-nummern-schritte.elementor-element.elementor-element,
.elementor-widget-5f-partner-karten.elementor-element.elementor-element,
.elementor-widget-5f-raster-trenner.elementor-element.elementor-element,
.elementor-widget-5f-referenzen-hero.elementor-element.elementor-element,
.elementor-widget-5f-region-hinweis.elementor-element.elementor-element,
.elementor-widget-5f-schritte.elementor-element.elementor-element,
.elementor-widget-5f-seo-block.elementor-element.elementor-element,
.elementor-widget-5f-sicherheit.elementor-element.elementor-element,
.elementor-widget-5f-solo-media.elementor-element.elementor-element,
.elementor-widget-5f-split-bullets.elementor-element.elementor-element,
.elementor-widget-5f-standards-wand.elementor-element.elementor-element,
.elementor-widget-5f-stellen.elementor-element.elementor-element,
.elementor-widget-5f-stimmen.elementor-element.elementor-element,
.elementor-widget-5f-team.elementor-element.elementor-element,
.elementor-widget-5f-testimonials.elementor-element.elementor-element,
.elementor-widget-5f-tiers.elementor-element.elementor-element,
.elementor-widget-5f-trust-bar.elementor-element.elementor-element,
.elementor-widget-5f-use-case-liste.elementor-element.elementor-element,
.elementor-widget-5f-vorteile.elementor-element.elementor-element,
.elementor-widget-5f-vorteile-liste.elementor-element.elementor-element,
.elementor-widget-5f-werte.elementor-element.elementor-element,
.elementor-widget-5f-wissen.elementor-element.elementor-element,
.elementor-widget-5f-zielgruppen-karten.elementor-element.elementor-element,
.elementor-widget-5f-zugriff-beweis.elementor-element.elementor-element{--fx-top:var(--sec-y);--fx-bot:0px;margin-block:0;width:100%;min-width:0}
.elementor-widget-5f-fakten-leiste.elementor-element.elementor-element,
.elementor-widget-5f-trust-bar.elementor-element.elementor-element,
.elementor-widget-5f-raster-trenner.elementor-element.elementor-element,
.elementor-widget-5f-lizenz-karten.elementor-element.elementor-element{--fx-top:var(--sec-y-s)}
.elementor-widget-5f-region-hinweis.elementor-element.elementor-element{--fx-top:0px}
.elementor-element.elementor-element.fx-top--none{--fx-top:0px}
.elementor-element.elementor-element.fx-top--s{--fx-top:var(--sec-y-s)}
.elementor-element.elementor-element.fx-top--m{--fx-top:var(--sec-y)}
.elementor-element.elementor-element.fx-bot--none{--fx-bot:0px}
.elementor-element.elementor-element.fx-bot--s{--fx-bot:var(--sec-y-s)}
.elementor-element.elementor-element.fx-bot--m{--fx-bot:var(--sec-y)}
/* 5F Hero: der Abstand zum nächsten Abschnitt liegt im Hero, damit das
   Punktraster bis an den nächsten Abschnitt reicht statt über einem weißen
   Streifen zu enden. Gleich groß wie der obere Abstand des nächsten Widgets
   (Trust-Bar, Fakten-Leiste, Raster-Trenner, Lizenz-Karten klein, Region-
   Hinweis ohne, sonst normal); dessen oberer Abstand fällt weg. Gilt im
   selben Container und über die Container-Grenze. Ein im Hero gewählter
   „Abstand unten" bleibt wie bisher. */
.elementor-widget-5f-hero.elementor-element.elementor-element:not(.fx-bot--none,.fx-bot--s,.fx-bot--m){--fx-bot:var(--sec-y)}
.elementor-widget-5f-hero.elementor-element.elementor-element:not(.fx-bot--none,.fx-bot--s,.fx-bot--m):has(+ :is(.elementor-widget-5f-trust-bar,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-lizenz-karten,.fx-top--s)),
.e-con:has(+ .e-con > :is(.elementor-widget-5f-trust-bar,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-lizenz-karten,.fx-top--s):first-child,+ .e-con > .e-con-inner > :is(.elementor-widget-5f-trust-bar,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-lizenz-karten,.fx-top--s):first-child) > .elementor-widget-5f-hero.elementor-element.elementor-element:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m),
.e-con:has(+ .e-con > :is(.elementor-widget-5f-trust-bar,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-lizenz-karten,.fx-top--s):first-child,+ .e-con > .e-con-inner > :is(.elementor-widget-5f-trust-bar,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-lizenz-karten,.fx-top--s):first-child) > .e-con-inner > .elementor-widget-5f-hero.elementor-element.elementor-element:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m){--fx-bot:var(--sec-y-s)}
.elementor-widget-5f-hero.elementor-element.elementor-element:not(.fx-bot--none,.fx-bot--s,.fx-bot--m):has(+ :is(.elementor-widget-5f-region-hinweis,.fx-top--none)){--fx-bot:0px}
.elementor-widget-5f-hero.elementor-element.elementor-element:not(.fx-bot--none,.fx-bot--s,.fx-bot--m) + .elementor-element.elementor-element,
.e-con:has(> .elementor-widget-5f-hero:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m),> .e-con-inner > .elementor-widget-5f-hero:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m)) + .e-con > .elementor-element.elementor-element:first-child,
.e-con:has(> .elementor-widget-5f-hero:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m),> .e-con-inner > .elementor-widget-5f-hero:last-child:not(.fx-bot--none,.fx-bot--s,.fx-bot--m)) + .e-con > .e-con-inner > .elementor-element.elementor-element:first-child{--fx-top:0px}
.e-con.e-con:has(> :is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)):not(:has(> .elementor-element:not(:is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)))),
.e-con.e-con:has(> .e-con-inner > :is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)):not(:has(> .e-con-inner > .elementor-element:not(:is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)))){--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;--gap:0px;--row-gap:0px;padding:0;row-gap:0}
.e-con.e-con:has(> .e-con-inner > :is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)):not(:has(> .e-con-inner > .elementor-element:not(:is(.elementor-widget-5f-ablauf-schritte,.elementor-widget-5f-app-download,.elementor-widget-5f-aufbau-karten,.elementor-widget-5f-beitrags-liste,.elementor-widget-5f-bento,.elementor-widget-5f-blog-grid,.elementor-widget-5f-chip-zeilen,.elementor-widget-5f-cta,.elementor-widget-5f-cta-dunkel,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-editorial-intro,.elementor-widget-5f-einordnung,.elementor-widget-5f-ausgangslage,.elementor-widget-5f-einsatz-beispiele,.elementor-widget-5f-einsatz-karte,.elementor-widget-5f-extras-grid,.elementor-widget-5f-fakten,.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-feature-tabs,.elementor-widget-5f-feature-zeilen,.elementor-widget-5f-features,.elementor-widget-5f-funktionsliste,.elementor-widget-5f-gf-scroller,.elementor-widget-5f-hero,.elementor-widget-5f-inner-hero,.elementor-widget-5f-kennzahlen,.elementor-widget-5f-kernfunktionen-karten,.elementor-widget-5f-kontakt,.elementor-widget-5f-kontakt-termin,.elementor-widget-5f-lizenz-hero,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-lizenz-matrix,.elementor-widget-5f-lizenz-uebersicht,.elementor-widget-5f-lizenz-vergleich,.elementor-widget-5f-logo-raster,.elementor-widget-5f-logo-zeile,.elementor-widget-5f-mediathek,.elementor-widget-5f-mission,.elementor-widget-5f-modul-hero,.elementor-widget-5f-modul-karten,.elementor-widget-5f-newsletter,.elementor-widget-5f-newsletter-zeile,.elementor-widget-5f-nummern-schritte,.elementor-widget-5f-partner-karten,.elementor-widget-5f-raster-trenner,.elementor-widget-5f-referenzen-hero,.elementor-widget-5f-region-hinweis,.elementor-widget-5f-schritte,.elementor-widget-5f-seo-block,.elementor-widget-5f-sicherheit,.elementor-widget-5f-solo-media,.elementor-widget-5f-split-bullets,.elementor-widget-5f-standards-wand,.elementor-widget-5f-stellen,.elementor-widget-5f-stimmen,.elementor-widget-5f-team,.elementor-widget-5f-team-abschnitt,.elementor-widget-5f-testimonials,.elementor-widget-5f-tiers,.elementor-widget-5f-trust-bar,.elementor-widget-5f-use-case-liste,.elementor-widget-5f-vorteile,.elementor-widget-5f-vorteile-liste,.elementor-widget-5f-werte,.elementor-widget-5f-wissen,.elementor-widget-5f-zielgruppen-karten,.elementor-widget-5f-zugriff-beweis)))) > .e-con-inner{padding-top:0;padding-bottom:0;row-gap:0}
.elementor-widget-5f-aufbau-karten.elementor-element .ak5f,
.elementor-widget-5f-beitrags-liste.elementor-element .ls5f,
.elementor-widget-5f-blog-grid.elementor-element .bgrid-sec,
.elementor-widget-5f-chip-zeilen.elementor-element .lb-value,
.elementor-widget-5f-cta.elementor-element .cta5f,
.elementor-widget-5f-cta-dunkel.elementor-element .rf2-cta,
.elementor-widget-5f-cta-interaktiv.elementor-element .cta-a,
.elementor-widget-5f-editorial-intro.elementor-element .vb2-intro,
.elementor-widget-5f-einsatz-beispiele.elementor-element .sb5f,
.elementor-widget-5f-einsatz-karte.elementor-element .vb2-einsatz,
.elementor-widget-5f-extras-grid.elementor-element .x5f,
.elementor-widget-5f-fakten.elementor-element .rf2-facts,
.elementor-widget-5f-faq.elementor-element .faq,
.elementor-widget-5f-feature-zeilen.elementor-element .lb-features,
.elementor-widget-5f-features.elementor-element .features,
.elementor-widget-5f-funktionsliste.elementor-element .fl5f,
.elementor-widget-5f-gf-scroller.elementor-element .kf-scroller,
.elementor-widget-5f-kennzahlen.elementor-element .kz5f:not(.kz5f--grey),
.elementor-widget-5f-kernfunktionen-karten.elementor-element .kk5f,
.elementor-widget-5f-kontakt.elementor-element .kt5f,
.elementor-widget-5f-kontakt-termin.elementor-element .ktm5f,
.elementor-widget-5f-lizenz-karten.elementor-element .summary,
.elementor-widget-5f-lizenz-uebersicht.elementor-element .lz-tiers,
.elementor-widget-5f-logo-raster.elementor-element .lg5f,
.elementor-widget-5f-app-download.elementor-element .qr5f,
.elementor-widget-5f-team-abschnitt.elementor-element .tm5f,
.elementor-widget-5f-einordnung.elementor-element .eo5f,
.elementor-widget-5f-ausgangslage.elementor-element .al5f,
.elementor-widget-5f-logo-zeile.elementor-element .rf2-logos,
.elementor-widget-5f-mediathek.elementor-element .mtk,
.elementor-widget-5f-modul-karten.elementor-element .mc5f,
.elementor-widget-5f-newsletter.elementor-element .nl5f,
.elementor-widget-5f-newsletter-zeile.elementor-element .nlz5f,
.elementor-widget-5f-seo-block.elementor-element .seo5f,
.elementor-widget-5f-sicherheit.elementor-element .sicherheit-demo,
.elementor-widget-5f-split-bullets.elementor-element .sb5f,
.elementor-widget-5f-stellen.elementor-element .stl5f,
.elementor-widget-5f-stimmen.elementor-element .rf2-stories,
.elementor-widget-5f-team.elementor-element .abt5f-team,
.elementor-widget-5f-use-case-liste.elementor-element .ls5f,
.elementor-widget-5f-vorteile-liste.elementor-element .lb-benefits,
.elementor-widget-5f-werte.elementor-element .wrt5f,
.elementor-widget-5f-zielgruppen-karten.elementor-element .zg5f{padding-top:var(--fx-top);padding-bottom:var(--fx-bot);margin-top:0;margin-bottom:0}
.elementor-widget-5f-ablauf-schritte.elementor-element .ab5f,
.elementor-widget-5f-kennzahlen.elementor-element .kz5f--grey,
.elementor-widget-5f-lizenz-vergleich.elementor-element .compare,
.elementor-widget-5f-schritte.elementor-element .st5f,
.elementor-widget-5f-testimonials.elementor-element .tcar,
.elementor-widget-5f-vorteile.elementor-element .vt5f,
.elementor-widget-5f-wissen.elementor-element .blog5f{margin-top:var(--fx-top);margin-bottom:var(--fx-bot)}
.elementor-widget-5f-ablauf-schritte.elementor-element .ab5f,
.elementor-widget-5f-kennzahlen.elementor-element .kz5f--grey,
.elementor-widget-5f-lizenz-vergleich.elementor-element .compare,
.elementor-widget-5f-schritte.elementor-element .st5f,
.elementor-widget-5f-testimonials.elementor-element .tcar,
.elementor-widget-5f-vorteile.elementor-element .vt5f-in,
.elementor-widget-5f-wissen.elementor-element .blog5f{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.elementor-widget-5f-nummern-schritte.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-zugriff-beweis.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-standards-wand.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-tiers.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-feature-tabs.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-partner-karten.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-lizenz-matrix.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-solo-media.elementor-element.elementor-element.elementor-widget.elementor-widget,
.elementor-widget-5f-bento.elementor-element.elementor-element.elementor-widget.elementor-widget{max-width:var(--wrap);margin-inline:auto;padding:var(--fx-top) var(--s5) var(--fx-bot);box-sizing:border-box}
/* Inhaltsbreite = Header (--wrap-in), auch im Container „Volle Breite".
   Nur Widgets ohne eigene Inhaltsbreite, nur in Containern der obersten Ebene. */
:is(.elementor > .e-con,.e-con.e-parent,.elementor > .e-con > .e-con-inner,.e-con.e-parent > .e-con-inner) > :is(.elementor-widget-5f-fakten-leiste,.elementor-widget-5f-faq,.elementor-widget-5f-sicherheit,.elementor-widget-5f-cta-interaktiv,.elementor-widget-5f-lizenz-karten,.elementor-widget-5f-kapitel,.elementor-widget-5f-features).elementor-element.elementor-element{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s5);box-sizing:border-box}
.elementor-widget-5f-nummern-schritte.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-nummern-schritte.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-zugriff-beweis.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-zugriff-beweis.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-standards-wand.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-standards-wand.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-tiers.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-tiers.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-feature-tabs.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-feature-tabs.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-partner-karten.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-partner-karten.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-lizenz-matrix.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-lizenz-matrix.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-solo-media.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-solo-media.elementor-element > :first-child:not(.elementor-widget-container),
.elementor-widget-5f-bento.elementor-element > .elementor-widget-container > :first-child,
.elementor-widget-5f-bento.elementor-element > :first-child:not(.elementor-widget-container){margin-top:0}
.elementor-widget-5f-hero.elementor-element .hero5f,
.elementor-widget-5f-inner-hero.elementor-element .ihero .hero-inner,
.elementor-widget-5f-lizenz-hero.elementor-element .lzhero,
.elementor-widget-5f-mission.elementor-element .abt5f-mission,
.elementor-widget-5f-modul-hero.elementor-element .lb-hero,
.elementor-widget-5f-referenzen-hero.elementor-element .rf2-hero{padding-bottom:var(--fx-bot);margin-bottom:0}
.elementor-widget-5f-fakten-leiste.elementor-element .fact-ribbon,
.elementor-widget-5f-raster-trenner.elementor-element .pr-divider,
.elementor-widget-5f-region-hinweis.elementor-element .rg5f,
.elementor-widget-5f-trust-bar.elementor-element .trust{margin-top:var(--fx-top);margin-bottom:var(--fx-bot)}
.elementor-widget-5f-newsletter-zeile.elementor-element .nlz5f > .bh-sub:first-child{margin-top:0}
.elementor-widget-5f-extras-grid.elementor-element .extras-section{padding-bottom:0}
.elementor-widget-5f-faq.elementor-element .faq{margin-bottom:calc(-1 * var(--s5))}
.elementor-widget-5f-sicherheit.elementor-element .sicherheit-demo--card{margin-top:var(--fx-top);margin-bottom:var(--fx-bot);padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
/* Beitrags-Liste, Use-Case-Liste */
.ls5f{padding:var(--sec-y) 0 0}
.ls5f-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--s5)}
.ls5f-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5) var(--s7);flex-wrap:wrap;margin-bottom:var(--s7)}
.ls5f-top .section-head{margin:0}
.ls5f-all{display:inline-flex;align-items:center;gap:8px;font-weight:var(--fw-medium-2);color:var(--c-primary);white-space:nowrap;text-decoration:none}
.ls5f-all svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.ls5f a.ls5f-all:hover{color:#3520d4;text-decoration:none}
.ls5f a.ls5f-all:hover svg{transform:translateX(3px)}
.ls5f a.ls5f-all:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:4px}
.ls5f-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s7) var(--s6)}
.ls5f-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ls5f-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ls5f .fpost5f .media{position:relative}
.ls5f .fpost5f .media--icon{background:var(--c-bg-subtle)}
.ls5f .fpost5f .excerpt{margin:var(--s2) 0 0;font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55}
.ls5f .post5f{background:transparent;border-radius:0;overflow:visible}
.ls5f .post5f:hover{transform:none;box-shadow:none}
.ls5f .post5f-video{border-radius:var(--r-card);border-bottom:0}
.ls5f .post5f-body{padding:var(--s4) 0 0}
.ls5f .post5f-body h3,.ls5f .post5f-body .as-h3{font-size:var(--fs-body-lg);letter-spacing:-0.01em;line-height:1.3;margin-bottom:var(--s2)}
.ls5f .post5f-body .post5f-tag{margin-bottom:var(--s3)}
.ls5f .post5f-icon svg{width:34%}
.ls5f-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s6)}
.ls5f-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s6);align-items:center;margin:0;padding:0}
.ls5f-row::before,.ls5f-row::marker{content:none}
.ls5f .ls5f-row-media{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--c-bg-subtle)}
.ls5f .ls5f-row-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ls5f .ls5f-row-media .post5f-play{width:44px;height:44px}
.ls5f .ls5f-row-media .post5f-play svg{width:18px;height:18px}
.ls5f-row-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);min-width:0}
.ls5f-row .cat{font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;text-transform:uppercase;color:var(--c-primary);text-decoration:none}
.ls5f-row a.cat:hover{color:#3520d4}
.ls5f-row .post5f-tag{margin-bottom:0}
.ls5f-row h3,.ls5f-row .as-h3{font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);line-height:1.3;letter-spacing:-0.01em;margin:0}
.ls5f-row h3 a,.ls5f-row .as-h3 a{color:var(--c-base);text-decoration:none}
.ls5f-row h3 a:hover,.ls5f-row .as-h3 a:hover{color:var(--c-primary)}
.ls5f-row p{margin:0;font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.55;max-width:70ch}
.ls5f-meta{font-size:var(--fs-caption);color:var(--c-text-muted)}
.ls5f-empty{margin:0;padding:var(--s6);border-radius:var(--r-card);background:var(--c-bg-subtle);color:var(--c-text-muted)}
@media(max-width:960px){.ls5f-grid,.ls5f-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .ls5f-grid,.ls5f-grid--2,.ls5f-grid--4{grid-template-columns:minmax(0,1fr)}
  .ls5f-row{grid-template-columns:112px minmax(0,1fr);gap:var(--s4);align-items:start}
  .ls5f-row p{display:none}
  .ls5f .ls5f-row-media .post5f-play{width:34px;height:34px}
  .ls5f .ls5f-row-media .post5f-play svg{width:14px;height:14px}
}
.ls5f--posts .fpost5f .media img,.ls5f--uc .post5f-video img{display:block}

/* Tier-Karten: kein Überlauf zwischen 760 und 960 px */
.kf-tiers .tier-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:960px){.kf-tiers .tier-grid{max-width:560px}.kf-tiers .tier-grid > .tier{flex-basis:100%}}

/* Kernfunktionen-Karten: lange Wörter sprengen die Spalte nicht */
.kk5f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.kk5f-card{min-width:0;overflow-wrap:break-word}
.kk5f-card h3,.kk5f-card .as-h3{hyphens:auto}
@media(max-width:960px){.kk5f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.kk5f-grid{grid-template-columns:minmax(0,1fr)}}

/* Video-Player: Play-Button mittig, Poster ohne Punktraster */
.vp-player .play.post5f-play{position:absolute;top:50%;left:50%;z-index:2;width:84px;height:84px;transform:translate(-50%,-50%)}
.vp-player .play.post5f-play svg{width:26px;height:26px;margin-left:4px;color:currentColor}
.vp-player:hover .play.post5f-play,.vp-player .play.post5f-play:hover{transform:translate(-50%,-50%) scale(1.06)}
.vp-player .note,.vp-player .dur{z-index:2}
.vp-player:not(:has(> img)) .play.post5f-play,.vp-player:not(:has(> img)) .play.post5f-play:focus{background:var(--c-white);color:var(--c-primary);box-shadow:var(--sh-3)}
.vp-player:not(:has(> img)) .play.post5f-play:hover{background:var(--c-primary);color:var(--c-white)}
.vp-player > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vp-player:has(> img)::before{display:none}
.vp-player:has(> img) .note{color:var(--c-white);text-shadow:0 1px 2px rgba(28,36,51,0.6)}
@media(max-width:640px){
  .vp-player .play.post5f-play{width:60px;height:60px}
  .vp-player .play.post5f-play svg{width:20px;height:20px;margin-left:3px}
  .vp-player .note{display:none}
}
@media(prefers-reduced-motion:reduce){.vp-player:hover .play.post5f-play,.vp-player .play.post5f-play:hover{transform:translate(-50%,-50%)}}

/* Video-Vorschaubilder: Verlauf Dunkelblau zu Neonblau über dem Bild */
.post5f-video:has(> :is(img,picture))::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(45deg,rgba(28,36,51,0.55) 0%,rgba(67,45,244,0.35) 100%);
  opacity:1;transition:opacity var(--dur) var(--ease)}
.post5f-video:has(> :is(img,picture)) > :not(img,picture,iframe){z-index:2}
.post5f-video:has(> :is(img,picture)):hover::after,
:is(.mtk-card,.vx,.ls5f-row):hover .post5f-video:has(> :is(img,picture))::after,
.post5f-video:has(> :is(img,picture)):focus-within::after{opacity:0.82}
@media(prefers-reduced-motion:reduce){.post5f-video:has(> :is(img,picture))::after{transition:none}}

/* Sicherheit: kein Abstand unter dem letzten Element, wenn Siegel oder Kennzahlen aus sind */
.sicherheit-demo > .head:last-child,.sicherheit-demo > .head:last-child > :last-child,.sicherheit-demo > .seals:last-child{margin-bottom:0}

/* Beiträge ohne Beitragsbild: Bild aus dem Customizer (bekommt den Verlauf unten),
   sonst Fläche Dunkelblau zu Violett wie der Bildverlauf. */
.fpost5f .media.media--fallback,.feat5f .media.media--fallback{position:relative;background-color:var(--c-base);
  background-image:linear-gradient(45deg,var(--c-base) 0%,var(--c-primary) 100%)}
.fpost5f .media.media--fallback img,.feat5f .media.media--fallback img{display:block}

/* Blog-Bilder: gleicher Verlauf wie bei Video-Vorschaubildern */
.fpost5f .media:has(> :is(img,picture)),.feat5f .media:has(> :is(img,picture)),
.bl5f .bthumb:has(> :is(img,picture)),.bl5f .bfeat-thumb:has(> :is(img,picture)){position:relative}
.fpost5f .media:has(> :is(img,picture))::after,.feat5f .media:has(> :is(img,picture))::after,
.bl5f .bthumb:has(> :is(img,picture))::after,.bl5f .bfeat-thumb:has(> :is(img,picture))::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(45deg,rgba(28,36,51,0.55) 0%,rgba(67,45,244,0.35) 100%);opacity:1;transition:opacity var(--dur) var(--ease)}
.fpost5f:hover .media:has(> :is(img,picture))::after,.fpost5f .media:focus-visible::after,
.feat5f a:hover .media:has(> :is(img,picture))::after,
.bl5f :is(.bcard,.bfeat-card):hover :is(.bthumb,.bfeat-thumb):has(> :is(img,picture))::after{opacity:0.82}
@media(prefers-reduced-motion:reduce){
  .fpost5f .media::after,.feat5f .media::after,.bl5f .bthumb::after,.bl5f .bfeat-thumb::after{transition:none}
}

/* Lightbox-Auslöser: Medienfläche als Button (Kit-Guard für alle States) */
button.post5f-video.post5f-video,button.post5f-video.post5f-video:hover,button.post5f-video.post5f-video:focus,button.post5f-video.post5f-video:active{
  display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;font:inherit;color:inherit;
  text-align:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;background-color:var(--c-base)}
button.post5f-video--icon.post5f-video--icon,button.post5f-video--icon.post5f-video--icon:hover,button.post5f-video--icon.post5f-video--icon:focus,button.post5f-video--icon.post5f-video--icon:active{
  background-color:var(--c-bg-subtle);border-bottom:1px solid var(--c-border-subtle)}
.ls5f button.post5f-video.post5f-video,.ls5f button.post5f-video.post5f-video:hover,.ls5f button.post5f-video.post5f-video:focus,.ls5f button.post5f-video.post5f-video:active{border-radius:var(--r-card);border-bottom:0}
.ls5f button.ls5f-row-media.ls5f-row-media,.ls5f button.ls5f-row-media.ls5f-row-media:hover,.ls5f button.ls5f-row-media.ls5f-row-media:focus,.ls5f button.ls5f-row-media.ls5f-row-media:active{background-color:var(--c-bg-subtle)}
button.post5f-video:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
button.post5f-video:hover .post5f-play{background:var(--c-primary);transform:translate(-50%,-50%) scale(1.06)}

/* Video-Lightbox */
.lb5f{width:min(1100px,calc(100vw - 48px),calc((100vh - 120px) * 16 / 9));max-width:none;max-height:none;margin:auto;padding:0;border:0;
  background:transparent;overflow:visible;color:var(--c-white)}
.lb5f::backdrop{background:rgba(28,36,51,0.88)}
html.lb5f-open{overflow:hidden}
.lb5f-frame{position:relative;aspect-ratio:16/9;width:100%;margin:0 auto;
  border-radius:var(--r-card-lg);overflow:hidden;background:var(--c-base);box-shadow:var(--sh-3)}
.lb5f-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb5f .lb5f-close.lb5f-close,.lb5f .lb5f-close.lb5f-close:hover,.lb5f .lb5f-close.lb5f-close:focus,.lb5f .lb5f-close.lb5f-close:active{
  position:absolute;top:-56px;right:0;width:44px;height:44px;display:grid;place-items:center;padding:0;margin:0;border:0;
  border-radius:50%;box-shadow:none;background:rgba(255,255,255,0.14);color:var(--c-white);cursor:pointer}
.lb5f .lb5f-close.lb5f-close:hover{background:var(--c-primary)}
.lb5f .lb5f-close:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}
.lb5f-close svg{width:20px;height:20px}
@media(max-width:640px){
  .lb5f{width:min(100vw,calc((100vh - 120px) * 16 / 9))}
  .lb5f-frame{border-radius:0}
  .lb5f .lb5f-close.lb5f-close,.lb5f .lb5f-close.lb5f-close:hover,.lb5f .lb5f-close.lb5f-close:focus{top:-52px;right:12px}
}

/* =================================================================
   5F · Logo-Raster: 2 bis 6 Logos, gleich große Zellen.
   Zellhöhe --lg-h; jedes Logo trägt --k (optischer Ausgleich aus dem
   Seitenverhältnis, im Widget berechnet): Höhe = --lg-h × --k.
   ================================================================= */
.lg5f{padding:var(--sec-y) var(--s5) 0}
.lg5f-in{max-width:var(--wrap-in);margin:0 auto}
.lg5f-head{margin-bottom:var(--s7)}
.lg5f--size-s{--lg-h:56px}
.lg5f--size-m{--lg-h:72px}
.lg5f--size-l{--lg-h:96px}
.lg5f--gap-s{--lg-gap:var(--s5)}
.lg5f--gap-m{--lg-gap:var(--s7)}
.lg5f--gap-l{--lg-gap:var(--s8)}
.lg5f{--lg-cols:6}
.lg5f--n1{--lg-cols:1}.lg5f--n2{--lg-cols:2}.lg5f--n3{--lg-cols:3}.lg5f--n4{--lg-cols:4}.lg5f--n5{--lg-cols:5}
.lg5f-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s6) var(--lg-gap);margin:0;padding:0;list-style:none}
.lg5f-cell{flex:0 0 calc((100% - (var(--lg-cols) - 1) * var(--lg-gap)) / var(--lg-cols));min-width:0;height:var(--lg-h);
  display:flex;align-items:center;justify-content:center;margin:0;padding:0}
.lg5f-cell::before,.lg5f-cell::marker{content:none}
.lg5f .lg5f-img{display:block;width:auto;height:calc(var(--lg-h) * var(--k,0.6));max-width:100%;max-height:100%;object-fit:contain}
.lg5f--n2 .lg5f-row,.lg5f--n3 .lg5f-row{max-width:calc(var(--lg-cols) * 240px + (var(--lg-cols) - 1) * var(--lg-gap))}
.lg5f-head.center + .lg5f-row{margin-inline:auto}
@media(max-width:960px){
  .lg5f--n5,.lg5f--n6{--lg-cols:3}
  .lg5f--gap-l{--lg-gap:var(--s7)}
}
@media(max-width:600px){
  .lg5f--n3,.lg5f--n4,.lg5f--n5,.lg5f--n6{--lg-cols:2}
  .lg5f{--lg-gap:var(--s5)}
  .lg5f--size-s{--lg-h:48px}
  .lg5f--size-m{--lg-h:60px}
  .lg5f--size-l{--lg-h:76px}
}

/* =================================================================
   5F · App-Download: Karte mit Text links, Store-Kacheln rechts
   (QR-Code + Badge, ganze Kachel verlinkt). Hintergrund Hellgrau,
   Dunkelblau (nur als Karte, nie als ganzer Abschnitt) oder Weiß.
   Mobil ohne QR-Codes: man ist schon am Handy, die Badges reichen.
   ================================================================= */
.qr5f{padding:var(--sec-y) var(--s5) 0}
.qr5f-card{max-width:var(--wrap-in);margin:0 auto;padding:var(--s8);border-radius:var(--r-card-lg);background:var(--c-bg-subtle);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s7) var(--s8);align-items:center;box-sizing:border-box}
.qr5f--white .qr5f-card{background:var(--c-white);border:1px solid var(--c-neutral-300)}
.qr5f--dark .qr5f-card{background:var(--c-base);color:var(--c-white)}
.qr5f .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.qr5f--dark .eyebrow{color:var(--c-primary-t2)}
.qr5f-text h2,.qr5f-text .as-h2{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.12;font-variation-settings:"opsz" 32;color:var(--c-base);max-width:22ch;text-wrap:balance}
.qr5f-text h2 .muted,.qr5f-text .as-h2 .muted{color:var(--c-text-muted)}
.qr5f--dark .qr5f-text :is(h2,h3,h4,.as-h2){color:var(--c-white)}
.qr5f--dark .qr5f-text .muted{color:rgba(255,255,255,0.64)}
.qr5f-lead{margin:var(--s4) 0 0;font-size:var(--fs-body-lg);line-height:1.55;color:var(--c-text-muted);max-width:48ch}
.qr5f--dark .qr5f-lead{color:rgba(255,255,255,0.78)}
.qr5f-actions{margin-top:var(--s6)}
.qr5f-hint{margin:0 0 var(--s4);font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--c-text-muted)}
.qr5f--dark .qr5f-hint{color:rgba(255,255,255,0.78)}
.qr5f-list{display:flex;flex-wrap:wrap;gap:var(--s5);margin:0;padding:0;list-style:none}
.qr5f-list > li{margin:0;padding:0}
.qr5f-list > li::before,.qr5f-list > li::marker{content:none}
.qr5f-store{display:flex;flex-direction:column;align-items:center;gap:var(--s4);padding:var(--s5);background:var(--c-white);
  border:1px solid var(--c-neutral-300);border-radius:var(--r-card);text-decoration:none;color:var(--c-base);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.qr5f--dark .qr5f-store{border-color:transparent}
a.qr5f-store,a.qr5f-store:visited,a.qr5f-store:focus,a.qr5f-store:active{color:var(--c-base);text-decoration:none}
a.qr5f-store.qr5f-store:hover{border-color:var(--c-primary);transform:translateY(-2px);box-shadow:var(--sh-2,0 8px 24px rgba(28,36,51,0.08));color:var(--c-base);text-decoration:none}
a.qr5f-store:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.qr5f--dark a.qr5f-store:focus-visible{outline-color:var(--c-white)}
.qr5f-code{display:block}
.qr5f .qr5f-qr{display:block;width:152px;height:152px;max-width:none;object-fit:contain}
.qr5f .qr5f-badge{display:block;width:auto;height:44px;max-width:170px;object-fit:contain}
.qr5f-badge-text{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold)}
@media(prefers-reduced-motion:reduce){.qr5f-store{transition:none}a.qr5f-store.qr5f-store:hover{transform:none}}
@media(max-width:960px){
  .qr5f-card{grid-template-columns:1fr;padding:var(--s7) var(--s6)}
}
@media(max-width:600px){
  .qr5f-card{padding:var(--s6) var(--s5)}
  .qr5f-hint,.qr5f-code{display:none}
  .qr5f-list{gap:var(--s3)}
  .qr5f-store,.qr5f--dark .qr5f-store{padding:0;background:none;border:0;border-radius:var(--r-pill)}
  a.qr5f-store.qr5f-store:hover{transform:none;box-shadow:none}
  .qr5f-badge-text{padding:0 var(--s4);border:1.5px solid currentColor;border-radius:var(--r-pill);background:var(--c-white)}
}

/* =================================================================
   5F · Team-Abschnitt: Geschäftsführung als große Karten (Foto 4:5
   links, Text rechts), Teammitglieder optional als Raster (Foto 1:1).
   Ohne Foto: Initialen auf Tint.
   ================================================================= */
.tm5f{padding:var(--sec-y) var(--s5) 0}
.tm5f-in{max-width:var(--wrap-in);margin:0 auto}
.tm5f-head{margin-bottom:var(--s7)}
.tm5f-group + .tm5f-group{margin-top:var(--s8)}
.tm5f-label{display:flex;align-items:center;gap:var(--s4);margin:0 0 var(--s5);font-size:var(--fs-caption);
  font-weight:var(--fw-semibold);letter-spacing:0.08em;text-transform:uppercase;color:var(--c-text-muted)}
.tm5f-label::after{content:"";flex:1;height:1px;background:var(--c-border-subtle)}
.tm5f-leads,.tm5f-grid{margin:0;padding:0;list-style:none}
.tm5f-leads > li,.tm5f-grid > li{margin:0}
.tm5f-leads > li::before,.tm5f-grid > li::before,.tm5f-leads > li::marker,.tm5f-grid > li::marker{content:none}
.tm5f-leads{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.tm5f-leads--n1{grid-template-columns:minmax(0,880px)}
.tm5f-leads--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tm5f-lead{display:grid;grid-template-columns:minmax(120px,min(38%,220px)) minmax(0,1fr);gap:var(--s6);align-items:start;
  padding:var(--s5);background:var(--c-bg-subtle);border-radius:var(--r-card-lg)}
.tm5f-leads--n3 .tm5f-lead{grid-template-columns:1fr;gap:var(--s5)}
.tm5f-photo{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--c-neutral-300)}
.tm5f-lead .tm5f-photo{aspect-ratio:4/5;width:100%;max-width:220px}
.tm5f-member .tm5f-photo{aspect-ratio:1}
.tm5f .tm5f-img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.tm5f-photo--empty{display:grid;place-items:center;background:var(--c-tint-1);color:var(--c-primary)}
.tm5f-photo--empty span{font-size:clamp(24px,2.6vw,36px);font-weight:var(--fw-medium-2);letter-spacing:-0.02em}
.tm5f-body{padding-top:var(--s2)}
.tm5f .tm5f-name{margin:0;font-size:var(--fs-h5);font-weight:var(--fw-medium-2);letter-spacing:-0.01em;line-height:1.25;color:var(--c-base)}
.tm5f .tm5f-role{margin:var(--s1) 0 0;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--c-primary)}
.tm5f .tm5f-text{margin:var(--s4) 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--c-text-muted);max-width:52ch}
.tm5f-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s6) var(--s5)}
.tm5f-member .tm5f-name{margin-top:var(--s4);font-size:var(--fs-body)}
.tm5f-member .tm5f-role{color:var(--c-text-muted);font-weight:var(--fw-regular-2)}
.tm5f-member .tm5f-text{margin-top:var(--s2);font-size:var(--fs-body-sm);line-height:1.5}
@media(max-width:960px){
  .tm5f-leads,.tm5f-leads--n3{grid-template-columns:minmax(0,1fr)}
  .tm5f-leads--n3 .tm5f-lead{grid-template-columns:minmax(120px,min(38%,220px)) minmax(0,1fr);gap:var(--s6)}
  .tm5f-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:760px){.tm5f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){
  .tm5f-lead,.tm5f-leads--n3 .tm5f-lead{grid-template-columns:1fr;gap:var(--s5)}
  .tm5f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4)}
}

/* =================================================================
   5F · Einordnung (eo5f): Kopf · Zielgruppen als verlinkte Kacheln ·
   zwei Spalten Fakten (dl) und Nachweise (Punktliste + Link).
   Kein Anheben beim Hover: nur echte Links reagieren (Fläche + Pfeil).
   ================================================================= */
.eo5f{padding:var(--sec-y) var(--s5) 0}
.eo5f-in{max-width:var(--wrap-in);margin:0 auto}
.eo5f-head{margin-bottom:var(--s7)}
.eo5f-head h2,.eo5f-head .as-h2{text-wrap:balance}
.eo5f-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.eo5f-tile{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:100%;box-sizing:border-box;
  padding:var(--s5);border-radius:var(--r-card);background:var(--c-bg-subtle);color:var(--c-base);
  font-size:var(--fs-h6);font-weight:var(--fw-medium-2);line-height:1.3;overflow-wrap:break-word}
.eo5f-tile-txt{min-width:0}
.eo5f-tile small{display:block;margin-top:2px;font-size:var(--fs-body-sm);font-weight:var(--fw-regular-2);color:var(--c-text-muted)}
.eo5f .eo5f-arrow{flex-shrink:0;width:20px;height:20px;color:var(--c-primary);transition:transform var(--dur) var(--ease)}
a.eo5f-tile,a.eo5f-tile:visited,a.eo5f-tile:focus,a.eo5f-tile:active{color:var(--c-base);text-decoration:none;transition:background var(--dur) var(--ease)}
a.eo5f-tile.eo5f-tile:hover{background:var(--c-tint-1);color:var(--c-base);text-decoration:none}
a.eo5f-tile:hover .eo5f-arrow{transform:translateX(3px)}
a.eo5f-tile:focus-visible,a.eo5f-more:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.eo5f-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s8);margin-top:var(--s8);
  padding-top:var(--s7);border-top:1px solid var(--c-neutral-300)}
.eo5f-cols--n1{grid-template-columns:minmax(0,720px)}
.eo5f-cols--flush{margin-top:0;padding-top:0;border-top:0}
.eo5f .eo5f-col-title{margin:0 0 var(--s5);font-size:var(--fs-h5);font-weight:var(--fw-medium-2);letter-spacing:-0.01em;line-height:1.25;color:var(--c-base)}
.eo5f-facts{margin:0}
.eo5f-facts div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--c-neutral-300)}
.eo5f-facts div:first-child{padding-top:0}
.eo5f-facts dt{font-size:var(--fs-h5);font-weight:var(--fw-medium-2);letter-spacing:-0.01em;line-height:1.3;color:var(--c-base)}
.eo5f-facts dd{margin:0;align-self:center;font-size:var(--fs-subline);line-height:1.5;color:var(--c-text-muted)}
.eo5f-points{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.eo5f-points li{position:relative;margin:0;padding-left:22px;font-size:var(--fs-body);line-height:1.5;color:var(--c-base)}
.eo5f-points li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--c-primary)}
.eo5f-points li span{color:var(--c-text-muted)}
a.eo5f-more,a.eo5f-more:visited{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-medium-2);color:var(--c-primary);text-decoration:none}
a.eo5f-more:hover{color:var(--c-primary-hover);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.eo5f .eo5f-arrow,a.eo5f-tile{transition:none}a.eo5f-tile:hover .eo5f-arrow{transform:none}}
@media(max-width:960px){
  .eo5f-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eo5f-cols{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}
@media(max-width:600px){
  .eo5f-tiles{grid-template-columns:minmax(0,1fr)}
  .eo5f-tile{padding:var(--s4) var(--s5)}
  .eo5f-facts div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* =================================================================
   5F · Ausgangslage (al5f) · v1.10.28
   Problem-Einstieg vor einem Ablauf: links Eyebrow + Überschrift,
   rechts Text und optionale Überleitung unter einer Linie mit
   violettem Pfeil. Ab 860px untereinander.
   ================================================================= */
.al5f{padding:var(--sec-y) var(--s5) 0}
.al5f-in{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.al5f-head .eyebrow{display:inline-block;font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:0.08em;
  text-transform:uppercase;color:var(--c-primary);margin-bottom:var(--s4)}
.al5f-head h2,.al5f-head .as-h2{font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:var(--lh-heading);font-variation-settings:"opsz" 32;color:var(--c-base);text-wrap:balance;margin:0}
.al5f-body p{margin:0;font-size:var(--fs-body-lg);color:var(--c-text-muted);line-height:1.6;max-width:62ch}
.al5f-body p + p{margin-top:var(--s4)}
.al5f-body strong{font-weight:var(--fw-semibold);color:var(--c-base)}
.al5f-body .al5f-bridge{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s6);padding-top:var(--s5);
  border-top:1px solid var(--c-border-subtle);color:var(--c-base);font-weight:var(--fw-medium-2);line-height:1.5}
.al5f .al5f-arrow{flex-shrink:0;width:20px;height:20px;margin-top:2px;color:var(--c-primary)}
@media(max-width:860px){
  .al5f-in{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
}

/* =================================================================
   Schritte · Nummer im Kreis (v1.10.28), ohne Verbindungslinien.
   Ablauf-Schritte: Kreis statt Pill in der Karte (.ab5f-num).
   Nummerierte Schritte: Kreis statt großer feiner Ziffer
   (.nsplit--dot), mittig zur ersten Titelzeile.
   ================================================================= */
.ab5f-num{display:grid;place-items:center;align-self:flex-start;width:36px;height:36px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);
  line-height:1;font-feature-settings:"tnum";margin-bottom:var(--s4)}
.nsplit--dot .nstep{grid-template-columns:40px minmax(0,1fr)}
.nsplit--dot .nstep h4,.nsplit--dot .nstep .as-h4{margin-top:0}
.nsplit--dot .nstep .num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--c-primary);color:var(--c-white);font-size:var(--fs-body);font-weight:var(--fw-semibold);
  letter-spacing:0;font-variation-settings:normal;margin-top:calc(var(--fs-h4) * .525 - 20px)}
@media(max-width:860px){
  .nsplit--dot .nstep{grid-template-columns:36px minmax(0,1fr)}
  .nsplit--dot .nstep .num{width:36px;height:36px;font-size:var(--fs-body-sm);margin-top:calc(var(--fs-h4) * .525 - 18px)}
}

/* =================================================================
   5F · Kontakt + Termin (ktm5f) · v1.10.32, Zwei-Klick v1.10.34
   Links Überschrift, Kontaktdaten mit Icon und Ansprechpartner,
   rechts Zeeg-Terminbuchung als iframe (vor dem Klick .ktm5f-gate).
   Ab 860px untereinander.
   ================================================================= */
.ktm5f{padding:var(--sec-y) var(--s5) 0}
.ktm5f-in{max-width:var(--wrap-in);margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:start}
.ktm5f--solo .ktm5f-in{grid-template-columns:minmax(0,1fr)}
.ktm5f-info{min-width:0}
.ktm5f .ktm5f-title{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:1.2;
  color:var(--c-base);text-wrap:balance;margin:0 0 var(--s5)}
.ktm5f-intro{font-size:var(--fs-body);color:var(--c-text-muted);line-height:1.55;margin:calc(-1 * var(--s3)) 0 var(--s5);max-width:52ch}
.ktm5f-list,.ktm5f-people{list-style:none;margin:0;padding:0}
.ktm5f-list{display:grid;gap:var(--s4)}
.ktm5f-item{display:flex;gap:var(--s4);align-items:flex-start}
.ktm5f-ico{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-btn);background:var(--c-tint-1);color:var(--c-primary);display:grid;place-items:center}
.ktm5f-ico svg{width:18px;height:18px}
.ktm5f-label{display:block;font-size:var(--fs-caption);font-weight:var(--fw-medium);color:var(--c-text-muted);line-height:1.4}
.ktm5f-val{font-size:var(--fs-body);line-height:1.45;font-style:normal;color:var(--c-base);overflow-wrap:anywhere}
.ktm5f .ktm5f-val a,.ktm5f .ktm5f-person a{color:var(--c-primary);text-decoration:none}
.ktm5f .ktm5f-val a:hover,.ktm5f .ktm5f-person a:hover{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.ktm5f-people{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3);margin-top:var(--s7)}
.ktm5f-person{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);padding:20px;min-width:0}
.ktm5f-avatar{width:48px;height:48px;border-radius:50%;background:var(--c-tint-1);color:var(--c-primary);display:grid;place-items:center;
  font-size:var(--fs-body);font-weight:var(--fw-semibold);overflow:hidden;margin-bottom:var(--s4)}
.ktm5f-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ktm5f--foto-s .ktm5f-person .ktm5f-avatar{width:48px;height:48px}
.ktm5f--foto-m .ktm5f-person .ktm5f-avatar{width:80px;height:80px;font-size:22px}
.ktm5f--foto-l .ktm5f-person .ktm5f-avatar{width:120px;height:120px;font-size:30px;margin-bottom:var(--s5)}
.ktm5f .ktm5f-name{font-size:var(--fs-h6);font-weight:var(--fw-medium);letter-spacing:0;line-height:1.3;color:var(--c-base);margin:0}
.ktm5f-role{font-size:var(--fs-body-sm);color:var(--c-text-muted);line-height:1.4;min-height:2.8em;margin:2px 0 var(--s4)}
.ktm5f-person a,.ktm5f-person .ktm5f-tel{display:block;font-size:var(--fs-caption);line-height:1.8;overflow-wrap:anywhere}
.ktm5f-cal{border:1px solid var(--c-border-subtle);border-radius:var(--r-card);box-shadow:var(--sh-3);background:var(--c-white);overflow:hidden}
.ktm5f-panel{min-width:0}
.ktm5f-cal iframe{display:block;width:100%;height:var(--ktm5f-h,760px);border:0}
.ktm5f-gate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);min-height:440px;
  padding:var(--s7) var(--s6);text-align:center}
.ktm5f-gate-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-card);background:var(--c-tint-1);color:var(--c-primary)}
.ktm5f-gate-ico svg{width:26px;height:26px}
.ktm5f .ktm5f-gate-title{margin:0;font-size:var(--fs-h5);font-weight:var(--fw-medium-2);line-height:1.25;color:var(--c-base);text-wrap:balance}
.ktm5f .ktm5f-gate-text{margin:0;max-width:44ch;font-size:var(--fs-body-sm);line-height:1.55;color:var(--c-text-muted)}
.ktm5f .ktm5f-gate-text a,.ktm5f .ktm5f-gate-text a:hover{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.ktm5f-gate-btn.ktm5f-gate-btn,.ktm5f-gate-btn.ktm5f-gate-btn:visited{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;
  margin-top:var(--s2);padding:14px 28px;border-radius:var(--r-pill);background:var(--c-primary);color:var(--c-white);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.25;white-space:nowrap;text-decoration:none;transition:background-color var(--dur) var(--ease)}
.ktm5f-gate-btn.ktm5f-gate-btn:hover,.ktm5f-gate-btn.ktm5f-gate-btn:focus{background:var(--c-primary-hover);color:var(--c-white);text-decoration:none}
.ktm5f-gate-btn.ktm5f-gate-btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.ktm5f-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-bottom:1px solid var(--c-border-subtle)}
.ktm5f-tab.ktm5f-tab,.ktm5f-tab.ktm5f-tab:hover,.ktm5f-tab.ktm5f-tab:focus,.ktm5f-tab.ktm5f-tab:active{display:flex;align-items:center;gap:var(--s3);
  min-width:0;margin:0 0 -1px;padding:var(--s4) var(--s5);background:transparent;border:0;border-bottom:2px solid transparent;
  border-radius:0;box-shadow:none;font:inherit;text-align:left;color:var(--c-text-muted);cursor:pointer;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.ktm5f-tab.ktm5f-tab + .ktm5f-tab.ktm5f-tab{border-left:1px solid var(--c-border-subtle)}
.ktm5f-tab.ktm5f-tab:hover{background:var(--c-tint-2);color:var(--c-base)}
.ktm5f-tab.ktm5f-tab.is-active,.ktm5f-tab.ktm5f-tab.is-active:hover,.ktm5f-tab.ktm5f-tab.is-active:focus{color:var(--c-base);border-bottom-color:var(--c-primary)}
.ktm5f-tab.ktm5f-tab:focus-visible{outline:3px solid var(--c-primary);outline-offset:-3px;border-radius:0}
.ktm5f-tab .ktm5f-avatar{flex:0 0 40px;width:40px;height:40px;margin:0;font-size:var(--fs-caption)}
.ktm5f-tab-txt{display:flex;flex-direction:column;min-width:0}
.ktm5f-tab-name{font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);line-height:1.3}
.ktm5f-tab-sub{font-size:var(--fs-caption);line-height:1.35;color:var(--c-text-muted)}
@media(max-width:459px){
  .ktm5f-role{min-height:0}
}
@media(max-width:560px){
  .ktm5f-tab.ktm5f-tab,.ktm5f-tab.ktm5f-tab:hover,.ktm5f-tab.ktm5f-tab:focus,.ktm5f-tab.ktm5f-tab:active{padding:var(--s3) var(--s4)}
  .ktm5f-tab .ktm5f-avatar{display:none}
}
@media(max-width:860px){
  .ktm5f-in{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
  .ktm5f-gate{min-height:360px;padding:var(--s6) var(--s5)}
  .ktm5f-cal iframe{height:var(--ktm5f-h-m,900px)}
}

/* ─── Hero: Breadcrumb, Überschrift „Kleiner" (H2-Größe wie Lizenz-Hero) ─── */
.hero5f .crumbs{margin-bottom:var(--hero-gap-crumbs)}
.hero5f.hero5f--t-small :is(h1,.as-h1){font-size:var(--fs-h2);letter-spacing:var(--ls-h2);line-height:var(--lh-heading);max-width:20ch}

/* ─── Icon im Titel (Hero, Modul-Hero, Lizenz-Hero, Plattform-Ebenen) ───
   Höhe in em der Überschrift; Icon mittig auf der Versalhöhe von Inter,
   Abstand zum Wort 0,37 em. Icon und erstes Wort brechen nicht getrennt um. */
.ti5f-lead{white-space:nowrap}
img.ti5f.ti5f{display:inline-block;width:auto;max-width:none;height:1em;margin:0 .37em 0 0;padding:0;
  border:0;border-radius:0;box-shadow:none;vertical-align:-.14em}
img.ti5f--s.ti5f--s{height:.8em;vertical-align:-.04em}
img.ti5f--m.ti5f--m{height:.9em;vertical-align:-.09em}
img.ti5f--l.ti5f--l{height:1em;vertical-align:-.14em}
.tier--dark img.ti5f,.tier--current img.ti5f{filter:brightness(0) invert(1)}

/* ─── Icons: Upload aus der Mediathek und Größe (Feature-Tabs, Karussell,
   Scroller, Funktionsliste, Kernfunktionen, Extras, Zielgruppen) ───
   Upload als Maske, Farbe = currentColor wie bei den eingebauten Icons.
   --icz skaliert die bisherige Icon-Größe (Groß = 1). */
.icz5f--s{--icz:.8}
.icz5f--m{--icz:.9}
.icu5f{display:block;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.ftab .ic .icu5f{width:100%;height:100%}
.ft-icon .icu5f,.feature-card .card-icon .icu5f{width:100%;height:auto;aspect-ratio:1}
.kf-wire .wire-ico .icu5f{width:calc(40px*var(--icz,1));height:calc(40px*var(--icz,1))}

/* Keine Kursivschrift im ganzen Theme (Designentscheidung 21.10.2026):
   gilt auch für em, i, Inline-Styles und Elementor-Typografie. Absetzen
   nur über Größe, Gewicht und Farbe. Kein italic-@font-face mehr, daher
   ohne diese Regel synthetische Schrägstellung. !important gegen
   spezifischere Regeln von Hello und Elementor. */
*,*::before,*::after{font-style:normal!important}

/* Menü-Disclosure (Theme 1.10.46): Button statt Link; Panels und Sprachwahl öffnen per Hover oder .is-open, nicht per Fokus */
.nav-link.nav-link{background:none;border:0;border-radius:0;margin:0;font-family:inherit;line-height:inherit;
  letter-spacing:inherit;font-feature-settings:inherit;font-variation-settings:inherit;text-align:inherit;
  user-select:auto;-webkit-appearance:none;appearance:none}
.nav-link.nav-link:focus,.nav-link.nav-link:active{background:none;color:var(--c-base)}
.nav-link.nav-link:hover{background:none;color:var(--c-primary)}
.nav-link.nav-link:focus-visible{border-radius:4px}
/* Gruppentitel (Panel) und Spaltentitel (Footer) als p: Werte des bisherigen h5 */
.nav-panel .panel-group .as-h5{margin-top:.5rem;line-height:var(--lh-heading)}
.footer-col .as-h5{line-height:var(--lh-heading)}
/* Drawer: Eltern ohne Link, Gruppen mit ihren Seiten */
.drawer-menu .drawer-parent{margin:0;padding:14px 0;font-size:var(--fs-body-lg);font-weight:var(--fw-medium-2);
  color:var(--c-base);border-bottom:1px solid var(--c-neutral-300)}
.drawer-menu .drawer-group-title{margin:0;padding:var(--s5) 0 var(--s1);font-size:var(--fs-caption);font-weight:var(--fw-semibold);
  letter-spacing:.06em;text-transform:uppercase;color:var(--c-text-muted);line-height:var(--lh-heading)}
.drawer-menu .sub-menu .sub-menu{padding-left:0}

/* Links im Fließtext (WCAG 1.4.1), Spezifität 0,1,1 wie .elementor a, greift durch Ladereihenfolge */
:is(.elementor-widget-text-editor,.elementor-tab-content,.seo5f-rich,.faq-a,.lg5f-text,.lg5f-addr,.al5f-body,.sb5f-copy,:where(.vb2-intro) .txt,.nstep,.cl-list,:where(.article5f) .prose) :where(p,li,td,th,dd,blockquote,figcaption) a:where([href]):not(:where(.btn,.btn5f,[class*="btn"],.wp-element-button,.wp-block-button__link,.wp-block-file__button,:has(img,svg,picture,video))){
  color:var(--c-primary);text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--c-primary);
  text-underline-offset:0.18em;text-decoration-skip-ink:auto;
  transition:color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
:is(.elementor-widget-text-editor,.elementor-tab-content,.seo5f-rich,.faq-a,.lg5f-text,.lg5f-addr,.al5f-body,.sb5f-copy,:where(.vb2-intro) .txt,.nstep,.cl-list,:where(.article5f) .prose) :where(p,li,td,th,dd,blockquote,figcaption) a:where([href]):not(:where(.btn,.btn5f,[class*="btn"],.wp-element-button,.wp-block-button__link,.wp-block-file__button,:has(img,svg,picture,video))):where(:hover,:focus-visible){
  color:var(--c-primary-hover);text-decoration-line:underline;text-decoration-thickness:2px;text-decoration-color:currentColor}

/* Bento · Volle Breite, Video, Link, Icon-Größe (5f-blocks 1.80.0) */
.bento .full{grid-column:1/-1}
.bento .bento-d2{grid-column:span 2}
.bento .bento-d3{grid-column:span 3}
.bento .full h3,.bento .full .as-h3{max-width:none}
.bento .full .card-head{max-width:66.67%}
.bento .full .sub{max-width:none}
.bento .card.card--plain{min-height:0}
.bento .card--plain .card-head{padding-bottom:28px}
.bento .card--plain:not(.card--modal) h3{padding-right:0}

.bento .card.card--media{background:none;border:0;border-radius:0;min-height:0;overflow:visible;cursor:default}
.bento .card.card--media:hover{box-shadow:none}
.bento .card--media .card-head{padding:0 0 var(--s4);max-width:66.67%}
.bento-vwrap{position:relative}
.bento-video,.bento-img{position:relative;overflow:hidden;border-radius:var(--bento-radius);background:var(--c-neutral-300)}
.bento-video{aspect-ratio:16/9}
.bento-img{aspect-ratio:4/3}
.bento-video img,.bento-img img,.bento-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.bento-video img,.bento-img img{object-fit:cover}
.bento .full .bento-play{width:80px;height:80px}
.bento .full .bento-play svg{width:28px;height:28px;margin-left:4px}
.bento .bento-play:focus-visible,.bento .expand--media:focus-visible{outline:3px solid var(--c-white);outline-offset:0;box-shadow:0 0 0 6px var(--c-primary)}
.bento .expand.expand--media{top:var(--s4);right:var(--s4);background:var(--c-white);color:var(--c-text);box-shadow:var(--sh-1)}
.bento .expand.expand--media:hover{background:var(--c-primary);color:var(--c-white)}
.bento-vwrap:has([data-fivef-ignite-state]) .expand--media{display:none}

.bento a.card{color:inherit;text-decoration:none}
/* Titel in allen Karten auf derselben Höhe (36 px unter der Oberkante), auch in
   verlinkten Karten (a.card), unabhängig von Abständen, die Theme, Elementor-Kit
   oder Browser dem ersten Element geben. Stat- und Medien-Zellen unverändert. */
.bento .card{margin:0;padding:0}
.bento .card:not(.card--stat):not(.card--media) .card-head{padding-top:36px}
.bento .card:not(.card--stat):not(.card--media) .card-head > :first-child,
.bento .card:not(.card--stat):not(.card--media) .card-head :is(h1,h2,h3,h4,h5,h6,.as-h3):first-child{margin-top:0}
.bento .card.card--link{cursor:pointer}
.bento .card--link:hover,.bento .card--link:focus-visible{border-color:var(--c-primary)}
.bento .card--link:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px;border-radius:var(--bento-radius)}
.bento-more{margin-top:auto;align-self:flex-end;display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s5) 28px 28px;font-size:var(--fs-subline);font-weight:var(--fw-semibold);color:var(--c-primary)}
.bento-more svg{width:14px;height:14px;flex-shrink:0}
.bento .card--link:hover .bento-more{color:var(--c-primary-hover)}

.bento .icz5f--s .micon,.bento .icz5f--m .micon{width:calc(132px * var(--icz));height:calc(132px * var(--icz))}

.bento-note{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border:1px dashed var(--c-neutral-400);border-radius:var(--r-btn);
  background:var(--c-white);font-size:var(--fs-body-sm);line-height:1.5;color:var(--c-text-muted)}
.bento-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

.bento-modal--video .bento-modal-panel{background:none;box-shadow:none;overflow:visible;border-radius:0;
  max-width:min(1200px,calc((90vh - 64px) * 16 / 9));max-height:none;padding-top:56px}
.bento-modal--video .bento-modal-close{top:0;right:0}
.bento-modal-frame{position:relative;aspect-ratio:16/9;border-radius:var(--bento-radius);overflow:hidden;background:var(--c-base)}
.bento-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:768px){
  .bento .bento-d2:not(.row2),.bento .bento-d3:not(.row2){grid-column:span 2}
  .bento .bento-d2.row2,.bento .bento-d3.row2{grid-column:span 1}
  .bento .row2.bento-t2{grid-column:span 2}
  .bento .full .card-head,.bento .card--media .card-head{max-width:none}
}
@media(max-width:700px){
  .bento .icz5f--s .micon,.bento .icz5f--m .micon{width:calc(104px * var(--icz));height:calc(104px * var(--icz))}
}
@media(max-width:520px){
  .bento .bento-grid > .card{grid-column:1/-1}
  .bento .card.card--plain,.bento .card.card--media{min-height:0}
  .bento .full .bento-play{width:56px;height:56px}
  .bento .full .bento-play svg{width:22px;height:22px;margin-left:3px}
}

/* 5F · Kennzahlen, Variante Preis-Fokus (kz5f--price) */
.kz5f-pf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s5);align-items:center}
.kz5f-key{grid-column:1/span 5}
.kz5f-key-val{margin:0;font-size:calc(var(--fs-h1) * 4 / 3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h1);line-height:1;
  color:var(--c-base);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 32;white-space:nowrap}
/* Text und Link wie 5F Split-Bullets (Sicherheit): Text 17 px grau, Link 16 px semibold violett */
.kz5f-key-txt{margin:var(--s5) 0 0;max-width:34ch;font-size:var(--fs-body-lg);line-height:1.55;color:var(--c-text-muted)}
.kz5f-key-link,.kz5f-key-link:visited,.kz5f-key-link:focus{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s5);
  font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.5;color:var(--c-primary);text-decoration:none}
.kz5f-key-link:hover{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.kz5f-key-link:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.kz5f-key-link svg{width:16px;height:16px;flex-shrink:0}
.kz5f-list{grid-column:7/span 6;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--c-border-subtle)}
.kz5f-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"pre lab" "num lab";column-gap:var(--s5);row-gap:var(--s1);
  align-items:center;padding:var(--s5) 0;border-top:1px solid var(--c-border-subtle)}
.kz5f-pre{grid-area:pre;font-size:var(--fs-body-sm);line-height:1.3;color:var(--c-text-muted)}
.kz5f-item .num{grid-area:num;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);line-height:1;
  color:var(--c-base);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 32;white-space:nowrap}
.kz5f-item .label{grid-area:lab;max-width:26ch;font-size:var(--fs-body);line-height:1.5;color:var(--c-text-muted)}
.kz5f--grey .kz5f-list,.kz5f--grey .kz5f-item{border-color:var(--c-border)}
@media(max-width:960px){
  .kz5f-key,.kz5f-list{grid-column:1/-1}
  .kz5f-list{margin-top:var(--s7)}
}
@media(max-width:520px){
  .kz5f-item{grid-template-columns:minmax(0,1fr);grid-template-areas:"pre" "num" "lab"}
  .kz5f-item .label{margin-top:var(--s2)}
}

/* 5F · Logo-Raster: Größen xl, xxl; Abstände xs, xxs.
   Bei xs und xxs sind alle Zellen so breit wie das breiteste Logo (--lg-w aus
   dem Widget, Vielfaches von --lg-h), höchstens so breit wie eine gleich breite
   Zelle. Die Logomitten stehen damit im gleichen Takt, schmale Siegel bekommen
   seitlich Luft. Die Lücke folgt der Zellhöhe: Sehr eng 1/2 (mindestens 24 px),
   Minimal 3/10 (mindestens 16 px). Reicht die Zeile dafür nicht, wird die Lücke
   bis 16 px kleiner, bevor die Logos schrumpfen (--lg-free: Platz neben den Zellen). */
.lg5f--size-xl{--lg-h:128px}
.lg5f--size-xxl{--lg-h:160px}
.lg5f--gap-xs,.lg5f--gap-xxs{--lg-free:calc((100% - var(--lg-cols) * var(--lg-h) * var(--lg-w,1.6)) / max(1, var(--lg-cols) - 1))}
.lg5f--gap-xs{--lg-gap:clamp(var(--s4),var(--lg-free),max(var(--s5),calc(var(--lg-h) * 0.5)))}
.lg5f--gap-xxs{--lg-gap:clamp(var(--s4),var(--lg-free),max(var(--s4),calc(var(--lg-h) * 0.3)))}
.lg5f--gap-xs .lg5f-cell,.lg5f--gap-xxs .lg5f-cell{flex:0 0 min(calc(var(--lg-h) * var(--lg-w,1.6)),calc((100% - (var(--lg-cols) - 1) * var(--lg-gap)) / var(--lg-cols)))}
@media(max-width:600px){
  .lg5f--size-xl{--lg-h:96px}
  .lg5f--size-xxl{--lg-h:128px}
}

/* Punktraster mit Bene-Effekt (5f-bene.js), gleiche Werte wie 5F Standards-Wand:
   Abstand 26 px, Ecke oben rechts, Punkte wachsen im Umkreis von 120 px um den Zeiger.
   Ruhezustand ohne JS, bei „Bewegung reduzieren" und auf Touch-Geräten: Maske unten
   (Raster 26 px, Größe in Bändern, Deckkraft 22 % bis 0 als Verlauf). Mit JS zeichnet
   das Canvas dasselbe Bild und blendet die Maske aus. */
.bene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;color:var(--c-base);
  --bene-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.92' cy='.15' r='0.4118' gradientTransform='translate(.92 .15) scale(1 2) translate(-.92 -.15)'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cmask id='m'%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/mask%3E%3Cpattern id='p0' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.306'/%3E%3C/pattern%3E%3Cpattern id='p1' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.431'/%3E%3C/pattern%3E%3Cpattern id='p2' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.544'/%3E%3C/pattern%3E%3Cpattern id='p3' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.656'/%3E%3C/pattern%3E%3Cpattern id='p4' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.769'/%3E%3C/pattern%3E%3Cpattern id='p5' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.881'/%3E%3C/pattern%3E%3Cpattern id='p6' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='0.994'/%3E%3C/pattern%3E%3Cpattern id='p7' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='1.106'/%3E%3C/pattern%3E%3Cpattern id='p8' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='1.219'/%3E%3C/pattern%3E%3Cpattern id='p9' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='1.331'/%3E%3C/pattern%3E%3Cpattern id='p10' width='26' height='26' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='13' cy='13' r='1.444'/%3E%3C/pattern%3E%3CclipPath id='c0' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.3930' ry='0.7861'/%3E%3C/clipPath%3E%3CclipPath id='c1' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.3500' ry='0.7000'/%3E%3C/clipPath%3E%3CclipPath id='c2' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.3150' ry='0.6300'/%3E%3C/clipPath%3E%3CclipPath id='c3' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.2800' ry='0.5600'/%3E%3C/clipPath%3E%3CclipPath id='c4' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.2450' ry='0.4900'/%3E%3C/clipPath%3E%3CclipPath id='c5' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.2100' ry='0.4200'/%3E%3C/clipPath%3E%3CclipPath id='c6' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.1750' ry='0.3500'/%3E%3C/clipPath%3E%3CclipPath id='c7' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.1400' ry='0.2800'/%3E%3C/clipPath%3E%3CclipPath id='c8' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.1050' ry='0.2100'/%3E%3C/clipPath%3E%3CclipPath id='c9' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.0700' ry='0.1400'/%3E%3C/clipPath%3E%3CclipPath id='c10' clipPathUnits='objectBoundingBox'%3E%3Cellipse cx='.92' cy='.15' rx='0.0350' ry='0.0700'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='100%25' height='100%25' fill='url(%23p0)' clip-path='url(%23c0)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p1)' clip-path='url(%23c1)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p2)' clip-path='url(%23c2)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p3)' clip-path='url(%23c3)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p4)' clip-path='url(%23c4)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p5)' clip-path='url(%23c5)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p6)' clip-path='url(%23c6)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p7)' clip-path='url(%23c7)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p8)' clip-path='url(%23c8)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p9)' clip-path='url(%23c9)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23p10)' clip-path='url(%23c10)'/%3E%3C/g%3E%3C/svg%3E")}
.bene--light{color:var(--c-white)}
.bene::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--bene-mask) 0 0/100% 100% no-repeat;mask:var(--bene-mask) 0 0/100% 100% no-repeat}
.bene.is-live::before{content:none}
.bene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Fläche (5f-blocks 1.88.0): Ecke oben links = gespiegelte Maske; ganze Fläche =
   gleichmäßiges Raster 26 px, Radius 1,1 px, Deckkraft 15 % (wie das Canvas). */
.bene--left::before{transform:scaleX(-1)}
.bene--full::before{-webkit-mask:none;mask:none;opacity:0.15;
  background:radial-gradient(circle at 13px 13px,currentColor 1.1px,transparent 1.6px) 0 0/26px 26px}

/* 5F · Blog-Grid: Bildfläche ohne Beitragsbild und Seitennummerierung (.bpager), 27.10.2026 */
.bl5f .bthumb.bthumb--fallback,.bl5f .bfeat-thumb.bfeat-thumb--fallback{overflow:hidden;background:var(--c-base);
  background-image:linear-gradient(45deg,var(--c-base) 0%,var(--c-primary) 100%)}
.bl5f .bthumb--fallback img,.bl5f .bfeat-thumb--fallback img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.bl5f .bpager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s2);padding-top:var(--s7)}
.bl5f .bpage{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;
  border-radius:var(--r-pill);border:1px solid var(--c-border);color:var(--c-base);background:var(--c-white);
  text-decoration:none;font-weight:var(--fw-medium-2);font-size:var(--fs-body-sm);line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.bl5f .bpage.is-active{background:var(--c-base);border-color:var(--c-base);color:var(--c-white)}
.bl5f a.bpage:hover{border-color:var(--c-primary);color:var(--c-primary);text-decoration:none}
.bl5f a.bpage:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.bl5f .bpage--dots{min-width:24px;padding:0 4px;border-color:transparent;background:transparent;color:var(--c-text-muted)}
.bl5f .bpage svg{display:block}
@media(max-width:480px){.bl5f .bpager{gap:var(--s1)}.bl5f .bpage{padding:0 10px}}
@media(prefers-reduced-motion:reduce){.bl5f .bpage{transition:none}}

/* 5F · Blog-Grid: Karten mit fester Bildhöhe, Fußzeile Datum + „Weiterlesen", 27.10.2026 */
.bl5f .bcard,.bl5f .bfeat-card{border:1px solid var(--c-border-subtle);border-radius:16px;
  box-shadow:0 1px 2px rgba(28,36,51,0.04),0 6px 20px rgba(28,36,51,0.06);
  transition:transform var(--dur) var(--ease),box-shadow .4s var(--ease),border-color var(--dur) var(--ease)}
.bl5f .bcard:hover,.bl5f .bfeat-card:hover{transform:translateY(-2px);border-color:var(--c-neutral-400);
  box-shadow:0 2px 4px rgba(28,36,51,0.04),0 16px 36px rgba(28,36,51,0.10)}
.bl5f .bcard:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px}
.bl5f .bthumb{aspect-ratio:auto;height:220px;flex:0 0 auto;overflow:hidden;border-bottom:0}
.bl5f .bthumb img,.bl5f .bfeat-thumb img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.bl5f .bcard:hover .bthumb img,.bl5f .bfeat-card:hover .bfeat-thumb img{transform:scale(1.04)}
.bl5f .bcard-body{padding:var(--s5) var(--s5) 0;gap:var(--s3)}
.bl5f .bcard-body h3{font-size:18px;line-height:1.35;letter-spacing:-0.01em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.bl5f .bcard-foot{margin-top:auto;align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-inline:calc(var(--s5) * -1);padding:var(--s4) var(--s5);border-top:1px solid var(--c-border-subtle)}
.bl5f .bcard-body .bcard-foot time{margin:0;padding:0;font-size:var(--fs-caption);color:var(--c-text-muted)}
.bl5f .bcard-more{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-body-sm);font-weight:var(--fw-semibold);color:var(--c-primary)}
.bl5f .bcard-more svg{display:block;transition:transform var(--dur) var(--ease)}
.bl5f .bcard:hover .bcard-more svg{transform:translateX(3px)}
@media(max-width:600px){.bl5f .bthumb{height:200px}}
@media(prefers-reduced-motion:reduce){
  .bl5f .bcard,.bl5f .bcard:hover,.bl5f .bfeat-card,.bl5f .bfeat-card:hover{transform:none;transition:none}
  .bl5f .bthumb img,.bl5f .bfeat-thumb img,.bl5f .bcard-more svg{transition:none;transform:none!important}
}

/* 5F · Mediathek (Use Cases), 27.10.2026: eine Zeile mit Suche, Filtern als Dropdown
   (Trefferzahl je Option) und Zurücksetzen; kein sichtbarer Zähler; Seitennummerierung;
   Karten wie im Blog (feste Bildhöhe, Radius 16 px, Tiefe), ohne Beitragsbild Verlauf
   mit statischem Punktraster und Themen-Symbol. */
.mtk .mtk-toolbar{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s7)}
.mtk .mtk-search{flex:1 1 320px;max-width:440px}
.mtk .mtk-search input{min-height:44px}
.mtk .mtk-filters{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--s3);margin:0 0 0 auto;padding:0;border:0}
.mtk .mtk-dd{position:relative}
.mtk .mtk-dd[hidden]{display:none}
.mtk .mtk-dd-btn.mtk-dd-btn,.mtk .mtk-dd-btn.mtk-dd-btn:hover,.mtk .mtk-dd-btn.mtk-dd-btn:focus,.mtk .mtk-dd-btn.mtk-dd-btn:active{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:0 14px 0 18px;border-radius:var(--r-pill);
  border:1px solid var(--c-border-field);background:var(--c-white);color:var(--c-base);box-shadow:none;
  font-family:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);line-height:1.2;cursor:pointer;white-space:nowrap;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.mtk .mtk-dd-btn.mtk-dd-btn:hover{border-color:var(--c-base)}
.mtk .mtk-dd-btn.mtk-dd-btn:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.mtk .mtk-dd-btn.mtk-dd-btn[aria-expanded="true"]{border-color:var(--c-primary)}
.mtk .mtk-dd-btn.mtk-dd-btn.is-set{border-color:var(--c-primary);background:var(--c-tint-2)}
.mtk .mtk-dd-btn.is-set .mtk-dd-label{color:var(--c-text-muted);font-weight:var(--fw-regular,400)}
.mtk .mtk-dd-btn.is-set .mtk-dd-label::after{content:":"}
.mtk .mtk-dd-val{font-weight:var(--fw-semibold);max-width:18ch;overflow:hidden;text-overflow:ellipsis}
.mtk .mtk-dd-val:empty{display:none}
.mtk .mtk-dd-btn svg{flex:0 0 auto;color:var(--c-text-muted);transition:transform var(--dur) var(--ease)}
.mtk .mtk-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.mtk .mtk-dd-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:260px;padding:6px;
  background:var(--c-white);border:1px solid var(--c-border-subtle);border-radius:12px;box-shadow:var(--sh-3)}
.mtk .mtk-dd-pop[hidden]{display:none}
.mtk .mtk-dd:last-child .mtk-dd-pop{left:auto;right:0}
.mtk .mtk-dd-pop .mtk-filter{display:flex;flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap}
.mtk .mtk-dd-pop .mtk-pill.mtk-pill,.mtk .mtk-dd-pop .mtk-pill.mtk-pill:hover,.mtk .mtk-dd-pop .mtk-pill.mtk-pill:focus,.mtk .mtk-dd-pop .mtk-pill.mtk-pill:active{
  display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:10px;width:100%;min-height:40px;margin:0;padding:8px 12px;
  border:0;border-radius:8px;background:transparent;color:var(--c-base);box-shadow:none;text-align:left;
  font-family:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);line-height:1.3;cursor:pointer}
.mtk .mtk-dd-pop .mtk-pill.mtk-pill:hover,.mtk .mtk-dd-pop .mtk-pill.mtk-pill:focus-visible{background:var(--c-neutral-200)}
.mtk .mtk-dd-pop .mtk-pill.mtk-pill:focus-visible{outline:2px solid var(--c-primary);outline-offset:-2px}
.mtk .mtk-dd-pop .mtk-pill.mtk-pill[aria-pressed="true"]{background:var(--c-tint-2);color:var(--c-primary)}
.mtk .mtk-dd-pop .mtk-pill.mtk-pill:disabled{opacity:.4;cursor:default;background:transparent}
.mtk .mtk-dd-pop .mtk-pill[hidden]{display:none}
.mtk .mtk-check{visibility:hidden;color:var(--c-primary)}
.mtk .mtk-pill[aria-pressed="true"] .mtk-check{visibility:visible}
.mtk .mtk-dd-pop .mtk-pill-n{font-size:12px;font-weight:var(--fw-semibold);color:var(--c-text-muted);font-variant-numeric:tabular-nums}
.mtk .mtk-dd-pop .mtk-pill-n:empty{display:none}
.mtk .mtk-reset.mtk-reset,.mtk .mtk-reset.mtk-reset:hover,.mtk .mtk-reset.mtk-reset:focus{min-height:44px;padding:0 4px;margin:0;border:0;background:none;box-shadow:none;
  color:var(--c-primary);font-family:inherit;font-size:var(--fs-body-sm);font-weight:var(--fw-medium-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.mtk .mtk-reset.mtk-reset:hover{color:var(--c-primary-hover)}
.mtk .mtk-reset[hidden]{display:none}
.mtk .mtk-grid:focus{outline:none}

.mtk .mtk-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s2);padding-top:var(--s7)}
.mtk .mtk-pager[hidden]{display:none}
.mtk .mtk-page.mtk-page,.mtk .mtk-page.mtk-page:hover,.mtk .mtk-page.mtk-page:focus,.mtk .mtk-page.mtk-page:active{
  display:inline-grid;place-items:center;min-width:44px;height:44px;margin:0;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--c-border);background:var(--c-white);color:var(--c-base);box-shadow:none;
  font-family:inherit;font-weight:var(--fw-medium-2);font-size:var(--fs-body-sm);line-height:1;cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.mtk button.mtk-page.mtk-page:hover{border-color:var(--c-primary);color:var(--c-primary)}
.mtk .mtk-page.mtk-page:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.mtk .mtk-page.mtk-page[aria-current="page"]{background:var(--c-base);border-color:var(--c-base);color:var(--c-white);cursor:default}
.mtk .mtk-page.mtk-page--dots.mtk-page--dots{min-width:24px;padding:0 4px;border-color:transparent;background:transparent;color:var(--c-text-muted);cursor:default}
.mtk .mtk-page svg{display:block}

.mtk .post5f{border:1px solid var(--c-border-subtle);border-radius:16px;
  box-shadow:0 1px 2px rgba(28,36,51,0.04),0 6px 20px rgba(28,36,51,0.06);
  transition:transform var(--dur) var(--ease),box-shadow .4s var(--ease),border-color var(--dur) var(--ease)}
.mtk .post5f:hover{transform:translateY(-2px);border-color:var(--c-neutral-400);
  box-shadow:0 2px 4px rgba(28,36,51,0.04),0 16px 36px rgba(28,36,51,0.10)}
.mtk .post5f-video{aspect-ratio:auto;height:220px;flex:0 0 auto}
.mtk .post5f-video img{display:block;transition:transform .6s var(--ease)}
.mtk .post5f:hover .post5f-video img{transform:scale(1.04)}
.mtk .post5f-video.post5f-video--icon.post5f-video--icon{border-bottom:0;background-color:var(--c-base);
  background-image:linear-gradient(45deg,var(--c-base) 0%,var(--c-primary) 100%)}
.mtk .post5f-video--icon .post5f-icon{z-index:1;color:var(--c-white);opacity:.2}
.mtk .post5f-video--icon .post5f-icon svg{width:30%;max-width:110px}
.mtk .post5f-body{padding:var(--s5)}
.mtk .post5f-tag{font-size:11px;letter-spacing:.05em;text-transform:uppercase;background:var(--c-tint-2);margin-bottom:var(--s3)}
.mtk .post5f-body h3,.mtk .post5f-body .as-h3{font-size:18px;font-weight:var(--fw-semibold);line-height:1.35;letter-spacing:-0.01em;margin-bottom:var(--s2);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.mtk .post5f-body p{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;flex:0 1 auto}
.mtk .post5f-body > :last-child{margin-bottom:0}
@media(max-width:640px){
  .mtk .mtk-toolbar{position:relative}
  .mtk .mtk-search{flex-basis:100%;max-width:none}
  .mtk .mtk-filters{flex:1 1 100%;margin-left:0;flex-wrap:nowrap;position:relative}
  .mtk .mtk-dd{position:static;flex:1 1 0;min-width:0}
  .mtk .mtk-dd-btn.mtk-dd-btn{width:100%;min-width:0;padding:0 12px 0 16px}
  .mtk .mtk-dd-btn svg{margin-left:auto}
  .mtk .mtk-dd-btn.is-set .mtk-dd-label{display:none}
  .mtk .mtk-dd-val{min-width:0}
  .mtk .mtk-dd-pop,.mtk .mtk-dd:last-child .mtk-dd-pop{left:0;right:0;min-width:0}
  .mtk .post5f-video{height:200px}
}
@media(prefers-reduced-motion:reduce){
  .mtk .post5f,.mtk .post5f:hover{transform:none;transition:none}
  .mtk .post5f-video img,.mtk .mtk-dd-btn svg{transition:none;transform:none!important}
  .mtk .mtk-dd-btn[aria-expanded="true"] svg{transform:rotate(180deg)!important}
}

/* =================================================================
   DATENSCHUTZ-HINWEIS im Hero (5F · Hero, Schalter privacy_badge)
   ================================================================= */
.fivef-pnote.fivef-pnote{display:block;color:var(--c-base);text-decoration:none;border-radius:8px}
.fivef-pnote__img{display:block;width:330px;max-width:100%;height:auto}
a.fivef-pnote:focus-visible{outline:3px solid var(--c-primary);outline-offset:6px}
.fivef-pnote-slot{position:relative;z-index:2;display:flex;justify-content:center;width:100%;margin-top:var(--hero-gap-actions)}
.hero5f--a.hero5f--pnote{flex-direction:column}
.hero5f--b .fivef-pnote-slot{max-width:var(--wrap-in);margin-left:auto;margin-right:auto;justify-content:flex-start}
@media(max-width:768px){.hero5f--b .fivef-pnote-slot{justify-content:center}}
/* Ab 768 px rechts, mittig zur Überschrift, Textblock bleibt zentriert. Bild skaliert mit der Breite wie in der Vorlage (330 px bei 2000 px). */
@media(min-width:768px){
  .hero5f--pnote-side .fivef-pnote-slot{position:absolute;width:auto;margin:0;top:50%;right:7vw;transform:translateY(-50%)}
  .hero5f--pnote-side .fivef-pnote__img{width:max(160px,min(330px,16.5vw))}
  @supports (anchor-name:--a){
    .hero5f--pnote-side{anchor-scope:--fivef-pnote-h}
    .hero5f--pnote-side .hero5f-content > .as-h1{anchor-name:--fivef-pnote-h}
    .hero5f--pnote-side .fivef-pnote-slot{top:anchor(--fivef-pnote-h center)}
  }
}

/* =================================================================
   404 (template-parts/404.php, Entwurf 5f-404 vom 29.10.2026)
   Ohne Punktraster. Buttons .btn, Pill .pill und .wrap aus der Bibliothek.
   ================================================================= */
.nf5f-hero{padding:calc(76px + var(--s9)) 0 var(--s9);text-align:center}
.nf5f-hero .wrap{display:flex;flex-direction:column;align-items:center}
.nf5f-hero h1{margin:var(--s5) 0 0;max-width:15ch;font-size:var(--fs-h1);font-weight:var(--fw-medium-2);
  letter-spacing:var(--ls-h1);line-height:var(--lh-heading);font-variation-settings:"opsz" 32;text-wrap:balance}
.nf5f-lead{margin:var(--s5) 0 0;max-width:58ch;font-size:var(--fs-lead);line-height:1.5;color:var(--c-text-muted);text-wrap:pretty}

.nf5f-search{display:flex;gap:var(--s3);width:100%;max-width:560px;margin-top:var(--s7)}
.nf5f-search__field{position:relative;flex:1;min-width:0}
.nf5f-search__field svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);
  color:var(--c-text-muted);pointer-events:none}
.nf5f-search input{width:100%;height:52px;padding:0 16px 0 46px;font:inherit;font-size:var(--fs-body);color:var(--c-base);
  background:var(--c-white);border:1.5px solid var(--c-border);border-radius:var(--r-pill);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.nf5f-search input::placeholder{color:var(--c-text-muted);opacity:1}
.nf5f-search input:hover{border-color:var(--c-base)}
.nf5f-search input:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(67,45,244,0.18)}
.nf5f-search .btn{min-height:52px}

.nf5f-home{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:var(--s5);
  font-weight:var(--fw-semibold);color:var(--c-primary);text-decoration:none}
.nf5f-home svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.nf5f-home:hover{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.nf5f-home:hover svg{transform:translateX(-3px)}

/* Einstiege */
.nf5f-routes{padding:var(--s8) 0 var(--s9)}
.nf5f-routes h2,.nf5f-cta h2{margin:0;font-size:var(--fs-h3);font-weight:var(--fw-medium-2);letter-spacing:var(--ls-h3);
  line-height:1.08;font-variation-settings:"opsz" 32}
.nf5f-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4);margin:var(--s6) 0 0;padding:0;list-style:none}
.nf5f-card{display:flex;flex-direction:column;height:100%;min-height:220px;padding:var(--s6);
  background:var(--c-neutral-200);border:1px solid var(--c-border-subtle);border-radius:var(--r-card);color:var(--c-base);text-decoration:none;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nf5f-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);background:var(--c-white);border-color:var(--c-border);color:var(--c-base)}
.nf5f-card:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.nf5f-card__title{font-size:var(--fs-h4);font-weight:var(--fw-medium-2);letter-spacing:-0.018em;line-height:1.15;font-variation-settings:"opsz" 32}
.nf5f-card__desc{margin:var(--s3) 0 var(--s5);font-size:var(--fs-body-sm);line-height:1.5;color:var(--c-text-muted)}
.nf5f-card__go{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;margin-top:auto;align-self:flex-end;
  border-radius:50%;background:var(--c-white);color:var(--c-primary);border:1px solid var(--c-border-subtle);
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.nf5f-card__go svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.nf5f-card:hover .nf5f-card__go{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
.nf5f-card:hover .nf5f-card__go svg{transform:translateX(2px)}

/* CTA */
.nf5f-cta{padding:0 0 var(--s9)}
.nf5f-cta__band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s6);align-items:center;
  padding:var(--s8) var(--s7);background:var(--c-primary);color:var(--c-white);border-radius:var(--r-card-lg)}
.nf5f-cta h2{max-width:20ch;color:var(--c-white);text-wrap:balance}
.nf5f-cta p{margin:var(--s4) 0 0;max-width:52ch;font-size:var(--fs-body);line-height:1.5;color:var(--c-white)}
.nf5f-cta__actions{display:flex;flex-wrap:wrap;gap:var(--s3)}
.nf5f-cta .btn:focus-visible{outline:3px solid var(--c-white);outline-offset:3px}

@media(max-width:1024px){
  .nf5f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nf5f-cta__band{grid-template-columns:1fr;padding:var(--s7) var(--s6)}
}
@media(max-width:767px){
  .nf5f-hero{padding:calc(76px + var(--s7)) 0 var(--s7)}
  .nf5f-routes{padding:var(--s7) 0 var(--s8)}
  .nf5f-cta{padding-bottom:var(--s8)}
}
@media(max-width:519px){
  .nf5f-search{flex-direction:column}
  .nf5f-search .btn{width:100%}
  .nf5f-grid{grid-template-columns:1fr}
  .nf5f-card{min-height:0}
  .nf5f-cta__band{padding:var(--s6) var(--s5)}
  .nf5f-cta__actions{flex-direction:column}
  .nf5f-cta__actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .nf5f-card,.nf5f-card__go,.nf5f-card__go svg,.nf5f-home svg{transition:none}
  .nf5f-card:hover,.nf5f-card:hover .nf5f-card__go svg,.nf5f-home:hover svg{transform:none}
}