/* clary.ON Theme · Grundlage: freigegebener Entwurf (entwurf/index.html, Stand 20.10.2026) und DESIGN.md */
:root{
  color-scheme:light;
  /* [BRAND] Farben */
  --clary-forest:#21423C; --clary-lime:#A5DC77; --clary-sage:#99C2BA; --clary-coral:#EB5D48; --clary-white:#FFFFFF;
  /* [DERIVED] / [PROPOSED] */
  --clary-moss:#648F5A; --clary-forest-raised:#2F514A; --clary-forest-deep:#17302B; --clary-forest-80:#4D6863;
  --clary-sage-100:#E3EEEB; --clary-sage-50:#F2F7F5; --clary-coral-ink:#B8402D; --clary-coral-light:#F4907F;
  --clary-on-brand-muted:#C9D6D3; --clary-line-subtle:rgba(33,66,60,.14); --clary-line-on-brand:rgba(255,255,255,.18);
  /* Schrift */
  --font-display:'finalsix','Montserrat',system-ui,sans-serif; --font-text:'Montserrat',system-ui,sans-serif;
  --weight-display:900; --weight-body:400; --weight-body-light:300; --weight-emphasis:600; --weight-label:500;
  --type-display-xl:clamp(2.5rem,5.75vw,6rem); --type-display-l:clamp(2rem,4.1vw,3.875rem); --type-display-m:clamp(1.625rem,2.75vw,2.5rem);
  --type-statement:clamp(1.25rem,2vw,1.875rem); --type-lead:clamp(1.125rem,1.4vw,1.375rem); --type-body:1.0625rem;
  --type-small:.9375rem; --type-label:.875rem; --type-micro:.75rem; --type-tagline:clamp(1.25rem,2vw,1.75rem);
  --leading-display:1.1; --leading-statement:1.28; --leading-body:1.6; --leading-label:1.35;
  --tracking-statement:.01em; --tracking-body:.015em; --tracking-label:.08em;
  --measure-body:62ch; --measure-lead:48ch;
  /* Abstand, Raster, Form */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --gap-couple:var(--space-2); --gap-related:clamp(16px,1.6vw,24px); --gap-group:clamp(40px,4.5vw,64px);
  --gap-block:clamp(72px,8vw,128px); --gap-section:clamp(112px,13vw,240px);
  --page-margin:clamp(20px,6.25vw,120px); --grid-gutter:clamp(16px,2vw,32px); --content-max:1440px;
  --radius-none:0; --radius-full:9999px;
  --ease-settle:cubic-bezier(.22,1,.36,1); --dur-quick:180ms;
  /* Rollen-Variablen, Standard = heller Grund */
  --on-ground:var(--clary-sage-50); --on-text:var(--clary-forest); --on-muted:var(--clary-forest-80); --on-label:var(--clary-coral-ink);
  --on-accent:var(--clary-forest); --on-line:var(--clary-line-subtle); --on-panel:var(--clary-sage-100); --on-ring:var(--clary-forest);
}
.ground--forest{--on-ground:var(--clary-forest);--on-text:var(--clary-white);--on-muted:var(--clary-on-brand-muted);--on-label:var(--clary-coral-light);--on-accent:var(--clary-lime);--on-line:var(--clary-line-on-brand);--on-panel:var(--clary-forest-raised);--on-ring:var(--clary-lime)}
.ground--deep{--on-ground:var(--clary-forest-deep);--on-text:var(--clary-white);--on-muted:var(--clary-on-brand-muted);--on-label:var(--clary-coral-light);--on-accent:var(--clary-lime);--on-line:var(--clary-line-on-brand);--on-panel:var(--clary-forest);--on-ring:var(--clary-lime)}
.ground--sage{--on-ground:var(--clary-sage);--on-text:var(--clary-forest);--on-muted:var(--clary-forest);--on-label:var(--clary-forest);--on-accent:var(--clary-forest);--on-line:rgba(33,66,60,.25);--on-panel:var(--clary-sage-100);--on-ring:var(--clary-forest)}
.ground--lime{--on-ground:var(--clary-lime);--on-text:var(--clary-forest);--on-muted:var(--clary-forest);--on-label:var(--clary-forest);--on-accent:var(--clary-forest);--on-line:rgba(33,66,60,.3);--on-panel:var(--clary-lime);--on-ring:var(--clary-forest)}
.ground--paper{--on-ground:var(--clary-sage-50)}
.ground--sage-light{--on-ground:var(--clary-sage-100);--on-text:var(--clary-forest);--on-muted:var(--clary-forest-80);--on-label:var(--clary-coral-ink);--on-accent:var(--clary-forest);--on-line:rgba(33,66,60,.2);--on-panel:var(--clary-white);--on-ring:var(--clary-forest)}
/* Labels auf Salbei hell: Coral-Ink (4.7:1), größer und kräftiger, damit sie neben fetten Leads bestehen */
.ground--sage-light .label{font-size:16px;font-weight:600}
.ground--forest,.ground--deep,.ground--sage,.ground--sage-light,.ground--lime,.ground--paper{background:var(--on-ground);color:var(--on-text)}

