/* Mindful Consulting Giebelhaus, 2026 design system.
   Palette from the logo (navy #194077, grey #666) and the founder portrait (studio grey backdrop).
   Type: Source Serif 4 for headings, Hanken Grotesk for text. Both self-hosted. */

@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/hanken-grotesk-latin.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --ink:#0e1b2e;
  --ink-2:#253247;
  --ink-3:#4a5566;
  --navy:#194077;
  --navy-hover:#123360;
  --navy-deep:#0f2748;
  --navy-ink:#0a1a33;
  --paper:#fbfbfc;
  --panel:#f0f1f3;
  --line:#d9dce1;
  --line-soft:#e6e8eb;
  --on-dark:#e9eef5;
  --on-dark-2:#a9b6c8;
  --line-dark:rgba(233,238,245,.16);
  --studio:linear-gradient(180deg,#9f9fa0 0%,#a6a6a8 10%,#aaaaac 20%,#acacae 30%,#aeaeb0 40%,#b1b1b3 50%,#b0b0b2 60%,#acacae 70%,#a9a9ab 80%,#a4a8a9 90%,#a3a6a7 100%);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1240px;
  --gut:clamp(20px,4.6vw,64px);
  --sec:96px;
  --r:4px;
  --nav-h:76px;
  --t-hero:clamp(2.55rem,1.05rem + 3.7vw,4.9rem);
  --t-h2:clamp(2rem,1.25rem + 2.1vw,3.15rem);
  --t-h3:clamp(1.3rem,1.12rem + .55vw,1.62rem);
  --t-lead:clamp(1.08rem,1rem + .3vw,1.27rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],header[id],div[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:500;line-height:1.6;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--navy)}
