/* =========================================================================
   3ass GmbH — style.css
   Statisch, ohne Build. Farben als Custom Properties, mobile-first Overrides
   in den Media-Queries am Dateiende.
   Schrift bewusst Systemstack (Georgia/Arial): keine Webfonts = keine
   externen Requests = kein DSGVO-Risiko und sofortiges Rendering.
   ========================================================================= */

/* ---------- Reset ---------- */
*, ::before, ::after { box-sizing:border-box; border:0 solid; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; line-height:1.5; }
h1, h2, h3, h4, h5, h6 { font-size:inherit; font-weight:inherit; }
b, strong { font-weight:bolder; }
small { font-size:80%; }
ol, ul, menu { list-style:none; }
img, svg, video, canvas { display:block; vertical-align:middle; }
img, video { max-width:100%; height:auto; }
button, input, select, optgroup, textarea { font:inherit; letter-spacing:inherit; color:inherit; opacity:1; background-color:transparent; border-radius:0; }
button, input:where([type="button"],[type="reset"],[type="submit"]) { -webkit-appearance:button; appearance:button; }
textarea { resize:vertical; }
summary { display:list-item; cursor:pointer; }
table { border-collapse:collapse; }
[hidden] { display:none !important; }

/* Sichtbarer Fokus fuer Tastatur-Navigation (Barrierefreiheit) */
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }

/* Sprungmarke fuer Screenreader/Tastatur */
.skip-link { position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px; background:var(--blue); color:#fff; font-size:14px; font-weight:700; }
.skip-link:focus { left:0; }

:root { --ink:#20252c; --blue:#124f93; --blue-dark:#0b3c74; --gold:#a79d78; --sand:#f1efe7; --muted:#646a70; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:Arial,Helvetica,sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1120px,calc(100% - 40px)); margin-inline:auto; }
.topbar { background:#e9e7df; color:#4d514e; font-size:12px; }
.topbarInner { min-height:30px; display:flex; align-items:center; justify-content:center; gap:64px; }
.topbarInner a,.topbarInner span { display:inline-flex; align-items:center; gap:6px; }
.siteHeader { height:72px; background:rgba(255,255,255,.97); border-bottom:1px solid #eee; position:relative; z-index:5; }
.navRow { height:100%; display:flex; align-items:center; justify-content:space-between; }
.brand img { display:block; width:122px; height:auto; }
nav { display:flex; align-items:center; gap:34px; margin-left:auto; margin-right:42px; }
nav a { height:72px; display:grid; place-items:center; font-size:14px; color:#30343a; position:relative; }
nav a:hover,nav a.active { color:var(--blue); }
nav a.active::after { content:""; position:absolute; height:2px; background:var(--blue); left:0; right:0; bottom:17px; }
.navGroup { height:72px; position:relative; display:flex; align-items:center; }
.navParent { display:flex!important; align-items:center; gap:6px; }
.navChevron { margin-top:-3px; color:#8a8d8c; font-size:14px; transition:transform .2s ease; }
.submenu { min-width:220px; position:absolute; z-index:20; top:64px; left:50%; padding:8px; border:1px solid #e4e1d8; background:rgba(255,255,255,.99); box-shadow:0 16px 38px rgba(25,38,48,.14); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,8px); transition:opacity .18s ease,transform .18s ease,visibility .18s; }
.serviceSubmenu { min-width:270px; }
.submenu::before { content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; background:white; border-left:1px solid #e4e1d8; border-top:1px solid #e4e1d8; transform:translateX(-50%) rotate(45deg); }
.submenu a { width:100%; height:auto!important; min-height:42px; padding:9px 12px; display:flex; align-items:center; justify-content:flex-start; color:#3b4146; font-size:13px; line-height:1.3; border-bottom:1px solid #f0eee8; }
.submenu a:last-child { border-bottom:0; }
.submenu a:hover,.submenu a:focus-visible { color:var(--blue); background:#f4f3ee; outline:none; }
.submenu a::after { display:none!important; }
.navGroup:hover .submenu,.navGroup:focus-within .submenu { opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.navGroup:hover .navChevron,.navGroup:focus-within .navChevron { transform:rotate(180deg); }
.button,.buttonGhost { min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:20px; padding:0 20px; border-radius:2px; border:0; font-size:13px; font-weight:700; cursor:pointer; transition:.2s ease; }
.button { background:var(--blue); color:white; box-shadow:0 4px 14px rgba(18,79,147,.18); }
.button:hover { background:var(--blue-dark); transform:translateY(-1px); }
.headerButton.current { background:var(--blue-dark); box-shadow:0 0 0 3px rgba(18,79,147,.12); }
.buttonGhost { border:1px solid #bdb9a7; background:rgba(255,255,255,.68); }
.buttonGhost:hover { border-color:var(--blue); color:var(--blue); }
.buttonSmall { min-height:38px; padding-inline:17px; font-size:12px; }
.hero { min-height:clamp(410px,34.5vw,520px); display:grid; grid-template-columns:52% 48%; background:#f7f7f4; overflow:hidden; }
.heroCopy { position:relative; display:flex; align-items:center; }
.heroCopy::after { content:""; position:absolute; z-index:1; top:0; right:-180px; width:250px; height:100%; pointer-events:none; background:linear-gradient(90deg,#f7f7f4 0%,rgba(247,247,244,.96) 25%,rgba(247,247,244,.58) 62%,rgba(247,247,244,0) 100%); }
.heroCopyInner { width:min(560px,calc(100% - 60px)); margin-left:max(40px,calc((100vw - 1120px)/2)); position:relative; z-index:2; padding:28px 0 18px; }
.eyebrow { margin:0 0 16px; color:var(--blue); font-weight:800; letter-spacing:.12em; font-size:12px; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
h1 { margin:0; font-size:clamp(42px,4.3vw,64px); line-height:1.02; letter-spacing:-.035em; }
.heroClaim { margin:16px 0 10px; color:var(--gold); font:28px/1.2 Georgia,serif; }
.heroText { max-width:560px; color:var(--muted); font-size:14px; line-height:1.65; }
.heroActions { display:flex; gap:18px; margin-top:18px; }
.trustLine { margin:16px 0 0; color:#666b70; font-size:12px; }
.trustLine span { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:10px; border:1px solid var(--gold); border-radius:50%; color:var(--gold); }
.heroImage { min-width:0; background-image:linear-gradient(90deg,rgba(247,247,244,.32) 0%,rgba(247,247,244,0) 22%),image-set(url('../assets/img/hero-consultation-v2.webp') type('image/webp'), url('../assets/img/hero-consultation-v2.jpg') type('image/jpeg')); background-size:cover; background-position:66% center; background-repeat:no-repeat; }
.metrics { background:var(--sand); border-block:1px solid #e6e2d6; }
.metricsGrid { min-height:94px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
.metric { min-height:58px; display:flex; align-items:center; justify-content:center; gap:16px; border-right:1px solid #d5d1c5; padding:8px 24px; }
.metric:last-child { border-right:0; }
.metricIcon { width:43px; height:43px; flex:0 0 auto; display:grid; place-items:center; border:1px solid #b9b4a2; border-radius:50%; color:#74715f; }
.metricIcon svg { width:21px; height:21px; stroke-width:1.4; }
.metric strong { display:block; white-space:nowrap; font:21px/1.15 Georgia,serif; }
.metric small { display:block; margin-top:4px; color:#626660; font-size:11px; white-space:nowrap; }
.menuButton,.mobileContact { display:none; }
.section { padding:78px 0; }
.altSection { background:#f7f6f2; border-block:1px solid #ece9df; }
.sectionHeading { max-width:760px; margin:0 auto 38px; text-align:center; }
.sectionHeading h2,.featureCopy h2,.contactCard h2,.storyGrid h2,.contactDetails h2,.formPanel h2,.jobsIntro h2,.applicationCta h2 { margin:0; font-size:clamp(34px,4vw,48px); line-height:1.08; letter-spacing:-.025em; }
.sectionHeading p:not(.eyebrow) { color:var(--muted); line-height:1.7; }
.serviceGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.serviceGridWide { grid-template-columns:repeat(3,1fr); }
.serviceCard { min-height:240px; border:1px solid #ddd9cc; background:white; padding:26px 24px; position:relative; display:flex; flex-direction:column; transition:.2s ease; }
.serviceCard:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(29,45,58,.08); border-color:#c8c1a9; }
.cardIcon { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:#efede5; color:#77715d; }
.serviceCard h3 { font-size:18px; line-height:1.25; margin:18px 0 8px; }
.serviceCard p { color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 18px; }
.serviceCard a { margin-top:auto; color:var(--blue); font-size:12px; font-weight:700; }
.focusSection { padding:20px 0 72px; background:linear-gradient(90deg,#f8f7f3,#fff); }
.splitFeature { display:grid; grid-template-columns:1fr 1.18fr; gap:52px; align-items:center; }
.focusImage { min-height:0; aspect-ratio:1.82; border-radius:8px; box-shadow:0 18px 50px rgba(16,28,37,.12); background:image-set(url('../assets/img/justitia-office-v2.webp') type('image/webp'), url('../assets/img/justitia-office-v2.jpg') type('image/jpeg')) 42% center/cover no-repeat; }
.featureCopy h2 { margin-bottom:18px; }
.featureCopy>p:not(.eyebrow) { color:var(--muted); font-size:14px; line-height:1.65; }
.checkList { list-style:none; padding:0; margin:22px 0; display:grid; gap:10px; }
.checkList li { font-size:13px; color:#50565c; }
.checkList li::before { content:'✓'; display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid #b4ad8f; border-radius:50%; color:#8b8367; margin-right:10px; font-size:10px; }
.textLink { color:var(--blue); font-size:13px; font-weight:700; }
.processSection { border-top:1px solid #eceae3; padding-block:56px; }
.processGrid { display:grid; grid-template-columns:repeat(4,1fr); }
.processStep { display:flex; gap:14px; padding:8px 24px; position:relative; }
.processStep:not(:last-child)::after { content:'····→'; position:absolute; right:-18px; top:23px; color:#aaa280; letter-spacing:2px; }
.processStep>span { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#e9e6dc; font:24px Georgia,serif; }
.processStep h3 { font:700 13px Arial,sans-serif; margin:4px 0 5px; }
.processStep p { color:var(--muted); font-size:11px; line-height:1.45; margin:0; }
.testimonialContact { border-top:1px solid #e8e6de; background:linear-gradient(90deg,#fff 0,#fff 52%,#f1efe8 52%,#f1efe8 100%); }
.testimonialGrid { display:grid; grid-template-columns:1.05fr .95fr; }
.testimonialGrid>div { padding:58px 42px 58px 0; }
.testimonialGrid>.contactCard { padding-left:42px; padding-right:0; }
.quotes { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
blockquote { margin:8px 0 0; color:#555c62; font:14px/1.65 Georgia,serif; }
blockquote::before { content:'“'; display:block; color:var(--gold); font-size:36px; line-height:1; }
blockquote cite { display:block; color:#222932; margin-top:20px; font:700 12px Arial,sans-serif; }
blockquote small { color:#747a7f; font-weight:400; }
.compactForm { margin-top:18px; }
.compactForm label:nth-child(3),.compactForm label:nth-child(4){display:none}
.compactForm .check { font-size:10px; }
.pageHero { background:linear-gradient(90deg,#f5f4ef 0%,#f8f7f3 52%,#f2f0e8 100%); overflow:hidden; }
.pageHeroGrid { width:100%; max-width:none; min-height:clamp(410px,34.5vw,520px); margin:0; display:grid; grid-template-columns:52% 48%; align-items:center; gap:0; }
.pageHeroGrid>div:first-child { width:min(560px,calc(100% - 60px)); margin-left:max(40px,calc((100vw - 1120px)/2)); padding:28px 54px 28px 0; position:relative; z-index:2; }
.pageHero h1 { font-size:clamp(46px,5.8vw,72px); line-height:1.02; letter-spacing:-.035em; margin:0 0 22px; }
.pageHero p:not(.eyebrow) { color:var(--muted); max-width:570px; line-height:1.7; font-size:15px; }
.pageHeroImage { height:100%; min-height:clamp(410px,34.5vw,520px); background-position:center; background-size:cover; background-repeat:no-repeat; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 9%,#000 25%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.4) 9%,#000 25%); }
.footerCta { position:relative; overflow:hidden; background-image:linear-gradient(90deg,rgba(241,237,227,.98) 0%,rgba(241,237,227,.96) 48%,rgba(241,237,227,.56) 66%,rgba(241,237,227,0) 82%),image-set(url('../assets/img/contact-interior-v2.webp') type('image/webp'), url('../assets/img/contact-interior-v2.jpg') type('image/jpeg')); background-position:center; background-size:cover; background-repeat:no-repeat; }
.footerCtaGrid { min-height:260px; display:grid; grid-template-columns:1fr .65fr .55fr; align-items:center; gap:36px; }
.footerCta h2 { font:42px/1.05 Georgia,serif; margin:0 0 12px; }
.footerCta p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.6; }
.footerContact { display:flex; flex-direction:column; gap:14px; align-items:flex-start; font-size:13px; }
.footerContact>a:not(.button) { display:flex; align-items:center; gap:10px; }
.footerContact .button { margin-top:8px; }
.plantArt { width:100%; height:210px; align-self:end; }
.footerBase { background:#e3e0d6; border-top:1px solid #d2cec0; }
.footerGrid { min-height:110px; display:grid; grid-template-columns:1.2fr .8fr 1fr 1.15fr 1.1fr; gap:30px; align-items:center; font-size:11px; }
.footerGrid>div { display:flex; flex-direction:column; gap:6px; color:#5f645f; }
.footerGrid strong { color:#30343a; }
.legalLinks { flex-direction:row!important; justify-content:flex-end; gap:28px!important; }
.subpageMetrics { background:#eeece4; border-block:1px solid #dedacf; }
.subpageMetricsGrid { min-height:110px; display:grid; grid-template-columns:repeat(4,1fr); align-items:center; }
.subpageMetricsGrid>div { min-height:64px; padding:10px 24px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #d4d0c3; }
.subpageMetricsGrid>div:last-child { border-right:0; }
.subpageMetricsGrid strong { color:var(--blue); font:30px/1 Georgia,serif; }
.subpageMetricsGrid span { margin-top:7px; color:var(--muted); font-size:11px; }
.storyGrid,.jobsIntro { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; }
.prose p,.legalProse p { color:var(--muted); line-height:1.75; margin-top:0; }
.leadershipGrid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.portraitPanel { background:white; border:1px solid #dfdbcf; padding:18px; box-shadow:0 18px 45px rgba(28,40,48,.08); }
.portraitImage { min-height:0; aspect-ratio:1.38; overflow:hidden; background:#e9e6dc; }
.portraitImage img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 26%; }
.portraitPanel>div:last-child { display:flex; justify-content:space-between; gap:15px; padding:18px 6px 2px; }
.portraitPanel span { color:var(--muted); font-size:12px; }
.threeGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.infoCard { padding:32px; background:#f6f4ee; border-top:2px solid var(--blue); }
.infoCard>span { color:var(--gold); font:24px Georgia,serif; }
.infoCard h3 { font-size:22px; margin:30px 0 12px; }
.infoCard p { color:var(--muted); line-height:1.6; font-size:13px; }
.servicePromise { margin-top:54px; padding:42px 46px; display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; background:#f0eee6; border-left:3px solid var(--blue); }
.servicePromise h2 { margin:0; font-size:34px; line-height:1.12; }
.servicePromise p { color:var(--muted); line-height:1.7; margin-top:0; }
.inlineActions { display:flex; gap:14px; align-items:center; margin-top:22px; }
.offerCards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.offerCard { padding:28px; background:white; border:1px solid #dedacd; display:flex; gap:20px; min-height:210px; transition:.2s; }
.offerCard:hover { border-color:var(--blue); transform:translateY(-3px); }
.offerCard>span { width:46px; height:46px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; background:#ece9df; color:#77715d; }
.offerCard h3 { font-size:22px; margin:4px 0 12px; }
.offerCard p { color:var(--muted); font-size:13px; line-height:1.6; }
.offerCard strong { color:var(--blue); font-size:12px; }
.serviceFocus { grid-template-columns:1fr .8fr; }
.serviceQuote { padding:46px; background:var(--blue-dark); color:white; min-height:300px; display:flex; flex-direction:column; justify-content:center; }
.serviceQuote span { color:#b7ad82; font:80px/1 Georgia,serif; }
.serviceQuote p { font:30px/1.3 Georgia,serif; margin:0; }
.professionalSection { background:#f7f5ef; border-block:1px solid #e6e2d6; }
.professionalImage { min-height:360px; border-radius:8px; background:image-set(url('../assets/img/justitia-office-v2.webp') type('image/webp'), url('../assets/img/justitia-office-v2.jpg') type('image/jpeg')) 42% center/cover no-repeat; box-shadow:0 18px 50px rgba(16,28,37,.12); }
.processBand { padding:64px 0 70px; background:#f2f0e8; border-top:1px solid #dfdbcf; }
.benefitsSection { padding:70px 0; background:#f4f2eb; border-block:1px solid #e3dfd3; }
.benefitGrid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.benefitGrid article { min-height:210px; padding:28px 24px; background:white; border:1px solid #dfdbcf; }
.benefitGrid article>span { color:var(--gold); font:22px Georgia,serif; }
.benefitGrid h3 { margin:26px 0 10px; font-size:20px; }
.benefitGrid p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
.leftHeading { text-align:left; margin-left:0; }
.jobList { display:grid; gap:16px; }
.jobList article { background:white; border:1px solid #ddd9cc; padding:28px 30px; display:flex; justify-content:space-between; gap:30px; align-items:center; }
.jobList article>div>span { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.08em; }
.jobList h3 { font-size:24px; margin:9px 0; }
.jobList p { color:var(--muted); margin:0; font-size:13px; }
.applicationCta { padding:34px 40px; background:#f0eee6; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.applicationCta p { color:var(--muted); }
.applicationCta a:not(.button) { color:var(--blue); }
.applicationSteps { margin-bottom:26px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid #dedacd; background:white; }
.applicationSteps>div { padding:26px; border-right:1px solid #dedacd; }
.applicationSteps>div:last-child { border-right:0; }
.applicationSteps span { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--blue); font:16px Georgia,serif; }
.applicationSteps strong { display:block; margin:17px 0 7px; }
.applicationSteps p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; }
.contactLayout { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.contactDetails { padding-top:10px; }
.contactDetail { display:flex; gap:18px; padding:20px 0; border-bottom:1px solid #e3e0d7; }
.contactDetail>span { width:42px; height:42px; display:grid; place-items:center; background:#efede6; border-radius:50%; color:#77705c; }
.contactDetail strong { display:block; margin-bottom:6px; }
.contactDetail p { margin:0; color:var(--muted); }
.detailLink { display:inline-block; margin-top:8px; color:var(--blue); font-size:12px; font-weight:700; }
.officeHours { margin-top:26px; padding:22px; border:1px solid #dedacd; }
.officeHours>strong { display:block; margin-bottom:14px; }
.officeHours>div { display:grid; grid-template-columns:1fr auto; gap:9px 24px; color:var(--muted); font-size:12px; }
.officeHours b { color:#3c4248; font-weight:600; }
.formIntro { color:var(--muted); font-size:13px; line-height:1.6; margin:12px 0 22px; }
.officeNote { margin-top:28px; padding:22px; background:#f2f0e9; }
.officeNote p { color:var(--muted); line-height:1.6; font-size:13px; margin-bottom:0; }
.formPanel { padding:38px; border:1px solid #ddd9cc; box-shadow:0 20px 50px rgba(25,40,52,.06); }
.formGrid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.formGrid label { display:flex; flex-direction:column; gap:8px; color:#3e444a; font-size:12px; font-weight:700; }
.formGrid .full { grid-column:1/-1; }
input,select,textarea { width:100%; border:1px solid #d8d4c9; background:#fbfbf9; border-radius:2px; padding:12px 13px; color:#20252c; font:14px Arial,sans-serif; outline:none; }
textarea { resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(18,79,147,.08); }
.check { flex-direction:row!important; align-items:flex-start; line-height:1.5; font-weight:400!important; }
.check input { width:16px; height:16px; margin-top:2px; }
.check a { color:var(--blue); text-decoration:underline; }
.formButton { min-width:200px; }
.successBox { padding:38px; text-align:center; background:#f1f4ee; border:1px solid #d7dfce; }
.successBox>span { width:52px; height:52px; display:grid; place-items:center; margin:0 auto 14px; background:#658152; color:white; border-radius:50%; font-size:24px; }
.successBox h3 { font-size:26px; margin:0 0 12px; }
.successBox p { color:var(--muted); line-height:1.6; }
.letterGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.letterGrid a { display:flex; align-items:center; gap:18px; padding:20px; border:1px solid #dfdbcf; transition:.2s; }
.letterGrid a:hover { border-color:var(--blue); background:#f8f8f5; }
.letterGrid a>span { width:44px; height:44px; display:grid; place-items:center; background:#eae7de; color:#766e54; font-size:10px; font-weight:800; }
.letterGrid a>div { display:flex; flex-direction:column; gap:5px; flex:1; }
.letterGrid small { color:var(--muted); }
.letterGrid b { color:var(--blue); }
.recentLetter { margin-bottom:70px; padding:44px 48px; display:flex; align-items:center; justify-content:space-between; gap:50px; background:linear-gradient(110deg,#ece9df 0%,#f8f7f3 65%,#e5e1d5 100%); border-left:3px solid var(--blue); }
.recentLetter h2 { margin:0 0 12px; font-size:42px; }
.recentLetter p:not(.eyebrow) { margin:0; max-width:660px; color:var(--muted); line-height:1.65; }
.archiveHeading { margin-bottom:32px; }
.offerSection { background:#f8f7f3; }
.offerLayout { display:grid; grid-template-columns:.56fr 1.44fr; gap:46px; align-items:start; }
.offerLayout>aside { position:sticky; top:28px; background:#ebe8df; padding:30px; }
.offerLayout aside h2 { font-size:32px; margin:0 0 26px; }
.sideSteps { list-style:none; margin:0; padding:0; display:grid; gap:20px; }
.sideSteps li { display:flex; gap:13px; }
.sideSteps li>span { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:white; color:var(--blue); font:17px Georgia,serif; }
.sideSteps p { color:var(--muted); font-size:12px; line-height:1.5; margin:5px 0 0; }
.privacyNote { padding-top:22px; margin-top:24px; border-top:1px solid #d5d0c2; }
.privacyNote p { color:var(--muted); font-size:12px; line-height:1.6; }
.offerForm { display:grid; gap:22px; }
.offerForm fieldset { border:1px solid #ddd9cc; background:white; padding:28px; margin:0; }
.offerForm legend { display:flex; align-items:center; gap:13px; padding:0 14px 0 0; font:26px Georgia,serif; }
.offerForm legend span { width:34px; height:34px; display:grid; place-items:center; background:var(--blue); color:white; border-radius:50%; font:16px Arial,sans-serif; }
.offerSuccess { background:white; padding-block:70px; }
.legalHero { background:#efede6; padding:74px 0; }
.legalHero h1 { margin:0; font-size:64px; }
.legalLayout { display:grid; grid-template-columns:.5fr 1.5fr; gap:70px; align-items:start; }
.legalLayout>aside { display:flex; flex-direction:column; gap:10px; padding:24px; background:#f1efe8; font-size:13px; position:sticky; top:30px; }
.legalLayout>aside a { color:var(--blue); }
.legalProse h2 { font-size:27px; margin:38px 0 12px; }
.legalProse h2:first-child { margin-top:0; }
.legalProse p { font-size:14px; }
@media (max-width:900px) {
  .topbarInner{gap:18px;justify-content:space-between}.topbarInner span{display:none}nav{gap:18px;margin-right:20px}.buttonSmall{display:none}
  .hero{grid-template-columns:1fr}.heroCopy{min-height:470px}.heroCopy::after{display:none}.heroCopyInner{width:min(100% - 40px,700px);margin-inline:auto}.heroCopy h1{font-size:clamp(44px,7.2vw,56px)}.heroImage{min-height:360px;background-size:cover;background-position:68% center}.metricsGrid{grid-template-columns:repeat(2,1fr);padding-block:12px}.metric:nth-child(2){border-right:0}
  .serviceGrid{grid-template-columns:repeat(2,1fr)}.serviceGridWide{grid-template-columns:1fr}.splitFeature,.leadershipGrid,.serviceFocus{grid-template-columns:1fr;gap:36px}.processGrid{grid-template-columns:1fr 1fr;gap:20px}.processStep:nth-child(2)::after{display:none}
  .pageHeroGrid{grid-template-columns:1fr;padding-top:58px}.pageHeroGrid>div:first-child{width:min(100% - 40px,700px);margin-inline:auto;padding:0}.pageHeroImage{min-height:340px;-webkit-mask-image:none;mask-image:none}.testimonialGrid{grid-template-columns:1fr}.testimonialContact{background:#fff}.testimonialGrid>.contactCard{padding-left:0;border-top:1px solid #ddd9cc}.footerCta{background-position:72% center}.footerCtaGrid{grid-template-columns:1fr 1fr}.plantArt{display:none}.footerGrid{grid-template-columns:repeat(2,1fr);padding-block:25px}.legalLinks{justify-content:flex-start}.storyGrid,.jobsIntro,.contactLayout,.legalLayout,.offerLayout,.servicePromise{grid-template-columns:1fr;gap:40px}.offerLayout>aside,.legalLayout>aside{position:static}.offerCards,.threeGrid{grid-template-columns:1fr}.offerCard{min-height:auto}.subpageMetricsGrid,.benefitGrid{grid-template-columns:repeat(2,1fr)}.subpageMetricsGrid>div:nth-child(2){border-right:0}.applicationSteps{grid-template-columns:1fr}.applicationSteps>div{border-right:0;border-bottom:1px solid #dedacd}.applicationSteps>div:last-child{border-bottom:0}
}
@media (max-width:640px) {
  .shell{width:min(100% - 28px,1120px)}.topbar{display:none}.siteHeader,nav a{height:64px}.brand img{width:95px}.headerButton{display:none}.menuButton{display:grid;place-items:center;width:40px;height:40px;border:0;background:#f0eee8;color:var(--blue);font-size:23px;cursor:pointer}
  nav{display:none;position:absolute;top:64px;left:0;right:0;margin:0;padding:12px 18px 20px;background:white;border-top:1px solid #eee;box-shadow:0 14px 25px rgba(20,30,40,.12)}nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}nav a{height:48px;display:flex;justify-content:flex-start;border-bottom:1px solid #eee}nav a.active::after{display:none}.navGroup{height:auto;display:block}.navGroup>.navParent{height:48px}.navChevron{margin-left:auto}.submenu,.serviceSubmenu{min-width:0;position:static;opacity:1;visibility:visible;pointer-events:auto;transform:none!important;padding:4px 0 8px;margin:0;border:0;border-bottom:1px solid #e8e5dc;background:#f7f6f2;box-shadow:none}.submenu::before{display:none}.submenu a{min-height:40px;height:40px!important;padding:7px 14px 7px 24px;border-bottom:0;color:#555c62;font-size:12px}.mobileContact{display:flex!important;color:white!important;background:var(--blue);justify-content:center!important;margin-top:12px;border:0!important}
  .heroCopyInner{width:calc(100% - 28px);margin-inline:14px;padding-block:48px}h1,.heroCopy h1{font-size:41px}.heroClaim{font-size:24px}.heroActions{flex-direction:column;align-items:stretch}.heroImage{min-height:300px;background-size:cover;background-position:70% center}.metricsGrid{grid-template-columns:1fr}.metric,.metric:nth-child(2){justify-content:flex-start;border-right:0;border-bottom:1px solid #d5d1c5}.metric:last-child{border-bottom:0}
  .section{padding:58px 0}.serviceGrid,.processGrid{grid-template-columns:1fr}.processStep::after{display:none!important}.quotes{grid-template-columns:1fr}.testimonialGrid>div{padding:48px 0}.formGrid,.letterGrid{grid-template-columns:1fr}.footerCta{background-image:linear-gradient(rgba(241,237,227,.94),rgba(241,237,227,.94)),image-set(url('../assets/img/contact-interior-v2.webp') type('image/webp'), url('../assets/img/contact-interior-v2.jpg') type('image/jpeg'));background-position:75% center}.footerCtaGrid{grid-template-columns:1fr;padding-block:48px}.footerGrid{grid-template-columns:1fr}.footerCta h2{font-size:36px}.pageHeroGrid{padding-top:44px;gap:28px}.pageHeroGrid>div:first-child{width:calc(100% - 28px)}.pageHero h1{font-size:46px}.pageHeroImage{min-height:260px;margin:0}.sectionHeading h2,.featureCopy h2,.contactCard h2,.storyGrid h2,.contactDetails h2,.formPanel h2,.jobsIntro h2,.applicationCta h2{font-size:34px}.focusImage{min-height:280px}.jobList article,.applicationCta,.recentLetter{flex-direction:column;align-items:flex-start}.jobList .buttonGhost{width:100%}.formPanel,.offerForm fieldset{padding:22px}.legalHero h1{font-size:48px}.legalHero{padding:50px 0}.serviceQuote{padding:32px}.serviceQuote p{font-size:25px}.subpageMetricsGrid,.benefitGrid{grid-template-columns:1fr}.subpageMetricsGrid>div{border-right:0;border-bottom:1px solid #d4d0c3}.subpageMetricsGrid>div:last-child{border-bottom:0}.servicePromise,.recentLetter{padding:30px 24px}.inlineActions{flex-direction:column;align-items:stretch}.recentLetter{gap:22px}.recentLetter h2{font-size:35px}.professionalImage{min-height:280px}
}


/* =========================================================================
   Ergaenzungen der statischen Fassung
   ========================================================================= */

/* ---------- Aktiver Navigationspunkt ----------
   Ersetzt die frueher per JavaScript gesetzte "active"-Klasse: jede Seite
   traegt ein data-page-Attribut am <body>, die Markierung passiert rein in CSS.
   So bleibt der Header EIN einziges SSI-Include fuer alle Seiten.            */
body[data-page="start"]     .nav-start,
body[data-page="ueber-uns"] .nav-ueber-uns,
body[data-page="service"]   .nav-service,
body[data-page="stellen"]   .nav-stellen { color:var(--blue); }

body[data-page="start"]     .nav-start::after,
body[data-page="ueber-uns"] .nav-ueber-uns::after,
body[data-page="service"]   .nav-service::after,
body[data-page="stellen"]   .nav-stellen::after {
  content:""; position:absolute; height:2px; background:var(--blue); left:0; right:0; bottom:17px;
}
body[data-page="kontakt"] .headerButton { background:var(--blue-dark); box-shadow:0 0 0 3px rgba(18,79,147,.12); }

/* ---------- Absatz-Abstaende ----------
   In der Vorlage hatten aufeinanderfolgende <p> keinerlei Abstand (globaler
   margin:0 aus dem Reset, ohne Gegenregel) — mehrere Absaetze verschmolzen
   optisch zu einer Textwand. Hier korrigiert.                                */
.prose p + p,
.legalProse p + p,
.featureCopy p + p,
.jobsIntro p + p,
.servicePromise p + p,
.officeNote p + p,
.privacyNote p + p { margin-top:16px; }

/* ---------- FAQ (AEO / Zitierbarkeit in KI-Antworten) ---------- */
.faqSection { background:#f7f6f2; border-block:1px solid #ece9df; }
.faqList { max-width:860px; margin-inline:auto; display:grid; gap:12px; }
.faqList details { background:white; border:1px solid #ddd9cc; transition:border-color .2s ease; }
.faqList details[open] { border-color:#c8c1a9; }
.faqList summary { list-style:none; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; gap:20px; font:20px/1.35 Georgia,serif; color:#20252c; }
.faqList summary::-webkit-details-marker { display:none; }
.faqList summary::after { content:"+"; flex:0 0 auto; width:26px; height:26px; display:grid; place-items:center; border:1px solid #b9b4a2; border-radius:50%; color:#77715d; font:16px Arial,sans-serif; transition:transform .2s ease; }
.faqList details[open] summary::after { content:"\2212"; transform:rotate(180deg); }
.faqList summary:hover { color:var(--blue); }
.faqList .faqAnswer { padding:0 26px 24px; color:var(--muted); font-size:14px; line-height:1.7; }
.faqList .faqAnswer p + p { margin-top:14px; }

/* ---------- Formulare: Honeypot + Statusmeldungen ---------- */
.hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.formError { margin-bottom:22px; padding:16px 18px; background:#fbf0ee; border-left:3px solid #a8443a; color:#7c322b; font-size:13px; line-height:1.6; }
.formError strong { display:block; margin-bottom:4px; }

/* ---------- Danke- und Fehlerseite ---------- */
.statusPage { padding:96px 0 104px; text-align:center; }
.statusPage .statusIcon { width:64px; height:64px; display:grid; place-items:center; margin:0 auto 26px; border-radius:50%; background:#658152; color:white; font-size:30px; }
.statusPage h1 { font-size:clamp(38px,4.4vw,56px); margin-bottom:18px; }
.statusPage p { max-width:600px; margin-inline:auto; color:var(--muted); line-height:1.7; }
.statusPage p + p { margin-top:14px; }
.statusActions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* ---------- Kleinigkeiten ---------- */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.metricIcon svg, .cardIcon svg, .contactDetail > span svg, .offerCard > span svg { width:21px; height:21px; stroke-width:1.4; }
.offerCard > span svg { width:22px; height:22px; }
.topbarInner svg { width:13px; height:13px; stroke-width:1.7; flex:0 0 auto; }
.footerContact svg { width:15px; height:15px; stroke-width:1.6; flex:0 0 auto; }
.contactDetail > span svg { width:20px; height:20px; stroke-width:1.5; }
.menuButton svg { width:22px; height:22px; stroke-width:1.8; }
.brand img { width:122px; height:auto; }
.serviceGridWide .serviceCard { min-height:auto; }
.letterGrid a.pending { opacity:.55; pointer-events:none; }
.letterGrid a.pending b { color:var(--muted); }

@media (max-width:640px) {
  .faqList summary { padding:18px 20px; font-size:18px; }
  .faqList .faqAnswer { padding:0 20px 20px; }
  .statusPage { padding:64px 0 72px; }

  /* Im aufgeklappten Mobilmenue steht der Unterstrich quer ueber die volle
     Breite. Deshalb dort nur die Textfarbe als Markierung — wie im Original. */
  body[data-page="start"]     .nav-start::after,
  body[data-page="ueber-uns"] .nav-ueber-uns::after,
  body[data-page="service"]   .nav-service::after,
  body[data-page="stellen"]   .nav-stellen::after { display:none; }
}