*{box-sizing:border-box}
body{margin:0;background:var(--clary-sage-50);color:var(--clary-forest);font-family:var(--font-text);font-size:var(--type-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;
  /* Globale Silbentrennung (WordPress setzt lang="de-DE" bzw. "en-US").
     Nur Wörter ab 10 Zeichen, mind. 4 Zeichen vor und nach dem Trennstrich. Display-Typo trennt nur an weichen Trennstrichen (U+00AD in den Texten). */
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:10 4 4}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{color:var(--on-label)}
:focus-visible{outline:2px solid var(--clary-lime);outline-offset:2px;box-shadow:0 0 0 2px var(--clary-forest)}
b,strong{font-weight:var(--weight-emphasis)}

/* ---------- Layout ---------- */
.section{padding-block:var(--gap-block);padding-left:max(var(--page-margin),env(safe-area-inset-left,0px));padding-right:max(var(--page-margin),env(safe-area-inset-right,0px));position:relative;overflow:hidden}
.container{max-width:var(--content-max);margin-inline:auto;display:flex;flex-direction:column;gap:var(--gap-block)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gutter);row-gap:var(--gap-group)}
.stack{display:flex;flex-direction:column;gap:var(--gap-related);min-width:0}
.stack--couple{gap:var(--gap-couple)} .stack--group{gap:var(--gap-group)}
.inset{padding-left:calc((100% + var(--grid-gutter)) / 12)}  /* Text eine Spalte eingerückt (linke Spine) */
@media (max-width:900px){.inset{padding-left:0}}

/* ---------- Typografie ---------- */
.display-xl,.display-l,.display-m{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;line-height:var(--leading-display);letter-spacing:0;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word}
.display-xl{font-size:var(--type-display-xl)} .display-l{font-size:var(--type-display-l)} .display-m{font-size:var(--type-display-m)}
.statement{font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--type-statement);line-height:var(--leading-statement);letter-spacing:var(--tracking-statement);max-width:40ch;text-wrap:balance}
.accent{color:var(--on-accent)}
.label{font-size:var(--type-label);font-weight:var(--weight-label);text-transform:uppercase;letter-spacing:var(--tracking-label);line-height:var(--leading-label);color:var(--on-label)}
.label--plain{color:var(--on-text)}
.lead{font-size:var(--type-lead);line-height:1.5;max-width:var(--measure-lead)}
.body{max-width:var(--measure-body)}
.body-s{font-size:var(--type-small);max-width:var(--measure-body)}
.muted{color:var(--on-muted)}
.tagline{font-weight:300;font-size:var(--type-tagline);letter-spacing:.01em;line-height:1.1}
.numeral{font-family:var(--font-text);font-weight:900;line-height:.8;font-variant-numeric:tabular-nums;color:var(--clary-moss);font-size:var(--type-display-l)}

/* ---------- Aktionen ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-text);font-weight:600;font-size:.8125rem;letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;padding:14px 26px;border-radius:var(--radius-full);border:0;text-decoration:none;cursor:pointer;transition:background var(--dur-quick) var(--ease-settle),color var(--dur-quick) var(--ease-settle)}
.btn--lg{padding:18px 32px;font-size:.9375rem}
.btn--primary{background:var(--clary-lime);color:var(--clary-forest)} .btn--primary:hover{background:var(--clary-white);color:var(--clary-forest)}
.btn--dark{background:var(--clary-forest);color:var(--clary-white)} .btn--dark:hover{background:var(--clary-forest-deep);color:var(--clary-lime)}
.btn--outline{background:transparent;color:var(--on-text);border:1.5px solid currentColor} .btn--outline:hover{color:var(--on-label)}
.btn--text{padding:6px 0;background:transparent;color:var(--on-text);text-decoration:underline;text-underline-offset:.35em}
.btn--text:hover{color:var(--on-label)}
.btn .icon{width:18px;height:18px}
.btn--primary:active,.btn--dark:active{filter:brightness(.94)}
.social{display:inline-flex;align-items:center;color:var(--on-text)} .social .icon{width:24px;height:24px} .social:hover{color:var(--on-accent)}
.actions{display:flex;flex-wrap:wrap;gap:var(--gap-related);align-items:center}

/* ---------- Flächen ---------- */
.plane{width:100%;height:auto;object-fit:cover;border-radius:var(--radius-none);background:var(--on-panel)}
.panel{background:var(--on-panel);padding:clamp(24px,3vw,48px);border-radius:var(--radius-none)}
.icon{width:24px;height:24px;flex:none;stroke:currentColor;fill:none}
.icon--feature{width:40px;height:40px;color:var(--on-text)}