::selection{background:#c9d6ea;color:var(--ink)}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-optical-sizing:auto;color:var(--navy-ink);letter-spacing:-.012em;line-height:1.08;margin:0}
h1{font-size:var(--t-hero);letter-spacing:-.022em;line-height:1.02}
h2{font-size:var(--t-h2);letter-spacing:-.018em}
h3{font-size:var(--t-h3);line-height:1.2}
h1,h2,.svc-q,.about-quote{text-wrap:balance}
.hero-lead,.sec-lead,.audit-lead,.contact-lead{text-wrap:pretty}
p{margin:0}
input::placeholder,textarea::placeholder{color:#6f7784;opacity:1}

.wrap,.container{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.section{padding-top:var(--sec);padding-bottom:var(--sec)}
.eyebrow,.kicker{font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;color:var(--navy);margin:0 0 18px}
.sec-title{margin:0}
.sec-lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2);margin-top:20px;max-width:34em}
.grad-text{color:inherit;background:none;-webkit-text-fill-color:currentColor}

/* Motion: content is always visible; only the hero has an entrance. */
[data-reveal]{opacity:1;transform:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--r);font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.005em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .18s,border-color .18s,color .18s}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-hover);border-color:var(--navy-hover)}
.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(14,27,46,.34)}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-light{background:#fff;color:var(--navy-ink);border-color:#fff}
.btn-light:hover{background:var(--on-dark);border-color:var(--on-dark)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.92rem}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.arrow-link:hover{color:var(--navy-hover)}

/* Navigation */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 max(var(--gut),calc((100% - var(--wrap)) / 2));background:rgba(251,251,252,.96);border-bottom:1px solid var(--line-soft)}
@supports (backdrop-filter:blur(8px)){.nav{background:rgba(251,251,252,.9);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px)}}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo .brand-logo{height:36px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a.navlink,.nav .nav-dd-trigger{font-size:.96rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:6px 0;background:none;border:0;font-family:var(--sans);cursor:pointer}
.nav-links a.navlink:hover,.nav .nav-dd-trigger:hover{color:var(--navy)}
.lang-btn{font-size:.86rem;font-weight:600;color:var(--ink-3);text-decoration:none;letter-spacing:.04em}
.lang-btn:hover{color:var(--navy)}
.nav-cta{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:var(--r);background:var(--navy);color:#fff;font-size:.93rem;font-weight:600;text-decoration:none;transition:background-color .18s}
.nav-cta:hover{background:var(--navy-hover)}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer}
.nav-toggle span{display:block;height:1.5px;background:var(--ink);margin:6px 0;transition:transform .2s,opacity .2s}
.nav .nav-dd-menu{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:0 18px 40px -12px rgba(14,27,46,.18);backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px;margin-top:14px;min-width:260px}
.nav .nav-dd-menu a{color:var(--ink);border-radius:3px;font-size:.95rem;font-weight:500}
.nav .nav-dd-menu a:hover{background:var(--panel);color:var(--navy)}
.nav .nav-dd-menu a small{color:var(--ink-3)}
.nav .nav-dd:focus-within .nav-dd-menu{opacity:1;visibility:visible;transform:none;transition:none}

/* Hero: white ground, defined portrait crop */
.hero{position:relative;background:var(--paper)}
.hero-stage{position:relative;background:#fff;overflow:visible}
.hero-in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(32px,5vw,64px);padding-top:64px;padding-bottom:64px}
.hero-copy{max-width:min(38rem,56%)}
.hero-media{position:relative;flex:none;width:100%;max-width:440px;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--studio)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.hero .kicker{color:var(--ink);opacity:.82}
.hero h1{color:var(--navy-ink)}
.hero h1 .h1-b{display:block;color:var(--navy)}
.hero-lead{margin-top:26px;font-size:var(--t-lead);line-height:1.5;color:var(--ink);max-width:31em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero .btn-ghost{border-color:rgba(14,27,46,.62)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.28);color:var(--navy-ink);border-color:var(--navy-ink)}
.hero-sub{margin-top:18px;font-size:.93rem;color:#243044}
@media (prefers-reduced-motion:no-preference){
  .hero-copy>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero-copy>*:nth-child(2){animation-delay:.06s}
  .hero-copy>*:nth-child(3){animation-delay:.12s}
  .hero-copy>*:nth-child(4){animation-delay:.18s}
  .hero-copy>*:nth-child(5){animation-delay:.24s}
  .hero-media img{animation:fade 1s ease-out both}
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Split layout: sticky heading left, content right */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.split-head{position:sticky;top:calc(var(--nav-h) + 40px)}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.nav .nav-dd-trigger .caret{font-size:0;display:inline-block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);margin-left:4px;opacity:.7}
.nav .nav-dd:hover .nav-dd-trigger .caret{transform:translateY(0) rotate(225deg)}

/* Hero caption band */
.hero-foot{border-bottom:1px solid var(--line)}
.hero-foot-in{display:flex;align-items:baseline;justify-content:space-between;gap:6px 32px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-size:.92rem}
.cap-name{font-weight:600;color:var(--ink)}
.cap-meta{color:var(--ink-3)}

/* Section heading */
.sec-head{max-width:46rem;margin-bottom:48px}

/* Services: grouped by the question a client brings */
.svc-group{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,6vw,104px);padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--ink)}
.svc-q{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start;font-family:var(--serif);font-weight:400;font-size:clamp(1.55rem,1.15rem + 1.2vw,2.3rem);line-height:1.16;letter-spacing:-.014em;color:var(--navy-ink);max-width:13em}
.svc-list{list-style:none;margin:0;padding:0}
.svc-item{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.svc-item:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.svc-item h3{font-family:var(--sans);font-size:1.375rem;font-weight:600;letter-spacing:-.005em;line-height:1.25;color:var(--navy-ink)}
.svc-item p{margin-top:8px;color:var(--ink-2);max-width:38em}
.svc-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px!important}
.arrow-link span{transition:transform .18s}
.arrow-link:hover span{transform:translateX(3px)}

