/* Diginauten 2027: Design aus dem freigegebenen Mockup (Startseite, Case Study, Blog). Eine Datei für alle Seiten. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../../fonts/inter-latin.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('../../fonts/fraunces-latin.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url('../../fonts/fraunces-italic-latin.woff2') format('woff2')}

:root{
  --white:#ffffff;
  --cream:#f4f1ea;
  --cream-2:#ebe6db;
  --ink:#141a2b;
  --ink-soft:#434b5f;
  --muted:#6d7386;
  --line:#e2ddd1;
  --navy:#1f2b49;
  --navy-2:#293b5c;
  --navy-deep:#16203a;
  --navy-line:#34426a;
  --on-dark:#f1f2f6;
  --on-dark-soft:#bcc4d6;
  --terra:#b8431f;
  --terra-hover:#9e3818;
  --terra-tint:#f8e9e2;
  --r-lg:24px;
  --r:18px;
  --r-sm:12px;
  --wrap:1240px;
  --gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;interpolate-size:allow-keywords}
body{margin:0;background:var(--white);color:var(--ink);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-family:'Fraunces',Georgia,serif;font-weight:500;letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sec{padding:clamp(80px,10vw,128px) 0;position:relative}

/* Flächen wechseln vollflächig: Weiß, Creme, Dunkelblau */
.bg-white{background:var(--white)}
.bg-cream{background:var(--cream)}
.bg-navy{background:var(--navy);color:var(--on-dark)}

.label{display:block;font-family:'Inter',system-ui,sans-serif;letter-spacing:0;line-height:1.4;font-size:15px;font-weight:600;color:var(--terra);margin-bottom:16px}
.bg-navy .label{color:var(--on-dark-soft)}
.h2{font-size:clamp(32px,4.4vw,56px)}
.lead{font-size:clamp(17.5px,1.4vw,19px);color:var(--ink-soft);max-width:54ch}
.bg-navy .lead{color:var(--on-dark-soft)}
.head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px 64px;align-items:end;margin-bottom:clamp(40px,5vw,64px)}

/* Knopf: schlicht, nur der Pfeil rückt beim Überfahren vor */
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 24px;border-radius:10px;background:var(--terra);color:#fff;text-decoration:none;font-weight:600;font-size:16px;line-height:1.2;transition:background .25s}
.btn .arr{display:inline-flex;transition:transform .3s var(--ease)}
.btn:hover{background:var(--terra-hover)}
.btn:hover .arr{transform:translateX(4px)}

/* Textlink: Unterstrich wächst von links */
.ul{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ease),color .2s;padding-bottom:2px}
.ul:hover{background-size:100% 1.5px}

/* ---------- Navigation ---------- */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--terra);transform-origin:left;transform:scaleX(var(--sp,0))}
.nav{position:fixed;inset:0 0 auto;z-index:60;color:var(--on-dark);transition:background .35s,transform .45s var(--ease),box-shadow .35s}
.nav.scrolled{background:rgba(22,32,58,.9);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter);display:flex;align-items:center;gap:28px;transition:padding .35s}
.nav.scrolled .nav-in{padding-top:10px;padding-bottom:10px}
.brand img{height:64px;width:auto;transition:height .35s var(--ease)}
.nav.scrolled .brand img{height:52px}
.nav-links{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav-links > a,.nav-links button{position:relative;font-size:16px;font-weight:500;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;display:inline-flex;gap:6px;align-items:center;color:var(--on-dark)}
.nav-links > a::after,.nav-links button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:#fff;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links > a:hover::after,.nav-links button:hover::after,.has-drop:focus-within button::after{transform:scaleX(1);transform-origin:left}
.has-drop{position:relative}
.has-drop svg{transition:transform .3s var(--ease)}
.has-drop:hover svg,.has-drop:focus-within svg{transform:rotate(180deg)}
.drop{position:absolute;top:calc(100% + 12px);left:-14px;min-width:230px;background:#fff;color:var(--ink);border-radius:var(--r-sm);padding:8px;box-shadow:0 24px 50px -20px rgba(20,26,43,.5);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top left;transition:opacity .25s,transform .3s var(--ease),visibility .25s}
.drop a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:8px;text-decoration:none;font-size:15.5px;transition:background .2s,color .2s,padding .25s var(--ease)}
.drop a::after{content:"→";opacity:0;transform:translateX(-6px);transition:.25s var(--ease);color:var(--terra)}
.drop a:hover{background:var(--cream);padding-left:16px}
.drop a:hover::after{opacity:1;transform:none}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.nav .btn{padding:12px 20px;font-size:15px}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;cursor:pointer;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:1.6px;background:currentColor;transition:transform .3s var(--ease)}
.burger i:nth-child(1){top:19px}.burger i:nth-child(2){top:27px}
.menu-open .burger i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-open .burger i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:55;background:var(--navy-deep);color:var(--on-dark);padding:104px var(--gutter) 28px;display:flex;flex-direction:column;overflow:auto;clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .55s var(--ease)}
.menu-open{overflow:hidden}
.menu-open .sheet{clip-path:circle(150% at calc(100% - 40px) 40px)}
.menu-open .nav{transform:none;background:transparent;box-shadow:none;backdrop-filter:none}
.sheet a{text-decoration:none}
.sheet .big{font-family:'Fraunces',Georgia,serif;font-size:34px;padding:10px 0;border-bottom:1px solid var(--navy-line)}
.sheet .sub{display:flex;flex-wrap:wrap;gap:8px;padding:14px 0 18px;border-bottom:1px solid var(--navy-line)}
.sheet .sub span{width:100%;font-size:14px;color:var(--on-dark-soft)}
.sheet .sub a{padding:8px 14px;border-radius:999px;border:1px solid var(--navy-line);font-size:15px}
.sheet .btn{margin-top:auto;justify-content:space-between}

/* ---------- Karten: heben sich, kippen leicht, Licht folgt dem Zeiger ---------- */
.card{position:relative;isolation:isolate;border-radius:var(--r);transition:transform .45s var(--ease),box-shadow .45s,border-color .3s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(184,67,31,.13),transparent 62%)}
.bg-navy .card::after,.card.dark::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(184,67,31,.34),transparent 62%)}
.card.act{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-5px);box-shadow:0 30px 50px -32px rgba(20,26,43,.45)}
details.card.act{transform:none}
.card.act::after{opacity:1}
/* Unter dem Licht erscheint dasselbe Punktraster wie im Kopfbereich */
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;background-image:radial-gradient(rgba(41,59,92,.45) 1.1px,transparent 1.8px);background-size:26px 26px;background-position:13px 13px;-webkit-mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#000,transparent 72%);mask-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),#000,transparent 72%)}
.bg-navy .card::before,.hero .card::before,.card.dark::before{background-image:radial-gradient(rgba(255,255,255,.42) 1px,transparent 1.7px)}
.card.act::before{opacity:1}
.card.is-moving{transition:transform .12s linear,box-shadow .45s,border-color .3s}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:var(--on-dark);padding:clamp(124px,14vh,160px) 0 clamp(64px,8vw,104px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:780px;height:780px;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(184,67,31,.26),transparent 62%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative}
.hero .label{color:var(--on-dark-soft)}
.display{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(44px,5.8vw,84px);line-height:1.04;letter-spacing:-.025em}
.display em{font-style:italic}
.hero-sub{margin-top:28px;font-size:clamp(17.5px,1.4vw,19.5px);color:var(--on-dark-soft);max-width:52ch}
.hero-sub strong{color:var(--on-dark);font-weight:600}
.hero .btn{margin-top:34px}

.hero-photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:5/4}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:60% 30%}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,72px)}
.case{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;padding:20px;background:rgba(255,255,255,.05);border:1px solid var(--navy-line);color:var(--on-dark);text-decoration:none}
.case img{width:76px;height:76px;border-radius:10px;object-fit:cover}
.case .lbl{font-size:13.5px;font-weight:600;color:var(--on-dark-soft)}
.case .ttl{font-family:'Fraunces',Georgia,serif;font-size:22px;font-weight:500;line-height:1.2;margin-top:2px}
.case .loc{font-size:15px;color:var(--on-dark-soft);line-height:1.45;margin-top:6px}
.case .more{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--on-dark)}
.case .more svg{transition:transform .3s var(--ease)}
.case:hover .more svg{transform:translateX(4px)}