/* ---------- Bausteine ---------- */
/* Komponente .wordband: Begriffe in Statement-Typo, jeder mit eigenem Ring-Marker (bricht sauber um) */
.wordband{list-style:none;padding:0;display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-5);row-gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--type-statement);line-height:var(--leading-statement);letter-spacing:var(--tracking-statement)}
.wordband{display:grid;grid-template-columns:repeat(3,max-content);column-gap:var(--space-5);row-gap:var(--space-3)}
@media (max-width:900px){.wordband{grid-template-columns:repeat(2,max-content)}}
@media (max-width:560px){.wordband{grid-template-columns:1fr}}
.wordband li{display:flex;align-items:center;gap:var(--space-3)}
.wordband li::before{content:"";flex:none;width:.5em;height:.5em;border-radius:50%;border:.13em solid var(--on-ring)}
.ring-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.ring-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:var(--space-3);align-items:start}
.ring-list li::before{content:"";width:14px;height:14px;margin-top:.38em;border-radius:50%;border:3.5px solid var(--on-ring)}
.faq{display:flex;flex-direction:column}
.faq details{border-top:1px solid var(--on-line)}
.faq details:last-of-type{border-bottom:1px solid var(--on-line)}
.faq summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:var(--space-4);padding:var(--space-4) 0;font-weight:var(--weight-emphasis);font-size:var(--type-small)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .i-min{display:none} .faq details[open] .i-plus{display:none} .faq details[open] .i-min{display:block}
.faq details p{padding:0 40px var(--space-5) 0;font-size:var(--type-small)}
.source{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-5);row-gap:var(--space-2);align-items:baseline}
.source .numeral{grid-row:span 2;font-size:var(--type-display-m);color:var(--on-accent)}
.source cite{font-style:normal;font-size:var(--type-micro);color:var(--on-muted);letter-spacing:.02em}
.source .label{grid-column:1/-1}
.portrait{height:auto;border-radius:50%;object-fit:cover;aspect-ratio:1/1;flex:none;background:var(--clary-lime)}
.person{display:flex;gap:var(--space-5);align-items:center}
.person .portrait{width:96px}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-related) var(--grid-gutter)}
.kpis dt{font-size:var(--type-label);font-weight:var(--weight-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--on-label)}
.kpis dd{font-family:var(--font-text);font-weight:900;text-transform:uppercase;font-size:var(--type-display-m);line-height:var(--leading-display);color:var(--on-accent)}
.kpis dd.kpi-text{font-family:var(--font-text);font-weight:var(--weight-emphasis);text-transform:none;font-size:var(--type-body);line-height:1.4;color:var(--on-text)}
.supergraphic{position:absolute;pointer-events:none;color:var(--clary-white);opacity:.12}

/* ---------- Kopfzeile ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:var(--space-4);padding-left:max(var(--page-margin),env(safe-area-inset-left,0px));padding-right:max(var(--page-margin),env(safe-area-inset-right,0px));border-bottom:1px solid var(--on-line)}
.site-header .in{max-width:var(--content-max);margin-inline:auto;display:flex;align-items:center;gap:var(--space-5)}
.site-header img{width:150px;height:auto}
.nav{display:flex;gap:var(--space-5);margin-left:auto}
.nav ul{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0}
.lang,.site-header .btn{white-space:nowrap}
.nav a{font-size:var(--type-label);font-weight:var(--weight-label);text-transform:uppercase;letter-spacing:var(--tracking-label);text-decoration:none;white-space:nowrap}
.nav .current-menu-item > a,.nav .is-active > a{color:var(--clary-lime)}
.nav .is-active > a{transition-duration:.5s}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--clary-lime)}}
.lang{font-size:var(--type-micro);font-weight:600;letter-spacing:var(--tracking-label);color:var(--on-muted)}
/* Sprachwahl vom Menü getrennt: eigene Gruppe mit Trennlinie */
.lang{display:flex;align-items:center;gap:.4em;padding-left:var(--space-5);border-left:1px solid var(--on-line);line-height:1;min-height:24px}
.nav-cta,.nav-toggle{display:none}

/* Mobiles Menü (bis 1200 px, darüber passt die Leiste nicht ohne Umbruch): Logo · Sprache · Button · Menü.
   Das Menü öffnet als Fläche unter dem Kopf. */
