/* ============================================================
   QFINITY Design System - Quick CSS
   Stand: 2026-05-28
   ============================================================
   Einmalig einfuegen unter:
     Enfold -> Theme Options -> General Styling -> Quick CSS
   (alternativ: Design -> Customizer -> Zusaetzliches CSS,
    dort kein Soft-Limit)

   Danach traegt jeder Code-Block nur noch das Markup
   (qfinity-startseite-markup.html, qfinity-ki-gxp-markup.html),
   kein <style>-Block mehr noetig.
   ============================================================ */

.qfai{
  --qf-orange:#E05000;
  --qf-orange-dark:#B64000;
  --qf-gold:#f5a623;     /* sattes Gold: Verlaufs-Mitte der HERO2-Headline + Zitat */
  --qf-orange-bright:#ff6b1a; /* heller Orange-Glow: Verlaufs-Start der HERO2-Headline */
  --qf-graphite:#53575A;
  --qf-dark:#141414;
  --qf-dark-2:#232527;
  --qf-soft:#f5f2ef;
  --qf-paper:#ffffff;
  --qf-line:rgba(83,87,90,.16);
  --qf-muted:#6b7074;
  --qf-text:#24272a;
  --shadow-soft:0 16px 48px rgba(0,0,0,.10);
  --shadow-card:0 12px 34px rgba(20,20,20,.07);
  --radius:22px;
  /* ===== KANONISCHE DESIGN-SKALEN (v2.32.0, "Visuelle Ruhe") - VERBINDLICH =====
     Ziel: weniger distinkte Werte = ruhigeres Gesamtbild. NEUE Werte MUESSEN aus diesen
     Mengen kommen (kein bespoke clamp/px/weight pro Komponente mehr). Durchgesetzt durch
     einmaligen Snap aller Bestandswerte (.qfinity-skill-eval/consolidate.py).
     - SCHRIFTGROESSEN (px): 12 14 16 18 22 28 38 52 70  (>=80px nur dekorativ/Watermark)
     - SCHRIFTGEWICHTE:      400 600 700 800 900
     - RADIEN:               8 16 22 999 (+50%)
     - SCHATTEN:             --shadow-card / --shadow-soft (+ gezielte Spezial-Schatten)
     - TEXT auf dunkel:      rgba(255,255,255,.93) stark / .72 gedaempft (NUR color:, nie Border/Fill)
     - HIERARCHIE:           h1 (clamp .. 56) > h2 (clamp .. 52) > h3 (22/28) - h1 IMMER groesste,
                             aber zurueckhaltend (nicht dominant). */
  /* ===== SPACING-SKALA (v2.102, "Vertikaler Rhythmus") - VERBINDLICH =====
     Die EINZIGEN erlaubten vertikalen Abstandswerte ab 10px im .qfai-Sektionssystem
     (unter 10px: freie Mikro-Justage; Hero/CTA-Interna, Controls-Geometrie und die
     Systeme ausserhalb .qfai [single-post, Glossar, Suche, Footer] haben eigenes Layout).
     Abstaende gehoeren dem LAYOUT (Owl-Selektor unten), nicht der Komponente: Komponenten
     tragen margin:0. Naehe = Zugehoerigkeit - je verwandter zwei Bloecke, desto naeher.
     Gate: Tools/check-spacing.py. SG-Sektion "Vertikaler Rhythmus". */
  --qf-s1:4px;    /* micro: Icon-Feinjustage */
  --qf-s2:8px;    /* innerhalb einer Textgruppe (strong -> p, Zahl -> Label) */
  --qf-s3:12px;   /* Kicker -> Ueberschrift; enge Listen-Items */
  --qf-s4:16px;   /* Karten-Binnenabstand klein; Block -> zugehoerige Notice */
  --qf-s5:24px;   /* Karten-Padding-Basis; Listenzeilen */
  --qf-s6:32px;   /* verwandte Bloecke (Standard-Flow); Lead -> Designelement (v2.107: 32er-Klammer) */
  --qf-s7:40px; /* Themenwechsel; H2 -> Lead. v2.108: FEST statt clamp(40,4.5vw,56) - Oliver: konstanter Wert auf allen Breiten */
  --qf-s8:clamp(56px,6vw,80px);   /* grosse Zaesur (Feature->Feature) + Section-Padding vertikal */
  /* Semantische Rollen (nur diese in Komponenten-CSS verwenden) */
  --qf-flow-sm:var(--qf-s4);
  --qf-flow:var(--qf-s6);      /* Standard zwischen Geschwistern im .qf-container (v2.102: 24 -> 32) */
  --qf-flow-lg:var(--qf-s7);   /* nach heading-block/Lead + vor schweren Bloecken (v2.102: 36 -> 40-56) */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--qf-text);background:#fff;line-height:1.5;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow-x:hidden;
}
.qfai *{box-sizing:border-box}
.qfai a{color:inherit;text-decoration:none}
/* Safari/WebKit zeigt bei cursor:auto ueber Links den PFEIL statt der Hand (Chromium setzt
   pointer per UA-Stylesheet, WebKit nicht - Oliver-Befund 2026-07-18, "Projekten"-Textlink).
   Expliziter Pointer site-weit auf alles Klickbare. */
#top a[href],.qfai a[href],.qfai-footer a[href]{cursor:pointer}
.qfai a:not(.btn):not(.textlink):not(.related-card):not(.encyclopedia-tooltip):not(.encyclopedia):not(.qf-extref){color:inherit!important;text-decoration:none!important;border-bottom:none!important}
/* Glossar-Links (Encyclopedia-Plugin: a.encyclopedia im Server-HTML, a.encyclopedia-tooltip
   als Tooltip-Variante). Link-Doktrin SG v2.115 (2026-07-18): Glossar-Links ORANGE +
   UNTERSTRICHEN - klar als Link erkennbar und durch die Unterstreichung von internen
   Seiten-Links (orange OHNE Unterstreichung) unterscheidbar. Live-Stand 2026-07-18: die
   Auto-Links rendern auf Posts + Glossar-Einzelseiten (dort deckt sie bereits
   body.single-post/.single-encyclopedia .entry-content a = orange + feine Unterlinie);
   diese .qfai-Regel greift, sobald Links auf .qfai-Seiten auftauchen. */
.qfai :is(a.encyclopedia-tooltip,a.encyclopedia),#top .qfai :is(a.encyclopedia-tooltip,a.encyclopedia),#wrap_all #top .qfai :is(a.encyclopedia-tooltip,a.encyclopedia){color:var(--qf-orange-bright)!important;text-decoration:underline!important;text-decoration-thickness:1px;text-underline-offset:3px;border-bottom:none!important;cursor:help;transition:color .15s ease}
.qfai :is(a.encyclopedia-tooltip,a.encyclopedia):hover,#top .qfai :is(a.encyclopedia-tooltip,a.encyclopedia):hover{color:var(--qf-orange-dark)!important}
.qfai .dark :is(a.encyclopedia-tooltip,a.encyclopedia):hover,#top .qfai .dark :is(a.encyclopedia-tooltip,a.encyclopedia):hover{color:var(--qf-gold)!important}
.qfai .related-card{text-decoration:none!important}
.qfai .qf-container{max-width:1240px;margin:0 auto}
.qfai .hero{position:relative;min-height:560px;padding:clamp(116px,10vw,176px) clamp(22px,4.5vw,60px) clamp(56px,5.5vw,80px);color:#fff;background:radial-gradient(circle at 80% 24%,rgba(224,80,0,.30),transparent 31%),radial-gradient(circle at 14% 82%,rgba(255,255,255,.07),transparent 25%),linear-gradient(135deg,#111 0%,#242629 50%,#53575A 100%);overflow:hidden}
.qfai .hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.052) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;opacity:.44;mask-image:linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.56),rgba(0,0,0,.18))}
.qfai .hero:after{content:"";position:absolute;right:-150px;top:70px;width:520px;height:520px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 38px rgba(255,255,255,.022),inset 0 0 0 82px rgba(224,80,0,.032),0 0 100px rgba(224,80,0,.18)}
.qfai .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
/* Hero-Bild als echtes <img> (Optimole: WebP + responsive srcset + CDN) statt CSS-bg.
   Dunkler Links-Gradient als Overlay (::after) fuer die Headline-Lesbarkeit. img margin:0 = Enfold-Reset. */
.qfai .hero .hero-figure{position:absolute;inset:0;z-index:1;overflow:hidden}
.qfai .hero .hero-figure img,#top .qfai .hero .hero-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;margin:0;padding:0;border-radius:0;max-width:none}
.qfai .hero .hero-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,18,.97) 0%,rgba(17,17,18,.92) 26%,rgba(17,17,18,.66) 56%,rgba(17,17,18,.50) 100%)}
.qfai .eyebrow{display:inline-flex;gap:10px;align-items:center;padding:8px 13px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.07);border-radius:999px;text-transform:uppercase;letter-spacing:.105em;font-weight:800;font-size:12px;color:rgba(255,255,255,.72);margin-bottom:20px}
.qfai .dot{width:8px;height:8px;border-radius:50%;background:var(--qf-orange);box-shadow:0 0 16px rgba(224,80,0,.85)}
.qfai h1,#top .qfai h1,#wrap_all #top .qfai h1{font-size:clamp(34px,3.9vw,56px)!important;line-height:1.05!important;letter-spacing:-.022em!important;margin:0;font-weight:800!important;max-width:840px;text-transform:none!important;font-family:inherit!important}
.qfai .hero h1{color:var(--qf-orange)!important}
.qfai h2{font-size:clamp(38px,3.6vw,52px)!important;line-height:1.10!important;letter-spacing:-.035em!important;margin:0;color:var(--qf-dark)!important;font-weight:700!important;max-width:960px;text-transform:none!important;font-family:inherit!important}
.qfai h3{font-size:22px!important;line-height:1.22!important;letter-spacing:-.018em!important;margin:0 0 12px;color:var(--qf-dark)!important;font-weight:700!important;text-transform:none!important;font-family:inherit!important}
.qfai p{font-size:16px;line-height:1.62}
/* Fliesstext-Betonung = KURSIV (SG v2.115, Oliver 2026-07-18): Enfold faerbt <strong> via
   #top strong theme-orange (#EA5A0C) - Nicht-Link-Text sah aus wie ein Link. Doktrin:
   Hervorhebung ist Links vorbehalten; Betonung in p/li/td rendert kursiv in Lauffarbe,
   nicht fett, nicht farbig. Ausnahmen mit eigener strong-Regel: .legal-content
   (Rechtsseiten-Labels fett-dunkel), .hero2-body (Hero-Betonung weiss-fett); Titel-strongs
   in Karten/FAQ/Stack/Notice/Aurora stehen nicht in p/li/td und bleiben unberuehrt. */