/* ---------- Vier Hebel ---------- */
.track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.track::before,.track .fill{content:"";position:absolute;left:28px;right:28px;top:27px;height:2px;background:var(--line)}
.track .fill{background:var(--terra);transform-origin:left;transform:scaleX(var(--p,0))}
.lever{display:flex;flex-direction:column}
.lever .ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:1.5px solid var(--line);color:var(--navy-2);margin-bottom:20px;position:relative;z-index:1;transition:background .4s,color .4s,border-color .4s,transform .5s var(--ease)}
.lever.lit .ico{background:var(--terra);border-color:var(--terra);color:#fff}
.lever:hover .ico{transform:translateY(-4px) rotate(-8deg)}
.lever .card{flex:1;background:var(--cream);padding:24px;border:1px solid transparent}
.lever .card:hover{border-color:#e3d6cc}
.lever h3{font-size:28px;margin-bottom:10px}
.lever p{font-size:16px;color:var(--ink-soft);line-height:1.55}

/* ---------- Zahlen ---------- */
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stat{padding:30px 28px;background:rgba(255,255,255,.05);border:1px solid var(--navy-line)}
.stat .num{display:block;font-family:'Fraunces',Georgia,serif;font-size:clamp(60px,7.5vw,104px);font-weight:400;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat .num i{font-style:normal;color:var(--terra)}
.stat .lbl{display:block;margin-top:12px;color:var(--on-dark-soft);font-size:16.5px}

/* ---------- Für wen ---------- */
.fit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fit{padding:clamp(26px,3.5vw,44px)}
.fit h3{font-size:30px;margin-bottom:22px}
.fit li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.5}
.fit li:first-child{border-top:0;padding-top:0}
.mk{width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.fit.yes{background:var(--white);border:1px solid var(--line)}
.fit.yes .mk{background:var(--terra-tint);color:var(--terra)}
.fit.no{background:var(--navy);color:var(--on-dark)}
.fit.no li{border-color:var(--navy-line);color:var(--on-dark-soft)}
.fit.no .mk{background:rgba(255,255,255,.08);color:var(--on-dark-soft)}
/* Haken zeichnen sich beim Hineinscrollen */
.ck path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s var(--ease)}
.drawn .ck path{stroke-dashoffset:0}
.drawn li:nth-child(2) .ck path{transition-delay:.12s}.drawn li:nth-child(3) .ck path{transition-delay:.24s}.drawn li:nth-child(4) .ck path{transition-delay:.36s}.drawn li:nth-child(5) .ck path{transition-delay:.48s}.drawn li:nth-child(6) .ck path{transition-delay:.6s}.drawn li:nth-child(7) .ck path{transition-delay:.72s}

/* ---------- Drei Zusagen als Bento ---------- */
.bento{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px}
.b{background:rgba(255,255,255,.05);border:1px solid var(--navy-line);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.b h3{font-size:clamp(26px,2.6vw,34px)}
.b p{color:var(--on-dark-soft);font-size:16.5px}
.b-1{grid-row:span 2}
.b-1 .pic{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:4/3;margin-bottom:6px}
.b-1 .pic img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.b-1 .who{font-size:14px;font-weight:600;color:var(--on-dark-soft)}
.b .ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(184,67,31,.32);color:#fff;transition:transform .5s var(--ease)}
.b:hover .ico{transform:rotate(-10deg) scale(1.08)}
.report{display:flex;align-items:flex-end;gap:7px;height:70px}
.report i{flex:1;border-radius:6px 6px 2px 2px;background:rgba(188,196,214,.2);height:var(--h);transform-origin:bottom;transform:scaleY(.12);transition:transform 1s var(--ease),background .3s}
.report i:last-child{background:var(--terra)}
.shown .report i{transform:scaleY(1)}
.b:hover .report i:not(:last-child){background:rgba(188,196,214,.32)}
.report i:nth-child(2){transition-delay:.08s}.report i:nth-child(3){transition-delay:.16s}.report i:nth-child(4){transition-delay:.24s}.report i:nth-child(5){transition-delay:.32s}.report i:nth-child(6){transition-delay:.4s}

/* ---------- Team ---------- */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.member{background:var(--cream);overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.member .pic{overflow:hidden;min-height:360px}
.member .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform .9s var(--ease),filter .5s}
.member:hover .pic img{transform:scale(1.05);filter:none}
.member .txt{padding:clamp(22px,2.6vw,32px)}
.role{display:inline-block;font-size:13.5px;font-weight:600;color:var(--terra);background:var(--terra-tint);padding:5px 12px;border-radius:999px}
.member h3{font-size:clamp(28px,2.6vw,36px);margin:16px 0 12px}
.member p{font-size:16px;color:var(--ink-soft)}

/* ---------- Kunden ---------- */
.marquee{overflow:hidden;background:var(--cream);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;background:var(--cream);animation:scroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:clamp(56px,6vw,76px);width:auto;margin:0 clamp(14px,2.4vw,28px);filter:grayscale(1);mix-blend-mode:multiply;opacity:.6;transition:filter .3s,opacity .3s,transform .4s var(--ease)}
.marquee img:hover{filter:none;opacity:1;transform:scale(1.08)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Leistungen ---------- */
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.step{background:var(--cream);border:1px solid transparent;padding:clamp(28px,3.4vw,44px);display:flex;flex-direction:column}
.step:hover{border-color:#e3d6cc}
.step-no{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.step-no b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--white);font-size:16px;font-weight:600;color:var(--navy-2);transition:transform .5s var(--ease),background .3s,color .3s}
.step:hover .step-no b{transform:rotate(360deg);background:var(--terra);color:#fff}
.step-no::after{content:"";flex:1;height:1px;background:var(--line)}
.step h3{font-size:clamp(28px,3vw,40px);line-height:1.08}
.price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
.price .main{font-family:'Fraunces',Georgia,serif;font-size:44px;line-height:1;font-weight:500;color:var(--terra)}
.price .note{font-size:16px;color:var(--muted)}
.feat{margin-top:26px;display:grid;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.step.featured .feat{border-color:var(--navy-line)}
.feat li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;font-size:17px;line-height:1.5;color:var(--ink-soft)}
.feat svg{margin-top:4px;color:var(--terra)}
.bonus{margin-top:24px;padding:18px 20px;border-radius:var(--r-sm);background:var(--white)}
.bonus-lbl{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);margin-bottom:10px}
.step.featured .bonus-lbl{color:#fff!important}
.bonus ul{display:flex;flex-wrap:wrap;gap:6px}
.bonus li{font-size:14.5px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--cream);transition:background .25s,color .25s}
.bonus li:hover{background:var(--terra);color:#fff}
.bonus p{font-size:14.5px;color:var(--muted);margin-top:8px}
.guar{margin-top:14px;padding:18px 20px;border-radius:var(--r-sm);background:var(--white);font-size:16px;line-height:1.5;color:var(--ink-soft);display:grid;gap:8px}
.guar strong{color:var(--ink)}
.s-note{margin-top:16px;font-size:15.5px;color:var(--muted)}
.step .grow{flex:1;min-height:22px}
.step .btn{align-self:flex-start;font-size:16px}
.step.featured{background:var(--navy);color:var(--on-dark)}
.step.featured .step-no b{background:var(--terra);color:#fff}
.step.featured .step-no::after{background:var(--navy-line)}
.step.featured .feat li{color:var(--on-dark-soft)}
.step.featured .feat svg{color:#fff}
.step.featured .bonus,.step.featured .guar{background:rgba(255,255,255,.06);color:var(--on-dark-soft)}
.step.featured .bonus li{background:rgba(255,255,255,.08);color:var(--on-dark)}
.step.featured .bonus-lbl,.step.featured .bonus p{color:var(--on-dark-soft)}
.badge{position:absolute;top:-13px;right:22px;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--terra);color:#fff;animation:nudge 3s ease-in-out 2s infinite}
@keyframes nudge{0%,85%,100%{transform:none}90%{transform:translateY(-3px)}95%{transform:translateY(1px)}}
.foot-note{margin-top:24px;font-size:14.5px;color:var(--muted)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px 72px;align-items:start}
.faq-head{position:sticky;top:110px}
.faq-list{display:grid;gap:10px}
details.qa{background:var(--white);border-radius:var(--r);overflow:hidden}
details.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:16px;align-items:center;padding:22px 24px;font-size:18.5px;font-weight:600;line-height:1.4;transition:color .2s}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary:hover{color:var(--terra)}
.pm{width:36px;height:36px;border-radius:50%;background:var(--cream);display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--ease)}
summary:hover .pm{transform:scale(1.1)}
details.qa[open] .pm{background:var(--terra);color:#fff;transform:rotate(135deg)}
details.qa::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
details.qa[open]::details-content{block-size:auto}
.qa-a{padding:0 22px 22px;color:var(--ink-soft);font-size:16.5px;max-width:64ch}

/* ---------- Abschluss und Footer ---------- */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px 64px;align-items:end}
.cta h2{font-size:clamp(34px,4.8vw,62px)}
.cta h2 em{font-style:italic;color:#fff}
.cta p{color:var(--on-dark-soft);margin-top:20px;max-width:52ch;font-size:18px}
.cta-actions{display:grid;gap:18px;justify-items:start}
.cta-actions .ul{color:var(--on-dark-soft);font-size:15.5px;background-size:100% 1px}
.cta-actions .ul:hover{color:#fff;background-size:100% 1.5px}
footer{background:var(--navy-deep);color:var(--on-dark-soft);padding:clamp(56px,7vw,88px) 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:32px}
.foot-grid img{height:50px;width:auto}
.foot-grid h2{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;color:#fff;letter-spacing:0;margin-bottom:14px}
.foot-grid a{display:block;text-decoration:none;font-size:15.5px;padding:4px 0;transition:color .2s,transform .3s var(--ease)}
.foot-grid a:hover{color:#fff;transform:translateX(4px)}
.foot-bottom{margin-top:56px;padding-top:24px;border-top:1px solid var(--navy-line);font-size:14px}

/* ---------- Einblenden beim Scrollen ---------- */
.js .rv{opacity:0;translate:0 26px;transition:opacity .8s var(--ease),translate .8s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;translate:0 0}
.js .hero .rv{opacity:1;translate:none;animation:rise .9s var(--ease) var(--d,0s) both}
@keyframes rise{from{opacity:0;translate:0 24px}}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .member{grid-template-columns:minmax(0,1fr)}
  .member .pic{min-height:0;aspect-ratio:4/3.3}
  .member .pic img{object-position:center 25%}
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .foot-grid > div:first-child{grid-column:1/-1}
}
@media (max-width:960px){
  .nav-links,.nav .btn{display:none}
  .burger{display:block}
  .hero-grid,.head,.faq-grid,.cta-grid{grid-template-columns:minmax(0,1fr)}
  .cases{grid-template-columns:minmax(0,1fr)}
  .track{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
  .track::before,.track .fill{display:none}
  .faq-head{position:static}
  .bento{grid-template-columns:minmax(0,1fr)}
  .b-1{grid-row:auto}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .brand img{height:50px}
  .nav.scrolled .brand img{height:44px}
  .hero{padding-top:108px}
  .display{font-size:clamp(40px,11.2vw,54px)}
  .btn{width:100%;justify-content:space-between}
  .case{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:16px}
  .case img{width:60px;height:60px}
  .track,.steps,.fit-grid,.team-grid,.stats-grid{grid-template-columns:minmax(0,1fr)}
  .stat{display:flex;align-items:baseline;gap:16px;padding:22px}
  .stat .lbl{margin:0}
  .stat .lbl br{display:none}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  details.qa summary{padding:18px;font-size:16.5px}
  .qa-a{padding:0 18px 18px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;translate:none}
  .ck path{stroke-dashoffset:0}
  .report i{transform:none}
  .marquee-track{flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track img[aria-hidden]{display:none}
  .marquee{mask-image:none;-webkit-mask-image:none}
}

/* ==========================================================
   Entwurf 7: Knopf-Animationen und Kopfbereich-Varianten
   ========================================================== */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn .t{display:inline-flex;white-space:nowrap}
.btn .ch{display:inline-block;position:relative;overflow:hidden;vertical-align:top;line-height:1.25}
.btn .ch span{display:block;transition:transform .5s var(--ease);transition-delay:calc(var(--i) * 16ms)}
.btn .ch span + span{position:absolute;left:0;top:100%}
.btn .arr{position:relative;overflow:hidden;display:inline-block;width:15px;height:15px;transform:none!important}
.btn .arr i{position:absolute;inset:0;display:grid;place-items:center;transition:transform .5s var(--ease)}
.btn .arr i + i{transform:translateX(-160%)}
.btn:hover .arr i:first-child{transform:translateX(160%)}
.btn:hover .arr i + i{transform:none}

/* Knopf 1: Fläche breitet sich vom Eintrittspunkt des Zeigers aus */
.btn::before{content:"";position:absolute;left:var(--bx,50%);top:var(--by,50%);width:260%;aspect-ratio:1;border-radius:50%;background:var(--navy);transform:translate(-50%,-50%) scale(0);transition:transform .6s var(--ease);z-index:-1}
.btn:hover{background:var(--terra)}
.btn:hover::before{transform:translate(-50%,-50%) scale(1)}
:is(.hero,.bg-navy,.featured,.nav,.sheet) .btn::before{background:#fff}
:is(.hero,.bg-navy,.featured,.nav,.sheet) .btn{transition:background .25s,color .35s var(--ease)}
:is(.hero,.bg-navy,.featured,.nav,.sheet) .btn:hover{color:var(--navy)}


/* Kopfbereich */
.hv .wrap{position:relative;z-index:1}
.hv::before{display:none}
/* Überschrift fährt zeilenweise aus einer Maske */
.display .ln{display:block;overflow:hidden;padding:0 .06em .1em 0;margin-bottom:-.1em}
.display .ln > span{display:inline-block;transform:translateY(112%);animation:lnUp 1.1s var(--ease) calc(.15s + var(--i) * .13s) forwards}
@keyframes lnUp{to{transform:none}}

/* A: Lichtkegel mit Punktraster */
.hero-light{position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,72%) var(--hy,32%),rgba(184,67,31,.34),transparent 66%)}
.hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.42) 1px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:radial-gradient(300px circle at var(--hx,72%) var(--hy,32%),#000,transparent 72%);mask-image:radial-gradient(300px circle at var(--hx,72%) var(--hy,32%),#000,transparent 72%)}
.clip-in{clip-path:inset(100% 0 0 0 round var(--r-lg));animation:clipIn 1.3s var(--ease) .3s forwards}
.clip-in img{transform:scale(1.25);animation:imgIn 1.6s var(--ease) .3s forwards}
@keyframes clipIn{to{clip-path:inset(0 0 0 0 round var(--r-lg))}}
@keyframes imgIn{to{transform:scale(1)}}
.hv-a .hero-photo.card::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 62%);z-index:1}


@media (max-width:960px){
}
@media (max-width:640px){
  .btn .t{white-space:normal;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .display .ln > span{transform:none}
  .clip-in{clip-path:none}
  .clip-in img{transform:none}
}

/* ---------- Such-Fenster im Kopfbereich ---------- */
/* Dunkles Glas: fügt sich in den Hero ein, nur das Ergebnis leuchtet */
.sw{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:var(--on-dark);border-radius:var(--r-lg);padding:18px 18px 20px;box-shadow:0 30px 60px -40px rgba(0,0,0,.5);min-height:440px;display:flex;flex-direction:column}
.sw-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08);font-size:17px;font-weight:500;color:var(--on-dark)}
.sw-bar svg{flex:none;color:var(--on-dark-soft)}
.sw-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-caret{width:2px;height:20px;background:var(--terra);margin-left:-8px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.sw-tabs{position:relative;display:flex;gap:24px;margin:18px 6px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px;font-weight:600}
.sw-tab{padding:0 0 10px;color:var(--on-dark-soft);transition:color .3s}
.sw-tab.on{color:var(--on-dark)}
.sw-ind{position:absolute;left:0;bottom:-1px;height:2px;width:var(--iw,52px);background:var(--terra);transform:translateX(var(--ix,0px));transition:transform .5s var(--ease),width .5s var(--ease)}
.sw-body{position:relative;flex:1;margin-top:16px}
.sw-view{position:absolute;inset:0;padding:0 6px;transition:opacity .45s,transform .45s var(--ease)}
.sw-k{opacity:0;transform:translateY(10px);pointer-events:none}
.sw.k-mode .sw-g{opacity:0;transform:translateY(-10px)}
.sw.k-mode .sw-k{opacity:1;transform:none}
.sk{display:block;height:9px;width:var(--w);border-radius:6px;background:rgba(255,255,255,.09);margin-top:9px}
.sk.s{height:7px;margin-top:0}
.sk.t{height:12px;background:rgba(188,196,214,.2)}
.res{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:14px;border-radius:14px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s;transition-delay:calc(var(--r) * .14s)}
.res + .res{margin-top:4px}
.fav{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.09)}
.res.hit .fav{background:var(--terra)}
.r-url{display:block;font-size:13px;color:var(--on-dark-soft)}
.r-ttl{display:block;font-family:'Fraunces',Georgia,serif;font-size:21px;line-height:1.2;color:var(--on-dark);margin-top:2px}
.sw.g-in .res{opacity:1;transform:none}
.sw.g-hit .res.hit{background:rgba(184,67,31,.24)}
.ai-head{display:flex;align-items:center;gap:12px}
.ai-head .sk{margin:0}
.ai-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff}
.ai-lines{margin-top:10px}
.ai-l{display:block;clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease);transition-delay:calc(.2s + var(--l) * .35s)}
.ai-l.row{display:flex;align-items:center;gap:8px}
.ai-l.row .sk{margin-top:0}
.ai-l.row{margin-top:9px}
.ai-chip{display:inline-block;padding:3px 10px;border-radius:7px;background:var(--terra);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;transform:scale(.7);opacity:0;transition:transform .5s var(--ease) 1.2s,opacity .3s 1.2s}
.sw.k-in .ai-l{clip-path:inset(0 0 0 0)}
.sw.k-in .ai-chip{transform:none;opacity:1}
.ai-src{display:flex;gap:8px;margin-top:20px;opacity:0;transform:translateY(8px);transition:opacity .5s 2s,transform .5s var(--ease) 2s}
.sw.k-in .ai-src{opacity:1;transform:none}
.src{height:28px;min-width:70px;border-radius:999px;background:rgba(255,255,255,.09)}
.src.hit{display:inline-flex;align-items:center;padding:0 12px;font-size:13px;font-weight:600;color:#fff;background:rgba(184,67,31,.36)}
.sw.out .res,.sw.out .sw-q{opacity:0;transition-delay:0s}
@media (max-width:640px){
  .sw{min-height:450px;padding:14px 14px 16px}
  .res{padding:12px}
  .sw-bar{font-size:15.5px;padding:12px 14px}
  .r-ttl{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .res{opacity:1;transform:none}
  .sw-caret{display:none}
}

/* ==========================================================
   Unterseiten: Case Study, Blog, Blogbeitrag
   ========================================================== */
.page-hero .display{font-size:clamp(36px,4.2vw,60px);line-height:1.1}
@media (min-width:961px){.page-hero:not(.solo) .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.page-hero .display em{font-style:italic}
.page-hero .intro{margin-top:26px;font-size:clamp(17.5px,1.4vw,19.5px);color:var(--on-dark-soft);max-width:58ch}
.page-hero .intro strong{color:var(--on-dark);font-weight:600}
.page-hero.solo .hero-grid{grid-template-columns:minmax(0,1fr)}
.page-hero.solo .display{max-width:20ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14.5px;color:var(--on-dark-soft);margin-bottom:22px}
.crumbs a{color:var(--on-dark-soft);text-decoration:none;transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.page-img{border-radius:var(--r-lg);overflow:hidden}
.page-img img{width:100%;height:auto}
.byline{display:flex;align-items:center;gap:14px;margin-top:28px;font-size:15.5px;color:var(--on-dark-soft)}
.byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 25%}

/* Case Study: Eckdaten */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fact{background:var(--cream);padding:clamp(22px,2.4vw,30px)}
.fact h3{font-size:26px;margin-bottom:16px}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{font-size:14.5px;font-weight:500;padding:6px 12px;border-radius:999px;background:var(--white);transition:background .25s,color .25s}
.pill:hover{background:var(--terra);color:#fff}
.fact .val{font-size:17px;font-weight:600;color:var(--ink)}
.fact .sub{margin-top:16px;font-size:14px;font-weight:600;color:var(--muted)}
.stats-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats-grid.four .num{font-size:clamp(46px,5vw,76px)}
.stats-grid.four .lbl{font-size:16.5px;line-height:1.45}

/* Fließtext */
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(40px,6vw,96px);align-items:start}
.prose{max-width:740px;font-size:18.5px;line-height:1.75;color:var(--ink-soft)}
.prose.center{margin:0 auto}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(30px,3vw,42px);line-height:1.12;color:var(--ink);margin-top:1em;scroll-margin-top:110px}
.prose h3{font-size:clamp(23px,2.2vw,29px);line-height:1.2;color:var(--ink);margin-top:.85em;scroll-margin-top:110px}
.prose > :first-child{margin-top:0}
.prose h2 + *,.prose h3 + *{margin-top:.4em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--terra);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .3s var(--ease),color .2s}
.prose a:hover{background-size:100% 2px;color:var(--terra-hover)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose li::marker{color:var(--terra);font-weight:600}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.55;border:1px solid var(--line);box-shadow:0 20px 40px -30px rgba(20,26,43,.35);border-radius:var(--r-sm);overflow:hidden}
.prose th{background:var(--terra);text-align:left;color:#fff;font-weight:600;padding:14px 16px}
.prose td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.prose td:first-child{font-weight:600;color:var(--ink);width:34%}
.prose tr{transition:background .2s}
.prose tbody tr:hover td{background:#faf8f3}
.prose figure{margin:2.2em 0}
.prose figure img{width:100%;border-radius:var(--r)}
.prose figcaption{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:12px}
.callout{margin:2.4em 0;padding:clamp(26px,3vw,38px);background:var(--navy);color:var(--on-dark);line-height:1.6}
.callout h3{margin:0 0 12px;color:#fff;font-size:clamp(24px,2.4vw,30px)}
.callout p{color:var(--on-dark-soft);font-size:17px}
.callout ul{list-style:none;padding:0;margin-top:18px;display:grid;gap:10px}
.callout li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;color:var(--on-dark);font-size:16.5px}
.callout li + li{margin-top:0}
.callout li svg{margin-top:5px;color:#fff}
.callout .btn{margin-top:24px}
.prose a.btn{color:#fff;background-image:none;background-color:var(--terra);padding:16px 24px}
.prose a.btn:hover{color:#fff}
.prose a.ul{background-size:0 1.5px}

/* Inhaltsverzeichnis: Punkt markiert den aktuellen Abschnitt */
.toc{position:sticky;top:110px}
.toc-lbl{display:block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:12px}
.toc a{display:flex;gap:12px;align-items:baseline;padding:7px 0;font-size:15px;line-height:1.4;color:var(--ink-soft);text-decoration:none;transition:color .2s,transform .3s var(--ease)}
.toc a::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--line);transform:translateY(-2px);transition:background .3s,transform .3s var(--ease)}
.toc a.sub{padding-left:19px;font-size:14px;color:var(--muted)}
.toc a:hover{color:var(--ink);transform:translateX(3px)}
.toc a.on{color:var(--ink);font-weight:600}
.toc a.on::before{background:var(--terra);transform:translateY(-2px) scale(1.3)}

/* Blog-Karten */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.post{background:var(--white);padding:14px 14px 24px;display:flex;flex-direction:column}
.bg-white .post{background:var(--cream)}
.post .thumb{display:block;border-radius:var(--r-sm);overflow:hidden;aspect-ratio:3/2}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.post .meta{margin:18px 8px 0;font-size:14px;color:var(--muted)}
.post .meta a{color:var(--terra);font-weight:600;text-decoration:none}
.post .ttl{margin:8px 8px 0;font-size:23px;line-height:1.22}
.post .ttl a{text-decoration:none;transition:color .2s}
.post .ttl a:hover{color:var(--terra)}
.post .exc{margin:12px 8px 0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.post .grow{flex:1;min-height:16px}
.more{display:inline-flex;align-items:center;gap:8px;margin:0 8px;align-self:flex-start;font-size:15px;font-weight:600;color:var(--navy-2);text-decoration:none}
.more svg{transition:transform .3s var(--ease)}
.more:hover svg,.post:hover .more svg{transform:translateX(4px)}
.post.lead{grid-column:span 2;grid-row:span 2;padding:18px 18px 28px}
.post.lead .thumb{aspect-ratio:auto;flex:1;min-height:300px}
.post.lead .grow{flex:0;min-height:20px}
.post.lead .ttl{font-size:clamp(28px,2.8vw,38px)}
.post.lead .exc{font-size:17px}
.pages{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:56px}
.pg{min-width:46px;height:46px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--white);font-weight:600;font-size:15px;text-decoration:none;transition:background .25s,color .25s,transform .3s var(--ease)}
.pg:hover{background:var(--terra);color:#fff;transform:translateY(-2px)}
.pg.cur{background:var(--navy);color:#fff}
.pg.dots{background:none}
.pg.next{padding:0 20px}

/* Blogbeitrag */
.cover{max-width:1080px;margin:calc(clamp(64px,8vw,104px) * -1 - 40px) auto 0;position:relative;z-index:2}
.cover img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 40px 70px -40px rgba(20,26,43,.55)}
.post-hero{padding-bottom:calc(clamp(64px,8vw,104px) + 80px)}
/* Kopf bündig mit dem Beitragsbild */
.post-hero .hero-grid{max-width:calc(1080px + 2 * var(--gutter));margin:0 auto}
.author{display:grid;grid-template-columns:170px minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:center;background:var(--white);padding:clamp(22px,3vw,36px);max-width:900px;margin:0 auto}
.bg-navy .author .label{color:var(--terra)}
.bg-navy .author{color:var(--ink)}
.bg-navy .author.card::before{background-image:radial-gradient(rgba(41,59,92,.45) 1.1px,transparent 1.8px)}
.bg-navy .author.card::after{background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(184,67,31,.13),transparent 62%)}
.author .pic{border-radius:var(--r);overflow:hidden;aspect-ratio:1}
.author .pic img{width:100%;height:100%;object-fit:cover;object-position:center 25%;transition:transform .9s var(--ease)}
.author .name{font-family:'Fraunces',Georgia,serif;font-size:clamp(28px,2.6vw,34px);line-height:1.1;margin-top:2px}
.author .arole{font-size:15px;color:var(--muted);margin-top:4px}
.author .bio{margin-top:14px;color:var(--ink-soft)}
.author .links{display:flex;flex-wrap:wrap;gap:22px;margin-top:16px;font-weight:600;font-size:15.5px}
.author .links a{color:var(--navy-2)}

@media (max-width:1100px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-grid{grid-template-columns:minmax(0,1fr) 240px}
}
@media (max-width:960px){
  .article-grid{grid-template-columns:minmax(0,1fr)}
  .toc{display:none}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post.lead{grid-row:auto}
  .post.lead .thumb{flex:none;aspect-ratio:16/10;min-height:0}
}
@media (max-width:640px){
  .facts,.stats-grid.four,.posts{grid-template-columns:minmax(0,1fr)}
  .post.lead{grid-column:auto}
  .prose{font-size:17.5px}
  .prose table{font-size:14.5px}
  .prose th,.prose td{padding:10px 12px}
  .prose td:first-child{width:auto}
  .author{grid-template-columns:minmax(0,1fr)}
  .author .pic{max-width:180px}
  .cover{margin-top:-100px}
  .post-hero{padding-bottom:150px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================
   Case Study: Diagramme, Inhaltsverzeichnis, Zähler, Markierungen
   ========================================================== */
.chart-fig{margin:2.4em 0}
.chart-box{position:relative;background:var(--cream);border-radius:var(--r);padding:20px 18px 12px}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 4px 6px}
.lg{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:600 14px/1.2 'Inter',system-ui,sans-serif;color:var(--ink);cursor:pointer;transition:opacity .3s,background .25s,transform .3s var(--ease)}
.lg:hover{transform:translateY(-2px)}
.lg[aria-pressed="false"]{opacity:.45;background:transparent}
.lg .sw-bar{width:14px;height:12px;border-radius:3px;background:var(--navy)}
.lg .sw-line{width:20px;height:3px;border-radius:3px;background:var(--terra);position:relative}
.lg .sw-line::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--terra);transform:translate(-50%,-50%)}
.chart{position:relative;outline:none}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart:focus-visible{outline:2px solid var(--terra);outline-offset:6px;border-radius:8px}
.chart text{font-family:'Inter',system-ui,sans-serif;fill:var(--muted);font-size:12.5px}
.chart .grid{stroke:#e2ddd1;stroke-width:1}
.chart .ax-r text{fill:var(--terra)}
.chart .bar{fill:var(--navy);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s var(--ease),opacity .35s,fill .3s}
.chart .bar.hot{fill:var(--terra)}
.chart.in .bar{transform:scaleY(1)}
.chart .line{fill:none;stroke:var(--terra);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;transition:stroke-dashoffset 1.6s var(--ease) .7s,opacity .35s}
.chart .dot{fill:var(--terra);stroke:var(--cream);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .45s cubic-bezier(.34,1.6,.64,1),opacity .35s}
.chart.in .dot{transform:scale(1)}
.chart .mk line{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 5;transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform 1s var(--ease)}
.chart .mk text{fill:var(--ink);font-weight:600;font-size:13.5px;opacity:0;transition:opacity .6s}
.chart.in .mk line{transform:scaleY(1)}
.chart.in .mk text{opacity:1}
.chart .arc{fill:none;stroke:var(--terra);stroke-width:2;stroke-dasharray:6 6;opacity:.9}
.chart .arc-draw{stroke-dasharray:var(--al);stroke-dashoffset:var(--al);transition:stroke-dashoffset 1.2s var(--ease) 2.4s}
.chart.in .arc-draw{stroke-dashoffset:0}
.chart .badge rect{fill:var(--terra)}
.chart .badge text{fill:#fff;font-weight:700;font-size:13.5px}
.chart .badge{opacity:0;transform-box:fill-box;transform-origin:center;transform:translateY(8px) scale(.8);transition:opacity .5s 3.3s,transform .6s cubic-bezier(.34,1.6,.64,1) 3.3s}
.chart.in .badge{opacity:1;transform:none}
.chart .val{fill:var(--ink);font-weight:700;font-size:15px;opacity:0;transition:opacity .5s}
.chart.in .val{opacity:1}
.chart .note{font-size:12.5px;fill:var(--muted)}
.chart .band{fill:var(--navy);opacity:0;transition:opacity .2s}
.chart .band.on{opacity:.06}
.chart.hovering .bar:not(.on){opacity:.35}
.chart.hovering .dot:not(.on){opacity:.35}
.chart .dot.on{transform:scale(1.5)}
.chart.off-bars .bar,.chart.off-bars .ax-l{opacity:0}
.chart.off-line .line,.chart.off-line .dot,.chart.off-line .ax-r,.chart.off-line .arc,.chart.off-line .badge{opacity:0}
.tip{position:absolute;z-index:3;pointer-events:none;min-width:190px;padding:12px 14px;border-radius:12px;background:var(--navy);color:#fff;font-size:14px;line-height:1.45;box-shadow:0 18px 40px -16px rgba(20,26,43,.6);opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.94);transition:opacity .2s,transform .25s var(--ease),left .25s var(--ease),top .25s var(--ease)}
.tip.on{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.tip b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:17px;margin-bottom:6px}
.tip .r{display:flex;justify-content:space-between;gap:18px}
.tip .r span:first-child{display:inline-flex;align-items:center;gap:8px;color:var(--on-dark-soft)}
.tip i{width:9px;height:9px;border-radius:2px;background:#8fa0c4;display:inline-block}
.tip i.t{background:var(--terra);border-radius:50%}
.tip strong,.prose .tip strong{font-variant-numeric:tabular-nums;color:#fff;background:none}

/* Inhaltsverzeichnis: dunkle Karte mit Lesefortschritt und gleitender Markierung */
.toc.card{background:var(--navy);color:var(--on-dark);padding:22px 18px 18px;border-radius:var(--r)}
.toc-top{display:flex;align-items:center;gap:12px;margin:0 6px 14px}
.toc .toc-lbl{margin:0;color:#fff;font-size:15px;flex:1}
.toc-ring{width:44px;height:44px;transform:rotate(-90deg)}
.toc-ring circle{fill:none;stroke-width:4}
.toc-ring .bg{stroke:rgba(255,255,255,.12)}
.toc-ring .fg{stroke:var(--terra);stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:calc(113.1 - 113.1 * var(--rp,0));transition:stroke-dashoffset .2s linear}
.toc-pct{position:absolute;right:24px;top:36px;width:44px;text-align:center;font-size:11.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.toc-list{position:relative;display:block}
.toc-pill{position:absolute;left:0;right:0;top:var(--pt,0);height:var(--ph,0);border-radius:10px;background:rgba(255,255,255,.08);transition:top .55s cubic-bezier(.34,1.35,.64,1),height .4s var(--ease);pointer-events:none}
.toc.card a{position:relative;z-index:1;color:var(--on-dark-soft);padding:8px 10px;border-radius:10px}
.toc.card a.sub{padding-left:29px;color:#97a2bd}
.toc.card a::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.toc.card a.done::before{background:var(--terra);box-shadow:none}
.toc.card a.on{color:#fff}
.toc.card a.on::before{background:var(--terra);box-shadow:0 0 0 4px rgba(184,67,31,.3);transform:translateY(-2px) scale(1.15)}
.toc.card a:hover{color:#fff}
.toc.card.notilt.act{transform:none}

/* Handy: mitlaufende Leiste mit aufklappbarer Liste */
.toc-m{display:none}
@media (max-width:960px){
  .toc-m{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:45;transform:translateY(140%);transition:transform .5s var(--ease)}
  .toc-m.show{transform:none}
  .toc-m-bar{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px 10px 10px;border:0;border-radius:16px;background:rgba(31,43,73,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font:600 15px/1.3 'Inter',system-ui,sans-serif;text-align:left;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);cursor:pointer}
  .toc-m-bar .toc-ring{width:38px;height:38px;flex:none}
  .toc-m-bar .cur{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toc-m-bar .chev{transition:transform .35s var(--ease)}
  .toc-m.open .chev{transform:rotate(180deg)}
  .toc-m-list{position:absolute;left:0;right:0;bottom:calc(100% + 8px);max-height:60vh;overflow:auto;padding:10px;border-radius:16px;background:var(--navy);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
  .toc-m.open .toc-m-list{opacity:1;transform:none;pointer-events:auto}
  .toc-m-list a{display:block;padding:10px 12px;border-radius:10px;color:var(--on-dark-soft);text-decoration:none;font-size:15px}
  .toc-m-list a.sub{padding-left:26px;font-size:14px}
  .toc-m-list a.on{background:rgba(255,255,255,.08);color:#fff}
}

/* Zähler, Pillen, Überschriften, Markierungen */
.js .fact .pill{opacity:0;translate:0 10px;transition:opacity .45s,translate .55s cubic-bezier(.34,1.6,.64,1),background .25s,color .25s;transition-delay:calc(.25s + var(--p) * 70ms)}
.js .fact.shown .pill{opacity:1;translate:0 0}
.cs-prose strong{background:linear-gradient(transparent 56%,rgba(184,67,31,.22) 56%) 0 0/0% 100% no-repeat;transition:background-size 1.2s var(--ease) .15s}
.cs-prose strong.lit{background-size:100% 100%}
.callout strong{background:none}
@media (max-width:640px){
  .stats-grid.four .stat{display:block}
  .stats-grid.four .num{white-space:nowrap}
  .stats-grid.four .lbl{margin-top:10px}
  .chart-box{padding:14px 8px 8px;margin:0 -6px}
  .chart text{font-size:11px}
  .tip{min-width:170px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .chart .bar,.chart .dot{transform:none}
  .chart .line{stroke-dashoffset:0!important}
  .chart .mk line{transform:none}
  .chart .mk text,.chart .val,.chart .badge{opacity:1;transform:none}
  .js .fact .pill{opacity:1;translate:0 0}
  .cs-prose strong{background-size:100% 100%}
}

/* Abschluss auf Creme-Fläche */
.bg-cream.cta h2 em{color:var(--ink)}
.bg-cream.cta p{color:var(--ink-soft)}
.bg-cream.cta .label{color:var(--terra)}

/* Leistungen: erste und letzte Stufe als Leiste, die Stufen dazwischen als Paar */
.steps-b{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.steps-b .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:12px}
.steps-b .pair-1{grid-template-columns:minmax(0,1fr)}
.steps-b .pair-2{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.steps-b .strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.steps-b .strip .s-b,.steps-b .strip .s-c{padding-top:64px}
.steps-b .strip .s-c{display:flex;flex-direction:column;height:100%}
.steps-b .strip .feat{margin-top:0;padding-top:0;border-top:0}
.steps-b .strip .guar{margin-top:0}
.steps-b .strip .s-note{margin-top:14px}
.steps-b .strip .s-note:first-child{margin-top:0}
.steps-b .strip .price .main{font-size:clamp(26px,2.2vw,30px)}
.steps-b .strip .s-klein{margin-top:10px;font-size:13.5px}
.steps-b .strip-end{margin-top:12px}
@media (max-width:960px){
  .steps-b .pair,.steps-b .strip{grid-template-columns:minmax(0,1fr)}
  .steps-b .pair{gap:28px}
  .steps-b .strip{gap:0}
  .steps-b .strip .s-b,.steps-b .strip .s-c{padding-top:0}
  .steps-b .strip .feat{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
  .steps-b .strip .guar,.steps-b .strip .s-note:first-child{margin-top:16px}
  .steps-b .strip .grow{min-height:22px}
}

/* Unterseiten: Case-Study-Inhalt mit Seitenbild und Logos, Stichpunkte im dunklen Seitenkopf */
.cs-fig{margin:2.2em 0}
.cs-fig img{width:100%;height:auto;border-radius:var(--r)}
.cs-fig.narrow{max-width:420px}
.cs-fig figcaption{font-size:14.5px;line-height:1.5;color:var(--muted);margin-top:12px}
.cs-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(24px,3vw,40px);align-items:start;margin:1.2em 0 2em}
.cs-side > div > :first-child{margin-top:0}
.cs-side .cs-fig{margin:0;max-width:none}
.cs-logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.6em 0 2.2em}
.cs-logos img{height:72px;width:auto;max-width:200px;object-fit:contain;padding:16px 22px;background:var(--cream);border-radius:var(--r-sm);box-sizing:content-box}
.page-hero .page-feat{margin-top:26px;padding-top:0;border-top:0}
.page-hero .page-feat li{color:var(--on-dark-soft)}
.page-hero .page-feat svg{color:#fff}
.page-hero .btn{margin-top:30px}
/* Kennzahlen bleiben in einer Zeile */
.stat .num{white-space:nowrap}
.stats-grid.four .stat .num.lang{font-size:clamp(40px,4.4vw,64px)}
/* Analyse-Seite: Inhalte des Berichts als Kacheln */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc{background:var(--cream);padding:clamp(24px,2.6vw,34px);border:1px solid transparent}
.svc:hover{border-color:#e3d6cc}
.bg-cream .svc{background:var(--white)}
.svc-no{display:block;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--terra);margin-bottom:14px}
.svc h3{font-size:clamp(24px,2.2vw,28px);line-height:1.15;margin-bottom:12px}
.svc p{font-size:16px;line-height:1.55;color:var(--ink-soft)}
.svc .more{display:inline-flex;gap:8px;align-items:center;margin-top:16px;font-weight:600;color:var(--terra);text-decoration:none}
/* Praxisbeispiele: Karten wie in der Blog-Übersicht */
.bg-white .uc-posts .post{background:var(--cream)}
.uc-posts .exc p{margin:0}
.uc-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}
.uc-cta p{font-size:17px;color:var(--ink-soft);margin:0}
/* Ablauf in Schritten */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px}
.flow-step{background:var(--white);padding:clamp(20px,1.8vw,24px);border:1px solid transparent;display:flex;flex-direction:column}
.bg-white .flow-step{background:var(--cream)}
.flow-step:hover{border-color:#e3d6cc}
.flow-step .step-no{margin-bottom:18px}
.flow-step:hover .step-no b{transform:rotate(360deg);background:var(--terra);color:#fff}
.bg-cream .flow-step .step-no b{background:var(--cream)}
.flow-week{font-size:13.5px;font-weight:600;letter-spacing:.04em;color:var(--terra);margin-bottom:8px}
.flow-step h3{font-size:clamp(20px,1.65vw,23px);line-height:1.15;margin-bottom:10px}
.flow-step p{font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
/* Text mit Bild */
.tb-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center}
.tb-grid.img-left .tb-text{order:2}
.tb-grid.no-img{grid-template-columns:minmax(0,1fr);max-width:820px}
.tb-text .h2{margin-bottom:22px}
.tb-body p{font-size:17px;line-height:1.65;margin:0 0 16px}
.bg-navy .tb-body p{color:var(--on-dark-soft)}
.bg-navy .tb-body strong{color:#fff}
.tb-box{margin:22px 0;padding:20px 22px;border-radius:var(--r-sm);background:var(--cream)}
.tb-box p:last-child{margin-bottom:0}
.bg-navy .tb-box{background:rgba(255,255,255,.06);border:1px solid var(--navy-line)}
.tb-text .btn{margin-top:12px}
.tb-img{border-radius:var(--r-lg);overflow:hidden}
.tb-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Für wen auf dunkler Fläche */
.bg-navy .fit.yes{background:var(--white);color:var(--ink);border-color:transparent}
.bg-navy .fit.no{background:rgba(255,255,255,.05);border:1px solid var(--navy-line)}
/* Formular-Abschnitt und Fluent Forms im neuen Design. Regeln mit .fluentform davor, damit sie das später geladene Fluent-Stylesheet (.ff-default …) schlagen. */
.form-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.form-aside .h2{margin-bottom:18px}
.form-aside p{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.bg-navy .form-aside p{color:var(--on-dark-soft)}
.form-contact{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0}
.form-contact li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16.5px}
.form-contact .lbl{font-size:14px;font-weight:600;color:var(--muted);padding-top:2px}
.form-contact a{color:var(--ink);font-weight:600;text-decoration:none;transition:color .2s}
.form-contact a:hover{color:var(--terra)}
.form-card{background:var(--white);padding:clamp(24px,3vw,40px);border:1px solid var(--line)}
.form-note{margin-top:16px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.form-note p{margin:0}
:is(.form-card,.dg-form-main) .fluentform .ff-el-group{margin-bottom:20px}
:is(.form-card,.dg-form-main) .fluentform .ff-el-input--label{display:flex;align-items:center;gap:8px;margin-bottom:8px}
:is(.form-card,.dg-form-main) .fluentform .ff-el-input--label label{font-size:15px;font-weight:600;color:var(--ink);margin:0}
:is(.form-card,.dg-form-main) .fluentform .ff-el-is-required.asterisk-right label:after{content:" *";color:var(--terra)}
:is(.form-card,.dg-form-main) .fluentform .ff-el-tooltip{color:var(--muted);display:inline-flex}
:is(.form-card,.dg-form-main) .fluentform .ff-el-tooltip svg{fill:currentColor}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-control{width:100%;font:inherit;font-size:16.5px;color:var(--ink);background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-sm);padding:14px 16px;line-height:1.4;transition:border-color .2s,background .2s,box-shadow .2s;box-shadow:none}
.form-card .fluentform select.ff-el-form-control{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%23293b5c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form-card .fluentform textarea.ff-el-form-control{min-height:140px;resize:vertical}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-control::placeholder{color:#9aa0ae}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-control:hover{border-color:var(--line)}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-control:focus{outline:0;background:var(--white);border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(41,59,92,.1)}
:is(.form-card,.dg-form-main) .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--terra)}
:is(.form-card,.dg-form-main) .fluentform .error.text-danger,:is(.form-card,.dg-form-main) .fluentform .ff-el-is-error .text-danger{font-size:14px;color:var(--terra);margin-top:6px}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-check-label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-check-input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--terra)}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-check-label a{color:var(--ink);font-weight:600}
:is(.form-card,.dg-form-main) .fluentform .ff-el-form-hide_label > .ff-el-input--label{display:none}
:is(.form-card,.dg-form-main) .fluentform .ff-btn-submit:not(.ff_btn_no_style){display:inline-flex;align-items:center;gap:10px;font:inherit;font-size:16px;font-weight:600;color:#fff;background:var(--terra)!important;border:0;border-radius:10px;padding:16px 24px;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
:is(.form-card,.dg-form-main) .fluentform .ff-btn-submit:not(.ff_btn_no_style):hover{background:var(--navy)!important;transform:translateY(-1px)}
:is(.form-card,.dg-form-main) .fluentform .ff-message-success{background:var(--terra-tint);border:0;border-radius:var(--r-sm);padding:20px 22px;font-size:16.5px;color:var(--ink)}
:is(.form-card,.dg-form-main) .fluentform .ff-errors-in-stack{color:var(--terra)}
/* Kontaktseite: Wege im Kopf und Formular aus dem HTML-Block (Klassen dg-…) */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.way{padding:22px;background:rgba(255,255,255,.05);border:1px solid var(--navy-line);display:flex;flex-direction:column}
.way-title{margin:0;font-family:'Fraunces',Georgia,serif;font-size:21px;line-height:1.2;color:#fff}
.way-text{margin:8px 0 0;font-size:15.5px;line-height:1.5;color:var(--on-dark-soft);flex:1}
.way .btn{margin-top:18px;align-self:flex-start}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.dg-form{padding:clamp(80px,10vw,128px) 0;background:var(--cream);position:relative}
.dg-form .dg-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,80px);align-items:start}
.dg-eyebrow{font-size:15px;font-weight:600;color:var(--terra);margin-bottom:16px}
.dg-form-aside-h{font-size:clamp(32px,4.4vw,56px);margin-bottom:18px}
.dg-form-aside p{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.dg-form-contact{list-style:none;margin:28px 0 0;padding:0}
.dg-form-contact li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line);font-size:16.5px}
.dg-form-contact .lbl{font-size:14px;font-weight:600;color:var(--muted);padding-top:2px}
.dg-form-contact a{color:var(--ink);font-weight:600;text-decoration:none;transition:color .2s}
.dg-form-contact a:hover{color:var(--terra)}
.dg-form-main{background:var(--white);padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-radius:var(--r)}
/* Mitlaufende Leiste am unteren Rand */
.ctabar{position:fixed;left:50%;bottom:16px;z-index:55;width:min(calc(100% - 32px),980px);transform:translate(-50%,140%);opacity:0;transition:transform .5s var(--ease),opacity .35s;pointer-events:none}
.ctabar.is-an{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ctabar-in{display:flex;align-items:center;gap:20px;padding:12px 12px 12px 24px;border-radius:16px;background:rgba(22,32,58,.92);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:var(--on-dark);box-shadow:0 18px 40px -18px rgba(15,22,40,.6)}
.ctabar-text{flex:1;min-width:0}
.ctabar-title{margin:0;font-family:'Fraunces',Georgia,serif;font-size:19px;color:#fff;line-height:1.2}
.ctabar-sub{margin:2px 0 0;font-size:14px;color:var(--on-dark-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctabar .btn{flex:none;font-size:15px}
/* Blog: Zitate, Bilder aus dem Editor, Beitrag ohne Titelbild */
.prose blockquote{margin:1.8em 0;padding:4px 0 4px 26px;position:relative;font-family:'Fraunces',Georgia,serif;font-size:clamp(21px,2vw,25px);line-height:1.4;color:var(--ink)}
.prose blockquote::before{content:"\201E";position:absolute;left:-6px;top:-22px;font-size:64px;line-height:1;color:var(--terra)}
.prose blockquote p{margin:0}
.prose blockquote cite{display:block;margin-top:12px;font-family:'Inter',system-ui,sans-serif;font-size:14.5px;font-style:normal;color:var(--muted)}
.prose .wp-block-image{margin:2.2em 0}
.prose .wp-block-image img{width:100%;height:auto;border-radius:var(--r)}
.prose .wp-block-image figcaption{font-size:14.5px;color:var(--muted);margin-top:12px}
.post-hero.no-cover{padding-bottom:clamp(64px,8vw,104px)}
.post-hero.no-cover + .post-body{padding-top:clamp(56px,7vw,96px)!important}
@media (min-width:961px) and (max-width:1180px){
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .svc-grid,.flow,.tb-grid,.form-grid{grid-template-columns:minmax(0,1fr)}
  .tb-grid.img-left .tb-text{order:0}
  .ways,.dg-form .dg-wrap{grid-template-columns:minmax(0,1fr)}
  .ctabar{bottom:10px;width:calc(100% - 20px)}
  .ctabar-in{padding:10px 10px 10px 18px;gap:12px;border-radius:20px}
  .ctabar-sub{display:none}
  .ctabar-title{font-size:16px}
  .cs-side{grid-template-columns:minmax(0,1fr)}
  .cs-logos img{height:56px;max-width:150px;padding:12px 16px}
}
/* Hero: lange Headline-Zeilen etwas kleiner, damit jede Zeile in einer Zeile bleibt */
.display.lang{font-size:clamp(40px,5.05vw,74px)}
/* Ablauf: beim Überfahren Nummer weiß auf Terrakotta, auch auf Creme */
.flow-step:hover .step-no b,.bg-cream .flow-step:hover .step-no b{background:var(--terra);color:#fff}
.flow-text p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink-soft)}
.flow-text p + p{margin-top:.6em}
/* Hebel: Symbol, Überschrift und Text stehen in allen Kacheln auf einer Linie */
.track{grid-template-rows:auto auto 1fr;row-gap:0}
.lever{display:grid;grid-row:span 3;grid-template-rows:subgrid}
.lever .card{grid-row:2 / span 2;display:grid;grid-template-rows:subgrid;align-content:start}
.lever h3{font-size:clamp(22px,1.95vw,26px);line-height:1.18;margin-bottom:12px;align-self:start}
.lever .card > p{align-self:start}
/* FAQ und Ergebnisse: Kacheln heben sich von der Fläche ab, Bilder bekommen eine feine Kante */
.bg-white details.qa{background:var(--cream)}
.bg-white details.qa .pm{background:var(--white)}
.bg-white details.qa[open] .pm{background:var(--terra)}
.uc-posts .thumb{position:relative}
.uc-posts .thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,26,43,.12);pointer-events:none}
/* Schritt-Formular (Fluent-Formular 6): eine Frage pro Schritt, Antworten als Kacheln, Fortschritt oben.
   Greift erst, wenn stepform.js die Klasse dg-steps gesetzt hat, ohne JavaScript bleibt das normale Formular. */
.form-card .dg-steps [data-dg-step]{display:none}
.form-card .dg-steps[data-dg-current="1"] [data-dg-step="1"],
.form-card .dg-steps[data-dg-current="2"] [data-dg-step="2"],
.form-card .dg-steps[data-dg-current="3"] [data-dg-step="3"],
.form-card .dg-steps[data-dg-current="4"] [data-dg-step="4"],
.form-card .dg-steps[data-dg-current="5"] [data-dg-step="5"]{display:block;animation:dgStepIn .4s var(--ease) both}
@keyframes dgStepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.form-card .dg-steps .dg-step-park{display:block}
.form-card .dg-steps .dg-step-park.is-parked{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;pointer-events:none}
.dg-steps-head{margin-bottom:28px}
.dg-steps-count{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:10px}
.dg-steps-bar{height:4px;background:var(--cream-2);border-radius:4px;overflow:hidden}
.dg-steps-bar span{display:block;height:100%;width:20%;background:var(--terra);border-radius:4px;transition:width .5s var(--ease)}
.form-card .dg-steps .ff-el-input--label label.dg-step-q{display:block}
.form-card .dg-steps .dg-step-q,.form-card .dg-steps .ff-el-input--label label.dg-step-q{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.15;letter-spacing:-.015em;color:var(--ink);margin:0 0 18px;outline:none}
.form-card .dg-steps .ff-el-is-required.asterisk-right label.dg-step-q::after{display:none}
.form-card .dg-steps .ff-el-input--label:has(.dg-step-q){align-items:flex-start}
.form-card .dg-steps .ff-el-input--label:has(.dg-step-q) .ff-el-tooltip{margin-top:10px}
.dg-step-opt{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted);white-space:nowrap}
.dg-step-hint{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:-6px 0 18px}
.form-card .dg-steps select.dg-step-native{display:none}
.dg-choices{display:grid;gap:10px}
.dg-choice{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-sm);padding:16px 18px;font:inherit;font-size:16.5px;line-height:1.35;color:var(--ink);cursor:pointer;transition:border-color .2s,background .2s,transform .25s var(--ease)}
.dg-choice::after{content:"";flex:0 0 20px;width:20px;height:20px;border:1.5px solid #cfc8b8;border-radius:50%;background:var(--white);transition:border-color .2s,background .2s,box-shadow .2s}
.dg-choice:hover{border-color:var(--navy-2);transform:translateY(-1px)}
.dg-choice:hover::after{border-color:var(--navy-2)}
.dg-choice:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
.dg-choice[aria-pressed="true"]{border-color:var(--terra);background:var(--terra-tint)}
.dg-choice[aria-pressed="true"]::after{border-color:var(--terra);background:var(--terra);box-shadow:inset 0 0 0 4px #fff}
.dg-step-inputbar{display:flex;align-items:center;gap:8px;background:var(--cream);border:1.5px solid transparent;border-radius:14px;padding:6px 6px 6px 4px;transition:border-color .2s,background .2s,box-shadow .2s}
.dg-step-inputbar:hover{border-color:var(--line)}
.dg-step-inputbar:focus-within{background:var(--white);border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(41,59,92,.1)}
.form-card .dg-steps .dg-step-inputbar .ff-el-form-control,.form-card .dg-steps .dg-step-inputbar .ff-el-form-control:focus,.form-card .dg-steps .dg-step-inputbar .ff-el-form-control:hover{flex:1 1 auto;min-width:0;border:0;background:transparent;box-shadow:none;height:52px;padding:0 14px;font-size:18px;line-height:1.2}
.form-card .dg-steps .dg-has-error .dg-step-inputbar{border-color:var(--terra)}
.dg-step-circle{flex:0 0 48px;width:48px;height:48px;border-radius:10px;border:0;padding:0;background:var(--terra);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:19px;cursor:pointer;transition:background .25s}
.dg-step-circle svg{transition:transform .4s var(--ease)}
.dg-step-circle:hover{background:var(--navy)}
.dg-step-circle:hover svg{transform:rotate(45deg)}
.dg-step-circle:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
.dg-step-error{font-size:14px;color:var(--terra);margin-top:8px}
.dg-step-error:empty{display:none}
.dg-step-outlook{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px}
.form-card .dg-steps .dg-step-outlook[data-dg-step="1"]{display:none}
.form-card .dg-steps[data-dg-current="1"] .dg-step-outlook[data-dg-step="1"]{display:grid}
.dg-step-outlook li{padding:14px 0 0;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:4px}
.dg-step-outlook .lbl{font-size:13.5px;font-weight:600;color:var(--muted)}
.dg-step-outlook .val{font-size:15.5px;line-height:1.35;color:var(--ink-soft)}
.dg-step-outlook li.is-current{border-top-color:var(--terra)}
.dg-step-outlook li.is-current .val{color:var(--ink)}
.dg-steps-nav{display:flex;align-items:center;gap:20px;margin-top:6px}
.dg-steps-nav[hidden],.dg-steps-nav [hidden]{display:none!important}
.dg-steps-nav.is-last{margin-top:16px}
.dg-step-back,.dg-step-skip{background:none;border:0;padding:8px 0;font:inherit;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .2s}
.dg-step-back::before{content:"\2190\00a0\00a0"}
.dg-step-back:hover,.dg-step-skip:hover{color:var(--terra)}
.dg-step-skip,.dg-steps-nav .dg-step-next{margin-left:auto}
.dg-step-next{display:inline-flex;align-items:center;font:inherit;font-size:16px;font-weight:600;color:#fff;background:var(--terra);border:0;border-radius:10px;padding:14px 22px;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.dg-step-next::after{content:"\00a0\00a0\2192"}
.dg-step-next:hover{background:var(--navy);transform:translateY(-1px)}
.dg-step-back:focus-visible,.dg-step-skip:focus-visible,.dg-step-next:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.form-card .dg-steps [data-dg-step]{animation:none!important}}
@media (max-width:960px){
  .track{row-gap:0}
  .lever{margin-bottom:28px}
}
@media (max-width:640px){
  .lever{margin-bottom:14px}
  .dg-choice{padding:14px 16px;font-size:15.5px}
  .form-card .dg-steps .dg-step-inputbar .ff-el-form-control{height:48px;font-size:17px;padding:0 10px}
  .dg-step-outlook{grid-template-columns:minmax(0,1fr)}
  .dg-step-outlook li{flex-direction:row;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0}
  .form-card .dg-steps .ff-btn-submit{width:100%;justify-content:center}
}
/* Rechtstexte: Lesespalte etwas ruhiger für lange Texte */
.prose.legal{font-size:17px;line-height:1.7}
.prose.legal h2{font-size:clamp(25px,2.4vw,32px)}
.prose.legal h3{font-size:clamp(20px,1.8vw,23px)}
.prose.legal h4{font-size:18px;color:var(--ink);margin-top:1.2em}
/* 404 */
.err-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* Newsletter: Anmeldung auf Dunkelblau mit heller Formularkarte */
.nl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.nl-sec .nl-grid > div > p{margin-top:18px;color:var(--on-dark-soft);font-size:17px;line-height:1.6}
.nl-sec .nl-grid > div > p a{color:#fff}
.dg-nlform-label{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
.dg-nlform-row{display:flex;gap:8px}
.dg-nlform-input{flex:1;min-width:0;font:inherit;font-size:16.5px;color:var(--ink);background:var(--cream);border:1.5px solid transparent;border-radius:var(--r-sm);padding:14px 16px;transition:border-color .2s,background .2s,box-shadow .2s}
.dg-nlform-input:focus{outline:0;background:var(--white);border-color:var(--navy-2);box-shadow:0 0 0 4px rgba(41,59,92,.1)}
.dg-nlform-btn{font:inherit;font-size:16px;font-weight:600;color:#fff;background:var(--terra);border:0;border-radius:10px;padding:0 22px;cursor:pointer;transition:background .25s}
.dg-nlform-btn:hover{background:var(--navy)}
.dg-nlform-check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;margin-top:16px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);cursor:pointer}
.dg-nlform-check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--terra)}
.dg-nlform-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dg-nlform-hint{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
.dg-nlform-ok{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
@media (max-width:960px){.nl-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.dg-nlform-row{flex-direction:column}.dg-nlform-btn{padding:14px 22px}}
/* Kennzahlen: Beschriftung ist eine H3 (wie im alten Design), sieht aber aus wie normaler Text */
.stat h3.lbl{font-family:'Inter',system-ui,sans-serif;font-weight:400;letter-spacing:0;line-height:1.5;text-wrap:wrap}
/* Abschluss auf Creme: kleiner Link unter dem Knopf in Textfarbe */
.bg-cream.cta .cta-actions .ul{color:var(--ink-soft)}
.bg-cream.cta .cta-actions .ul:hover{color:var(--terra)}
/* Lange Adressen in Texten brechen am Handy um statt über den Rand zu ragen */
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}
/* Such-Fenster: Adresse in der KI-Antwort bleibt in einer Zeile, die leeren Quellen geben dafür Platz ab */
.src.hit{white-space:nowrap;flex:0 0 auto}
.ai-src .src:not(.hit){flex:0 1 70px;min-width:28px}
/* Zeilenumbruch nach einer Frage im Linktext, nur am Handy (digi_d_frage_umbruch) */
.br-m{display:none}
@media (max-width:640px){
  .br-m{display:inline}
  /* Mitlaufende Leiste: am Handy nur der Knopf, sonst überlagert der Text den Knopf */
  .ctabar-text{display:none}
  .ctabar-in{padding:8px}
  .ctabar .btn{flex:1;justify-content:space-between}
  /* Blogbeitrag: keine Brotkrumen, die H1 steht direkt darunter */
  .post-hero .crumbs{display:none}
}
/* Diagramm „verlauf“: Fläche unter der ersten Linie, zweite Reihe in Dunkelblau, Reihen einzeln ausblendbar */
.chart .area{fill:var(--terra);opacity:0;transition:opacity .8s 1s}
.chart .area.alt{fill:var(--navy-2)}
.chart.in .area{opacity:.1}
.chart .line.alt{stroke:var(--navy-2);stroke-width:2.5}
.chart .dot.alt{fill:var(--navy-2)}
.chart.off-v .s-v,.chart.off-w .s-w{opacity:0!important}
.lg .sw-alt{width:20px;height:3px;border-radius:3px;background:var(--navy-2)}
.tip i.n{background:var(--navy-2);border-radius:50%}
@media (prefers-reduced-motion:reduce){.chart .area{opacity:.1}}
/* Tabelle statt Bild in der Case Study (Diagrammtyp „tabelle“) */
.cs-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose .cs-table table{min-width:520px}
.prose .cs-table td:first-child{width:auto}
.prose .cs-table th:not(:first-child),.prose .cs-table td:not(:first-child){text-align:center;white-space:nowrap}
.prose .cs-table td.neu{color:var(--ink);font-weight:700}
.prose .cs-table td.alt{color:var(--muted)}
.prose .cs-table td.plus{color:#2e7346;font-weight:700}
.prose .cs-table tbody th{background:none;color:var(--ink);font-weight:600;text-align:left;padding:13px 16px;border-top:1px solid var(--line)}
/* Beschriftungen der Eingriffe mit Rand in Flächenfarbe, damit Markierungslinien sie nicht durchkreuzen */
.chart .mk text{paint-order:stroke;stroke:var(--cream);stroke-width:5px;stroke-linejoin:round}