@media (max-width:1200px){
  .site-header .in{gap:var(--space-4)}
  .site-header .in > :not(.nav){position:relative;z-index:2}
  .lang{margin-left:auto;padding-left:0;border-left:0}
  .lang a,.lang .is-current{display:inline-flex;align-items:center;min-height:44px}
  .nav-toggle:not([hidden]){display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--on-text);cursor:pointer;border-radius:var(--radius-full)}
  .nav-toggle .icon-close,.site-header.is-open .nav-toggle .icon-menu{display:none}
  .site-header.is-open .nav-toggle .icon-close{display:block}
  .nav-toggle:focus-visible{outline:2px solid var(--clary-lime);outline-offset:2px}
  .nav{position:fixed;inset:0;z-index:1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-7);padding:calc(var(--nav-top,72px) + var(--space-6)) max(var(--page-margin),env(safe-area-inset-right,0px)) calc(var(--space-6) + env(safe-area-inset-bottom,0px)) max(var(--page-margin),env(safe-area-inset-left,0px));background:var(--clary-forest-deep);overflow-y:auto;overscroll-behavior:contain;visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease-settle),visibility 0s linear .6s}
  .site-header.is-open .nav{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease-settle),visibility 0s}
  .nav ul{flex-direction:column;gap:var(--space-4)}
  .nav ul a{display:inline-block;font-family:var(--font-display);font-weight:900;font-size:clamp(1.75rem,7vw,2.75rem);line-height:1.1;letter-spacing:0;color:var(--clary-white)}
  .nav-cta{display:block}
  .nav li,.nav-cta{opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s var(--ease-settle),transform .5s var(--ease-settle)}
  .site-header.is-open :is(.nav li,.nav-cta){opacity:1;transform:none}
  .site-header.is-open .nav li:nth-child(1){transition-delay:.12s}
  .site-header.is-open .nav li:nth-child(2){transition-delay:.18s}
  .site-header.is-open .nav li:nth-child(3){transition-delay:.24s}
  .site-header.is-open .nav li:nth-child(4){transition-delay:.30s}
  .site-header.is-open .nav li:nth-child(5){transition-delay:.36s}
  .site-header.is-open .nav li:nth-child(n+6){transition-delay:.42s}
  .site-header.is-open .nav-cta{transition-delay:.45s}
  body.nav-open{overflow:hidden}
}
@media (max-width:640px){.site-header .header-cta{display:none}}
@media (min-width:641px){.nav .nav-cta{display:none}}
@media (prefers-reduced-motion:reduce){.nav,.nav li,.nav-cta,.site-header.is-open :is(.nav,.nav li,.nav-cta){transition:none !important}}

/* ---------- 1 Start ---------- */
.hero{padding-block:0}
.hero .container{gap:0}
.hero .cols{align-items:stretch;row-gap:0}
.hero-copy{grid-column:1/9;padding-block:var(--gap-block)}
.hero-plane{grid-column:9/13;margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)));min-height:100%;position:relative}
.hero-plane img{position:absolute;inset:0;height:100%}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gutter);margin-top:var(--gap-group)}
.facts b{display:block;font-family:var(--font-numeral, var(--font-text));font-weight:900;text-transform:uppercase;font-size:var(--type-display-m);line-height:var(--leading-display);color:var(--on-accent);font-variant-numeric:tabular-nums}
.facts dd > span{font-size:var(--type-small);color:var(--on-muted);display:block;margin-top:var(--gap-couple)}
@media (max-width:900px){
  .hero-copy{grid-column:1/-1;padding-block:var(--gap-group)}
  .hero-plane{grid-column:1/-1;margin-left:calc(-1 * max(var(--page-margin),env(safe-area-inset-left,0px)));aspect-ratio:4/3}
  .facts{grid-template-columns:1fr}}

/* ---------- 2 Ausgangslage ---------- */
.story > div{grid-column:span 4}
.story > div:nth-child(2){margin-top:var(--gap-group)} .story > div:nth-child(3){margin-top:calc(var(--gap-group) * 2)}
.entries{display:flex;flex-wrap:wrap;gap:var(--space-3)}
@media (max-width:900px){.story > div{grid-column:1/-1;margin-top:0!important}}

/* ---------- 3 Leistungen ---------- */
/* Komponente .split: Bildfläche randabfallend + Textspalte, alternierend (.split--reverse) */
.core{display:flex;flex-direction:column;gap:var(--gap-section)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gutter);row-gap:var(--gap-group);align-items:center}
.split-plane{grid-column:1/7;grid-row:1;margin-left:calc(-1 * max(var(--page-margin),env(safe-area-inset-left,0px)))}
.split-plane .plane{aspect-ratio:4/5;max-height:760px}
.split-copy{grid-column:8/13;grid-row:1}
.split--reverse .split-plane{grid-column:7/13;margin-left:0;margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)))}
.split--reverse .split-copy{grid-column:1/6}
.faq-more > summary{list-style:none;cursor:pointer;align-self:flex-start}
.faq-more > summary::-webkit-details-marker{display:none}
.faq-more > summary .i-min{display:none} .faq-more[open] > summary .i-plus{display:none} .faq-more[open] > summary .i-min{display:inline-block}
.faq-more > .faq{margin-top:var(--gap-related)}
@media (max-width:900px){.split-plane,.split--reverse .split-plane{grid-column:1/-1;grid-row:1;margin-left:calc(-1 * max(var(--page-margin),env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)))}.split-plane .plane{aspect-ratio:3/2}.split-copy,.split--reverse .split-copy{grid-column:1/-1;grid-row:2}}
/* Komponente .pa: Problem → Lösung */
.pa{display:flex;flex-direction:column}
.pa-head{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.4fr);gap:var(--gap-related);padding-bottom:var(--space-3)}
.pa > div:not(.pa-head){display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1.4fr);gap:var(--gap-related);align-items:start;padding-block:var(--space-5);border-top:1px solid var(--on-line)}
.pa > div:last-child{border-bottom:1px solid var(--on-line)}
.pa .icon{margin-top:.2em;color:var(--on-accent)}
.pa-problem{font-weight:var(--weight-emphasis);font-size:var(--type-body);line-height:var(--leading-body)}
@media (max-width:600px){.pa-head{display:none}.pa > div:not(.pa-head){grid-template-columns:1fr;gap:var(--space-2)}.pa > div .icon{display:none}}
.bridge{grid-column:2/12}
.entry3 > article{grid-column:span 4;display:flex;flex-direction:column;gap:var(--gap-related)}
.more{align-items:stretch}
.more .usa-teaser{grid-column:span 5;display:flex;flex-direction:column;gap:var(--gap-related);text-decoration:none}
.more .gp{grid-column:span 7;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--grid-gutter);padding:0;background:var(--on-panel)}
.more .gp .plane{height:100%;min-height:240px}
.more .gp > .stack{padding:clamp(24px,3vw,48px) clamp(24px,3vw,48px) clamp(24px,3vw,48px) 0}
@media (max-width:900px){.entry3 > article,.more .usa-teaser,.more .gp,.bridge{grid-column:1/-1;margin-top:0}.more .gp{grid-template-columns:1fr}.more .gp > .stack{padding:0 24px 24px}}