.qfai :is(p,li,td):not(.hero2-body):not(.legal-content *) strong,#top .qfai :is(p,li,td):not(.hero2-body):not(.legal-content *) strong,#wrap_all #top .qfai :is(p,li,td):not(.hero2-body):not(.legal-content *) strong{color:inherit!important;font-weight:400;font-style:italic}
.qfai .lead{font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:rgba(255,255,255,.72);max-width:680px;margin:24px 0 0}
.qfai .actions{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:30px;align-items:center}
/* Sekundaer-Aktion als Textlink NEBEN einem Button: vertikal zentriert, kein Solo-margin-top (v2.38.1) */
.qfai .actions .textlink{margin-top:0}
.qfai .btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:13px 21px;font-weight:800;font-size:14px}
.qfai .btn-primary{background:var(--qf-orange);color:#fff!important;box-shadow:0 14px 34px rgba(224,80,0,.30)}
.qfai .btn-secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);color:#fff!important}
/* Button-Hover-Glow (v2.36.3, SG v2.87): verlinkende Pills als Link kenntlich - gleiche Gold-Ring+Shine-Sprache wie .ai-panel a.stack-item:hover */
.qfai .btn{transition:box-shadow .22s ease,transform .22s ease,background .22s ease,border-color .22s ease}
.qfai .btn-primary:hover,.qfai .btn-primary:focus-visible{box-shadow:0 14px 34px rgba(224,80,0,.34),0 0 0 1px var(--qf-gold),0 0 16px rgba(245,166,35,.22);transform:translateY(-2px)}
.qfai .btn-secondary:hover,.qfai .btn-secondary:focus-visible{border-color:var(--qf-gold);box-shadow:0 0 0 1px var(--qf-gold),0 0 16px rgba(245,166,35,.20);transform:translateY(-2px)}
.qfai .btn:focus-visible{outline:2px solid var(--qf-gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.qfai .btn{transition:none}.qfai .btn-primary:hover,.qfai .btn-primary:focus-visible,.qfai .btn-secondary:hover,.qfai .btn-secondary:focus-visible{transform:none}}
/* ---- HERO3 GLOBAL: alle .hero-Seiten in Goldsprache (Variante A) ----------
   Zieht die HERO3-Optik site-weit auf das Master-Hero-Layout, OHNE Markup-Edit
   oder Re-Push: goldener Pill-Eyebrow + Dot, goldene Panel-Nummern, warmer
   Gold-Glow + Headline als durchgehender Orange-Gold-Verlauf. Der Verlauf liegt
   am <h1> und clippt sauber durch die reveal-words-Wort-Spans (empirisch
   verifiziert). Die EXPLIZITE Variante <div class="hero hero3"> (cream-Basis +
   ein .qf-h-grad-Akzent) bleibt via :not(.hero3) unberuehrt. */
.qfai .hero{background:radial-gradient(circle at 16% 30%,rgba(245,166,35,.20),transparent 42%),radial-gradient(circle at 86% 88%,rgba(255,107,26,.08),transparent 40%),linear-gradient(135deg,#111 0%,#242629 50%,#53575A 100%)}
.qfai .hero:after{box-shadow:inset 0 0 0 38px rgba(255,255,255,.022),inset 0 0 0 82px rgba(245,166,35,.05),0 0 100px rgba(245,166,35,.20)}
/* Eyebrow bewusst NICHT vergoldet (Entscheidung v2.31.43): weisser Text + oranger
   Dot liest kontrastreicher als Gold-auf-Dunkel. Nur Headline/Panel/Glow tragen Gold. */
.qfai .hero .stack-number{background:rgba(245,166,35,.22)}
.qfai .hero:not(.hero3) h1,#top .qfai .hero:not(.hero3) h1,#wrap_all #top .qfai .hero:not(.hero3) h1{background:linear-gradient(120deg,var(--qf-orange-bright) 0%,var(--qf-gold) 55%,var(--qf-orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;color:transparent!important;padding-bottom:.12em;margin-bottom:-.12em} /* padding/margin-Paar: background-clip:text malt nur innerhalb der Box - ohne Bodenzugabe werden Unterlaengen (g/p/y) der letzten Zeile abgeschnitten (Oliver-Fund beratung-H1 2026-07-19); negative margin haelt den Hero-Rhythmus */
/* --------------------------------------------------------------------------- */
/* ---- HERO2 (Statement-Hero, zweite Variante) -----------------------------
   Einspaltig, drei-tonige Headline, Zitat-Balken, Dual-CTA. Vollflaechiges
   Hintergrundbild rechts (separat hochgeladen, als background-image am .hero2);
   Text links auf einem dunklen Legibility-Scrim. Bewusst anders als der
   Master-Hero (.hero) mit Pill-Eyebrow + AI-Panel-Grid. */
.qfai .hero2{position:relative;min-height:640px;display:flex;align-items:center;padding:clamp(116px,10vw,176px) clamp(22px,4.5vw,60px) clamp(64px,6vw,92px);color:#fff;overflow:hidden;background:#0d0e0f;background-image:radial-gradient(circle at 80% 46%,rgba(224,80,0,.26),transparent 48%),radial-gradient(circle at 92% 30%,rgba(246,162,74,.14),transparent 40%),linear-gradient(118deg,#0e0f11 0%,#191a1c 44%,#2a231d 100%);background-size:cover;background-position:center}
.qfai .hero2:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,9,.90) 0%,rgba(8,8,9,.78) 30%,rgba(8,8,9,.55) 52%,rgba(8,8,9,.15) 74%,transparent 100%)}
.qfai .hero2-inner{position:relative;z-index:2;max-width:800px;width:100%}
.qfai :is(.hero2,.hero4) .eyebrow2{display:block;text-transform:uppercase;letter-spacing:.135em;font-weight:800;font-size:clamp(12px,1.05vw,14px);color:var(--qf-gold);margin:0 0 22px}
.qfai :is(.hero2,.hero4) h1,#top .qfai :is(.hero2,.hero4) h1,#wrap_all #top .qfai :is(.hero2,.hero4) h1{font-size:clamp(38px,5vw,70px)!important;line-height:1.12!important;letter-spacing:-.03em!important;font-weight:900!important;margin:0;max-width:none;color:#fff!important}
.qfai :is(.hero2,.hero4) h1 .qf-h-line{display:block}
.qfai :is(.hero2,.hero4) h1 .qf-h-cream{color:var(--qf-soft)!important;-webkit-text-fill-color:var(--qf-soft)!important}
.qfai :is(.hero2,.hero4) h1 .qf-h-grad{background:linear-gradient(120deg,var(--qf-orange-bright) 0%,var(--qf-gold) 60%,var(--qf-orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;color:transparent!important;padding-bottom:.12em} /* Unterlaengen-Zugabe wie Block-H1; inline-Padding verschiebt kein Layout */
.qfai :is(.hero2,.hero4) h1 .qf-h-silver{color:#cdd0d2!important;-webkit-text-fill-color:#cdd0d2!important}
.qfai .hero2-quote{border-left:3px solid var(--qf-orange);padding-left:22px;margin:36px 0 0;max-width:640px}
.qfai .hero2-quote p{font-style:italic;font-size:clamp(18px,1.7vw,22px);line-height:1.34;margin:0}
.qfai .hero2-quote .qf-q-lead{color:var(--qf-gold);font-weight:700}
.qfai .hero2-quote .qf-q-sub{color:var(--qf-gold);opacity:.82;font-weight:600}
.qfai .hero2-body{margin:30px 0 0;max-width:680px;font-size:clamp(16px,1.2vw,18px);line-height:1.62;color:rgba(255,255,255,.72)}
.qfai .hero2-body strong{color:#fff;font-weight:700}
.qfai .hero2-body em{font-style:italic}
.qfai :is(.hero2,.hero4) .actions{margin-top:34px}
/* --------------------------------------------------------------------------- */
/* ---- HERO4 (Statement-Hero MIT rechtem "Worauf es ankommt"-Panel) ---------
   HERO2-Inhaltssprache (schlichter Gold-Eyebrow .eyebrow2, drei-tonige
   Gold-Headline, Zitat .hero2-quote, Body .hero2-body, Dual-CTA) ABER zweispaltig
   mit dem AI-Panel/Stack rechts (wie Master/HERO3) statt Hintergrundbild. Dunkler
   Verlauf + Gold-Glow; kein Bild/Scrim noetig, da die rechte Spalte das Panel traegt.
   Markup: <div class="hero4"><div class="hero4-grid"><div class="hero4-main">…</div>
   <aside class="ai-panel">…</aside></div></div>. Panel-Akzente gold (s. .stack-number). */
.qfai .hero4{position:relative;min-height:600px;display:flex;align-items:center;padding:clamp(116px,10vw,176px) clamp(22px,4.5vw,60px) clamp(64px,6vw,92px);color:#fff;overflow:hidden;background:#0d0e0f;background-image:radial-gradient(circle at 20% 32%,rgba(245,166,35,.17),transparent 44%),radial-gradient(circle at 30% 92%,rgba(255,107,26,.08),transparent 40%),linear-gradient(118deg,#0e0f11 0%,#15161a 56%,#181a1e 100%)}
.qfai .hero4-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,4vw,56px);align-items:center;max-width:1240px;width:100%;margin:0 auto}
.qfai .hero4 .ai-panel{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.qfai .hero4 h1,#top .qfai .hero4 h1,#wrap_all #top .qfai .hero4 h1{font-size:clamp(38px,3.7vw,52px)!important}
.qfai .hero4 .hero2-quote{margin-top:30px}
.qfai .hero4 .hero2-body{max-width:none;margin-top:26px}
/* --------------------------------------------------------------------------- */
/* ---- HERO3 (Master-Hero-Layout in HERO2-Goldsprache) ---------------------
   Modifier auf .hero -> Markup: <div class="hero hero3"> mit dem gewohnten
   hero-grid + eyebrow(+dot) + ai-panel/stack. HERO3 erbt das komplette
   Master-Layout und faerbt nur um: Gold-Verlaufs-Akzent in der Headline
   (Span .qf-h-grad), goldener Pill-Eyebrow + Dot, goldene Panel-Akzente und
   warmer Gold-Glow statt reinem Orange. Cream-Basistext in der Headline.
   Verlaufs-Selektor bewusst element-agnostisch (nicht an h1 gebunden), damit
   er auch in Style-Guide-Demos (.h1-Div) greift. */
.qfai .hero3{background:radial-gradient(circle at 80% 24%,rgba(245,166,35,.26),transparent 32%),radial-gradient(circle at 14% 82%,rgba(255,107,26,.10),transparent 26%),linear-gradient(135deg,#111 0%,#242629 50%,#53575A 100%)}
.qfai .hero3:after{box-shadow:inset 0 0 0 38px rgba(255,255,255,.022),inset 0 0 0 82px rgba(245,166,35,.05),0 0 100px rgba(245,166,35,.20)}
/* Eyebrow/Dot bleiben klassisch (weisser Text + oranger Dot) - s. Entscheidung v2.31.43 */
.qfai .hero3 h1,#top .qfai .hero3 h1,#wrap_all #top .qfai .hero3 h1{color:var(--qf-soft)!important}
.qfai .hero3 .qf-h-grad{background:linear-gradient(120deg,var(--qf-orange-bright) 0%,var(--qf-gold) 60%,var(--qf-orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent!important;color:transparent!important;padding-bottom:.12em} /* Unterlaengen-Zugabe wie Block-H1; inline-Padding verschiebt kein Layout */
.qfai :is(.hero3,.hero4) .stack-number{background:rgba(245,166,35,.22)}
/* --------------------------------------------------------------------------- */
.qfai .ai-panel{border:1px solid rgba(255,255,255,.16);border-radius:22px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);box-shadow:0 22px 68px rgba(0,0,0,.25);padding:26px}
.qfai .panel-title{text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.72);font-weight:800;font-size:12px;margin-bottom:16px}
.qfai .stack{display:grid;gap:12px}
.qfai .stack-item{display:grid;grid-template-columns:38px 1fr;gap:13px;align-items:start;padding:15px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.095)}
.qfai .stack-number{width:38px;height:38px;border-radius:16px;background:rgba(224,80,0,.20);display:grid;place-items:center;font-weight:900;color:#fff}
.qfai .stack-item strong{display:block;margin-bottom:4px;font-size:16px;color:#fff!important}
.qfai .stack-item span{display:block;font-size:14px;line-height:1.42;color:rgba(255,255,255,.72)}
/* Panel-Saeule als LINK (v2.36.1): Hover-/Focus-Affordance - Farbwechsel ins Orange/Gold,
   Gold-Rand + Orange-Glow + leichter Rechts-Versatz signalisieren die Klickbarkeit. */
.qfai .ai-panel a.stack-item{text-decoration:none;color:inherit;cursor:pointer;transition:background .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.qfai .ai-panel a.stack-item:hover,.qfai .ai-panel a.stack-item:focus-visible{background:rgba(224,80,0,.14);border-color:var(--qf-gold);box-shadow:0 0 0 1px var(--qf-gold),0 0 14px rgba(245,166,35,.16);transform:translateX(3px)}
.qfai .ai-panel a.stack-item:focus-visible{outline:2px solid var(--qf-gold);outline-offset:2px}
.qfai .ai-panel a.stack-item:hover .stack-number,.qfai .ai-panel a.stack-item:focus-visible .stack-number{background:var(--qf-orange)}
.qfai .ai-panel a.stack-item:hover strong,.qfai .ai-panel a.stack-item:focus-visible strong{color:var(--qf-gold)!important}
@media(prefers-reduced-motion:reduce){.qfai .ai-panel a.stack-item{transition:none}.qfai .ai-panel a.stack-item:hover,.qfai .ai-panel a.stack-item:focus-visible{transform:none}}
.qfai .section{padding:var(--qf-s8) clamp(22px,4.5vw,60px)} /* vertikal = s8 (v2.102 von 58-84 auf die Skala gesnappt; bewusst KEINE groessere s9-Stufe - Entscheid 2026-07-13) */
/* ====== VERTIKALER RHYTHMUS (v2.102) - Owl-Selektor, gescopt auf Content-Sektionen ======
   Steuert den Abstand ZWISCHEN direkten Geschwistern im .qf-container. Hero + CTA sind
   AUSGENOMMEN (eigenes Layout). Komponenten tragen margin:0 - der GESAMTE vertikale
   Rhythmus entsteht HIER auf Layout-Ebene (keine Eigen-Margins, keine Ausnahme-Pflaster).
   Markup-Realitaet: Tabellen stehen als .qf-table-wrap im Container, der Lead als
   GESCHWISTER neben dem .heading-block (daher die explizite Paarregel unten). */
.qfai .section:not(.cta) > .qf-container > * + *{margin-top:var(--qf-flow)}
/* Themenwechsel: nach dem Heading-Block und vor schweren Bloecken beginnt ein eigener Gedanke */
.qfai .section:not(.cta) > .qf-container > .heading-block + *,
.qfai .section:not(.cta) > .qf-container > :not(.kicker) + :is(.metrics,.two-grid,.three-grid,.qf-feature,.big-quote,.qf-testimonials,.qf-table-wrap,.qf-timeline,.checkgrid,.qf-iconlist,.qf-gaplist,.related,.kicker,.heading-block){margin-top:var(--qf-flow-lg)} /* .kicker/.heading-block in der Liste (v2.40.1): ein Kicker bzw. heading-block MITTEN in der Sektion beginnt einen neuen Unterkontext - ohne flow-lg oben stuende die Ueberschrift naeher am Vorgaenger (32) als an ihrem eigenen Inhalt (40-56), Invariante "ueber Neuanfang > darunter" verletzt (Fund beim Inline-Sweep: 15 heading-blocks + 8 Kicker trugen genau dafuer Inline-Margins 26-36px). .related = schweres Grid wie two-/three-grid. :not(.kicker) als Vorgaenger, damit die Kicker-Paarregel unten gewinnt, wenn der Kicker einen schweren Block direkt beschriftet */
/* Paarregel 1 (v2.105 GETAUSCHT, Oliver "oben mehr, unten weniger"): H2 -> Lead = flow-lg -
   die Display-H2 ist eine abgeschlossene Aussage und steht frei; der Lead gehoert zum Element,
   das er ankuendigt (Paarregel 1b), nicht zur Ueberschrift. Gilt als Geschwister wie im Block. */
.qfai .section:not(.cta) > .qf-container > .heading-block + .section-lead{margin-top:var(--qf-flow-lg)}
/* Paarregel 1b (v2.105): Lead -> Designelement = s5 (24) - der Lead kuendigt das Element an
   (oft woertlich mit Doppelpunkt) und bindet an DIESES. Steht NACH der lg-Liste und gewinnt
   per Source-Order bei gleicher Spezifitaet. .big-quote ist AUSGENOMMEN: die Quote ist die
   Schluss-Zaesur des Bereichs (v2.104), kein angekuendigtes Element - sie behaelt flow-lg. */
.qfai .section:not(.cta) > .qf-container > .section-lead + :is(.metrics,.two-grid,.three-grid,.qf-feature,.qf-testimonials,.qf-table-wrap,.qf-timeline,.checkgrid,.qf-iconlist,.qf-gaplist,.related){margin-top:var(--qf-s6)} /* v2.107: Lead klammert das Element symmetrisch mit dem 32er-Flow (vorher s5/24) */
/* Paarregel 2: Block + seine zugehoerige Notice/Fussnote = bewusst eng (flow-sm). */
.qfai .section:not(.cta) > .qf-container > :is(.qf-table-wrap,.big-quote) + .qf-notice{margin-top:var(--qf-flow-sm)}
/* Paarregel 3: freistehender Kicker + sein Inhalt = s3 (wie Kicker -> H2 im heading-block);
   der Kicker selbst bekommt flow-lg VOR sich (lg-Liste) -> Invariante oben > unten. */
.qfai .section:not(.cta) > .qf-container > .kicker + *{margin-top:var(--qf-s3)}
/* Sektions-Verschmelzung: zwei gleichfarbige Sektionen (soft->soft / dark->dark) stossen
   zusammen -> oberes Padding der zweiten weg, keine doppelte Luecke (ersetzt die 16 Inline-
   padding-top:0 an den Related-Sektionen). Weiss->weiss bewusst NICHT automatisch (Startseite/
   Unternehmen sind so komponiert). */
.qfai .section.soft + .section.soft,
.qfai .section.dark + .section.dark{padding-top:0}
/* Uebergangs-big-quote laeuft IM FLUSS als letztes Kind der Vorgaenger-Sektion (Owl + :last-child-
   Regel) - NIE als eigene .section. Die fruehere .is-quote-break-Eigensektion ist ab v2.31.92
   entfernt: eine eigene Sektion stapelte das volle Padding BEIDER Nachbar-Sektionen (~136px tote
   Flaeche je Seite, gemessen) - der 26px-Cushion konnte nur das eigene Padding kappen. SG v2.71. */
.qfai .soft{background:var(--qf-soft)}
/* Farb-Alternation (SG v2.75, PRIMAERE Abgrenzung): jeder logische Kontext = eigene .section;
   benachbarte Kontexte tragen NIE dieselbe Hintergrundfarbe (weiss <-> soft im Wechsel, .dark als
   bewusster Akzent zaehlt als eigene Farbe). Komponenten sind hintergrund-agnostisch. Die
   Alternation wird ueber die Sektions-KLASSEN im Markup gesteuert (lint-geprueft), nicht ueber
   Spezial-CSS - daher hier keine per-Komponente-Divider/Hintergrund-Hacks mehr. */
.qfai .dark{background:linear-gradient(135deg,#171717,#53575A);color:#fff}
.qfai .dark h2{color:var(--qf-orange)!important}
.qfai .kicker{color:var(--qf-orange);text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:900;margin-bottom:12px}
.qfai .section-lead{color:var(--qf-muted);font-size:18px;line-height:1.60;max-width:920px;margin:var(--qf-flow-lg) 0 0} /* H2 -> Lead = flow-lg (v2.105 getauscht), gilt IM heading-block wie als Geschwister (Paarregel oben) */
.qfai .dark .section-lead{color:rgba(255,255,255,.72)}
.qfai .heading-block{max-width:980px;margin-bottom:0} /* Abstand nach unten kommt NUR vom Owl (flow-lg bzw. Lead-Paarregel) - v2.102, vorher 34px Eigen-Margin */
/* ---- Legal / Lese-Prosa (.legal-content) - Datenschutz, Impressum, AGB ----
   Generische Langtext-Prosa in .qfai, defensiv gegen Enfolds base.css
   (ul/li/h4-h6 erben sonst Theme-Defaults). Lesespalte ~760px. Seite hell;
   Header solide (kein Hero) -> Section traegt Top-Abstand fuer den Header. */
.qfai .section.legal{background:#fff}
.qfai .legal-content{color:var(--qf-text);font-size:16px;line-height:1.72;max-width:760px}
.qfai .legal-content > :first-child{margin-top:0}
.qfai .legal-content h2{font-size:22px!important;line-height:1.25!important;margin:42px 0 12px!important;color:var(--qf-dark)!important;letter-spacing:-.01em!important;max-width:none!important;font-weight:700!important}
.qfai .legal-content h3{font-size:18px!important;line-height:1.3!important;margin:32px 0 10px!important;color:var(--qf-dark)!important;font-weight:700!important}
.qfai .legal-content h4{font-size:16px!important;line-height:1.35!important;margin:24px 0 8px!important;color:var(--qf-dark)!important;font-weight:700!important}
.qfai .legal-content h5{font-size:16px!important;line-height:1.4!important;margin:20px 0 6px!important;color:var(--qf-dark)!important;font-weight:700!important}
.qfai .legal-content p{margin:0 0 14px;color:var(--qf-text)}
.qfai .legal-content ul,.qfai .legal-content ol{margin:0 0 14px;padding-left:22px;list-style-position:outside}
.qfai .legal-content ul{list-style:disc}
.qfai .legal-content ol{list-style:decimal}
.qfai .legal-content li{margin:4px 0;padding:0;line-height:1.6;color:var(--qf-text)}
.qfai .legal-content a{color:var(--qf-orange);text-decoration:underline;text-underline-offset:2px}
.qfai .legal-content a:hover{color:var(--qf-orange-dark)}
.qfai .legal-content strong{font-weight:700;color:var(--qf-dark)}
.qfai .legal-content sup{font-size:.7em;line-height:0}
.qfai .two-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* v2.106 Gap-Skala: Karten-Fuge 16 < Karten-Padding 24 (Kante trennt, Luft nur Fuge) */
.qfai .three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.qfai .card{background:#fff;border:1px solid var(--qf-line);border-radius:var(--radius);padding:var(--qf-s5);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.qfai .card:after{content:"";position:absolute;right:-52px;top:-52px;width:150px;height:150px;border-radius:50%;background:rgba(224,80,0,.065)}
.qfai .card.dark-card{background:linear-gradient(135deg,#18191a,#3e4245);color:#fff}
.qfai .card.dark-card h3{color:#fff!important}
.qfai .card.dark-card p,.qfai .card.dark-card li{color:rgba(255,255,255,.72)}
.qfai .card p,.qfai .card li{color:var(--qf-muted);font-size:16px;line-height:1.56}
.qfai .card ul{padding-left:20px;margin:var(--qf-s3) 0 0}
.qfai .icon{width:38px;height:38px;border-radius:16px;background:var(--qf-orange);color:white;display:grid;place-items:center;font-weight:900;margin-bottom:var(--qf-s4);font-size:14px}
/* Big-Quote (v2.102): grosses orange Auftakt-Anfuehrungszeichen (66-Stil) laeuft als
   STATISCHER Block IM Kartenfluss (eigene Zeile + s3 zum Text) statt als absolut
   positionierter Padding-Treiber -> die Karte ist innen optisch symmetrisch (s6 rundum,
   vorher 58/40/36 kopflastig). margin:0 - der Aussenabstand kommt NUR vom Owl (flow-lg);
   damit entfallen die frueheren drei Ausnahme-Regeln (:last-child-Kappung, .approach-Fall,
   heading-block:has-Pflaster) ersatzlos. Dekoratives Zeichen (sprachneutral). */
.qfai .big-quote{position:relative;font-size:clamp(22px,2.25vw,28px);line-height:1.24;letter-spacing:-.026em;font-weight:800;padding:var(--qf-s6) 40px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-card);color:var(--qf-dark);margin:0} /* Radius = SG-Skala 22px */
.qfai .big-quote::before{content:"\201C";display:block;height:.55em;margin-bottom:var(--qf-s3);font:900 clamp(60px,6vw,96px)/0.72 Georgia,'Times New Roman',serif;color:var(--qf-orange)}
.qfai .logic-flow{display:grid;grid-template-columns:1fr 70px 1fr;gap:16px;align-items:center}
.qfai .connector{height:3px;background:linear-gradient(90deg,var(--qf-orange),rgba(224,80,0,.08));position:relative}
.qfai .connector:after{content:"";position:absolute;right:-3px;top:-5px;width:13px;height:13px;border-radius:50%;background:var(--qf-orange)}
.qfai .split-band{border-radius:22px;background:linear-gradient(135deg,#151515,#3d4144);color:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;padding:var(--qf-s6);box-shadow:var(--shadow-soft);position:relative;overflow:hidden}
.qfai .split-band:before{content:"";position:absolute;right:-170px;top:-190px;width:410px;height:410px;border-radius:50%;background:radial-gradient(circle,rgba(224,80,0,.27),transparent 64%)}
.qfai .split-title{position:relative;z-index:1;font-size:clamp(28px,3.1vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.035em}
.qfai .split-text{position:relative;z-index:1;color:rgba(255,255,255,.72)}
.qfai .split-text p{margin-top:0}
.qfai .dimension{background:#fff;border:1px solid var(--qf-line);border-radius:22px;padding:var(--qf-s5);box-shadow:var(--shadow-card);min-height:340px}
.qfai .num{font-size:38px;line-height:1;font-weight:900;color:var(--qf-orange);margin-bottom:var(--qf-s3)}
.qfai .dimension h3{font-size:28px!important}
.qfai .dimension ul{padding-left:20px;color:var(--qf-muted);line-height:1.53}
.qfai .dimension li{margin-bottom:7px}
.qfai .dimension p{font-size:16px;color:#4c5053}
.qfai .approach{background:#fff;border-radius:22px;border:1px solid var(--qf-line);box-shadow:var(--shadow-soft);padding:var(--qf-s6)}
.qfai .checkgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:0} /* Aussenabstand kommt vom Owl (flow-lg), v2.102 */
/* Haken absolut positioniert (NICHT flex) - sonst zerlegt der Auto-Glossar-
   Linker den Text in mehrere Flex-Items und die Woerter reissen auseinander. */
.qfai .check{position:relative;border-radius:16px;background:#f8f6f4;padding:16px 16px 16px 45px;color:#333;font-weight:700;font-size:16px;line-height:1.42}
.qfai .check:before{content:"✓";position:absolute;left:15px;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--qf-orange);color:white;font-weight:900;font-size:12px}
.qfai .related{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qfai .related-card{position:relative;border-radius:22px;background:linear-gradient(135deg,#fff,#f8f5f2);border:1px solid var(--qf-line);box-shadow:var(--shadow-card);padding:var(--qf-s5);overflow:hidden;transition:border-color .2s,box-shadow .2s}
/* Optionaler Bild-Slot (v2.90): Thumbnail oben, full-bleed ueber das Card-Padding, 16:9-Crop, runde Oberkante. Enfold-margin-Reset via explizites margin. */
/* max-width:none noetig - Enfold/WP img{max-width:100%} kappt sonst die calc(100%+48px)-
   Full-Bleed-Breite auf die Content-Box; margin-left:-24px zieht das Bild dann links buendig,
   rechts bleibt eine 48px-Luecke (asymmetrisch). Live gemessen (v2.38.2). Die 24/48px sind
   an das Card-Padding (s5) GEKOPPELT - zusammen aendern. */
.qfai .related-card .rc-media{display:block;width:calc(100% + 48px);max-width:none;margin:-24px -24px 16px;aspect-ratio:16/9;object-fit:cover;object-position:center;border-radius:22px 22px 0 0;background:#141414}
.qfai .related-card:hover{border-color:rgba(224,80,0,.42);box-shadow:var(--shadow-soft)}
.qfai .related-card .rc-link{color:var(--qf-dark)!important;text-decoration:none!important}
.qfai .related-card .rc-link::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.qfai .related-card strong{display:block;font-size:22px;line-height:1.18;letter-spacing:-.025em;color:var(--qf-dark)!important;margin-bottom:12px}
.qfai .related-card .rc-text{display:block;color:var(--qf-muted);font-size:14px;line-height:1.55;margin-bottom:8px}
.qfai .related-card .arrow{display:block;margin-top:8px}
.qfai .arrow{color:var(--qf-orange);font-weight:900}
/* Personen-/Founder-Profil (E-E-A-T) - SG v2.67. Foto links, Inhalt rechts; mobil gestapelt.
   img defensiv (margin:0) gegen Enfold base.css. */
.qfai .qf-profile{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;background:#fff;border:1px solid var(--qf-line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:32px}
.qfai .qf-profile-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block;margin:0}
.qfai .qf-profile-body{min-width:0}
.qfai .qf-profile-body h3{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--qf-dark)}
.qfai .qf-profile-role{color:var(--qf-orange);font-weight:800;font-size:14px;letter-spacing:.02em;margin-top:5px}
.qfai .qf-profile-body p{color:var(--qf-muted);font-size:16px;line-height:1.6;margin-top:var(--qf-s3)}
.qfai .qf-profile .pill-row{margin-top:var(--qf-s4)}
.qfai .qf-profile-links{display:flex;flex-wrap:wrap;gap:20px;margin-top:var(--qf-s4)}
@media(max-width:640px){.qfai .qf-profile{grid-template-columns:1fr;gap:22px;padding:24px}.qfai .qf-profile-photo{max-width:170px;aspect-ratio:1/1}}
.qfai .faq{max-width:900px}
.qfai .faq-item{border:1px solid var(--qf-line);border-radius:16px;background:#fff;padding:var(--qf-s5) 24px;margin-bottom:12px;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.qfai .faq-item strong{display:block;font-size:16px;margin-bottom:8px;color:var(--qf-dark)}
.qfai .faq-item p{margin:0;color:var(--qf-muted)}
/* CTA als abgesetzter dunkler Conversion-Block (boxed): heller Gutter aussen,
   dunkle Karte innen - grenzt klar von der Sektion darueber UND vom dunklen
   Footer darunter ab. */
/* CTA = dunkle Conversion-Karte, ZWEISPALTIG: Text (Headline weiss + gemuteter Lead) links,
   Buttons gestapelt rechts (oranger Primaer + ->, weisser Sekundaer). Faintes Signet statt
   Aurora. qfinity-cta.js normalisiert die uneinheitliche Button-Herkunft (bare <a>/inline-div/
   .actions) zu .cta-text + .cta-actions; das Grid greift via :has(.cta-actions) - ohne JS
   degradiert es sauber zum dunklen Block. */
.qfai .cta{background:var(--qf-soft);position:relative}
/* CTA-Aussenbalken kontrastiert mit dem vorigen Balken; folgt er auf soft -> auf weiss kippen. */
.qfai .section.soft + .cta{background:var(--qf-paper)}
.qfai .cta .qf-container{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1c1c1c 0%,#141414 48%,#0e0e0f 100%);
  border-radius:22px; padding:clamp(26px,2.6vw,38px) clamp(38px,4.5vw,70px);
  box-shadow:0 30px 70px rgba(0,0,0,.22);
}
/* faintes Signet-Wasserzeichen unten rechts (Marken-Anmutung) */
.qfai .cta .qf-container::after{
  content:""; position:absolute; right:-70px; bottom:-90px;
  width:clamp(240px,28vw,380px); height:clamp(240px,28vw,380px);
  background:url(../img/qfinity-signet-512.png) no-repeat center / contain;
  opacity:.07; pointer-events:none;
}
/* Zweispalt-Layout - nur wenn JS .cta-actions gesetzt hat */
.qfai .cta .qf-container:has(.cta-actions){
  display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(28px,4vw,64px);
  align-items:center; text-align:left;
}
.qfai .cta .qf-container:not(:has(.cta-actions)){ text-align:center }
.qfai .cta .cta-text{ grid-column:1; position:relative; z-index:1 }
.qfai .cta h2{ color:#fff !important; margin:0; max-width:none; font-size:clamp(28px,3.5vw,52px) !important; line-height:1.08 !important; letter-spacing:-.022em !important; font-weight:800 !important; }
.qfai .cta .cta-text p,.qfai .cta p{ color:rgba(255,255,255,.72); font-size:18px; line-height:1.62; margin:20px 0 0; max-width:46ch; position:relative; z-index:1 }
.qfai .cta .cta-actions{ grid-column:2; position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; align-items:stretch; justify-content:center }
/* Drei Buttons mit IDENTISCHER Optik (oranger Brand-Button): "Erstgespraech vereinbaren"
   + zwei weiterfuehrende Themen. Gilt site-weit, unabhaengig von der btn-primary/-secondary-
   Klasse im Markup (so werden auch Alt-CTAs automatisch uniform). */
/* Gleiche FORM (Groesse/Radius/Padding); erster Button = tiefes Brand-Orange ("Erstgespraech"),
   die zwei weiterfuehrenden Themen gefuellt, aber etwas heller (abgestuft). */
.qfai .cta .cta-actions .btn,#top .qfai .cta .cta-actions .btn{ width:100%; justify-content:center; border-radius:16px; padding:14px 24px; font-size:14px; font-weight:800;
  background:var(--qf-orange) !important; color:#fff !important; border:0 !important; box-shadow:0 10px 26px rgba(224,80,0,.26) }
.qfai .cta .cta-actions .btn:not(:first-child),#top .qfai .cta .cta-actions .btn:not(:first-child){ background:#ec6f33 !important; box-shadow:0 8px 22px rgba(236,111,51,.22) !important }
.qfai .cta .cta-actions .btn:not(:first-child):hover,#top .qfai .cta .cta-actions .btn:not(:first-child):hover{ background:#f07e46 !important }
.qfai .cta .cta-actions .btn::after{ content:""; }
/* .micro-Fusszeile entfaellt (per Wunsch geloescht) */
.qfai .cta .micro{ display:none }
.qfai .cta h2,.qfai .cta .cta-text p,.qfai .cta .micro{ text-shadow:0 2px 18px rgba(11,12,14,.45) }
/* Mobil: einspaltig gestapelt */
@media (max-width:760px){
  .qfai .cta .qf-container:has(.cta-actions){ grid-template-columns:1fr; gap:26px; }
  .qfai .cta .cta-text,.qfai .cta .cta-actions,.qfai .cta .micro{ grid-column:1 }
}
.qfai .micro{font-size:14px;color:#9aa0a4;margin-top:16px}
/* Startseiten-Ergaenzungen */
.qfai .metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.qfai .metric{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:var(--qf-s5) 16px;text-align:center}
.qfai .metric .mnum{font-size:clamp(38px,3vw,52px);line-height:1;font-weight:700;color:#fff;letter-spacing:-.03em;margin-bottom:var(--qf-s2)}
.qfai .metric .mlabel{font-size:14px;line-height:1.5;color:rgba(255,255,255,.93);font-weight:400}
/* Light/boxenlose Stats-Variante: grosse dunkle Zahlen + Label + Sublabel (z.B. Startseite "Leistungsversprechen") */
.qfai .metrics.plain{grid-template-columns:repeat(3,1fr);gap:32px} /* kantenlos -> Luft trennt (32), v2.106 */
.qfai .metrics.plain .metric{background:none;border:0;border-radius:0;padding:6px}
.qfai .metrics.plain .mnum{color:var(--qf-dark);font-size:clamp(52px,4.6vw,70px);font-weight:800;margin-bottom:12px}
.qfai .metrics.plain .mlabel{color:var(--qf-dark);font-weight:800;font-size:16px;line-height:1.3}
.qfai .metrics.plain .msub{color:var(--qf-muted);font-size:14px;line-height:1.5;margin-top:8px}
/* v2.102: die frueheren Sonderregeln .section-lead/p + .metrics (38px) und * + .pill-row (26px)
   sind ENTFERNT - .metrics steht in der Owl-flow-lg-Liste, .pill-row bekommt den Standard-Flow.
   Keine Ausnahme-Pflaster mehr; der Rhythmus kommt komplett aus dem Owl-System oben. */
/* Light-Stats auch auf dunklen Sektionen: weisse Zahlen/Labels */
.qfai .dark .metrics.plain .mnum{color:#fff}
.qfai .dark .metrics.plain .mlabel{color:#fff}
.qfai .dark .metrics.plain .msub{color:rgba(255,255,255,.72)}
/* Kundenband: horizontale Auto-Scroll-Marquee (CSS-only), je Zeile Kategorie-Label + laufende Namen */
.qfai .qf-clientband{margin-top:0;border-top:1px solid rgba(20,20,20,.10)} /* Aussenabstand kommt vom Owl, v2.102 */
.qfai .qf-cb-row{display:grid;grid-template-columns:210px 1fr;gap:32px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(20,20,20,.10)}
.qfai .qf-cb-label strong{display:block;color:var(--qf-orange);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.qfai .qf-cb-label span{color:var(--qf-muted);font-size:12px;line-height:1.45}
.qfai .qf-cb-viewport{overflow:hidden;padding:14px 0;margin:-14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.qfai .qf-cb-track{display:flex;align-items:center;gap:52px;width:max-content;animation:qf-cb-scroll 52s linear infinite}
.qfai .qf-cb-row:nth-child(even) .qf-cb-track{animation-direction:reverse}
.qfai .qf-cb-viewport:hover .qf-cb-track{animation-play-state:paused}
.qfai .qf-cb-name{white-space:nowrap;font-size:clamp(18px,1.9vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--qf-dark);opacity:.82}
/* Logo-Variante des Kundenbands (.qf-cb-logo): Logos statt Namen im scrollenden
   Band - in derselben weissen Box-Zelle wie die gxp-kunden-Logowall (.qf-lg-cell):
   weiss, Rahmen, gerundet, Logo grayscale+gedimmt -> Farbe + Lift on hover. */
.qfai .qf-cb-logo{flex:none;display:grid;place-items:center;width:178px;height:108px;padding:16px 22px;background:#fff;border:1px solid transparent;border-radius:16px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease} /* Ruhe-Rahmen entfaellt (SG v2.118, Oliver 2026-07-20): Logos frei auf Weiss, Hover-Kante bleibt */
.qfai .qf-cb-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.qfai .qf-cb-logo:hover{border-color:rgba(224,80,0,.4);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.qfai .qf-cb-logo:hover img{filter:grayscale(0);opacity:1}
/* Boxen brauchen weniger Abstand als die frueheren Text-Namen */
.qfai .qf-cb-track:has(.qf-cb-logo){gap:20px}
@keyframes qf-cb-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.qfai .qf-cb-track{animation:none}.qfai .qf-cb-viewport{overflow-x:auto}}
/* LOGO-WALL - .qf-logo-grid (v2.35): statisches Referenz-Logo-Raster, nach Segment gruppiert.
   Logos grayscale/gedimmt, Farbe + Lift on hover. Pendant zum Namens-Kundenband (.qf-clientband)
   fuer dedizierte Referenz-Seiten (gxp-kunden). Markup: .qf-logo-grid > .qf-lg-group > .qf-lg-head + .qf-lg-items > .qf-lg-cell > img
   v2.37: Cell-Padding 18->12px. Voraussetzung fuer einheitliche optische Groesse sind NORMALISIERTE
   Logo-Dateien (auf Inhalt zugeschnitten, einheitliches 3:2-Transparenz-Canvas) - sonst skaliert
   object-fit:contain den jeweiligen Datei-Canvas inkl. Weissraum in die Zelle. Pipeline: Tools/normalize-logos.py. */
.qfai .qf-logo-grid{margin-top:0} /* Aussenabstand kommt vom Owl, v2.102 */
.qfai .qf-lg-group + .qf-lg-group{margin-top:var(--qf-s7)}
.qfai .qf-lg-head{margin-bottom:var(--qf-s4)}
.qfai .qf-lg-head strong{display:block;color:var(--qf-orange);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:5px}
.qfai .qf-lg-head span{color:var(--qf-muted);font-size:12px;line-height:1.45}
.qfai .qf-lg-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.qfai .qf-lg-cell{display:grid;place-items:center;aspect-ratio:3/2;padding:12px;background:#fff;border:1px solid var(--qf-line);border-radius:16px;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.qfai .qf-lg-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease}
.qfai .qf-lg-cell:hover{border-color:rgba(224,80,0,.4);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.qfai .qf-lg-cell:hover img{filter:grayscale(0);opacity:1}
@media(max-width:600px){.qfai .qf-lg-items{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px}.qfai .qf-lg-cell{padding:12px}}
/* FORMULAR - .qf-formwrap (v2.35): QFINITY-Styling fuer Contact-Form-7-Felder (Karriere, Kontakt).
   Wrapper .qf-formwrap um den [contact-form-7]-Shortcode; stylt Inputs/Textarea/Select/Checkboxen/
   Submit im Marken-Stil. Robust gegen Enfolds #top-Regeln (!important wo noetig). */
.qfai .qf-formwrap{max-width:760px;margin-top:8px}
/* FORMULAR-SPLIT - .qf-formsplit (v2.47): Formular links (max 50%), Media-Frame rechts - gleiche
   Zweispalter-Logik wie .qf-feature, aber fuer .qf-formwrap. Media bleibt sticky sichtbar (Formular
   ist hoch). Mobil (<=860px): einspaltig, Media entfaellt -> Formular voll. */
.qfai .qf-formsplit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:start;margin-top:8px}
.qfai .qf-formsplit .qf-formwrap{max-width:none;margin-top:0}
.qfai .qf-formsplit .qf-feature-media{position:sticky;top:100px}
@media(max-width:860px){.qfai .qf-formsplit{grid-template-columns:1fr}.qfai .qf-formsplit .qf-feature-media{display:none}}
.qfai .qf-formwrap .wpcf7-form p{margin:0 0 18px}
.qfai .qf-formwrap label{display:block;font-weight:700;font-size:14px;color:var(--qf-dark);margin-bottom:7px;line-height:1.4}
.qfai .qf-formwrap input[type=text],.qfai .qf-formwrap input[type=email],.qfai .qf-formwrap input[type=tel],.qfai .qf-formwrap input[type=url],.qfai .qf-formwrap input[type=date],.qfai .qf-formwrap input[type=number],.qfai .qf-formwrap select,.qfai .qf-formwrap textarea{width:100%!important;padding:13px 15px!important;border:1px solid var(--qf-line)!important;border-radius:16px!important;background:#fff!important;font:inherit!important;font-size:14px!important;color:var(--qf-dark)!important;box-shadow:none!important;transition:border-color .2s ease,box-shadow .2s ease}
.qfai .qf-formwrap input:focus,.qfai .qf-formwrap select:focus,.qfai .qf-formwrap textarea:focus{outline:none!important;border-color:var(--qf-orange)!important;box-shadow:0 0 0 3px rgba(224,80,0,.15)!important}
.qfai .qf-formwrap textarea{min-height:150px;resize:vertical}
.qfai .qf-formwrap .wpcf7-list-item{display:block;margin:0 0 7px 0}
.qfai .qf-formwrap .wpcf7-list-item label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--qf-muted);font-size:14px;line-height:1.5}
.qfai .qf-formwrap input[type=checkbox],.qfai .qf-formwrap input[type=radio]{width:auto!important;margin:3px 0 0 0!important;accent-color:var(--qf-orange);flex:none}
.qfai .qf-formwrap input[type=submit],.qfai .qf-formwrap .wpcf7-submit{display:inline-flex;align-items:center;justify-content:center;background:var(--qf-orange)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:14px 30px!important;font-weight:800!important;font-size:14px!important;cursor:pointer;width:auto!important;box-shadow:none!important;transition:background .2s ease,transform .2s ease}
.qfai .qf-formwrap input[type=submit]:hover,.qfai .qf-formwrap .wpcf7-submit:hover{background:var(--qf-orange-dark)!important;transform:translateY(-1px)}
.qfai .qf-formwrap .wpcf7-spinner{margin:0 0 0 12px}
.qfai .qf-formwrap .wpcf7-not-valid-tip{color:#c0392b;font-size:12px;font-weight:600;margin-top:5px}
.qfai .qf-formwrap .wpcf7-not-valid{border-color:#c0392b!important}
.qfai .qf-formwrap .wpcf7-response-output{margin:18px 0 0 0!important;padding:13px 16px!important;border-radius:16px!important;font-size:14px;border-width:1px!important}
/* Link-Farb-Doktrin (SG v2.116, Oliver 2026-07-18): interne Links GRUND = helles Orange,
   HOVER = dunkles Orange - der Hell-Dunkel-Wechsel traegt die Link-Affordance. */
.qfai .textlink{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:var(--qf-orange-bright);font-weight:800;font-size:14px;transition:color .15s ease}
.qfai .textlink:hover,.qfai .textlink:focus-visible{color:var(--qf-orange-dark)}
.qfai .dark .textlink:hover,.qfai .dark .textlink:focus-visible{color:var(--qf-gold)}
/* Inline-Einsatz im Fliesstext (p, li, checkgrid-.check): laeuft in Groesse/Gewicht des umgebenden Texts mit - Karten-/Standalone-Links (Sibling von p) bleiben 14px/800. Ersetzt das bisherige Inline-Style-Pflaster (DI-GxP, CSA); seit v2.39.15 auch li + .check (Prozesse-Checkgrid), damit KEIN Markup Inline-Styles braucht. */
.qfai :is(p,li,.check) .textlink{display:inline;font-size:inherit;font-weight:inherit;margin-top:0}
.qfai .pill-row{display:flex;flex-wrap:wrap;gap:9px}
/* Pill = Kompetenz-/Credential-MARKER, kein Button. Oranger Marker-Punkt (::before) gibt Brand-
   Praesenz + signalisiert "Tag, nicht klickbar"; auf dunklem Grund hoher Textkontrast (.93) +
   kraeftigerer Rand, damit die Pills NICHT deaktiviert/ausgegraut wirken (v2.31.93, SG v2.72). */
.qfai .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 15px;background:#fff;border:1px solid var(--qf-line);color:var(--qf-muted);font-size:12px;font-weight:700}
.qfai .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--qf-orange);flex:none}
.qfai .pill.dark,.qfai .dark .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.93)}
/* Pill-Gruppen (v2.37.0, SG v2.89): gruppieren Pills unter einem kleinen Dimensions-Label - z.B.
   zwei Vertrauens-Dimensionen (Expertise/Autoritaet vs. Lieferung/Track Record). Label dark-aware. */
.qfai .pill-group-label{text-transform:uppercase;letter-spacing:.12em;font-weight:800;font-size:12px;color:var(--qf-muted);margin-bottom:12px}
.qfai .dark .pill-group-label{color:rgba(255,255,255,.72)}
.qfai .event{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.qfai .ev-meta{color:var(--qf-orange);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--qf-s3)}

/* ============================================================
   EVENT-AGENDA - .qf-events (datum-fuehrende Terminliste, v2.31.100)
   Markup: ol.qf-events > li.qf-event > a.qf-event-row[href=Event-Post] >
              .qf-event-date(.qf-event-mon + .qf-event-day) + .qf-event-body(.qf-event-title + .qf-event-where)
   Datums-Chip (Monat ueber Tag) links + Titel/Ort rechts, durch feine Linie getrennt.
   Bewusst KEINE nummerierten Marker wie .qf-timeline (das impliziert Reihenfolge/Ranking) -
   ein Datums-Chip liest sofort als Termin. Komponente ist hintergrund-agnostisch.
   ============================================================ */
.qfai .qf-events{list-style:none;padding:0;margin:0}
.qfai .qf-event{border-top:1px solid var(--qf-line)}
.qfai .qf-event:first-child{border-top:0}
/* Reihe = klickbarer Anker auf den Event-Post; Grid liegt auf .qf-event-row */
.qfai .qf-event-row{display:grid;grid-template-columns:74px 1fr auto;gap:22px;align-items:start;padding:var(--qf-s4) 0;text-decoration:none;color:inherit}
.qfai .qf-event:first-child .qf-event-row{padding-top:0}
.qfai .qf-event:last-child .qf-event-row{padding-bottom:0}
.qfai .qf-event-date{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.qfai .qf-event-mon{color:var(--qf-orange);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.qfai .qf-event-day{color:var(--qf-text);font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:5px}
.qfai .qf-event-title{display:block;color:var(--qf-text);font-size:16px;font-weight:700;line-height:1.32;transition:color .18s}
.qfai .qf-event-where{display:inline-flex;align-items:center;gap:7px;color:var(--qf-muted);font-size:14px;font-weight:600;margin-top:4px}
.qfai .qf-event-where::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--qf-orange);flex:none}
/* Klick-Affordance: Pfeil rechts + Titel-Hover (signalisiert "fuehrt zum Beitrag") */
.qfai .qf-event-row::after{content:"\2192";align-self:center;justify-self:end;color:var(--qf-muted);font-weight:700;font-size:18px;opacity:.4;transition:opacity .18s,color .18s,transform .18s}
.qfai .qf-event-row:hover .qf-event-title{color:var(--qf-orange)}
.qfai .qf-event-row:hover::after{opacity:1;color:var(--qf-orange);transform:translateX(3px)}
/* auf dunklem Grund: Tag + Titel hell, Ort gedaempft-hell */
.qfai .dark .qf-event{border-color:rgba(255,255,255,.14)}
.qfai .dark .qf-event-day,.qfai .dark .qf-event-title{color:#fff}
.qfai .dark .qf-event-where{color:rgba(255,255,255,.72)}
.qfai .dark .qf-event-row::after{color:rgba(255,255,255,.55)}
.qfai .dark .qf-event-row:hover .qf-event-title,.qfai .dark .qf-event-row:hover::after{color:var(--qf-orange)}
@media(max-width:560px){.qfai .qf-event-row{grid-template-columns:58px 1fr auto;gap:16px}}

/* ============================================================
   FEATURE-ROW - alternierende Text/Media-Reihe mit Einflieg-Effekt
   Markup: .qf-feature [.reverse] > .qf-feature-text + .qf-feature-media
   Einflieg-Effekt: .qf-reveal .from-left|.from-right|.from-bottom
   (per IntersectionObserver mit .qf-in aktiviert, siehe qfinity-reveal.js)
   ============================================================ */
.qfai .qf-feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
/* Aufeinanderfolgende Features: feine Trennlinie mittig in grosszuegigem Abstand (Enfold-Vorbild
   Landing-Page) - vorher standen die Reihen im Uebergang zu eng + ohne sichtbare Trennung.
   WICHTIG: Spezifitaet MUSS die Owl-Rhythmus-Regel (oben, `> * + :is(...,.qf-feature,...)` = nur
   36px --qf-flow-lg) schlagen - die kappte bisher die Feature-Abstaende (= eigentlicher "zu nah"-Grund).
   margin-top = Luft ueber der Linie, padding-top = Luft unter der Linie, border-top = die Linie. */
.qfai .qf-feature + .qf-feature{margin-top:var(--qf-s8);padding-top:var(--qf-s8);border-top:1px solid var(--qf-line)}
/* margin-top zusaetzlich mit Owl-schlagender Spezifitaet re-asserten (Owl setzt nur margin-top) */
.qfai .section:not(.cta) > .qf-container > .qf-feature + .qf-feature{margin-top:var(--qf-s8)}
.qfai .qf-feature.reverse .qf-feature-media{order:-1}
.qfai .qf-feature-text .kicker{margin-bottom:var(--qf-s3)}
.qfai .qf-feature-text h3{font-size:clamp(22px,2.3vw,28px)!important;line-height:1.14!important;letter-spacing:-.025em!important;margin:0 0 var(--qf-s3)}
.qfai .qf-feature-text p{color:var(--qf-muted);font-size:16px;line-height:1.62;margin:0 0 16px;max-width:520px}
.qfai .feature-points{list-style:none;padding:0;margin:var(--qf-s4) 0 var(--qf-s5);display:grid;gap:12px}
.qfai .feature-points li{position:relative;padding-left:33px;color:var(--qf-text);font-size:16px;font-weight:600;line-height:1.45}
.qfai .feature-points li:before{content:"\2713";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--qf-orange);color:#fff;font-weight:900;font-size:12px;display:grid;place-items:center}
/* Media-Slot: enthaelt entweder ein <img> oder den generischen Platzhalter */
.qfai .qf-feature-media{position:relative}
.qfai .qf-media-frame{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;padding:24px;display:grid;place-items:stretch;background:radial-gradient(circle at 72% 18%,rgba(224,80,0,.22),transparent 55%),linear-gradient(135deg,#16171a,#3b3f42);box-shadow:var(--shadow-soft)}
.qfai .qf-media-frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;padding:0}
/* Generischer Platzhalter (App-Fenster-Mockup) - durch <img> ersetzbar */
.qfai .qf-media-ph{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 22px 54px rgba(0,0,0,.34)}
.qfai .qf-ph-bar{height:34px;flex:none;background:#f4f2ef;border-bottom:1px solid var(--qf-line);display:flex;align-items:center;gap:7px;padding:0 14px}
.qfai .qf-ph-bar span{width:10px;height:10px;border-radius:50%;background:#d9d6d2}
.qfai .qf-ph-bar span:first-child{background:var(--qf-orange)}
.qfai .qf-ph-body{flex:1;padding:var(--qf-s5);display:grid;gap:13px;align-content:start}
.qfai .qf-ph-accent{height:15px;width:46%;border-radius:8px;background:linear-gradient(90deg,var(--qf-orange),rgba(224,80,0,.38))}
.qfai .qf-ph-lines{display:grid;gap:9px}
.qfai .qf-ph-lines i{height:9px;border-radius:8px;background:#e9e5e1}
.qfai .qf-ph-lines i:nth-child(2){width:88%}
.qfai .qf-ph-lines i:nth-child(3){width:70%}
.qfai .qf-ph-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px}
.qfai .qf-ph-tiles b{height:52px;border-radius:8px;background:#f1ede9;border:1px solid var(--qf-line)}
.qfai .qf-ph-tiles b:first-child{background:linear-gradient(135deg,rgba(224,80,0,.16),rgba(224,80,0,.04));border-color:rgba(224,80,0,.22)}
.qfai .qf-ph-label{position:absolute;bottom:14px;right:16px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.72);background:rgba(0,0,0,.34);padding:5px 11px;border-radius:999px}
/* v2.48: "Platzhalter"-Label site-weit ausblenden - die designten Mockups wirken sonst live "unfertig"
   (Live-Hygiene-Befund). Das Markup behaelt .qf-ph-label als internen Hinweis; sichtbar nur, falls man
   diese Regel entfernt. Sobald ein echtes 4:3-<img> den Mockup ersetzt, ist das Label ohnehin weg. */
.qfai .qf-ph-label{display:none}
/* Optionaler frei schwebender Akzent-Chip am Media-Rand */
.qfai .qf-media-badge{position:absolute;left:-14px;bottom:22px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--qf-dark);font-weight:800;font-size:12px;padding:12px 15px;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.16);border:1px solid var(--qf-line)}
.qfai .qf-media-badge .dot{background:var(--qf-orange)}

/* Einflieg-Reveal (JS-getriggert). Ohne JS bleibt alles sichtbar:
   die Start-Zustaende greifen nur unter html.qf-js (siehe qfinity-reveal.js). */
html.qf-js .qfai .qf-reveal{opacity:0;will-change:opacity,transform;transition:opacity .7s ease,transform .9s cubic-bezier(.18,.7,.2,1)}
html.qf-js .qfai .qf-reveal.from-left{transform:translateX(-56px)}
html.qf-js .qfai .qf-reveal.from-right{transform:translateX(56px)}
html.qf-js .qfai .qf-reveal.from-bottom{transform:translateY(42px)}
html.qf-js .qfai .qf-reveal.qf-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.qf-js .qfai .qf-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* ============================================================
   TESTIMONIAL-SLIDER - .qf-testimonials
   Scroll-Snap-Track (ohne JS bereits swipe-/scrollbar) + JS fuer
   Pfeile, Dots und optionales Autoplay (data-autoplay="6000").
   Eine Stimme pro Ansicht. Siehe qfinity-testimonials.js
   ============================================================ */
.qfai .qf-testimonials{position:relative;max-width:66%;margin:0 auto}
.qfai .qf-testi-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 2px 8px}
.qfai .qf-testi-track::-webkit-scrollbar{display:none}
.qfai .qf-testi{flex:0 0 100%;scroll-snap-align:center;margin:0}
/* Karte mit orange 66-Auftaktzeichen (v2.102: Glyphe laeuft wie bei big-quote als STATISCHER
   Block IM Kartenfluss statt als Padding-Treiber -> Karte innen optisch symmetrisch, s6 rundum;
   vorher 52-74 oben vs. 24-32 unten kopflastig) */
.qfai .qf-testi-bubble{position:relative;margin:0;background:#fff;border:1px solid var(--qf-line);border-radius:22px;box-shadow:0 20px 48px -24px rgba(20,22,24,.22);padding:var(--qf-s6) clamp(26px,3vw,40px)}
.qfai .qf-testi-bubble:before{content:"\201C";display:block;height:.55em;margin-bottom:var(--qf-s3);font:900 clamp(60px,6vw,96px)/.72 Georgia,'Times New Roman',serif;color:var(--qf-orange)}
.qfai .qf-testi-quote{margin:0;font-size:clamp(16px,1.3vw,19px);line-height:1.6;letter-spacing:-.01em;color:var(--qf-dark);font-weight:500}
/* Autor unter der Karte */
.qfai .qf-testi-author{display:flex;align-items:center;gap:13px;margin:var(--qf-s4) 0 0;padding-left:2px}
.qfai .qf-testi-avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;background:linear-gradient(135deg,var(--qf-orange),#B64000);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em}
.qfai .qf-testi-name{font-weight:800;color:var(--qf-dark);font-size:15px}
.qfai .qf-testi-role{color:var(--qf-muted);font-size:13px;margin-top:1px}
.qfai .qf-testi-sep{color:var(--qf-muted);margin:0 3px}
.qfai .qf-testi-org{color:var(--qf-dark);font-weight:400;font-style:italic}
.qfai .qf-testi-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:var(--qf-s5)}
.qfai .qf-testi-dots{display:flex;gap:8px}
.qfai .qf-testi-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(83,87,90,.25);cursor:pointer;transition:background .2s,transform .2s}
.qfai .qf-testi-dot.is-active{background:var(--qf-orange);transform:scale(1.25)}
.qfai .qf-testi-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--qf-line);background:#fff;color:var(--qf-dark);cursor:pointer;display:grid;place-items:center;font-size:16px;line-height:1;box-shadow:0 8px 20px -12px rgba(20,22,24,.25);transition:border-color .2s,color .2s}
.qfai .qf-testi-arrow:hover{border-color:var(--qf-orange);color:var(--qf-orange)}
/* Auf dunkler Sektion: Dots/Pfeile hell halten */
.qfai .dark .qf-testi-dot{background:rgba(255,255,255,.3)}
.qfai .dark .qf-testi-dot.is-active{background:var(--qf-orange)}

/* ============================================================
   INTERAKTIVE FAQ - .qf-faq (Accordion + Kategorie-Filter)
   Filter-Pills blenden Items nach data-cat ein/aus, Fragen klappen auf.
   Progressive Enhancement: ohne JS sind alle Antworten offen und die
   Filterleiste ausgeblendet (greift nur unter html.qf-js). Siehe qfinity-faq.js
   ============================================================ */
.qfai .qf-faq{max-width:860px}
.qfai .qf-faq-filter{display:none;flex-wrap:wrap;gap:9px;margin-bottom:var(--qf-s5)}
html.qf-js .qfai .qf-faq-filter{display:flex}
.qfai .qf-faq-tag{appearance:none;font-family:inherit;border:1px solid var(--qf-line);background:#fff;color:var(--qf-muted);font-weight:700;font-size:14px;padding:8px 15px;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.qfai .qf-faq-tag:hover{border-color:rgba(224,80,0,.5);color:var(--qf-dark)}
.qfai .qf-faq-tag.is-active{background:var(--qf-orange);border-color:var(--qf-orange);color:#fff}
.qfai .qf-faq-item{border:1px solid var(--qf-line);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.04);margin-bottom:12px;overflow:hidden}
.qfai .qf-faq-item.is-hidden{display:none}
.qfai .qf-faq-q{position:relative;display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:var(--qf-s5) 50px var(--qf-s5) 22px;font-family:inherit;font-size:16px;font-weight:700;color:var(--qf-dark);line-height:1.4}
.qfai .qf-faq-q:after{content:"";position:absolute;right:24px;top:24px;width:10px;height:10px;border-right:2px solid var(--qf-orange);border-bottom:2px solid var(--qf-orange);transform:rotate(45deg);transition:transform .25s ease}
.qfai .qf-faq-item.is-open .qf-faq-q:after{transform:rotate(-135deg)}
.qfai .qf-faq-a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s ease}
html.qf-js .qfai .qf-faq-item:not(.is-open) .qf-faq-a{grid-template-rows:0fr}
.qfai .qf-faq-a-inner{overflow:hidden;min-height:0}
.qfai .qf-faq-a-inner p{margin:0 22px var(--qf-s5);color:var(--qf-muted);font-size:16px;line-height:1.62}
@media(prefers-reduced-motion:reduce){.qfai .qf-faq-a{transition:none}.qfai .qf-faq-q:after{transition:none}}

/* ============================================================
   TABS - .qf-tabs (umschaltbare Inhalts-Panels)
   Ohne JS: Nav versteckt, alle Panels sichtbar (greift unter html.qf-js).
   Siehe qfinity-tabs.js
   ============================================================ */
.qfai .qf-tabs-nav{display:none;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--qf-line);margin-bottom:var(--qf-s5)}
html.qf-js .qfai .qf-tabs-nav{display:flex}
.qfai .qf-tab{appearance:none;font-family:inherit;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 18px;cursor:pointer;color:var(--qf-muted);font-weight:700;font-size:16px;transition:color .2s,border-color .2s}
.qfai .qf-tab:hover{color:var(--qf-dark)}
.qfai .qf-tab.is-active{color:var(--qf-dark);border-bottom-color:var(--qf-orange)}
html.qf-js .qfai .qf-tab-panel:not(.is-active){display:none}
/* Binnen-Rhythmus im Tab-Panel: checkgrid traegt margin:0 (v2.102), der Owl greift hier
   nicht (Panel ist kein .qf-container) -> gescopte Paarregel liefert den Abstand. */
.qfai .qf-tab-panel > * + .checkgrid{margin-top:var(--qf-s5)}

/* ============================================================
   PROZESS-TIMELINE - .qf-timeline (verbundene, nummerierte Schritte)
   ============================================================ */
.qfai .qf-timeline{list-style:none;padding:0;margin:0}
.qfai .qf-timeline-step{display:grid;grid-template-columns:46px 1fr;gap:22px;padding-bottom:var(--qf-s5);position:relative} /* v2.106: Schritt-Abstand 24 - Binnenabstand nie groesser als der Abstand zur Komponente hin (Lead->Timeline = 24) */
.qfai .qf-timeline-step:last-child{padding-bottom:0}
.qfai .qf-tl-marker{width:46px;height:46px;border-radius:50%;background:var(--qf-orange);color:#fff;font-weight:900;font-size:16px;display:grid;place-items:center;z-index:1;box-shadow:0 6px 18px rgba(224,80,0,.3)}
.qfai .qf-timeline-step:not(:last-child) .qf-tl-marker::after{content:"";position:absolute;left:22px;top:50px;bottom:-2px;width:2px;background:linear-gradient(180deg,var(--qf-orange),rgba(224,80,0,.16))}
.qfai .qf-tl-body{padding-top:8px;min-width:0}
.qfai .qf-tl-body h3{margin-bottom:8px}
.qfai .qf-tl-body p{color:var(--qf-muted);font-size:16px;line-height:1.62;margin:0}
.qfai .dark .qf-tl-body p{color:rgba(255,255,255,.72)}

/* ============================================================
   VERGLEICHS-/DATENTABELLE - .qf-table
   ============================================================ */
/* v2.42-Fix Tabellen-Ecken: border-collapse:collapse IGNORIERT border-radius auf Zellen -> Eck-Radien
   wirkten nicht. Jetzt border-collapse:separate (optisch identisch via border-spacing:0) + overflow:hidden
   am Wrap -> clippt oben UND unten sauber in allen Browsern, OHNE Scroll-Container (vermeidet die
   Scrollbar-Rinne, die bei overflow-x:auto unten als ueberfluessigen Leerraum reservierte).
   Enfold-td-Default-Borders auf den Zellen zurueckgesetzt (border:0 + gezielt unten). Mobile: min-width:0. */
.qfai .qf-table-wrap{overflow:hidden;border:1px solid var(--qf-line);border-radius:var(--radius);box-shadow:var(--shadow-card);background:#fff}
.qfai .qf-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;min-width:520px;margin:0}
/* Umbruch-Doktrin (v2.42.1): KEIN word-break:break-word - das liess den Tabellen-Algorithmus
   schmale Spalten unter die Wortbreite quetschen und brach Woerter bindestrichlos mittendrin
   ("Risikoei nstufun g"). Ohne break-word erzwingt das laengste Wort die Mindest-Spaltenbreite;
   hyphens:auto (html lang) trennt lange Woerter sauber mit Bindestrich. */
.qfai .qf-table th,.qfai .qf-table td{padding:var(--qf-s4) 20px;text-align:left;vertical-align:top;border:0;border-bottom:1px solid var(--qf-line);overflow-wrap:break-word;word-break:normal;hyphens:auto}
.qfai .qf-table thead th{background:linear-gradient(135deg,#171717,#3a3e41);color:#fff;font-weight:800;font-size:14px}
.qfai .qf-table tbody tr:last-child td{border-bottom:0}
.qfai .qf-table tbody tr:nth-child(even){background:#faf8f6}
.qfai .qf-table td:first-child,.qfai .qf-table th[scope="row"]{font-weight:700;color:var(--qf-dark)}
.qfai .qf-table td{color:var(--qf-muted);line-height:1.55}
/* v2.39.9 / SG v2.94 (Oliver-Review 2026-07-11): Zell-FLIESSTEXT auf Lesegroesse 16px -
   die 14px-Basis war fuer Prosa-Zellen (CSA-Chronologie) kleiner als der umgebende
   Card-/Listen-Text (16px) und wirkte gequetscht. Header bleibt 14px Caps (Marker-Zeile),
   die 14px-Basis traegt weiter th + Sonderzellen. Kanonische Skala: 16 ist Lesegroesse. */
.qfai .qf-table tbody td{font-size:16px}
.qfai .qf-table .col-accent{background:rgba(224,80,0,.07)}
/* Kontrastspalte (SG v2.99): mittlere Vergleichsspalte leicht neutral getoent - abgesetzt von der Aspekt-Spalte, ohne mit col-accent zu konkurrieren; Kopfzeile bleibt einheitlich dunkel */
.qfai .qf-table .col-muted{background:rgba(23,23,23,.05)}
/* Schluesselspalte (SG v2.100): Kurz-Token-Spalte (IaaS/PaaS u.ae.) unumbrochen halten - der globale word-break liesse sie neben langen Textspalten auf Zeichenbreite kollabieren */
.qfai .qf-table .col-key{white-space:nowrap;word-break:normal;overflow-wrap:normal}
/* Zeilen-Label-Spalte (v2.42.2, Oliver 2026-07-18): die ERSTE Spalte traegt kurze
   Zeilen-Labels und wird nie silbengetrennt - hyphens:auto senkte ihre min-content-Breite,
   "Risikoein-stufung" brach im Wort. Ohne Auto-Trennung erzwingt das laengste Label die
   Spaltenbreite; Mehrwort-Labels brechen weiter am Leerzeichen. */
.qfai .qf-table :is(th,td):first-child{hyphens:manual}
.qfai .qf-table thead .col-accent{background:var(--qf-orange);color:#fff}
/* KEINE Eck-Radien an den Zellen: das Clipping macht allein overflow:hidden am Wrap, das ALLE
   vier Ecken uniform beschneidet (auch die orange Akzent-Zelle). Zell-Radien fuehrten zu einer
   Rand-Asymmetrie (links rund, orange-rechts eckiger Nub) und sind daher entfernt. */
@media (max-width:600px){
  .qfai .qf-table{min-width:0;font-size:14px}
  /* Mobil bleibt break-word: der Wrap clippt (overflow:hidden), ohne break-word wuerde die
     Tabelle abgeschnitten - Platz ist hier das haertere Constraint, hyphens:auto mildert. */
  .qfai .qf-table th,.qfai .qf-table td{padding:12px;hyphens:auto;word-break:break-word}
  .qfai .qf-table thead th{font-size:12px}
  /* v2.41.4 - VERGLEICHSTABELLEN SCROLLEN, statt auf Zeichenbreite zu kollabieren.
     Gemessener Befund (2026-07-15, Audit-/IT-Lieferantenaudit-Seite): min-width:0 (Zeile
     oben) + overflow:hidden am Wrap = eine 5-Spalten-Tabelle wurde auf 390px in 59-93px
     breite Zellen gequetscht; Woerter zerfielen in Einzelsilben ("Ri-si-ko-ein-stu-fun g"),
     die Kopfzeile war abgeschnitten. Betraf 19 Tabellen (DE+EN) mit >=3 Spalten.
     min-width:0 bleibt fuer 2-spaltige Begriff/Erklaerung-Tabellen richtig - erst ab der
     dritten Spalte tut Quetschen weh. Deshalb NICHT global zurueckgenommen, sondern:
     Tabellen OHNE stack-sm (= echte Spaltenvergleiche, die ihre Spalten behalten muessen)
     bekommen ihre Mindestbreite zurueck und duerfen im Wrap horizontal scrollen.
     stack-sm-Tabellen stapeln zu Karten und brauchen beides nicht.
     :has() statt Wrap-Modifier, damit das Markup der 19 Seiten unangetastet bleibt.
     Die overflow:hidden-Entscheidung am Wrap (Radius-Clipping, keine Scrollbar-Rinne)
     bleibt fuer Desktop unveraendert - sie war nie fuer 390px gedacht. */
  .qfai .qf-table:not(.stack-sm){min-width:520px}
  .qfai .qf-table-wrap:has(.qf-table:not(.stack-sm)){overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* Tabellen-Stack .qf-table.stack-sm (v2.39.8 / SG v2.93): Opt-in-Modifier fuer zweispaltige
   Begriff-Erklaerungs-Tabellen (z.B. CSA-Chronologie) - auf Mobile werden die Zeilen zu
   gestapelten Karten statt einer ~30%-schmalen Erstspalte mit harten Trennfugen (Design-Review
   2026-07-11). thead entfaellt (Karten tragen die Semantik selbst), Zebra bleibt als
   Karten-Alternation, col-accent-Flaeche weicht der Karte, hyphens:manual stoppt die
   unruhigen Auto-Trennungen. Echte Spaltenvergleichs-Tabellen bleiben ohne Modifier beim
   2-Spalten-Layout. */
@media (max-width:600px){
  .qfai .qf-table.stack-sm thead{display:none}
  .qfai .qf-table.stack-sm,.qfai .qf-table.stack-sm tbody,
  .qfai .qf-table.stack-sm tbody tr,.qfai .qf-table.stack-sm tbody td{display:block;width:100%;min-width:0}
  .qfai .qf-table.stack-sm tbody tr{border-bottom:1px solid var(--qf-line);padding:4px 0 12px}
  .qfai .qf-table.stack-sm tbody tr:last-child{border-bottom:0}
  .qfai .qf-table.stack-sm tbody td{border-bottom:0;padding:12px 16px 0;hyphens:manual}
  .qfai .qf-table.stack-sm tbody td.col-accent{background:transparent;padding-top:6px}
  .qfai .qf-table.stack-sm tbody td.col-muted{background:transparent}
}

/* ============================================================
   ICON-BOX - .qf-iconbox (in .two-grid / .three-grid)
   ============================================================ */
.qfai .qf-iconbox{position:relative;background:#fff;border:1px solid var(--qf-line);border-radius:var(--radius);padding:var(--qf-s6) 26px;box-shadow:var(--shadow-card);overflow:hidden}
.qfai .qf-iconbox::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--qf-orange),rgba(224,80,0,.28))}
.qfai .qf-iconbox-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(224,80,0,.15),rgba(224,80,0,.04));border:1px solid rgba(224,80,0,.22);color:var(--qf-orange);font-size:22px;font-weight:900;margin-bottom:var(--qf-s4)}
.qfai .qf-iconbox h3{margin-bottom:var(--qf-s3)}
.qfai .qf-iconbox p{color:var(--qf-muted);font-size:16px;line-height:1.6;margin:0}
.qfai .qf-iconbox.center{text-align:center}
.qfai .qf-iconbox.center .qf-iconbox-icon{margin-left:auto;margin-right:auto}

/* ============================================================
   ICONS - .qf-ico (Inline-SVG, faerbt sich ueber currentColor)
   Markup: <svg class="qf-ico" viewBox="0 0 24 24"><path d="..."/></svg>
   In .icon / .qf-iconbox-icon den Buchstaben durch ein <svg.qf-ico> ersetzen.
   ============================================================ */
.qfai .qf-ico{display:inline-block;vertical-align:middle;width:22px;height:22px;flex:none;background-color:currentColor;-webkit-mask:var(--qf-ico-url) center/contain no-repeat;mask:var(--qf-ico-url) center/contain no-repeat}
.qfai .qf-ico-check{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012.5l5%205L20%206.5%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-shield-check{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203l7%203v6c0%204.2-3%207-7%208.5C8%2019%205%2016.2%205%2012V6z%27%2F%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-document{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%203H7a1%201%200%200%200-1%201v16a1%201%200%200%200%201%201h10a1%201%200%200%200%201-1V7z%27%2F%3E%3Cpath%20d%3D%27M14%203v4h4%27%2F%3E%3Cpath%20d%3D%27M9%2013h6%27%2F%3E%3Cpath%20d%3D%27M9%2017h4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-search{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%276%27%2F%3E%3Cpath%20d%3D%27M20%2020l-4.3-4.3%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-lifecycle{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2012a8%208%200%201%201-2.3-5.6%27%2F%3E%3Cpath%20d%3D%27M20%204v4h-4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-users{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%278%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M3.5%2019a5.5%205.5%200%200%201%2011%200%27%2F%3E%3Cpath%20d%3D%27M16%206.2a3%203%200%200%201%200%205.6%27%2F%3E%3Cpath%20d%3D%27M20.5%2019a4.7%204.7%200%200%200-3.5-4.4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-lock{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%2710.5%27%20width%3D%2714%27%20height%3D%279.5%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2010.5V7a4%204%200%200%201%208%200v3.5%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-chart{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020h16%27%2F%3E%3Cpath%20d%3D%27M7%2020v-7%27%2F%3E%3Cpath%20d%3D%27M12%2020V6%27%2F%3E%3Cpath%20d%3D%27M17%2020v-4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-data{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%276%27%20rx%3D%277%27%20ry%3D%273%27%2F%3E%3Cpath%20d%3D%27M5%206v12c0%201.7%203.1%203%207%203s7-1.3%207-3V6%27%2F%3E%3Cpath%20d%3D%27M5%2012c0%201.7%203.1%203%207%203s7-1.3%207-3%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-flow{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%276%27%20cy%3D%2712%27%20r%3D%272.3%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2712%27%20r%3D%272.3%27%2F%3E%3Cpath%20d%3D%27M8.3%2012h7.4%27%2F%3E%3Cpath%20d%3D%27M14%209.5l2%202.5-2%202.5%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-target{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%278%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273.4%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-info{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M12%2011v5%27%2F%3E%3Cpath%20d%3D%27M12%207.6h.01%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-question{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M9.2%209.3a2.8%202.8%200%200%201%205.4%201c0%201.9-2.6%202.4-2.6%203.7%27%2F%3E%3Cpath%20d%3D%27M12%2017.3h.01%27%2F%3E%3C%2Fsvg%3E")}
.qfai .qf-ico-building{--qf-ico-url:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2021V5a1%201%200%200%201%201-1h9a1%201%200%200%201%201%201v16%27%2F%3E%3Cpath%20d%3D%27M14%209h5a1%201%200%200%201%201%201v11%27%2F%3E%3Cpath%20d%3D%27M8%208h2M8%2012h2M8%2016h2%27%2F%3E%3Cpath%20d%3D%27M3%2021h18%27%2F%3E%3C%2Fsvg%3E")}
.qfai .icon .qf-ico{width:20px;height:20px}
.qfai .qf-iconbox-icon .qf-ico{width:26px;height:26px}

/* ICON-LIST - .qf-iconlist (Icon + Titel + Beschreibung je Zeile) */
.qfai .qf-iconlist{list-style:none;margin:0;padding:0;display:grid;gap:24px}
/* v2.102: die fruehere Sonderregel heading-block + .qf-iconlist (44-60px) ist ENTFERNT -
   .qf-iconlist steht jetzt in der zentralen Owl-flow-lg-Liste (40-56px). */
.qfai .qf-iconlist.cols-2{grid-template-columns:1fr 1fr;gap:24px 32px}
.qfai .qf-iconlist.cols-3{grid-template-columns:1fr 1fr 1fr;gap:24px 32px} /* SG v2.101: Dreier-Reihe gleichrangiger Kurz-Botschaften */
.qfai .qf-iconlist > li{display:grid;grid-template-columns:46px 1fr;gap:16px;align-items:start}
.qfai .qf-iconlist-ico{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(224,80,0,.15),rgba(224,80,0,.04));border:1px solid rgba(224,80,0,.22);color:var(--qf-orange);flex:none}
.qfai .qf-iconlist :is(h3,.h3){font-size:16px!important;line-height:1.25!important;margin:1px 0 8px!important;font-weight:700;color:var(--qf-dark)} /* :is(.h3): SG-Demos nutzen div.h3 - ohne die Erweiterung zeigte der SG die Komponente ungestylt (Demo-Treue-Fix v2.39.19) */
.qfai .qf-iconlist p{margin:0;color:var(--qf-muted);font-size:14px;line-height:1.55}
.qfai .dark .qf-iconlist p{color:rgba(255,255,255,.72)}

/* NOTICE / PROMO-BOX - .qf-notice (schlanker Inline-Callout) */
.qfai .qf-notice{display:flex;gap:14px;align-items:flex-start;background:#fff8f3;border:1px solid rgba(224,80,0,.26);border-left:4px solid var(--qf-orange);border-radius:16px;padding:var(--qf-s4) 20px;color:var(--qf-text);font-size:16px;line-height:1.56;margin:0} /* Aussenabstand kommt vom Owl bzw. der Notice-Paarregel (flow-sm), v2.102 */
.qfai .qf-notice .qf-ico{color:var(--qf-orange);margin-top:1px;width:22px;height:22px}
.qfai .qf-notice strong{display:block;color:var(--qf-dark);margin-bottom:2px}
.qfai .qf-notice p{margin:0}
.qfai .dark .qf-notice{background:rgba(255,255,255,.06);border-color:rgba(224,80,0,.4);border-left-color:var(--qf-orange);color:rgba(255,255,255,.72)}
.qfai .dark .qf-notice strong{color:#fff}

/* ============================================================
   EXPECTATION-MIRROR - .qf-expect
   Grenzueberschreitende Behoerden-Erwartung: eine Erwartung oben,
   darunter EU  <->  PIC/S (global, gemeinsame Bruecke)  <->  US gespiegelt.
   PIC/S = hervorgehobene Mitte (schult Inspektoren beider Welten, PI 041).
   Defensiv gegen Enfold (ul/li margin/list-style/padding).
   ============================================================ */
.qfai .qf-expect{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.qfai .qf-expect-item{list-style:none;margin:0;background:#fff;border:1px solid var(--qf-line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:var(--qf-s5) 26px;overflow:hidden}
.qfai .qf-expect-head{display:flex;gap:16px;align-items:flex-start;margin:0 0 var(--qf-s4)}
.qfai .qf-expect-num{flex:0 0 auto;font-weight:900;font-size:18px;color:var(--qf-orange);line-height:1.4;font-variant-numeric:tabular-nums}
.qfai .qf-expect-head .h3{margin:0 0 4px;font-size:20px;font-weight:700;color:var(--qf-dark);line-height:1.2}
.qfai .qf-expect-head p{margin:0;color:var(--qf-muted);font-size:16px;line-height:1.55}
.qfai .qf-expect-mirror{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px}
.qfai .qf-expect-side,.qfai .qf-expect-core{display:flex;flex-direction:column;gap:4px;justify-content:center;border-radius:14px;padding:var(--qf-s3) 16px;text-align:center}
.qfai .qf-expect-side{background:var(--qf-soft);border:1px solid var(--qf-line)}
.qfai .qf-expect-core{position:relative;background:rgba(224,80,0,.07);border:1px solid rgba(224,80,0,.30);min-width:158px}
.qfai .qf-expect-label{text-transform:uppercase;letter-spacing:.1em;font-weight:800;font-size:12px;color:var(--qf-muted)}
.qfai .qf-expect-core .qf-expect-label{color:var(--qf-orange)}
.qfai .qf-expect-ref{font-size:15px;font-weight:600;color:var(--qf-text);line-height:1.35}
.qfai .qf-expect-core .qf-expect-ref small{display:block;font-weight:600;font-size:12px;color:var(--qf-muted);letter-spacing:.02em}
/* Konnektoren: verbinden EU und US mit der gemeinsamen PIC/S-Mitte */
.qfai .qf-expect-core::before,.qfai .qf-expect-core::after{content:"";position:absolute;top:50%;width:14px;height:2px;background:var(--qf-orange);opacity:.5}
.qfai .qf-expect-core::before{left:-14px;transform:translateY(-50%)}
.qfai .qf-expect-core::after{right:-14px;transform:translateY(-50%)}
@media(max-width:700px){
  .qfai .qf-expect-mirror{grid-template-columns:1fr;gap:10px}
  .qfai .qf-expect-core{min-width:0}
  .qfai .qf-expect-core::before{left:50%;top:-10px;width:2px;height:10px;transform:translateX(-50%)}
  .qfai .qf-expect-core::after{left:50%;right:auto;top:auto;bottom:-10px;width:2px;height:10px;transform:translateX(-50%)}
}

/* ANIMIERTE ZAEHLER - JS zaehlt [data-count] hoch (siehe qfinity-count.js) */
.qfai .qf-count{font-variant-numeric:tabular-nums}

/* ============================================================
   HERO-WOERTER-REVEAL - .qf-reveal-words (Vanilla, ohne Lib)
   Opt-in auf einer Headline; JS zerlegt in Wort-Spans, jedes steigt
   gestaffelt hinter einer Maske herein. Siehe qfinity-herotext.js.
   Ohne JS (kein html.qf-js) bleibt die Headline normal sichtbar.
   ============================================================ */
/* Hero-Headlines STATISCH (Entscheidung v2.31.47): der Wort-Aufstieg ist
   site-weit deaktiviert - keine Hero-Bewegung mehr. Die .qf-word-Spans (falls
   noch von Alt-JS erzeugt) bleiben sofort sichtbar, ohne Fade/Transform/Transition.
   herotext.js wird zusaetzlich nicht mehr enqueued (kein Split). */
.qfai .qf-reveal-words .qf-word{display:inline-block;white-space:nowrap;opacity:1!important;transform:none!important;transition:none!important}
.qfai .qf-reveal-words.qf-in .qf-word{opacity:1;transform:none}
/* Theme/Enfold faerbt <span> in Headings teils mit Akzent-Hintergrund ein
   (das war die orange "Kasten"-Ursache). Hart neutralisieren - hohe
   Spezifitaet inkl. zweier IDs, um Theme-Regeln sicher zu schlagen. */
.qfai .qf-reveal-words .qf-word,
#top .qfai .qf-reveal-words .qf-word,
#wrap_all #top .qfai .qf-reveal-words .qf-word{background:transparent!important;background-color:transparent!important;box-shadow:none!important;color:inherit!important;padding:0!important;margin:0!important;border:0!important;text-shadow:none!important}

/* Gleiche Ursache fuer JEDEN <span> in einer .qfai-Ueberschrift (z.B.
   <span white-space:nowrap> fuer Umbruch-Schutz) - eigene qf-Spans
   (qf-ico, qf-word) ausgenommen, die regeln sich selbst. */
.qfai :is(h1,h2,h3,h4,h5) span:not([class*="qf-"]),
#top .qfai :is(h1,h2,h3,h4,h5) span:not([class*="qf-"]),
#wrap_all #top .qfai :is(h1,h2,h3,h4,h5) span:not([class*="qf-"]){background:transparent!important;background-color:transparent!important;box-shadow:none!important;color:inherit!important;-webkit-text-fill-color:currentColor!important;padding:0!important;border:0!important;border-radius:0!important;text-shadow:none!important}
/* Zweifarbige Ueberschrift (STANDARD fuer Sektions-H2 auf hellen/soft Sektionen + Split-Titel):
   orange Akzent-Teil (z.B. <h2>Daten und KI <span class="qf-accent">fuer Unternehmen</span></h2>).
   Auch im .split-title (ist ein <div>, daher zusaetzlicher Selektor). Hero, dunkle Sektionen
   und CTA haben vollorange Ueberschriften - dort wird qf-accent NICHT eingesetzt. */
.qfai :is(h1,h2,h3,h4) .qf-accent,.qfai .split-title .qf-accent,#top .qfai :is(h1,h2,h3,h4) .qf-accent,#wrap_all #top .qfai :is(h1,h2,h3,h4) .qf-accent{color:var(--qf-orange)!important;-webkit-text-fill-color:var(--qf-orange)!important;background:transparent!important;background-color:transparent!important;box-shadow:none!important;padding:0!important;border-radius:0!important}

/* ============================================================
   AURORA-BAND - .qf-aurora (Signature-Band, sparsam einsetzen)
   Dunkles Band mit langsam driftendem, weich-defokussiertem Farbfeld in
   Markenfarben + erkennbarer, extrem weicher Struktur. CSS-only: geblurrte
   Radial-Gradient-Blobs (screen) + Fraktal-Noise via Data-URI-SVG-Filter
   (overlay). Clip-Wrapper (clip-path) haelt die composited Layer sauber in der
   Rundung; Schatten bleibt aussen. reduced-motion friert die Bewegung ein.
   Idee/Referenz: siehe QUELLEN.md.
   Markup: .qf-aurora > .qf-aurora-clip(.qf-aurora-bg[5x <b>] + .qf-aurora-noise)
           + .qf-aurora-inner( Text + .qf-aurora-btn | .qf-aurora-index>.qf-aurora-item* )
   ============================================================ */
/* align-content:center (v2.42.1): der Inhalt ist niedriger als die 480px-Mindesthoehe -
   ohne Zentrierung hing der Rest komplett unten (gemessen 40px oben vs. 111px unten,
   Oliver-Befund Startseite); zentriert = symmetrische 76/76. */
.qfai .qf-aurora{position:relative;display:grid;align-content:center;border-radius:22px;min-height:480px;color:#fff;background:#0e0f12;isolation:isolate;box-shadow:var(--shadow-soft);overflow:hidden}
.qfai .qf-aurora-clip{position:absolute;inset:0;z-index:0;border-radius:22px;overflow:hidden;clip-path:inset(0 round 28px);background:#0e0f12}
/* Aurora-Blobs (v2.31.98): schneller + intensiver; die frueher weissen/grauen Anteile durch
   Gelb/Gold (#F5A623) bzw. warmes Tiefen-Orange ersetzt -> warm orange->gold wie der Hero,
   kein ausgewaschenes Weiss/Grau. Sattigung hoch, Dauern ~30% kuerzer. */
.qfai .qf-aurora-bg{position:absolute;inset:-45%;z-index:0;filter:blur(56px) saturate(178%)}
.qfai .qf-aurora-bg b{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.qfai .qf-aurora-bg b:nth-child(1){width:64%;height:92%;left:-10%;top:-15%;background:radial-gradient(circle,rgba(238,104,48,1),transparent 60%);animation:qf-au1 5s ease-in-out infinite alternate}
.qfai .qf-aurora-bg b:nth-child(2){width:72%;height:100%;right:-16%;top:-26%;background:radial-gradient(circle,rgba(236,140,58,.82),transparent 62%);animation:qf-au2 7s ease-in-out infinite alternate}
.qfai .qf-aurora-bg b:nth-child(3){width:62%;height:88%;left:18%;bottom:-32%;background:radial-gradient(circle,rgba(224,92,46,.95),transparent 60%);animation:qf-au3 6s ease-in-out infinite alternate}
.qfai .qf-aurora-bg b:nth-child(4){width:52%;height:72%;left:46%;top:18%;background:radial-gradient(circle,rgba(245,166,35,.62),transparent 60%);animation:qf-au4 4.5s ease-in-out infinite alternate}
.qfai .qf-aurora-bg b:nth-child(5){width:58%;height:84%;left:54%;top:2%;background:radial-gradient(circle,rgba(150,66,22,.85),transparent 62%);animation:qf-au5 8s ease-in-out infinite alternate}
@keyframes qf-au1{from{transform:translate(0,0) scale(1)}to{transform:translate(40%,26%) scale(1.45)}}
@keyframes qf-au2{from{transform:translate(0,0) scale(1.18)}to{transform:translate(-32%,30%) scale(1)}}
@keyframes qf-au3{from{transform:translate(0,0) scale(1)}to{transform:translate(-30%,-34%) scale(1.4)}}
@keyframes qf-au4{from{transform:translate(0,0) scale(1)}to{transform:translate(42%,-28%) scale(1.5)}}
@keyframes qf-au5{from{transform:translate(0,0) scale(1.12)}to{transform:translate(-34%,22%) scale(1)}}
.qfai .qf-aurora-noise{position:absolute;inset:-48%;z-index:0;filter:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.009%200.012'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3C/svg%3E#n") blur(9px) contrast(165%) brightness(112%);opacity:.52;mix-blend-mode:overlay;will-change:transform;animation:qf-aunoise 9s ease-in-out infinite alternate}
@keyframes qf-aunoise{from{transform:translate(0,0) scale(1.15) rotate(0deg)}to{transform:translate(-15%,11%) scale(1.42) rotate(5deg)}}
.qfai .qf-aurora::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(95deg,rgba(11,12,14,.62),rgba(11,12,14,.08) 50%,rgba(11,12,14,.36)),radial-gradient(135% 120% at 22% 46%,transparent,rgba(11,12,14,.42));box-shadow:inset 0 0 70px 22px rgba(10,11,14,.55),inset 0 0 0 1px rgba(255,255,255,.05);pointer-events:none}
.qfai .qf-aurora-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,72px);padding:var(--qf-s7)}
.qfai .qf-aurora-inner :is(.qf-aurora-eyebrow,h2,.qf-aurora-item strong,.qf-aurora-item span){text-shadow:0 2px 16px rgba(11,12,14,.6)}
.qfai .qf-aurora-eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:900;color:rgba(255,255,255,.72);margin-bottom:var(--qf-s4)}
.qfai .qf-aurora h2{font-size:clamp(28px,2.9vw,38px)!important;line-height:1.13!important;letter-spacing:-.025em!important;color:#fff!important;font-weight:700!important;margin:0;max-width:20ch}
.qfai .qf-aurora-btn{display:inline-flex;align-items:center;gap:9px;margin-top:var(--qf-s6);padding:12px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff!important;text-decoration:none;font-weight:800;font-size:14px;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
/* Index als erkennbare Glas-Box auf dem Aurora-Grund (v2.37.1): halbtransparent-dunkel + Rand +
   Radius + Blur + Schatten (gleiche Glas-Sprache wie .ai-panel), damit sie sich vom warmen Aurora-
   Verlauf abhebt statt darin zu verschwimmen. Trennlinien nur ZWISCHEN den Items. */
.qfai .qf-aurora-index{align-self:center;position:relative;z-index:0;background:rgba(12,13,16,.46);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:2px 22px;backdrop-filter:blur(8px);box-shadow:0 18px 50px rgba(0,0,0,.32)}
.qfai .qf-aurora-item{display:block;border-top:1px solid rgba(255,255,255,.13);padding:var(--qf-s4) 4px;text-decoration:none;transition:padding-left .25s ease}
.qfai .qf-aurora-item:first-child{border-top:none}
.qfai .qf-aurora-item:hover{padding-left:10px}
.qfai .qf-aurora-item strong{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:18px;font-weight:700;letter-spacing:-.01em;color:#fff!important}
.qfai .qf-aurora-item > span{display:block;margin-top:6px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.5;max-width:44ch}
.qfai .qf-aurora-arrow{color:var(--qf-orange);font-weight:900;font-size:16px;flex:none}
/* Pfeil-Glyph U+2197 (&#8599;) ist ein Emoji-Default-Zeichen -> Apple/Safari rendert ihn als blaues
   Emoji und IGNORIERT dann color. font-variant-emoji:text erzwingt die Text-Variante, damit
   color:var(--qf-orange) wieder greift. Betrifft qf-aurora-arrow (.qfai) + qf-extref-arrow (single-post). */
.qf-aurora-arrow, .qf-extref-arrow, .qfai .arrow{ font-variant-emoji: text }
@media(prefers-reduced-motion:reduce){.qfai .qf-aurora-bg b,.qfai .qf-aurora-noise{animation:none}}

@media(max-width:980px){
  .qfai .hero-grid,.qfai .hero4-grid,.qfai .two-grid,.qfai .logic-flow,.qfai .split-band,.qfai .qf-aurora-inner{grid-template-columns:1fr}
  .qfai .connector{height:42px;width:3px;margin:0 auto;background:linear-gradient(180deg,var(--qf-orange),rgba(224,80,0,.08))}
  .qfai .connector:after{right:-5px;top:auto;bottom:-3px}
  .qfai .three-grid,.qfai .related{grid-template-columns:1fr 1fr}
  .qfai .metrics{grid-template-columns:repeat(3,1fr)}
  .qfai .hero,.qfai .hero2,.qfai .hero4{min-height:auto}
  .qfai .ai-panel{max-width:650px}
  .qfai .qf-feature{grid-template-columns:1fr;gap:32px}
  .qfai .qf-feature.reverse .qf-feature-media{order:0}
  html.qf-js .qfai .qf-reveal.from-left,html.qf-js .qfai .qf-reveal.from-right{transform:translateY(40px)}
  .qfai .qf-testimonials{max-width:100%}
  .qfai .qf-iconlist.cols-2,.qfai .qf-iconlist.cols-3{grid-template-columns:1fr}
}
@media(max-width:680px){
  .qfai .three-grid,.qfai .related,.qfai .checkgrid{grid-template-columns:1fr}
  .qfai .metrics,.qfai .metrics.plain{grid-template-columns:repeat(2,1fr)}
  .qfai .qf-cb-row{grid-template-columns:1fr;gap:10px}
  .qfai .section,.qfai .hero,.qfai .hero2,.qfai .hero4{padding-left:20px;padding-right:20px}
  .qfai h1,#top .qfai h1,#wrap_all #top .qfai h1{font-size:28px!important}
  .qfai .lead{font-size:18px}
  .qfai .actions{flex-direction:column}
  .qfai .btn{width:100%}
  .qfai .big-quote{font-size:22px;padding:var(--qf-s5) 22px} /* v2.102: symmetrisch (Glyphe im Fluss), vorher 50/22/22 */
  .qfai .big-quote::before{font-size:52px}
  /* v2.102: der fruehere Mobile-Override .section{padding 50px} ist ENTFERNT -
     das s8-clamp liefert am unteren Ende 56px, kein Sonderwert noetig. */
  .qfai .hero{padding-top:84px;padding-bottom:48px}
  .qfai .hero2,.qfai .hero4{padding-top:84px;padding-bottom:48px}
  .qfai .hero2 h1,#top .qfai .hero2 h1,#wrap_all #top .qfai .hero2 h1,.qfai .hero4 h1,#top .qfai .hero4 h1,#wrap_all #top .qfai .hero4 h1{font-size:38px!important}
}
/* WordPress/Enfold: entfernt die weisse Luecke zwischen dunkler CTA und Footer
   (Theme-Content-Padding um den Code Block). Wirkt nur in WP, in der Vorschau ohne Effekt. */
#top .av_codeblock:has(.qfai),#top .av_codeblock_section:has(.qfai),#top .avia_codeblock_section:has(.qfai){margin:0!important;padding:0!important}
#top #main:has(.qfai),#top #main .content:has(.qfai){padding-top:0!important;padding-bottom:0!important}
/* Enfold-Header schlank halten auf .qfai-Seiten - kein Sub-Bar, keine Bottom-Linie, kein Extra-Padding */
html:has(.qfai) #header_meta,
html:has(.qfai) #header_main_alternate,
html:has(.qfai) .av_header_secondary,
html:has(.qfai) #sub_menu1,
html:has(.qfai) #sub_menu2{display:none!important}
html:has(.qfai) #header,
html:has(.qfai) #header_main{border-bottom:0!important;box-shadow:none!important}
/* Header-Container-Padding NICHT mehr genullt - schmiert sonst das Logo zusammen */
/* Grauer Streifen / Theme-Sub-Bars zwischen Header und Hero komplett entfernen */
html:has(.qfai) #wrap_all,
html:has(.qfai) #main,
html:has(.qfai) .main_color{border-top:0!important;border-bottom:0!important;box-shadow:none!important;padding-top:0!important;margin-top:0!important}
html:has(.qfai) #header + *:not(#main):not(.qfai-footer){display:none!important}
/* Menue-Unterstrich (Hover/Aktiv) = Token-Orange (SG v2.96, Oliver 2026-07-12):
   Enfolds 2px-Unterstrich der Hauptmenuepunkte (.avia-menu-fx) kam als Weiss aus den
   Theme-Options; jetzt in BEIDEN Header-Zustaenden (transparent + gescrollt) Token-Orange.
   Literaler Hex #E05000 (= --qf-orange; Header liegt ausserhalb .qfai, Token nicht vererbt).
   li:not(.av-menu-button) schuetzt den Kontakt-Button - dessen Gold-Flaeche ist TABU (s.u.). */
#top #header #avia-menu > li:not(.av-menu-button):not(.av-menu-button-colored) > a .avia-menu-fx{background-color:#E05000!important;background-image:none!important}
/* ============================================================
   Menue-CTA "Kontakt" (Enfold "Button"-Menuepunkt): Theme-Lime-Gelb ->
   HERO2-Gold #f5a623, dunkler Text. Site-weit (Header auf allen Seiten), daher
   NICHT auf .qfai gescopt; literaler Hex (--qf-gold nur auf .qfai definiert).
   WICHTIG: Das Lime liegt auf dem INNEREN Enfold-Layer .avia-menu-fx; das <a>
   ist nur die groessere Klickflaeche - deshalb dort Hintergrund KOMPLETT entfernen
   (sonst goldener Rahmen). Auf .avia-menu-fx mit `background`-Shorthand +
   background-image:none ueberschreiben (falls Enfold dort einen Gradient legt,
   den ein blosses background-color nicht ersetzt). */
#top #header .av-menu-button-colored > a,
#top #header .av-menu-button > a,
#top #wrap_all #header .av-menu-button-colored > a{background:transparent!important;background-color:transparent!important;background-image:none!important;border:0!important;box-shadow:none!important}
#top #header .av-menu-button-colored > a .avia-menu-fx,
#top #header .av-menu-button > a .avia-menu-fx,
#top #header #avia-menu .av-menu-button-colored .avia-menu-fx,
#top #wrap_all #header .av-menu-button-colored a .avia-menu-fx,
html #top #header .av-menu-button-colored .avia-menu-fx{background:#f5a623!important;background-color:#f5a623!important;background-image:none!important;border-color:#f5a623!important}
#top #header .av-menu-button-colored > a,
#top #header .av-menu-button-colored .avia-menu-text,
#top #header .av-menu-button > a,
#top #header .av-menu-button .avia-menu-text{color:#141414!important;text-shadow:none!important}
#top #header .av-menu-button-colored > a:hover .avia-menu-fx,
#top #header .av-menu-button > a:hover .avia-menu-fx{background:#e0951c!important;background-color:#e0951c!important}
/* KONTAKT-Button-FLAECHE auf GOLD. Enfold malt die Button-Farbe NICHT auf .avia-menu-fx
   (das ist nur der unsichtbare Hover-Fuell-Layer), sondern als background-color auf den
   inneren .avia-menu-text-Span - und zwar hart codiert im generierten dynamic_avia/enfold_child.css:
   transparenter Header = lime #e7f960, solider (gescrollter) Header = orange #ea5a0c. Beides bricht
   das Orange/Gold-System. Enfolds Regeln haben 2 IDs (.av_header_transparency bzw. #header.header_color);
   hier mit 3 IDs (#top #wrap_all #header) fuer BEIDE Zustaende auf HERO2-Gold + dunklen Text ueberschrieben.
   Literale Hex - Header liegt ausserhalb .qfai, --qf-gold waere dort transparent. Live verifiziert (beide
   Zustaende gold #f5a623 / #141414, ~10:1). */
#top #wrap_all #header.av_header_transparency .av-menu-button-colored > a .avia-menu-text,
#top #wrap_all #header.header_color .av-menu-button-colored > a .avia-menu-text{background-color:#f5a623!important;border-color:#f5a623!important;color:#141414!important}
/* ===== HEADER-FEINSCHLIFF (v2.39.10 / SG v2.95, Oliver-Review 2026-07-11) =====
   (1) Transparent-Zustand: Menue-HIERARCHIE statt Vollweiss-Glare - inaktive Punkte .72,
   aktueller Punkt + Hover .93 (kanonische Dunkel-Text-Skala). NUR av_header_transparency
   gescoped, der gescrollte Weiss-Zustand (header_color) bleibt Enfold. Kontakt-Gold-Button
   (av-menu-button-colored) ausgenommen - TABU, siehe Block darueber. Suchlupe = Font-Glyphe
   (color), Burger = Balken-Fills (opacity statt rgba-Fill, Skalen-Regel). */
#top #wrap_all #header.av_header_transparency #avia-menu > li:not(.av-menu-button):not(.av-menu-button-colored):not(.av-burger-menu-main) > a,
#top #wrap_all #header.av_header_transparency #avia-menu > li:not(.av-menu-button):not(.av-menu-button-colored) > a .avia-menu-text{color:rgba(255,255,255,.72)!important}
#top #wrap_all #header.av_header_transparency #avia-menu > li.current-menu-item:not(.av-menu-button) > a .avia-menu-text,
#top #wrap_all #header.av_header_transparency #avia-menu > li.current_page_item:not(.av-menu-button) > a .avia-menu-text,
#top #wrap_all #header.av_header_transparency #avia-menu > li.current-menu-ancestor:not(.av-menu-button) > a .avia-menu-text,
#top #wrap_all #header.av_header_transparency #avia-menu > li:not(.av-menu-button):not(.av-menu-button-colored) > a:hover .avia-menu-text,
#top #wrap_all #header.av_header_transparency #avia-menu > li:not(.av-menu-button):not(.av-menu-button-colored):not(.av-burger-menu-main) > a:hover{color:rgba(255,255,255,.93)!important}
#top #wrap_all #header.av_header_transparency .av-burger-menu-main > a{opacity:.72;transition:opacity .2s ease}
#top #wrap_all #header.av_header_transparency .av-burger-menu-main > a:hover{opacity:1}
/* (2) WPML-Sprachwechsler: Text "DE | EN" statt Flaggen - CSS-only, beide Header-Zustaende
   + Burger-Overlay (geklonte Items). Aktive Sprache betont (800), inaktive laeuft ueber die
   .72-Regel oben mit; Farbe kommt aus dem jeweiligen Zustand (transparent weiss / gescrollt
   Enfold-dunkel), daher hier KEINE color-Angabe. */
#top li.wpml-ls-menu-item .wpml-ls-flag{display:none!important}
#top li.wpml-ls-menu-item .avia-menu-text::before{font-weight:700;letter-spacing:.08em;font-size:15px}
#top li.wpml-ls-menu-item.wpml-ls-item-de .avia-menu-text::before{content:"DE"}
#top li.wpml-ls-menu-item.wpml-ls-item-en .avia-menu-text::before{content:"EN"}
#top li.wpml-ls-menu-item.wpml-ls-current-language .avia-menu-text::before{font-weight:800}
#top #wrap_all #header.av_header_transparency #avia-menu > li.menu-item-language.wpml-ls-current-language > a .avia-menu-text{color:rgba(255,255,255,.93)!important}
#top #avia-menu > li.menu-item-language + li.menu-item-language > a::before{content:"|";opacity:.35;margin:0 13px 0 -13px} /* mittig zwischen DE/EN: 13px Item-Padding je Seite ausgeglichen (live gemessen) */
/* AGGRESSIV: jedes direkte Kind von #main, das KEIN .qfai enthaelt, raus
   (faengt alle Enfold-title_container/breadcrumb/page-meta-Container) */
html:has(.qfai) #main > *:not(:has(.qfai)):not(.av-alb-blogposts):not(:has(.av-alb-blogposts)){display:none!important}
/* Den Wrapper, der .qfai enthaelt, von allem Padding befreien */
html:has(.qfai) #main > *:has(.qfai){margin:0!important;padding:0!important;border:0!important}
/* DEEPER: alle Zwischen-Wrapper zwischen #main und .qfai komplett nullen
   (Enfold-Kette: .container_wrap > .container > .template-page > .entry-content-wrapper > .qfai) */
html:has(.qfai) #main *:has(.qfai),
html:has(.qfai) #wrap_all *:has(> .qfai),
html:has(.qfai) #main :has(> .qfai){padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important;border-top:0!important;border-bottom:0!important;background:transparent!important}
/* .qfai selbst absichern */
html:has(.qfai) .qfai{margin-top:0!important;padding-top:0!important;border-top:0!important;background:transparent!important}
/* Geschwister von .qfai im Eltern-Container ausblenden (wpautop kann leere <p> einfuegen).
   #main-gescopt, damit die Standalone-Style-Guide-Vorschau (laedt diese Datei direkt,
   ohne #main) ihre eigenen Demo-Container/Labels nicht ausblendet. */
html:has(.qfai) #main :has(> .qfai) > *:not(.qfai):not(.av-alb-blogposts):not(.template-blog):not(:has(.av-alb-blogposts)){display:none!important}
/* HYBRID-Seiten (QFINITY-Hero im Code Block + nativer Enfold-Feed darunter):
   den Blog-Feed (av_blog) explizit sichtbar halten. Die :has(.qfai)-Resets oben
   erfassen ihn sonst als Nicht-.qfai-Geschwister/-Kind und setzen display:none -
   genau das war auf /veranstaltungen/ + /projekte/ der Grund, warum nur der Hero,
   nicht aber der Card-Feed erschien. */
html:has(.qfai) #main .av-alb-blogposts,
html:has(.qfai) #main .template-blog{display:block!important}
/* Empty-Paragraphs und Enfold-Empty-Headings als Restkiller */
html:has(.qfai) p:empty,
html:has(.qfai) #main br:first-child,
html:has(.qfai) .av-special-heading:empty{display:none!important}
/* Body/wrap-Reset (HTML bewusst NICHT angefasst - WordPress setzt im
   Logged-in-Modus nativ html{margin-top:32px} fuer die fixe Admin-Bar.
   v2.2.9: body-Margin IMMER 0 - das zusaetzliche body.admin-bar:32px aus
   v2.2.7 hat den Versatz verdoppelt (32px html + 32px body), wovon die
   Admin-Bar nur die oberen 32px abdeckt -> sichtbarer schwarzer Streifen. */
html:has(.qfai) body,
html:has(.qfai) #wrap_all_inner{padding-top:0!important;margin-top:0!important;border-top:0!important;background-color:transparent!important}
/* Bekannte Enfold-Container, die manchmal Lueftung erzeugen, explizit zu */
html:has(.qfai) .title_container,
html:has(.qfai) .av-pagename-title,
html:has(.qfai) .av-page-title-area,
html:has(.qfai) .av-hero-image,
html:has(.qfai) .container_wrap_meta,
html:has(.qfai) .breadcrumb,
html:has(.qfai) .breadcrumb-trail{display:none!important}
html:has(.qfai) #header::after,
html:has(.qfai) #header_main::after,
html:has(.qfai) #header::before,
html:has(.qfai) #header_main::before{display:none!important;content:none!important}

/* Header-Eingriffe v2.2.1 zurueckgenommen - Enfold rendert Header nativ */
/* v2.31.82: Shrink-on-Scroll = Enfolds NATIVES "Shrinking Header"-Feature
   (Theme-Option: Enfold -> Header -> Header Behaviour -> "Shrinking header on scroll").
   Enfold faehrt Header- + Logo-Hoehe selbst (height-Animation mit transition:all +
   Logo-Crossfade ueber die Klassen .header-scrolled / .header-scrolled-full), genau wie
   auf kriesi.at/themes/enfold (headless verifiziert: #header 90->46px, Logo 88->44px,
   .header_bg opacity-Fade 0.4s ease-in-out, kein Sprung/Streifen).
   Unsere frueheren EIGENEN Hoehen-Locks (v2.31.79-81: #header_main min-height,
   #logo img max-height/height, manuelle .header-scrolled-Regeln) haben das nativ blockiert
   bzw. doppelt animiert -> bewusst ENTFERNT. Es bleiben nur:
   (a) vertikale Logo-Zentrierung (setzt KEINE Hoehe/Groesse) und (b) der Enfold-img-margin-Reset.
   Logo-Resting-Groesse + Shrink-Faktor werden ueber Enfolds Logo-/Header-Theme-Options gesteuert. */
/* v2.31.83: Logo-Positionierungs-Overrides ENTFERNT (Live-Diagnose der Crossfade-Doppelung).
   Frueher (v2.3.0/2.3.2) erzwangen wir display:flex + padding-left:clamp() auf .logo/.logo a,
   um das Logo zu zentrieren - ein Fix fuer den NICHT-schrumpfenden Header. Mit Enfolds aktivem
   Shrinking-Header ist das schaedlich: der padding-left-Shift (~19px bei 1440px) verschob das
   orange Standard-Logo gegen das weisse Alternate-Logo, sodass beide beim Scroll-Crossfade NICHT
   uebereinander lagen -> sichtbare Doppelung/Geisterbild (gedoppeltes Unendlich-Zeichen + verwischte
   Buchstaben) waehrend des Scrollens. Headless live verifiziert: ohne die Overrides liegt das Logo
   bei x:50 (Enfold-nativ) und der Crossfade ist sauber. Enfold positioniert/zentriert/skaliert das
   Logo selbst (natives Shrinking). Es bleibt nur der Enfold-img-margin-Reset (base.css img{margin:0 0 10px}). */
html:has(.qfai) #header .logo a img,
html:has(.qfai) #header .logo a svg,
html:has(.qfai) #header #logo a img,
html:has(.qfai) #header #logo img{margin:0!important;width:auto!important}
/* ===== Header Shrink-on-Scroll: scroll-driven (v2.31.86) =====
   Hintergrund: Der Scroll-Shrink lief ueber Enfolds scroll-EVENT-getriebenes JS. In Safari/WebKit
   werden Scroll-Events beim schnellen/Momentum-Scrollen gedrosselt -> Enfolds Header-Update HINKT
   HINTERHER (live in WebKit vs. Firefox/Chrome belegt: bei y=200 noch h89 statt h45) -> der Header
   steht kurz im falschen Zustand und ruckt, v.a. beim Hochscrollen. Reines CSS/JS-Timing-Problem,
   nicht durch eine Transition-Einstellung loesbar.
   Loesung: In Browsern mit CSS Scroll-driven Animations (Safari 18+/Chrome) den gesamten Header
   ueber `animation-timeline: scroll()` an die Scroll-POSITION koppeln (Compositor, KEINE
   Scroll-Events) -> kein Lag, und weil rein positionsbasiert, sind Hoch-/Runterscrollen automatisch
   symmetrisch (kein Up-Defekt moeglich). Headless in WebKit + Chromium + Firefox bei Schnell-Scroll
   verifiziert (alle monoton, kein Lag); Zwischenframes sauber (Logo skaliert mit, sauberer
   Farb-Crossfade weiss->orange, kein Bleed weil bei y=0..50 hinter dem Header noch der dunkle Hero
   liegt, kein Doppel-/Geisterlogo). Logo-Selektoren: orange = `.logo img:not(.alternate)`,
   weiss (alternate) = `img.alternate`.
   FALLBACK (Firefox + alte Browser ohne Support): Enfolds nativer JS-Pfad bleibt (dort kein Lag);
   bg/Logo ohne Transition (instant) wie zuvor verifiziert akzeptabel. */
/* Fallback (alle Browser): bg + Logo ohne Transition - Enfold-Pfad, instant, kein Geister-Fade */
html:has(.qfai) #header .header_bg,
html:has(.qfai) #header .logo img:not(.alternate),
html:has(.qfai) #header img.alternate{transition:none!important}
@supports (animation-timeline: scroll()){
  /* In unterstuetzenden Browsern governt die Scroll-Animation; Enfold-Transitions hier stilllegen */
  html:has(.qfai) #header,
  html:has(.qfai) #header_main,
  html:has(.qfai) #header .header_bg,
  html:has(.qfai) #header .logo img:not(.alternate),
  html:has(.qfai) #header img.alternate{transition:none!important}
  @keyframes qf-hdr-shrink{from{height:89px}to{height:45px}}
  @keyframes qf-hdr-logo{from{height:88px}to{height:44px}}
  @keyframes qf-hdr-bg{from{opacity:0;background-color:rgba(255,255,255,0)}to{opacity:.95;background-color:#fff}}
  @keyframes qf-hdr-orange{from{opacity:0}to{opacity:1}}
  @keyframes qf-hdr-white{from{opacity:1}to{opacity:0}}
  /* Header-Hoehe: graduell ueber die ersten 50px Scroll */
  html:has(.qfai) #header_main{animation-name:qf-hdr-shrink;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0px 50px}
  /* Logo (orange, sichtbar im gescrollten Zustand): mitschrumpfen (0-50) + einblenden (0-30, ease-out) */
  html:has(.qfai) #header .logo img:not(.alternate){animation-name:qf-hdr-logo,qf-hdr-orange;animation-duration:1ms,1ms;animation-timing-function:linear,ease-out;animation-fill-mode:both,both;animation-timeline:scroll(root block),scroll(root block);animation-range:0px 50px,0px 30px}
  /* Logo (weiss/alternate, sichtbar oben ueber dem Hero): mitschrumpfen + ausblenden */
  html:has(.qfai) #header img.alternate{animation-name:qf-hdr-logo,qf-hdr-white;animation-duration:1ms,1ms;animation-timing-function:linear,ease-out;animation-fill-mode:both,both;animation-timeline:scroll(root block),scroll(root block);animation-range:0px 50px,0px 30px}
  /* Weisser Header-Hintergrund: ueber die ersten 30px deckend (ease-out) */
  html:has(.qfai) #header .header_bg{animation-name:qf-hdr-bg;animation-duration:1ms;animation-timing-function:ease-out;animation-fill-mode:both;animation-timeline:scroll(root block);animation-range:0px 30px}
  /* Mobile (<=767px): Enfold liefert einen SOLIDEN weissen Header und blendet das weisse
     Alternate-Logo aus (display:none) - der Crossfade-Partner fehlt. Das orange Logo darf hier
     daher NICHT ueber qf-hdr-orange bei Scroll 0 auf opacity:0 starten, sonst ist oben GAR KEIN
     Logo sichtbar (erst ab ~30px Scroll blendet es ein). Live gemessen (WebKit 390px, v2.38.2):
     white=display:none, orange=opacity:0. Fix: nur die Hoehe animieren, Deckkraft voll halten.
     Desktop (>=768px, transparenter Header ueber dunklem Hero) bleibt unangetastet. */
  @media (max-width:767px){
    html:has(.qfai) #header .logo img:not(.alternate),
    html:has(.qfai) #header #logo img:not(.alternate){animation-name:qf-hdr-logo!important;animation-range:0px 50px!important;opacity:1!important}
  }
}


/* =====================================================================
   QFINITY Footer - loest den Enfold-Standard-Footer site-weit ab
   ===================================================================== */
/* Enfold-Default-Footer ausblenden (wird durch .qfai-footer ersetzt) */
html body #footer,html body #socket,html body .av-language-switch,html body .lang_choice,html body .av-language-switcher,html body #footer_socket,html body .av_phone_active_left,html body .av_phone_active_right{display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}

.qfai-footer{--qf-orange:#E05000;--qf-orange-dark:#B64000;background:#0c0c0c;color:rgba(255,255,255,.72);padding:clamp(56px,5vw,76px) clamp(22px,4.5vw,60px) 0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.qfai-footer *{box-sizing:border-box}
.qfai-footer .qf-container{max-width:1240px;margin:0 auto}
.qfai-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.4fr;gap:48px}
@media (max-width:980px){.qfai-footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:600px){.qfai-footer-grid{grid-template-columns:1fr;gap:32px}}

/* Marken-Spalte */
.qfai-footer-logo{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:800;letter-spacing:.06em;color:#fff!important;font-size:18px;text-decoration:none!important}
.qfai-footer-logo:hover{color:#fff!important}
.qfai-footer-logo-img{width:38px;height:38px;display:block;flex:none}
.qfai-footer-claim{font-size:14px;line-height:1.55;color:rgba(255,255,255,.72);max-width:340px;margin:0 0 22px}
.qfai-footer-contact{font-style:normal;display:grid;gap:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin-bottom:20px}
.qfai-footer-contact a{color:rgba(255,255,255,.72)!important;text-decoration:none!important}
.qfai-footer-contact a:hover{color:var(--qf-orange)!important}

/* Nav-Spalten */
.qfai-footer-col h4,.qfai-footer-newsletter h4{color:var(--qf-orange);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;font-family:inherit}
.qfai-footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.qfai-footer-col li{margin:0;padding:0}
.qfai-footer-col a{color:rgba(255,255,255,.72)!important;text-decoration:none!important;font-size:14px;line-height:1.4;transition:color .2s}
.qfai-footer-col a:hover{color:var(--qf-orange)!important}

/* Newsletter-Spalte */
.qfai-footer-newsletter h4{margin-bottom:14px}
.qfai-footer-newsletter-headline{color:#fff;font-size:18px;font-weight:700;line-height:1.25;margin:0 0 8px;letter-spacing:-.01em}
.qfai-footer-newsletter p{color:rgba(255,255,255,.72);font-size:14px;line-height:1.55;margin:0 0 16px}
.qfai-newsletter-form{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 18px!important}
body .qfai-newsletter-form input,body .qfai-newsletter-form input[type="email"],html body .qfai-newsletter-form input[type="email"]{flex:1 1 180px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:8px!important;padding:11px 14px!important;color:#fff!important;font-size:14px!important;font-family:inherit!important;font-weight:400!important;line-height:1.4!important;outline:none!important;margin:0!important;box-shadow:none!important;transition:border-color .2s,background .2s}
body .qfai-newsletter-form input::placeholder{color:rgba(255,255,255,.4)!important}
body .qfai-newsletter-form input:focus,body .qfai-newsletter-form input[type="email"]:focus{border-color:var(--qf-orange)!important;background:rgba(255,255,255,.1)!important}
body .qfai-newsletter-form button,body .qfai-newsletter-form button[type="submit"],body .qfai-newsletter-form input[type="submit"],html body .qfai-newsletter-form button[type="submit"]{background:var(--qf-orange)!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:11px 18px!important;font-weight:800!important;font-size:14px!important;font-family:inherit!important;line-height:1.2!important;margin:0!important;cursor:pointer!important;text-transform:none!important;box-shadow:none!important;transition:background .2s}
body .qfai-newsletter-form button:hover,body .qfai-newsletter-form button[type="submit"]:hover{background:var(--qf-orange-dark)!important;color:#fff!important}
.qfai-trust{display:flex;flex-wrap:wrap;gap:8px}
.qfai-trust span{display:inline-flex;align-items:center;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:12px;font-weight:800;letter-spacing:.1em}

/* Sub-Footer */
.qfai-footer-sub{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;border-top:1px solid rgba(224,80,0,.18);padding:22px 0 30px;margin-top:48px}
.qfai-copy{font-size:12px;color:rgba(255,255,255,.72)}
.qfai-copy span{color:var(--qf-orange);font-weight:800}
.qfai-legal{display:flex;flex-wrap:wrap;gap:18px}
.qfai-legal a{color:rgba(255,255,255,.72)!important;text-decoration:none!important;font-size:12px;transition:color .2s}
.qfai-legal a:hover{color:var(--qf-orange)!important}
/* Sub-Footer-Sprachschalter DE | EN (v2.39.15 / SG v2.98): Text-Switch zurueck im Sub-Footer
   (v2.31.99 zugunsten der WPML-Flaggen-Leiste entfernt) - Angleich an den Header-Switch v2.95:
   aktive Sprache 800/.93, inaktive .72 (Hover .93), Pipe .35. Die WPML-Legacy-Leiste
   #lang_sel_footer (Flaggen-Band unter dem Footer) ist ausgeblendet - EIN Schalter, EIN Stil. */
.qfai-lang{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.08em}
.qfai-lang a{color:rgba(255,255,255,.72)!important;text-decoration:none!important;font-weight:700;transition:color .2s}
.qfai-lang a:hover{color:rgba(255,255,255,.93)!important}
.qfai-lang a.active{color:rgba(255,255,255,.93)!important;font-weight:800}
.qfai-lang span{opacity:.35}
#lang_sel_footer{display:none!important}
@media (max-width:600px){.qfai-footer-sub{justify-content:flex-start}}


/* =====================================================================
   Newsletter-Form: Specificity-Eskalation (#wrap_all) gegen Enfold-Defaults
   ===================================================================== */
html body #wrap_all .qfai-newsletter-form input,
html body #wrap_all .qfai-newsletter-form input[type="email"]{
  flex:1 1 180px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:8px!important;
  padding:11px 14px!important;
  color:#fff!important;
  font-size:14px!important;
  font-family:inherit!important;
  font-weight:400!important;
  line-height:1.4!important;
  outline:none!important;
  margin:0!important;
  box-shadow:none!important;
  min-height:0!important;
  text-transform:none!important;
}
html body #wrap_all .qfai-newsletter-form input::placeholder{color:rgba(255,255,255,.4)!important}
html body #wrap_all .qfai-newsletter-form input:focus{border-color:var(--qf-orange)!important;background:rgba(255,255,255,.1)!important}
html body #wrap_all .qfai-newsletter-form button,
html body #wrap_all .qfai-newsletter-form button[type="submit"],
html body #wrap_all .qfai-newsletter-form input[type="submit"]{
  background:var(--qf-orange)!important;
  background-image:none!important;
  background-color:var(--qf-orange)!important;
  color:#fff!important;
  border:0!important;
  border-radius:8px!important;
  padding:11px 18px!important;
  font-weight:800!important;
  font-size:14px!important;
  font-family:inherit!important;
  line-height:1.2!important;
  margin:0!important;
  cursor:pointer!important;
  text-transform:none!important;
  box-shadow:0 8px 22px rgba(224,80,0,.25)!important;
  text-shadow:none!important;
  min-height:0!important;
  height:auto!important;
  width:auto!important;
}
html body #wrap_all .qfai-newsletter-form button:hover,
html body #wrap_all .qfai-newsletter-form button[type="submit"]:hover{
  background:var(--qf-orange-dark)!important;
  background-color:var(--qf-orange-dark)!important;
  color:#fff!important;
}

/* =====================================================================
   CleverReach-Newsletter-Embed (.qfai-newsletter-embed): die mitgelieferten
   CleverReach-Styles werden NICHT eingebunden; stattdessen .cr_*-Klassen auf
   den dunklen Footer-Look getrimmt (analog .qfai-newsletter-form).
   ===================================================================== */
.qfai-newsletter-embed{margin:0 0 18px}
.qfai-newsletter-embed .cr_form,
.qfai-newsletter-embed .cr_body,
.qfai-newsletter-embed .cr_page,
.qfai-newsletter-embed .formbox{width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;color:inherit!important;font-family:inherit!important;box-shadow:none!important}
.qfai-newsletter-embed .cr_ipe_item{margin:0 0 10px!important;padding:0!important}
.qfai-newsletter-embed .cr_ipe_item label,
.qfai-newsletter-embed .itemname{display:block!important;float:none!important;color:rgba(255,255,255,.72)!important;font-size:12px!important;font-weight:600!important;font-family:inherit!important;line-height:1.4!important;margin:0 0 6px!important;text-align:left!important}
#top .qfai-newsletter-embed input[type="text"],
#top .qfai-newsletter-embed input[name="email"]{width:100%!important;box-sizing:border-box!important;flex:none!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:8px!important;padding:11px 14px!important;color:#fff!important;font-size:14px!important;font-family:inherit!important;font-weight:400!important;line-height:1.4!important;outline:none!important;margin:0!important;box-shadow:none!important;min-height:0!important;text-transform:none!important}
.qfai-newsletter-embed input[name="email"]::placeholder{color:rgba(255,255,255,.4)!important}
#top .qfai-newsletter-embed input[name="email"]:focus{border-color:var(--qf-orange)!important;background:rgba(255,255,255,.1)!important}
.qfai-newsletter-embed .submit_container{text-align:left!important}
#top .qfai-newsletter-embed .cr_button,
#top .qfai-newsletter-embed button.cr_button{display:inline-block!important;background:var(--qf-orange)!important;background-color:var(--qf-orange)!important;background-image:none!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:11px 22px!important;font-weight:800!important;font-size:14px!important;font-family:inherit!important;line-height:1.2!important;height:auto!important;width:auto!important;margin:0!important;cursor:pointer!important;text-transform:none!important;box-shadow:0 8px 22px rgba(224,80,0,.25)!important;text-shadow:none!important;white-space:nowrap!important}
#top .qfai-newsletter-embed .cr_button:hover,
#top .qfai-newsletter-embed button.cr_button:hover{background:var(--qf-orange-dark)!important;background-color:var(--qf-orange-dark)!important;opacity:1!important}
.qfai-newsletter-embed .g-recaptcha{margin-top:4px;transform-origin:left top}
.qfai-newsletter-embed .clever_form_error{background-color:rgba(255,90,90,.15)!important;border:1px solid #f55!important;color:#fff!important}
.qfai-newsletter-embed .clever_form_note{position:static!important;display:block!important;margin:6px 0 0!important;background:rgba(242,236,181,.95)!important;color:#000!important;border-radius:8px!important}
@media (max-width:380px){.qfai-newsletter-embed .g-recaptcha{transform:scale(.9)}}

/* =====================================================================
   Standalone-Splash-Seiten (Newsletter-Bestaetigung u.ae.): KEIN Enfold-
   Header/Menue, KEIN QFINITY-Footer (Footer-Hook returnt early). Dunkler
   QFINITY-Hero-Look (Graphit-Gradient + Orange-Glow + feines Grid) +
   zentriertes Lockup, Glas-Card mit der Kernaussage.
   body.qfds-standalone wird vom Plugin gesetzt (qfds_is_standalone_page()).
   ===================================================================== */
/* Auf Standalone-Seiten ALLES ausser dem Splash ausblenden: Enfold-Header,
   -Footer-Widgets, -Socket, Mobile-CTA, WPML-Footer-Switcher, Scroll-Top. */
body.qfds-standalone #header,
body.qfds-standalone #header_main,
body.qfds-standalone .header_bg,
body.qfds-standalone .av_header_transparency,
body.qfds-standalone #footer-page,
body.qfds-standalone #footer,
body.qfds-standalone #socket,
body.qfds-standalone .mobilecta,
body.qfds-standalone #lang_sel_footer,
body.qfds-standalone #scroll-top-link{display:none!important}
body.qfds-standalone #main{padding-top:0!important;margin-top:0!important;border:0!important}
/* Dunkler Hero-Look full-bleed auf #wrap_all (ID-Spezifitaet); innere Enfold-
   Wrapper transparent. .qfai-splash selbst transparent, weil Z.620
   .qfai{background:transparent!important} den Wrapper-Hintergrund sonst killt. */
body.qfds-standalone{background:#121417!important}
body.qfds-standalone #wrap_all{
  min-height:100vh;
  background:
    radial-gradient(circle at 82% 6%,rgba(224,80,0,.24),transparent 40%),
    radial-gradient(circle at 6% 100%,rgba(224,80,0,.08),transparent 38%),
    radial-gradient(ellipse 120% 90% at 50% 42%,transparent 46%,rgba(0,0,0,.45)),
    linear-gradient(157deg,#101215 0%,#181b1f 55%,#202428 100%)!important;
  background-attachment:fixed!important;
}
body.qfds-standalone #main,
body.qfds-standalone #main > div,
body.qfds-standalone #main > .container_wrap,
body.qfds-standalone .container_wrap,
body.qfds-standalone .template-page,
body.qfds-standalone .entry-content-wrapper,
body.qfds-standalone .content,
body.qfds-standalone .container,
body.qfds-standalone [class*="av-section"],
body.qfds-standalone [class*="entry"],
body.qfds-standalone article,
body.qfds-standalone .flex_column{background:transparent!important;background-color:transparent!important}

#top .qfai-splash{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:clamp(48px,9vw,110px) 22px;text-align:center;overflow:hidden;background:transparent!important}
/* feines Grid, zur Mitte ausmaskiert */
#top .qfai-splash:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:52px 52px;opacity:.5;mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 88%);-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%,#000 25%,transparent 88%);pointer-events:none;z-index:0}
/* grosser Lichtbogen oben rechts (atmosphaerisch) */
#top .qfai-splash:after{content:"";position:fixed;right:-220px;top:-200px;width:680px;height:680px;border-radius:50%;border:1px solid rgba(224,80,0,.16);box-shadow:inset 0 0 80px rgba(224,80,0,.06),0 0 140px rgba(224,80,0,.10);pointer-events:none;z-index:0}

#top .qfai-splash-inner{position:relative;z-index:2;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}

/* Logo-Lockup: Signet mit weichem Orange-Glow-Halo (kein Ring/Kachel) */
#top .qfai-splash-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:clamp(30px,4.2vw,42px)}
#top .qfai-splash-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px}
#top .qfai-splash-badge:before{content:"";position:absolute;left:50%;top:50%;width:170px;height:170px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(224,80,0,.30),rgba(224,80,0,.07) 45%,transparent 70%);pointer-events:none}
#top .qfai-splash-badge img{position:relative;z-index:1;width:70px;height:70px;display:block;filter:drop-shadow(0 6px 22px rgba(224,80,0,.45))}

/* Eyebrow-Pill mit Glow-Dot */
#top .qfai-splash-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);border-radius:999px;color:rgba(255,255,255,.72)!important;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin-bottom:clamp(26px,4vw,38px);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#top .qfai-splash-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--qf-orange);box-shadow:0 0 14px rgba(224,80,0,.9);display:inline-block;flex:none}

/* Headline orange (markenkonform zum QFINITY-Hero) */
#top #wrap_all .qfai-splash h1{color:var(--qf-orange)!important;font-size:clamp(38px,5.2vw,52px)!important;line-height:1.04!important;margin:0!important;letter-spacing:-.03em!important;font-weight:800!important;text-transform:none!important;max-width:none;text-shadow:0 2px 30px rgba(224,80,0,.22)}

/* Glas-Card mit Top-Highlight + Tiefe */
#top .qfai-splash-card{position:relative;width:100%;max-width:460px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:clamp(24px,3.2vw,32px);box-shadow:0 40px 90px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center}
/* Abstand Headline -> Card robust ueber die Card (custom-Klasse, keine Enfold-Interferenz) */
#top #wrap_all .qfai-splash .qfai-splash-card{margin-top:clamp(36px,4vw,52px)!important}
#top .qfai-splash-card p{color:rgba(255,255,255,.72)!important;font-size:16px;line-height:1.6;margin:0}
#top .qfai-splash-card p+p{margin-top:12px;color:rgba(255,255,255,.72)!important;font-size:14px}
#top .qfai-splash-card a{color:var(--qf-orange)!important;font-weight:700;border-bottom:1px solid rgba(224,80,0,.45)!important;text-decoration:none!important;transition:border-color .2s}
#top .qfai-splash-card a:hover{border-color:var(--qf-orange)!important;color:var(--qf-orange)!important}

/* "Zurueck" als dezenter Pill-Button */
#top .qfai-splash-back{display:inline-flex;align-items:center;gap:8px;margin-top:clamp(34px,4.2vw,48px);padding:13px 26px;border-radius:999px;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.18);color:#fff!important;font-size:14px;font-weight:800;letter-spacing:.01em;text-decoration:none!important;transition:background .25s,border-color .25s,transform .25s}
#top .qfai-splash-back:hover{background:rgba(224,80,0,.16)!important;border-color:rgba(224,80,0,.6)!important;color:#fff!important;transform:translateY(-1px)}

/* =====================================================================
   Defensive-Cover gegen restliche Luecken oberhalb des Hero
   Box-Shadow zieht 300px Dunkel ueber den Hero hinaus nach oben - faengt
   jeden vom Theme erzeugten Wrapper-Padding/Margin-Rest, ohne das Layout
   zu verschieben. Hinter dem (opaken) Enfold-Header unsichtbar.
   ===================================================================== */
html:has(.qfai) .qfai > section:first-child,
html:has(.qfai) .qfai > section.hero{
  box-shadow:0 -300px 0 0 #111!important;
}

/* ============================================================================
   QFINITY - Neuigkeiten-Feed: Enfold "Blog Posts" (.post-entry) im Card-Stil
   Hook: dem Enfold-"Blog Posts"-Element (Blog-Style: Grid) im Advanced-Tab die
   CSS-Klasse  qf-newsfeed  geben. Werte literal (Feed liegt ausserhalb .qfai).
   ============================================================================ */
/* Grid-Container: trifft JEDEN Wrapper, der direkt .post-entry enthaelt - das
   ALB-"Blog Posts"-Element nennt ihn anders als das Blog-Archiv (.template-blog),
   deshalb via :has() containerunabhaengig. Enfolds #top-Prefix-Regeln zwingen
   uns durchgaengig zu !important. */
.qf-newsfeed{ margin-top:34px !important; }
/* Pagination-Anker (qfinity-newsfeed.js): beim Blaettern springt der Browser an
   #qf-feed; scroll-margin haelt die Feed-Oberkante unter dem (ungeschrumpften) Header. */
#qf-feed{ scroll-margin-top:100px; }
/* Grid-Container: trifft JEDEN Wrapper, der direkt .post-entry enthaelt. auto-FIT
   (nicht -fill) -> keine leeren Phantom-Spalten. DEFINITE Breite (max 1240) +
   margin-inline auto -> der Block liegt ZENTRIERT (buendig mit .qf-container),
   nicht linksbuendig am breiten Eltern-Container. */
.qf-newsfeed:has(> .post-entry),
.qf-newsfeed *:has(> .post-entry),
.qf-newsfeed .template-blog,
.qf-newsfeed.template-blog{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px; width:100% !important; max-width:1240px !important;
  margin-left:auto !important; margin-right:auto !important;
  float:none !important; align-items:stretch; box-sizing:border-box;
}
.qf-newsfeed .post-entry{
  float:none !important; clear:none !important; width:auto !important;
  margin:0 !important; padding:0 !important;
  border:1px solid rgba(83,87,90,.16) !important; border-radius:22px; background:#fff;
  box-shadow:var(--shadow-card); overflow:hidden;
  display:flex !important; flex-direction:column; transition:transform .2s, box-shadow .2s;
}
.qf-newsfeed .post-entry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
.qf-newsfeed .big-preview, .qf-newsfeed .big-preview.single-big{
  float:none !important; margin:0 0 16px !important; width:100% !important; max-width:none !important;
  aspect-ratio:16/10; overflow:hidden; border-radius:8px;
  /* Bild IMMER nach oben (v2.31.89): bei Posts mit Featured Image rendert Enfold .big-preview
     IM .entry-content-wrapper NACH dem Titel -> bei variabler Titellaenge sitzt das Bild auf
     unterschiedlicher Hoehe (Feed wirkt "unruhig"). order:-1 zieht es an den Anfang des Flex-
     Wrappers = einheitliche Bild-Position oben auf JEDER Card (wie der Platzhalter), Titel-Datum
     bleibt ungekuerzt. Greift fuer reale Bilder (im Wrapper) UND Genimg-Platzhalter (direkt in
     .post-entry, beide Flex-Container). */
  order:-1 !important;
}
.qf-newsfeed .big-preview a, .qf-newsfeed .big-preview .avia-slideshow,
.qf-newsfeed .big-preview li{ width:100% !important; height:100% !important; display:block; }
/* object-position:center top (v2.31.91): die Card-Flaeche ist 16/10, Body-Bilder koennen jedes
   Seitenverhaeltnis haben. Bei hochformatigen/quadratischen Motiven (z.B. Personen-Portraets als
   Featured Image) wuerde der Default-cover-Crop (center center) oben den Kopf und damit die Augen
   abschneiden. Oben-Bias haelt Gesichter/wesentliche Merkmale sichtbar; bei breiten 16:9-Motiven
   (unsere Bespoke-Card-Bilder) gibt es vertikal ohnehin keinen Crop -> folgenlos. */
.qf-newsfeed .big-preview img{ width:100% !important; height:100% !important; object-fit:cover; object-position:center top; display:block; }
.qf-newsfeed .image-overlay{ display:none !important; }
.qf-newsfeed .entry-content-wrapper{
  padding:22px 22px 24px !important; margin:0 !important; border:0 !important;
  display:flex !important; flex-direction:column; flex:1;
}
.qf-newsfeed .entry-content-header{ display:flex !important; flex-direction:column; margin:0 !important; padding:0 !important; border:0 !important; }
.qf-newsfeed .post-meta-infos{
  order:-1; margin:0 0 11px !important; padding:0 !important; border:0 !important;
  font-size:12px !important; text-transform:uppercase; letter-spacing:.08em; font-weight:800; line-height:1.3;
  text-align:left !important; display:block !important;
}
/* Datum + Kategorie inline auf EINER Zeile (Enfold macht .date-container sonst block) */
.qf-newsfeed .post-meta-infos time,
.qf-newsfeed .date-container, .qf-newsfeed .blog-categories{
  display:inline !important; float:none !important; vertical-align:baseline;
}
.qf-newsfeed .date-container, .qf-newsfeed .blog-categories a,
.qf-newsfeed .post-meta-infos time{ color:#E05000 !important; }
.qf-newsfeed .post-format-icon, .qf-newsfeed .blog-author,
.qf-newsfeed .text-sep, .qf-newsfeed .comment-container{ display:none !important; }
/* "in " / "by " Wort-Knoten killen (font-size:0), nur Kategorie-Link bleibt; mit
   orangem Trenn-Bullet sauber vom Datum abgesetzt */
.qf-newsfeed .blog-categories{ font-size:0 !important; margin-left:9px !important; }
.qf-newsfeed .blog-categories::before{ content:"\00b7"; font-size:12px; margin-right:9px; color:rgba(224,80,0,.55); }
.qf-newsfeed .blog-categories a{ font-size:12px !important; text-decoration:none !important; }
.qf-newsfeed .post-title, .qf-newsfeed h2.post-title, .qf-newsfeed .post-title a{
  order:0; color:#141414 !important; font-size:22px !important; line-height:1.25 !important;
  letter-spacing:-.015em !important; text-transform:none !important; font-weight:700 !important;
  margin:0 0 10px !important; padding:0 !important; text-decoration:none !important;
}
.qf-newsfeed .post-title a:hover{ color:#E05000 !important; }
/* TEASER-Modus: nur Ueberblick. Egal ob Enfold Volltext oder Auszug liefert -
   wir zeigen NUR den ersten Absatz (4 Zeilen), Rest (Listen, Zwischen-H2,
   weitere Absaetze, inline-Bilder, inline more-link) wird ausgeblendet. Details
   sieht man beim Klick auf die Card (Einzelbeitrag, body.single-post-Lesestil). */
.qf-newsfeed .entry-content{
  color:#6b7074 !important; line-height:1.62; font-size:14px;
  display:block !important; margin:0 !important; padding:0 !important;
}
.qf-newsfeed .entry-content > *{ display:none !important; }
/* Teaser = erster ECHTER Text-Absatz, 4 Zeilen. v2.31.90: vorher `> p:first-of-type` - das traf
   bei Posts, deren erster Absatz nur ein <img> ist (`<p><img></p>`), den Bild-Absatz -> Bild per CSS
   ausgeblendet -> LEERE Card (5 alte Event-Posts). Jetzt ersten p OHNE Bild und nicht leer zeigen,
   spaetere Text-Absaetze ausblenden (nur der erste). Text steckt bereits im Post, wird nur sichtbar. */
.qf-newsfeed .entry-content > p:not(:has(img)):not(:empty){
  display:-webkit-box !important; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; margin:0 !important;
}
.qf-newsfeed .entry-content > p:not(:has(img)):not(:empty) ~ p:not(:has(img)):not(:empty){ display:none !important; }
/* Inline-Bilder/Figures/Captions im Teaser raus (Card-Bild ist .big-preview oben) */
.qf-newsfeed .entry-content img,
.qf-newsfeed .entry-content figure,
.qf-newsfeed .entry-content .wp-caption,
.qf-newsfeed .entry-content .avia_image,
.qf-newsfeed .entry-content a:has(> img){ display:none !important; }
/* "Weiterlesen"-Label am Card-Fuss (ganze Card ist via JS klickbar) */
.qf-newsfeed .entry-content-wrapper::after{
  content:"Weiterlesen \2192"; margin-top:auto; padding-top:16px;
  color:#E05000; font-weight:800; font-size:14px; line-height:1;
}
.qf-newsfeed .post-entry:hover .entry-content-wrapper::after{ color:#B64000; }
.qf-newsfeed .post-entry{ cursor:pointer; }
.qf-newsfeed .more-link{ display:none !important; }
.qf-newsfeed:not(.is-half) .blog-meta,
.qf-newsfeed .entry-footer, .qf-newsfeed .post_delimiter,
.qf-newsfeed .post_author_timeline, .qf-newsfeed .av-structured-data, .qf-newsfeed .hidden{ display:none !important; }
/* Pagination im QFINITY-Stil (Enfold <nav class="pagination">) */
.qf-newsfeed .pagination{ grid-column:1 / -1; margin:34px 0 0 !important; text-align:center; border:0 !important; }
.qf-newsfeed .pagination .pagination-meta{ display:block; color:#6b7074; font-size:12px; margin:0 0 14px; background:none; }
.qf-newsfeed .pagination a, .qf-newsfeed .pagination span:not(.pagination-meta){
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px;
  padding:0 13px; margin:3px; border-radius:999px; border:1px solid rgba(83,87,90,.18) !important;
  background:#fff !important; color:#24272a !important; font-weight:700; line-height:1; transition:all .15s; box-shadow:none !important;
}
.qf-newsfeed .pagination a:hover{ border-color:#E05000 !important; color:#E05000 !important; }
.qf-newsfeed .pagination span.current{ background:#E05000 !important; border-color:#E05000 !important; color:#fff !important; }

/* Generisches Platzhalter-Bild (vom JS injiziert, wenn kein Beitragsbild):
   gebrandeter Gradient (inline) + ∞-Signet + Kategorie-Label. Gilt fuer alle
   Varianten - .big-preview (Grid/Full) wie .small-preview (Half). */
.qf-newsfeed .qf-genimg{ position:relative; display:block; text-decoration:none; }
.qf-newsfeed .qf-genimg::after{
  content:"\221E"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(38px,7vw,70px); line-height:1; color:rgba(255,255,255,.34); font-weight:900;
  font-family:Georgia,"Times New Roman",serif; pointer-events:none;
}
.qf-newsfeed.is-half .qf-genimg::after{ font-size:clamp(28px,5vw,52px); }

/* Synthetischer Card-Kicker (vom JS gebaut): EIN sauberer "TT.MM.JJJJ · KATEGORIE"
   statt der doppelten/dreifachen Enfold-Quellen. Native Quellen -> .qf-hide. */
.qf-newsfeed .qf-hide{ display:none !important; }
.qf-newsfeed .qf-feedkicker{
  order:-1; margin:0 0 11px !important; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:800; line-height:1.3; color:#E05000; text-align:left;
}
.qf-newsfeed .qf-feedkicker .qf-kd, .qf-newsfeed .qf-feedkicker .qf-kc{ color:#E05000; }
.qf-newsfeed .qf-feedkicker .qf-kd + .qf-kc::before{ content:"\00b7"; margin:0 8px; color:rgba(224,80,0,.55); font-weight:800; }

/* ----------------------------------------------------------------------------
   FEED-VARIANTEN (Modifier vom Auto-Wrap-JS aus dem Enfold-Stil gesetzt):
   - kein Modifier  = Card-Grid (Default, single-big im ALB-Element)
   - .is-half        = halbe Cards, Bild links quadratisch (Enfold single-small)
   - .is-half.is-multi = zusaetzlich Autor-Avatar/Byline (Multi-Author-Stil)
   - .is-full        = Breitbild-Eintraege gestapelt, Lesebreite (single-big Archiv)
   ---------------------------------------------------------------------------- */

/* HALF-SIZED: horizontale Cards (Bild links, Content rechts), 2-spaltiges Raster */
.qf-newsfeed.is-half:has(> .post-entry),
.qf-newsfeed.is-half *:has(> .post-entry),
.qf-newsfeed.is-half .template-blog,
.qf-newsfeed.is-half.template-blog{
  grid-template-columns:repeat(auto-fit,minmax(430px,1fr)) !important; gap:24px !important;
}
.qf-newsfeed.is-half .post-entry{ flex-direction:row !important; align-items:stretch; }
.qf-newsfeed.is-half .blog-meta{
  display:block !important; flex:0 0 38%; max-width:185px; margin:0 !important; overflow:hidden; background:#f5f2ef;
}
.qf-newsfeed.is-half .small-preview{
  display:block !important; position:relative; width:100% !important; height:100% !important;
  min-height:180px; margin:0 !important; overflow:hidden;
}
.qf-newsfeed.is-half .small-preview img{
  width:100% !important; height:100% !important; object-fit:cover; position:absolute; inset:0; max-width:none !important;
}
.qf-newsfeed.is-half .small-preview .iconfont{ display:none !important; }
.qf-newsfeed.is-half .big-preview{ display:none !important; }
.qf-newsfeed.is-half .entry-content-wrapper{ padding:20px 22px 22px !important; }
.qf-newsfeed.is-half .post-title, .qf-newsfeed.is-half .post-title a{ font-size:18px !important; line-height:1.28 !important; }
.qf-newsfeed.is-half .entry-content > p:first-of-type{ -webkit-line-clamp:3; }

/* MULTI-AUTHOR: Autor-Byline + Avatar einblenden (Sub-Variante von .is-half) */
.qf-newsfeed.is-multi .blog-author{ display:inline !important; font-size:0 !important; }
.qf-newsfeed.is-multi .blog-author::before{ content:"\00b7"; font-size:12px; margin:0 7px; color:rgba(224,80,0,.55); }
.qf-newsfeed.is-multi .blog-author a, .qf-newsfeed.is-multi .blog-author .fn{ font-size:12px !important; color:#6b7074 !important; text-decoration:none !important; font-weight:600; }
.qf-newsfeed.is-multi img.avatar{
  display:inline-block !important; width:24px; height:24px; border-radius:50%;
  object-fit:cover; vertical-align:middle; margin:0 8px 0 0;
}

/* FULL-SIZED: Breitbild-Eintraege gestapelt, zentrierte Lesebreite */
.qf-newsfeed.is-full:has(> .post-entry),
.qf-newsfeed.is-full *:has(> .post-entry),
.qf-newsfeed.is-full .template-blog,
.qf-newsfeed.is-full.template-blog{
  grid-template-columns:1fr !important; gap:40px !important; max-width:860px !important;
}
.qf-newsfeed.is-full .big-preview, .qf-newsfeed.is-full .big-preview.single-big{ aspect-ratio:16/9 !important; }
.qf-newsfeed.is-full .entry-content-wrapper{ padding:28px 32px 30px !important; }
.qf-newsfeed.is-full .post-title, .qf-newsfeed.is-full .post-title a{ font-size:28px !important; line-height:1.18 !important; letter-spacing:-.02em !important; }
.qf-newsfeed.is-full .entry-content{ font-size:16px !important; }
.qf-newsfeed.is-full .entry-content > p:first-of-type{ -webkit-line-clamp:3; }
.qf-newsfeed.is-full .blog-author{ display:inline !important; font-size:0 !important; }
.qf-newsfeed.is-full .blog-author::before{ content:"\00b7"; font-size:12px; margin:0 7px; color:rgba(224,80,0,.55); }
.qf-newsfeed.is-full .blog-author a, .qf-newsfeed.is-full .blog-author .fn{ font-size:12px !important; color:#6b7074 !important; text-decoration:none !important; font-weight:600; }

/* ============================================================================
   QFINITY - Neuigkeiten-Artikel: Enfold Single-Post im QFINITY-Lesestil.
   Gilt AUTOMATISCH fuer jeden Einzelbeitrag (body.single-post) - dynamisch,
   kein Aufwand pro Beitrag. Werte literal (Single-Post liegt ausserhalb .qfai).
   Hinweis: Erscheint der Titel doppelt, blendet Enfold ihn zusaetzlich in der
   Titelleiste ein - dann in den Enfold-Einstellungen auf eine Stelle reduzieren.
   ============================================================================ */
/* Suchergebnisseite (body.search): echtes Enfold-DOM = main.av-main-search mit
   .search_form_field-Formular + (bei Treffern) .post-entry-Liste. Literale Farben
   (ausserhalb .qfai). Treffer werden von qfinity-newsfeed.js ins .qf-newsfeed-
   Card-Grid gewrappt (strikt im .av-main-search gescopt). */
body.search .av-main-search{ display:flex !important; flex-direction:column; max-width:1180px !important; margin:0 auto !important; width:auto !important; float:none !important; padding:clamp(40px,5vw,72px) 24px clamp(48px,6vw,90px) !important; min-height:42vh; }
/* Reihenfolge SG-konform: Ergebnis-Heading -> Cards -> "Neue Suche"-Verfeinerung unten */
body.search .extra-mini-title{ order:1; color:var(--qf-dark) !important; font-size:clamp(28px,3vw,38px) !important; font-weight:700 !important; letter-spacing:-.02em !important; line-height:1.15 !important; margin:0 0 4px !important; }
body.search .extra-mini-title::before{ content:"Suche"; display:block; color:#E05000; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
/* Treffer als KLASSISCHE LISTE (kein Card-Grid, keine Platzhalter-Grafik): Datum/
   Kategorie-Marker ueber dem Titel, Trennlinie, klickbare Zeile, dezenter Hover. */
body.search .av-main-search > .post-entry{ order:2; display:block !important; width:auto !important; float:none !important; background:transparent !important; border:0 !important; border-bottom:1px solid var(--qf-line) !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; padding:22px 4px !important; cursor:pointer; transition:background .2s ease; }
body.search .av-main-search > .post-entry:first-of-type{ border-top:1px solid var(--qf-line) !important; }
body.search .av-main-search > .post-entry:hover{ background:rgba(224,80,0,.035) !important; }
body.search .post-entry .big-preview,body.search .post-entry .blog-meta,body.search .post-entry .search-result-counter,body.search .post-entry .blog-author,body.search .post-entry .qf-genimg{ display:none !important; }
body.search .post-entry .entry-content-wrapper{ padding:0 !important; }
body.search .post-entry .entry-content-header{ display:flex; flex-direction:column; }
body.search .post-entry .post-meta-infos{ order:-1; margin:0 0 6px !important; color:#6b7074; font-size:12px; }
body.search .post-entry .post-meta-infos .date-container{ color:#E05000 !important; font-weight:800; }
body.search .post-entry .post-meta-infos .text-sep{ margin:0 8px; opacity:.5; }
body.search .post-entry .post-meta-infos .blog-categories a{ color:#6b7074 !important; }
body.search .post-entry .qf-glossar-tag{ display:inline-block; background:rgba(224,80,0,.12); color:#E05000; font-weight:800; font-size:12px; letter-spacing:.07em; text-transform:uppercase; padding:2px 9px; border-radius:999px; margin-right:10px; vertical-align:middle; }
body.search .post-entry .post-title{ font-size:clamp(18px,1.6vw,22px) !important; font-weight:700 !important; letter-spacing:-.01em !important; line-height:1.25 !important; margin:0 !important; }
body.search .post-entry .post-title a{ color:var(--qf-dark) !important; text-decoration:none !important; border-bottom:0 !important; }
body.search .post-entry .post-meta-infos a{ text-decoration:none !important; border-bottom:0 !important; }
body.search .av-main-search > .post-entry:hover .post-title a{ color:#E05000 !important; }
body.search .post-entry .entry-content{ color:var(--qf-text) !important; font-size:16px !important; line-height:1.6 !important; margin:8px 0 0 !important; max-width:840px; }
/* Pagination (roh, da kein .qf-newsfeed-Wrap) im QFINITY-Stil */
body.search .pagination{ order:3; display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:30px !important; }
body.search .pagination .pagination-meta{ color:#6b7074; font-size:12px; margin-right:10px; }
body.search .pagination a,body.search .pagination .current{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border:1px solid var(--qf-line); border-radius:8px; color:var(--qf-text) !important; font-weight:700; font-size:14px; text-decoration:none !important; }
body.search .pagination .current{ background:#E05000 !important; border-color:#E05000 !important; color:#fff !important; }
body.search .pagination a:hover{ border-color:#E05000 !important; color:#E05000 !important; }
body.search .page-heading-container{ order:4; margin-top:48px; padding-top:30px; border-top:1px solid rgba(83,87,90,.16); }
body.search .search_form_field h4{ color:#E05000 !important; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; margin:0 0 10px; }
body.search .search_form_field > p{ color:#6b7074; font-size:16px; line-height:1.6; margin:0 0 22px; max-width:680px; }
body.search #searchform > div{ display:flex; gap:10px; align-items:center; max-width:560px; }
body.search #searchform input[type="search"]{ flex:1; border:1px solid rgba(83,87,90,.26) !important; border-radius:999px !important; padding:13px 18px !important; font-size:16px !important; background:#fff !important; box-shadow:none !important; }
body.search #searchform #searchsubmit{ background:#E05000 !important; border:0 !important; border-radius:999px !important; min-width:52px; height:48px; cursor:pointer; }
/* ============================================================
   GLOSSAR (Encyclopedia-CPT) im QFINITY-Design. Literale Farben (ausserhalb .qfai).
   (1) Einzel-Eintrag body.single-encyclopedia = Lesefassung wie single-post + "Glossar"-Kicker.
   (2) Uebersicht: Encyclopedia-Plugin-Wrapper .encyclopedia + A-Z-Filter .encyclopedia-prefix-filters.
   ============================================================ */
body.single-encyclopedia .title_container{ background:#f5f2ef !important; border:0 !important; box-shadow:none !important; }
body.single-encyclopedia .title_container .container{ padding:40px 0 0 !important; }
body.single-encyclopedia .breadcrumb,body.single-encyclopedia .breadcrumb a,body.single-encyclopedia .breadcrumb span{ color:#6b7074 !important; font-size:12px !important; }
body.single-encyclopedia .breadcrumb a:hover{ color:#E05000 !important; }
body.single-encyclopedia .post-entry{ max-width:820px !important; margin:0 auto !important; float:none !important; width:auto !important; border:0 !important; padding:44px 20px 64px !important; }
body.single-encyclopedia .entry-content-wrapper{ border:0 !important; padding:0 !important; margin:0 !important; }
body.single-encyclopedia .entry-content-header{ margin:0 0 22px; padding:0; border:0; }
body.single-encyclopedia .entry-content-header::before{ content:"Glossar"; display:block; color:#E05000; font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
body.single-encyclopedia .post-title,body.single-encyclopedia .entry-title{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important; color:#141414 !important; font-weight:700 !important; font-size:clamp(28px,4vw,38px) !important; line-height:1.12 !important; letter-spacing:-.025em !important; margin:0 !important; }
body.single-encyclopedia .entry-content{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#24272a !important; font-size:18px !important; line-height:1.72 !important; }
body.single-encyclopedia .entry-content p{ margin:0 0 20px !important; }
body.single-encyclopedia .entry-content h2{ color:#141414 !important; font-weight:700 !important; font-size:28px !important; letter-spacing:-.02em !important; margin:36px 0 12px !important; }
body.single-encyclopedia .entry-content h3{ color:#141414 !important; font-weight:700 !important; font-size:22px !important; margin:28px 0 10px !important; }
body.single-encyclopedia .entry-content a{ color:#ff6b1a !important; text-decoration:none !important; border-bottom:1px solid rgba(255,107,26,.38) !important; transition:color .15s ease,border-color .15s ease; }
body.single-encyclopedia .entry-content a:hover{ color:#B64000 !important; border-bottom-color:#B64000 !important; }
body.single-encyclopedia .entry-content blockquote{ border-left:3px solid #E05000; background:#f5f2ef; margin:28px 0; padding:18px 24px; border-radius:0 14px 14px 0; color:#24272a; }
body.single-encyclopedia .entry-content ul,body.single-encyclopedia .entry-content ol{ margin:0 0 20px; padding-left:22px; }
body.single-encyclopedia .entry-content li{ margin:0 0 9px; }
body.single-encyclopedia .av_post_nav,body.single-encyclopedia .avia-post-nav,body.single-encyclopedia .av-social-sharing-box,body.single-encyclopedia .post_delimiter,body.single-encyclopedia .entry-content hr,body.single-encyclopedia .post-meta-infos{ display:none !important; }
/* (2) Uebersicht = CPT-Archiv body.post-type-archive-encyclopedia (Marken-Glossar).
   Injiziertes Kopf-Band (Kicker/Headline/Lead/Zaehler) + editorial-einspaltige
   Begriffsliste + Buchstaben-Gruppen + Filter-Reset. DOM verifiziert: A-Z =
   .encyclopedia-prefix-filters > .filter-level.level-1 > span.filter > a.filter-link
   (Sub .level-2; aktiv .current-filter; leer .disabled-filter). Begriffe = article.post-entry
   (Titel h2.post-title>a; Definition = roher Textknoten -> per JS in .qf-gloss-def gekapselt;
   more-link a.more-link). Kopf-Band/Zaehler/Gruppen .qf-gloss-* injiziert qfinity-newsfeed.js.
   Literale Farben (ausserhalb .qfai). */
.encyclopedia{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
/* Kopf-Band (Enfold-.title_container -> ruhiges Off-White-Band) */
body.post-type-archive-encyclopedia .title_container{ background:#f5f2ef !important; border:0 !important; box-shadow:none !important; }
body.post-type-archive-encyclopedia .title_container .container{ max-width:860px !important; margin:0 auto !important; padding:44px 20px 0 !important; }
body.post-type-archive-encyclopedia .breadcrumb,body.post-type-archive-encyclopedia .breadcrumb a,body.post-type-archive-encyclopedia .breadcrumb span{ color:#5b6166 !important; font-size:12px !important; }
body.post-type-archive-encyclopedia .breadcrumb a:hover{ color:#E05000 !important; }
/* Enfold-Layout: etwaige Sidebar/Float im CPT-Archiv neutralisieren (Lesespalte zentriert) */
body.post-type-archive-encyclopedia #sidebar{ display:none !important; }
body.post-type-archive-encyclopedia #main .content{ float:none !important; width:100% !important; margin:0 !important; }
/* Enfold-Standardtitel NUR ausblenden, wenn JS unser Kopf-Band gesetzt hat (Fallback-sicher) */
body.post-type-archive-encyclopedia.qf-gloss-enhanced .main-title{ display:none !important; }
/* injiziertes Kopf-Band */
.qf-gloss-head{ max-width:860px !important; margin:0 auto !important; padding:0 20px !important; }
/* im (jetzt auf 860 zentrierten) .title_container die Spaltenpolsterung erben -> Breadcrumb + Band fluchten */
.title_container .qf-gloss-head{ max-width:none !important; margin:0 !important; padding:0 !important; }
.qf-gloss-kicker{ display:block; color:#E05000; font-weight:900; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 12px; }
.qf-gloss-h1{ color:#141414 !important; font-family:inherit !important; font-weight:700 !important; font-size:clamp(28px,4.4vw,52px) !important; line-height:1.1 !important; letter-spacing:-.026em !important; margin:0 !important; }
.qf-gloss-lead{ color:#5b6166; font-size:18px; line-height:1.6; max-width:62ch; margin:14px 0 0; }
.qf-gloss-count{ margin:18px 0 0; color:#5b6166; font-size:14px; font-weight:600; }
.qf-gloss-count .qf-gloss-sep{ margin:0 8px; opacity:.55; }
.qf-gloss-count strong{ color:#141414; font-weight:800; }
.qf-gloss-reset{ color:#E05000 !important; font-weight:700; text-decoration:none !important; border-bottom:1px solid rgba(224,80,0,.32) !important; margin-left:8px; }
.qf-gloss-reset:hover{ border-bottom-color:#E05000 !important; }
/* A-Z-Filterleiste: QFINITY-Chips, KEINE graue Enfold-Box, zentriert auf Lesespalte */
.encyclopedia-prefix-filters{ max-width:860px !important; margin:26px auto 0 !important; background:transparent !important; border:0 !important; border-bottom:1px solid rgba(83,87,90,.16) !important; padding:0 20px 22px !important; }
.encyclopedia-prefix-filters .filter-level{ display:flex !important; flex-wrap:wrap; gap:6px; margin:0 !important; padding:0 !important; list-style:none !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
/* Zwischenebene (Sub-Praefix .level-2): kein grauer Kasten, eingerueckt + kleinere Chips */
.encyclopedia-prefix-filters .filter-level.level-2{ margin-top:10px !important; padding-left:14px !important; border-left:2px solid rgba(224,80,0,.30) !important; }
.encyclopedia-prefix-filters .filter-level.level-2 .filter-link{ height:32px; min-width:32px; font-size:12px; }
.encyclopedia-prefix-filters .filter{ display:inline-block !important; margin:0 !important; padding:0 !important; background:none !important; border:0 !important; }
.encyclopedia-prefix-filters .filter-link{ display:inline-grid; place-items:center; min-width:36px; height:36px; padding:0 10px; border:1px solid rgba(83,87,90,.16) !important; border-radius:8px; background:#fff !important; color:#24272a !important; font-weight:800; font-size:14px; text-decoration:none !important; transition:border-color .15s ease,color .15s ease,background .15s ease; }
.encyclopedia-prefix-filters .filter-link:hover{ border-color:#E05000 !important; color:#E05000 !important; }
.encyclopedia-prefix-filters .filter-link:focus-visible{ outline:2px solid #E05000; outline-offset:2px; }
/* aktiver Buchstabe: Orange + Radius NUR auf dem Link (a.filter-link). Der span.filter.current-filter
   bekommt KEINEN Hintergrund - sonst quadratischer Orange-Kasten hinter dem gerundeten Chip. */
.encyclopedia-prefix-filters .filter.current-filter,.encyclopedia-prefix-filters .current-filter{ background:transparent !important; border:0 !important; }
.encyclopedia-prefix-filters .filter-link.current-filter,.encyclopedia-prefix-filters .current-filter .filter-link,.encyclopedia-prefix-filters .filter.current-filter .filter-link{ background:#E05000 !important; border-color:#E05000 !important; color:#fff !important; border-radius:8px !important; }
.encyclopedia-prefix-filters .disabled-filter,.encyclopedia-prefix-filters .disabled-filter .filter-link{ opacity:.32; pointer-events:none; }
/* Buchstaben-Gruppen-Header (JS-injiziert vor erstem Begriff je Initiale, nur ungefiltert) */
.qf-gloss-group{ max-width:860px; margin:30px auto 6px; padding:0 20px; color:#E05000; font-weight:900; font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.qf-gloss-group:first-of-type{ margin-top:14px; }
.qf-gloss-group::after{ content:""; display:block; height:2px; margin-top:8px; background:linear-gradient(90deg,rgba(224,80,0,.45),rgba(224,80,0,0)); }
/* Begriffsliste: editorial, einspaltig, zentriert, orange Lemma-Marke bei Hover */
body.post-type-archive-encyclopedia .post-entry{ position:relative; display:block !important; max-width:860px !important; width:auto !important; float:none !important; margin:0 auto !important; background:transparent !important; border:0 !important; border-bottom:1px solid rgba(83,87,90,.16) !important; border-radius:0 !important; box-shadow:none !important; padding:20px 20px 20px 26px !important; cursor:pointer; transition:background .18s ease; }
body.post-type-archive-encyclopedia .post-entry:hover{ background:#f1ece7 !important; }
/* letzter Begriff: keine Trennlinie + grosszuegiger Abstand zum dunklen Footer */
body.post-type-archive-encyclopedia .post-entry:last-of-type{ border-bottom:0 !important; margin-bottom:clamp(64px,8vw,120px) !important; }
/* Glossar-Fussnote (JS-injiziert unter der Liste, v2.39.16): drei Definitions-Ebenen +
   Gewaehr-/Beratungs-Hinweis; der grosse Abstand zum Footer wandert vom letzten Begriff
   auf die Fussnote (body-Klasse setzt qfinity-newsfeed.js beim Injizieren) */
body.qf-gloss-has-footnote.post-type-archive-encyclopedia .post-entry:last-of-type{ margin-bottom:28px !important; }
.qf-gloss-footnote{ max-width:860px; margin:0 auto clamp(64px,8vw,120px); padding:22px 20px 0; border-top:1px solid rgba(83,87,90,.22); }
.qf-gloss-footnote-title{ color:#141414; font-weight:800; font-size:12px; letter-spacing:.09em; text-transform:uppercase; margin:0 0 10px; }
.qf-gloss-footnote p{ color:#5b6166; font-size:14px; line-height:1.65; margin:0; max-width:76ch; }
body.post-type-archive-encyclopedia .post-entry::before{ content:""; position:absolute; left:8px; top:22px; bottom:22px; width:3px; background:#E05000; border-radius:8px; transform:scaleY(0); transform-origin:top; transition:transform .2s ease; z-index:2; }
body.post-type-archive-encyclopedia .post-entry:hover::before{ transform:scaleY(1); }
/* Stretched-Link: Titel-Link spannt die ganze Karte auf (Klickflaeche = Linkflaeche,
   ein Tab-Stop, Cmd-/Mittelklick + Tastatur korrekt) - ersetzt JS-Zeilen-Click. */
body.post-type-archive-encyclopedia .post-entry .post-title a::after,body.post-type-archive-encyclopedia .post-entry .entry-title a::after{ content:""; position:absolute; inset:0; z-index:1; }
/* schema.org-Strukturdaten (.hidden/.av-structured-data) defensiv ausblenden */
body.post-type-archive-encyclopedia .post-entry > .hidden,body.post-type-archive-encyclopedia .post-entry .av-structured-data,body.post-type-archive-encyclopedia .post-entry script{ display:none !important; }
/* Enfold-Blog-Chrome komplett raus: Bild, Meta-Block, Format-Icon, Platzhalter, Datum
   UND die Blog-Reste post_delimiter (= orange Querlinie!), entry-footer, author-timeline, blog-meta. */
body.post-type-archive-encyclopedia .post-entry .big-preview,body.post-type-archive-encyclopedia .post-entry .blog-meta,body.post-type-archive-encyclopedia .post-entry .post-format-icon,body.post-type-archive-encyclopedia .post-entry .qf-genimg,body.post-type-archive-encyclopedia .post-entry .post-meta-infos,body.post-type-archive-encyclopedia .post-entry .post_delimiter,body.post-type-archive-encyclopedia .post-entry .entry-footer,body.post-type-archive-encyclopedia .post-entry .post_author_timeline{ display:none !important; }
body.post-type-archive-encyclopedia .post-entry .entry-content-wrapper{ padding:0 !important; border:0 !important; margin:0 !important; }
body.post-type-archive-encyclopedia .post-entry .entry-content-header{ margin:0 !important; padding:0 !important; border:0 !important; }
body.post-type-archive-encyclopedia .post-entry .post-title,body.post-type-archive-encyclopedia .post-entry .entry-title{ font-size:clamp(18px,1.8vw,22px) !important; font-weight:700 !important; letter-spacing:-.018em !important; line-height:1.22 !important; margin:0 !important; text-transform:none !important; overflow-wrap:anywhere; }
body.post-type-archive-encyclopedia .post-entry .post-title a,body.post-type-archive-encyclopedia .post-entry .entry-title a{ color:#141414 !important; text-decoration:none !important; border-bottom:0 !important; text-transform:none !important; }
body.post-type-archive-encyclopedia .post-entry:hover .post-title a{ color:#E05000 !important; }
body.post-type-archive-encyclopedia .post-entry .qf-gloss-def,body.post-type-archive-encyclopedia .post-entry .entry-content{ color:#53575A !important; font-size:16px !important; line-height:1.6 !important; margin:6px 0 0 !important; max-width:64ch; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* gefiltert (Buchstabe gewaehlt) -> volle Definition zeigen, kein Clamp */
body.post-type-archive-encyclopedia.qf-gloss-filtered .post-entry .qf-gloss-def,body.post-type-archive-encyclopedia.qf-gloss-filtered .post-entry .entry-content{ -webkit-line-clamp:unset; display:block; overflow:visible; }
/* Weiterlesen: echte Enfold-Struktur = <div.read-more-link><a.more-link>Weiterlesen
   <span.more-link-arrow ...svg></a></div>. Wrapper-DIV neutral als Block (KEIN ::after-Pfeil
   auf dem Wrapper!), <a> als schlichter inline-Orange-Textlink, Enfolds SVG-Pfeil aus,
   EIN sauberer ::after-Pfeil NUR am Link. */
/* Wrapper-DIV .read-more-link = Enfolds Read-More-TRENNLINIE (border-top, schwarz) +
   rechtsbuendiger Link. Linie + Rechtsbuendigkeit + etwaige Pseudo-Linien komplett killen. */
body.post-type-archive-encyclopedia .post-entry .read-more-link{ position:relative !important; z-index:2 !important; display:block !important; margin:10px 0 0 !important; padding:0 !important; background:none !important; border:0 !important; border-top:0 !important; border-bottom:0 !important; box-shadow:none !important; text-align:left !important; }
body.post-type-archive-encyclopedia .post-entry .read-more-link::before,body.post-type-archive-encyclopedia .post-entry .read-more-link::after{ content:none !important; display:none !important; border:0 !important; background:none !important; }
body.post-type-archive-encyclopedia .post-entry a.more-link{ position:static !important; display:inline-block !important; margin:0 !important; padding:0 !important; background:none !important; background-color:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; float:none !important; width:auto !important; text-align:left !important; color:#E05000 !important; font-weight:700 !important; font-size:12px !important; letter-spacing:.04em !important; text-decoration:none !important; border-bottom:0 !important; }
/* Enfolds SVG-/Icon-Pfeil im Link aus -> nur der eine ::after-Pfeil bleibt */
body.post-type-archive-encyclopedia .post-entry .more-link .more-link-arrow,body.post-type-archive-encyclopedia .post-entry .more-link [class*="arrow"],body.post-type-archive-encyclopedia .post-entry .more-link svg,body.post-type-archive-encyclopedia .post-entry .more-link i,body.post-type-archive-encyclopedia .post-entry .more-link img{ display:none !important; }
body.post-type-archive-encyclopedia .post-entry a.more-link::before{ content:none !important; display:none !important; border:0 !important; }
body.post-type-archive-encyclopedia .post-entry a.more-link::after{ content:" \2192"; display:inline; transition:margin-left .15s ease; }
body.post-type-archive-encyclopedia .post-entry:hover a.more-link::after{ margin-left:3px; }
/* Pagination (falls Begriffe paginiert): zur Lesespalte zentriert, QFINITY-Chips */
body.post-type-archive-encyclopedia .pagination{ max-width:860px; margin:30px auto 0; padding:0 20px; text-align:center; clear:both; }
body.post-type-archive-encyclopedia .pagination a,body.post-type-archive-encyclopedia .pagination span{ border:1px solid rgba(83,87,90,.16) !important; background:#fff !important; color:#24272a !important; border-radius:8px !important; }
body.post-type-archive-encyclopedia .pagination .current{ background:#E05000 !important; border-color:#E05000 !important; color:#fff !important; }
body.single-post .title_container{ background:#f5f2ef !important; border:0 !important; box-shadow:none !important; }
body.single-post .title_container .container{ padding:40px 0 0 !important; }
body.single-post .title_container .main-title{ display:none !important; }
body.single-post .breadcrumb, body.single-post .breadcrumb a, body.single-post .breadcrumb span{ color:#6b7074 !important; font-size:12px !important; }
body.single-post .breadcrumb a:hover{ color:#E05000 !important; }
body.single-post .post-entry{ max-width:820px !important; margin:0 auto !important; float:none !important; width:auto !important; border:0 !important; padding:44px 20px 0 !important; }
body.single-post .big-preview{ float:none !important; margin:0 0 34px !important; width:100% !important; }
/* v2.41.6: Titelbild unbeschnitten proportional (PHP-Filter qfds_single_post_thumbnail_size
   ersetzt Enfolds 1210x423-Hard-Crop durch 'large') + Deckel gegen extrem hohe Formate:
   max-height croppt per object-fit unten, object-position:center top haelt Koepfe sichtbar. */
body.single-post .big-preview img{ border-radius:22px; width:100%; height:auto; max-height:560px; object-fit:cover; object-position:center top; display:block; }
body.single-post .image-overlay{ display:none !important; }
/* Distinkter Hero-Platzhalter, wenn der Beitrag KEIN Titelbild hat (vom JS
   injiziert). BEWUSST anders als die Feed-Card-Platzhalter (.qf-genimg): cinematic
   21:9, dunkler Marken-Verlauf + radialer Orange-Glow (Signature) + grosses, weit
   ausgeblendetes ∞-Wasserzeichen unten rechts; KEIN Kategorie-Label (Kategorie
   steht im Meta-Kicker unter dem Titel). */
.qf-genimg-hero{
  position:relative !important; aspect-ratio:21/9; border-radius:22px; overflow:hidden;
  background:linear-gradient(120deg,#141414 0%,#232527 56%,#53575A 100%) !important;
}
.qf-genimg-hero::before{
  content:""; position:absolute; left:14%; top:-46%; width:74%; height:170%;
  background:radial-gradient(circle, rgba(224,80,0,.50), rgba(224,80,0,.12) 42%, transparent 64%);
  pointer-events:none;
}
.qf-genimg-hero::after{
  content:"\221E"; position:absolute; right:3%; bottom:-16%; line-height:1;
  font-size:clamp(120px,24vw,280px); color:rgba(255,255,255,.11); font-weight:900;
  font-family:Georgia,"Times New Roman",serif; pointer-events:none;
}
body.single-post .entry-content-wrapper{ border:0 !important; padding:0 !important; margin:0 !important; }
body.single-post .entry-content-header{ display:flex; flex-direction:column; margin:0 0 28px; padding:0; border:0; }
body.single-post .post-meta-infos{ order:-1; margin:0 0 14px; padding:0; font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; border:0; }
body.single-post .date-container, body.single-post .blog-categories, body.single-post .blog-categories a{ color:#E05000 !important; }
body.single-post .post-format-icon, body.single-post .blog-author, body.single-post .text-sep{ display:none !important; }
body.single-post h1.post-title{ order:0; color:#141414 !important; font-size:clamp(28px,4vw,38px); line-height:1.12; letter-spacing:-.025em; font-weight:700; margin:0; }
body.single-post .entry-content{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#24272a; font-size:18px; line-height:1.72; }
body.single-post .entry-content p{ margin:0 0 20px; }
body.single-post .entry-content h2{ color:#141414; font-weight:700; font-size:28px; letter-spacing:-.02em; margin:36px 0 12px; }
body.single-post .entry-content h3{ color:#141414; font-weight:700; font-size:22px; margin:28px 0 10px; }
body.single-post .entry-content a{ color:#ff6b1a; text-decoration:none; border-bottom:1px solid rgba(255,107,26,.38); transition:color .15s ease,border-color .15s ease; }
body.single-post .entry-content a:hover{ color:#B64000; border-color:#B64000; }
body.single-post .entry-content img{ border-radius:16px; height:auto; max-width:100%; }
body.single-post .entry-content blockquote{ border-left:3px solid #E05000; background:#f5f2ef; margin:28px 0; padding:18px 24px; border-radius:0 14px 14px 0; font-style:normal; color:#24272a; }
body.single-post .entry-content ul, body.single-post .entry-content ol{ margin:0 0 20px; padding-left:22px; }
body.single-post .entry-content li{ margin:0 0 9px; }
body.single-post .post_delimiter{ display:none !important; }
/* entry-footer NICHT komplett ausblenden (haelt ggf. Tags) - nur Rahmen resetten */
body.single-post .entry-footer{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; box-shadow:none !important; }
/* Trennlinien/leere Boxen am Beitragsende entfernen: Content-HRs, Post-Navigation
   (prev/next mit Border = 2 Striche), die leere Social-Sharing-Box (= die 2 Striche),
   Delimiter, Autoren-Timeline. Related-Posts (Card-Grid) + Tags bleiben. */
body.single-post .entry-content hr,
body.single-post .post-entry > hr,
body.single-post .av_post_nav, body.single-post .avia-post-nav,
body.single-post .post-pagination, body.single-post .big_nav,
body.single-post .av-social-sharing-box, body.single-post .av-share-box,
body.single-post .av-vertical-delimiter,
body.single-post .post_author_timeline, body.single-post .av-related-style-tinypreview > hr{ display:none !important; }
/* Untere Enfold-Meta IMMER ausblenden - der Kicker (Datum + Kategorie) wird oben
   im av-heading-wrapper gebaut. So sind die Enfold-Meta-Schalter egal (an/aus). */
body.single-post .post-meta-infos{ display:none !important; }
/* Structured-Data (Quelle fuers injizierte Datum) nie sichtbar */
body.single-post .av-structured-data, body.single-post .post-entry > .hidden{ display:none !important; }

/* ============================================================
   PORTFOLIO-ABSPRUNGBRETT - .qf-portfolio-springboard (v2.33.0)
   Am Artikelende jedes Beitrags (JS-injiziert via qfinity-newsfeed.js,
   addSingleSpringboard). Bruecke vom Beitrag zurueck ins Service-Portfolio.
   body.single-post liegt AUSSERHALB .qfai -> literale Farben. Reused .related-card-Optik.
   ============================================================ */
body.single-post .qf-portfolio-springboard{ margin:52px 0 8px; padding:34px 0 0; border-top:1px solid rgba(83,87,90,.16); }
body.single-post .qf-sb-kicker{ color:#E05000; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; margin:0 0 8px; }
body.single-post .qf-sb-head{ color:#141414; font-size:22px; font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0 0 22px; }
body.single-post .qf-sb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
body.single-post .qf-sb-card{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border:1px solid rgba(83,87,90,.28) !important; border-radius:16px; background:#f5f2ef; text-decoration:none !important; transition:border-color .18s, background .18s, box-shadow .18s; }
body.single-post .qf-sb-card:hover{ border-color:#E05000 !important; background:#fff; box-shadow:0 8px 24px rgba(20,20,20,.07); }
body.single-post .qf-sb-title{ color:#141414; font-weight:700; font-size:16px; }
body.single-post .qf-sb-arrow{ color:#E05000; font-weight:700; font-size:18px; transition:color .18s, transform .18s; }
body.single-post .qf-sb-card:hover .qf-sb-arrow{ color:#E05000; transform:translateX(3px); }
body.single-post .qf-sb-all{ display:inline-block; margin-top:18px; color:#E05000 !important; font-weight:800; font-size:14px; text-decoration:none !important; border-bottom:0 !important; }
@media(max-width:560px){ body.single-post .qf-sb-grid{ grid-template-columns:1fr; } }

/* Kicker UEBER dem Titel: Datum (vom JS aus Structured-Data injiziert) + Kategorie
   aus dem av-heading-wrapper, inline auf einer Zeile (q-finity nutzt diese Struktur,
   da die Enfold-Meta global deaktiviert ist). */
body.single-post .av-heading-wrapper .qf-postdate,
body.single-post .av-heading-wrapper .date-container,
body.single-post .av-heading-wrapper .blog-categories{
  display:inline-block !important; margin:0 !important; padding:0 !important; vertical-align:baseline;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800;
}
body.single-post .av-heading-wrapper .qf-postdate,
body.single-post .av-heading-wrapper .date-container{ color:#E05000 !important; }
/* "in "-Wortknoten der Kategorie killen (nur der Link bleibt) */
body.single-post .av-heading-wrapper .blog-categories{ font-size:0 !important; }
body.single-post .av-heading-wrapper .blog-categories a{ font-size:12px !important; color:#E05000 !important; text-decoration:none !important; border:0 !important; }
/* Trenn-Bullet nur, wenn ein Datum vor der Kategorie steht */
body.single-post .av-heading-wrapper .qf-postdate + .blog-categories::before,
body.single-post .av-heading-wrapper .date-container + .blog-categories::before{ content:"\00b7"; font-size:12px; margin:0 8px; color:rgba(224,80,0,.55); font-weight:800; }
body.single-post .av-heading-wrapper h1.post-title{ display:block; margin-top:13px !important; }
/* ============================================================
   EDITORIALES SINGLE-POST-SYSTEM (v2.34.0) - profi-Lesetypografie fuer Beitraege
   (Meet QFINITY / Projekt-News / News). Abstract + Pull-Quote + akzentuierte
   Ueberschrift, konsistenter Look&Feel. body.single-post liegt AUSSERHALB .qfai
   -> literale Farben. SG: c-article.
   ============================================================ */
/* Lead/Standfirst: erster Absatz als ruhiger, groesserer Intro (nicht kursiv) -
   automatisch fuer JEDEN Beitrag (Baseline-Professionalitaet) */
body.single-post .entry-content > p:first-of-type:not(.qf-abstract){ font-size:20px; line-height:1.62; font-weight:450; font-style:normal; color:#141414; margin-bottom:26px; }
/* Abstract: bewusst gesetzte Kurz-Zusammenfassung am Anfang (Soft-Panel + Eyebrow).
   Wirkt wie ein redaktionelles Abstract; bei vorhandenem .qf-abstract greift die
   Lead-Regel oben NICHT (Klassen-Ausschluss). */
body.single-post .entry-content > .qf-abstract{ margin:0 0 34px; padding:22px 26px; border-radius:16px; background:#f5f2ef; border:1px solid rgba(83,87,90,.18); border-left:3px solid #E05000; font-size:19px; line-height:1.6; font-weight:450; font-style:normal; color:#141414; }
body.single-post .entry-content > .qf-abstract::before{ content:"Kurz"; display:block; color:#E05000; font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; margin-bottom:9px; }
html[lang^="en"] body.single-post .entry-content > .qf-abstract::before{ content:"In brief"; }
body.single-post .entry-content > .qf-abstract p{ margin:0; }
/* Pull-Quote: grosses Statement im Lesefluss, 66-Auftaktzeichen (ueberschreibt den
   Standard-blockquote-Stil bei .qf-pullquote) */
/* Pull-Quote als leicht abgesetzte Box (ganz leichte Helligkeits-Nuance #f7f5f2) mit
   markantem 66-Auftaktzeichen ueber der oberen linken Ecke. */
body.single-post .entry-content blockquote.qf-pullquote{ position:relative; border:0 !important; background:#f7f5f2 !important; border-radius:16px !important; margin:52px 0 !important; padding:40px 36px 34px !important; font-size:clamp(23px,3.2vw,31px); line-height:1.3; font-weight:700; letter-spacing:-.02em; color:#2b2f33; font-style:normal; }
body.single-post .entry-content blockquote.qf-pullquote::before{ content:"\201C"; position:absolute; top:-26px; left:22px; font-family:Georgia,"Times New Roman",serif; color:#E05000; font-size:92px; line-height:1; }
body.single-post .entry-content blockquote.qf-pullquote p{ margin:0; }
/* Akzentuierte Abschnitts-Ueberschrift: kurze orange Markierung ueber jeder h2 */
body.single-post .entry-content h2{ position:relative; padding-top:20px; }
body.single-post .entry-content h2::before{ content:""; position:absolute; top:0; left:0; width:46px; height:3px; border-radius:2px; background:#E05000; }
/* Listen: orange Marker-Punkte statt Default-Discs (Marken-Look, scanbar) */
body.single-post .entry-content ul{ list-style:none !important; padding-left:2px !important; }
body.single-post .entry-content ul > li{ position:relative; padding-left:26px; margin:0 0 11px; }
body.single-post .entry-content ul > li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:#E05000; }
/* Externer Verweis (z.B. Veranstalter-Seite) als gerahmte Referenz-Karte mit Eyebrow +
   Aussen-Pfeil. Loest den "verlorenen" nackten Link ab. Ueberschreibt den .entry-content-a-Stil. */
body.single-post .entry-content a.qf-extref{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:34px 0 8px; padding:18px 22px; border:1px solid rgba(83,87,90,.28) !important; border-radius:16px; background:#f5f2ef; text-decoration:none !important; color:#141414 !important; transition:border-color .18s, background .18s, box-shadow .18s; }
body.single-post .entry-content a.qf-extref:hover{ border-color:#E05000 !important; background:#fff; box-shadow:0 8px 24px rgba(20,20,20,.07); }
body.single-post .entry-content a.qf-extref .qf-extref-text{ color:#141414; font-weight:700; font-size:16px; line-height:1.35; }
body.single-post .entry-content a.qf-extref .qf-extref-arrow{ flex:none; color:#E05000; font-weight:700; font-size:20px; line-height:1; transition:transform .18s; }
body.single-post .entry-content a.qf-extref:hover .qf-extref-arrow{ transform:translate(2px,-2px); }
/* Seiten-Kontext (.qfai): dieselbe Referenz-Karte auch auf regulaeren Seiten. Ohne diese Regel
   ist a.qf-extref dort display:inline -> margin-top wird ignoriert -> der Link ueberlappt den
   vorstehenden Block (gemessen: mobil, GAMP-RDI #beteiligt). display:flex macht ihn zur Box. */
.qfai a.qf-extref{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:24px 0 0; padding:16px 22px; border:1px solid rgba(83,87,90,.28); border-radius:16px; background:#f5f2ef; text-decoration:none; color:#141414; max-width:520px; transition:border-color .18s, background .18s, box-shadow .18s; }
.qfai a.qf-extref:hover{ border-color:#E05000; background:#fff; box-shadow:0 8px 24px rgba(20,20,20,.07); }
.qfai a.qf-extref .qf-extref-text{ color:#141414; font-weight:700; font-size:16px; line-height:1.35; }
.qfai a.qf-extref .qf-extref-arrow{ flex:none; color:#E05000; font-weight:700; font-size:20px; line-height:1; transition:transform .18s; }
.qfai a.qf-extref:hover .qf-extref-arrow{ transform:translate(2px,-2px); }
/* Tags-Zeile am Beitragsfuss im QFINITY-Stil (oranges "Tags:", gemutete Links) */
body.single-post .blog-tags{
  display:block !important; margin:30px 0 0 !important; padding-top:18px;
  border-top:1px solid rgba(83,87,90,.16); font-size:14px; color:#6b7074;
}
body.single-post .blog-tags a{ color:#6b7074 !important; text-decoration:none !important; border:0 !important; }
body.single-post .blog-tags a:hover{ color:#E05000 !important; }
body.single-post .blog-tags .iconfont, body.single-post .blog-tags:before{ color:#E05000; }
body.single-post .related_posts{ max-width:1140px; margin:56px auto 0 !important; padding:0 20px; }
body.single-post .related_title{ color:#141414 !important; font-weight:700; font-size:22px; letter-spacing:-.02em; margin:0 0 22px; }
body.single-post .related_entries_container{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
body.single-post .related_column{ float:none !important; width:auto !important; margin:0 !important; background:#fff; border:1px solid rgba(83,87,90,.16); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s, box-shadow .2s; }
body.single-post .related_column:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); }
body.single-post .related_image_wrap{ aspect-ratio:16/10; overflow:hidden; display:block; }
body.single-post .related_image_wrap img{ width:100%; height:100%; object-fit:cover; }
body.single-post .related-title{ display:block; padding:16px 18px; color:#141414 !important; font-weight:700; font-size:16px; line-height:1.32; }

/* ============================================================
   EVENT-BERICHT-BAUSTEINE (v2.41.0) - fuer bebilderte Berichte (Konferenz/Event).
   body.single-post .entry-content, literale Farben (ausserhalb .qfai). SG: c-article.
   Abstaende auf der Spacing-Skala (12/16/24/32/40). Enfold-Resets: img-margin/-radius,
   figure-margin, button-appearance. Spezifitaet gegen generische .entry-content p/img
   bewusst hochgezogen (p.qf-keyq / .qf-figure img).
   ============================================================ */
/* qf-figure: Bild im Textumfluss, abwechselnd links/rechts, Text fliesst herum */
body.single-post .entry-content .qf-figure{ margin:4px 0 16px; max-width:322px; }
body.single-post .entry-content .qf-figure.left{ float:left; margin-right:24px; }
body.single-post .entry-content .qf-figure.right{ float:right; margin-left:24px; }
body.single-post .entry-content .qf-figure img{ width:100%; border-radius:12px; box-shadow:0 14px 40px -22px rgba(20,20,20,.28); margin:0; }
body.single-post .entry-content .qf-figure figcaption{ margin-top:12px; padding-left:13px; border-left:2px solid #f5a623; font-size:13px; line-height:1.5; color:#6b7074; }
body.single-post .entry-content .qf-figure figcaption b{ display:block; color:#141414; font-weight:800; letter-spacing:.11em; text-transform:uppercase; font-size:12px; margin-bottom:4px; }
@media(max-width:620px){ body.single-post .entry-content .qf-figure.left, body.single-post .entry-content .qf-figure.right{ float:none; max-width:100%; margin:24px 0; } }
/* qf-gaplist: nummerierter Beleg-Block (Soft-Karten, orange Nummer + Linkskante)
   v2.41.2: Scope um .qfai erweitert - die Komponente war seit 2.41.0 an body.single-post
   gebunden (gebaut fuer die Event-Bericht-Blaupause, wo Posts der einzige Ort waren). Sie
   traegt aber generisch "konkrete Punkte/Luecken, nummeriert" und wird auf .qfai-Seiten
   (Service/Pillar) genauso gebraucht. Regeln identisch, nur der zweite Anker kommt dazu -
   KEINE Zweitdefinition, damit Post und Seite nicht auseinanderlaufen koennen.
   Unterschied: das eigene margin-top gilt nur im Post; auf .qfai kommt der vertikale
   Rhythmus aus den Flow-Listen oben (.qf-gaplist ist dort seit v2.41.2 gelistet). */
body.single-post .entry-content .qf-gaplist{ margin:24px 0 0; clear:both; }
body.single-post .entry-content .qf-gaplist,
.qfai .qf-gaplist{ display:flex; flex-direction:column; gap:12px; }
body.single-post .entry-content .qf-gap,
.qfai .qf-gap{ display:flex; gap:16px; padding:16px 24px; background:#f5f2ef; border:1px solid rgba(83,87,90,.18); border-left:3px solid #E05000; border-radius:12px; }
body.single-post .entry-content .qf-gap-n,
.qfai .qf-gap-n{ flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:#E05000; color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }
body.single-post .entry-content .qf-gap-t,
.qfai .qf-gap-t{ font-size:15px; line-height:1.5; color:#6b7074; }
body.single-post .entry-content .qf-gap-t b,
.qfai .qf-gap-t b{ color:#141414; font-weight:700; }
/* Dunkles Band: Soft-Karte + graue Schrift traegt auf .section.dark nicht - Karte auf
   Weiss-Transparenz, Text hell. Nur .qfai (im Post gibt es kein dark-Band).
   border-color NUR fuer die drei Haarlinien-Seiten - die orange Linkskante ist das
   Erkennungsmerkmal der Komponente und bleibt (gemessener Fehler beim Bau: pauschales
   border-color hat sie mit uebermalt). */
.qfai .section.dark .qf-gap{ background:rgba(255,255,255,.06); border-top-color:rgba(255,255,255,.14); border-right-color:rgba(255,255,255,.14); border-bottom-color:rgba(255,255,255,.14); }

/* Quellen-/Fundstellen-Zeile IN der big-quote (v2.41.3). Zitierte Regelwerke und Normen
   brauchen eine Attribution; sie darf aber nicht im Zitatgrad mitlaufen, sonst liest der
   Nutzer die Fundstelle als Teil des Zitats ("...erfuellt sind. ISO 19011, 3.1"). Eigene
   Zeile, kleiner, gedaempft. Sitzt INNERHALB der Quote, weil die big-quote letztes Kind
   ihres Containers sein muss (SG v2.104) - eine Quellenzeile daneben ginge nicht. */
.qfai .big-quote .bq-source{ display:block; margin-top:var(--qf-s4); font-size:14px; font-weight:600; letter-spacing:.04em; line-height:1.4; color:var(--qf-muted); }
.qfai .section.dark .big-quote .bq-source{ color:rgba(255,255,255,.6); }

/* ---- Karten-Variante .qf-gaplist.is-cards (v2.41.3) - fuer BREITE Container -------------
   WARUM: Die Zeilen-Variante oben ist fuer die Artikelspalte des Posts entworfen (~680px ->
   79 Zeichen/Zeile, im Richtwert 45-75/max 90). Im .qfai-Seitencontainer (1240px) wird daraus
   ein Textband mit 131 Zeichen/Zeile - unlesbar, und der 25px-Badge verliert sich in einem
   ~16:1-Streifen (alles live gemessen, Audit-Seite 2026-07-15). Nicht die Komponente war
   falsch, sondern die Proportion im doppelt so breiten Kontext.
   WAS: zwei Spalten (-> 63 Zeichen/Zeile), Kopfzeile aus Badge + Kategorie-Kicker, Titel als
   eigene Zeile. Die Kategorie kommt aus der Sache selbst (Gap-Cards: Dokumentation/Prozess/
   Daten & Vertraege) - sie sortiert die Luecken, statt sie nur aufzuzaehlen.
   Modifier statt Neudefinition: Karte, Radius, Kante, Badge-Farbe erben von oben. */
.qfai .qf-gaplist.is-cards{ display:grid; grid-template-columns:1fr 1fr; gap:var(--qf-s4); }
.qfai .qf-gaplist.is-cards .qf-gap{ display:block; padding:var(--qf-s5) 28px; }
.qfai .is-cards .qf-gap-head{ display:flex; align-items:center; gap:var(--qf-s3); margin-bottom:var(--qf-s3); }
.qfai .is-cards .qf-gap-n{ width:28px; height:28px; }
.qfai .is-cards .qf-gap-cat{ color:var(--qf-gold); font-weight:800; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.qfai .is-cards .qf-gap-t{ display:block; color:var(--qf-dark); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:-.02em; margin-bottom:var(--qf-s2); }
.qfai .is-cards .qf-gap-d{ color:var(--qf-muted); font-size:15px; line-height:1.6; }
.qfai .section.dark .is-cards .qf-gap-t{ color:#fff; }
.qfai .section.dark .is-cards .qf-gap-d{ color:rgba(255,255,255,.72); }
@media(max-width:900px){ .qfai .qf-gaplist.is-cards{ grid-template-columns:1fr; } }
.qfai .section.dark .qf-gap-t{ color:rgba(255,255,255,.78); }
.qfai .section.dark .qf-gap-t b{ color:#fff; }
/* qf-keyq: betonte Sog-/Prueffrage. p.qf-keyq (0,3,1) schlaegt generische .entry-content p (0,2,1) */
body.single-post .entry-content p.qf-keyq{ font-size:clamp(16.5px,1.9vw,19px); line-height:1.42; font-weight:600; color:#141414; border-left:3px solid #f5a623; padding-left:18px; margin:32px 0; }
/* qf-carousel: Impressionen-Slider (buendelt ueberzaehlige Bilder). JS: qfinity-carousel.js */
body.single-post .entry-content .qf-carousel{ margin:40px 0 0; outline:none; }
body.single-post .entry-content .qf-car-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
body.single-post .entry-content .qf-car-eyebrow{ display:flex; align-items:center; gap:9px; color:#E05000; font-weight:700; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
body.single-post .entry-content .qf-car-eyebrow::before{ content:""; width:22px; height:2px; background:#E05000; }
body.single-post .entry-content .qf-car-title{ color:#141414; font-weight:600; font-size:15px; }
body.single-post .entry-content .qf-car-count{ margin-left:auto; color:#6b7074; font-size:12px; font-variant-numeric:tabular-nums; }
body.single-post .entry-content .qf-car-viewport{ position:relative; border-radius:14px; overflow:hidden; box-shadow:0 14px 40px -22px rgba(20,20,20,.28); background:#000; }
body.single-post .entry-content .qf-car-track{ display:flex; transition:transform .45s cubic-bezier(.4,0,.2,1); will-change:transform; }
body.single-post .entry-content .qf-car-slide{ flex:0 0 100%; margin:0; position:relative; }
body.single-post .entry-content .qf-car-slide img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:0; margin:0; }
body.single-post .entry-content .qf-car-slide figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; color:#fff; font-size:13.5px; font-weight:500; letter-spacing:.01em; background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72)); }
body.single-post .entry-content .qf-car-btn{ -webkit-appearance:none; appearance:none; position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(20,20,20,.42); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:background .18s, border-color .18s; }
body.single-post .entry-content .qf-car-btn:hover{ background:#E05000; border-color:#E05000; }
body.single-post .entry-content .qf-car-btn:focus-visible{ outline:2px solid #f5a623; outline-offset:2px; }
body.single-post .entry-content .qf-car-prev{ left:14px; }
body.single-post .entry-content .qf-car-next{ right:14px; }
body.single-post .entry-content .qf-car-dots{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
body.single-post .entry-content .qf-car-dot{ -webkit-appearance:none; appearance:none; width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(83,87,90,.16); transition:background .2s, width .2s; }
body.single-post .entry-content .qf-car-dot.on{ background:#f5a623; width:22px; border-radius:5px; }
@media(prefers-reduced-motion:reduce){ body.single-post .entry-content .qf-car-track{ transition:none; } }