/* Audit */
.on-dark{background:var(--navy-deep);color:var(--on-dark)}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .eyebrow{color:#a9c1e2}
.audit h2{font-size:clamp(2.2rem,1.25rem + 2.9vw,3.9rem);line-height:1.04;max-width:15em}
.audit-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px clamp(40px,6vw,104px);align-items:end}
.audit-lead{margin-top:26px;font-size:var(--t-lead);line-height:1.55;color:var(--on-dark);max-width:33em}
.audit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:36px}
.audit-more{font-size:.95rem;color:var(--on-dark-2)}
.audit-more a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.audit-more a:hover{text-decoration-color:#fff}
.audit-get h3{font-family:var(--sans);font-size:.86rem;font-weight:600;letter-spacing:.01em;color:#a9c1e2}
.checks{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line-dark)}
.checks li{padding:16px 0 16px 32px;border-bottom:1px solid var(--line-dark);position:relative;color:#fff;font-size:1.05rem}
.checks li::before{content:"";position:absolute;left:3px;top:23px;width:12px;height:6px;border-left:1.5px solid #a9c1e2;border-bottom:1.5px solid #a9c1e2;transform:rotate(-45deg)}

/* Approach and ways of working */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.step{border-top:2px solid var(--navy);padding-top:22px}
.step h3{font-size:clamp(1.4rem,1.2rem + .6vw,1.65rem)}
.step p{margin-top:10px;color:var(--ink-2);max-width:26em}
.ai{background:var(--panel)}
.ai-close{margin-top:clamp(28px,3vw,40px);color:var(--ink-2);max-width:46em}
.ai-close .arrow-link{margin-left:6px;white-space:nowrap}
.models{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(40px,6vw,104px);margin-top:clamp(56px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.models-title{font-family:var(--serif);font-size:var(--t-h3);font-weight:500;color:var(--navy-ink)}
.models-lead{margin-top:10px;color:var(--ink-2)}
.models-list{margin:0;padding:0}
.models-list>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 24px;padding:16px 0;border-bottom:1px solid var(--line)}
.models-list>div:first-child{padding-top:0}
.models-list dt{font-weight:600;color:var(--navy-ink)}
.models-list dd{margin:0;color:var(--ink-2)}

/* About */
.about{background:var(--panel)}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px clamp(40px,6vw,104px);align-items:start}
.about-id h2{font-size:clamp(2rem,1.3rem + 2vw,3rem)}
.about-role{margin-top:12px;font-size:1rem;color:var(--ink-3)}
.about-body p{color:var(--ink-2);margin-top:18px;max-width:38em}
.about-body .about-p1{margin-top:0;font-size:var(--t-lead);line-height:1.55;color:var(--ink)}
.about-meta{margin:34px 0 30px;padding:0;border-top:1px solid var(--ink)}
.about-meta>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:4px 24px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.96rem}
.about-meta dt{color:var(--ink-3)}
.about-meta dd{margin:0;color:var(--ink)}

/* FAQ */
.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 0;cursor:pointer;font-family:var(--serif);font-size:clamp(1.18rem,1.05rem + .4vw,1.4rem);font-weight:500;line-height:1.3;color:var(--navy-ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ic{flex:none;position:relative;width:14px;height:14px;margin-top:8px;font-size:0;color:transparent}
.faq-item summary .ic::before,.faq-item summary .ic::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--navy);transition:transform .2s}
.faq-item summary .ic::after{transform:rotate(90deg)}
.faq-item[open] summary .ic::after{transform:rotate(0)}
.faq-item summary:hover{color:var(--navy)}
.faq-ans{padding:0 48px 26px 0;color:var(--ink-2);max-width:44em}

/* Contact */
.contact-sec{padding-top:var(--sec);padding-bottom:var(--sec)}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"intro form" "info form";grid-template-rows:auto 1fr;gap:0 clamp(40px,7vw,120px);align-items:start}
.contact-intro{grid-area:intro}
.form-card{grid-area:form}
.contact-info{grid-area:info}
.contact-lead{margin-top:22px;font-size:var(--t-lead);line-height:1.5;color:var(--on-dark);max-width:26em}
.contact-info{margin:40px 0 0;border-top:1px solid var(--line-dark)}
.contact-info>div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-dark)}
.contact-info dd{margin:0}
.contact-info .lbl{font-size:.88rem;color:var(--on-dark-2)}
.contact-info a,.contact-info .addr{color:#fff;text-decoration:none;font-size:1.02rem}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:7px}
.fld>span{font-size:.88rem;font-weight:600;color:var(--ink)}
.contact-info a:hover{text-decoration:underline;text-underline-offset:3px}
.form-card{background:#fff;color:var(--ink);border-radius:var(--r);padding:clamp(24px,3.2vw,44px)}
.cform{display:grid;gap:14px}
.cform input,.cform select,.cform textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #75879a;border-radius:var(--r);padding:14px 14px;min-height:52px;transition:border-color .15s}
.cform textarea{min-height:130px;resize:vertical}
.cform select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.cform input:hover,.cform select:hover,.cform textarea:hover{border-color:var(--ink-2)}
.cform input:focus,.cform select:focus,.cform textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(25,64,119,.16)}
.cform-consent{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.5;color:var(--ink-3);margin-top:4px}
.cform-consent input{width:18px;height:18px;min-height:0;flex:none;margin:2px 0 0;padding:0;accent-color:var(--navy)}
.cform .btn{width:100%;margin-top:6px}
.cform-note{font-size:.86rem;color:var(--ink-3);text-align:center}
.cform-status{font-size:.92rem;min-height:0}
.cform-status.err{color:#a4262c}
.cform-status.ok{color:#1d6b3a}
.form-success{text-align:center;padding:40px 10px}
.form-success .tick{width:48px;height:48px;margin:0 auto 16px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1.3rem}
.form-success p{font-size:1.08rem;color:var(--ink)}

/* Footer */
.footer{background:var(--navy-ink);color:var(--on-dark-2);padding:56px var(--gut) 34px}
.footer-row{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr);gap:36px 48px;align-items:start}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.footer-logo{height:38px;width:auto}
.footer-brand .tg{font-size:.93rem;line-height:1.6;color:var(--on-dark-2)}
.footer-tag{font-family:var(--serif);font-size:1.45rem;line-height:1.2;color:#fff;letter-spacing:-.01em}
.footer-h{font-size:.82rem;font-weight:600;color:#a9c1e2;margin-bottom:6px;letter-spacing:.01em}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{color:var(--on-dark);text-decoration:none;font-size:.95rem}
.footer-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer-copy{max-width:var(--wrap);margin:48px auto 0;padding-top:22px;border-top:1px solid var(--line-dark);font-size:.85rem;color:#7f8ea4}

/* Consent banner */
.consent-banner{position:fixed;left:20px;bottom:20px;z-index:90;max-width:460px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 24px 60px -20px rgba(14,27,46,.35);padding:20px 22px;display:flex;flex-direction:column;gap:16px;font-size:.93rem;line-height:1.5}
.consent-banner p{margin:0;color:var(--ink-2)}
.consent-banner a{color:var(--navy)!important}
.consent-actions{display:flex;gap:10px;justify-content:flex-end}
.btn-decline{background:#fff;color:var(--ink);border-color:#c5cad2}
.btn-decline:hover{border-color:var(--ink)}

/* Service landing pages, Wissen, legal */
.lp-hero{background:var(--panel);border-bottom:1px solid var(--line);padding:clamp(56px,7vw,104px) 0 clamp(48px,6vw,88px)}
.lp-hero::before{display:none}
.lp-hero-in{max-width:calc(var(--wrap) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut)}
.lp-hero-in>*{max-width:52rem}
.lp-hero h1{font-size:clamp(2.3rem,1.2rem + 3vw,4rem)}
.lp-answer{margin-top:24px;font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:40em}
.lp-hero .lp-answer{padding-left:20px;border-left:2px solid var(--navy)}
.lp-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lp-body{padding:clamp(56px,7vw,96px) var(--gut)}

/* Contents rail: added to main.lp-body when a page has enough h2 sections to navigate */
.lp-toc{margin:0 0 32px}
.lp-toc-h{font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.lp-toc-list{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.lp-toc-list li{margin:0}
.lp-toc-list a{display:block;padding:7px 0 7px 16px;font-size:.92rem;line-height:1.35;color:var(--ink-2);text-decoration:none}
.lp-toc-list a:hover{color:var(--navy)}
@media (min-width:980px){
  main.lp-body:has(.lp-toc){display:grid;grid-template-columns:220px minmax(0,736px);column-gap:64px;max-width:calc(1020px + 2 * var(--gut));margin:0 auto;align-items:start}
  main.lp-body:has(.lp-toc) .prose{margin:0;max-width:736px}
  main.lp-body:has(.lp-toc) .lp-toc{position:sticky;top:calc(var(--nav-h) + 40px)}
}
.prose{max-width:46rem;margin:0 auto}
.prose h2{font-size:clamp(1.65rem,1.2rem + 1.3vw,2.375rem);margin:64px 0 20px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--sans);font-size:1.375rem;font-weight:600;letter-spacing:0;color:var(--navy-ink);margin:34px 0 10px}
.prose p{margin:0 0 18px;font-size:1.06rem;line-height:1.72;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 22px;padding:0;list-style:none}
.prose ul li,.prose ol li{position:relative;padding-left:24px;margin:0 0 10px;font-size:1.06rem;line-height:1.65;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:2px;top:.72em;width:8px;height:1.5px;background:var(--navy)}
.prose ol{counter-reset:p}
.prose ol li{counter-increment:p}
.prose ol li::before{content:counter(p) ".";position:absolute;left:0;top:0;font-family:var(--serif);color:var(--navy)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--navy);text-decoration:underline;text-decoration-color:rgba(25,64,119,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--navy)}
.lp-card{background:var(--panel);border-left:2px solid var(--navy);border-radius:0;padding:24px 26px;margin:26px 0}
.lp-card p:last-child{margin-bottom:0}
.lp-table{width:100%;border-collapse:collapse;margin:22px 0 28px;font-size:.97rem;display:block;overflow-x:auto}
.lp-table th,.lp-table td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.lp-table th{font-weight:600;color:var(--navy-ink);border-bottom:1px solid var(--ink);background:none}
.lp-table tr:last-child td{border-bottom:0}
.lp-table .yes{color:var(--navy);font-weight:600}
.lp-related{margin-top:14px;font-size:.98rem;color:var(--ink-3)}
.lp-related a{color:var(--navy)}
.lp-related a:hover{color:var(--navy-hover)}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 32px;max-width:calc(var(--wrap));margin:0 auto}
.lp-body .svc-grid{max-width:46rem;grid-template-columns:1fr}
.svc-card{display:block;padding:24px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none;background:none}
.svc-card h3{font-size:1.3rem;color:var(--navy-ink);margin:6px 0 8px}
.svc-card p{font-size:.98rem;color:var(--ink-2);margin:0}
a.svc-card:hover h3{color:var(--navy)}
.svc-top{display:flex;gap:12px;align-items:center}
.svc-tag,.svc-num{font-size:.8rem;font-weight:600;color:var(--ink-3);letter-spacing:.02em;background:none;border:0;padding:0}
.ctaband-wrap{padding:0 var(--gut) clamp(56px,7vw,96px)}
.ctaband{max-width:var(--wrap);margin:0 auto;background:var(--panel);color:var(--ink);border-top:2px solid var(--navy)}
.ctaband::before{display:none}
.ctaband-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 48px;align-items:center;padding:40px}
.ctaband h2{grid-column:1;color:var(--navy-ink);font-size:clamp(1.6rem,1.2rem + 1vw,2rem)}
.ctaband p{grid-column:1;color:var(--ink-2);max-width:40em}
.ctaband .btn{grid-column:2;grid-row:1/span 2;background:var(--navy);color:#fff;border-color:var(--navy)}
.ctaband .btn:hover{background:var(--navy-hover);border-color:var(--navy-hover)}
.legal{max-width:46rem;margin:0 auto;padding:clamp(56px,7vw,96px) var(--gut)}
.legal h1{font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem);margin-bottom:28px}
.legal h2{font-size:1.5rem;margin:40px 0 12px}
.legal p,.legal li{color:var(--ink-2);line-height:1.7}
.legal a{color:var(--navy)}

/* Focus: last in the file so it wins over component outlines */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--navy)!important;outline-offset:3px}
.on-dark a:focus-visible,.on-dark button:focus-visible,.footer a:focus-visible{outline-color:#fff!important}
.form-card :focus-visible{outline:3px solid var(--navy)!important;outline-offset:3px}

/* Responsive */
@media (max-width:1180px){
  .hero-in{flex-direction:column;align-items:flex-start;padding-top:32px;padding-bottom:40px;gap:28px}
  .hero-copy{max-width:40rem}
  .hero-media{width:240px;max-width:240px}
}
@media (max-width:980px){
  .split,.audit-grid,.about-grid,.approach-grid,.svc-group{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;grid-template-areas:"intro" "form" "info";gap:40px 0}
  .contact-info{margin-top:0}
  .split-head{position:static}
  .svc-q{max-width:none;position:static}
  .footer-row{grid-template-columns:1fr 1fr;gap:36px 24px}
  .footer-brand{grid-column:1/-1}
  .footer-links{gap:0}
  .footer-links a{font-size:.875rem;padding:11px 0;min-height:44px;display:flex;align-items:center;line-height:1.3}
  .footer-copy{margin-top:32px}
}
@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 24px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(14,27,46,.25);display:none}
  .nav-links.open{display:flex}
  #navLinks{max-height:calc(100svh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
  .nav .nav-dd-trigger{display:flex;width:100%}
  .nav-links a.navlink,.nav .nav-dd-trigger{padding:14px 0;border-bottom:1px solid var(--line-soft);font-size:1.05rem}
  .lang-btn{padding:14px 0}
  .nav-cta{margin-top:12px;justify-content:center;min-height:50px}
  .nav .nav-dd-menu{border:0;box-shadow:none;padding:4px 0 8px 14px;margin:0;min-width:0;background:none}
  .models{grid-template-columns:1fr}
  .ctaband-inner{grid-template-columns:1fr}
  .ctaband .btn{grid-column:1;grid-row:auto;justify-self:start}
}
@media (max-width:768px){
  :root{--sec:64px}
  .sec-head{margin-bottom:32px}
  .steps{grid-template-columns:1fr;gap:24px}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav-logo .brand-logo{height:31px}
  .hero-actions .btn{width:100%}
  .facts{gap:24px}
  .step{grid-template-columns:1fr}
  .cform-row{grid-template-columns:1fr}
  .about-meta>div{grid-template-columns:1fr;gap:2px}
  .contact-info>div{grid-template-columns:1fr;gap:2px}
  .models-list>div{grid-template-columns:1fr}
  .svc-item h3{font-size:1.25rem}
  .consent-banner{left:12px;right:12px;bottom:12px;max-width:none}
  .consent-actions .btn{flex:1}
  .faq-ans{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Legal pages use a short nav without a menu button: keep language and contact visible on phones */
@media (max-width:860px){
  .nav>.nav-links:not(#navLinks){display:flex;position:static;flex-direction:row;align-items:center;gap:18px;padding:0;border:0;box-shadow:none;background:none}
  .nav>.nav-links:not(#navLinks) .navlink{display:none}
  .nav>.nav-links:not(#navLinks) .nav-cta{margin-top:0;min-height:40px}
  .nav>.nav-links:not(#navLinks) .lang-btn{padding:0}
}
.cform-status:not(:empty){margin-top:14px}

/* ==========================================================================
   2026-09-21 Readability and motion pass.
   Motion needs mc26-motion.js; without it, or with reduced motion, every rule
   below that hides something never applies (it is gated on html.js-motion).
   ========================================================================== */

/* Readability: a calmer measure for running text, links that read as links */
.svc-item p,.step p{max-width:34em}
.faq-ans{max-width:40em;line-height:1.68}
.about-body p{max-width:36em}
.sec-lead{max-width:38em}
.prose a,.faq-ans a,.about-body a{text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.faq-ans a:hover,.about-body a:hover{text-decoration-thickness:2px}
.prose li{line-height:1.7}
::selection{background:#194077;color:#fff}
@media (max-width:560px){
  p,li,dd{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4}
  h1,h2,h3,.svc-q{hyphens:manual;-webkit-hyphens:manual}
  .consent-banner{padding:14px 16px;gap:12px;font-size:.9rem;line-height:1.45;box-shadow:0 16px 40px -22px rgba(14,27,46,.4)}
  .consent-actions .btn{min-height:42px}
}

/* Nav: settles into a hairline with a blur once the page moves */
.nav{transition:background-color .25s,border-color .25s,backdrop-filter .25s}
.nav.is-scrolled{background:rgba(251,251,252,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom-color:var(--line)}
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--navy);transform:scaleX(0);transform-origin:left;pointer-events:none}
.lp-toc a{transition:color .18s}
.lp-toc a.is-current{color:var(--navy);font-weight:600}

/* Small interactions */
.btn,.nav-cta{transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.btn:hover,.nav-cta:hover{transform:translateY(-1px)}
.btn:active,.nav-cta:active{transform:none}
.arrow-link span{transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.arrow-link:hover span{transform:translateX(5px)}
.svc-item h3,.faq-item summary{transition:color .18s}
.svc-item:hover h3,.faq-item summary:hover{color:var(--navy)}

/* FAQ opens instead of snapping (browsers without support keep the instant open) */
:root{interpolate-size:allow-keywords}
.faq-item::details-content{block-size:0;overflow:clip;transition:block-size .38s cubic-bezier(.2,.7,.2,1),content-visibility .38s allow-discrete}
.faq-item[open]::details-content{block-size:auto}

@media (prefers-reduced-motion:no-preference){
  /* Portrait settles into place as the page opens */
  .hero-media img{animation:fade 1s ease-out both,settle 1.7s cubic-bezier(.2,.7,.2,1) both}

  /* Content below the fold rises in once, staggered by the script */
  .js-motion .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js-motion .reveal.is-in{opacity:1;transform:none}

  /* Signature: the section rules draw themselves from the left */
  .js-motion .rule-draw{position:relative;border-top-color:transparent}
  .js-motion .rule-draw::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:inherit}
  .js-motion .step.rule-draw::before{top:-2px;height:2px;background:var(--navy)}
  .js-motion .models.rule-draw::before{background:var(--line)}
  .js-motion .rule-draw.is-in::before{transform:scaleX(1)}
}
@keyframes settle{from{transform:scale(1.045)}to{transform:none}}
@media print{.reveal{opacity:1!important;transform:none!important}.rule-draw{border-top-color:currentColor!important}}
/* Mobile menu: "Leistungen" opens and closes its list (mc26-motion.js sets .dd-js; without JS the list stays open). */
@media (max-width:860px){
  .dd-js .nav .nav-dd-menu{display:none}
  .dd-js .nav .nav-dd.is-open .nav-dd-menu{display:flex}
  .dd-js .nav .nav-dd-trigger{justify-content:space-between;align-items:center}
  .nav .nav-dd:hover .nav-dd-trigger .caret{transform:translateY(-3px) rotate(45deg)}
  .nav .nav-dd.is-open .nav-dd-trigger .caret{transform:translateY(0) rotate(225deg)}
}
/* Readability (24.09.2026): short supporting texts one step larger. */
.step p,.models-lead,.models-list dd,.svc-item p,.about-body p,.faq-ans,.ai-close{font-size:1.125rem;line-height:1.6}
/* Wissen index (24.09.2026): list aligned with the hero, two columns on wide screens. */
main.lp-body:has(> .svc-grid){max-width:calc(var(--wrap) + 2 * var(--gut))!important;margin:0 auto}
main.lp-body > .svc-grid{max-width:none;margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
@media (max-width:860px){main.lp-body > .svc-grid{grid-template-columns:1fr}}
/* Page body aligned with the hero (24.09.2026): text columns start at the same left edge as the H1. */
.lp-body{max-width:calc(var(--wrap) + 2 * var(--gut));margin-left:auto;margin-right:auto}
.lp-body > .prose,.lp-body > .svc-grid,.lp-body > .proj-grid{margin-left:0;margin-right:0}
@media (min-width:980px){
  main.lp-body:has(.lp-toc){max-width:calc(var(--wrap) + 2 * var(--gut))}
}

/* ---------------------------------------------------------------------------
   Team S preview (25.09.2026): homepage "Projekte" section, projekte.php
   overview + case cards, and the case-page facts/figures/chips/photo blocks.
   Reuses existing tokens (--navy, --panel, --line, --r, --serif) only.
--------------------------------------------------------------------------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:var(--wrap);margin:40px auto 0}
.lp-body > .proj-grid{margin-top:0}
.proj-card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
.proj-card:hover{border-color:var(--navy);box-shadow:0 14px 32px -20px rgba(14,27,46,.28)}
.proj-logo{height:30px;width:auto;max-width:170px;object-fit:contain;object-position:left center}
.proj-client{font-size:.85rem;font-weight:600;color:var(--ink-3);letter-spacing:.01em;margin:0}
.proj-figure{font-family:var(--serif);font-size:clamp(2rem,1.6rem + 1.1vw,2.6rem);color:var(--navy-ink);line-height:1;margin:4px 0 0}
.proj-label{font-size:.94rem;color:var(--ink-2);line-height:1.45;margin:0}
.proj-line{font-size:.98rem;color:var(--ink-2);margin:auto 0 0;padding-top:6px}
.proj-cta{font-weight:600;color:var(--navy);display:inline-flex;align-items:center;gap:8px;font-size:.94rem}
.proj-card:hover .proj-cta{color:var(--navy-hover)}
/* 4 cards: 2x2 on desktop instead of 3 + 1 orphan (2026-09-30) */
@media (min-width:981px){.proj-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.proj-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.proj-grid{grid-template-columns:1fr}}

.proj-facts{display:flex;flex-wrap:wrap;gap:10px 40px;margin:0 0 32px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proj-facts dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-3);margin:0}
.proj-facts dd{margin:3px 0 0;font-weight:600;color:var(--navy-ink)}
/* 4 facts: 2x2 instead of 3 + 1 wrapped (2026-09-30) */
@media (min-width:600px){.proj-facts:has(> :nth-child(4):last-child){display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}

.proj-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin:0 0 36px}
.proj-figures .fig-num{font-family:var(--serif);font-size:clamp(1.8rem,1.5rem + .9vw,2.3rem);color:var(--navy-ink);line-height:1;margin:0}
.proj-figures .fig-lbl{margin:8px 0 0;font-size:.94rem;color:var(--ink-2);line-height:1.4}

.proj-quote{border-left:2px solid var(--navy);background:var(--panel);padding:22px 26px;margin:32px 0}
.proj-quote p{font-family:var(--serif);font-size:1.25rem;line-height:1.45;color:var(--navy-ink);margin:0}

.proj-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
.proj-chip{font-size:.82rem;font-weight:600;color:var(--navy);background:var(--panel);border-radius:var(--r);padding:6px 12px}

.proj-photo{margin:32px 0}
.proj-photo img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r)}
.proj-photo figcaption{margin-top:10px;font-size:.86rem;color:var(--ink-3)}
/* Team S case pages: client logo in the hero, spaced link row (2026-09-25 review fixes) */
.proj-hero-logo{display:block;height:34px;width:auto;max-width:220px;object-fit:contain;object-position:left center;margin:0 0 22px}
.proj-links{display:flex;flex-wrap:wrap;gap:14px 32px;margin:28px 0 0}
.proj-gallery{display:grid;gap:24px;margin:28px 0 0}
.proj-gallery .proj-photo{margin:0}
@media (min-width:768px){.proj-gallery-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fixes 2026-09-26: [hidden] alone is not enough to hide the contact form once JS submits it
   successfully, since .cform already carries other display rules that can outrank the UA default. */
.cform[hidden]{display:none}

/* ---------------------------------------------------------------------------
   Improvements 2026-09-30 (v=10): hero bullets and text link (B1), one-line
   service note (B2), short request form on the SEO pages (A5), author box
   under the Wissen articles (A8), mobile hero variant (A14, off by default).
   Tokens only, no new colours.
--------------------------------------------------------------------------- */
.hero-bullets{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px;max-width:31em}
.hero-bullets li{position:relative;padding-left:24px;font-size:1.02rem;line-height:1.45;color:var(--ink)}
.hero-bullets li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:5px;border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(-45deg)}
.hero-sub a{color:var(--navy)}
.lp-hero .lp-sub{font-size:1.15rem;line-height:1.5;color:var(--ink-2);margin:14px 0 22px}
.svc-more{max-width:46rem;margin:28px 0 0;font-size:1.05rem;line-height:1.6;color:var(--ink-2)}
.svc-more .arrow-link{margin-left:10px;white-space:nowrap}

.lp-short{background:var(--panel);border-left:2px solid var(--navy);padding:26px 26px 22px;margin:34px 0 0}
.prose .lp-short h2{margin:0 0 8px;font-size:clamp(1.4rem,1.1rem + .9vw,1.8rem)}
.prose .lp-short p.lead{margin:0 0 18px}
.lp-short .cform .btn{width:auto;justify-self:start;margin-top:2px}
.lp-short .cform-note{text-align:left}
.lp-short .form-success{display:flex;gap:12px;align-items:flex-start;margin-top:6px}
.lp-short .form-success .tick{color:var(--navy);font-weight:600}
.lp-short .form-success p{margin:0}

.author-box{display:flex;gap:20px;align-items:center;margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;border:1px solid var(--line)}
.prose .author-box p{margin:0}
.author-box .author-name{font-weight:600;color:var(--navy-ink);font-size:1.05rem}
.author-box .author-role{margin-top:3px!important;font-size:.95rem;color:var(--ink-2)}
.author-box .author-role a{margin-left:8px;white-space:nowrap}

/* A14: sequential test variant, portrait above the headline on phones. Activate by adding the
   class hero--img-first to <header class="hero"> in index.php; nothing else changes. */
@media (max-width:560px){
  .hero.hero--img-first .hero-media{order:-1}
}