/* ---------- 4 Arbeitsweise ---------- */
.steps{list-style:none;padding:0}
.steps li{grid-column:span 3;display:flex;flex-direction:column;gap:var(--gap-related)}
.steps li:nth-child(even){margin-top:var(--gap-group)}
.steps .plane{aspect-ratio:4/3}
.steps .numeral{font-size:var(--type-display-m)}
.thesis{grid-column:1/8}
.thesis-side{grid-column:9/13;align-self:end}
.pull{margin:0}
.network{border-top:1px solid var(--on-line);padding-top:var(--gap-group);row-gap:var(--gap-related)}
.network-label{grid-column:1/-1}
.network-quote{grid-column:1/9;margin:0}
.network-copy{grid-column:9/13;align-self:end}
@media (max-width:900px){.steps li{grid-column:span 6;margin-top:0!important}.thesis,.thesis-side,.network-quote,.network-copy{grid-column:1/-1}}
@media (max-width:520px){.steps li{grid-column:1/-1}}

/* ---------- 5 International (Startseite) ---------- */
.intl-main{grid-column:1/7;align-self:start}
.intl-usa{grid-column:8/13;display:flex;flex-direction:column;gap:var(--gap-related);text-decoration:none}
@media (max-width:900px){.intl-main,.intl-usa{grid-column:1/-1}}
/* ---------- 5 USA (Unterseite) ---------- */
.usa-main{grid-column:1/7} .usa-side{grid-column:8/13}
@media (max-width:900px){.usa-main,.usa-side{grid-column:1/-1}}

/* ---------- 6 Team ---------- */
.lead-plane{grid-column:1/6;margin-left:calc(-1 * max(var(--page-margin),env(safe-area-inset-left,0px)))}
.lead-plane .plane{height:100%;min-height:420px;object-position:50% 40%}
.lead-copy{grid-column:7/13}
.mission{grid-column:2/10;max-width:none}
.mission .statement{max-width:none}
@media (max-width:900px){.mission{grid-column:1/-1}}
.vita{list-style:none;padding:0;display:flex;flex-direction:column;font-size:var(--type-small)}
.vita li{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:var(--space-4);border-top:1px solid var(--on-line);padding-block:var(--space-2)}
.vita time{font-weight:var(--weight-emphasis);font-variant-numeric:tabular-nums}
.talks{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--gap-group)}
.team > article{grid-column:span 3;display:flex;flex-direction:column;gap:var(--gap-related)}
.team > article:nth-child(even){margin-top:var(--gap-group)}
.team .portrait{width:min(200px,70%)}
.member-name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:var(--type-statement);line-height:var(--leading-display)}
@media (max-width:1000px){.team > article{grid-column:span 6}.lead-plane,.lead-copy{grid-column:1/-1}.lead-plane{margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)))}.talks{grid-template-columns:1fr}}
@media (max-width:560px){.team > article{grid-column:1/-1;margin-top:0!important}}

