/* ===========================================================
   Tucore – Basis-Stylesheet (neutral, wird an Branding angepasst,
   sobald Logo/Farben/Fotos vorliegen)
   =========================================================== */
:root {
  --color-text: #1a1f2e;
  --color-muted: #5a6275;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f7fa;
  --color-primary: #1292a1;      /* Tucore Teal (aus altem Auftritt) */
  --color-primary-dark: #0d7484;
  --color-primary-light: #78c5bc;
  --color-accent: #78c5bc;       /* Teal-Akzent (Marken-konsistent) */
  --color-dark: #0f172a;         /* Slate 900 – Headlines/Hero */
  --color-border: #e2e6ee;
  --maxw: 1140px;
  --space: 1.5rem;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
p { margin: 0 0 1em; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space); }

/* Accessibility: Skip-Link */
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--color-primary); color: #fff; padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Header */
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; }
.brand-name { font-size: 1.4rem; font-weight: 800; color: var(--color-primary); }
.site-nav > ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav ul { list-style: none; }
.site-nav a { color: var(--color-text); font-weight: 600; }

/* Footer */
.site-footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); margin-top: 4rem; }
.footer-inner { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding-block: 3rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-bottom { padding-bottom: 2rem; color: var(--color-muted); }
address { font-style: normal; }

/* Utility */
.section { padding-block: 4rem; }
.section--alt { background: var(--color-bg-alt); }

/* ---- Lead / Prose ---- */
.lead { font-size: 1.25rem; color: var(--color-muted); max-width: 60ch; }
.container--narrow { max-width: 1000px; }
.prose { max-width: 62rem; }
/* Hub-Seiten nutzen eigene *-prose-Klassen im Seiten-<style> (760px). Hier global breiter
   ziehen (höhere Spezifität schlägt die seitlokale Regel), damit der Contentbereich
   konsistent ausgenutzt wird. */
body [class*="-prose"] { max-width: 62rem; }
.prose h2 { margin-top: 1.8rem; }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size: .9rem; color: var(--color-muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--color-muted); }

/* ---- Team Grid ---- */
.team-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.team-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; transition: box-shadow .2s, transform .2s; }
.team-card:hover { box-shadow: 0 12px 28px rgba(18,146,161,.12); transform: translateY(-3px); }
.team-photo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin: 0 auto 1rem; }
.team-card h2 { font-size: 1.25rem; margin-bottom: .25rem; }
.team-card a { text-decoration: none; color: inherit; }
.team-role { color: var(--color-primary); font-weight: 600; margin-bottom: .5rem; }
.team-more { display: inline-block; margin-top: .75rem; color: var(--color-primary); font-weight: 600; }

/* ---- Person Detail ---- */
.person-head { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.person-photo { width: 200px; height: 200px; object-fit: cover; border-radius: 50%; box-shadow: 0 14px 34px rgba(15,23,42,.16); }
.avatar-circle { width: 200px; height: 200px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); box-shadow: 0 14px 34px rgba(18,146,161,.28); flex: 0 0 auto; }
.avatar-circle--sm { width: 160px; height: 160px; font-size: 2.6rem; margin: 0 auto 1rem; }
.person-role { color: var(--color-primary); font-weight: 600; font-size: 1.1rem; }
.person-short { color: var(--color-muted); font-style: italic; }
.expertise-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 0; }
.expertise-list li { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 999px; padding: .35rem .9rem; font-size: .9rem; font-weight: 600; }

/* ---- News ---- */
.news-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2rem; }
.news-card { border-bottom: 1px solid var(--color-border); padding-bottom: 2rem; }
.news-card h2 { font-size: 1.5rem; margin: .25rem 0; }
.news-meta { color: var(--color-muted); font-size: .9rem; margin: 0; }
.news-hero { border-radius: var(--radius); margin: 1.5rem 0; }
.news-back { margin-top: 2.5rem; }