/* ---------- 7 Projekte ---------- */
.ref-plane{grid-column:1/8;margin-left:calc(-1 * max(var(--page-margin),env(safe-area-inset-left,0px)))}
.ref-plane .plane{aspect-ratio:16/10}
.ref-plane figcaption,.ref-plane .ref-caption{font-size:var(--type-micro);color:var(--on-muted);margin-top:var(--space-2);padding-left:max(var(--page-margin),env(safe-area-inset-left,0px))}
.ref-copy{grid-column:9/13;align-self:center}
.quotes > figure{grid-column:span 6;display:flex;flex-direction:column;gap:var(--gap-related)}
.quotes > figure:nth-child(2){margin-top:var(--gap-block)}
.quotes figcaption,.quotes .quote-caption{display:flex;gap:var(--space-5);align-items:center;margin-top:var(--space-3)}
.quotes .portrait{width:88px}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}
.gallery .plane{aspect-ratio:4/3}
@media (max-width:900px){.ref-plane,.ref-copy,.quotes > figure{grid-column:1/-1;margin-top:0}.ref-plane{margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)))}.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- 8 Karriere ---------- */
.career-copy{grid-column:1/7} .career-plane{grid-column:8/13;margin-right:calc(-1 * max(var(--page-margin),env(safe-area-inset-right,0px)))}
.career-plane .plane{aspect-ratio:4/5;height:100%}
@media (max-width:900px){.career-copy,.career-plane{grid-column:1/-1}.career-plane .plane{aspect-ratio:3/2!important}}

/* ---------- 9 Kontakt ---------- */
.form-col{grid-column:1/8} .contact-col{grid-column:9/13}
.form{display:grid;gap:var(--gap-related);background:var(--clary-white);padding:clamp(24px,3vw,48px)}
.form .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-related)}
.form label{display:flex;flex-direction:column;gap:var(--gap-couple);font-size:var(--type-label);font-weight:var(--weight-label);text-transform:uppercase;letter-spacing:var(--tracking-label)}
.form label .opt{text-transform:none;letter-spacing:0;font-weight:400;color:var(--clary-forest-80)}
.form input,.form textarea{font:inherit;font-size:var(--type-body);text-transform:none;letter-spacing:var(--tracking-body);padding:14px 16px;border:1.5px solid var(--clary-forest-80);border-radius:var(--radius-none);background:var(--clary-white);color:var(--clary-forest);width:100%}
.form textarea{min-height:160px;resize:vertical}
.form .consent{flex-direction:row;align-items:flex-start;gap:var(--space-3);text-transform:none;letter-spacing:0;font-weight:400;font-size:var(--type-small)}
.form .consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--clary-forest)}
.contact-col .portrait{width:min(240px,60%)}
.clist{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.clist li{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.clist code{font-family:inherit;font-weight:var(--weight-emphasis);user-select:all}
@media (max-width:900px){.form-col,.contact-col{grid-column:1/-1}.form .row2{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.site-footer{padding-block:var(--gap-group) calc(var(--gap-group) + 56px)}
.site-footer .in{max-width:var(--content-max);margin-inline:auto;display:flex;flex-wrap:wrap;gap:var(--gap-related) var(--gap-group);align-items:end;justify-content:space-between;position:relative;z-index:1}
.site-footer img{width:min(320px,80vw);height:auto}
.site-footer nav{display:flex;gap:var(--space-5);font-size:var(--type-small);align-items:center}
.site-footer nav ul{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0}
.site-footer .supergraphic{right:-6vw;bottom:-14vw;width:42vw;max-width:none}

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id]{scroll-margin-top:80px}
/* Utility: Element nicht strecken */
.self-start{align-self:flex-start}
.stack--wide{max-width:none}
.gate{gap:var(--space-2);margin-top:var(--space-3);padding:0!important;background:none!important;max-width:360px}
.gate .btn{white-space:nowrap}
.gate label{font-size:var(--type-label)}

/* ---------- Unterseite International: Vertragsmodelle ---------- */
.models > .model{grid-column:span 3}
.model .member-name{font-size:var(--type-statement)}
.placeholder{font-style:italic;color:var(--on-muted)}
@media (max-width:1000px){.models > .model{grid-column:span 6}}
@media (max-width:560px){.models > .model{grid-column:1/-1}}

/* =====================================================================
   Theme-Ergänzungen (WordPress, Pencilino, WPML)
   ===================================================================== */
/* Pencilino-Richtext: der Wrapper ist ein <div>, Absätze darin übernehmen die Typo der Klasse */
.pencil-richtext > * + *{margin-top:.75em}
.pencil-richtext a{color:inherit}
.pencil-richtext ul,.pencil-richtext ol{padding-left:1.2em}
/* Ring-Liste und Wortband aus Richtext-Listen */
.ring-list-rt ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-4)}
.ring-list-rt li{position:relative;padding-left:calc(22px + var(--space-3))}
.ring-list-rt li::before{content:"";position:absolute;left:0;top:.38em;width:14px;height:14px;border-radius:50%;border:3.5px solid var(--on-ring);box-sizing:content-box}
.wordband-rt ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,max-content);column-gap:var(--space-5);row-gap:var(--space-3);font-family:var(--font-display);font-weight:var(--weight-display);text-transform:uppercase;font-size:var(--type-statement);line-height:var(--leading-statement);letter-spacing:var(--tracking-statement)}
@media (max-width:900px){.wordband-rt ul{grid-template-columns:repeat(2,max-content)}}
@media (max-width:560px){.wordband-rt ul{grid-template-columns:1fr}}
.wordband-rt li{display:flex;align-items:center;gap:var(--space-3)}
.wordband-rt li::before{content:"";flex:none;width:.5em;height:.5em;border-radius:50%;border:.13em solid var(--on-ring)}
/* Inline-Bereiche (verwaltete Texte) dürfen das Layout nicht verändern */
span.pencil-managed-region{display:inline}
body.modal-open .pencil-client-logout{display:none}
/* Hero: Desktop-Bild hoch, Mobil-Bild quer */
.hero-plane .plane{position:absolute;inset:0;height:100%}
@media (max-width:900px){.hero-plane .plane{object-position:var(--hero-pos-mobile,50% 50%) !important}}
/* Bildrahmen: Größe kommt immer vom Layout, nie vom Bild */
.split-plane .plane,.steps .plane,.gallery .plane,.ref-plane .plane,.career-plane .plane,.lead-plane .plane,.more .gp .plane{display:block;width:100%}
/* Sprachumschalter */
.lang a{text-decoration:none;color:inherit}
.lang a:hover,.lang .is-current{color:var(--on-text)}
/* Formular-Rückmeldung */
.form-msg{padding:var(--space-4) var(--space-5);background:var(--clary-sage-100);font-size:var(--type-small)}
.form-msg--error{background:#FBE3DF;color:var(--clary-coral-ink)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.screen-reader-only,.media-modal .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Pencilino-Bearbeitungsleiste nicht unter dem Sticky-Header */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:0}}
.lead-plane > .pencil-managed-region,.split-plane > .pencil-managed-region{height:100%}
.clist li > a{display:inline-flex;align-items:center;gap:var(--space-3)}
.clist code a,.clist a[href^="tel:"]{text-decoration:none}
.person > .pencil-managed-region{display:block;flex:none;line-height:0}
/* Rechtliche Seiten (Impressum, Datenschutz) */
.legal-text{-webkit-hyphens:auto;hyphens:auto}
.legal-text > * + *{margin-top:var(--space-4)}
.legal-text h2{font-size:1.375rem;font-weight:700;line-height:1.3;margin-top:var(--space-7)}
.legal-text h3{font-size:1.0625rem;font-weight:700;line-height:1.4;margin-top:var(--space-6)}
.legal-text h2 + *,.legal-text h3 + *{margin-top:var(--space-3)}
.legal-text ul{list-style:disc;padding-left:1.25em}
.legal-text li + li{margin-top:var(--space-2)}
.legal-text a{text-decoration:underline;text-underline-offset:.15em;overflow-wrap:anywhere}
.legal-text .legal-note{padding:var(--space-4) var(--space-5);background:var(--clary-sage-100);font-size:var(--type-small)}
/* ---------- Motion (Designsystem § 10, Brandbook 09) ----------
   Ausgangszustand steht in inc/motion.php (im Kopf, gegen Aufblitzen). Endzustand = Layout.
   Setzen 800 ms, Schnitt 800 ms auf einer Achse, Bogen 900 ms; kein Federn, keine Schleifen. */
html.motion .is-in{transition:opacity .8s var(--ease-settle),transform .8s var(--ease-settle),clip-path .8s var(--ease-settle)}
html.motion :is(.hero-plane,.split-plane,.lead-plane,.ref-plane,.career-plane).is-in{clip-path:inset(0 0 0 0)}
html.motion .m-off{transition:none}
/* Etwas plakativer: Headlines steigen 24 px, Bilder zoomen beim Aufdecken von 1,08 auf 1 zurück */
html.motion :is(h1,h2,.display-xl,.display-l,.statement,.thesis){--m-travel:24px}
html.motion :is(h1,h2,.display-xl,.display-l,.statement,.thesis).is-in{transition-duration:.9s}
html.motion :is(.hero-plane,.split-plane,.lead-plane,.ref-plane,.career-plane).is-in img{transition:transform 1.4s var(--ease-settle)}

/* Der Punkt: Logopunkt als wandernder Fortschrittspunkt am rechten Rand */
.m-dot{position:fixed;top:0;right:max(8px,calc(var(--page-margin) / 2 - 8px));z-index:15;width:16px;height:16px;border-radius:50%;background:var(--clary-sage);pointer-events:none;opacity:0;scale:.6;translate:0 -12px;transition:opacity .6s var(--ease-settle),scale .6s var(--ease-settle),translate .6s var(--ease-settle),background-color .4s var(--ease-settle);will-change:transform}
.m-dot.is-in{opacity:1;scale:1;translate:0 0}
.m-dot[data-ground="sage"]{background:var(--clary-white)}
.m-dot:is([data-ground="paper"],[data-ground="sage-light"],[data-ground="lime"]){background:var(--clary-forest)}
@media (max-width:700px){.m-dot{width:12px;height:12px}}
.m-dot.m-dot--now{transition:none}
@media print{.m-dot{display:none}}

/* Intro (erster Aufruf einer Sitzung, ca. 3 s): Punkt erscheint, Monogramm setzt sich zusammen,
   Blende nach oben deckt die Seite auf, der Punkt fliegt an seinen Platz am Rand */
.m-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--clary-forest);clip-path:inset(0 0 0 0)}
.m-intro svg{overflow:visible}
.m-intro path{transform-box:fill-box;transform-origin:center}
.m-intro-c,.m-intro-n{fill:var(--clary-white)}
.m-intro-o{fill:var(--clary-lime)}
.m-intro-c{clip-path:inset(0 100% 0 0)}
.m-intro-o{opacity:0;transform:scale(.88)}
.m-intro-n{clip-path:inset(100% 0 0 0)}
.m-intro.is-on .m-intro-c{animation:m-cut-x .6s var(--ease-settle) .55s forwards}
.m-intro.is-on .m-intro-o{animation:m-settle-o .6s var(--ease-settle) .8s forwards}
.m-intro.is-on .m-intro-n{animation:m-cut-y .6s var(--ease-settle) 1.05s forwards}
.m-intro.is-leaving{transition:clip-path .9s var(--ease-settle) .1s;clip-path:inset(0 0 100% 0)}
.m-intro.is-leaving svg{transition:opacity .3s var(--ease-settle),transform .5s var(--ease-settle);opacity:0;transform:translateY(-12px)}
.m-intro.is-skipped,.m-intro-dot.is-skipped{transition:opacity .25s var(--ease-settle);opacity:0}
.m-intro-dot{position:fixed;z-index:1001;pointer-events:none;transform:translate(-50%,-50%)}
.m-intro-dot span{display:block;width:100%;height:100%;border-radius:50%;background:var(--clary-sage);transform-origin:center;animation:m-cover-dot .7s var(--ease-settle) .1s both}
@keyframes m-cut-x{to{clip-path:inset(0 0 0 0)}}
@keyframes m-cut-y{to{clip-path:inset(0 0 0 0)}}
@keyframes m-settle-o{to{opacity:1;transform:none}}
@keyframes m-cover-dot{0%{opacity:0;scale:.4}60%{opacity:1}100%{opacity:1;scale:1}}