/* ---- News-Artikel: angereicherte Bausteine (SEO/GEO/E-E-A-T) ---- */
.news-header { margin-bottom: 1.5rem; }
.news-cat-pill { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:.28rem .7rem; border-radius:999px; background:rgba(18,146,161,.12); color:#0d7484; text-decoration:none; margin-bottom:.7rem; }
.news-cat-pill:hover { text-decoration:none; filter:brightness(.95); }
.news-cat-pill--ki{ background:rgba(18,146,161,.12); color:#0d7484; }
.news-cat-pill--fuehrung{ background:rgba(91,108,255,.12); color:#4453d6; }
.news-cat-pill--change{ background:rgba(226,87,76,.12); color:#c8443a; }
.news-cat-pill--strategie{ background:rgba(13,116,132,.12); color:#0d7484; }
.news-cat-pill--kultur{ background:rgba(22,163,74,.12); color:#16834a; }
.news-cat-pill--prozesse{ background:rgba(71,85,105,.14); color:#475569; }
.news-meta .news-rt, .news-meta .news-updated { white-space:nowrap; }
.news-topics { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:.9rem 0 0; }
.news-topics li { font-size:.78rem; font-weight:600; color:var(--color-muted); background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:999px; padding:.25rem .7rem; }
.news-topics li::before { content:"#"; opacity:.5; margin-right:.1rem; }
/* TL;DR / Answer-First */
.news-tldr { margin:1.5rem 0 2rem; }
.tldr-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-primary-dark); margin:0 0 .4rem; }
.news-tldr p:not(.tldr-label) { font-size:1.08rem; line-height:1.65; }
.tldr-points { margin:.7rem 0 0; padding-left:0; list-style:none; display:grid; gap:.4rem; }
.tldr-points li { position:relative; padding-left:1.5rem; color:var(--color-text); }
.tldr-points li::before { content:"✓"; position:absolute; left:0; color:var(--color-primary); font-weight:800; }
/* Faktbox / zitierfähige Aussage im Fließtext */
.prose .fact-box { margin:1.6rem 0; padding:1.1rem 1.3rem; background:linear-gradient(135deg,rgba(59,188,203,.08),rgba(13,116,132,.05)); border:1px solid var(--color-border); border-radius:var(--radius); }
.prose .fact-box .fact-num { display:block; font-size:1.7rem; font-weight:800; color:var(--color-primary-dark); line-height:1.1; }
.prose .fact-box .fact-src { display:block; margin-top:.3rem; font-size:.78rem; color:var(--color-muted); }
.prose .key-takeaways { background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:var(--radius); padding:1.1rem 1.4rem; margin:1.8rem 0; }
.prose .key-takeaways > strong { display:block; margin-bottom:.5rem; color:var(--color-dark); }
/* FAQ / Quellen */
.news-faq, .news-sources, .news-related { margin-top:2.6rem; }
.news-faq h2, .news-sources h2, .news-related h2 { font-size:1.4rem; margin-bottom:1rem; }
.news-sources ul { padding-left:1.2rem; color:var(--color-muted); }
.news-sources li { margin-bottom:.4rem; font-size:.92rem; }
/* Autor-Box (E-E-A-T) */
.news-author-box { margin-top:2.6rem; padding:1.3rem 1.5rem; border:1px solid var(--color-border); border-left:4px solid var(--color-primary); border-radius:0 var(--radius) var(--radius) 0; background:var(--color-bg-alt); }
.nab-kicker { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); margin:0; }
.nab-name { font-size:1.15rem; font-weight:800; margin:.2rem 0 .4rem; }
.nab-name a { color:var(--color-dark); }
.nab-bio { color:var(--color-muted); margin:0 0 .5rem; line-height:1.6; }
.nab-link a { font-weight:700; color:var(--color-primary); }
/* Verwandte Artikel */
.news-related-list { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.news-related-list a { display:flex; flex-direction:column; gap:.2rem; height:100%; padding:1rem 1.2rem; border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; text-decoration:none; transition:transform .2s, box-shadow .2s, border-color .2s; }
.news-related-list a:hover { transform:translateY(-3px); border-color:var(--color-primary-light); box-shadow:0 14px 30px -18px rgba(13,116,132,.5); }
.nrl-label { font-weight:700; color:var(--color-dark); line-height:1.25; }
.nrl-note { font-size:.85rem; color:var(--color-muted); }

/* ---- Interaktive Statistik-Visualisierungen (datensparsam) ---- */
.statviz { margin:1.8rem 0 2.2rem; padding:1.4rem 1.5rem; border:1px solid var(--color-border); border-radius:var(--radius); background:linear-gradient(180deg,#fff,#fafdfd); }
.statviz-title { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--color-primary-dark); margin-bottom:1rem; }
.statviz-src { font-size:.74rem; color:var(--color-muted); margin-top:1rem; }
/* Ring */
.sv-ring-wrap { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.sv-ring { position:relative; width:128px; height:128px; flex:0 0 auto; }
.sv-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.sv-ring .trk { fill:none; stroke:#eef2f6; stroke-width:11; }
.sv-ring .val { fill:none; stroke-width:11; stroke-linecap:round; stroke-dashoffset:var(--off); }
html.js .sv-ring .val { stroke-dashoffset:var(--circ); transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1); }
html.js .statviz.in .sv-ring .val { stroke-dashoffset:var(--off); }
.sv-ring-lbl { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.sv-ring-lbl b { font-size:1.9rem; font-weight:800; color:var(--color-primary-dark); line-height:1; }
.sv-ring-cap { font-size:1.05rem; color:var(--color-text); margin:0; max-width:32ch; font-weight:600; }
/* Balken */
.sv-bars { list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
.sv-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.35rem; }
.sv-bar-lbl { font-weight:600; color:var(--color-dark); font-size:.95rem; }
.sv-bar-val b { font-weight:800; color:var(--color-primary-dark); font-variant-numeric:tabular-nums; }
.sv-bar-track { height:12px; border-radius:999px; background:#eef2f6; overflow:hidden; }
.sv-bar-fill { display:block; height:100%; width:var(--pct); border-radius:999px; background:linear-gradient(90deg,#3bbccb,#0d7484); }
html.js .sv-bar-fill { width:0; transition:width 1.1s cubic-bezier(.34,1.1,.64,1); transition-delay:calc(var(--i) * .1s); }
html.js .statviz.in .sv-bar-fill { width:var(--pct); }
.sv-bar-note { display:block; font-size:.8rem; color:var(--color-muted); margin-top:.3rem; }
/* Kachel-Counter */
.sv-tiles { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; }
.sv-tile { text-align:center; padding:1.1rem .8rem; border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; }
html.js .sv-tile { opacity:0; transform:translateY(10px); }
html.js .statviz.in .sv-tile { opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.34,1.3,.64,1); transition-delay:calc(var(--i) * .1s); }
.sv-tile-num b { font-size:2rem; font-weight:800; color:var(--color-primary-dark); line-height:1; font-variant-numeric:tabular-nums; }
.sv-tile-lbl { display:block; margin-top:.45rem; font-size:.9rem; font-weight:600; color:var(--color-dark); }
.sv-tile-note { display:block; margin-top:.2rem; font-size:.78rem; color:var(--color-muted); }
@media (prefers-reduced-motion: reduce){
  html.js .sv-ring .val { stroke-dashoffset:var(--off) !important; transition:none !important; }
  html.js .sv-bar-fill { width:var(--pct) !important; transition:none !important; }
  html.js .sv-tile { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===================== News-Artikel: erweiterte Design-Bausteine ===================== */
/* Cover-Bild */
.news-hero { width:100%; max-height:340px; object-fit:cover; display:block; }
/* Stat-Band (Strip aus 3-4 belegten Kennzahlen) */
.stat-band { list-style:none; margin:1.8rem 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0; border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; background:#fff; }
.stat-band li { padding:1.2rem 1.1rem; border-right:1px solid var(--color-border); }
.stat-band li:last-child { border-right:0; }
.stat-band .sb-num { display:block; font-size:1.7rem; font-weight:800; color:var(--color-primary-dark); line-height:1.05; font-variant-numeric:tabular-nums; }
.stat-band .sb-lbl { display:block; margin-top:.3rem; font-size:.82rem; color:var(--color-muted); line-height:1.3; }
/* Benchmark-/Vergleichstabellen im Fließtext (modernes Design, 21st.dev-Stil) */
.prose .table-wrap { margin:1.8rem 0; border:1px solid var(--color-border); border-radius:16px; background:#fff; box-shadow:0 20px 44px -30px rgba(13,116,132,.45); overflow:hidden; }
.prose .table-wrap table { margin:0; }
@media (max-width:640px){ .prose .table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } }
.prose table { width:100%; border-collapse:collapse; font-size:.94rem; line-height:1.5; }
.prose table thead th { background:linear-gradient(180deg,#0d7484,#0a5f6c); color:#fff; font-weight:700; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase; text-align:left; padding:.85rem 1.05rem; vertical-align:bottom; }
.prose table th, .prose table td { padding:.82rem 1.05rem; vertical-align:top; border-bottom:1px solid var(--color-border); text-align:left; }
.prose table tbody tr { transition:background .15s; }
.prose table tbody tr:nth-child(even) { background:var(--color-bg-alt); }
.prose table tbody tr:hover { background:rgba(18,146,161,.08); }
.prose table tbody tr:last-child td { border-bottom:0; }
.prose table td:first-child { font-weight:600; color:var(--color-dark); }
.prose table td strong, .prose table th strong { color:inherit; }
.prose table tbody td strong { color:var(--color-primary-dark); }
/* Formelbox */
.formula-box { margin:1.5rem 0; padding:1.1rem 1.3rem; border:1px solid var(--color-border); border-left:4px solid var(--color-primary); border-radius:0 var(--radius) var(--radius) 0; background:linear-gradient(135deg,rgba(59,188,203,.06),rgba(13,116,132,.03)); }
.formula-box .fb-name { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--color-primary-dark); margin:0 0 .4rem; }
.formula-box .fb-eq { font-size:1.05rem; font-weight:700; color:var(--color-dark); font-family:'Courier New',monospace; }
.formula-box .fb-leg { display:block; margin-top:.4rem; font-size:.84rem; color:var(--color-muted); }
/* Mythos / Fakt */
.mythfact { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.8rem 0; }
.mythfact > div { padding:1.1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--color-border); }
.mf-myth { background:rgba(226,87,76,.05); border-color:rgba(226,87,76,.25); }
.mf-fact { background:rgba(22,163,74,.05); border-color:rgba(22,163,74,.25); }
.mythfact strong { display:block; margin-bottom:.4rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; }
.mf-myth strong { color:#c8443a; } .mf-fact strong { color:#16834a; }
/* Prozess-Stepper */
.news-steps { list-style:none; counter-reset:ns; margin:1.6rem 0; padding:0; display:grid; gap:.8rem; }
.news-steps li { counter-increment:ns; position:relative; padding:1rem 1.1rem 1rem 3.4rem; border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; }
.news-steps li::before { content:counter(ns); position:absolute; left:.9rem; top:.95rem; width:1.7rem; height:1.7rem; border-radius:50%; background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; font-weight:800; font-size:.9rem; display:flex; align-items:center; justify-content:center; }
.news-steps li strong { color:var(--color-dark); }
/* Pull-Quote */
.prose blockquote { margin:1.8rem 0; padding:.4rem 0 .4rem 1.4rem; border-left:4px solid var(--color-primary); font-size:1.2rem; line-height:1.55; font-weight:600; color:var(--color-dark); font-style:italic; }
.prose blockquote p { margin:0; }
/* Callout (Info / Achtung) */
.callout { display:flex; gap:.8rem; margin:1.6rem 0; padding:1rem 1.2rem; border-radius:var(--radius); border:1px solid var(--color-border); background:var(--color-bg-alt); }
.callout::before { font-size:1.2rem; line-height:1.4; flex:0 0 auto; }
.callout--info { border-left:4px solid var(--color-primary); }
.callout--info::before { content:"💡"; }
.callout--warn { border-left:4px solid #e2574c; background:rgba(226,87,76,.05); }
.callout--warn::before { content:"⚠️"; }
.callout p { margin:0; }
@media (max-width:560px){ .mythfact { grid-template-columns:1fr; } }

/* ===================== Referenzen / Case Studies ===================== */
.case-draft { margin:1.2rem 0 1.5rem; padding:.9rem 1.2rem; border:1px dashed #e0a800; background:rgba(255,193,7,.08); border-radius:var(--radius); font-size:.9rem; color:#7a5b00; }
.case-header { margin:1.2rem 0 1.5rem; }
.case-kicker { display:inline-block; font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--color-primary-dark); background:linear-gradient(135deg,rgba(59,188,203,.16),rgba(13,116,132,.12)); border:1px solid rgba(13,116,132,.22); padding:.25rem .7rem; border-radius:999px; margin-bottom:.8rem; }
.case-period { color:var(--color-muted); font-weight:600; margin:.3rem 0 0; }
.case-cover { width:100%; max-height:360px; object-fit:cover; border-radius:var(--radius); display:block; margin:0 0 1.5rem; }
.case-tldr { margin:0 0 2rem; }
/* Profil */
.case-profile { margin:0 0 2.4rem; padding:1.3rem 1.5rem; border:1px solid var(--color-border); border-radius:var(--radius); background:var(--color-bg-alt); }
.case-profile dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem 1.5rem; margin:0; }
.case-profile dt { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); }
.case-profile dd { margin:.2rem 0 0; font-weight:600; color:var(--color-dark); }
.case-services { list-style:none; display:flex; flex-wrap:wrap; gap:.45rem; padding:0; margin:1.2rem 0 0; }
.case-services li { font-size:.82rem; font-weight:600; color:var(--color-primary-dark); background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:.3rem .8rem; }
.case-block { margin:2.4rem 0; }
.case-block > h2 { font-size:1.5rem; margin-bottom:1rem; }
.case-challenge { padding-left:0; list-style:none; display:grid; gap:.5rem; }
.case-challenge li { position:relative; padding-left:1.6rem; }
.case-challenge li::before { content:"!"; position:absolute; left:0; top:0; width:1.1rem; height:1.1rem; border-radius:50%; background:rgba(226,87,76,.12); color:#c8443a; font-weight:800; font-size:.72rem; display:flex; align-items:center; justify-content:center; }
/* Module */
.case-modules { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; }
.case-module { position:relative; padding:1.3rem 1.3rem 1.2rem; border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; transition:transform .2s, box-shadow .2s; }
.case-module:hover { transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(13,116,132,.5); }
.cm-num { font-family:inherit; font-size:.8rem; font-weight:800; color:var(--color-primary); background:var(--color-bg-alt); border-radius:8px; padding:.15rem .5rem; }
.case-module h3 { font-size:1.05rem; color:var(--color-dark); margin:.6rem 0 .35rem; }
.case-module p { font-size:.9rem; color:var(--color-muted); margin:0; }
.case-results-cap { font-size:.8rem; color:var(--color-muted); margin:.6rem 0 0; }
.case-outcomes { list-style:none; padding:0; margin:1.3rem 0 0; display:grid; gap:.6rem; }
.case-outcomes li { position:relative; padding:.7rem 1rem .7rem 2.4rem; border:1px solid var(--color-border); border-left:3px solid var(--color-primary); border-radius:0 var(--radius) var(--radius) 0; background:var(--color-bg-alt); font-weight:500; }
.case-outcomes li::before { content:"✓"; position:absolute; left:.9rem; top:.7rem; color:var(--color-primary); font-weight:800; }
.case-cta { margin-top:3rem; }
.case-cta .lead { max-width:60ch; }
/* Referenz-Übersicht (Karten) */
.cases-grid { list-style:none; padding:0; margin:2.5rem 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
.case-card { border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s; }
.case-card:hover { transform:translateY(-4px); box-shadow:0 22px 44px -26px rgba(13,116,132,.55); border-color:var(--color-primary-light); }
.case-card a { display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.case-card img { width:100%; aspect-ratio:1200/630; object-fit:cover; display:block; }
.case-card-body { padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.case-card-kicker { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary-dark); }
.case-card h2 { font-size:1.2rem; color:var(--color-dark); line-height:1.25; margin:0; }
.case-card p { font-size:.92rem; color:var(--color-muted); margin:0; }
.case-card-more { margin-top:auto; font-weight:700; color:var(--color-primary); font-size:.9rem; }

/* Breiterer Lese-/Content-Bereich für Case Studies */
.container--case { max-width: 1060px; margin-inline:auto; padding-inline: var(--space); }
.case-study .case-body.prose { max-width: none; }
.case-study .case-block > p { max-width: none; }
/* „Auf den Punkt“ – 3 visuelle Karten statt Fließtext */
.case-snapshot { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:0 0 2.6rem; }
.cs-card { padding:1.4rem 1.4rem 1.5rem; border:1px solid var(--color-border); border-top:4px solid var(--color-primary); border-radius:var(--radius); background:#fff; box-shadow:0 14px 32px -26px rgba(13,116,132,.5); }
.cs-card--challenge { border-top-color:#e2574c; }
.cs-card--approach { border-top-color:var(--color-primary); }
.cs-card--result { border-top-color:#16a34a; }
.cs-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.cs-ico { width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center; }
.cs-ico svg { width:20px; height:20px; }
.cs-card--challenge .cs-ico { background:rgba(226,87,76,.12); color:#c8443a; }
.cs-card--approach .cs-ico { background:rgba(18,146,161,.12); color:#0d7484; }
.cs-card--result .cs-ico { background:rgba(22,163,74,.12); color:#16834a; }
.cs-head h2 { font-size:.78rem !important; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--color-muted); margin:0 !important; }
.cs-card ul { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.cs-card li { position:relative; padding-left:1.5rem; font-size:.95rem; line-height:1.45; color:var(--color-text); }
.cs-card li::before { position:absolute; left:0; top:.05rem; font-weight:800; }
.cs-card--challenge li::before { content:"!"; color:#c8443a; }
.cs-card--approach li::before { content:"→"; color:var(--color-primary); }
.cs-card--result li::before { content:"✓"; color:#16834a; }
@media (max-width:760px){ .case-snapshot { grid-template-columns:1fr; } }
/* Grafische Phasen-Timeline */
.case-phaseflow { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:0 0 1.8rem; }
.case-phaseflow .pf-step { display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:.32rem .85rem; font-size:.82rem; font-weight:700; color:var(--color-primary-dark); }
.case-phaseflow .pf-step .pf-i { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; font-size:.68rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.case-phaseflow .pf-arrow { color:var(--color-primary-light); font-weight:800; }
.case-phaseflow .pf-step.is-last { background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; }
.case-phaseflow .pf-step.is-last .pf-i { background:#fff; color:#0d7484; }
.case-tl { position:relative; list-style:none; counter-reset:ctl; margin:1.5rem 0 0; padding:0; }
.case-tl::before { content:""; position:absolute; left:15px; top:10px; bottom:10px; width:2px; background:linear-gradient(180deg,#3bbccb,#0d7484); border-radius:2px; }
.ctl-item { counter-increment:ctl; position:relative; padding:0 0 1.6rem 3.2rem; }
.ctl-item:last-child { padding-bottom:0; }
.ctl-item::before { content:counter(ctl); position:absolute; left:4px; top:-2px; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; font-weight:800; font-size:.78rem; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 4px #fff; }
.ctl-card { border:1px solid var(--color-border); border-radius:var(--radius); background:#fff; padding:1rem 1.2rem; transition:transform .2s, box-shadow .2s; }
.ctl-card:hover { transform:translateX(3px); box-shadow:0 14px 30px -22px rgba(13,116,132,.5); }
.ctl-date { display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#1292a1,#0d7484); padding:.2rem .6rem; border-radius:6px; margin-bottom:.45rem; }
.ctl-card h3 { font-size:1.05rem; color:var(--color-dark); margin:0 0 .25rem; }
.ctl-card p { margin:0; color:var(--color-muted); font-size:.92rem; }

/* ===========================================================
   Homepage & Hub-Komponenten
   =========================================================== */

/* ---- Brand logo / Nav ---- */
.brand-logo { height: 40px; width: auto; }
.nav-toggle, .nav-toggle-label { display: none; }
.site-nav .has-children { position: relative; }
.subnav {
  position: absolute; top: 100%; left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(15,23,42,.12); padding: .5rem; display: none; z-index: 50;
}
.site-nav .has-children:hover .subnav,
.site-nav .has-children:focus-within .subnav { display: block; }
.subnav li { width: 100%; }
.subnav a { display: block; padding: .55rem .75rem; border-radius: 8px; font-weight: 500; }
.subnav a:hover { background: var(--color-bg-alt); text-decoration: none; }
[aria-current="page"] { color: var(--color-primary); }

/* ---- Buttons ---- */
.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: var(--radius);
  font-weight: 700; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s;
  border: 2px solid transparent; cursor: pointer; line-height: 1.2;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; box-shadow: 0 10px 24px rgba(18,146,161,.3); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--ghost:hover { background: var(--color-primary); color: #fff; }
.btn--lg { padding: 1.05rem 2.2rem; font-size: 1.1rem; }

/* ---- Section heads / helpers ---- */
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--color-primary); margin: 0 0 .5rem; }
.section-head { max-width: 760px; margin-bottom: 2.5rem; }
.section-head--light h2 { color: #fff; }
.center { text-align: center; }
.muted { color: var(--color-muted); }

/* ---- Hero ---- */
.hero { background: linear-gradient(180deg, var(--color-bg-alt), #fff); padding-block: 4rem; }
.hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.hero-text h1 { color: var(--color-dark); }
.hero-lead { font-size: 1.3rem; color: var(--color-muted); max-width: 38ch; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.hero-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; gap: 1.5rem; flex-wrap: wrap; font-weight: 600; color: var(--color-dark); }
.hero-media img { border-radius: var(--radius); box-shadow: 0 24px 60px rgba(15,23,42,.18); }

/* ---- Definition / citable answer ---- */
.definition { max-width: 820px; }
.definition-answer { font-size: 1.2rem; line-height: 1.7; }

/* ---- Hub grid ---- */
.hub-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hub-card { border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; transition: box-shadow .2s, transform .2s, border-color .2s; }
.hub-card:hover { box-shadow: 0 16px 36px rgba(18,146,161,.14); transform: translateY(-3px); border-color: var(--color-primary-light); }
.hub-card a { display: block; padding: 1.75rem; color: inherit; text-decoration: none; height: 100%; }
.hub-icon { font-size: 2rem; display: block; margin-bottom: .75rem; }
.hub-card h2, .hub-card h3 { font-size: 1.25rem; margin-bottom: .5rem; color: var(--color-dark); }
.hub-card p { color: var(--color-muted); margin-bottom: 1rem; }
.hub-link { color: var(--color-primary); font-weight: 700; }
.hub-grid--compact .hub-card a { padding: 1.25rem; text-align: center; }

/* ---- Dark results band ---- */
.section--dark { background: var(--color-dark); color: #e7ecf5; }
.result-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.result-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--color-primary-light); margin-bottom: .5rem; }
.result-grid p { color: #c4ccd9; }

/* ---- Value grid ---- */
.value-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.value-grid li { padding: 1.5rem; border-left: 3px solid var(--color-primary); background: var(--color-bg-alt); border-radius: 0 var(--radius) var(--radius) 0; }
.value-grid h3 { color: var(--color-dark); }

/* ---- Client row ---- */
.client-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: center; }
.client-row img { max-height: 44px; width: auto; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.client-row img:hover { filter: grayscale(0); opacity: 1; }

/* ---- Region row ---- */
.region-row { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.region-row li { background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: .5rem 1.1rem; font-weight: 600; }

/* ---- FAQ ---- */
.faq { display: grid; gap: .75rem; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; padding: 0 1.25rem; }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 1.1rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: "+"; color: var(--color-primary); font-size: 1.5rem; }
.faq-item[open] summary::after { content: "–"; }
.faq-answer { padding-bottom: 1.1rem; color: var(--color-muted); }

/* ---- CTA band ---- */
.cta-band { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .lead { color: rgba(255,255,255,.9); margin-inline: auto; }
.cta-band .btn--primary { background: #fff; color: var(--color-primary-dark); }
.cta-band .btn--primary:hover { background: var(--color-dark); color: #fff; }

/* ---- Page hero (Unterseiten) ---- */
.page-hero { background: var(--color-bg-alt); padding-block: 3rem; border-bottom: 1px solid var(--color-border); }
.page-hero h1 { color: var(--color-dark); }

/* ============================================================
   Globaler dezenter Aurora-Hintergrund für alle Hero-Sections
   (21st.dev-inspiriert, rein CSS – keine externen JS-Libs).
   Greift via [class$="-hero"] + .hero (Homepage). z-index:-1 +
   isolation:isolate -> liegt hinter dem Content, ohne Markup-
   oder Kind-Element-Eingriffe. KI-Beratung (bespoke) und dunkle
   Heroes sind ausgenommen.
   ============================================================ */
.hero, [class$="-hero"]:not(.ki-hero) { position: relative; isolation: isolate; }
.hero::after,
[class$="-hero"]:not(.ki-hero)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px 460px at 88% -16%, rgba(18,146,161,.26), transparent 60%),
    radial-gradient(580px 480px at -6% 116%, rgba(120,197,188,.28), transparent 62%),
    radial-gradient(460px 380px at 48% 70%, rgba(60,188,203,.14), transparent 72%);
  background-repeat: no-repeat;
  animation: heroAura 42s ease-in-out infinite alternate;
}
/* Dunkle Heroes: keine helle Aura */
.dg-hero::after, .ef-hero::after, .fmo-hero::after, .mde-hero::after, .ol-hero::after { display: none; }
@keyframes heroAura {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -26px 18px, 22px -16px, 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after, [class$="-hero"]::after { animation: none; }
}

/* ---- Kontakt ---- */
.contact-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contact-card { padding: 2rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.contact-card--alt { background: var(--color-bg-alt); }
.check-list { list-style: none; padding: 0; }
.check-list li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-media { order: -1; }
}

/* ---- Rechtsseiten (Impressum / Datenschutz) ---- */
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: .35rem; }
.legal-stand { margin-top: 2.5rem; color: var(--color-muted); }

/* ---- Footer Datenschutz-Hinweiszeile ---- */
.footer-privacy { padding-block: 1rem 0; }
.footer-privacy small { color: var(--color-muted); font-size: .85rem; }
.footer-privacy a { color: var(--color-primary); font-weight: 600; }

/* ---- TL;DR / Answer-First-Box (GEO) ---- */
.tldr { background: var(--color-bg-alt); border-left: 4px solid var(--color-primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.25rem; margin: 0 0 1.75rem; }
.tldr p { margin: 0; color: var(--color-text); }

/* ---- Glossar ---- */
.glossary-search { margin-bottom: 2rem; }
.glossary-search input { width: 100%; padding: .85rem 1.1rem; font-size: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.glossary-search input:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }
.glossary { margin: 0; }
.glossary-item { border-bottom: 1px solid var(--color-border); padding: 1.25rem 0; scroll-margin-top: 90px; }
.glossary-item dt { font-size: 1.2rem; font-weight: 700; color: var(--color-dark); margin-bottom: .4rem; }
.glossary-item dd { margin: 0; color: var(--color-muted); line-height: 1.7; }
.glossary-empty { color: var(--color-muted); font-style: italic; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===========================================================
   Startseite – angereicherte Sektionen (SEO/GEO)
   =========================================================== */

/* ---- Trust-Bar ---- */
.trustbar { background: var(--color-dark); color: #e7ecf5; }
.trustbar-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; padding-block: 2rem; }
.trust-item { text-align: center; }
.trust-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--color-primary-light); }
.trust-label { display: block; font-size: .9rem; color: #aeb8c8; margin-top: .25rem; }

/* ---- Definition zweiter Absatz ---- */
.definition p { max-width: 80ch; }
.definition p + p { margin-top: 1rem; font-size: 1.05rem; color: var(--color-text); }

/* ---- Leistungsumfang: Cluster-Grid ---- */
.cluster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.cluster-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; }
.cluster-card h3 { font-size: 1.2rem; color: var(--color-dark); display: flex; align-items: center; gap: .5rem; }
.cluster-icon { font-size: 1.4rem; }
.cluster-intro { color: var(--color-muted); font-size: .95rem; margin-bottom: 1rem; }
.cluster-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.cluster-links a { display: block; padding: .4rem .5rem; border-radius: 6px; font-weight: 600; color: var(--color-text); }
.cluster-links a:hover { background: var(--color-bg-alt); color: var(--color-primary); text-decoration: none; }
.cluster-links a::before { content: "→"; color: var(--color-primary); margin-right: .5rem; }

/* ---- Steps / Methode ---- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; counter-reset: step; }
.steps li { position: relative; padding: 1.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; margin-bottom: .75rem; }
.steps h3 { font-size: 1.15rem; color: var(--color-dark); }
.steps p { color: var(--color-muted); margin: 0; }

/* ---- Zielgruppen ---- */
.audience-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.audience-grid li { padding: 1.5rem; border-radius: var(--radius); background: var(--color-bg-alt); border: 1px solid var(--color-border); }
.audience-grid h3 { font-size: 1.15rem; color: var(--color-dark); }
.audience-grid p { color: var(--color-muted); margin: 0; }

/* ---- News-Teaser ---- */
.news-teaser-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.news-teaser-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; background: #fff; }
.news-teaser-card h3 { font-size: 1.15rem; margin: .35rem 0; }
.news-teaser-card h3 a { color: var(--color-dark); }
.news-teaser-card p { color: var(--color-muted); }

/* ---- Region-Row Links ---- */
.region-row a { color: var(--color-text); }
.region-row a:hover { color: var(--color-primary); text-decoration: none; }

/* ---- 6-Schritte-Raster (Organisationsberatung) ---- */
@media (min-width: 760px) { .steps--6 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Expertenprofil (E-E-A-T) ---- */
.person-cred { color: var(--color-dark); font-weight: 600; margin: .35rem 0 .25rem; }
.person-cred strong { color: var(--color-primary); }
.person-links { margin: .25rem 0 0; }
.person-links a { font-weight: 600; }
.person-articles { list-style: none; padding: 0; display: grid; gap: .4rem; }
.person-articles a { font-weight: 600; }
.person-articles .pa-meta { color: var(--muted); font-weight: 400; font-size: .9em; }
.person-articles-wrap:not(:has(li)) { display: none; }
.person-cta { margin-top: 2rem; }

/* ---- Footer: Verwandte Themen ---- */
.footer-related { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.footer-related .container { padding-block: 2.25rem; }
.footer-related h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); margin: 0 0 1rem; }
.footer-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-related-list a { display: inline-block; padding: .45rem .9rem; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--color-text); transition: .15s; }
.footer-related-list a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }


/* ===========================================================
   Premium Service Pages – Design-System (.bb*) 
   Aus betriebsberatung.njk extrahiert; global, da .bb-prefixed.
   =========================================================== */

/* ============================================================
   Betriebsberatung – eigenständiges Seiten-Design (scoped .bb)
   Inspiriert von 21st.dev (Minimal Hero, Bento, Stat-Ticks)
   ============================================================ */
.bb { --acc: #1292a1; --acc2: #78c5bc; --ink: #0f172a; --soft: #5a6275; --line: #e2e6ee; --bg2: #f5f7fa; }
.bb h2 { color: var(--ink); letter-spacing: -.02em; }
.bb .acc { color: var(--acc); }
.bb-wrap { max-width: 1140px; margin-inline: auto; padding-inline: 1.5rem; }

/* ---- HERO ---- */
.bb-hero { position: relative; overflow: hidden; background:
  radial-gradient(1200px 500px at 85% -10%, rgba(18,146,161,.12), transparent 60%),
  linear-gradient(180deg, #fbfdfe, #ffffff); border-bottom: 1px solid var(--line); }
.bb-hero::before { content:""; position:absolute; inset:0;
  background-image: linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(900px 420px at 70% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(900px 420px at 70% 0%, #000 30%, transparent 75%); }
.bb-hero-line { position:absolute; top:0; left:0; height:3px; width:46%; background: linear-gradient(90deg, var(--acc), transparent); animation: bbline 1.4s ease-out both; }
@keyframes bbline { from { width:0 } }
.bb-hero-inner { position: relative; z-index:1; display:grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items:center; padding-block: 4.5rem; }
.bb-shape { position:absolute; border: 1.5px solid rgba(18,146,161,.25); border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; width: 280px; height: 280px; right: -40px; top: 8%; z-index:0; animation: bbfloat 14s ease-in-out infinite; }
.bb-dot { position:absolute; width: 84px; height:84px; border-radius:50%; background: rgba(18,146,161,.14); right: 18%; bottom: 12%; animation: bbfloat 9s ease-in-out infinite; }
@keyframes bbfloat { 50% { transform: translateY(-22px) } }
.bb-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.4rem .9rem; border-radius:999px; background: rgba(18,146,161,.1); border:1px solid rgba(18,146,161,.3); font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--acc); }
.bb-badge i { width:8px; height:8px; border-radius:50%; background:var(--acc); animation: bbpulse 2s infinite; }
@keyframes bbpulse { 50% { transform: scale(1.4); opacity:.6 } }
.bb-h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height:1.04; letter-spacing:-.035em; color: var(--ink); margin:1.1rem 0 1rem; font-weight:800; }
.bb-sub { font-size: 1.2rem; color: var(--soft); max-width: 46ch; line-height:1.6; }
.bb-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.8rem; }
.bb-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.95rem 1.7rem; border-radius:14px; font-weight:700; text-decoration:none; transition:.18s; border:2px solid transparent; }
.bb-btn--p { background: var(--acc); color:#fff; box-shadow: 0 10px 30px rgba(18,146,161,.28); }
.bb-btn--p:hover { background:#0d7484; transform: translateY(-2px); text-decoration:none; color:#fff; }
.bb-btn--g { color: var(--acc); border-color: rgba(18,146,161,.4); }
.bb-btn--g:hover { background: var(--acc); color:#fff; text-decoration:none; }
.bb-herofig { position:relative; }
.bb-herofig img { border-radius: 20px; box-shadow: 0 30px 70px rgba(15,23,42,.22); width:100%; height:100%; object-fit:cover; aspect-ratio: 4/5; }
.bb-herofig .bb-float-card { position:absolute; bottom:-18px; left:-18px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:.9rem 1.1rem; box-shadow:0 18px 40px rgba(15,23,42,.16); display:flex; align-items:center; gap:.7rem; }
.bb-float-card b { font-size:1.4rem; color:var(--acc); }
.bb-float-card span { font-size:.82rem; color:var(--soft); line-height:1.25; }

/* ---- STATS ---- */
.bb-stats { position:relative; z-index:1; display:grid; grid-template-columns: repeat(4,1fr); gap:1.5rem; padding-bottom:3.2rem; }
.bb-stat { position:relative; padding-top:1rem; }
.bb-stat::before { content:""; position:absolute; top:0; left:0; width:34px; height:3px; background:var(--acc); }
.bb-stat b { display:block; font-size: clamp(1.6rem,3vw,2.3rem); font-weight:800; color:var(--ink); letter-spacing:-.02em; }
.bb-stat span { font-size:.85rem; font-weight:600; color:var(--soft); text-transform:uppercase; letter-spacing:.03em; }

/* ---- SECTION shells ---- */
.bb-sec { padding-block: 4.5rem; }
.bb-sec--alt { background: var(--bg2); border-block:1px solid var(--line); }
.bb-eyebrow { text-transform:uppercase; letter-spacing:.09em; font-size:.78rem; font-weight:800; color:var(--acc); margin-bottom:.5rem; }
.bb-lead { font-size:1.2rem; color:var(--soft); max-width:62ch; }
.bb-prose { max-width:860px; }
.bb-prose p { color:#283143; line-height:1.75; }
.bb-prose h2 { margin-top:0; }

/* ---- Editorial Split (Überschrift links, Text rechts) ---- */
.bb-split { display:grid; grid-template-columns: 5fr 7fr; gap:3rem 4rem; align-items:start; }
.bb-split-head { position:sticky; top:90px; }
.bb-split-head h2 { margin:0; }
.bb-split-body p { color:#283143; line-height:1.8; }
.bb-split-body p:first-child { margin-top:0; }

/* ---- Autoren-Karte (E-E-A-T Byline mit Foto) ---- */
.bb-author { display:flex; gap:1rem; align-items:center; margin-top:2.5rem; padding:1.1rem 1.3rem; border:1px solid var(--line); border-radius:16px; background:#fff; }
.bb-author-img { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; box-shadow:0 6px 16px rgba(15,23,42,.14); }
.bb-author-txt { display:flex; flex-direction:column; line-height:1.35; }
.bb-author-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--acc); }
.bb-author-name { font-weight:800; color:var(--ink); }
.bb-author-role { font-size:.88rem; color:var(--soft); }
.bb-author-date { font-size:.8rem; color:var(--soft); margin-top:.15rem; }

/* ---- DEFINITION block ---- */
.bb-def { display:grid; grid-template-columns: 1fr 1fr; gap:3rem; align-items:center; }
.bb-def .bb-quotebox { background: linear-gradient(135deg, var(--acc), #0d7484); color:#fff; border-radius:20px; padding:2.2rem; font-size:1.35rem; font-weight:600; line-height:1.5; }
.bb-def .bb-quotebox small { display:block; margin-top:1rem; font-size:.9rem; font-weight:500; opacity:.85; }

/* ---- BENTO ---- */
.bb-bento { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap:1rem; }
.bb-tile { position:relative; background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.6rem; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:.2s; overflow:hidden; }
.bb-tile:hover { border-color: var(--acc2); box-shadow:0 18px 40px rgba(18,146,161,.14); transform: translateY(-3px); text-decoration:none; }
.bb-tile .ic { font-size:1.7rem; }
.bb-tile h3 { font-size:1.15rem; color:var(--ink); margin:.6rem 0 .35rem; }
.bb-tile p { color:var(--soft); font-size:.95rem; margin:0; }
.bb-tile .go { margin-top:auto; padding-top:.9rem; color:var(--acc); font-weight:700; font-size:.9rem; }
.bb-tile--xl { grid-column: span 2; grid-row: span 2; background: linear-gradient(160deg, #0f172a, #14304a); color:#fff; border-color:transparent; }
.bb-tile--xl h3 { color:#fff; font-size:1.5rem; }
.bb-tile--xl p { color:#c4ccd9; }
.bb-tile--xl .go { color: var(--acc2); }
.bb-tile--w { grid-column: span 2; }

/* ---- TIMELINE ---- */
.bb-time { position:relative; display:grid; gap:1.4rem; }
.bb-time::before { content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--acc), var(--acc2)); }
.bb-step { position:relative; display:grid; grid-template-columns: 48px 1fr; gap:1.2rem; align-items:start; }
.bb-step .n { width:48px; height:48px; border-radius:14px; background:var(--acc); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(18,146,161,.3); z-index:1; }
.bb-step .c { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.1rem 1.3rem; }
.bb-step h3 { font-size:1.1rem; color:var(--ink); margin:0 0 .3rem; }
.bb-step p { margin:0; color:var(--soft); }

/* ---- ANLÄSSE checklist ---- */
.bb-checks { display:grid; grid-template-columns: repeat(2,1fr); gap:.75rem 2rem; list-style:none; padding:0; margin:0; }
.bb-checks li { display:flex; gap:.75rem; align-items:flex-start; color:#283143; }
.bb-checks .ck { flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:rgba(18,146,161,.12); color:var(--acc); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; margin-top:2px; }

/* ---- FAQ ---- */
.bb-faq { display:grid; gap:.7rem; max-width:820px; }
.bb-faq details { border:1px solid var(--line); border-radius:14px; background:#fff; padding:0 1.3rem; }
.bb-faq summary { cursor:pointer; font-weight:700; color:var(--ink); padding:1.1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.bb-faq summary::after { content:"+"; color:var(--acc); font-size:1.5rem; line-height:1; }
.bb-faq details[open] summary::after { content:"–"; }
.bb-faq .a { padding-bottom:1.1rem; color:var(--soft); line-height:1.7; }

/* ---- CTA ---- */
.bb-final { background: linear-gradient(135deg, #0f172a, #14304a); color:#fff; border-radius:24px; padding:3.2rem; text-align:center; position:relative; overflow:hidden; }
.bb-final::after { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(18,146,161,.4), transparent 70%); top:-120px; right:-80px; }
.bb-final h2 { color:#fff; position:relative; }
.bb-final p { color:#c4ccd9; position:relative; max-width:54ch; margin-inline:auto; }

/* ---- Faktenbox (Auf einen Blick) ---- */
.bb-facts { border:1px solid var(--line); border-left:4px solid var(--acc); border-radius:16px; background:#fff; padding:1.6rem 1.8rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2.2rem; }
.bb-facts dt { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--acc); }
.bb-facts dd { margin:.15rem 0 0; color:#283143; font-weight:600; }
.bb-facts .full { grid-column:1/-1; }

/* ---- Nutzen / Ergebnisse ---- */
.bb-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.bb-benefit { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; }
.bb-benefit .big { font-size:1.9rem; font-weight:800; color:var(--acc); letter-spacing:-.02em; }
.bb-benefit h3 { font-size:1.1rem; color:var(--ink); margin:.4rem 0 .35rem; }
.bb-benefit p { margin:0; color:var(--soft); font-size:.95rem; }

/* ---- Meta / Datum ---- */
.bb-meta { color:var(--soft); font-size:.85rem; margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }

/* ---- Vergleichstabelle (21st.dev-Stil: Karte + Featured-Spalte) ---- */
.bb-cmp { margin-top:1.8rem; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 20px 48px rgba(15,23,42,.1); background:#fff; }
.bb-cmp-scroll { overflow-x:auto; }
.bb-cmp table { width:100%; border-collapse:collapse; min-width:620px; }
.bb-cmp caption { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.bb-cmp thead th { padding:1.15rem 1.15rem; text-align:left; font-size:.95rem; font-weight:700; background:linear-gradient(135deg,#0f172a,#14304a); color:#fff; vertical-align:bottom; }
.bb-cmp thead th.feat { background:linear-gradient(135deg,var(--acc),#0d7484); }
.bb-cmp thead .corner { background:#0f172a; }
.bb-cmp .tag { display:inline-block; margin-top:.4rem; font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:rgba(255,255,255,.22); padding:.18rem .5rem; border-radius:999px; }
.bb-cmp tbody th { text-align:left; font-weight:700; color:var(--ink); padding:1rem 1.15rem; background:var(--bg2); width:21%; border-top:1px solid var(--line); }
.bb-cmp tbody td { padding:1rem 1.15rem; border-top:1px solid var(--line); color:#283143; font-size:.95rem; vertical-align:top; }
.bb-cmp td.feat { background:rgba(18,146,161,.06); font-weight:600; color:var(--ink); }
.bb-cmp tbody tr:hover td:not(.feat) { background:rgba(15,23,42,.025); }
.bb-cmp .yes { color:var(--acc); font-weight:800; }
.bb-cmp .no { color:#9aa3b2; }

/* ---- Kennzahlen-Cockpit (illustratives Dashboard) ---- */
.bb-cockpit { display:grid; grid-template-columns:5fr 7fr; gap:3rem 4rem; align-items:center; }
.bb-cockpit-head h2 { margin:0 0 .8rem; }
.bb-cockpit-head p { color:var(--soft); line-height:1.7; }
.bb-cockpit-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.5rem; }
.bb-cockpit-list li { display:flex; gap:.6rem; align-items:flex-start; color:#283143; }
.bb-cockpit-list .ck { color:var(--acc); font-weight:800; }
.bb-dash { background:linear-gradient(160deg,#0f172a,#14304a); border-radius:22px; padding:1.5rem; color:#e7ecf5; box-shadow:0 28px 60px rgba(15,23,42,.28); }
.bb-dash-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem; }
.bb-dash-bar b { font-size:.95rem; }
.bb-illu { font-size:.66rem; text-transform:uppercase; letter-spacing:.06em; color:#8b95a7; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.2rem .55rem; }
.bb-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }
.bb-kpi { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:.8rem .85rem; }
.bb-kpi .v { font-size:1.45rem; font-weight:800; letter-spacing:-.02em; }
.bb-kpi .l { font-size:.72rem; color:#aeb8c8; display:block; margin-top:.1rem; }
.bb-kpi .t { font-size:.72rem; font-weight:700; color:var(--acc2); }
.bb-chart { display:flex; align-items:flex-end; gap:.45rem; height:120px; margin-top:1.1rem; padding-top:.4rem; border-top:1px solid rgba(255,255,255,.08); }
.bb-bar { flex:1; background:linear-gradient(var(--acc2),var(--acc)); border-radius:6px 6px 0 0; transform-origin:bottom; animation:bbgrow 1s ease-out both; }
@keyframes bbgrow { from { transform:scaleY(0); } }
.bb-chartx { display:flex; gap:.45rem; margin-top:.4rem; }
.bb-chartx span { flex:1; text-align:center; font-size:.6rem; color:#7e889a; }
.bb-dash-foot { display:flex; align-items:center; gap:1rem; margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08); }
.bb-donut { width:78px; height:78px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:conic-gradient(var(--acc) calc(var(--p) * 1%), rgba(255,255,255,.12) 0); }
.bb-donut i { width:56px; height:56px; border-radius:50%; background:#0f172a; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:1rem; }
.bb-dash-foot .fl b { display:block; }
.bb-dash-foot .fl span { font-size:.78rem; color:#aeb8c8; }

/* ---- Statistik-Band (belegter Fakt, GEO) ---- */
.bb-statband { background:linear-gradient(135deg,var(--acc),#0d7484); color:#fff; border-radius:20px; padding:2rem 2.4rem; display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; }
.bb-statband .num { font-size:clamp(2.6rem,6vw,4rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.bb-statband .txt { flex:1; min-width:240px; }
.bb-statband .txt p { margin:0; font-size:1.1rem; line-height:1.5; }
.bb-statband .src { display:block; margin-top:.5rem; font-size:.8rem; opacity:.8; }

/* ---- Branchen ---- */
.bb-branchen { display:flex; flex-wrap:wrap; gap:.6rem; }
.bb-branchen span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; color:var(--ink); font-size:.95rem; }

/* ---- Testimonials ---- */
.bb-quotes { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.bb-quote { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.8rem; display:flex; flex-direction:column; box-shadow:0 12px 30px rgba(15,23,42,.06); }
.bb-quote .mark { font-size:2.6rem; line-height:.6; color:var(--acc2); font-weight:800; }
.bb-quote blockquote { margin:.6rem 0 1.2rem; padding:0; border:0; font-size:1.02rem; line-height:1.65; color:#283143; }
.bb-quote figcaption { display:flex; align-items:center; gap:.85rem; margin-top:auto; }
.bb-quote img { width:52px; height:52px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.bb-quote .who b { display:block; color:var(--ink); }
.bb-quote .who span { font-size:.85rem; color:var(--soft); }

@media (max-width: 860px) {
  .bb-hero-inner, .bb-def, .bb-split, .bb-quotes, .bb-cockpit { grid-template-columns:1fr; }
  .bb-kpis { grid-template-columns:repeat(3,1fr); }
  .bb-split-head { position:static; }
  .bb-facts, .bb-benefits { grid-template-columns:1fr; }
  .bb-herofig { order:-1; }
  .bb-stats { grid-template-columns: repeat(2,1fr); gap:1.5rem 1rem; }
  .bb-bento { grid-template-columns: repeat(2,1fr); }
  .bb-tile--xl, .bb-tile--w { grid-column: span 2; grid-row:auto; }
  .bb-checks { grid-template-columns:1fr; }
  .bb-shape, .bb-dot { display:none; }
}

/* ---- Controlling-Kreislauf ---- */
.bb-cycle { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; counter-reset:cyc; }
.bb-cycle .step { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.1rem; text-align:center; position:relative; }
.bb-cycle .step .ic { font-size:1.7rem; display:block; margin-bottom:.5rem; }
.bb-cycle .step h3 { font-size:1.02rem; color:var(--ink); margin:0 0 .3rem; }
.bb-cycle .step p { font-size:.85rem; color:var(--soft); margin:0; }
@media (max-width:860px){ .bb-cycle { grid-template-columns:1fr 1fr; } }

/* ===========================================================
   Premium Light Base (.pp) – Teal, editorial. Basis für mehrere
   Leistungsseiten; je Seite eigener Signature-Hero/-Visual.
   =========================================================== */
.pp { --t:#1292a1; --t2:#78c5bc; --tdark:#0d7484; --ink:#0f172a; --soft:#5a6275; --line:#e2e6ee; --mint:#eef7f6; }
.pp-wrap { max-width:1140px; margin-inline:auto; padding-inline:1.5rem; }
.pp h2 { letter-spacing:-.02em; color:var(--ink); }
.pp-tldr { background:linear-gradient(180deg,var(--mint),#fff); border:1px solid #d7e9e7; border-left:4px solid var(--t); border-radius:14px; padding:1.05rem 1.3rem; margin:1.5rem 0 0; max-width:760px; }
.pp-tldr b { display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--t); margin-bottom:.3rem; }
.pp-tldr p { margin:0; color:#283143; line-height:1.65; font-size:1.03rem; }
.pp-kicker { display:inline-flex; gap:.5rem; align-items:center; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--t); }
.pp-kicker::before { content:""; width:28px; height:2px; background:var(--t); }
.pp-sec { padding-block:4.5rem; }
.pp-sec--mint { background:var(--mint); border-block:1px solid var(--line); }
.pp-sec--dark { background:#0f172a; color:#eef2f8; }
.pp-sec--dark h2 { color:#fff; }
.pp-center { text-align:center; max-width:730px; margin:0 auto 2.6rem; }
.pp-center .pp-kicker { justify-content:center; } .pp-center .pp-kicker::before { display:none; }
.pp-lead { font-size:1.15rem; color:var(--soft); }
.pp-prose { max-width:760px; } .pp-prose p { color:#283143; line-height:1.8; }
.pp-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.95rem 1.7rem; border-radius:12px; font-weight:700; text-decoration:none; transition:.18s; border:2px solid transparent; }
.pp-btn--p { background:var(--t); color:#fff; box-shadow:0 10px 30px rgba(18,146,161,.28); }
.pp-btn--p:hover { background:var(--tdark); color:#fff; transform:translateY(-2px); text-decoration:none; }
.pp-btn--o { color:var(--t); border-color:rgba(18,146,161,.4); }
.pp-btn--o:hover { background:var(--t); color:#fff; text-decoration:none; }
.pp-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.pp-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.6rem; text-decoration:none; color:inherit; transition:.2s; display:flex; flex-direction:column; }
a.pp-card:hover { border-color:var(--t2); box-shadow:0 16px 34px rgba(18,146,161,.12); transform:translateY(-3px); text-decoration:none; }
.pp-card .ic { font-size:1.8rem; }
.pp-card h3 { font-size:1.18rem; color:var(--ink); margin:.6rem 0 .35rem; }
.pp-card p { color:var(--soft); margin:0; }
.pp-card .go { margin-top:auto; padding-top:.8rem; color:var(--t); font-weight:700; }
.pp-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.pp-list li { display:flex; gap:.7rem; color:#283143; } .pp-list .x { color:var(--t); font-weight:800; flex:0 0 auto; }
.pp-cols { display:grid; grid-template-columns:repeat(2,1fr); gap:2.4rem; }
.pp-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.pp-benefit { padding:1.5rem; border-radius:14px; background:var(--mint); border:1px solid #d7e9e7; }
.pp-benefit b { color:var(--t); display:block; margin-bottom:.25rem; } .pp-benefit p { margin:0; color:var(--soft); font-size:.94rem; }
.pp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; list-style:none; margin:0; padding:0; }
.pp-step { background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem; list-style:none; }
.pp-step::marker { content:""; }
.pp-step .n { width:34px; height:34px; border-radius:10px; background:var(--t); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:.7rem; }
.pp-step > b { display:block; color:var(--ink); margin:0 0 .35rem; font-size:1rem; font-weight:800; }
.pp-step h3 { font-size:1rem; color:var(--ink); margin:0 0 .25rem; } .pp-step p { font-size:.85rem; color:var(--soft); margin:0; line-height:1.5; }
.pp-statband { display:grid; grid-template-columns:auto 1fr; gap:1.6rem; align-items:center; background:linear-gradient(135deg,var(--t),var(--tdark)); color:#fff; border-radius:20px; padding:2rem 2.3rem; }
.pp-statband .num { font-size:clamp(2.4rem,6vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.pp-statband p { margin:0; font-size:1.08rem; line-height:1.5; } .pp-statband .src { display:block; margin-top:.5rem; font-size:.8rem; opacity:.85; }
.pp-tbl { border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 16px 40px rgba(15,23,42,.08); background:#fff; }
.pp-tbl-s { overflow-x:auto; } .pp-tbl table { width:100%; border-collapse:collapse; min-width:600px; }
.pp-tbl th, .pp-tbl td { text-align:left; padding:1rem 1.1rem; border-top:1px solid var(--line); vertical-align:top; }
.pp-tbl thead th { background:linear-gradient(135deg,var(--t),var(--tdark)); color:#fff; border:0; }
.pp-tbl tbody th { background:var(--mint); color:var(--ink); width:20%; }
.pp-author { display:flex; gap:.9rem; align-items:center; margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.pp-author img { width:54px; height:54px; border-radius:50%; object-fit:cover; } .pp-author b { display:block; color:var(--ink); } .pp-author span { font-size:.85rem; color:var(--soft); }
.pp-quote { max-width:840px; margin:0 auto; text-align:center; }
.pp-quote blockquote { font-size:clamp(1.25rem,2.4vw,1.6rem); line-height:1.5; color:#fff; font-weight:600; margin:0 0 1.2rem; }
.pp-quote .src { display:inline-flex; gap:.7rem; align-items:center; color:#aab6c8; } .pp-quote .src img { width:46px; height:46px; border-radius:50%; } .pp-quote .src b { color:#fff; }
.pp-faq { max-width:840px; display:grid; gap:.7rem; }
.pp-faq details { background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 1.3rem; }
.pp-faq summary { cursor:pointer; font-weight:700; color:var(--ink); padding:1.1rem 0; list-style:none; display:flex; justify-content:space-between; gap:1rem; }
.pp-faq summary::after { content:"+"; color:var(--t); font-size:1.5rem; line-height:1; } .pp-faq details[open] summary::after { content:"–"; }
.pp-faq .a { padding-bottom:1.1rem; color:var(--soft); line-height:1.7; }
.pp-final { text-align:center; background:linear-gradient(135deg,var(--t),var(--tdark)); color:#fff; border-radius:22px; padding:3rem; }
.pp-final h2 { color:#fff; } .pp-final p { color:rgba(255,255,255,.9); max-width:52ch; margin:0 auto 1.6rem; }
.pp-meta { color:var(--soft); font-size:.85rem; margin-top:2rem; }
@media (max-width:860px){ .pp-cards, .pp-cols, .pp-benefits, .pp-statband { grid-template-columns:1fr; } }

/* ============================================================
   IMAGE & MOTION MODUL (v2) — Bilder, Reveal, Duotone, Avatare
   ============================================================ */
:root{ --t:#1292a1; --t2:#78c5bc; --tdark:#0d7484; }

/* --- Scroll-Reveal (fail-safe: nur mit JS verborgen) --- */
html.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay:var(--d,0s); will-change:opacity,transform; }
html.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ html.js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; } .fav,.tb-glow{ animation:none !important; } }

/* --- Team-Gruppenfoto-Band (Homepage) --- */
.teamband{ position:relative; overflow:hidden; background:linear-gradient(180deg,#0d7484,#0f172a); color:#fff; }
.teamband .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr 1.25fr; gap:2.6rem; align-items:center; }
.teamband .tb-copy h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); letter-spacing:-.02em; margin:0 0 .9rem; }
.teamband .tb-copy p{ color:rgba(255,255,255,.86); line-height:1.7; max-width:46ch; margin:0 0 1.2rem; }
.teamband .tb-stats{ display:flex; gap:1.8rem; flex-wrap:wrap; margin:.4rem 0 1.4rem; }
.teamband .tb-stats b{ display:block; font-size:1.7rem; font-weight:800; color:#7fe3d8; line-height:1; }
.teamband .tb-stats span{ font-size:.82rem; color:rgba(255,255,255,.72); }
.tb-frame{ position:relative; border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -24px rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.12); }
.tb-frame img{ display:block; width:100%; height:auto; }
.tb-frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(18,146,161,.0) 55%,rgba(13,116,132,.35)); pointer-events:none; }
.tb-tag{ position:absolute; left:14px; bottom:14px; z-index:3; background:rgba(15,23,42,.62); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); color:#fff; font-size:.78rem; padding:.4rem .8rem; border-radius:999px; }
.tb-glow{ position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(127,227,216,.20),transparent 65%); right:-120px; top:-160px; z-index:1; animation:tbfloat 16s ease-in-out infinite; }
.tb-glow.two{ left:-160px; bottom:-200px; right:auto; top:auto; background:radial-gradient(circle,rgba(18,146,161,.22),transparent 65%); animation-duration:21s; }
@keyframes tbfloat{ 50%{ transform:translateY(-26px) } }
@media (max-width:860px){ .teamband .container{ grid-template-columns:1fr; gap:1.6rem; } }

/* --- Schwebende Avatar-Elemente (aus den Headshots) --- */
.facering{ position:relative; display:flex; justify-content:center; align-items:center; gap:-1rem; min-height:130px; margin:1.4rem 0 0; }
.fav{ width:74px; height:74px; border-radius:50%; object-fit:cover; border:3px solid #fff; box-shadow:0 10px 24px -8px rgba(13,116,132,.45); margin-left:-16px; background:#eef7f6; animation:favbob 7s ease-in-out infinite; }
.fav:first-child{ margin-left:0; }
.fav:nth-child(2){ animation-delay:.6s } .fav:nth-child(3){ animation-delay:1.2s } .fav:nth-child(4){ animation-delay:1.8s } .fav:nth-child(5){ animation-delay:2.4s } .fav:nth-child(6){ animation-delay:3s }
@keyframes favbob{ 50%{ transform:translateY(-9px) } }

/* --- Duotone-Teal-Bild (atmosphärisches Element) --- */
.duotone{ position:relative; border-radius:16px; overflow:hidden; }
.duotone img{ display:block; width:100%; height:auto; filter:grayscale(1) contrast(1.05); }
.duotone::after{ content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(13,116,132,.85),rgba(18,146,161,.45)); mix-blend-mode:multiply; }
.duotone .dt-cap{ position:absolute; z-index:2; left:1.2rem; bottom:1.1rem; color:#fff; font-weight:700; font-size:1.05rem; text-shadow:0 1px 8px rgba(0,0,0,.4); }

/* --- Bild-Feature (Text + gerahmtes Bild) für Unterseiten --- */
.imgfeat{ display:grid; grid-template-columns:1.1fr 1fr; gap:2.4rem; align-items:center; }
.imgfeat.rev{ grid-template-columns:1fr 1.1fr; }
.imgfeat .if-media{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 24px 50px -22px rgba(13,116,132,.4); border:1px solid var(--line); }
.imgfeat .if-media img{ display:block; width:100%; height:auto; transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.imgfeat .if-media:hover img{ transform:scale(1.04); }
.imgfeat .if-media .if-badge{ position:absolute; right:12px; top:12px; background:#fff; color:var(--tdark); font-weight:700; font-size:.76rem; padding:.35rem .75rem; border-radius:999px; box-shadow:0 8px 20px -8px rgba(13,116,132,.5); }
@media (max-width:860px){ .imgfeat,.imgfeat.rev{ grid-template-columns:1fr; gap:1.4rem; } }

/* --- Tick-Liste (Häkchen) --- */
.pp-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.pp-ticks li{ position:relative; padding-left:1.7rem; color:#283143; line-height:1.55; }
.pp-ticks li::before{ content:"✓"; position:absolute; left:0; top:0; width:1.15rem; height:1.15rem; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; color:#fff; background:var(--t); border-radius:50%; }

/* ============================================================
   LOGOS3 — Auto-Scroll Logo-Marquee (Referenzen)  [21st.dev-Adaption]
   ============================================================ */
.logos3{ position:relative; margin-top:2.2rem; overflow:hidden; --logos3-bg:#f5f7fa; }
.logos3-viewport{ overflow:hidden; }
.logos3-track{ display:flex; align-items:center; width:max-content; list-style:none; margin:0; padding:0; animation:logos3scroll 42s linear infinite; will-change:transform; }
.logos3:hover .logos3-track{ animation-play-state:paused; }
.logos3-item{ flex:0 0 auto; margin-right:4.2rem; display:flex; align-items:center; }
.logos3-item img{ height:40px; width:auto; filter:grayscale(1); opacity:.62; transition:filter .25s ease, opacity .25s ease; }
.logos3-item img:hover{ filter:grayscale(0); opacity:1; }
@keyframes logos3scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.logos3-fade{ position:absolute; top:0; bottom:0; width:10%; min-width:48px; max-width:160px; z-index:2; pointer-events:none; }
.logos3-fade--l{ left:0; background:linear-gradient(90deg, var(--logos3-bg) 10%, transparent); }
.logos3-fade--r{ right:0; background:linear-gradient(270deg, var(--logos3-bg) 10%, transparent); }
@media (prefers-reduced-motion: reduce){
  .logos3-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:2.5rem 3rem; padding:0 1rem; }
  .logos3-item{ margin-right:0; }
  .logos3-fade{ display:none; }
}

/* --- Reveal-Stagger: Grid-Kinder gestaffelt einblenden (eine Klasse am Container) --- */
html.js .reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
html.js .reveal-stagger.in > *{ opacity:1; transform:none; }
html.js .reveal-stagger.in > *:nth-child(1){ transition-delay:0s }
html.js .reveal-stagger.in > *:nth-child(2){ transition-delay:.07s }
html.js .reveal-stagger.in > *:nth-child(3){ transition-delay:.14s }
html.js .reveal-stagger.in > *:nth-child(4){ transition-delay:.21s }
html.js .reveal-stagger.in > *:nth-child(5){ transition-delay:.28s }
html.js .reveal-stagger.in > *:nth-child(6){ transition-delay:.35s }
html.js .reveal-stagger.in > *:nth-child(7){ transition-delay:.42s }
html.js .reveal-stagger.in > *:nth-child(8){ transition-delay:.49s }
html.js .reveal-stagger.in > *:nth-child(n+9){ transition-delay:.55s }
@media (prefers-reduced-motion: reduce){ html.js .reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ============================================================
   HAUPTNAVIGATION — Mega-Menü (shadcn navigation-menu Adaption)
   ============================================================ */
.site-header{ position:relative; z-index:60; }
.header-inner{ gap:1rem; }
.nav .nav-list{ display:flex; align-items:center; gap:.05rem; list-style:none; margin:0; padding:0; flex-wrap:nowrap; }
.nav .nav-item{ position:relative; }
.nav .nav-item--mega{ position:relative; }

.nav .nav-link, .nav .nav-trigger{
  display:inline-flex; align-items:center; gap:.26rem;
  padding:.5rem .58rem; border-radius:9px;
  font-weight:600; font-size:.9rem; color:var(--color-dark); line-height:1.2; white-space:nowrap;
  cursor:pointer; background:transparent; border:0; transition:background .18s, color .18s;
}
.nav .nav-link:hover, .nav .nav-trigger:hover,
.nav .nav-item--mega:hover .nav-trigger, .nav .nav-item--drop:hover .nav-trigger,
.nav .nav-item--mega:focus-within .nav-trigger, .nav .nav-item--drop:focus-within .nav-trigger{
  background:var(--color-bg-alt); color:var(--color-primary-dark); text-decoration:none;
}
.nav .nav-trigger::after{
  content:""; width:.44rem; height:.44rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform .2s; opacity:.7;
}
.nav .nav-item--mega:hover .nav-trigger::after, .nav .nav-item--drop:hover .nav-trigger::after,
.nav .nav-item--mega:focus-within .nav-trigger::after, .nav .nav-item--drop:focus-within .nav-trigger::after{
  transform:rotate(225deg) translateY(2px);
}
.nav .nav-cta{ background:var(--color-primary); color:#fff; }
.nav .nav-cta:hover{ background:var(--color-primary-dark); color:#fff; }

/* Panel */
/* .mega = transparenter Hover-Container, der LÜCKENLOS am Reiter anliegt (top:100%).
   Der sichtbare Abstand entsteht durch transparentes padding-top -> kein toter Spalt. */
.nav .mega{
  position:absolute; top:100%; padding-top:.55rem; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease .12s, transform .18s ease .12s, visibility .18s .12s;
}
/* .mega-inner = die sichtbare Karte (Scroll hier, damit nichts den Hover-Bereich abschneidet) */
.nav .mega-inner{
  background:#fff; border:1px solid var(--color-border); border-radius:16px;
  box-shadow:0 24px 60px -16px rgba(15,23,42,.22); padding:1.1rem;
  max-height:min(80vh,620px); overflow-y:auto; overflow-x:hidden;
}
/* Panels direkt unter ihrem Reiter (links- bzw. rechtsbündig) */
.nav .nav-item--mega .mega{ left:0; right:auto; width:max-content; min-width:min(540px,92vw); max-width:min(880px,calc(100vw - 2rem)); }
.nav .nav-item--mega.mega-right .mega{ left:auto; right:0; }
.nav .nav-item--drop .mega{ right:0; left:auto; width:320px; }
.nav .nav-item:hover > .mega, .nav .nav-item:focus-within > .mega{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s;
}

/* Bereichs-Panel: Kopf + Gruppen-Spalten (3. Ebene) */
.nav .mega-head-row{ display:flex; align-items:center; gap:.55rem; padding:.1rem .35rem .75rem; margin-bottom:.7rem; border-bottom:1px solid var(--color-border); }
.nav .mega-ic{ font-size:1.15rem; line-height:1; }
.nav .mega-title{ font-weight:800; font-size:.95rem; color:var(--color-dark); letter-spacing:-.01em; }
.nav .mega-title:hover{ color:var(--color-primary-dark); text-decoration:none; }
.nav .mega-groups{ display:flex; gap:1.5rem; align-items:flex-start; }
.nav .mega-group{ min-width:175px; flex:0 1 auto; }
.nav .mega-gtitle{ font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--color-primary-dark); font-weight:800; margin:0 0 .3rem; padding:0 .5rem; }
.nav .mega-sub{ list-style:none; margin:0 0 .2rem; padding:0; }
.nav .mega-sub a{ display:block; padding:.32rem .55rem; border-radius:7px; font-size:.86rem; color:var(--color-muted); font-weight:500; }
.nav .mega-sub a:hover{ background:var(--color-bg-alt); color:var(--color-primary-dark); text-decoration:none; }
.nav .mega-foot{ display:inline-block; margin-top:.7rem; padding:.5rem .55rem 0; font-weight:700; font-size:.85rem; color:var(--color-primary); border-top:1px solid var(--color-border); width:100%; }
.nav .mega-foot:hover{ color:var(--color-primary-dark); }

/* Über-uns-Mini-Panel */
.nav .mini-list{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.nav .mini-list a{ display:block; padding:.6rem .7rem; border-radius:10px; }
.nav .mini-list a:hover{ background:var(--color-bg-alt); text-decoration:none; }
.nav .mini-list b{ display:block; color:var(--color-dark); font-size:.95rem; }
.nav .mini-list span{ display:block; color:var(--color-muted); font-size:.82rem; line-height:1.4; }

@media (prefers-reduced-motion: reduce){ .nav .mega{ transition:none; } .nav .nav-trigger::after{ transition:none; } }

/* ---- Burger ab ≤1024px (viele Top-Reiter brauchen Platz) ---- */
@media (max-width:1024px){
  .nav-toggle-label{ display:inline-flex; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; margin-left:auto; }
  .nav-toggle-label span, .nav-toggle-label::before, .nav-toggle-label::after{
    content:""; display:block; width:26px; height:3px; background:var(--color-dark); border-radius:2px;
  }
  .header-inner{ flex-wrap:wrap; }
  .site-nav.nav{ display:none; width:100%; }
  .nav-toggle:checked ~ .site-nav.nav{ display:block; }
  .nav .nav-list{ flex-direction:column; align-items:stretch; gap:.1rem; }
  .nav .nav-item, .nav .nav-item--mega{ position:static; }
  .nav .nav-link, .nav .nav-trigger{ width:100%; justify-content:space-between; font-size:1rem; padding:.7rem .6rem; }
  .nav .nav-trigger{ font-weight:700; }
  .nav .mega{ position:static; opacity:1; visibility:visible; transform:none !important; pointer-events:auto;
    padding-top:0; width:auto !important; max-width:none; }
  .nav .mega-inner{ box-shadow:none; border:none; border-radius:0; padding:.1rem 0 .6rem .9rem; max-height:none; overflow:visible; }
  .nav .mega-head-row{ display:none; }
  .nav .mega-groups{ display:block; }
  .nav .mega-group{ min-width:0; margin-bottom:.3rem; }
  .nav .mega-gtitle{ margin-top:.3rem; }
  .nav .mega-sub a{ font-size:.9rem; padding:.35rem .5rem; }
  .nav .mega-foot{ border-top:none; width:auto; padding-top:.3rem; }
  .nav .nav-item--drop .mega{ width:auto !important; }
  .nav .nav-cta{ justify-content:center; margin-top:.5rem; }
}

/* ============================================================
   LU-INSPIRIERTE ELEMENTE (Tucore-Teal-Adaption)
   ============================================================ */
/* --- Formel-Band: X → Y → Z (dunkel) --- */
.tc-formula-sec{ background:linear-gradient(180deg,#0d7484,#0f172a); color:#fff; position:relative; overflow:hidden; }
.tc-formula{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.4rem; align-items:stretch; position:relative; margin-top:2.4rem; }
.tc-fstep{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:1.8rem 1.6rem; position:relative; display:flex; flex-direction:column; }
.tc-fstep .n{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#7fe3d8; font-weight:800; }
.tc-fstep h3{ color:#fff; font-size:1.4rem; margin:.45rem 0 .55rem; letter-spacing:-.01em; }
.tc-fstep p{ color:rgba(255,255,255,.82); margin:0; line-height:1.62; font-size:.96rem; }
.tc-farrow{ position:absolute; top:50%; right:-1.6rem; transform:translateY(-50%); color:#7fe3d8; font-size:1.7rem; font-weight:700; z-index:3; line-height:1; }
@media (max-width:760px){ .tc-formula{ grid-template-columns:1fr; gap:2.6rem; } .tc-farrow{ top:auto; bottom:-1.9rem; right:50%; transform:translateX(50%) rotate(90deg); } }

/* --- Wirkungs-/Beweis-Cards (Gradient-KPI) --- */
.tc-proof{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; margin-top:2.4rem; }
.tc-pcard{ background:#fff; border:1px solid var(--color-border); border-radius:18px; padding:1.6rem 1.4rem; box-shadow:0 18px 44px -30px rgba(13,116,132,.4); }
.tc-pnum{ font-size:2.5rem; font-weight:800; letter-spacing:-.02em; line-height:1; background:linear-gradient(135deg,#1292a1,#0d7484); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-pnum.sm{ font-size:1.9rem; }
.tc-pcap{ font-weight:700; color:#1f2937; margin:.65rem 0 .2rem; font-size:1.02rem; }
.tc-pdesc{ font-size:.9rem; color:var(--color-muted); line-height:1.55; margin:0; }
.tc-psrc{ font-size:.73rem; color:#94a3b8; font-style:italic; margin-top:.6rem; }
@media (max-width:880px){ .tc-proof{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .tc-proof{ grid-template-columns:1fr; } }

/* --- Vergleichs-Zellen: Tucore vs. klassisch (LU featured-Adaption) --- */
.tc-vs{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2.2rem; }
.tc-vscell{ border-radius:18px; padding:1.9rem 1.7rem; border:1px solid var(--color-border); background:#fff; }
.tc-vscell--us{ border-color:#bfe3df; background:linear-gradient(180deg,#eef7f6,#fff); box-shadow:0 18px 44px -30px rgba(13,116,132,.45); }
.tc-vshead{ display:flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.5rem; }
.tc-vscell--us .tc-vshead{ color:var(--color-primary-dark); }
.tc-vscell--them .tc-vshead{ color:#94a3b8; }
.tc-vstitle{ font-size:1.25rem; font-weight:800; color:var(--color-dark); margin:0 0 .3rem; letter-spacing:-.01em; }
.tc-vslist{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; }
.tc-vslist li{ position:relative; padding-left:1.8rem; line-height:1.5; color:#283143; font-size:.95rem; }
.tc-vslist li::before{ position:absolute; left:0; top:.08rem; width:1.2rem; height:1.2rem; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; border-radius:50%; color:#fff; }
.tc-vscell--us .tc-vslist li::before{ content:"✓"; background:var(--color-primary); }
.tc-vscell--them .tc-vslist li::before{ content:"–"; background:#cbd5e1; }
@media (max-width:680px){ .tc-vs{ grid-template-columns:1fr; } }

/* --- Regionen-Karte mit Pins (LU map-Adaption, Teal) --- */
.tc-map-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:2.6rem; align-items:center; }
.tc-map{ position:relative; }
.tc-map svg{ width:100%; height:auto; display:block; overflow:visible; }
.tc-map-land{ fill:#eef7f6; stroke:#bfe3df; stroke-width:1.1; }
.tc-pin .drop{ fill:#1292a1; filter:drop-shadow(0 2px 3px rgba(15,23,42,.3)); transition:transform .2s; transform-box:fill-box; transform-origin:center bottom; }
.tc-pin .dot{ fill:#fff; }
.tc-pin .lbl{ font:700 11px/1 system-ui,sans-serif; fill:#0f172a; paint-order:stroke; stroke:#fff; stroke-width:3px; stroke-linejoin:round; }
.tc-pin:hover .drop{ transform:scale(1.18); }
.tc-pin:hover .lbl{ fill:#0d7484; }
.tc-pin.primary .drop{ fill:#0d7484; }
.tc-pin.primary .lbl{ font-size:12.5px; fill:#0d7484; }
.tc-pin .ring{ fill:none; stroke:#1292a1; stroke-width:2; opacity:0; }
.tc-pin.primary .ring{ animation:tc-ping 2.4s ease-out infinite; }
@keyframes tc-ping{ 0%{ r:5; opacity:.55 } 100%{ r:24; opacity:0 } }
.tc-map-badge{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:.35rem .8rem; font-size:.8rem; font-weight:700; color:var(--color-primary-dark); box-shadow:0 8px 22px -10px rgba(15,23,42,.2); }
.tc-map-list{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.tc-map-list a{ display:flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border-radius:10px; font-weight:600; color:var(--color-dark); font-size:.92rem; }
.tc-map-list a:hover{ background:var(--color-bg-alt); color:var(--color-primary-dark); text-decoration:none; }
.tc-map-list a::before{ content:"📍"; font-size:.85rem; }
@media (max-width:820px){ .tc-map-wrap{ grid-template-columns:1fr; gap:1.6rem; } .tc-map{ max-width:420px; margin-inline:auto; } }
@media (prefers-reduced-motion: reduce){ .tc-pin.primary .ring{ animation:none; } .tc-pin .drop{ transition:none; } }

/* ============================================================
   DATEN-VIZ STAT-CARDS (LU cs-card-Adaption, Teal) — Bar/Line/Donut
   ============================================================ */
.tc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.tc-stat{ background:#fff; border:1px solid var(--color-border); border-radius:20px; padding:1.5rem 1.5rem 1.6rem; box-shadow:0 18px 44px -30px rgba(13,116,132,.4); display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.tc-stat:hover{ transform:translateY(-4px); box-shadow:0 26px 56px -26px rgba(18,146,161,.34); }
.tc-stat-tag{ display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--color-primary-dark); background:#eef7f6; border-radius:999px; padding:.32rem .7rem; margin-bottom:1rem; }
.tc-stat-viz{ position:relative; height:104px; margin:.1rem 0 1rem; }
/* Balken */
.tc-stat-bars{ position:absolute; inset:0; display:flex; align-items:flex-end; gap:.55rem; }
.tc-stat-bars i{ flex:1; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#9ad6cf,#1292a1); display:block; transform-origin:bottom; }
.tc-stat-bars i.hl{ background:linear-gradient(180deg,#1292a1,#0d7484); }
/* Donut */
.tc-stat-donut{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.tc-stat-donut svg{ width:104px; height:104px; }
.tc-stat-donut .track{ fill:none; stroke:#e2e6ee; stroke-width:11; }
.tc-stat-donut .val{ fill:none; stroke:url(#tcDonutGrad); stroke-width:11; stroke-linecap:round; transform:rotate(-90deg); transform-origin:center; }
.tc-stat-donut .dlbl{ position:absolute; font-weight:800; color:var(--color-primary-dark); font-size:1.05rem; letter-spacing:-.02em; }
/* Linie */
.tc-stat-line{ position:absolute; inset:0; }
.tc-stat-line svg{ width:100%; height:100%; overflow:visible; }
.tc-stat-line .area{ fill:url(#tcLineGrad); opacity:.18; }
.tc-stat-line .ln{ fill:none; stroke:#1292a1; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.tc-stat-line .dot{ fill:#fff; stroke:#0d7484; stroke-width:2.5; }
.tc-stat-num{ font-size:2.1rem; font-weight:800; letter-spacing:-.02em; line-height:1; background:linear-gradient(135deg,#1292a1,#0d7484); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tc-stat-num.sm{ font-size:1.6rem; }
.tc-stat-cap{ font-weight:700; color:#1f2937; margin:.45rem 0 .2rem; font-size:1.02rem; }
.tc-stat-desc{ font-size:.9rem; color:var(--color-muted); line-height:1.55; margin:0; }
.tc-stat-src{ font-size:.72rem; color:#94a3b8; font-style:italic; margin-top:.7rem; }
@media (max-width:820px){ .tc-stats{ grid-template-columns:1fr; } }
/* Reveal-Animationen der Charts */
html.js .reveal-stagger .tc-stat-bars i{ transform:scaleY(0); transition:transform .8s cubic-bezier(.22,.61,.36,1); transition-delay:.1s; }
html.js .reveal-stagger.in .tc-stat-bars i{ transform:scaleY(1); }
html.js .reveal-stagger .tc-stat-donut .val{ stroke-dashoffset:var(--dash,300); transition:stroke-dashoffset 1.1s cubic-bezier(.22,.61,.36,1); transition-delay:.15s; }
html.js .reveal-stagger.in .tc-stat-donut .val{ stroke-dashoffset:var(--off,80); }
html.js .reveal-stagger .tc-stat-line .ln{ stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.3s ease; transition-delay:.15s; }
html.js .reveal-stagger.in .tc-stat-line .ln{ stroke-dashoffset:0; }
@media (prefers-reduced-motion: reduce){ html.js .reveal-stagger .tc-stat-bars i, html.js .reveal-stagger .tc-stat-donut .val, html.js .reveal-stagger .tc-stat-line .ln{ transition:none; } }

/* ============================================================
   PERSÖNLICHE EXPERTEN-CTA (Ansprechpartner) — Alternative zum Trust-Band
   ============================================================ */
.tc-pcta{ display:grid; grid-template-columns:auto 1fr; gap:2.4rem; align-items:center; background:linear-gradient(135deg,#eef7f6,#fff); border:1px solid #d7e9e7; border-radius:22px; padding:2.2rem 2.5rem; box-shadow:0 24px 50px -32px rgba(13,116,132,.42); position:relative; overflow:hidden; }
.tc-pcta::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(18,146,161,.10),transparent 70%); pointer-events:none; }
.tc-pcta-photo{ width:148px; height:148px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 16px 34px -12px rgba(13,116,132,.5); position:relative; z-index:1; }
.tc-pcta-body{ position:relative; z-index:1; }
.tc-pcta-body h2{ font-size:clamp(1.5rem,2.6vw,2.05rem); margin:.35rem 0 .55rem; color:var(--color-dark); letter-spacing:-.02em; }
.tc-pcta-body p{ color:var(--color-muted); line-height:1.7; max-width:56ch; margin:0 0 1rem; }
.tc-pcta-who{ display:flex; flex-direction:column; margin-bottom:1.15rem; }
.tc-pcta-who b{ color:var(--color-dark); font-size:1.02rem; }
.tc-pcta-who span{ color:var(--color-primary-dark); font-size:.88rem; font-weight:600; }
.tc-pcta-who a{ color:inherit; }
@media (max-width:680px){ .tc-pcta{ grid-template-columns:1fr; text-align:center; justify-items:center; padding:2rem 1.4rem; } .tc-pcta-body p{ margin-inline:auto; } .tc-pcta-who{ align-items:center; } }

/* ============================================================
   DEZENTE HERO-ANIMATIONEN (unterstützend, nicht ablenkend)
   ============================================================ */
/* Eyebrow-Linie zeichnet sich beim Laden */
html.js .pp-kicker::before{ width:0; animation:tcKick .8s .12s cubic-bezier(.22,.61,.36,1) forwards; }
@keyframes tcKick{ to{ width:28px; } }
/* Homepage-Hero: sanftes Schweben des Bilds + weicher Orb */
.hero-media{ position:relative; }
.hero-media img{ animation:tcFloat 7s ease-in-out infinite; will-change:transform; }
.hero::before{ content:""; position:absolute; right:6%; top:14%; width:340px; height:340px; max-width:42vw; border-radius:50%; background:radial-gradient(circle, rgba(18,146,161,.12), transparent 65%); z-index:0; pointer-events:none; animation:tcOrb 11s ease-in-out infinite; }
.hero .container{ position:relative; z-index:1; }
@keyframes tcFloat{ 50%{ transform:translateY(-9px); } }
@keyframes tcOrb{ 50%{ transform:scale(1.1) translate(-3%,4%); } }
@media (prefers-reduced-motion: reduce){
  html.js .pp-kicker::before{ width:28px; animation:none; }
  .hero-media img, .hero::before{ animation:none; }
}

/* ============================================================
   LEISTUNGS-TABS (CSS-only, 21st.dev-Stil) — übersichtlich Desktop+Mobile
   ============================================================ */
.tc-tabs{ position:relative; margin-top:2.4rem; }
.tc-tab-radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tc-tabs-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.7rem; }
.tc-tab{ display:inline-flex; align-items:center; gap:.45rem; padding:.6rem 1.05rem; border-radius:999px; border:1px solid var(--color-border); background:#fff; font-weight:700; font-size:.9rem; color:var(--color-dark); cursor:pointer; transition:background .18s, color .18s, border-color .18s, box-shadow .18s; white-space:nowrap; }
.tc-tab:hover{ border-color:#bfe3df; color:var(--color-primary-dark); }
.tc-tab-radio:focus-visible + .tc-tabs-bar .tc-tab{ outline:2px solid var(--color-primary); outline-offset:2px; }
.tc-tab-panel{ display:none; animation:tcTabFade .35s ease; }
.tc-tab-panel-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem 1rem; margin:0 0 1rem; }
.tc-tab-panel-head h3{ font-size:1.25rem; margin:0; color:var(--color-dark); letter-spacing:-.01em; }
.tc-tab-panel-head a{ font-weight:700; font-size:.88rem; color:var(--color-primary); }
.tc-tab-intro{ color:var(--color-muted); margin:0 0 1.1rem; max-width:70ch; line-height:1.6; }
.tc-tab-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.15rem .9rem; list-style:none; margin:0; padding:0; }
.tc-tab-links a{ display:block; padding:.45rem .55rem; border-radius:8px; color:var(--color-text); font-weight:500; font-size:.94rem; transition:background .15s, color .15s; }
.tc-tab-links a::before{ content:"→"; color:var(--color-primary); margin-right:.45rem; opacity:.7; }
.tc-tab-links a:hover{ background:#fff; color:var(--color-primary-dark); text-decoration:none; }
@keyframes tcTabFade{ from{ opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion: reduce){ .tc-tab-panel{ animation:none; } }
@media (max-width:600px){ .tc-tabs-bar{ gap:.4rem; } .tc-tab{ padding:.5rem .8rem; font-size:.84rem; } .tc-tab-links{ grid-template-columns:1fr; } }

/* Tabs aktiv-Zustände (6) */
#lt0:checked ~ .tc-tabs-bar label[for="lt0"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt0:checked ~ .tc-tabs-panels #ltp0{ display:block; }
#lt1:checked ~ .tc-tabs-bar label[for="lt1"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt1:checked ~ .tc-tabs-panels #ltp1{ display:block; }
#lt2:checked ~ .tc-tabs-bar label[for="lt2"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt2:checked ~ .tc-tabs-panels #ltp2{ display:block; }
#lt3:checked ~ .tc-tabs-bar label[for="lt3"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt3:checked ~ .tc-tabs-panels #ltp3{ display:block; }
#lt4:checked ~ .tc-tabs-bar label[for="lt4"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt4:checked ~ .tc-tabs-panels #ltp4{ display:block; }
#lt5:checked ~ .tc-tabs-bar label[for="lt5"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 10px 22px -10px rgba(13,116,132,.55); }
#lt5:checked ~ .tc-tabs-panels #ltp5{ display:block; }

/* ============================================================
   PP-CARDS ALTERNATIV-LAYOUTS (optische Abwechslung)
   ============================================================ */
/* Variante A: horizontale Zeilen-Kacheln (Icon links) */
.pp-cards.pp-cards--rows{ grid-template-columns:1fr 1fr; gap:1rem; }
.pp-cards--rows .pp-card{ display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem; padding:1.25rem 1.35rem; align-items:start; }
.pp-cards--rows .pp-card .ic{ grid-column:1; grid-row:1 / span 4; align-self:start; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--mint,#eef7f6); border-radius:12px; font-size:1.35rem; margin:0; }
.pp-cards--rows .pp-card h3{ grid-column:2; grid-row:1; margin:0 0 .2rem; font-size:1.1rem; }
.pp-cards--rows .pp-card p{ grid-column:2; grid-row:2; margin:0; }
.pp-cards--rows .pp-card .go{ grid-column:2; grid-row:3; margin-top:.5rem; padding-top:0; }
@media (max-width:680px){ .pp-cards.pp-cards--rows{ grid-template-columns:1fr; } }
/* Variante B: luftige Kacheln mit Akzentbalken */
.pp-cards.pp-cards--soft .pp-card{ background:linear-gradient(180deg,#f5fbfa,#fff); border:1px solid #e6f1ef; border-left:3px solid var(--t2); box-shadow:none; }
.pp-cards.pp-cards--soft a.pp-card:hover{ border-left-color:var(--t); box-shadow:0 14px 30px -16px rgba(18,146,161,.3); transform:translateY(-3px); }
.pp-cards.pp-cards--soft .pp-card .ic{ font-size:1.6rem; }

/* ============================================================
   LU-SCHEMA ELEMENTE: Journey-Steps · Pain-Points · Checkliste · Key
   ============================================================ */
/* Journey: nummerierter Prozess mit Icon-Kreisen + Verbindungslinie */
.tc-journey{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; position:relative; margin-top:2.4rem; }
.tc-journey::before{ content:""; position:absolute; top:34px; left:12.5%; right:12.5%; height:2px; background:linear-gradient(90deg,#9ad6cf,#0d7484); z-index:0; }
.tc-jstep{ text-align:center; position:relative; z-index:1; }
.tc-jico{ width:68px; height:68px; border-radius:18px; margin:0 auto .9rem; display:flex; align-items:center; justify-content:center; font-size:1.7rem; background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; box-shadow:0 14px 30px -10px rgba(13,116,132,.55); }
.tc-jstep .n{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary-dark); }
.tc-jstep h3{ font-size:1.08rem; margin:.3rem 0 .35rem; color:var(--color-dark); }
.tc-jstep p{ font-size:.9rem; color:var(--color-muted); margin:0; line-height:1.55; }
@media (max-width:760px){ .tc-journey{ grid-template-columns:1fr 1fr; } .tc-journey::before{ display:none; } }
@media (max-width:460px){ .tc-journey{ grid-template-columns:1fr; } }
/* Pain-Points: Problem-Karten (Coral-Akzent) */
.tc-pain{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2.2rem; }
.tc-paincard{ display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:1px solid var(--color-border); border-left:4px solid #e2574c; border-radius:14px; padding:1.2rem 1.3rem; }
.tc-paincard .pi{ flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:#fdeceb; color:#d8453a; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1rem; margin-top:2px; }
.tc-paincard b{ display:block; color:var(--color-dark); margin-bottom:.2rem; font-size:1rem; }
.tc-paincard p{ margin:0; color:var(--color-muted); font-size:.92rem; line-height:1.55; }
@media (max-width:680px){ .tc-pain{ grid-template-columns:1fr; } }
/* Checkliste */
.tc-checklist{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-top:2.2rem; }
.tc-checkitem{ display:flex; gap:.8rem; align-items:flex-start; background:#fff; border:1px solid var(--color-border); border-radius:12px; padding:.9rem 1.1rem; }
.tc-checkitem .ck{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#78c5bc,#0d7484); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.78rem; font-weight:800; margin-top:1px; }
.tc-checkitem span{ color:#283143; line-height:1.5; font-size:.95rem; }
.tc-checkitem b{ color:var(--color-dark); }
@media (max-width:680px){ .tc-checklist{ grid-template-columns:1fr; } }
/* Key-Takeaways: hervorgehobener Merkkasten */
.tc-key{ background:linear-gradient(135deg,#0d7484,#0f172a); color:#fff; border-radius:20px; padding:2rem 2.2rem; margin-top:2.2rem; }
.tc-key h3{ color:#fff; font-size:1.2rem; margin:0 0 1rem; display:flex; align-items:center; gap:.5rem; }
.tc-key ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.tc-key li{ position:relative; padding-left:1.8rem; color:rgba(255,255,255,.9); line-height:1.6; }
.tc-key li::before{ content:"✓"; position:absolute; left:0; top:0; color:#7fe3d8; font-weight:800; }
/* Timeline / Roadmap: vertikale Phasen ueber Zeit */
.tc-timeline{ position:relative; margin:2.4rem 0 0; }
.tc-timeline::before{ content:""; position:absolute; left:15px; top:6px; bottom:10px; width:2px; background:linear-gradient(180deg,#9ad6cf,#0d7484); }
.tc-tline{ position:relative; padding:0 0 1.7rem 3.1rem; }
.tc-tline:last-child{ padding-bottom:0; }
.tc-tline::before{ content:""; position:absolute; left:8px; top:3px; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#1292a1,#0d7484); box-shadow:0 0 0 4px #fff,0 0 0 5px #d6ece9; }
.tc-tline .ph{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary-dark); }
.tc-tline h3{ font-size:1.12rem; margin:.18rem 0 .35rem; color:var(--color-dark); }
.tc-tline p{ margin:0; color:var(--color-muted); line-height:1.6; font-size:.95rem; }
/* Inhaltsverzeichnis / Sprungnavigation (CSS-only) */
.tc-toc{ background:linear-gradient(135deg,#f4faf9,#eef7f6); border:1px solid var(--color-border); border-radius:16px; padding:1.3rem 1.5rem; margin:2rem 0; }
.tc-toc b{ display:block; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary-dark); margin-bottom:.8rem; }
.tc-toc ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.55rem .6rem; counter-reset:toc; }
.tc-toc li{ counter-increment:toc; }
.tc-toc a{ display:inline-flex; align-items:center; gap:.55rem; background:#fff; border:1px solid var(--color-border); border-radius:999px; padding:.45rem .95rem .45rem .5rem; font-size:.9rem; color:var(--color-dark); font-weight:600; text-decoration:none; transition:transform .16s,border-color .16s,color .16s; }
.tc-toc a::before{ content:counter(toc); flex:0 0 auto; width:21px; height:21px; border-radius:50%; background:linear-gradient(135deg,#78c5bc,#0d7484); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; }
.tc-toc a:hover{ border-color:#0d7484; color:#0d7484; transform:translateY(-1px); }
section[id]{ scroll-margin-top:84px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

/* ===== Hero-Animations-Primitiven (wiederverwendbar je Bereich) ===== */
/* Einblend-Animationen: Versteckt-Zustand NUR in den Keyframes (fill-mode both).
   Verwirft der Browser die Animation (Scroll-Drosselung, Energiesparmodus),
   bleibt das Element im sichtbaren Grundzustand statt unsichtbar. */
.tc-up{ animation:tcUpA .65s cubic-bezier(.4,0,.2,1) both; animation-delay:calc(var(--d,0)*.11s); }
.tc-hxpert{ display:flex; align-items:center; gap:.7rem; margin-top:1.7rem; }
.tc-hxpert img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 6px 16px -6px rgba(13,116,132,.5); }
.tc-hxpert b{ display:block; font-size:.95rem; color:#0f172a; line-height:1.2; }
.tc-hxpert b a{ color:inherit; text-decoration:none; } .tc-hxpert b a:hover{ color:#1292a1; }
.tc-hxpert span{ font-size:.82rem; color:#5a6275; }
.tc-horb{ position:absolute; border-radius:50%; filter:blur(8px); z-index:0; pointer-events:none; animation:tcFloatA 18s ease-in-out infinite; }
.tc-card-in{ animation:tcCardA .7s cubic-bezier(.4,0,.2,1) .25s both; }
@keyframes tcUpA{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes tcCardA{ from{ opacity:0; transform:scale(.96) translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes tcFadeA{ to{ opacity:1; } }
@keyframes tcPopA{ to{ transform:translate(-50%,-50%) scale(1); } }
@keyframes tcFloatA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-12px,14px); } }
@keyframes tcPulseA{ 0%{ box-shadow:0 0 0 0 rgba(18,146,161,.5); } 70%{ box-shadow:0 0 0 13px rgba(18,146,161,0); } 100%{ box-shadow:0 0 0 0 rgba(18,146,161,0); } }
@keyframes tcDrawA{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .tc-up,.tc-card-in{ opacity:1!important; transform:none!important; animation:none!important; }
  .tc-horb{ animation:none!important; }
}
/* ===== Expertise-Sektion "Bei diesen Themen helfe ich Ihnen" (Partial) ===== */
.tc-exp{ display:grid; grid-template-columns:.85fr 1.15fr; gap:2.6rem; align-items:start; }
.tc-exp-person{ background:#fff; border:1px solid var(--color-border); border-radius:20px; padding:1.8rem; box-shadow:0 18px 44px -20px rgba(15,23,42,.25); text-align:center; position:sticky; top:96px; }
.tc-exp-person img{ width:118px; height:118px; border-radius:50%; object-fit:cover; border:4px solid #fff; box-shadow:0 10px 28px -10px rgba(13,116,132,.6); margin-bottom:1rem; }
.tc-exp-person .nm{ font-size:1.18rem; font-weight:800; color:var(--color-dark); }
.tc-exp-person .nm a{ color:inherit; text-decoration:none; } .tc-exp-person .nm a:hover{ color:#1292a1; }
.tc-exp-person .ro{ font-size:.86rem; color:var(--color-muted); margin:.2rem 0 1rem; display:block; line-height:1.4; }
.tc-exp-person blockquote{ margin:0 0 1.2rem; font-size:.96rem; line-height:1.6; color:#283143; font-style:italic; border-top:1px solid var(--color-border); padding-top:1.1rem; }
.tc-exp-topics > h2{ margin:.2rem 0 .5rem; }
.tc-exp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.6rem; }
.tc-exp-card{ background:#fff; border:1px solid var(--color-border); border-left:3px solid #1292a1; border-radius:14px; padding:1.1rem 1.2rem; }
.tc-exp-card .q{ display:block; font-weight:700; color:var(--color-dark); font-size:.98rem; margin-bottom:.35rem; }
.tc-exp-card .q::before{ content:"„"; color:#1292a1; font-weight:800; } .tc-exp-card .q::after{ content:"\201C"; color:#1292a1; font-weight:800; }
.tc-exp-card p{ margin:0; font-size:.9rem; color:var(--color-muted); line-height:1.55; }
@media(max-width:880px){ .tc-exp{ grid-template-columns:1fr; gap:1.8rem; } .tc-exp-person{ position:static; } .tc-exp-grid{ grid-template-columns:1fr; } }
/* ===== Förder-Hinweis-Callout (wiederverwendbar) ===== */
.tc-foerder{ display:flex; gap:1.1rem; align-items:flex-start; background:linear-gradient(135deg,#f4faf9,#eef7f6); border:1px solid var(--color-border); border-left:4px solid #0d7484; border-radius:16px; padding:1.3rem 1.5rem; margin:2rem 0; }
.tc-foerder .fi{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.tc-foerder b{ display:block; color:var(--color-dark); font-size:1.02rem; margin-bottom:.25rem; }
.tc-foerder p{ margin:0; color:var(--color-muted); font-size:.93rem; line-height:1.55; }
.tc-foerder .badge{ display:inline-block; background:#0d7484; color:#fff; font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; border-radius:999px; padding:.18rem .55rem; margin-bottom:.4rem; }
.tc-foerder a.lnk{ display:inline-block; margin-top:.5rem; color:#0d7484; font-weight:700; font-size:.92rem; text-decoration:none; }
.tc-foerder a.lnk:hover{ text-decoration:underline; }
/* Förder-Vergleichstabelle */
.tc-fc{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--color-border); border-radius:14px; overflow:hidden; margin-top:1.4rem; }
.tc-fc th,.tc-fc td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--color-border); font-size:.94rem; vertical-align:top; }
.tc-fc thead th{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; font-weight:700; }
.tc-fc td:first-child,.tc-fc th:first-child{ font-weight:700; color:var(--color-dark); }
.tc-fc tr:last-child td{ border-bottom:0; }
.tc-foerder-note{ font-size:.8rem; color:var(--color-muted); margin-top:1rem; font-style:italic; }
@media(max-width:680px){ .tc-fc{ display:block; overflow-x:auto; white-space:nowrap; } }
/* Google-Bewertungs-Badge (Footer) – rendert nur bei gesetztem site.rating */
.footer-rating{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.7rem; text-decoration:none; color:inherit; font-size:.85rem; }
.footer-rating .stars{ color:#f5b301; letter-spacing:1px; font-size:.95rem; }
.footer-rating:hover{ text-decoration:underline; }
/* ===================== MOBILE-HÄRTUNG (kein horizontales Überlaufen) ===================== */
/* Querscroll global verhindern – clip statt hidden, damit position:sticky (Experten-Portrait) erhalten bleibt */
html{ overflow-x:clip; }
/* Medien nie breiter als der Container */
img{ max-width:100%; height:auto; }
svg, video, canvas, iframe{ max-width:100%; }
table{ max-width:100%; }
/* lange deutsche Komposita umbrechen statt überlaufen */
h1, h2, h3{ overflow-wrap:break-word; }
:where(.container,.pp-wrap,.bb-wrap,.st-wrap,.bch-wrap,.cc-wrap,.co-wrap,.su-in,.kf-in){ max-width:100%; }

@media (max-width:1024px){
  /* Offenes Mobilmenü scrollbar machen statt die Seite endlos zu verlängern */
  .nav-toggle:checked ~ .site-nav.nav{ max-height:calc(100dvh - 72px); overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding-bottom:1rem; }
  /* Burger soll nicht umbrechen / immer rechts */
  .header-inner{ row-gap:.4rem; }
}
@media (max-width:560px){
  /* sehr schmale Screens: großzügigere Umbrüche, kleinere Hero-Visual-Höhen */
  .ki-plot,.cm-plot{ height:185px; }
  .fe-rwrap,.mm-gwrap{ max-width:260px; }
}
/* ===================== Homepage-Hero: Team-Panel (echte Köpfe, 21st.dev-Stil) ===================== */
.hero-team{ position:relative; z-index:1; background:linear-gradient(180deg,#fff,#f6fbfa); border:1px solid var(--color-border); border-radius:22px; padding:1.5rem 1.6rem 1.35rem; box-shadow:0 34px 74px -30px rgba(15,23,42,.34); }
.hero-team::before{ content:""; position:absolute; inset:0 0 auto 0; height:5px; border-radius:22px 22px 0 0; background:linear-gradient(90deg,#1292a1,#78c5bc); }
.hero-team-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1.25rem; }
.ht-kicker{ font-weight:800; color:var(--color-dark); font-size:1.06rem; margin:0; letter-spacing:-.01em; }
.ht-sub{ font-size:.84rem; color:var(--color-muted); margin:.15rem 0 0; }
.ht-rating{ display:inline-flex; flex-direction:column; align-items:flex-end; text-decoration:none; color:var(--color-muted); font-size:.72rem; line-height:1.25; white-space:nowrap; }
.ht-rating .stars{ color:#f5b301; font-size:.86rem; letter-spacing:.5px; }
.ht-rating:hover{ color:var(--color-primary-dark); text-decoration:none; }
.hero-team-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem .6rem; }
.hero-team-grid li{ animation:htIn .5s ease both; }
.hero-team-grid li:nth-child(1){ animation-delay:.12s; } .hero-team-grid li:nth-child(2){ animation-delay:.20s; } .hero-team-grid li:nth-child(3){ animation-delay:.28s; } .hero-team-grid li:nth-child(4){ animation-delay:.36s; } .hero-team-grid li:nth-child(5){ animation-delay:.44s; } .hero-team-grid li:nth-child(6){ animation-delay:.52s; }
.hero-team-grid a{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.45rem; text-decoration:none; color:inherit; }
.hero-team-grid .ht-photo{ position:relative; }
.hero-team-grid img{ width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 8px 18px -7px rgba(13,116,132,.55); transition:transform .2s ease, box-shadow .2s ease; }
.hero-team-grid a:hover img{ transform:translateY(-3px) scale(1.05); box-shadow:0 14px 26px -8px rgba(13,116,132,.75); }
.hero-team-grid .ht-dot{ position:absolute; right:3px; bottom:3px; width:13px; height:13px; border-radius:50%; background:#22c55e; border:2px solid #fff; }
.hero-team-grid b{ font-size:.82rem; color:var(--color-dark); line-height:1.15; }
.hero-team-grid span{ font-size:.7rem; color:var(--color-muted); line-height:1.2; }
.hero-team-foot{ display:inline-flex; align-items:center; gap:.3rem; margin-top:1.2rem; font-weight:700; font-size:.88rem; color:var(--color-primary); text-decoration:none; }
.hero-team-foot:hover{ color:var(--color-primary-dark); }
@keyframes htIn{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .hero-team-grid li{ opacity:1; transform:none; animation:none; } }
@media (max-width:480px){ .hero-team-grid{ grid-template-columns:repeat(2,1fr); } .hero-team-grid img{ width:58px; height:58px; } }
/* ===================== Team-Panel: moderne Mikro-Animationen ===================== */
/* Akzent-Leiste oben: wandernder Gradient */
.hero-team::before{ background:linear-gradient(90deg,#1292a1,#78c5bc,#0d7484,#1292a1); background-size:220% 100%; animation:htBar 7s linear infinite; }
@keyframes htBar{ to{ background-position:220% 0; } }
/* sanftes Schweben je Kopf, versetzte Phase – Pause bei Hover */
.hero-team-grid .ht-photo{ animation:htFloat 6s ease-in-out infinite; }
.hero-team-grid li:nth-child(2) .ht-photo{ animation-delay:-1s; }
.hero-team-grid li:nth-child(3) .ht-photo{ animation-delay:-2s; }
.hero-team-grid li:nth-child(4) .ht-photo{ animation-delay:-3s; }
.hero-team-grid li:nth-child(5) .ht-photo{ animation-delay:-4s; }
.hero-team-grid li:nth-child(6) .ht-photo{ animation-delay:-5s; }
.hero-team:hover .ht-photo{ animation-play-state:paused; }
@keyframes htFloat{ 50%{ transform:translateY(-5px); } }
/* rotierender Gradient-Ring beim Hover (moderner Look) */
.hero-team-grid .ht-photo::before{ content:""; position:absolute; inset:-4px; border-radius:50%; background:conic-gradient(from 0deg,#1292a1,#78c5bc,#0d7484,#1292a1); opacity:0; transition:opacity .25s ease; z-index:0; }
.hero-team-grid a:hover .ht-photo::before{ opacity:1; animation:htSpin 2.4s linear infinite; }
@keyframes htSpin{ to{ transform:rotate(360deg); } }
.hero-team-grid img{ position:relative; z-index:1; background:#fff; }
.hero-team-grid .ht-dot{ z-index:2; }
/* Online-Punkt pulsiert */
.hero-team-grid .ht-dot{ animation:htPulse 2.2s ease-out infinite; }
@keyframes htPulse{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.6); } 70%{ box-shadow:0 0 0 7px rgba(34,197,94,0); } 100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); } }
/* Hover: Name farbig + Rolle hervorgehoben */
.hero-team-grid a:hover b{ color:var(--color-primary-dark); }
.hero-team-grid a:hover span{ color:var(--color-primary); }
/* edlerer Entrance: scale + fade */
@keyframes htIn{ from{ opacity:0; transform:translateY(14px) scale(.9); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-team::before, .hero-team-grid .ht-photo, .hero-team-grid .ht-dot{ animation:none !important; }
  .hero-team-grid a:hover .ht-photo::before{ animation:none !important; }
}
/* ===================== Homepage-Hero: Beratungs-Dashboard-Mockup + Team-Chips (Cake-Stil) ===================== */
.hero-dash{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.hd-blob{ position:absolute; inset:4% -2% 4% 6%; z-index:0; border-radius:46% 54% 58% 42%/52% 44% 56% 48%; background:radial-gradient(120% 120% at 75% 20%, rgba(120,197,188,.5), rgba(18,146,161,.28) 45%, rgba(124,108,233,.16) 80%, transparent); filter:blur(6px); animation:hdBlob 18s ease-in-out infinite; }
@keyframes hdBlob{ 0%,100%{ transform:scale(1) translate(0,0); border-radius:46% 54% 58% 42%/52% 44% 56% 48%; } 50%{ transform:scale(1.05) translate(-2%,2%); border-radius:54% 46% 44% 56%/46% 56% 44% 54%; } }
/* Haupt-Karte */
.hd-card{ position:relative; z-index:2; width:min(100%,372px); background:#fff; border:1px solid var(--color-border); border-radius:20px; box-shadow:0 34px 80px -30px rgba(15,23,42,.42); padding:1.2rem 1.3rem 1rem; }
/* Hero-Karten nutzen das IO-Reveal-System (.reveal/.reveal-stagger + .in):
   Zustand ist klassenbasiert und dauerhaft - kein Replay, keine Start-Verzögerung
   durch Browser-Optimierungen bei Offscreen-Animationen. */
.hd-top{ display:flex; justify-content:space-between; align-items:center; }
.hd-title{ font-weight:800; color:var(--color-dark); font-size:.96rem; }
.hd-live{ display:inline-flex; align-items:center; gap:.35rem; font-size:.66rem; font-weight:800; color:#0d7484; text-transform:uppercase; letter-spacing:.05em; }
.hd-live i{ width:7px; height:7px; border-radius:50%; background:#22c55e; animation:htPulse 2.2s ease-out infinite; }
/* Beratungsfelder-Karte (2×2 Bereiche statt KPI-Cockpit) */
.hd-badge{ font-size:.62rem; font-weight:800; color:#0d7484; text-transform:uppercase; letter-spacing:.05em; background:linear-gradient(135deg,rgba(59,188,203,.16),rgba(13,116,132,.12)); border:1px solid rgba(13,116,132,.22); padding:.22rem .5rem; border-radius:999px; }
.hd-areas{ list-style:none; margin:1.05rem 0 .9rem; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-auto-rows:1fr; gap:.6rem; }
.hd-area{ position:relative; min-width:0; }
.hd-area > a{ display:flex; flex-direction:column; gap:.5rem; min-width:0; height:100%; padding:.7rem .7rem .65rem; border:1px solid var(--color-border); border-radius:13px; background:linear-gradient(180deg,#fff,#fafdfd); text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s; }
.hd-area > a:hover{ transform:translateY(-3px); border-color:rgba(13,116,132,.4); box-shadow:0 16px 30px -18px rgba(13,116,132,.55); }
.hd-ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; color:#0d7484; background:linear-gradient(135deg,rgba(59,188,203,.18),rgba(13,116,132,.12)); box-shadow:inset 0 0 0 1px rgba(13,116,132,.16); }
.hd-ico svg{ width:19px; height:19px; }
.hd-area > a:hover .hd-ico{ color:#fff; background:linear-gradient(135deg,#1292a1,#0d7484); box-shadow:0 8px 16px -8px rgba(13,116,132,.7); }
.hd-area-txt{ display:flex; flex-direction:column; min-width:0; }
.hd-area-txt b{ display:block; font-size:.78rem; font-weight:800; color:var(--color-dark); line-height:1.2; min-height:calc(1.2em * 2); overflow-wrap:break-word; hyphens:auto; }
.hd-area-txt small{ display:block; margin-top:.18rem; font-size:.66rem; color:var(--color-muted); line-height:1.2; }
.hd-alllink{ display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:700; color:#0d7484; text-decoration:none; }
.hd-alllink span{ transition:transform .2s; }
.hd-alllink:hover span{ transform:translateX(4px); }
/* gestaffelte Einblend-Animation der Kacheln */
/* sequenzielles „Scan"-Highlight, das die Bereiche der Reihe nach hervorhebt */
html.js .hd-area::after{ content:""; position:absolute; inset:0; border-radius:13px; box-shadow:0 0 0 0 rgba(13,116,132,0); pointer-events:none; animation:hdScan 8s ease-in-out infinite; animation-delay:calc(1.4s + var(--i) * 2s); }
@keyframes hdScan{ 0%,12%,100%{ box-shadow:0 0 0 0 rgba(13,116,132,0); } 4%{ box-shadow:0 0 0 3px rgba(13,116,132,.18); } }
/* Schwebende Team-Chips */
/* Dunkles Experten-Panel – gleichwertig zur Beratungsfelder-Karte */
.hd-experts{ position:relative; z-index:2; width:min(100%,372px); border-radius:20px; padding:1.15rem 1.3rem 1.2rem;
  background:linear-gradient(155deg,#0c5462 0%,#0d7484 55%,#0a3a44 100%); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 80px -30px rgba(9,40,46,.7); overflow:hidden; }
.hd-experts::before{ content:""; position:absolute; top:-40%; right:-20%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle,rgba(120,197,188,.28),transparent 70%); pointer-events:none; }
.hx-head{ position:relative; display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; margin-bottom:.95rem; }
.hx-kicker{ font-size:.95rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.hx-sub{ margin:0; font-size:.8rem; color:rgba(234,250,250,.7); font-weight:600; }
.hx-list{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.hx-item > a{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:.7rem .4rem; border-radius:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); text-decoration:none; color:#fff; transition:transform .2s, background .2s, border-color .2s; }
.hx-item > a:hover{ transform:translateY(-3px); background:rgba(255,255,255,.12); border-color:rgba(120,197,188,.55); text-decoration:none; }
.hx-av{ width:58px; height:58px; border-radius:50%; padding:2px; background:linear-gradient(135deg,#7cc5bc,#3bbccb); display:inline-flex; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); }
.hx-av img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid #0d7484; display:block; }
.hx-meta b{ display:block; font-size:.92rem; font-weight:800; line-height:1.1; color:#fff; }
.hx-meta small{ display:block; margin-top:.12rem; font-size:.66rem; color:rgba(190,230,228,.92); line-height:1.2; }
.hx-all{ position:relative; display:inline-flex; align-items:center; gap:.35rem; margin-top:.95rem; font-size:.78rem; font-weight:700; color:#bfeae6; text-decoration:none; }
.hx-all span{ transition:transform .2s; }
.hx-all:hover{ color:#fff; text-decoration:none; } .hx-all:hover span{ transform:translateX(4px); }
/* Reveal + Stagger (gegated, no-JS = sichtbar) */
@media (max-width:560px){
  .hd-card, .hd-experts{ width:min(100%,340px); }
  .hd-area-txt b{ font-size:.74rem; } .hd-area-txt small{ font-size:.62rem; }
  .hx-av{ width:50px; height:50px; } .hx-meta b{ font-size:.84rem; } .hx-meta small{ font-size:.6rem; }
  .hx-item > a{ padding:.6rem .25rem; }
}
@media (prefers-reduced-motion: reduce){
  .hd-blob, .hd-live i{ animation:none !important; }
  .hd-card, .hd-experts, .hx-item{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hd-area{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hd-area::after{ animation:none !important; }
  .hd-donut .val{ stroke-dashoffset:58 !important; animation:none !important; }
  .hd-bars span{ transform:scaleY(1) !important; animation:none !important; }
}
/* Kunden-Logo-Strip kompakt (direkt unter Trust-Band) */
.clients-strip{ background:var(--color-bg-alt); border-bottom:1px solid var(--color-border); }
.clients-caption{ text-align:center; margin:0 0 1.1rem; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--color-muted); }
.clients-strip .logos3{ margin-top:0; }
.clients-strip .logos3-item img{ height:34px; }
/* ===================== News-Übersicht: Themen-Tabs + moderne Karten (21st.dev-Stil) ===================== */
.news-wrap .container{ position:relative; }
.nf-radio{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nf-bar{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2rem; }
.nf-pill{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .95rem; border-radius:999px; border:1px solid var(--color-border); background:#fff; color:var(--color-muted); font-size:.88rem; font-weight:600; cursor:pointer; transition:background .18s, color .18s, border-color .18s, box-shadow .18s; user-select:none; }
.nf-pill:hover{ border-color:var(--color-primary); color:var(--color-primary-dark); }
#nf-all:checked ~ .nf-bar label[for="nf-all"],
#nf-ki:checked ~ .nf-bar label[for="nf-ki"],
#nf-fuehrung:checked ~ .nf-bar label[for="nf-fuehrung"],
#nf-change:checked ~ .nf-bar label[for="nf-change"],
#nf-strategie:checked ~ .nf-bar label[for="nf-strategie"],
#nf-kultur:checked ~ .nf-bar label[for="nf-kultur"],
#nf-prozesse:checked ~ .nf-bar label[for="nf-prozesse"]{ background:linear-gradient(135deg,#1292a1,#0d7484); color:#fff; border-color:transparent; box-shadow:0 8px 20px -8px rgba(13,116,132,.6); }
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.4rem; }
.ncard{ position:relative; background:#fff; border:1px solid var(--color-border); border-radius:18px; overflow:hidden; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ncard::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,#1292a1,#78c5bc); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.ncard:hover{ transform:translateY(-5px); box-shadow:0 24px 50px -22px rgba(15,23,42,.35); border-color:#cfe6e2; }
.ncard:hover::before{ transform:scaleX(1); }
.ncard-link{ display:flex; flex-direction:column; height:100%; padding:1.5rem 1.5rem 1.3rem; text-decoration:none; color:inherit; }
.ncard-link:hover{ text-decoration:none; }
.ncard-top{ display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.ncard-cat{ display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.02em; padding:.22rem .6rem; border-radius:999px; background:rgba(18,146,161,.12); color:#0d7484; white-space:nowrap; }
.ncard-cat--ki{ background:rgba(18,146,161,.12); color:#0d7484; }
.ncard-cat--fuehrung{ background:rgba(91,108,255,.12); color:#4453d6; }
.ncard-cat--change{ background:rgba(226,87,76,.12); color:#c8443a; }
.ncard-cat--strategie{ background:rgba(13,116,132,.12); color:#0d7484; }
.ncard-cat--kultur{ background:rgba(22,163,74,.12); color:#16834a; }
.ncard-cat--prozesse{ background:rgba(71,85,105,.14); color:#475569; }
.ncard-date{ font-size:.78rem; color:var(--color-muted); white-space:nowrap; }
.ncard-title{ font-size:1.18rem; line-height:1.32; color:var(--color-dark); margin:0 0 .55rem; letter-spacing:-.01em; transition:color .18s; }
.ncard:hover .ncard-title{ color:var(--color-primary-dark); }
.ncard-excerpt{ font-size:.92rem; color:var(--color-muted); line-height:1.55; margin:0 0 1.1rem; }
.ncard-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.9rem; border-top:1px solid #f1f5f9; }
.ncard-author{ font-size:.8rem; color:var(--color-muted); font-weight:600; }
.ncard-more{ font-size:.85rem; font-weight:700; color:var(--color-primary); display:inline-flex; align-items:center; gap:.25rem; transition:gap .18s ease; }
.ncard:hover .ncard-more{ gap:.55rem; }
#nf-ki:checked ~ .news-grid .ncard:not([data-cat="ki"]),
#nf-fuehrung:checked ~ .news-grid .ncard:not([data-cat="fuehrung"]),
#nf-change:checked ~ .news-grid .ncard:not([data-cat="change"]),
#nf-strategie:checked ~ .news-grid .ncard:not([data-cat="strategie"]),
#nf-kultur:checked ~ .news-grid .ncard:not([data-cat="kultur"]),
#nf-prozesse:checked ~ .news-grid .ncard:not([data-cat="prozesse"]){ display:none; }
html.js .ncard{ animation:ncIn .5s ease both; animation-delay:calc(var(--i,0)*.06s); }
@keyframes ncIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ html.js .ncard{ opacity:1 !important; transform:none !important; animation:none !important; } .ncard::before{ transition:none; } }
@media (max-width:560px){ .news-grid{ grid-template-columns:1fr; } .nf-bar{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:.4rem; } .nf-pill{ flex:0 0 auto; } }
/* ===================== Fat-Footer (dunkel, 21st.dev-Stil) ===================== */
.site-footer{ background:#0f172a; color:#aeb9c9; border-top:0; margin-top:4rem; position:relative; }
.site-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#1292a1,#78c5bc,#0d7484); }
.footer-grid{ display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:2.4rem; padding-block:3.4rem 2.4rem; }
.footer-brand .brand-name{ display:block; font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:-.01em; }
.footer-desc{ margin:.6rem 0 0; font-size:.92rem; line-height:1.6; color:#9aa6b8; max-width:34ch; }
.footer-desc strong{ color:#cfdae8; font-weight:700; }
.site-footer .footer-rating{ margin-top:1rem; color:#aeb9c9; }
.site-footer .footer-rating strong{ color:#fff; }
.footer-contact{ display:flex; flex-direction:column; gap:.3rem; margin-top:1.1rem; font-style:normal; }
.footer-contact .fc-line{ color:#9aa6b8; font-size:.9rem; text-decoration:none; transition:color .15s; }
.footer-contact .fc-line:hover{ color:#7fe3d8; text-decoration:none; }
.footer-col h3{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#7fe3d8; margin:0 0 1rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.footer-col a{ color:#aeb9c9; font-size:.9rem; font-weight:500; text-decoration:none; transition:color .15s, padding-left .15s; }
.footer-col a:hover{ color:#fff; padding-left:.2rem; text-decoration:none; }
.footer-col a.fcol-all{ color:#7fe3d8; font-weight:700; }
.footer-col a.fcol-all:hover{ color:#fff; }
.site-footer .footer-privacy{ border-top:1px solid rgba(255,255,255,.08); padding-block:1.2rem .2rem; }
.site-footer .footer-privacy small{ color:#7e8ba1; font-size:.82rem; }
.site-footer .footer-privacy a{ color:#7fe3d8; font-weight:600; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.8rem; padding-block:1rem 2.2rem; }
.footer-bottom small{ color:#7e8ba1; }
.footer-legal{ display:flex; gap:1.2rem; }
.footer-legal a{ color:#9aa6b8; font-size:.85rem; text-decoration:none; }
.footer-legal a:hover{ color:#fff; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2rem 1.6rem; } .footer-brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; align-items:flex-start; } }

/* ===================== REGIONALE STANDORT-KARTE + KENNZAHLEN ===================== */
.region-viz{ background:linear-gradient(180deg,#f3f9f9,#fff); border-block:1px solid #e2e6ee; }
.region-viz-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:2.6rem; align-items:center; }
@media (max-width:880px){ .region-viz-grid{ grid-template-columns:1fr; gap:2rem; } }
.region-viz .eyebrow{ color:#0d7484; }
/* Karte */
.dmap-wrap{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.dmap{ position:relative; width:100%; max-width:330px; aspect-ratio:521.88 / 728.58; margin-inline:auto; }
.dmap-svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 18px 34px rgba(13,116,132,.14)); }
.dmap-svg path{ fill:#dcecec; stroke:#9cc7c7; stroke-width:1.2; transition:fill .4s ease; }
.dmap:hover .dmap-svg path{ fill:#d2e8e8; }
.dpin{ position:absolute; transform:translate(-50%,-100%); z-index:2; }
.dpin-dot{ display:block; width:13px; height:13px; border-radius:50% 50% 50% 0; background:#94a3b8; transform:rotate(-45deg); border:2px solid #fff; box-shadow:0 3px 8px -2px rgba(15,23,42,.5); }
.dpin--on{ z-index:4; }
.dpin--on .dpin-dot{ width:19px; height:19px; background:linear-gradient(135deg,#16a4b4,#0d7484); animation:dpinPulse 2.4s ease-in-out infinite; }
.dpin-chip{ position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%); white-space:nowrap; background:#fff; color:#0f172a; font-size:.74rem; font-weight:700; padding:.22rem .55rem; border-radius:999px; border:1px solid #cfe0e0; box-shadow:0 6px 16px -8px rgba(15,23,42,.4); }
.dpin--on .dpin-chip{ background:#0d7484; color:#fff; border-color:#0d7484; }
@keyframes dpinPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(18,164,180,.45); } 50%{ box-shadow:0 0 0 7px rgba(18,164,180,0); } }
@media (prefers-reduced-motion:reduce){ .dpin--on .dpin-dot{ animation:none; } }
.dmap-chips{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; }
.dmap-chip{ font-size:.78rem; font-weight:600; color:#0d7484; background:#e6f4f4; border:1px solid #cfe6e6; border-radius:999px; padding:.3rem .7rem; }
/* Branchen-Balkendiagramm */
.barchart{ display:flex; flex-direction:column; gap:1rem; margin:.2rem 0 0; }
.bar-row{ display:grid; grid-template-columns:1fr auto; column-gap:.9rem; row-gap:.3rem; align-items:center; }
.bar-label{ grid-column:1 / -1; font-size:.86rem; color:#334155; font-weight:600; line-height:1.25; }
.bar-track{ position:relative; height:15px; background:#eef3f3; border-radius:7px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:7px; background:linear-gradient(90deg,#16a4b4,#0d7484); transform-origin:left; transform:scaleX(0); animation:barGrow 1.1s cubic-bezier(.65,0,.35,1) forwards; }
.bar-val{ font-size:.95rem; font-weight:800; color:#0d7484; white-space:nowrap; }
@keyframes barGrow{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce){ .bar-fill{ transform:scaleX(1); animation:none; } }
.viz-cap{ font-size:.78rem; color:#6b7687; margin-top:.9rem; }
/* Leuchttürme / größte Arbeitgeber */
.anchor-block{ margin-top:2.4rem; }
.anchor-head{ text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; font-weight:800; color:#0d7484; margin:0 0 1.1rem; }
.anchor-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; }
.anchor-tile{ display:flex; flex-direction:column; gap:.2rem; padding:1.05rem 1.15rem; background:#fff; border:1px solid #e3eaea; border-left:4px solid #16a4b4; border-radius:12px; box-shadow:0 1px 3px rgba(13,116,132,.05); }
.anchor-fig{ font-size:1.45rem; font-weight:800; color:#0d7484; line-height:1.1; }
.anchor-name{ font-size:.98rem; color:#1c2738; line-height:1.3; }
.anchor-role{ font-size:.82rem; color:#6b7687; line-height:1.35; }
.anchor-cap{ font-size:.74rem; color:#8a93a3; margin-top:.9rem; }
.region-cta-inline{ display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; margin-top:1.1rem; }
.region-cta-inline .tel{ font-weight:800; color:#0d7484; text-decoration:none; font-size:1.05rem; white-space:nowrap; }
.region-cta-inline .tel:hover{ text-decoration:underline; }
/* USP-Karten */
.usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:980px){ .usp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .usp-grid{ grid-template-columns:1fr; } }
.usp-card{ background:#fff; border:1px solid #e2e6ee; border-radius:16px; padding:1.4rem 1.3rem; box-shadow:0 12px 30px -22px rgba(15,23,42,.4); }
.usp-card .usp-ic{ font-size:1.7rem; display:block; margin-bottom:.5rem; }
.usp-card h3{ font-size:1.02rem; color:#0f172a; margin:0 0 .4rem; line-height:1.25; }
.usp-card p{ font-size:.9rem; color:#5a6275; line-height:1.55; margin:0; }
/* Leistungs-Grid */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1040px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }
.svc-card{ display:block; background:#fff; border:1px solid #e2e6ee; border-radius:16px; padding:1.4rem 1.3rem; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.svc-card:hover{ transform:translateY(-3px); box-shadow:0 22px 44px -26px rgba(13,116,132,.5); border-color:#bcdede; }
.svc-card .svc-ic{ font-size:1.7rem; display:block; margin-bottom:.5rem; }
.svc-card h3{ font-size:1.02rem; color:#0f172a; margin:0 0 .35rem; line-height:1.25; }
.svc-card p{ font-size:.88rem; color:#5a6275; line-height:1.5; margin:0 0 .7rem; }
.svc-card .svc-go{ font-size:.82rem; font-weight:700; color:#0d7484; }
/* Spezialisierung */
.spec-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.spec-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; border:1px solid #e2e6ee; border-left:4px solid #1292a1; border-radius:12px; padding:1rem 1.2rem; }
.spec-item .spec-txt b{ display:block; color:#0f172a; font-size:1rem; }
.spec-item .spec-txt span{ font-size:.88rem; color:#5a6275; }
.spec-item .spec-link{ white-space:nowrap; font-weight:700; font-size:.86rem; color:#0d7484; text-decoration:none; }
.spec-item .spec-link:hover{ text-decoration:underline; }
@media (max-width:600px){ .spec-item{ flex-direction:column; align-items:flex-start; gap:.5rem; } }
/* Ablauf */
.proc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:880px){ .proc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .proc-grid{ grid-template-columns:1fr; } }
.proc-step{ position:relative; background:#fff; border:1px solid #e2e6ee; border-radius:16px; padding:1.5rem 1.3rem 1.3rem; }
.proc-step .proc-n{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#16a4b4,#0d7484); color:#fff; font-weight:800; margin-bottom:.6rem; }
.proc-step h3{ font-size:1rem; color:#0f172a; margin:0 0 .35rem; }
.proc-step p{ font-size:.88rem; color:#5a6275; line-height:1.55; margin:0; }