/* Bogen: Ring-Marker zeichnen ihren Strich einmal im Uhrzeigersinn und wachsen von 0,94 auf 1 */
@property --m-arc{syntax:"<angle>";inherits:false;initial-value:360deg}
html.motion .m-arc li::before{-webkit-mask:conic-gradient(#000 var(--m-arc),#0000 0);mask:conic-gradient(#000 var(--m-arc),#0000 0);transition:--m-arc .9s var(--ease-settle),transform .9s var(--ease-settle)}
html.motion .m-arc:not(.is-drawn) li::before{--m-arc:0deg;transform:scale(.94)}
html.motion .m-arc li::before{transition-delay:var(--m-delay,0ms)}
html.motion .m-arc li:nth-child(2)::before{transition-delay:calc(var(--m-delay,0ms) + 70ms)}
html.motion .m-arc li:nth-child(3)::before{transition-delay:calc(var(--m-delay,0ms) + 140ms)}
html.motion .m-arc li:nth-child(4)::before{transition-delay:calc(var(--m-delay,0ms) + 210ms)}
html.motion .m-arc li:nth-child(n+5)::before{transition-delay:calc(var(--m-delay,0ms) + 280ms)}
html.motion .m-arc.m-off li::before{transition:none}

@media (prefers-reduced-motion:reduce){html.motion *,html.motion ::before{transition:none !important}.m-dot{display:none}}
@media print{html.motion *{opacity:1 !important;transform:none !important;clip-path:none !important}}

/* Feine Übergänge an Links und Buttons (Hover 180 ms, nur Geräte mit echtem Hover) */
.nav a,.lang a,.btn--text,.social,.clist a,.faq summary,.legal-text a{transition:color var(--dur-quick) var(--ease-settle)}
.btn .icon,.btn--text .icon{transition:transform var(--dur-quick) var(--ease-settle)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .icon,.btn--text:hover .icon{transform:translateX(3px)}
  .faq summary:hover{color:var(--on-label)}
}
@media (prefers-reduced-motion:reduce){.btn .icon,.btn--text .icon{transition:none}}

/* Ladeanimation, Ring-Variante: beim Absenden nach 400 ms im Button, zeichnet sich ohne zu rotieren */
.m-busy{display:inline-flex;width:18px;height:18px;flex:none}
.m-busy circle{fill:none;stroke:currentColor;stroke-width:4.5}
.m-busy .m-busy-track{opacity:.18}
.btn--dark .m-busy circle{stroke:var(--clary-lime)}
.btn.is-busy .icon{display:none}
.m-busy .m-busy-arc{stroke-dasharray:100;stroke-dashoffset:100;animation:m-busy 1.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes m-busy{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.m-busy .m-busy-arc{animation:none;stroke-dashoffset:75}}