/* K-SCHRIFTEN-LOKAL (26.09.2026, Go-live azena.ai): Fraunces + Geist selbst gehostet (latin, latin-ext), statt fonts.googleapis.com */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/geist-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/geist-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   azena · styles.css  (Prototyp, Stand 23.09.2026)
   Reihenfolge: Tokens · Reset · Schrift · Typo · Layout · Utilities · K01–K41
   Mobile Regeln stehen am Ende jeder Komponente. Keine Build-Stufe.
   ========================================================================== */

/* ---------- 1.11 Tokens ---------- */
:root{
  /* „Herb · weniger feminin“ (24.09.2026, 17:05): Gründe von Pfirsich/Rosé-Beige auf neutrales Stein-Greige (b* 1,5–3 statt 2–7).
     Alt: paper #FAF8F5 · offwhite #FDFCFA · mist #F5F3EF · stone #F0ECE6 · sand #E7DED3 · linen #F3EEE8 · linen-2 #E6DDD2 · clay #D9CDBE.
     Kontrast geprüft: text ≥ 6,0 · text-soft ≥ 5,2 · bronze ≥ 4,9 : 1 auf jedem dieser Gründe. */
  --paper:#F7F6F3; --offwhite:#FCFBF9; --white:#FFFFFF; --mist:#F2F1EE; --stone:#ECEAE6;
  --trav-hi:#E1DCD6; --trav-lo:#D3CCC4; --sand:#E4E1DC; --linen:#F1EFEB; --linen-2:#E3E0DA; --clay:#D3CEC6;
  /* Naht-Gründe (Einbau Herb 24.09.2026, per magick aus den neuen Bildkanten gemessen):
     trav-hi/-lo = Grund des Hero-Fotos h1m-o an der Oberkante (links neben dem Laub, 30–50 % Breite: #CDC5BA–#D7D0C9; alt #ECE4DA/#E2D8CB),
     seam-sand = Unterkante h1m-o rechts vom Sockel (Herb 2 25.09.2026: #E5D6CF, AVIF/WebP 800+1600 max. 1,7 Stufen; Herb #E2D8CE; alt #E7DED3), seam-paper = alter Papiergrund (Objektfotos anderer Split-Heros),
     seam-oai = derzeit ungenutzt (25.09.2026): Marmorrand des ChatGPT-Logos oai-logo-aufsicht 4:5, Mittel aller vier Kanten #E4DBDB
       (links #E4DCDC, rechts #EAE3E2, oben #EBE4E4, unten #D4C9C7). Geäderter Marmor schließt an keine Fläche nahtlos an → Hero dort gerahmt auf seam-paper.
     Herb 2: Oberkante h1m-o bei 27–41 % Breite gegen --grad-hero ≤ 5 Stufen wie bisher → trav-hi/-lo bleiben. */
  --seam-paper:#FAF8F5; --seam-sand:#E5D6CF; --seam-oai:#E4DBDB;
  --ink:#2A2521; --ink-btn:#2E2824;
  --ink-head:#1F1D1B; --head-wght:420;   /* Headlines kräftiger (vorher --ink #2A2521, Gewicht 360), gleiche Schrift */ --text:#57504A; --text-soft:#625953; --earth:#221D1A; --earth-2:#1F1B18;
  --on-dark:#F5F1EB; --on-dark-link:#E3DACF; --on-dark-soft:#B8ADA2;
  --line:rgb(42 37 33/.10); --line-soft:rgb(42 37 33/.06); --line-dark:rgb(255 255 255/.10); --field-border:#948A80;
  --moss:#3F5B45; --moss-tint:#E9EEE8; --bronze:#735A36; --bronze-tint:#F3EDE3; --copper:#8B4A2B; --copper-tint:#F4E9E3;
  --slate:#4A5561; --slate-tint:#E9ECEF; --aubergine:#5A4450; --aubergine-tint:#F0E9ED;
  --champagne:#C9A87C; --sky:#6CCFF6;
  --bronze-deep:#5B4526; --text-deep:#4C4641;   /* nur Hero-Text auf dem Bild (Pixelprobe Phase 2: Bildgrund bis rgb(197 186 170)) */
  --acc:var(--bronze); --acc-tint:var(--bronze-tint); --link:var(--moss);
  --grad-hero:linear-gradient(270deg,var(--trav-hi) 12%,var(--trav-lo) 87%);
  --grad-cta-sand:linear-gradient(180deg,#F3F2EF,#D6D2CB);     /* alt #F4F1EC → #D9CDBE */
  --grad-cta-sage:linear-gradient(180deg,#F3F5F1,#C3CCBE);
  --grad-cta-bronze:linear-gradient(180deg,#F9F8F5,#D4CCBC);   /* alt #FBF8F3 → #D6C9B0: Champagner statt Pfirsich */
  /* Studiowände (24.09.2026, per magick aus den Bildkanten gemessen): Sektionsgrund = Fotogrund, damit nichts überblendet werden muss */
  --wall-e101:#D9CEBF;   /* E101 Drei Veredelungen (Horizont Portfolio); Herb 2 25.09.2026 nachgemessen: Ober-/Rechtskante #DACEC0/#D9CEBF, ±1 → bleibt */
  --wall-med3:#D8C5AF;   /* MED-3 Dokumentationsordner (Horizont Medizintechnik), Ober- und Rechtskante ±1 (Herb 2 25.09.2026: Neurender global auf diesen Grund gezogen, R×0,997 G×1,012 B×1,002; AVIF/WebP 1066+2132 Abschnitte max. 2,0) */
  --metal-sheen:linear-gradient(112deg,#E6E4DF 0%,#B3AEA4 13%,#F5F3EF 29%,#D2C7B0 45%,#9A9488 63%,#DCD8CF 80%,#B7B2A8 100%);   /* gebürsteter Stahl mit Champagner-Schimmer (Plakette, Pille) */
  --grad-portrait:linear-gradient(180deg,#ECEAE6,#D5CFC4);     /* alt #EDE6DB → #D8C7A8 (nur Ladegrund hinter Porträts) */
  --font-serif:"Fraunces","Newsreader",Georgia,serif; --serif-wght:360;
  --font-sans:"Geist","Helvetica Neue",Arial,sans-serif; --font-mark:"Century Gothic",Futura,sans-serif;
  --gutter:2.5rem; --w-article:45rem; --w-s:48rem; --w-m:60rem; --w-l:75rem; --w-cta:77.5rem; --w-xl:80rem; --nav-h:70px;
  --sec-s:4rem; --sec-m:6rem; --sec-l:7rem; --sec-xl:10rem;
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:2.5rem; --s-8:3rem; --s-9:4rem; --s-10:5rem; --s-11:6rem; --s-12:7rem; --s-13:10rem;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px; --r-2xl:40px; --r-3xl:48px; --r-pill:999px;
  --sh-float:3px 5px 12px rgb(34 29 26/.10),12px 18px 22px rgb(34 29 26/.09),27px 41px 29px rgb(34 29 26/.05),48px 73px 35px rgb(34 29 26/.01),75px 113px 38px rgb(34 29 26/0);
  --sh-pill:0 1px 2px rgb(34 29 26/.10),2px 4px 4px rgb(34 29 26/.09),4px 9px 6px rgb(34 29 26/.05),8px 15px 7px rgb(34 29 26/.01);
  --sh-ring:0 0 0 1px rgb(0 0 0/.04),0 4px 8px rgb(0 0 0/.04);
  --sh-frame:0 25px 50px -12px rgb(34 29 26/.06); --sh-tabs:0 4px 20px rgb(34 29 26/.06); --sh-form:0 2px 16px 4px rgb(34 29 26/.14);
  --ease:cubic-bezier(.25,.1,.25,1); --ease-out:cubic-bezier(.22,.61,.36,1); --ease-quart:cubic-bezier(.77,0,.175,1);
  --d-fast:.2s; --d-base:.3s; --d-reveal:.4s;
  --z-sticky:20; --z-backdrop:90; --z-nav:100; --z-mega:110; --z-dialog:200; --z-skip:300;
  --ph-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .14 0 0 0 0 .13 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --hex-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1.8 20.8 6.9v10.2L12 22.2 3.2 17.1V6.9Z'/%3E%3Cpath d='M12 6.4 17 9.2 12 12 7 9.2Z'/%3E%3Cpath d='M7.4 11.9 12 14.5l4.6-2.6'/%3E%3Cpath d='M7.4 14.6 12 17.2l4.6-2.6'/%3E%3C/svg%3E");
  --ph-hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23735A36' fill-opacity='.1' stroke='%23735A36' stroke-opacity='.28' stroke-width='.6'%3E%3Cpath d='M20 74 35 66h30l15 8-15 8H35z'/%3E%3Cpath d='M22 62 36 54.5h28L78 62l-14 7.5H36z'/%3E%3Cpath d='M24 50.5 37 43.5h26l13 7-13 7H37z'/%3E%3C/g%3E%3C/svg%3E");
}
[data-accent="strategie"]{--acc:var(--bronze);--acc-tint:var(--bronze-tint);--link:var(--bronze)}
[data-accent="integration"]{--acc:var(--moss);--acc-tint:var(--moss-tint);--link:var(--moss)}
[data-accent="mass"]{--acc:var(--copper);--acc-tint:var(--copper-tint);--link:var(--copper)}
[data-accent="openai"]{--acc:var(--slate);--acc-tint:var(--slate-tint);--link:var(--slate)}
[data-accent="brandstudio"]{--acc:var(--aubergine);--acc-tint:var(--aubergine-tint);--link:var(--aubergine)}
@media (max-width:991px){:root{--gutter:1.25rem;--sec-m:4rem;--sec-l:6rem;--sec-xl:6rem}}
@media (max-width:767px){:root{--sec-l:4rem;--sec-xl:4rem}}
@media (max-width:479px){:root{--gutter:1rem;--sec-s:3rem}}
:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--on-dark)}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html:not(.is-static){scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--font-sans);font-size:1rem;line-height:1.5;letter-spacing:-.01em;font-feature-settings:"ss01" off;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul{margin:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ol,ul{padding:0;list-style:none}
img,picture,video,canvas{display:block;max-width:100%}
svg{display:block}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--nav-h) + 2rem)}
::selection{background:var(--moss-tint);color:var(--ink)}
table{border-collapse:collapse}

/* ---------- Wortmarke ---------- */
@font-face{font-family:"Century Gothic";src:url(assets/fonts/CenturyGothic-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- 1.3 Typo-Skala ---------- */
.t-display,.t-h1,.t-h2,.t-h2s,.t-statement,.t-h3,.t-band,.t-quote,.t-h5,.t-h6{font-family:var(--font-serif);font-weight:var(--head-wght);color:var(--ink-head);font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0}
.t-display,.t-h1,.t-h2,.t-h2s,.t-statement,.t-h3,.t-band{font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.t-display{font-size:4rem;line-height:1.15;letter-spacing:-.005em}
.t-h1{font-size:3.5rem;line-height:1.1;letter-spacing:-.02em}
.t-h2{font-size:3rem;line-height:1.3;letter-spacing:-.02em}
.t-h2s{font-size:2.625rem;line-height:1.3;letter-spacing:-.02em}
.t-statement{font-size:2.5rem;line-height:1.3;letter-spacing:-.02em}
.t-h3{font-size:2.25rem;line-height:1.3;letter-spacing:-.02em}
.t-band{font-size:2rem;line-height:1.15;letter-spacing:-.01em}
.t-quote{font-size:1.75rem;line-height:1.3;letter-spacing:-.01em}
.t-h5{font-size:1.5rem;line-height:1.3;letter-spacing:-.02em}
.t-h6{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
.t-eyebrow,.eyebrow{display:block;font:500 .75rem/1 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--acc)}
.t-lead{font-size:1.125rem;line-height:1.5;letter-spacing:-.01em;color:var(--text)}
.t-body-l{font-size:1.25rem;line-height:1.5;letter-spacing:-.01em;color:var(--text)}
.t-body{font-size:1rem;line-height:1.5;letter-spacing:-.01em;color:var(--text)}
.t-prose{font-size:1.1rem;line-height:1.5;letter-spacing:-.01em;color:var(--text)}
.t-card{font:500 1.25rem/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.t-small{font-size:.875rem;line-height:1.5;letter-spacing:0}
.t-micro{font:500 .75rem/1.35 var(--font-sans);letter-spacing:0;color:var(--text-soft)}
.t-nav{font-size:.9375rem;line-height:1.2;letter-spacing:0}
.t-btn{font:500 1rem/1 var(--font-sans);letter-spacing:0}
.t-soft,.soft{color:var(--text-soft)}
.ink-grad{background:linear-gradient(180deg,#2A2521,rgb(42 37 33/.72));-webkit-background-clip:text;background-clip:text;color:transparent}
strong,b{font-weight:600;color:var(--ink)}
em.acc{font-style:normal;color:var(--bronze)}
@media (max-width:991px){
  .t-display{font-size:3.25rem}.t-h1{font-size:3rem}.t-h2{font-size:2.5rem}.t-h2s{font-size:2.25rem}
  .t-statement{font-size:2rem}.t-h3{font-size:2rem}.t-band{font-size:1.875rem}.t-quote{font-size:1.625rem}
  .t-lead{font-size:1.0625rem}.t-body-l{font-size:1.125rem}.t-prose{font-size:1.0625rem}.t-card{font-size:1.125rem}
}
@media (max-width:767px){
  .t-display{font-size:2.5rem}.t-h1{font-size:2.5rem}.t-h2{font-size:2.125rem}.t-h2s{font-size:2rem}
  .t-statement{font-size:1.625rem}.t-h3{font-size:1.75rem}.t-band{font-size:1.75rem}.t-quote{font-size:1.5rem}
  .t-h5{font-size:1.375rem}.t-h6{font-size:1.125rem}.t-lead{font-size:1rem}.t-body-l{font-size:1.0625rem}.t-prose{font-size:1rem}
}
@media (max-height:699px) and (min-width:992px){.t-statement{font-size:1.5rem}}

/* ---------- 1.4 / 1.5 Layout ---------- */
.wrap{width:100%;max-width:calc(var(--w-xl) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.wrap--l{max-width:calc(var(--w-l) + 2*var(--gutter))}
.wrap--cta{max-width:calc(var(--w-cta) + 2*var(--gutter))}
.wrap--m{max-width:calc(var(--w-m) + 2*var(--gutter))}
.wrap--s{max-width:calc(var(--w-s) + 2*var(--gutter))}
.wrap--article{max-width:calc(var(--w-article) + 2*var(--gutter))}
.sec{padding-block:var(--sec-l)}
.sec--s{padding-block:var(--sec-s)} .sec--m{padding-block:var(--sec-m)} .sec--xl{padding-block:var(--sec-xl)}
.sec--flush-top{padding-top:0} .sec--flush-bottom{padding-bottom:0}
.bg-paper{background:var(--paper)} .bg-offwhite{background:var(--offwhite)} .bg-white{background:var(--white)}
.bg-mist{background:var(--mist)} .bg-stone{background:var(--stone)} .bg-sand{background:var(--sand)} .bg-tabs{background:#F4F3F0}
.g-2,.g-split,.g-asym,.g-3,.g-4{display:grid}
.g-2{grid-template-columns:1fr 1fr;gap:5rem}
.g-split{grid-template-columns:1fr 520px;gap:5rem}
.g-asym{grid-template-columns:1fr 3fr;gap:2rem}
.g-3{grid-template-columns:repeat(3,1fr);gap:1.5rem}
.g-4{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.g-3p2{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem}
.g-3p2 > *{flex:0 1 calc((100% - 3rem)/3);max-width:25.7rem}
.g-2.is-bottom,.g-split.is-bottom{align-items:end}
.g-2.is-center,.g-split.is-center{align-items:center}
.g-2.is-top{align-items:start}
@media (min-width:992px) and (max-width:1199px){
  .g-split{grid-template-columns:1fr minmax(0,440px);gap:3rem}
  .g-2{gap:3.5rem}
}
@media (max-width:991px){
  .g-2{grid-template-columns:1fr;gap:2rem}
  .g-split,.g-asym{grid-template-columns:1fr;gap:2.5rem}
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .g-3p2 > *{flex-basis:calc((100% - 1.5rem)/2);max-width:none}
}
@media (max-width:767px){
  .g-3,.g-4{grid-template-columns:1fr}
  .g-3p2 > *{flex-basis:100%}
}

/* Kopf-Rhythmus: Eyebrow -> H 1rem · H -> Lead 1.5rem · Lead -> Button 2.5rem · Kopf -> Inhalt 4rem */
.head > * + *{margin-top:1.5rem}
.head > .eyebrow + *,.head > .pill + *{margin-top:1rem}
.head > .btns,.head > .btn,.head > .tlink-row{margin-top:2.5rem}
.head{margin-bottom:4rem}
.head:last-child{margin-bottom:0}
.head--center{text-align:center;margin-inline:auto}
.head--center > p{max-width:36rem;margin-inline:auto}
.head--center > .intro{max-width:32.5rem}
.head--center .btns{justify-content:center}
.row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3rem}
@media (max-width:767px){.head{margin-bottom:2.5rem}.row-head{flex-wrap:wrap;align-items:flex-start;margin-bottom:2rem}}

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.i,.i-arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.125em}
.hairline{height:1px;border:0;margin:0;background:var(--line)}
.hr-bottom{border-bottom:1px solid var(--line)}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}.mt-4{margin-top:4rem}
.stack-y > * + *{margin-top:1rem}
.maxw-lead{max-width:36rem}
/* Lichtfleck (K03) entfernt 24.09.2026: keine weißen Blur-Flecken mehr. Sektionen stehen auf einer vollen Fläche (Paper, Stone, Sand). */
/* Platzhalter im Text (K36) */
mark.todo,.todo{background:var(--bronze-tint);color:var(--ink);border-bottom:1px dotted var(--bronze);padding:0 .15em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Freigabestand */
[data-release="live"] .is-draft{display:none!important}
.draft-band{background:var(--bronze-tint);color:var(--bronze);text-align:center;font:500 .875rem/1.4 var(--font-sans);padding:.625rem var(--gutter);margin-top:var(--nav-h)}
.draft-band + *,.draft-band + .hero-index,.draft-band + .hero-workshop{padding-top:var(--sec-s)}
[data-release="live"] .draft-band{display:none}

/* ---------- K03 Reveal ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js:not(.is-static) [data-reveal],html.js:not(.is-static) [data-reveal-stagger] > *{opacity:0;translate:0 2rem;transition:opacity var(--d-reveal) var(--ease),translate var(--d-reveal) var(--ease);transition-delay:var(--d,0ms)}
  html.js:not(.is-static) [data-reveal].is-in,html.js:not(.is-static) [data-reveal-stagger] > .is-in{opacity:1;translate:none}
}
/* Nebelkante (K03) entfernt 24.09.2026: Bilder enden mit klarer Kante im Rahmen, nichts verläuft ins Weiß. */

/* ==========================================================================
   K01 Buttons und Links
   ========================================================================== */
.btn{--btn-bg:var(--ink-btn);--btn-fg:var(--linen);--btn-bg-h:var(--moss);--btn-fg-h:var(--linen);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.75rem;border:0;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);font:500 1rem/1 var(--font-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .3s,color .3s,box-shadow .2s,transform .2s}
.btn:hover{background:var(--btn-bg-h);color:var(--btn-fg-h)}
.btn:active{transform:translateY(1px)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.btn .i-arrow,.btn .i{width:1rem;height:1rem;flex:none}
.btn--primary{--btn-bg:var(--ink-btn);--btn-fg:var(--linen)}
.btn--secondary{--btn-bg:var(--linen-2);--btn-fg:var(--ink-btn);--btn-fg-h:var(--offwhite)}
[data-accent] .btn--secondary{--btn-bg:var(--acc-tint)}
.btn--white{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-bg-h:var(--linen);--btn-fg-h:var(--ink);box-shadow:var(--sh-ring)}
.btn--s{padding:.625rem 1rem;font-size:.875rem;gap:0}
.btn--s .i-arrow{max-width:0;opacity:0;margin-left:0;transition:max-width .2s,opacity .2s,margin-left .2s}
.btn--s:hover .i-arrow,.btn--s:focus-visible .i-arrow{max-width:1rem;opacity:1;margin-left:.375rem}
.btn--l{width:100%;height:60px;font-size:1.25rem;font-weight:400}
.btn--xl{padding:1.25rem 2rem;font-size:1.25rem;font-weight:400}
.btn--play{--btn-bg:var(--linen);--btn-fg:var(--ink);--btn-bg-h:var(--linen);--btn-fg-h:var(--ink);box-shadow:var(--sh-pill);padding:.75rem 1.375rem .75rem 1.125rem}
.btn--play:hover{transform:scale(1.03)}
.btn--play .i{width:.875rem;height:.875rem}
.btn--round{--btn-bg:var(--linen-2);--btn-fg:var(--ink-btn);width:32px;height:32px;padding:0;border-radius:50%}
.btn--round .i-arrow{width:14px;height:14px}
.on-dark .btn--secondary{--btn-bg:var(--linen);--btn-fg:var(--ink-btn)}
.btns{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:.375rem;font:500 1rem/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--link);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
.tlink .i-arrow{width:1rem;height:1rem;transition:transform .2s var(--ease)}
.tlink:hover{text-decoration-line:underline}
.tlink:hover .i-arrow,a:hover .tlink .i-arrow,a:focus-visible .tlink .i-arrow{transform:translateX(3px)}
.tlink--l{font-size:1.125rem}
.link-s{font-size:.875rem;color:var(--text-soft);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link-s:hover{color:var(--link)}
.tlink-row{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center}
@media (max-width:479px){.btn:not(.btn--s):not(.btn--round):not(.btn--l){padding:1rem}.btns .btn{flex:0 1 auto}}

/* ==========================================================================
   K02 Eyebrow, Pillen, Nummernkästchen
   ========================================================================== */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-pill);font:500 .75rem/1.2 var(--font-sans);letter-spacing:0;padding:4px 10px;white-space:nowrap;text-decoration:none}
.pill--status{background:var(--moss-tint);color:var(--moss)}
.pill--status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--moss);flex:none}
.pill--cat{background:var(--mist);color:var(--text-soft)}
.pill--draft{background:var(--bronze-tint);color:var(--bronze)}
.pill--glass{background:rgb(255 255 255/.14);border:1px solid rgb(255 255 255/.2);color:#fff;font-size:.875rem;padding:6px 14px;box-shadow:0 4px 12px rgb(63 91 69/.4)}
.pill--solid{--pill:var(--link);background:var(--pill);color:#fff;font-size:.875rem;padding:8px 12px;border:1px solid rgb(255 255 255/.08);box-shadow:0 4px 12px color-mix(in srgb,var(--pill) 35%,transparent)}
.pill--bronze{--pill:var(--bronze)}
a.pill .i-arrow{width:.875rem;height:.875rem}
a.pill:hover{text-decoration:underline;text-underline-offset:2px}
.numbox{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--acc-tint);color:var(--acc);font:600 .875rem/1 var(--font-sans);letter-spacing:0;flex:none}
.numbox--s{width:24px;height:24px;font-size:.75rem;border-radius:5px}
.hexbullet{width:16px;height:16px;color:var(--acc);flex:none}
.eyebrow--hex{display:inline-flex;align-items:center;gap:.5rem;color:var(--bronze)}

/* ==========================================================================
   K04 Bildrahmen und Platzhalter
   ========================================================================== */
.media{position:relative;display:block;overflow:hidden;aspect-ratio:var(--ar,auto);border-radius:var(--r,0);background:var(--ph-noise),var(--grad-hero);isolation:isolate}
.media::before{content:attr(data-img);position:absolute;left:10px;bottom:8px;z-index:0;font:500 11px/1 var(--font-sans);letter-spacing:.02em;color:var(--text-soft)}
.media > picture{display:contents}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.media img{opacity:0;transition:opacity .4s var(--ease)}
.media img.is-loaded,html:not(.js) .media img{opacity:1}
img[data-ph]{opacity:0;transition:opacity .4s var(--ease)}
img[data-ph].is-loaded,html:not(.js) img[data-ph]{opacity:1}
.media.is-loaded::before{content:none}
.media--object.is-loaded{background:none}
.media--r8{--r:var(--r-s)} .media--r12{--r:var(--r-m)} .media--r16{--r:var(--r-l)} .media--r24{--r:var(--r-xl)} .media--r48{--r:var(--r-3xl)}
.media--object{background:var(--ph-hex) center/70% no-repeat;border-radius:0;overflow:visible}
.media--object img{object-fit:contain}
/* Zwischenbilder (24.09.2026): keine Randmaske mehr. Sie haben einen eigenen Studiogrund und stehen deshalb
   als ganzes Bild im Rahmen (Radius wie Bauplan K04), nie ins Seitenweiß ausgeblendet. */
.media--object.is-interim:not(.cta__object){--r:var(--r-m);border-radius:var(--r);overflow:hidden;background:none}
.media--object.is-interim:not(.cta__object) img{object-fit:cover}
.frame{background:#fff;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-frame)}
.frame > .media{--r:var(--r-m)}
.frame--double{padding:17.6px;border-radius:22px}
.frame--double > .frame{box-shadow:none}
.shot{position:relative}
@media (max-width:767px){.media[data-crop]{aspect-ratio:4/3}.media[data-crop="top"] img{object-position:top}.media[data-crop="bottom"] img{object-position:bottom}}

/* ==========================================================================
   K05 UI-Karte (Beispielansicht)
   ========================================================================== */
.ui-card{position:relative;z-index:3;width:16rem;background:#fff;border-radius:var(--r-s);padding:16px;box-shadow:var(--sh-float);color:var(--ink);font-family:var(--font-sans);letter-spacing:0;text-align:left}
.ui-card__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.125rem .75rem;margin-bottom:.375rem}
.ui-card__title{flex:1 1 auto;min-width:0;font:var(--serif-wght) .9375rem/1.25 var(--font-serif);color:var(--ink);-webkit-hyphens:auto;hyphens:auto}
.ui-card__meta{font:500 .75rem/1.2 var(--font-sans);color:var(--text-soft);white-space:nowrap}
.ui-card__meta--link{color:var(--moss)}
.ui-card__rows{display:block}
.ui-card__row{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line-soft)}
.ui-card__row:first-child{border-top:0}
.ui-card__row--plain{grid-template-columns:1fr auto}
.ui-card__ico{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:var(--linen);color:var(--acc)}
.ui-card__ico .i{width:16px;height:16px}
.ui-card__t{display:block;font:500 .875rem/1.3 var(--font-sans);color:var(--ink)}
.ui-card__s{display:block;font:400 .75rem/1.35 var(--font-sans);color:var(--text-soft)}
.ui-card__v{font:500 .75rem/1.2 var(--font-sans);color:var(--ink);white-space:nowrap}
.ui-card__v--ok{display:inline-flex;align-items:center;gap:4px;color:var(--moss)}
.ui-card__v--ok .i{width:14px;height:14px}
.ui-card__foot{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--line-soft)}
.ui-card__foot .t-micro{font-size:.6875rem}
.ui-card .pill{font-size:.6875rem;padding:3px 8px}
.ui-card--dark{background:var(--earth-2);color:var(--linen)}
.ui-card--dark .ui-card__title,.ui-card--dark .ui-card__t,.ui-card--dark .ui-card__v{color:var(--linen)}
.ui-card--dark .ui-card__s,.ui-card--dark .ui-card__meta,.ui-card--dark .t-micro{color:var(--on-dark-soft)}
.ui-card--dark .ui-card__row,.ui-card--dark .ui-card__foot{border-color:var(--line-dark)}
.ui-card--dark .ui-card__ico{background:rgb(255 255 255/.06);color:var(--champagne)}
.ui-card--dark .ui-card__v--ok{color:#B9CBB7}
.ui-card--dark .todo{color:var(--ink)}
.ui-card--wide{width:19rem}
.ui-card--projekte{width:22.5rem}   /* Leistungen-Hero: Platz für die Pille „im Einsatz, Ausbau läuft“ (25.09.2026) */
/* Pipeline */
.ui-card--pipeline{width:19rem}
.pipe{position:relative;margin:.5rem 0 .25rem;padding-left:22px}
.pipe::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:rgb(255 255 255/.18)}
.pipe__step{position:relative;display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:6px 0;font:500 .8125rem/1.3 var(--font-sans);color:var(--linen)}
.pipe__step::before{content:"";position:absolute;left:-21px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--earth-2);border:1.5px solid var(--champagne)}
.role{display:inline-flex;align-items:center;gap:5px;border-radius:var(--r-pill);padding:2px 8px;font:500 .6875rem/1.3 var(--font-sans);background:rgb(255 255 255/.08);color:var(--on-dark-soft)}
.role::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--on-dark-soft)}
.role--agent::before{background:var(--champagne)}
.role--mensch::before{background:var(--linen)}
/* Checkliste */
.ui-card--check .ui-card__row{grid-template-columns:20px 1fr}
.check{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--moss-tint);color:var(--moss)}
.check .i{width:12px;height:12px}
/* Mini fuer das Mega-Menü */
.ui-card--mini{transform:scale(.7);transform-origin:top right}
/* Spätes Detail (N10) */
.ui-card [data-late]{transition:opacity .4s var(--ease) .6s}
@media (prefers-reduced-motion:no-preference){html.js:not(.is-static) [data-reveal].ui-card:not(.is-in) [data-late],html.js:not(.is-static) [data-reveal]:not(.is-in) > .ui-card [data-late]{opacity:0}}
/* Platzierung */
.float-br{position:absolute;right:-3rem;bottom:-2.5rem}
.float-tl{position:absolute;left:-3rem;top:2rem}
.float-bl{position:absolute;left:-3rem;bottom:2rem}
.float-tr{position:absolute;right:-2rem;top:2rem}
.float-in-tl{position:absolute;left:1rem;top:1rem}
.float-in-tr{position:absolute;right:1rem;top:1rem}
.float-in-bl{position:absolute;left:1rem;bottom:1.5rem}
@media (max-width:767px){
  .float-br{right:-1rem}.float-tl{left:-1rem}.float-bl{left:-1rem}.float-tr{right:-1rem}
}
@media (max-width:479px){
  .float-br,.float-tl,.float-bl,.float-tr,.float-in-tl,.float-in-tr,.float-in-bl{position:relative;inset:auto;width:auto;margin:-2rem .75rem 0;z-index:3}
  .ui-card{max-width:100%}
}

/* ==========================================================================
   K06 Header mit Mega-Menüs
   ========================================================================== */
.skip{position:fixed;left:1rem;top:-4rem;z-index:var(--z-skip);background:var(--ink-btn);color:var(--linen);padding:.75rem 1.25rem;border-radius:var(--r-pill);font:500 .875rem/1 var(--font-sans);text-decoration:none;transition:top .2s}
.skip:focus{top:.75rem}
.nav{position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);background:rgb(255 255 255/1);transition:background-color .3s var(--ease),translate .4s var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line) 10% 90%,transparent);pointer-events:none}
.nav[data-variant="transparent"]:not(.is-scrolled):not(.is-open):not(:hover){background:rgb(255 255 255/0)}
html.nav-hidden .nav{translate:0 -100%}
.nav__bar{height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem}
.nav__logo{display:inline-flex;align-items:center;gap:.5rem;justify-self:start;color:var(--ink);text-decoration:none;font:400 1.375rem/1 var(--font-mark);letter-spacing:.01em}
.nav__mark{width:24px;height:24px}
.nav__menu > ul{display:flex;align-items:center;gap:.25rem}
.nav__trigger{display:inline-flex;align-items:center;gap:.25rem;padding:.625rem .875rem;border:0;background:none;color:var(--text);font:400 .9375rem/1.2 var(--font-sans);letter-spacing:0;border-radius:var(--r-pill);text-underline-offset:6px;text-decoration-thickness:1px}
.nav__trigger:hover,.nav__trigger[aria-expanded="true"]{color:var(--ink)}
.nav__trigger .i{width:14px;height:14px;transition:rotate .3s var(--ease-out)}
.nav__trigger[aria-expanded="true"] .i{rotate:180deg}
.nav__trigger.is-current{text-decoration-line:underline;text-decoration-color:var(--moss)}
.nav__actions{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}
.nav__lock{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--text);text-decoration:none}
.nav__lock:hover{color:var(--moss)}
.nav__lock .i{width:18px;height:18px}
.nav__burger{display:none;position:relative;width:44px;height:44px;border:0;background:none;border-radius:50%;padding:0}
.nav__burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);border-radius:2px;transition:translate .4s var(--ease-out),rotate .4s var(--ease-out)}
.nav__burger span:first-child{top:18px}.nav__burger span:last-child{top:25px}
.nav__burger[aria-expanded="true"] span:first-child{translate:0 3.5px;rotate:45deg}
.nav__burger[aria-expanded="true"] span:last-child{translate:0 -3.5px;rotate:-45deg}
/* Mega */
.mega{position:fixed;top:var(--nav-h);left:50%;width:min(49.375rem,calc(100vw - 2*var(--gutter)));translate:-50% 0;z-index:var(--z-mega);pointer-events:none;height:0}
.mega.is-open{pointer-events:auto}
.mega__bg{position:absolute;inset:0 0 auto;height:0;background:#fff;border-radius:0 0 var(--r-m) var(--r-m);box-shadow:0 30px 60px -30px rgb(34 29 26/.25);transition:height .4s var(--ease-out)}
.mega__panel{position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;transition:opacity .2s var(--ease-out),visibility 0s .2s}
.mega__panel.is-active{opacity:1;visibility:visible;transition:opacity .3s var(--ease-out),visibility 0s}
.mega__grid{display:grid;grid-template-columns:55fr 45fr}
.mega__list{padding:1.75rem 1.25rem 1.75rem}
.mega__group + .mega__group{margin-top:1.25rem}
.mega__eyebrow{padding:0 .75rem;margin-bottom:.625rem}
.mega__items{display:grid;gap:.125rem}
.mega__items--row3{grid-template-columns:repeat(3,1fr);gap:.25rem}
.mega__items--grid2{grid-template-columns:1fr 1fr;gap:.25rem}
/* Bildkarten (Branchen, 25.09.2026): 3:2 über dem Eintrag, ruhig, ohne Verlauf */
.mega__item--card .media{--ar:3/2;margin-bottom:.875rem}
.mega__item{display:block;padding:.625rem .75rem;border-radius:var(--r-s);text-decoration:none;transition:background-color .2s}
a.mega__item:hover,a.mega__item:focus-visible{background:var(--mist)}
a.mega__item:hover .mega__t{color:var(--moss)}
.mega__t{display:flex;align-items:center;gap:.5rem;font:500 1rem/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.mega__d{display:block;font:400 .875rem/1.4 var(--font-sans);letter-spacing:0;color:var(--text-soft);margin-top:.125rem}
.mega__item[aria-current="page"] .mega__t{color:var(--moss)}
.mega__item[aria-disabled="true"]{cursor:default}
.mega__item[aria-disabled="true"] .mega__t,.mega__item[aria-disabled="true"] .mega__d{color:#8F8780}
.mega__more{margin:1rem .75rem 0;padding-top:1rem;border-top:1px solid var(--line-soft);display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;font-size:.8125rem;color:var(--text-soft)}
.mega__more a{color:var(--text);text-decoration:none}
.mega__more a:hover{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.mega__feature{position:relative;display:flex;flex-direction:column;background:var(--mist);padding:1.5rem;border-radius:0 0 var(--r-m) 0;text-decoration:none;color:inherit}
.mega__feature .media{--ar:4/3;--r:var(--r-s)}
/* fill (Ressourcen, 25.09.2026): 4:3 als Grundmaß, wächst bis zur Listenhöhe; Motiv oben verankert, damit das Logo ganz bleibt */
.mega__feature--fill .media{flex:1 1 auto;min-height:0}
.mega__feature--fill .media img{object-position:50% 0}
.mega__feature .ui-card--mini{position:absolute;right:1.5rem;top:4.25rem;width:15rem}
.mega__ftext{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:1.25rem}
.mega__ftext .mega__t{font-size:1rem}
.mega__feature:hover .btn--round{--btn-bg:var(--moss);--btn-fg:var(--linen)}
.mega__feature:hover .mega__t{color:var(--moss)}
/* Einträge gleiten herein (Richtung per --dx) */
.mega__anim{opacity:0;translate:var(--dx,16px) 0;transition:opacity .3s var(--ease-out),translate .3s var(--ease-out);transition-delay:calc(var(--i,0) * 30ms)}
.mega__panel.is-active .mega__anim{opacity:1;translate:none}
.mega__feature.mega__anim{transition-duration:.35s}
.mega__backdrop{position:fixed;inset:var(--nav-h) 0 0;z-index:var(--z-backdrop);background:rgb(34 29 26/.25);opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.mega__backdrop.is-open{opacity:1;pointer-events:auto}
@media (max-width:991px){
  .nav__bar{grid-template-columns:1fr auto}
  .nav__menu,.nav__actions .btn--s,.mega,.mega__backdrop{display:none}
  .nav__burger{display:block}
}

/* ==========================================================================
   K07 Mobil-Menü
   ========================================================================== */
.mm{position:fixed;top:var(--nav-h);left:0;right:0;height:calc(100dvh - var(--nav-h));z-index:var(--z-mega);background:#fff;overflow:hidden;opacity:0;translate:0 -8px;transition:opacity .3s var(--ease-out),translate .3s var(--ease-out)}
.mm.is-open{opacity:1;translate:none}
.mm__level{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:1.25rem var(--gutter) 2.5rem;background:#fff;transition:translate .35s var(--ease-out),opacity .35s var(--ease-out)}
.mm__level--sub{translate:100% 0;visibility:hidden;transition:translate .35s var(--ease-out),visibility 0s .35s}
.mm__level--sub.is-active{translate:none;visibility:visible;transition:translate .35s var(--ease-out),visibility 0s}
.mm.is-sub .mm__level--root{translate:-20% 0;opacity:.4}
.mm__cat{display:flex;width:100%;align-items:center;justify-content:space-between;padding:1rem 0;border:0;border-bottom:1px solid var(--line);background:none;font:500 1.125rem/1.2 var(--font-sans);color:var(--ink);text-align:left}
.mm__cat .i{width:18px;height:18px;color:var(--text-soft)}
.mm__cta{margin-top:2rem}
.mm__contact{margin-top:1.25rem;display:grid;gap:.5rem;font-size:.9375rem}
.mm__contact a{display:inline-flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:none}
.mm__contact .i{width:16px;height:16px;color:var(--moss)}
.mm__back{display:inline-flex;align-items:center;gap:.25rem;padding:.5rem .75rem .5rem .25rem;margin-bottom:1rem;border:0;background:none;color:var(--text);font:500 .9375rem/1 var(--font-sans);border-radius:var(--r-pill)}
.mm__back .i{width:18px;height:18px}
.mm__level .mega__anim{opacity:1;translate:none}
.mm__level .mega__list{padding:0}
.mm__level .mega__eyebrow{padding:0;margin:1rem 0 .5rem}
.mm__level .mega__item{padding:.75rem 0;border-radius:0;border-bottom:1px solid var(--line-soft)}
.mm__level .mega__t{font-size:1.125rem}
.mm__level .mega__items--row3,.mm__level .mega__items--grid2{grid-template-columns:1fr}
/* Bildkarten mobil: kleines Vorschaubild links, Text rechts */
.mm__level .mega__item--card{display:grid;grid-template-columns:5.5rem 1fr;column-gap:1rem;align-items:center}
.mm__level .mega__item--card .media{grid-row:1/3;margin:0}
.mm__level .mega__item--card .mega__t{grid-column:2;align-self:end}
.mm__level .mega__item--card .mega__d{grid-column:2;align-self:start}
.mm__level .mega__more{margin:1rem 0 0}
.mm__level .mega__feature{margin-top:1.5rem;border-radius:var(--r-m)}
.mm__level .mega__feature .ui-card--mini{display:none}
html.mm-open{overflow:hidden}
@media (min-width:992px){.mm{display:none!important}}

/* ==========================================================================
   K08 Footer
   ========================================================================== */
.footer{background:var(--earth);color:var(--on-dark);padding-top:5rem}
.footer__top{display:flex;justify-content:space-between;gap:5rem}
.footer__claim{max-width:28.75rem;display:flex;flex-direction:column}
.footer__claim .t-h3{color:var(--on-dark)}
.footer__seals{display:flex;align-items:center;gap:3.5rem;margin-top:7rem}
.footer__badge{height:38px;width:auto}
.footer__seal{width:64px;height:64px}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,8.5rem));gap:2.5rem}
.footer__head{font:600 .875rem/1.2 var(--font-sans);letter-spacing:.02em;text-transform:uppercase;color:var(--on-dark);margin:0 0 1rem}
.footer__col ul{display:grid;gap:1rem}
.footer__col ul + .footer__head{margin-top:2.5rem}
.footer__col a{color:var(--on-dark-link);font-size:.875rem;line-height:1.35;text-decoration:none;text-underline-offset:3px}
.footer__col a:hover{color:var(--on-dark);text-decoration:underline}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem 2rem;flex-wrap:wrap;margin-top:4.5rem;padding-block:2.25rem;border-top:1px solid var(--line-dark)}
.footer__mark{display:inline-flex;align-items:center;gap:.5rem;color:var(--linen);font:400 1.5rem/1 var(--font-mark);text-decoration:none}
.footer__mark svg{width:26px;height:26px}
.footer__legal{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:.875rem;color:var(--on-dark-soft)}
.footer__legal a{color:var(--on-dark-soft);text-underline-offset:3px}
.footer__legal a[href^="mailto"],.footer__legal a[href^="tel"]{text-decoration:none}
.footer__legal a:hover{color:var(--on-dark)}
@media (max-width:991px){
  .footer__top{flex-direction:column;gap:3rem}
  .footer__claim{display:contents}
  .footer__claim .t-h3{order:1}
  .footer__cols{order:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem 1.5rem}
  .footer__seals{order:3;margin-top:0}
}
@media (max-width:479px){.footer__cols{grid-template-columns:1fr}}

/* ==========================================================================
   K09 Hero mit Baum
   ========================================================================== */
.hero-tree{position:relative;min-height:200vh;background:var(--grad-hero);overflow:hidden;isolation:isolate}
.hero-tree__media{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-tree__media > picture{display:contents}
.hero-tree__media img,.hero-tree__media video{position:absolute;top:0;left:50%;width:max(100vw,200vh,93rem);height:max(100vw,200vh,93rem);max-width:none;translate:-50% 0;object-fit:cover}
.hero-tree__ph{opacity:1}
.hero-tree__poster{z-index:1}
/* Wachstums-Karte (site.js heroTree): Start-Bild → Leinwand (WebGL, dieselbe cover-Lage wie die Bilder) → End-Bild h1-o.
   Ohne html.is-wachstum (reduziert, ?static=1, Datensparmodus, kein WebGL, Rückfall) steht nur das End-Bild.
   Wechsel hart, ohne Überblendung: an beiden Übergaben zeigen Bild und Leinwand dieselben Pixel. */
.hero-tree__start,.hero-tree__canvas{display:none}
.hero-tree__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;visibility:hidden}
html.is-wachstum .hero-tree__start,html.is-wachstum .hero-tree__canvas{display:block}
html.is-wachstum .hero-tree__start{z-index:2}
html.is-wachstum .hero-tree:not(.is-ende) .hero-tree__poster{visibility:hidden}
.hero-tree.is-leinwand .hero-tree__canvas{visibility:visible}
.hero-tree.is-ende .hero-tree__start{visibility:hidden}
.hero-tree__screen{position:relative;z-index:1}
.hero-tree__screen--1{min-height:max(50rem,100vh);padding-top:25vh}
.hero-tree__copy{max-width:31.875rem}
.hero-tree__copy .eyebrow + *{margin-top:1rem}
.hero-tree__copy .t-h1 + *{margin-top:1.5rem}
.hero-tree__copy .btns{margin-top:2.5rem}
.hero-tree__badge{margin-top:2.5rem;height:38px;width:auto}
/* Pixelprobe Phase 2: Der Bildgrund hinter dem Hero-Text ist dunkler als Travertin (B: bis rgb(197 186 170)).
   Bronze und Text erreichen dort nur 3,5–4,3:1; die tieferen Töne halten ≥ 4,7:1. */
.hero-tree__copy .eyebrow{color:var(--bronze-deep)}
.hero-tree__copy .t-lead{color:var(--text-deep)}
.hero-tree__screen--2{min-height:100vh;display:grid;align-items:center}
/* 24.09.2026: keine Sand-Blende mehr am Fuß. Das Foto läuft randabfallend bis zur Sektionskante (Sockel = harte Unterkante);
   min-height sorgt dafür, dass es auch bei 690–800 px Fensterhöhe bis ganz unten reicht. */
.hero-tree__media img,.hero-tree__media video{min-height:100%}
@media (max-height:699px) and (min-width:992px){.hero-tree__screen--1{padding-top:18vh}}
@media (max-width:991px),(max-height:499px){
  .hero-tree{min-height:0;display:flex;flex-direction:column}
  .hero-tree__screen--1{order:1;min-height:0;padding-top:calc(var(--nav-h) + 3rem);padding-bottom:0}
  .hero-tree__media{order:2;position:relative;inset:auto;aspect-ratio:4/5;margin-top:-15%;z-index:0}
  .hero-tree__media img,.hero-tree__media video{inset:0;left:0;top:0;width:100%;height:100%;translate:none}
  .hero-tree__screen--2{order:3;min-height:0;background:var(--seam-sand);padding-block:4rem}   /* Naht: stößt an die Unterkante des Hero-Fotos */
}
/* Mobil zeigt das End-Bild den Zuschnitt h1m-o = rechter 4:5-Teil des Quadrats. Das quadratische Start-Bild (und damit
   die Leinwand, die diese Lage übernimmt) liegt deshalb rechtsbündig. Grenze wie die <source media> des End-Bilds. */
@media (max-width:991px){.hero-tree__start{object-position:100% 50%}}

/* ==========================================================================
   K10 Statement-Zeilen
   ========================================================================== */
.statements{margin-left:64%;max-width:28rem}
.statements .t-statement + .t-statement{margin-top:1.2em}
@media (min-aspect-ratio:21/9) and (min-width:992px){.statements{margin-left:calc(64% + 15vh);margin-right:-15vh}}
@media (max-width:991px),(max-height:499px){.statements{margin-left:0;max-width:none}.statements .t-statement{font-size:1.625rem}}

/* ==========================================================================
   K11 Gestapelte Leistungskarten mit Baum-Überblendung
   ========================================================================== */
/* 24.09.2026: keine Maske mehr an der Bildoberkante. Die Sektion steht vollflächig auf der Studiowand der Zustandsbilder:
   ::after setzt die Oberkante jedes Fotos nach oben fort (Herb 24.09.2026: 23–42 Stützstellen aus der obersten Pixelreihe der h3-o-AVIFs, max. 1,6 Stufen Abweichung; vorher 16 aus h3-b),
   dadurch gibt es keine Naht und keine Überblendung. Bild etwas tiefer (bottom −16 %), damit Zweige unter dem Intro-Link bleiben. */
.stack{position:relative;background:var(--wall-h3);isolation:isolate;overflow:clip;
  --wall-h3:#D3C4B2}   /* Herb 24.09.2026: Wand neu aus h3-o-1…4 gemessen (die alten Stützstellen stammten aus h3-b, 4–8 Stufen daneben → sichtbare Kante über dem Foto) */
.stack__bg{position:sticky;top:0;height:100vh;margin-bottom:-100vh;overflow:hidden;pointer-events:none;z-index:0}
.stack__state{position:absolute;left:-5%;bottom:-16%;width:110vw;max-width:none;aspect-ratio:3300/1520;opacity:0;visibility:hidden;transition:opacity 1.25s var(--ease) .15s,visibility 0s 1.4s}
.stack__state.is-on{opacity:1;visibility:visible;transition:opacity .85s var(--ease),visibility 0s}
.stack__state img{width:100%;height:100%;object-fit:contain;object-position:left bottom}
.stack__state::after{content:"";position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:100vh;background:var(--wall)}
.stack__state[data-state="1"]{--wall:linear-gradient(90deg,#AA9383,#AF9888 3.4%,#AC9585 5.4%,#BCA796 12.8%,#C1AC9B 19.1%,#C9B4A3 23.2%,#C6B1A0 27.3%,#C9B4A3 28.4%,#C5B09F 30.2%,#C5B09F 34.4%,#C9B4A3 36%,#C9B6A5 37.6%,#C7B3A2 40.4%,#CABBA8 42.6%,#CDBEAB 44.7%,#CCBDAA 47%,#D2C3B0 49%,#D1C4B1 50.7%,#D1C4B2 89.2%,#CFC1AE 91.8%,#CCBBA9 92.6%,#CBB9A7 94.9%,#C9B9A7)}
.stack__state[data-state="2"]{--wall:linear-gradient(90deg,#A99183,#B0988A 3.2%,#AF9789 3.9%,#AA9284 4.8%,#AA9284 5.4%,#B0988A 7%,#BAA393 11.2%,#BDA596 12.9%,#BFA799 18%,#C8B1A1 21.8%,#C9B4A3 22.7%,#C9B4A3 25.3%,#C5B09F 27.4%,#C9B5A4 28.4%,#C5B09F 29.8%,#C5B09F 33.7%,#C8B5A4 37.8%,#C5B2A1 40.4%,#CAB7A6 41.6%,#C9BAA7 43.1%,#CEBFAC 44.5%,#CBBCA9 45.4%,#CCBDAA 46.8%,#D3C4B1 49.5%,#D4C5B2 89%,#D0C1AE 91.9%,#CEBFAC 92.2%,#C8B9A6 92.6%,#CABAA8 93.5%,#C8B6A4 95.2%,#CABAA7)}
.stack__state[data-state="3"]{--wall:linear-gradient(90deg,#A89382,#B19C8B 2.7%,#AA9483 4.3%,#A99382 5%,#B9A292 9.1%,#BCA796 12.1%,#BAA594 15.2%,#BEA998 18.3%,#CBB6A5 21.8%,#C9B5A4 25.4%,#C3AE9D 27.2%,#CAB5A4 28%,#CBB6A5 28.6%,#C4AF9E 30%,#C1AC9B 34.4%,#C7B4A3 37.5%,#C4B09F 40.5%,#CBB8A7 42%,#CCB9A8 43.6%,#CFBEAC 44.6%,#CBBAA8 45.5%,#CBBAA8 46.8%,#D1C0AE 48.2%,#D4C3B1 50.2%,#D5C4B2 62.1%,#D1C0AE 69%,#D5C4B3 88.6%,#D1BFAF 91.9%,#CFBDAC 92.3%,#C7B5A4 92.7%,#C6B3A2 95.2%,#CAB7A7 98.3%,#C9B6A6)}
.stack__state[data-state="4"]{--wall:linear-gradient(90deg,#A99185,#AD9588 0.9%,#B59C8F 2.3%,#AA9083 4.1%,#AD9387 4.9%,#BA9F91 7.4%,#C1A798 10.6%,#C2A899 12.4%,#BEA494 14.4%,#C0A797 16.8%,#C4AA9A 18.3%,#C9B3A3 19.9%,#CDB7A8 21.4%,#CEB8A9 24.3%,#CBB5A7 26.1%,#C4AB9C 27%,#C9B0A1 27.4%,#CFB8AA 27.9%,#CCB5A7 29%,#C5AC9D 30.1%,#C6AD9D 33%,#C4AA9A 34.1%,#C5AC9C 35.1%,#C8B2A1 36.9%,#CAB3A4 37.6%,#C7B1A2 39.3%,#C4AD9D 40.5%,#CDB7A8 42%,#CEB7A9 43.4%,#D3C0B1 44.7%,#CFBBAC 45.3%,#CBB6A7 45.9%,#CEB9AA 46.8%,#D7C4B5 49.5%,#D7C5B6 51.8%,#D6C4B5 53.3%,#D7C5B6 58.1%,#D5C2B4 64.2%,#D2C0B1 68.5%,#D5C2B4 70.7%,#D6C4B6 78%,#D7C4B7 82.1%,#D6C3B8 85.1%,#D7C5B9 88.9%,#D5C3B6 90.1%,#D4C1B3 91.9%,#D2BFB1 92.4%,#C9B3A6 92.9%,#C6AFA1 94.8%,#C7B0A2 96.9%,#CDB6A9 98.9%,#CCB7A9)}   /* Herb 2 25.09.2026: h3-o-4 ohne Blüten neu exportiert → 52 Stützstellen aus der obersten Pixelreihe (AVIF/WebP 1600+3200 gemittelt, 9 px geglättet), max. 1,5 Stufen */
/* Intro steht auf der Studiowand (links bis #AD9685/#B59E8F): kleine Schrift in Headline-Tinte, Kontrast ≥ 6,6:1 */
.stack__intro .eyebrow,.stack__intro .link-s{color:var(--ink-head)}
.stack__state::before{content:attr(data-img);position:absolute;left:8%;bottom:22%;font:500 11px/1 var(--font-sans);color:var(--text-soft)}
.stack__state:has(img.is-loaded)::before{content:none}
.stack__inner{position:relative;z-index:1;padding-block:var(--sec-l) var(--sec-m)}
.stack__intro{position:sticky;top:20vh;align-self:start}
.stack__intro .t-small{margin-top:1.5rem}
.stack__cards{display:flex;flex-direction:column;align-items:flex-end}
.stack__cards::after{content:"";display:block;height:50vh;flex:none}
.stack__card{position:sticky;top:calc(20vh + var(--i,0) * 10px);width:28.125rem;max-width:100%;min-height:32.5rem;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);padding:var(--pad,36px)}
.stack__card + .stack__card{margin-top:100vh}
.stack__card .cicon{margin-bottom:auto}
.stack__card .t-h3{margin-top:2rem}
.stack__card .t-body{margin-top:1rem}
.stack__links{margin-top:1.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem}
.stack__card-state{display:none}
/* 24.09.2026 Scrollkarten-Objekte (Konzept „Skulptur statt Collage-Icon“): freigestellte Skulptur (WebP/AVIF mit Alpha,
   Kontaktschatten als Alpha) statt des 44-px-Collage-Icons. Das Bild steht im Fluss der Karte, Text kann nie darunter geraten;
   negative Ränder schieben es oben links über die Kartenkante. Kein mix-blend-mode: Über der Studiowand würde multiply
   das Objekt abdunkeln und an der Kartenkante eine Stufe zeigen; die Freistellung ist über Weiß pixelgleich zum Render.
   --ex/--ey = Lage der Kartenkante im Bild (Anteil der Bildbreite), je Motiv gemessen: links/oben davon nur Laub, Blüte, Kabel.
   Nur mit .stack--obj (index.html); Seiten mit Collage-Icon (komponenten.html, index-design.html) bleiben unverändert. */
.stack--obj .stack__card{--pad:36px;--obj:clamp(15rem,calc(40vh - 1rem),25rem);--ex:.08;--ey:.12;min-height:calc(var(--obj) * .89 + 18.5rem)}
/* Wahl-Motive des Inhabers (24.09.2026, 04:10): Stein/Metall bleibt in der Karte, nur Organisches ragt hinaus.
   Negatives --ex rückt das Objekt nach innen (Steinkante links bündig mit dem Text), --exm gilt mobil.
   strategie: Travertinplatte, nichts Organisches am Rand -> ganz in der Karte. integration: Verde-Block ganz in der Karte
   (Oberkante ~18 px innen, Kontaktschatten links endet vor der Kartenkante). openai: nur die Olivenkrone ragt über die Oberkante. */
.stack--obj .stack__card[data-accent="strategie"]{--ex:-.07;--exm:-.07;--ey:.04}
.stack--obj .stack__card[data-accent="integration"]{--ex:.11;--ey:.02}
.stack--obj .stack__card[data-accent="mass"]{--ex:.14;--ey:.18}
.stack--obj .stack__card[data-accent="openai"]{--ex:-.06;--exm:-.06;--ey:.16}
.stack__obj{position:relative;z-index:1;flex:none;width:var(--obj);aspect-ratio:1;pointer-events:none;
  margin:calc(-1 * var(--pad) - var(--ey) * var(--obj)) 0 calc(1rem + (var(--ey) - .11) * var(--obj)) calc(-1 * var(--pad) - var(--ex) * var(--obj));
  transition:opacity .6s var(--ease),translate .6s var(--ease)}
.stack__obj picture,.stack__obj img{display:block;width:100%;height:100%}
.stack__obj img{object-fit:contain}
.stack__card .stack__obj + .t-h3{margin-top:0} /* Titel steht in allen vier Karten auf gleicher Höhe (Ausgleich über margin-bottom) */
/* Nur ein Objekt zur Zeit über der Stapelkante: ältere Karten (site.js stack(), .is-under) blenden ihr Objekt aus */
.stack__card.is-under .stack__obj{opacity:0;translate:0 12px}
@media (prefers-reduced-motion:reduce){.stack__obj{transition:none}}
@media (max-width:991px),(max-height:499px){
  .stack{background:var(--sand)}
  .stack__intro .eyebrow{color:var(--acc)}
  .stack__intro .link-s{color:var(--text-soft)}
  .stack__bg{display:none}
  .stack__inner{padding-block:var(--sec-l)}
  .stack__intro{position:static}
  .stack__cards{align-items:stretch;gap:1rem}
  .stack__cards::after{display:none}
  .stack__card{position:relative;top:auto;width:auto;min-height:0}
  .stack__card + .stack__card{margin-top:0}
  .stack__card-state{display:block;--ar:16/9;--r:var(--r-s);margin-bottom:1.5rem}
  .stack__card-state img{object-position:left}
  /* Mobil: Objekt ragt nur nach oben in den Kartenabstand, links bündig (Seitenrand zu knapp für Überstand).
     Das 16:9-Baumbild je Karte entfällt, sonst konkurrieren zwei Bilder pro Karte. */
  .stack--obj .stack__cards{gap:4rem;padding-top:2.5rem}
  .stack--obj .stack__card{min-height:0;--pad:28px;--obj:min(78vw,22rem)}
  .stack--obj .stack__card[data-accent]{--ex:var(--exm,0)}
  .stack--obj .stack__card.is-under .stack__obj{opacity:1;translate:none}
  .stack--obj .stack__card-state{display:none}
}

/* ==========================================================================
   K12 Lifecycle-Schritte
   ========================================================================== */
.steps{display:flex;gap:.75rem;align-items:stretch}
.step{flex:1 1 0;background:#fff;border-radius:var(--r-m);padding:24px;display:flex;flex-direction:column;gap:.75rem}
.step__num{color:var(--bronze)}
.steps__sep{display:contents}
.steps .chevron{align-self:center;width:16px;height:16px;color:var(--text-soft);flex:none}
@media (max-width:991px){.steps{display:grid;grid-template-columns:1fr 1fr}.steps .chevron{display:none}}
@media (max-width:767px){.steps{grid-template-columns:1fr;gap:.5rem}.steps .chevron{display:block;justify-self:center;rotate:90deg}}

/* ==========================================================================
   K13 Video-Block
   ========================================================================== */
.vid{position:relative;height:200vh;background:var(--mist)}
.vid__head{position:sticky;top:0;height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-inline:var(--gutter);transform-origin:50% 50%;margin-bottom:0}
.vid__head > p{max-width:32rem}
.vid__stage{position:sticky;top:10vh}
.vid__card{position:relative;max-width:var(--w-xl);margin-inline:auto;aspect-ratio:2/1;border-radius:var(--r-l);overflow:hidden}
.vid__card .media{position:absolute;inset:0;--r:0;aspect-ratio:auto;height:100%}
.vid__card::after{content:"";position:absolute;inset:0;background:rgb(34 29 26/.28);z-index:1;pointer-events:none}
.vid__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
.vid__note{margin-top:.75rem;text-align:center}
@media (max-width:991px),(max-height:499px){
  .vid{height:auto;padding-block:var(--sec-l)}
  .vid__head{position:static;height:auto;margin-bottom:2.5rem}
  .vid__stage{position:static}
  .vid__card{aspect-ratio:16/9}
}
/* Lightbox (N21) */
.lightbox{width:min(92vw,1600px);max-width:none;max-height:none;padding:0;border:0;background:transparent;overflow:visible;color:var(--linen)}
.lightbox::backdrop{background:rgb(20 17 15/.86)}
.lightbox video{width:100%;max-height:82vh;border-radius:var(--r-m);background:#000}
.lightbox__close{position:absolute;right:0;top:-3.25rem;display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1rem;border:0;border-radius:var(--r-pill);background:var(--linen);color:var(--ink);font:500 .875rem/1 var(--font-sans)}
.lightbox__close .i{width:16px;height:16px}
.lightbox__note{margin-top:.75rem;color:var(--on-dark-soft);text-align:center}
@media (max-width:767px){.lightbox{width:min(92vw,460px)}.lightbox video{max-height:74vh}}

/* ==========================================================================
   K14 Fallstudien-Karte und Raster
   ========================================================================== */
.case{position:relative;height:100%;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-m);overflow:hidden;text-decoration:none;color:inherit}
.case__img{--ar:auto;height:18.75rem;border-radius:var(--r-m) var(--r-m) 0 0}
.case__img img{transition:transform .2s var(--ease-quart),opacity .4s var(--ease)}
.case:hover .case__img img,.case:focus-visible .case__img img{transform:scale(1.07);transition:transform .5s var(--ease-quart),opacity .4s var(--ease)}
.case__body{display:flex;flex-direction:column;flex:1;min-height:13.5rem;padding:24px}
.case__pills{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.875rem}
.case__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.case__meta{margin-top:.5rem;font-size:.8125rem;color:var(--text-soft)}
.case__transfer{margin-top:.75rem;font-size:.875rem;color:var(--text-soft)}
.case__foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.case__body .case__title + .case__foot,.case__body .case__meta + .case__foot,.case__body .case__transfer + .case__foot{margin-top:auto}
.case__body > :nth-last-child(2){margin-bottom:1.5rem}
.case:focus-visible{outline-offset:4px}
.case--cta{background:var(--linen);justify-content:center;align-items:flex-start;padding:2rem;gap:1.25rem;min-height:32.25rem;box-shadow:inset 0 0 0 1px var(--line)}
.cases--offset{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.cases--offset > .case:nth-child(2){translate:0 40px}
.case--compact{height:auto}
.case--compact .case__img{height:auto;aspect-ratio:5/3}
.case--compact .case__body{min-height:0;padding:20px 20px 24px}
.case--compact .case__title{-webkit-line-clamp:2;line-clamp:2;font-size:1.25rem}
.case--compact .case__pills{margin-bottom:.625rem}
.case--compact .case__body > :nth-last-child(2){margin-bottom:0}
@media (max-width:991px){.case--cta{min-height:0}}
/* ChatGPT-Logo quer43 (25.09.2026): Bei 768–991 px ist das Kartenbild bis 1,55:1 breit, das Logo hat nur ≈ 2 px Luft
   → dort kein Hover-Zoom (1,02 schnitte noch an), mehr Rand gibt die Marmorplatte nicht her. */
@media (min-width:768px) and (max-width:991px){.case:hover .case__img.media--quer43 img,.case:focus-visible .case__img.media--quer43 img{transform:none}}
@media (max-width:767px){
  .case__img{height:auto;aspect-ratio:4/3}
  .cases--offset{grid-template-columns:1fr}
  .cases--offset > .case:nth-child(2){translate:none}
}

/* ==========================================================================
   K15 CTA-Box (+ Filmstreifen N22)
   ========================================================================== */
.cta{position:relative;max-width:var(--w-cta);margin-inline:auto;min-height:32rem;border-radius:var(--r-l);padding:84px 96px 84px 80px;display:flex;align-items:center;gap:3rem;background:var(--grad-cta-sand)}
.cta--sand{background:var(--grad-cta-sand)} .cta--sage{background:var(--grad-cta-sage)} .cta--bronze{background:var(--grad-cta-bronze)}
.cta__text{position:relative;z-index:2;max-width:30.9rem}
.cta__text .t-h2{line-height:1.1}
.cta__text > * + *{margin-top:1.5rem}
.cta__text > .btns,.cta__text > .btn{margin-top:2.5rem}
.cta__text > .t-small{margin-top:1rem;color:var(--text-soft)}
.cta__text > .tlink-row{margin-top:1.25rem}
.cta__object{position:absolute;right:0;top:-6rem;bottom:0;width:38rem;clip-path:inset(-100% 0 0 0);z-index:1}
.cta__object.media{background-position:center bottom;background-size:80%}
.cta__object img{object-fit:contain;object-position:bottom}
.cta--compact{min-height:0;padding:56px 64px}
.cta__visual{position:relative;flex:0 0 32rem;height:26rem;margin-left:auto}
.cta__plate{position:absolute;right:0;top:0;width:21rem;height:18.75rem;--r:var(--r-m)}
.cta__list{position:absolute;left:0;bottom:0;width:25rem;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-float);padding:24px 28px;z-index:2}
.cta__list .ui-card__title{font-size:1.125rem;margin-bottom:.75rem}
.dotlist{display:grid;gap:.25rem}
.dotlist li{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-top:1px solid var(--line-soft);font-size:.9375rem;color:var(--ink)}
.dotlist li:first-child{border-top:0}
.dotlist li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,var(--acc) 0 4.5px,var(--acc-tint) 5px)}
.filmstrip{position:relative;max-width:var(--w-cta);height:12rem;margin:0 auto 1.5rem;border-radius:var(--r-l);overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 2.5rem}
.filmstrip .media{position:absolute;inset:0;--r:0}
.filmstrip::after{content:"";position:absolute;inset:0;background:rgb(34 29 26/.28);z-index:1;pointer-events:none}
.filmstrip > .btn,.filmstrip > .t-micro{position:relative;z-index:2}
.filmstrip > .t-micro{color:var(--linen);background:rgb(34 29 26/.72);padding:.375rem .75rem;border-radius:var(--r-pill)}   /* Pixelprobe: auf hellen Kacheln sonst 2,3:1 */
/* N39: Poster H-5 gedämpft (Limettengrün der Demo-Marke) */
.media[data-img="H-5"] img{filter:saturate(.55) sepia(.12)}
@media (min-width:992px) and (max-width:1199px){
  .cta{padding:64px 56px}
  .cta__visual{flex-basis:25rem;height:24rem}
  .cta__plate{width:17rem;height:16rem}
  .cta__list{width:21rem}
  .cta__object{width:clamp(20rem,calc(100% - 35rem),30rem)}   /* Objekt darf die Textspalte (30.9rem + Polster) nicht überdecken */
}
@media (max-width:991px){
  .cta{flex-direction:column;align-items:stretch;padding:48px 24px 0;min-height:0;gap:0}
  .cta__text{max-width:none}
  .cta__object{position:relative;inset:auto;width:100%;max-width:26rem;height:auto;aspect-ratio:1;margin:3rem auto 0;clip-path:none}
  .cta--checklist{padding-bottom:24px}
  .cta__visual{flex:none;height:auto;margin:2.5rem 0 0;display:grid;gap:0}
  .cta__plate{position:relative;width:100%;height:14rem}
  .cta__list{position:relative;width:auto;margin:-2.5rem .75rem 0}
  .cta--compact{padding:40px 24px}
  .filmstrip{height:auto;aspect-ratio:16/9;flex-direction:column;justify-content:center;padding:1.5rem}
  .filmstrip > .t-micro{position:absolute;left:0;right:0;bottom:-1.75rem;color:var(--text-soft);text-align:center;background:none;padding:0}
  .filmstrip{overflow:visible;margin-bottom:3.25rem}
  .filmstrip .media{border-radius:var(--r-l)}
  .filmstrip::after{border-radius:var(--r-l)}
}
/* K15 Vitrine (24.09.2026, Pyramide P2 + Blüte): H-6 als randloses Foto rechts in voller Boxhöhe, vom unteren Boxrand
   angeschnitten, ohne Maske und ohne Fade. Die Box trägt den Studiogrund des Fotos (magick-Probe der linken Bildkante,
   18 Stufen); der leere Grund links im Foto ist beim Export auf genau diesen Verlauf gezogen (Bandmittel ≤ 0,4, dekodiertes
   AVIF ≤ 2) und das Foto füllt die Boxhöhe 1:1 → keine Naht. Das Foto ist oben um 72 px und links um 96 px Grund erweitert
   (2496×1864, gleiches Seitenverhältnis), damit Stapel und Zweige oben Luft haben. Die Basis ist auf die Blüte verschoben
   (+2/+1 px), per Farbkurve an ihren Grund gezogen und trägt links pixelgleich deren Grund → die Überblendung ist nahtlos.
   Die Blüte liegt deckungsgleich darüber und blendet beim ersten Sichtbarwerden ein (site.js: bloom).
   Herb 24.09.2026: Grün/Granit-Fassung (cta-pyramide-herb-r2 + bluete-herb-r2), gleiche Leinwand 2496×1864 (+96 links, +72 oben),
   Basis +1/+1 px registriert, per Kanal-Farbkurve an die Blüte gezogen und auf dem ganzen Grund pixelgleich zur Blüte.
   Linke Kante und oberste Zeile im Master exakt auf die Verläufe gezogen (25-px-Bandmittel ≤ 0,4; dekodiert AVIF ≤ 1,6, WebP ≤ 1,7).
   Herb 2 25.09.2026 (cta-vitrinen-herb2-r2 + bluete-herb2-r3): links 1100 px und oben 72 Zeilen pixelgleich zur Herb-Fassung, Blüte außerhalb
   der Pflanzenzone pixelgleich zur Basis; Kanten dekodiert unverändert (Bandmittel ≤ 2,1) → Verläufe bleiben. */
.cta--vitrine{overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#EDE7E1,#EDE7E1 3.9%,#EFE8E2 8%,#F0E7E1 10.5%,#F1E8E3 12.9%,#F0E7DF 17.2%,#EBE2DB 31.5%,#E9E1DA 35.2%,#E5DBD5 42.2%,#E2D7D1 45.8%,#DCD2C9 53.7%,#DBCEC5 56.4%,#CBBEB5 70.3%,#C9BBB2 74%,#BEB0A7 83.9%,#B6A69D 92.2%,#B2A499 94.7%,#AE9F95)}
.cta--vitrine .cta__object--vitrine{top:0;bottom:auto;height:100%;width:auto;aspect-ratio:2496/1864;clip-path:none;background:none;border-radius:0}   /* linker Bildteil ist leerer Grund und darf unter die Textspalte (z-index 2) laufen */
.cta--vitrine .cta__object--vitrine::before{content:none}
.cta--vitrine .cta__object--vitrine img{object-fit:cover;object-position:100% 100%}
.cta__object--vitrine .cta__bloom img{z-index:2;transition:opacity 2.4s var(--ease) .9s}
html.js .cta__object--vitrine:not(.is-bloom) .cta__bloom img{opacity:0}
html.is-reduced .cta__object--vitrine .cta__bloom img{transition:none}
@media (min-width:992px) and (max-width:1199px){.cta--vitrine .cta__object--vitrine{right:-2.5rem}}   /* rechts ist 8 % leerer Grund; so bleibt der Stapel bei 992 px 38 px vor der Textspalte und 18 px vor dem Boxrand */
.cta--vitrine .cta__text > .t-small,.cta--vitrine .cta__text .link-s:not(:hover){color:var(--text);color:color-mix(in srgb,var(--text),var(--ink) 40%)}   /* Fotogrund unten wärmer/dunkler als der alte Sandverlauf: --text-soft fiele dort auf 3,5:1, so ≥ 5,2:1 bis 85 % und ≥ 4,9:1 bis 90 % Boxhöhe (Herb-Grund 24.09.2026 nachgerechnet: ≥ 4,8:1 bis 85 %, ≥ 4,5:1 bis 90 %) */
/* Mobil steht das Foto randlos unter dem Text; seine Oberkante trifft die Box. Die Oberkante des Fotos ist waagrecht
   nicht gleich (rechts vom Stapel Schattenseite 211/193/185), deshalb trägt die Box hier den waagrechten Verlauf der
   obersten Bildzeile im jeweiligen Ausschnitt (magick-Probe; die oberste Bildzeile ist beim Export genau auf diesen Verlauf
   gezogen, der Hochformat-Verlauf ist exakt daraus abgeleitet). */
@media (max-width:991px){
  .cta--vitrine{background:linear-gradient(90deg,#EDE7E1,#EDE7E1 3.4%,#EFEAE6 13.5%,#EEEAE6 19.7%,#E9E6E1 32.7%,#E1D9D7 54.4%,#D8D3CF 64%,#C4BDB9)}   /* Ausschnitt 11–2496 von 2496 */
  .cta--vitrine .cta__object--vitrine{position:relative;inset:auto;height:auto;width:calc(100% + 48px);max-width:none;aspect-ratio:4/3;margin:2.5rem -24px 0}
}
@media (max-width:767px){
  .cta--vitrine{background:linear-gradient(90deg,#E7E2DE,#E1D9D7 25.4%,#D8D3CF 41.3%,#C4BDB9)}   /* Ausschnitt 985–2476 von 2496 */
  .cta--vitrine .cta__object--vitrine{aspect-ratio:4/5}
  .cta--vitrine .cta__object--vitrine img{object-position:98% 100%}   /* Stapel (x 1172–2286) mittig im Hochformat */
}

/* ==========================================================================
   K16 Split-Hero mit Objekt und UI-Karte
   ========================================================================== */
/* Naht (Herb 24.09.2026): Objektfotos ohne Alpha stehen randlos auf dem Grund. Alle Split-Heros stehen auf --seam-paper (Rand 250/248/246).
   OpenAI-Einführung (25.09.2026): Das ChatGPT-Logo liegt auf geädertem Marmor, der an keine Fläche nahtlos anschließt
   → dort bewusst gerahmtes Foto (media--r16, 10:11-Zuschnitt oai-logo-aufsicht-1011) statt Sondergrund --seam-oai. */
.hero-split{background:var(--seam-paper);min-height:min(100vh,52rem);padding-top:var(--nav-h);display:flex;align-items:center}
.hero-split > .wrap{padding-block:4rem}
.hero-split .g-split{align-items:center}
@media (min-width:768px){.hero-split__visual .float-br{right:-2rem}}
.hero-split__text > p{max-width:32rem}
.hero-split__visual{position:relative;width:100%;max-width:500px;justify-self:end}
.hero-split__visual .media--object{--ar:10/11}
@media (max-width:991px){
  .hero-split{min-height:0}
  .hero-split__visual{max-width:26rem;justify-self:center}
}

/* ==========================================================================
   K17 Zentrierter Hero mit Breitbild und zwei Karten
   ========================================================================== */
.hero-center{background:var(--paper);padding-top:9rem;padding-bottom:var(--sec-m)}
.hero-center__head{max-width:60rem;margin-inline:auto;text-align:center}
.hero-center__head > p{max-width:35rem;margin-inline:auto}
.hero-center__head .btns{justify-content:center}
.hero-center__visual{position:relative;max-width:60rem;margin:4rem auto 0}
.hero-center__visual .media{--ar:2/1;--r:var(--r-s)}
.hero-center__visual .float-tl{left:-3rem;top:2rem}
.hero-center__visual .float-br{right:-3rem;bottom:3rem}
@media (min-width:992px) and (max-width:1199px){.hero-center__visual .float-tl{left:-1rem}.hero-center__visual .float-br{right:-1rem}}
@media (max-width:991px){
  .hero-center{padding-top:7rem}
  .hero-center__visual{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
  .hero-center__visual .media{grid-column:1/-1}
  .hero-center__visual .ui-card{position:relative;inset:auto;width:auto;margin:0}
}
@media (max-width:767px){.hero-center__visual{grid-template-columns:1fr}}

/* ==========================================================================
   K18 Manifest-Hero mit Schlüsselbild · K19 Index-Kopf
   ========================================================================== */
.hero-manifest{position:relative;padding-top:9rem;padding-bottom:var(--sec-m);border-bottom:1px solid var(--line)}
.hero-manifest__head{text-align:center;max-width:64rem;margin-inline:auto}
.hero-manifest__head > p{max-width:56rem;margin-inline:auto;color:var(--text-soft)}
.hero-manifest__head > .btn{margin-top:2.5rem}
.hero-manifest__img{margin-top:4rem;--ar:5/2;--r:var(--r-3xl)}
.hero-index{position:relative;padding:9rem 0 4rem;text-align:center;border-bottom:1px solid var(--line)}
.hero-index > .wrap > p{max-width:40rem;margin-inline:auto;color:var(--text-soft);text-wrap:balance}
.hero-index > .wrap > * + *{margin-top:1.5rem}
.hero-index .tlink{margin-top:1.25rem}
@media (max-width:767px){
  .hero-manifest{padding-top:7rem}
  .hero-manifest__img{--ar:4/3;--r:var(--r-xl)}
  .hero-index{padding-top:7rem}
  .hero-manifest .t-display,.hero-index .t-display{font-size:2.5rem}
}

/* ==========================================================================
   K20 Artikel-, Fallstudien- und Workshop-Kopf
   ========================================================================== */
.hero-article{padding-top:calc(var(--nav-h) + 4rem);padding-bottom:4rem}
.hero-article__grid{display:grid;grid-template-columns:5fr 7fr;gap:2rem;align-items:start}
.hero-article__grid .t-h1{margin-top:1.5rem}
.byline{margin-top:2rem;font-size:1rem;color:var(--text)}
.byline__meta{display:block;margin-top:.25rem;font-size:.875rem;color:var(--text-soft)}
.hero-article__img{--ar:3/2;--r:var(--r-xl)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;font-size:.875rem;color:var(--text-soft)}
.crumbs li{display:inline-flex;align-items:center;gap:.25rem}
.crumbs li + li::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.crumbs a{color:var(--text);text-decoration:none}
.crumbs a:hover{color:var(--moss);text-decoration:underline;text-underline-offset:3px}
.hero-case{position:relative;padding:9rem 0 4rem;text-align:center;border-bottom:1px solid var(--line)}
.hero-case .t-display{max-width:60rem;margin-inline:auto}
.meta{display:grid;gap:.625rem;justify-content:center;margin-top:2.5rem}
.meta > div{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem .75rem}
.meta dd{color:var(--text-soft);display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}
.hero-workshop{position:relative;background:var(--stone);padding-top:calc(var(--nav-h) + 4rem);padding-bottom:var(--sec-m)}
.hero-workshop__col{max-width:60rem;margin-inline:auto}
.hero-workshop__label{color:var(--moss);font-weight:500}
.hero-workshop .ws-title{font-family:var(--font-serif);font-weight:var(--head-wght);font-size:2.5rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink-head);margin-top:.75rem;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.meta-lines{display:grid;gap:.5rem;margin-top:1.5rem;color:var(--text)}
.meta-lines > span{display:inline-flex;align-items:center;gap:.5rem}
.meta-lines .i{width:18px;height:18px;color:var(--moss)}
.hero-workshop .frame--double{margin-top:2.5rem}
.hero-workshop .frame--double .media{--ar:5/4}
@media (max-width:991px){.hero-article__grid{grid-template-columns:1fr}.hero-article__img{order:0}}
@media (max-width:767px){.hero-case{padding-top:7rem}.hero-workshop .ws-title{font-size:2rem}}
@media (max-width:479px){.frame--double{padding:8px;border-radius:18px}.frame--double > .frame{padding:8px}}
/* K20c + K41: Inhaltsspalte der Workshop-Detailseite bündig mit dem Kopf, Lesespalte linksbündig darin */
.wd-col{max-width:var(--w-m)}
.wd-col .prose{margin-inline:0}
.ws-dates{max-width:var(--w-article);margin-top:var(--s-8)}
.ws-dates .rows{margin-top:var(--s-4)}

/* ==========================================================================
   K21 Ergebnis-Zeilen
   ========================================================================== */
.results{display:grid;gap:10rem;margin-left:calc((100% - 2rem)/4 + 2rem)}
.result{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.result .shot{max-width:373px;width:100%}
.result .media{--ar:4/5;--r:var(--r-s)}
.result__text > * + *{margin-top:1rem}
.result__text .t-h3{margin-top:.75rem}
.result__text p{max-width:22.5rem}
.result .ui-card{width:15rem}
@media (max-width:991px){
  .results{margin-left:0;gap:4rem}
  .result{grid-template-columns:1fr;gap:2.5rem}
  .result .shot{max-width:28rem}
}

/* ==========================================================================
   K22 Kartenraster mit Collage-Icon
   ========================================================================== */
.tile{background:#fff;border-radius:var(--r-m);padding:32px}
.tile .cicon{margin-bottom:3.75rem}
.tile .eyebrow{margin-bottom:.75rem}
.tile .t-card + .t-small,.tile .t-card + p{margin-top:.5rem}
.g-2.tiles--2x2{gap:1.5rem}
.tiles--2x2 .tile{padding:36px}
.tiles--2x2 .tile .cicon{margin-bottom:5rem}
.cicon{position:relative;display:block;width:64px;height:64px;flex:none}
.cicon__tex{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:6px;background:var(--tex,none) center/cover,var(--ph-noise),var(--acc-tint);box-shadow:inset 0 0 0 1px rgb(42 37 33/.05)}
.cicon__dots{position:absolute;right:0;bottom:0;width:28px;height:28px;opacity:.9;background:
  radial-gradient(circle,var(--acc) 1.4px,transparent 1.7px) 0 0/7px 14px,
  radial-gradient(circle,var(--acc) 1.4px,transparent 1.7px) 3.5px 7px/7px 14px}
.cicon__chip{position:absolute;left:28px;top:28px;display:grid;place-items:center;width:28px;height:28px;border-radius:6px;background:#fff;box-shadow:var(--sh-ring);color:var(--acc)}
.cicon__chip .i{width:16px;height:16px}

/* ==========================================================================
   K23 Hürden (Pyramide oder offene Spalten)
   ========================================================================== */
.hurdles-title{text-align:center;margin-bottom:3rem}
.hurdles{display:flex;flex-wrap:wrap;justify-content:center;gap:3rem 0}
.hurdle{flex:0 1 calc(100%/3);max-width:25.7rem;padding:24px 32px;text-align:center;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:.75rem}
.hurdles--pyramid .hurdle:nth-child(3),.hurdles--pyramid .hurdle:last-child{border-right:0}
.hurdle__t{font:600 1rem/1.35 var(--font-sans);color:var(--ink)}
.hurdle__d{font-size:.875rem;color:var(--text-soft)}
.hurdles--cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hurdles--cols .hurdle{max-width:none;text-align:left;align-items:flex-start;border-right:0;border-left:1px solid var(--line-soft);padding:8px 28px}
.hurdles--cols .hurdle:first-child{border-left:0;padding-left:0}
@media (max-width:991px){.hurdles--cols{grid-template-columns:1fr 1fr;gap:2rem 0}.hurdles--cols .hurdle:nth-child(3){border-left:0;padding-left:0}}
@media (max-width:767px){
  .hurdles{gap:0}
  .hurdle,.hurdles--cols .hurdle{flex-basis:100%;max-width:none;border:0;border-top:1px solid var(--line-soft);padding:24px 0}
  .hurdle:first-child,.hurdles--cols .hurdle:first-child{border-top:0}
  .hurdles--cols{grid-template-columns:1fr}
}

/* ==========================================================================
   K24 Kontrastkarten und Aufgaben-Karten
   ========================================================================== */
.contrast-head{align-items:end;margin-bottom:3rem}
.contrast-head .head{margin-bottom:0}
.contrast-head > p{max-width:15rem;justify-self:end}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.contrast .tile{padding:32px 28px}
.contrast .tile .cicon{margin-bottom:2.5rem}
.contrast .t-h3{margin-top:.75rem;margin-bottom:1.5rem}
.xlist{display:grid;gap:.875rem}
.xlist li{display:flex;gap:.75rem;align-items:flex-start;color:var(--text)}
.xmark{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;margin-top:2px}
.xmark .i{width:12px;height:12px}
.xmark--no{background:var(--copper-tint);color:var(--copper)}
.xmark--yes{background:var(--moss-tint);color:var(--moss)}
.eyebrow--copper{color:var(--copper)} .eyebrow--moss{color:var(--moss)}
.job .t-h5{margin-top:.75rem;margin-bottom:1rem}
.job__goal{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font:500 1rem/1.45 var(--font-sans);color:var(--moss)}
@media (max-width:991px){.contrast-head > p{justify-self:start;max-width:36rem}}
@media (max-width:767px){.contrast{grid-template-columns:1fr}}
/* Themenmotiv neben „Heute“ / „Mit azena“ (TI-02 florale App-Screens, 24.09.2026) */
.contrast--media{grid-template-columns:1fr 1fr .9fr}
.contrast__media{--r:var(--r-m);min-height:26rem}
@media (max-width:991px){.contrast--media{grid-template-columns:1fr 1fr}.contrast__media{grid-column:1/-1;justify-self:center;width:min(100%,26rem);min-height:0;aspect-ratio:4/5}}
@media (max-width:767px){.contrast--media{grid-template-columns:1fr}.contrast__media{width:100%}}

/* ==========================================================================
   K25 Zitatkarte auf Bild
   ========================================================================== */
.quote-split{align-items:center}
.quote-split--img-right .quote-split__img{order:2}
.quote-split__img{position:relative}
.quote-split__img .media{--ar:3/4;--r:var(--r-s)}
.quote-split__img .media.is-wide{--ar:600/520}
.quote{position:absolute;left:1.5rem;top:1.5rem;width:min(33.5rem,92%);background:#fff;border-radius:var(--r-m);padding:32px;box-shadow:var(--sh-float);z-index:3}
.quote-split--img-right .quote{left:auto;right:1.5rem}
.quote__mark{width:28px;height:28px;color:var(--bronze);margin-bottom:1rem}
.quote figcaption{display:flex;align-items:center;gap:.875rem;margin-top:1.5rem}
.quote__portrait{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--grad-portrait);flex:none}
.quote__name{display:block;font:500 1rem/1.3 var(--font-sans);color:var(--ink)}
.quote__role{display:block;font-size:.875rem;color:var(--bronze)}
.quote-split__text > * + *{margin-top:1.5rem}
.quote-split__text > .eyebrow + *{margin-top:1rem}
.quote-split__text > .btn,.quote-split__text > .btns{margin-top:2.5rem}
@media (max-width:991px){
  .quote-split--img-right .quote-split__img{order:0}
  .quote,.quote-split--img-right .quote{position:relative;left:auto;right:auto;top:auto;width:calc(100% - 2rem);margin:-4rem auto 0}
}

/* ==========================================================================
   K26 Akkordeon mit Bild im Zickzack
   ========================================================================== */
.zz-head{align-items:end;margin-bottom:5rem}
.zz-head > .btn{justify-self:end}
.zz-head__text > * + *{margin-top:1.5rem}
.zz{display:grid;gap:10rem}
.zz .g-split{grid-template-columns:1fr 1fr;align-items:center}
.zz .g-split--reverse .zz__media{order:2}
.zz__media{position:relative}
.zz__media .media{--ar:1;--r:var(--r-s)}
.zz__media .ui-card{position:absolute;right:-1.5rem;top:2rem}
.acc__phase{margin-bottom:1rem}
.acc:not(em){border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;border:0;background:none;text-align:left;font:500 1.125rem/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.acc__btn:hover{color:var(--moss)}
.plus{position:relative;width:16px;height:16px;flex:none}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:1px;transition:rotate .35s var(--ease-out),opacity .35s var(--ease-out)}
.plus::after{rotate:90deg}
.acc__btn[aria-expanded="true"] .plus::after{rotate:180deg;opacity:0}
.acc__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .35s var(--ease-out),visibility 0s .35s}
.acc__panel > div{overflow:hidden}
.acc__panel p{padding-bottom:1.25rem;color:var(--text);max-width:34rem}
.acc__item.is-open .acc__panel,html:not(.js) .acc__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .35s var(--ease-out),visibility 0s}
@media (max-width:991px){
  .zz-head{margin-bottom:3rem}.zz-head > .btn{justify-self:start}
  .zz{gap:5rem}
  .zz .g-split{grid-template-columns:1fr}
  .zz .zz__media,.zz .g-split--reverse .zz__media{order:2}
  .zz__media .ui-card{right:1rem}
}

/* ==========================================================================
   K27 Zeitleiste mit klebender Spalte und Fortschrittslinie
   ========================================================================== */
.tl-grid{gap:3rem;align-items:start}
.tl-side{position:sticky;top:7rem;transition:top .4s var(--ease)}
html.nav-hidden .tl-side{top:2rem}
.tl-side > * + *{margin-top:1.5rem}
.tl-side > .eyebrow + *{margin-top:1rem}
.tl-side > .btn{margin-top:2.5rem}
.tl{position:relative;padding-block:var(--s-9)}
.tl::before,.tl__progress{content:"";position:absolute;left:6px;top:0;bottom:0;width:3px;border-radius:2px}
.tl::before{background:rgb(42 37 33/.15)}
.tl__progress{background:var(--acc);transform-origin:top;transform:scaleY(1)}
html.js:not(.is-static) .tl.is-scrub .tl__progress{transform:scaleY(0)}
/* .tl::after (weiße Blende an Linienanfang und -ende) entfernt 24.09.2026: Linie endet klar mit Radius */
.tl__row{position:relative;display:grid;grid-template-columns:max-content 1fr;gap:2rem;align-items:start}
.tl__row + .tl__row{margin-top:8rem}
.tl__dot{position:relative;z-index:1;width:15px;height:15px;margin-top:.25rem;border-radius:50%;background:var(--linen-2);box-shadow:0 0 0 8px transparent;transition:background-color .3s,box-shadow .3s}
.tl__row.is-active .tl__dot{background:var(--acc);box-shadow:0 0 0 8px var(--acc-tint)}
.tl__body > * + *{margin-top:.75rem}
.tl__title{font-family:var(--font-serif);font-weight:var(--head-wght);font-size:2rem;line-height:1.2;letter-spacing:-.02em;color:var(--ink-head);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.tl__list{display:grid;gap:.5rem}
.tl__list li{display:flex;gap:.625rem;align-items:flex-start}
.tl__list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);margin-top:.6em;flex:none}
@media (max-width:991px){
  .tl-side{position:static}
  .tl::before,.tl__progress{left:6px}
  .tl__row{gap:1.25rem}
  .tl__row + .tl__row{margin-top:3rem}
  .tl__title{font-size:1.625rem}
}

/* ==========================================================================
   K28 Klebende Reiterleiste mit Leistungskarten
   ========================================================================== */
.tabs{position:sticky;top:calc(var(--nav-h) + 10px);z-index:var(--z-sticky);display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:8px;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-tabs);max-width:76rem;margin:0 auto 3rem;transition:top .4s var(--ease)}
html.nav-hidden .tabs{top:10px}
.tabs a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:12px;border-radius:var(--r-s);font:500 1rem/1.2 var(--font-sans);letter-spacing:-.01em;color:var(--text-soft);text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s}
.tabs a .i{width:16px;height:16px;color:var(--acc)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="true"]{background:var(--acc-tint);color:var(--ink)}
.svcs{display:grid;gap:2.25rem;max-width:76rem;margin-inline:auto}
.svc{display:grid;grid-template-columns:1fr 1fr;gap:3rem;min-height:27.6rem;background:#fff;border-radius:var(--r-l)}
.svc__text{padding:48px}
.svc__text > * + *{margin-top:1rem}
.svc__text .t-h3{margin-top:.75rem}
.svc__points{display:grid;gap:.5rem;margin-top:1.5rem}
.svc__points li{display:flex;gap:.625rem;align-items:flex-start;color:var(--text)}
.svc__points li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);margin-top:.6em;flex:none}
.svc__text .tlink-row{margin-top:1.75rem}
.svc__visual{position:relative}
.svc__visual .media{height:100%;--r:0 var(--r-l) var(--r-l) 0}
.svc__visual .ui-card{left:-3rem;bottom:2.5rem}
/* OpenAI-Karte (25.09.2026): Das ChatGPT-Logo sitzt mittig und füllt 85 % der Bildhöhe; unten links läge die UI-Karte auf seinen Bögen
   → nur hier unten rechts und etwas kleiner (data-reveal arbeitet mit translate, nicht mit transform). */
@media (min-width:992px){#r-openai .svc__visual .ui-card{left:auto;right:-2rem;bottom:-1.5rem;transform:scale(.82);transform-origin:100% 100%}}
@media (min-width:1360px){#r-openai .svc__visual .ui-card{right:-3rem}}   /* erst ab 1360 px bleibt bei -3rem ≥ 16 px Rand zum Fenster */
@media (max-width:991px){
  .tabs{top:var(--nav-h);display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:0 0 var(--r-m) var(--r-m);margin-inline:calc(-1*var(--gutter));scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs a{scroll-snap-align:start;flex:none}
  .svc{grid-template-columns:1fr;gap:0;min-height:0}
  .svc__visual{order:-1}
  .svc__visual .media{height:auto;--ar:16/10;--r:var(--r-l) var(--r-l) 0 0}
  .svc__visual .media--quer43{--ar:4/3}   /* ChatGPT-Logo oai-logo-aufsicht-quer43 füllt 85 % der Bildhöhe, 16:10 schnitte es oben/unten an (25.09.2026) */
  .svc__visual .ui-card{position:relative;left:auto;bottom:auto;margin:-2rem 1.5rem 0}
  .svc__text{padding:32px 24px}
}

/* ==========================================================================
   K29 Dunkles Band mit Textur · rechts E170 Emperador mit Champagner-Ader (statt L-3 Basalt)
   ========================================================================== */
.band-dark{position:relative;max-width:var(--w-xl);margin:3rem auto 0;min-height:8.1rem;border-radius:var(--r-m);background:var(--earth);padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:2rem;overflow:hidden}
/* 24.09.2026: Marmor als eingelegte Platte mit harter Kante und Champagner-Fuge statt Verlauf ins Dunkel */
.band-dark::before{content:"";position:absolute;right:0;top:0;bottom:0;width:30%;background:url(assets/img/e170-emperador-ader-1600.webp) center/cover no-repeat;background-image:image-set(url(assets/img/e170-emperador-ader-1600.avif) type("image/avif"),url(assets/img/e170-emperador-ader-1600.webp) type("image/webp"));border-left:1px solid rgb(201 168 124/.6)}
.band-dark > *{position:relative;z-index:1}
.band-dark__text{font-size:1.25rem;line-height:1.45;color:var(--on-dark);max-width:40rem;padding-block:1.75rem}
.band-dark__text em{font-style:normal;color:var(--champagne)}
@media (max-width:767px){
  .band-dark{flex-direction:column;align-items:flex-start;padding:28px 24px 7rem;gap:1.25rem}
  .band-dark__text{padding:0}
  .band-dark::before{top:auto;left:0;width:100%;height:5rem;border-left:0;border-top:1px solid rgb(201 168 124/.6)}
}

/* ==========================================================================
   K30 Farbband mit überspannender Karte · Grund E177 Verde-Band (statt band-moos.svg)
   ========================================================================== */
.cband{position:relative;background:var(--stone);padding-top:var(--sec-m);padding-bottom:var(--sec-l);isolation:isolate}
.cband__bg{position:absolute;left:0;right:0;top:0;height:55%;border-radius:var(--r-l) var(--r-l) 0 0;background:#33483A url(assets/img/e177-verde-band-1600.webp) center/cover no-repeat;background-image:image-set(url(assets/img/e177-verde-band-1600.avif) type("image/avif"),url(assets/img/e177-verde-band-1600.webp) type("image/webp"));z-index:-1}
.cband__head{text-align:center;max-width:48rem;margin:0 auto 4rem;padding-top:3rem}
.cband__head .t-band{color:#fff;margin-top:1.25rem}
.cband__head p{color:#fff;margin-top:1.25rem;font-size:1rem}
.cband__card{max-width:78rem;margin-inline:auto;background:#fff;border-radius:var(--r-2xl);padding:24px;box-shadow:var(--sh-ring);display:grid;grid-template-columns:1fr 1fr}
.cband__cell{padding:32px}
.cband__cell:nth-child(odd){border-right:1px solid var(--line)}
.cband__cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
.cband__cell-head{display:flex;align-items:center;gap:.875rem}
.cband__cell-head .hexglyph{width:32px;height:32px;color:var(--acc);flex:none}
.cband__cell p{margin-top:1rem;font-size:.9375rem;line-height:1.55}
@media (max-width:767px){
  .cband__bg{height:calc(var(--cband-head,22rem) + 8rem)}
  .cband__card{width:calc(100% - 2rem);border-radius:var(--r-xl);grid-template-columns:1fr;padding:8px 16px}
  .cband__cell{padding:24px 8px;border-right:0!important;border-bottom:1px solid var(--line)}
  .cband__cell:last-child{border-bottom:0}
  .cband__head{margin-bottom:2.5rem}
}

/* ==========================================================================
   K31 Horizont-Band
   ========================================================================== */
/* 24.09.2026: kein Verlauf, keine Randmaske. Das Band steht exakt auf der Studiowand des Fotos (--horizon-bg pro Seite,
   gemessen per magick aus den Bildkanten, Tokens --wall-*). Das Foto läuft links und unten randabfallend aus dem Band,
   Ober- und Rechtskante verschwinden, weil Wand und Band dieselbe Farbe haben. Ohne passendes Foto: volle Sandfläche,
   Zwischenbild steht gerahmt unter dem Text. */
.horizon{position:relative;min-height:40rem;background:var(--horizon-bg,var(--sand));overflow:hidden;padding-top:var(--sec-l)}
.horizon .g-2{position:relative;z-index:2}
.horizon .eyebrow{color:var(--bronze-deep)}
.horizon__aside{align-self:center;max-width:17.5rem;font-size:.875rem;justify-self:end;padding-top:2rem;color:var(--text)}
.horizon__img{position:absolute;left:0;bottom:-4rem;width:min(1066px,74%);--ar:1066/538;z-index:1}
.horizon__img.is-interim{position:relative;left:auto;bottom:auto;width:auto;max-width:min(56rem,calc(100% - 2 * var(--gutter)));margin:3rem auto var(--sec-m)}
@media (min-width:992px){.horizon--tall{min-height:48.5rem}}   /* höheres Band, wenn das Foto Inhalt bis in die obere Hälfte hat (MED-3): Bild beginnt unter der Überschrift */
@media (max-width:991px){
  .horizon{min-height:0}
  .horizon__aside{justify-self:start;max-width:36rem;padding-top:0}
  .horizon__img{position:relative;bottom:auto;width:100%;margin-top:2rem}
  .horizon__img.is-interim{margin:2rem var(--gutter) var(--sec-m);width:auto}
}

/* ==========================================================================
   K32 Beleg-Split
   ========================================================================== */
.proof{align-items:center}
.proof__img{position:relative}
.proof__img .media{--ar:1;--r:var(--r-m)}
.proof__img .ui-card{position:absolute;left:1.5rem;top:50%;translate:0 -50%}
.proof__text > * + *{margin-top:1.5rem}
.proof__text > .eyebrow + *{margin-top:1rem}
.proof__close{padding-top:1.5rem;border-top:1px solid var(--line);margin-top:2rem}
.proof__close span{color:var(--moss)}
.proof__text > .btn{margin-top:2.5rem}
@media (max-width:991px){.proof__img .ui-card{position:relative;left:auto;top:auto;translate:none;margin:-2.5rem auto 0;display:block}}

/* ==========================================================================
   K33 Fähigkeiten-Reihe und Kennzahl-Zellen
   ========================================================================== */
.abilities{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.abilities .tile{padding:24px;display:flex;flex-direction:column;gap:.75rem}
.abilities .tile__t{font:500 1.125rem/1.3 var(--font-sans);color:var(--ink)}
.abilities .tile__d{font-size:.8125rem;line-height:1.5;color:var(--text)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linen-2);border-radius:var(--r-m);background:rgb(255 255 255/.4);position:relative;z-index:1}
.metric{padding:48px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.metric + .metric{border-left:1px solid var(--linen-2)}
.metric__num{font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:2rem;line-height:1.15;color:var(--bronze);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.metric__src{font-size:.75rem;color:var(--text-soft)}
.metric__src a{color:inherit;text-underline-offset:2px}
@media (max-width:991px){.abilities{grid-template-columns:repeat(2,1fr)}.metrics{grid-template-columns:1fr}.metric + .metric{border-left:0;border-top:1px solid var(--linen-2)}}
@media (max-width:767px){.abilities{grid-template-columns:1fr}.metric{padding:32px 24px}}

/* ==========================================================================
   K34 Text und Listenkarte
   ========================================================================== */
.textlist{align-items:start}
.textlist__text > * + *{margin-top:1.5rem}
.textlist__text > .eyebrow--hex + *{margin-top:1rem}
.textlist__text > .btn{margin-top:2.5rem}
.list-card{background:#fff;border-radius:var(--r-m);padding:32px;box-shadow:var(--sh-ring)}
.list-card__intro{font:600 .9375rem/1.4 var(--font-sans);color:var(--ink);margin-bottom:1rem}
.hexlist{display:grid;gap:.875rem}
.hexlist li{display:flex;gap:.75rem;align-items:flex-start}
.hexlist .hexbullet{margin-top:.2em}
.list-card--tall .hexlist{gap:0}
.list-card--tall .hexlist li{padding:1.25rem 0;border-top:1px solid var(--line)}
.list-card--tall .hexlist li:first-child{border-top:0;padding-top:0}
.list-card--tall .hexlist li:last-child{padding-bottom:0}
.list-card--tall .hexbullet{margin-top:.45em}
.list-card__sub{display:block;margin-top:.25rem;font-size:1rem;color:var(--text)}

/* ==========================================================================
   K35 Team-Karte
   ========================================================================== */
.team-head{text-align:center;max-width:52rem;margin:0 auto 4rem}
.team-head .t-h1{margin-bottom:1.5rem}
.person{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:64rem;margin-inline:auto}
.person__img{--ar:1;--r:var(--r-m);background:var(--grad-portrait)}
.person__img img{object-position:50% 18%}
.person__role{display:block;margin-top:.5rem;font-size:.875rem;color:var(--bronze)}
.person__bio{margin-top:1.5rem}
.person .tlink{margin-top:1.5rem}
.persons{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.persons > .person-card{width:31.5rem}
@media (max-width:991px){.person{grid-template-columns:1fr;gap:2rem}.person__img{max-width:28rem}}

/* ==========================================================================
   K36 Passepartout-Split und Drei Akte
   ========================================================================== */
.act{position:relative;background:var(--stone);isolation:isolate;overflow-x:clip}
.act .g-2{grid-template-columns:minmax(0,600px) minmax(0,600px);justify-content:center;align-items:center}
.act--reverse .act__img{order:2}
.act__img .media{--ar:6/5}
.act__img .media.is-wide{--ar:1.4/1}
.act__text > * + *{margin-top:1.25rem}
.act__text > .eyebrow--hex + *{margin-top:1rem}
.leadlist{display:grid;gap:.75rem}
.leadlist li{display:flex;gap:.75rem;align-items:flex-start}
.leadlist li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bronze);margin-top:.6em;flex:none}
.chain{font-size:.9375rem;color:var(--text);line-height:1.8}
.chain__arrow{color:var(--text-soft);padding:0 .25rem}
@media (max-width:991px){.act .g-2{grid-template-columns:1fr}.act--reverse .act__img{order:0}}

/* ==========================================================================
   K37 Listen und Filter
   ========================================================================== */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1rem}
.chip{border:1px solid var(--line);background:#fff;color:var(--text);border-radius:var(--r-pill);padding:8px 14px;font:500 .875rem/1 var(--font-sans);letter-spacing:0;transition:background-color .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--moss);color:var(--moss)}
.chip[aria-pressed="true"]{background:var(--ink-btn);border-color:var(--ink-btn);color:var(--linen)}
.list-count{text-align:center;font-size:.875rem;color:var(--text-soft);margin-bottom:2rem}
.more{display:flex;justify-content:center;margin-top:3rem}
.events{display:grid;grid-template-columns:repeat(2,minmax(0,28.5rem));gap:4rem 3rem;justify-content:center;max-width:60rem;margin-inline:auto}
.event{display:flex;flex-direction:column}
.event__img{position:relative}
.event__img .media{--ar:3/2;--r:6px}
.event__img .pill--solid{position:absolute;right:.75rem;top:.75rem;z-index:3}
.event__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin-top:1.25rem;font-size:.875rem;color:var(--text-soft)}
.event__meta span{display:inline-flex;align-items:center;gap:.375rem}
.event__meta .i{width:14px;height:14px}
.event__title{margin-top:.75rem;font-family:var(--font-serif);font-weight:var(--head-wght);font-size:2rem;line-height:1.2;letter-spacing:-.02em;color:var(--moss);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.event p{margin-top:.75rem}
.event .tlink{margin-top:1rem;font-size:1.125rem}
@media (max-width:767px){.chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;justify-content:safe center;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}.chip{flex:none}.events{grid-template-columns:1fr}.event__title{font-size:1.625rem}}

/* ==========================================================================
   K38 Kontakt: Terminbuchung und Formular
   ========================================================================== */
.contact{position:relative;background:var(--stone);isolation:isolate;overflow-x:clip;padding-top:calc(var(--nav-h) + 5rem)}
.contact .t-display{text-align:center;max-width:48rem;margin-inline:auto}
.contact__form-h{margin-top:6rem}
.contact .lead-c{text-align:center;max-width:36rem;margin:1.5rem auto 0}
.booking{max-width:60rem;min-height:44rem;margin:3rem auto 0;background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-ring);display:grid;grid-template-columns:18rem 1fr;overflow:hidden}
.booking__host{padding:32px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:1rem}
.booking__host img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:var(--grad-portrait)}
.booking__name{font:500 1.125rem/1.3 var(--font-sans);color:var(--ink)}
.booking__dur{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;color:var(--text)}
.booking__dur .i{width:16px;height:16px;color:var(--moss)}
.booking__host .t-micro{margin-top:auto}
.booking__main{padding:32px;display:flex;flex-direction:column;gap:1.25rem}
.cal__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.cal__month{white-space:nowrap;font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:1.5rem;color:var(--ink)}
.cal__nav{display:flex;gap:.5rem}
.cal__nav button{white-space:nowrap;display:inline-flex;align-items:center;gap:.25rem;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:.5rem .75rem;font:500 .8125rem/1 var(--font-sans);color:var(--text)}
.cal__nav button:hover{border-color:var(--moss);color:var(--moss)}
.cal__nav .i{width:14px;height:14px}
.cal{width:100%;table-layout:fixed}
.cal th{font:500 .75rem/1 var(--font-sans);color:var(--text-soft);padding:.5rem 0;text-align:center}
.cal abbr{text-decoration:none}
.cal td{text-align:center;padding:3px}
.cal__day{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;font:400 .9375rem/1 var(--font-sans);color:#8F8780}
button.cal__day{border:0;background:var(--moss-tint);color:var(--moss);font-weight:600;transition:background-color .2s,color .2s}
button.cal__day:hover{background:#D9E3D8}
button.cal__day[aria-pressed="true"]{background:var(--moss);color:#fff}
.cal__day.is-today{box-shadow:inset 0 0 0 1px var(--line)}
.cal-skel{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-skel span{height:44px;border-radius:50%;background:linear-gradient(90deg,var(--mist),var(--linen),var(--mist));background-size:200% 100%;animation:skel 1.2s linear infinite}
@keyframes skel{to{background-position:-200% 0}}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}
.slot{border:1px solid var(--moss);background:#fff;color:var(--moss);border-radius:var(--r-s);padding:.75rem;font:500 .9375rem/1 var(--font-sans)}
.slot:hover,.slot[aria-pressed="true"]{background:var(--moss);color:#fff}
.booking__hint{font-size:.9375rem;color:var(--text-soft)}
.booking__confirm{background:var(--mist);border-radius:var(--r-m);padding:24px;display:grid;gap:.75rem}
/* Terminwahl per Knopf (25.09.2026): Calendly im neuen Tab statt Beispielkalender; der Kalender bleibt nur in komponenten.html */
.booking--link{min-height:0}
.booking--link .booking__main{justify-content:center;align-items:flex-start;gap:1.5rem;padding:40px}
.booking__lead{font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:1.5rem;line-height:1.3;color:var(--ink);max-width:24rem}
.booking__hint .tlink{font-size:inherit}
@media (max-width:767px){.booking--link .booking__main{padding:24px 20px}.booking__lead{font-size:1.3125rem}}
.form-card{position:relative;max-width:var(--w-s);margin:3rem auto 0;background:#fff;border-radius:var(--r-2xl);padding:48px}
.form-card form{max-width:42rem;margin-inline:auto}
.context-hint{display:flex;align-items:center;gap:.625rem;background:var(--moss-tint);color:var(--moss);border-radius:var(--r-s);padding:.75rem 1rem;font:500 .9375rem/1.4 var(--font-sans);margin-bottom:1.5rem}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1.25rem}
.field{display:flex;flex-direction:column;gap:.5rem;grid-column:1/-1}
.field--half{grid-column:auto}
.field > label,.field legend,.field__label{font:500 1rem/1.3 var(--font-sans);color:var(--ink)}
.req{color:var(--copper)}
.input,.select,.textarea{width:100%;height:52px;border:1px solid var(--field-border);border-radius:var(--r-s);background:#fff;padding:0 1rem;font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s;appearance:none}
.textarea{height:auto;min-height:8.5rem;padding:.875rem 1rem;resize:vertical;line-height:1.5}
.select{padding-right:2.75rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357504A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center/18px no-repeat}
.select:invalid{color:var(--text-soft)}
.input::placeholder,.textarea::placeholder{color:#8F8780}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--moss);box-shadow:0 0 0 3px rgb(63 91 69/.2)}
.input-icon{position:relative}
.input-icon .i{position:absolute;left:1rem;top:50%;translate:0 -50%;width:18px;height:18px;color:var(--text-soft);pointer-events:none}
.input-icon .input{padding-left:2.75rem}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--copper)}
.field__error{display:flex;align-items:center;gap:.375rem;font-size:.875rem;color:var(--copper)}
.field__error .i{width:16px;height:16px}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field legend{padding:0;margin-bottom:.75rem}
.checkpills{display:flex;flex-wrap:wrap;gap:.5rem}
.checkpill{position:relative;display:inline-flex;align-items:center;gap:.375rem;border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:.625rem 1rem;font:500 .9375rem/1 var(--font-sans);color:var(--text);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.checkpill input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.checkpill .i{width:14px;height:14px;display:none}
.checkpill:has(input:checked){background:var(--moss-tint);border-color:var(--moss);color:var(--moss)}
.checkpill:has(input:checked) .i{display:inline-block}
.checkpill:has(input:focus-visible){outline:2px solid var(--moss);outline-offset:3px}
.checkpill:hover{border-color:var(--moss)}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:var(--text)}
.consent input{width:20px;height:20px;margin:.1rem 0 0;accent-color:var(--moss);flex:none}
.consent a{color:var(--moss);text-underline-offset:3px}
.form-actions{margin-top:2rem;display:grid;gap:1rem}
.form-note{font-size:.875rem;color:var(--text-soft)}
.form-note a{color:var(--moss);text-underline-offset:3px}
.form-success{text-align:center;padding:2rem 0}
.form-success .t-h3{margin-bottom:1rem}
@media (max-width:767px){
  .booking{grid-template-columns:1fr;min-height:0}
  .booking__host{border-right:0;border-bottom:1px solid var(--line-soft);flex-direction:row;flex-wrap:wrap;align-items:center}
  .booking__host .t-micro{margin-top:0;width:100%}
  .booking__main{padding:20px 16px}
  .cal__day{width:36px;height:36px;font-size:.875rem}
  .form-card{border-radius:var(--r-xl);padding:24px}
  .fields{grid-template-columns:1fr}
  .field--half{grid-column:1/-1}
}

/* ==========================================================================
   K39 Zeilenlisten (Stellen, Termine) · N15 Stellenliste
   ========================================================================== */
.rows{display:flex;flex-direction:column;gap:.75rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:2px solid var(--linen-2);border-radius:var(--r-s);padding:16px 20px;text-decoration:none;color:inherit;transition:border-color .15s}
.row__t{display:block;font:600 1.125rem/1.3 var(--font-sans);color:var(--ink)}
.row__m{display:block;font-size:1rem;color:var(--text-soft)}
.rows--inline .row__t,.rows--inline .row__m{display:inline}
.row__go{display:inline-flex;align-items:center;gap:.375rem;font:600 1rem/1 var(--font-sans);color:var(--moss);white-space:nowrap}
.row__go .i,.row__go .i-arrow{width:16px;height:16px;transition:transform .15s}
.row:hover,.row:focus-visible{border-color:var(--moss)}
.row:hover .row__go .i-arrow,.row:focus-visible .row__go .i-arrow{transform:translateX(3px)}
.jobs{background:#fff;border-radius:var(--r-l);padding:48px;max-width:var(--w-xl);margin-inline:auto}
.jobs__inner{max-width:45rem;margin-inline:auto}
.jobs__group{margin-top:2rem}
.jobs__group-t{font:600 1rem/1.3 var(--font-sans);color:var(--ink);margin-bottom:.75rem}
.jobs .list-card{box-shadow:none;border:1px solid var(--line);margin-top:1.5rem}
@media (max-width:767px){
  .row{flex-direction:column;align-items:flex-start;gap:.5rem}
  .jobs{padding:24px}
}

/* ==========================================================================
   K40 E-Book-Seite
   ========================================================================== */
.ebook{padding-top:calc(var(--nav-h) + 4rem);padding-bottom:var(--sec-l)}
.ebook__grid{display:grid;grid-template-columns:5fr 7fr;gap:3rem;align-items:start}
.ebook__text > * + *{margin-top:1.5rem}
.form-card--framed{margin:0;max-width:none;border:8px solid var(--bronze);border-radius:var(--r-m);padding:32px;box-shadow:var(--sh-form)}
.form-card--framed .form-actions{justify-items:start}
.form-card--framed .btn--l{width:auto;padding-inline:2.5rem}
.chapters{display:grid;gap:0;margin-top:2.5rem;counter-reset:ch}
.chapters li{display:grid;grid-template-columns:3.5rem 1fr;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.chapters li:first-child{border-top:0}
.chapters__num{font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:2rem;line-height:1;color:var(--bronze);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.chapters p{margin-top:.375rem}
@media (max-width:991px){.ebook__grid{grid-template-columns:1fr}}
/* E-Book-Cover (TI-11, 24.09.2026): Titel als HTML im freien oberen Drittel des Bildes */
.ebook__cover{--ar:3/4;--r:var(--r-m);width:100%;max-width:20rem;box-shadow:var(--sh-frame)}
.ebook__cover-title{position:absolute;left:0;right:0;top:0;z-index:2;margin:0;padding:1.75rem 1.5rem 0;text-align:center;font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:1.375rem;line-height:1.15;letter-spacing:-.01em;color:var(--ink);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0}
.ebook__cover-kicker{display:block;margin-bottom:.625rem;font:500 .6875rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
/* Zweiteiliges Cover (25.09.2026): Fläche = oberer Bildrand von oai-logo-aufsicht-quer43 (#EBE4E4), Foto 4:3 unten in voller Breite
   (56,25 % der 3:4-Höhe), Titel im freien oberen Teil. Kein Verlauf. Kontrast auf #EBE4E4: ink 12,1 · bronze 5,2 : 1. */
.ebook__cover--logo{background:#EBE4E4}
.ebook__cover--logo img{top:auto;height:56.25%}

/* ==========================================================================
   K41 Fließtext (Artikel, Workshop)
   ========================================================================== */
.prose{max-width:var(--w-article);margin-inline:auto;font-size:1.1rem;line-height:1.5;color:var(--text)}
.prose > * + *{margin-top:1.2em}
.prose h2{font-family:var(--font-serif);font-weight:var(--head-wght);font-size:1.75rem;line-height:1.25;letter-spacing:-.02em;color:var(--ink-head);margin-top:2.2em}
.prose h3{font-family:var(--font-serif);font-weight:var(--head-wght);font-size:1.5rem;line-height:1.3;letter-spacing:-.02em;color:var(--ink-head);margin-top:1.8em}
.prose h2 + *,.prose h3 + *{margin-top:.75em}
.prose a{color:var(--moss);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul{display:grid;gap:.5em}
.prose ul li{position:relative;padding-left:1.75em}
.prose ul li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;background:var(--acc);-webkit-mask:var(--hex-mask) center/contain no-repeat;mask:var(--hex-mask) center/contain no-repeat}
.prose ol{display:grid;gap:.5em;list-style:decimal;padding-left:1.4em}
.prose blockquote{font-family:var(--font-serif);font-weight:var(--serif-wght);font-size:1.5rem;line-height:1.35;color:var(--ink);border-left:2px solid var(--bronze);padding-left:1.25rem}
.prose img,.prose .media{width:100%;border-radius:var(--r-m)}
.prose--large{font-size:1.25rem}
/* Lückentext im Blog (25.09.2026): Leerstellen zum Selbst-Ausfüllen, kursiv mit feiner Linie; bewusst kein .todo */
.luecke{font-style:italic;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--text-soft)}
/* Grafiken im Blogbeitrag (25.09.2026), nachgebaut nach der Live-Seite: Text als HTML, damit er mobil lesbar bleibt */
.prose > .viz{margin-top:2.5rem;margin-bottom:.5rem}
.viz{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-ring);padding:28px 28px 24px}
.viz__eyebrow{font:500 .75rem/1.3 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.5rem}
.viz figcaption{margin-top:1.5rem;font-size:.9375rem;line-height:1.45;color:var(--text-soft)}
.viz-kern{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.viz-kern__t{font:500 1rem/1.3 var(--font-sans);color:var(--ink);margin-bottom:.75rem}
.viz-kern__s{margin-top:.75rem;font-size:.875rem;line-height:1.4;color:var(--text-soft)}
.viz-kern__pit{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:14rem}
.viz-kern__pit span{position:relative;border:1px dashed rgb(42 37 33/.28);border-radius:4px;overflow:hidden}
.viz-kern__pit span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--f,30%);background:var(--bronze-tint);border-top:1px solid rgb(115 90 54/.25)}
.viz-kern__core{position:relative;height:14rem;display:grid;grid-template-rows:repeat(5,1fr);border-radius:4px;overflow:hidden}
.viz-kern__core > span{display:flex;align-items:center;justify-content:flex-end;padding:0 .75rem;font-size:.875rem;color:var(--text);background:var(--mist);border-bottom:1px solid var(--line)}
.viz-kern__core > span:nth-child(even){background:var(--stone)}
.viz-kern__core > span:nth-child(5){border-bottom:0}
.viz-kern__core > i{position:absolute;top:0;bottom:0;left:1.25rem;width:26px;background:var(--moss);border-radius:0 0 13px 13px}
.viz-weeks{display:grid;grid-template-columns:repeat(6,1fr);column-gap:6px;row-gap:.75rem}
.viz-weeks__loop{grid-column:1/-1;display:flex;align-items:center;gap:.625rem;font-size:.8125rem;color:var(--text-soft)}
.viz-weeks__loop::after{content:"";flex:1;border-top:1px dashed rgb(42 37 33/.25)}
.viz-weeks__phase{grid-column:var(--a)/var(--b);background:var(--mist);border:1px solid var(--line);border-radius:6px;padding:.625rem .75rem;font-size:.875rem;line-height:1.3;color:var(--ink);hyphens:auto}
.viz-weeks__phase small{display:block;font-size:.75rem;color:var(--text-soft);margin-bottom:.125rem}
.viz-weeks__phase--gate{background:var(--moss-tint);border-color:rgb(63 91 69/.3)}
.viz-weeks__axis{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);position:relative;padding-top:.75rem;border-top:1px solid rgb(42 37 33/.3)}
.viz-weeks__axis span{font-size:.75rem;color:var(--text-soft);text-align:center}
.viz-weeks__axis::before,.viz-weeks__axis::after{content:"";position:absolute;top:-7px;width:12px;height:12px}
.viz-weeks__axis::before{left:-1px;border-radius:50%;background:var(--bronze)}
.viz-weeks__axis::after{right:-1px;transform:rotate(45deg);background:var(--moss)}
.viz-weeks__end{grid-column:1/4;font-size:.8125rem;line-height:1.4;color:var(--text)}
.viz-weeks__end--right{grid-column:4/7;text-align:right}
@media (max-width:600px){
  .viz{padding:20px 16px}
  .viz-kern{grid-template-columns:1fr;gap:1.75rem}
  .viz-kern__pit,.viz-kern__core{height:11rem}
  .viz-weeks{grid-template-columns:1fr;row-gap:.5rem}
  .viz-weeks__phase{grid-column:1/-1}
  .viz-weeks__axis{display:none}
  .viz-weeks__end,.viz-weeks__end--right{grid-column:1/-1;text-align:left}
}
.table-wrap{overflow-x:auto}
.table-wrap table{width:100%;font-size:.9375rem}
.table-wrap th,.table-wrap td{text-align:left;padding:.625rem .75rem;border-bottom:1px solid var(--line)}
@media (max-width:767px){.prose,.prose--large{font-size:1rem}.prose h2{font-size:1.5rem}.prose h3{font-size:1.25rem}}

/* ==========================================================================
   K-PRESSE Pressemitteilung (24.09.2026) · presse-openai-select-partner.html
   Aufbau 1:1 wie azena.ai/presse/openai-select-partner/: Kopf mit Badge · Band · Meta-Spalte + Text.
   Übertragen in das organische Konzept: Fraunces statt Newsreader (Lead, Fließtext, Zitat in echtem Kursivschnitt),
   Geist für Meta und „About“, Wortmarke in Century Gothic. Band: Laufschrift in Champagner (CSS, langsam, steht bei
   reduzierter Bewegung und ?static=1), dazwischen die Kabelranke an Stelle der Partikel-Welle, randabfallend, ohne Fade/Maske.
   Dazu: Hinweis-Pille im Startseiten-Hero, Hinweis auf der OpenAI-Seite, Footer-Badge als Link, Druckansicht.
   ========================================================================== */
.press-mark{font-family:var(--font-mark);font-weight:400;font-style:normal;font-size:.95em;line-height:1;letter-spacing:-.01em}
/* 1 · Kopf */
.press-head{padding:calc(var(--nav-h) + 6rem) 0 6rem}   /* unten 6rem/mobil 5rem: Abstand Badge-Zeile → Laufschrift (Jury 25.09.2026) */
.press-head__grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5rem}
.press-head .t-h1{margin-top:1.5rem;max-width:8em;font-size:clamp(2.5rem,4.6vw,4.25rem);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.press-head__date{margin-top:1.5rem;font-size:.875rem;color:var(--text-soft)}
.press-head__badge{justify-self:end}   /* 25.09.2026: Badge ohne Plakette als .badge-fig (K-BADGE): freigestellt, Haarlinie + Zeile; .press-badge-Breiten unten greifen dort nicht mehr */
.press-badge{display:block;width:24rem;max-width:100%;height:auto}
@media (min-width:992px) and (max-width:1199px){.press-head__grid{gap:3rem}.press-badge{width:19rem}}
@media (max-width:991px){
  .press-head{padding:calc(var(--nav-h) + 3.5rem) 0 5rem}
  .press-head__grid{grid-template-columns:1fr;gap:2rem}
  .press-head__badge{justify-self:start}
  .press-badge{width:22rem}
}
@media (max-width:767px){.press-badge{width:20rem}}
/* 2 · Band: Laufschrift · Kabelranke · Laufschrift */
.press-band{--band-ground:#FAF8F4;display:flex;flex-direction:column;gap:14px;overflow:hidden;background:var(--band-ground)}   /* Grund = gemessene Randfarbe der Kabelranke (FAF8F4, ±1) → keine Kante, ohne Fade/Maske; Herb-Fassung 24.09.2026 nachgemessen: oben FAF8F4, unten F9F8F4 → bleibt; Herb 2 25.09.2026 an den neuen Schnittkanten: FAF9F5 / F9F8F4 → bleibt */
.press-band__line{overflow:hidden;white-space:nowrap;font:500 .8125rem/1 var(--font-sans);letter-spacing:.24em;text-transform:uppercase;color:var(--champagne);opacity:.55}   /* 25.09.2026: ohne OpenAI-Namen (kein Partnername im Ornament), eine Stufe leiser, damit sie die Badge-Zeile nicht wiederholt */
.press-band__track{display:inline-flex;animation:press-run 140s linear infinite}
.press-band__track > span{flex:none;display:block}
.press-band__line--rev .press-band__track{animation-direction:reverse}
@keyframes press-run{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.press-band__track{animation:none}}
html.is-static .press-band__track{animation:none}
/* Motiv 21:9 (3168×1344), Kabel läuft links/rechts aus dem Bild. Herb 2 (25.09.2026): Olivenzweige reichen höher, Inhalt samt Schatten
   liegt bei 10–84 % der Höhe (Herb: 28–71 %). 19:5 zeigte nur 19–81 % → Blattspitzen oben und Schatten unten wären an der Bandkante
   abgeschnitten. Jetzt 3:1 (zeigt 79 %) ab 35 % → sichtbar 7,6–86 %, beide Schnittkanten liegen auf flachem Grund (dekodiert ≤ 2,2 Stufen
   gegen FAF8F4), je ~34 px Luft (bei 1344 px Bildhöhe). Mobil der 4:3-Ausschnitt (-m, x 1150, Inhalt 10–78 %) in 16:9 ab 24 % → sichtbar 6–81 %. */
.press-band__art{--r:0;--pos:50% 35%;width:100%;aspect-ratio:3/1;background:var(--band-ground)}
.press-band__art img{object-position:var(--pos,50% 50%)}
@media (max-width:767px){.press-band__line{font-size:.625rem}.press-band__art{aspect-ratio:16/9;--pos:50% 24%}}
/* 3 · Meta-Spalte + Mitteilung (Raster wie Original: 1fr · 40rem · 1fr, Zitat ragt 6rem in die rechte Spalte) */
.press-body{padding:var(--sec-m) 0 0}   /* Abstand zur CTA-Box trägt deren .sec */
.press-grid{display:grid;grid-template-columns:minmax(12rem,1fr) minmax(0,40rem) minmax(0,1fr);gap:4rem;align-items:start}
.press-meta{position:sticky;top:calc(var(--nav-h) + 2rem);display:grid;gap:1.5rem;padding-top:.5rem;font-size:.875rem;line-height:1.6;color:var(--ink)}
.press-meta__list{display:grid;gap:1.5rem}
.press-meta dt{color:var(--text-soft)}
.press-meta dd{margin:.25rem 0 0}
.press-meta__l{display:block}
.press-meta__soft{color:var(--text)}
.press-meta a,.press-meta__act button{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--clay);text-underline-offset:4px;transition:text-decoration-color .2s,color .2s}
.press-meta a:hover,.press-meta__act button:hover{color:var(--moss);text-decoration-color:currentColor}
.press-meta__act{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;color:var(--text)}
.press-meta__act button{padding:0;border:0;background:none;font:inherit}
.press-article{font-family:var(--font-serif);font-weight:var(--serif-wght);font-optical-sizing:auto;font-variation-settings:"SOFT" 0,"WONK" 0;color:var(--text)}
.press-lead{font-size:1.7rem;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.press-lead__dl{font-weight:500}
.press-copy{margin-top:2.5rem}
.press-copy > p{font-size:1.1875rem;line-height:1.7;letter-spacing:-.005em}
.press-copy > p + p{margin-top:1.5rem}
.press-quote{margin:4rem -6rem 4rem 0}
.press-quote blockquote{font-size:2.25rem;line-height:1.35;font-style:italic;letter-spacing:-.01em;color:var(--ink)}
.press-quote figcaption{margin-top:1.5rem;font:400 .875rem/1.5 var(--font-sans);letter-spacing:0;color:var(--text-soft)}
.press-quote + .press-copy{margin-top:0}
.press-end{margin-top:3.5rem;padding-left:.6em;text-align:center;font-size:1.125rem;letter-spacing:.6em;color:var(--text-soft)}
.press-about{margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--line);font:400 .95rem/1.65 var(--font-sans);letter-spacing:0;color:var(--text)}
.press-about h2{font:500 .95rem/1.5 var(--font-sans);color:var(--ink)}
.press-about p{margin-top:.5rem}
.press-about p + p{margin-top:1rem}
.press-about a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (min-width:992px) and (max-width:1199px){.press-grid{grid-template-columns:minmax(10rem,1fr) minmax(0,40rem) minmax(0,.5fr);gap:3rem}.press-quote{margin-right:-3rem}}
@media (max-width:991px){
  /* Meta mobil über dem Text als kompakte Zeile: Gruppen nebeneinander, Zeilen je Gruppe mit Mittelpunkt */
  .press-grid{grid-template-columns:minmax(0,40rem);justify-content:center;gap:2rem}
  .press-meta{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;padding:0 0 1.25rem;border-bottom:1px solid var(--line);font-size:.8125rem;line-height:1.5}
  .press-meta__list{display:contents}
  .press-meta__group{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .5rem}
  .press-meta dd{margin:0}
  .press-meta__l{display:inline-block;max-width:100%}   /* Umbruch nur zwischen den Angaben */
  .press-meta__l + .press-meta__l::before{content:"·";margin:0 .4em;color:var(--text-soft)}
  .press-meta__l.press-meta__mail{display:block}
  .press-meta__mail::before{content:none!important}
  .press-lead{font-size:1.5rem}
  .press-copy > p{font-size:1.125rem}
  .press-quote{margin:3rem 0}
  .press-quote blockquote{font-size:1.875rem}
}
@media (max-width:767px){
  .press-lead{font-size:1.375rem}
  .press-copy > p{font-size:1.0625rem}
  .press-quote blockquote{font-size:1.5rem}
}
/* Druck (Knopf „Print“): nur Kopf, Badge und Mitteilung */
@media print{
  .p-presse-openai-select-partner #site-header,.p-presse-openai-select-partner #site-footer,.press-band,.press-cta,.press-meta__act{display:none!important}
  .press-head{padding:0 0 1.5rem}
  .press-grid{display:block}
  .press-meta{position:static;margin-bottom:1.5rem}
  .press-quote{margin-right:0}
  [data-reveal]{opacity:1!important;translate:none!important}
}
/* Hinweis-Pille im Startseiten-Hero (Milchglas auf dem Baumbild, ruhig) */
/* Herb 24.09.2026: statt Milchglas eine Steineinlage mit gebürsteter Stahlkante (gleiche Metallkante wie K-PLAKETTE) */
.press-pill{--pp-fill:linear-gradient(180deg,rgb(252 252 250/.94),rgb(236 234 230/.94));display:inline-flex;align-items:center;gap:.5rem;max-width:100%;padding:.4375rem .875rem .4375rem .75rem;border:1.5px solid transparent;border-radius:var(--r-pill);
  background:var(--pp-fill) padding-box,var(--metal-sheen) border-box;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -1px 0 rgb(58 54 48/.08),0 1px 2px rgb(34 29 26/.12),0 8px 20px -10px rgb(34 29 26/.3);
  font:500 .8125rem/1.3 var(--font-sans);letter-spacing:0;color:var(--ink);text-decoration:none;transition:translate .2s var(--ease),box-shadow .2s var(--ease)}
.press-pill:hover{--pp-fill:linear-gradient(180deg,rgb(255 255 255/.98),rgb(242 241 238/.98))}
.press-pill__new{color:var(--moss);font-weight:600;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase}
.press-pill__sep{color:var(--text-soft)}
.press-pill .i-arrow{width:.875rem;height:.875rem;flex:none;transition:transform .2s var(--ease)}
.press-pill:hover .i-arrow,.press-pill:focus-visible .i-arrow{transform:translateX(3px)}
.hero-tree__copy .press-pill + .eyebrow{margin-top:1.75rem}
@media (max-width:479px){.press-pill{font-size:.75rem;gap:.375rem;padding:.4375rem .75rem .4375rem .625rem}}
/* Hinweis unter dem Hero-Button (OpenAI-Einführung): Badge ohne Plakette (.badge-sig, K-BADGE) | Haarlinie | Zeile + Textlink, ein gemeinsamer Link (25.09.2026) */
.head > .btn + .press-note{margin-top:1.75rem}
.press-note__l{display:block;font-size:.875rem;line-height:1.4;letter-spacing:-.01em;text-transform:none;color:var(--text-soft);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--clay)}
.press-note__l .i-arrow{display:inline-block;width:.875rem;height:.875rem;margin-left:.375rem;vertical-align:-.15em;transition:transform .2s var(--ease)}
.press-note__nw{white-space:nowrap}   /* Pfeil bricht nie allein um */
.press-note:hover .press-note__l{color:var(--link);text-decoration-color:currentColor}
.press-note:hover .i-arrow,.press-note:focus-visible .i-arrow{transform:translateX(3px)}
/* Footer-Badge führt zur Pressemitteilung */
.footer__badge-link{display:block}   /* ungenutzt seit 25.09.2026: der Footer trägt .badge-sig (K-BADGE); das Badge bleibt bei Hover unverändert */

/* ==========================================================================
   K-PLAKETTE Fassung für das offizielle OpenAI-Badge (Herb · weniger feminin, 24.09.2026)
   Das PNG bleibt unverändert: nicht umgefärbt, nicht beschnitten, keine Deckkraft, kein Filter. Die Fassung liegt nur außen:
   gebürstete Stahlkante mit Champagner-Schimmer und Fase · vier Schraubenpunkte auf der Kantenmitte im Eckbogen ·
   heller Steingrund als eingelassene Einlage · doppelte Gravurlinie · weicher Schatten.
   Aufbau: Element = Metallkante (Hintergrund, Schrauben, Fase) · ::before = Steineinlage · ::after = Gravur (Rand + Kontur nach innen).
   Schutzraum Badge → innere Gravurlinie = --pl-gap, rund 13–15 % der Badgehöhe in jeder Größe.
   Größen: .plaque--l Presse-Kopf · .plaque Standard (Presse mobil) · .plaque--s Hero, Footer, OpenAI-Seite.
   UNGENUTZT seit 25.09.2026: Inhaber „Komischen Rahmen weg“ → alle vier Stellen tragen K-BADGE (unten). Regeln bleiben für einen Rückgriff stehen.
   ========================================================================== */
.plaque{--pl-rim:10px;--pl-line:7px;--pl-line2:4px;--pl-gap:18px;--pl-r:14px;--pl-ri:7px;--pl-screw:5px;
  --pl-c:calc(var(--pl-r) - (var(--pl-r) - var(--pl-rim) / 2) * .7071 - var(--pl-screw) / 2);
  --pl-screw-img:radial-gradient(circle at 36% 32%,#FFFFFF 0,#ECEAE5 22%,#AAA59B 58%,#6E695F 74%,rgb(110 105 95/.35) 80%,rgb(110 105 95/0) 86%);
  --pl-drop:0 1px 1px rgb(34 29 26/.10),0 6px 14px -4px rgb(34 29 26/.18),0 22px 40px -18px rgb(34 29 26/.24);
  position:relative;display:block;width:fit-content;max-width:100%;isolation:isolate;line-height:0;
  padding:calc(var(--pl-rim) + var(--pl-line) + var(--pl-line2) + var(--pl-gap));border-radius:var(--pl-r);
  background:
    var(--pl-screw-img) left var(--pl-c) top var(--pl-c)/var(--pl-screw) var(--pl-screw) no-repeat,
    var(--pl-screw-img) right var(--pl-c) top var(--pl-c)/var(--pl-screw) var(--pl-screw) no-repeat,
    var(--pl-screw-img) left var(--pl-c) bottom var(--pl-c)/var(--pl-screw) var(--pl-screw) no-repeat,
    var(--pl-screw-img) right var(--pl-c) bottom var(--pl-c)/var(--pl-screw) var(--pl-screw) no-repeat,
    repeating-linear-gradient(180deg,rgb(255 255 255/.12) 0 1px,rgb(255 255 255/0) 1px 3px),
    repeating-linear-gradient(180deg,rgb(40 36 30/.05) 0 1px,rgb(40 36 30/0) 1px 5px),   /* Bürststrich, zwei Perioden → unregelmäßig */
    var(--metal-sheen);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.9),inset 0 -1px 0 rgb(70 64 56/.3),0 0 0 .5px rgb(70 64 56/.4),var(--pl-drop);
  text-decoration:none;transition:translate .25s var(--ease),box-shadow .25s var(--ease)}
.plaque::before{content:"";position:absolute;inset:var(--pl-rim);z-index:-1;border-radius:var(--pl-ri);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .28 0 0 0 0 .27 0 0 0 0 .25 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(165deg,#FBFAF8 0%,#F1EFEB 55%,#E7E4DF 100%);
  box-shadow:inset 0 1px 2px rgb(34 29 26/.22),inset 0 0 0 1px rgb(58 54 48/.16),0 1px 0 rgb(255 255 255/.6)}
.plaque::after{content:"";position:absolute;inset:calc(var(--pl-rim) + var(--pl-line));z-index:-1;pointer-events:none;
  border:1px solid rgb(58 54 48/.3);border-radius:max(2px,calc(var(--pl-ri) - var(--pl-line) / 2));
  box-shadow:0 1px 0 rgb(255 255 255/.85),inset 0 1px 0 rgb(255 255 255/.85);
  outline:1px solid rgb(58 54 48/.2);outline-offset:calc(-2px - var(--pl-line2))}
.plaque > img{display:block;max-width:100%;height:auto}
.plaque--l{--pl-rim:14px;--pl-line:10px;--pl-line2:5px;--pl-gap:26px;--pl-r:20px;--pl-ri:9px;--pl-screw:7px}
.plaque--s{--pl-rim:5px;--pl-line:3px;--pl-line2:3px;--pl-gap:5px;--pl-r:9px;--pl-ri:5px;--pl-screw:3px;
  --pl-drop:0 1px 1px rgb(34 29 26/.12),0 4px 10px -3px rgb(34 29 26/.22)}
.plaque--s > img{height:38px;width:auto}
a.plaque:hover{translate:0 -1px;--pl-drop:0 1px 1px rgb(34 29 26/.10),0 9px 18px -5px rgb(34 29 26/.24),0 26px 44px -18px rgb(34 29 26/.26)}
.on-dark .plaque{--pl-drop:0 1px 1px rgb(0 0 0/.35),0 8px 18px -6px rgb(0 0 0/.55);   /* dunkler Grund (Footer): Titan statt hellem Stahl, sonst leuchtet die Kante heller als das Badge */
  --metal-sheen:linear-gradient(112deg,#8E8A82 0%,#5F5B54 14%,#ABA69C 30%,#8F8269 45%,#4F4B45 63%,#838076 80%,#5E5A53 100%)}
@media (prefers-reduced-motion:reduce){a.plaque:hover{translate:none}}
/* Einsatzorte */
.hero-tree__plaque{margin-top:2.5rem}
.plaque > .hero-tree__badge{margin-top:0}
@media (max-width:767px){.plaque--l{--pl-rim:10px;--pl-line:7px;--pl-line2:4px;--pl-gap:18px;--pl-r:14px;--pl-ri:7px;--pl-screw:5px}}

/* ==========================================================================
   K-BADGE Offizielles OpenAI-Badge ohne Plakette (Standard seit 25.09.2026 · Fassung C „Freigestellt“, Jury 15 Punkte vor A 14,5 · B 11,5)
   Inhaber 25.09.2026: Rahmen weg, wenn es besser ist auch den Hintergrund, aber die Exklusivität muss sofort klar sein.
   Exklusivität über Inszenierung statt Behauptung: Größe, Schutzraum, Haarlinie und eine sachliche Zeile als echtes Markup
   („Von OpenAI ernannt · seit September 2026“, Presse „Named by OpenAI · since September 2026“ – folgt dem OpenAI-Freigabetext
   „has been named an OpenAI Select Partner“ vom 15.09.2026). Das Badge ist in der Gruppe das Lauteste, die Zeile bleibt leiser.
   Grafik nie umgefärbt, nie verzerrt: ein Maß fest, das andere auto, flex:none.
     flacher heller Grund (Presse-Kopf, OpenAI-Seite) → -linien.png: Original mit freigestellter weißer Innenfläche (auf Weiß pixelgleich)
     Bildgrund (Startseiten-Hero)                     → Original-PNG mit weißer Füllung: das Baumfoto ist je nach Fensterhöhe anders
                                                         ausgeschnitten, ein ruhiger Grund hinter dem Badge ist nicht garantiert
     dunkler Grund (Footer)                           → -weiss.png: exakte Umkehrung des Originals
   Aufbau: .badge-fig = Presse-Kopf (Badge · Haarlinie in Badgebreite · Zeile) · .badge-sig = klein (Badge | Haarlinie in Badgehöhe | Zeile).
   Mindestgröße klein: 52 px hoch (Desktop), 48 px (mobil, Footer) → Innenschrift ≥ 7 px Versalhöhe.
   Umschalter für den Inhaber (site.js, nur Parameter, keine Oberfläche): ?badge=a Pur · ?badge=b Schwarze Karte · ?badge=c C rein.
   Der Grafiktausch per content:url steht nur in diesen Umschalter-Regeln, nie im Standard.
   ========================================================================== */
:root{--badge-hair:rgb(115 90 54/.5);--badge-card:#171412}
/* 1 · Presse-Kopf: groß, Haarlinie so breit wie das Badge, Zeile linksbündig */
.badge-fig{margin:0;width:29rem;max-width:100%}
.badge-fig > img{display:block;width:100%;height:auto}
.badge-zeile{margin:1.75rem 0 0;padding-top:1rem;border-top:1px solid var(--badge-hair);font:500 .8125rem/1.5 var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-deep)}
@media (min-width:992px) and (max-width:1199px){.badge-fig{width:22rem}}
@media (max-width:991px){.press-head__grid{gap:3rem}}   /* Schutzraum über dem Badge ≥ 3rem */
@media (max-width:767px){.badge-fig{width:100%;max-width:29rem}.badge-zeile{font-size:.75rem}}
@media (max-width:479px){.badge-zeile > span{display:block}.badge-zeile > .badge-zeile__sep{display:none}}   /* zwei Zeilen statt Umbruch am Mittelpunkt */

/* 2 · klein (Startseiten-Hero, OpenAI-Seite, Footer): Badge | Haarlinie in Badgehöhe | Zeile, ein gemeinsamer Link zur Pressemitteilung */
.badge-sig{display:flex;align-items:center;gap:1.125rem;width:fit-content;max-width:100%;color:var(--bronze-deep);text-decoration:none}
.badge-sig > .badge-sig__img{flex:none;display:block;width:auto;height:52px;max-width:none;margin:0}
.badge-sig__t{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:0;padding-left:1.125rem;border-left:1px solid var(--badge-hair)}
.badge-sig__z{display:block;font:500 .625rem/1.6 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
a.badge-sig:hover .badge-sig__z{color:var(--ink)}   /* das Badge selbst bleibt bei Hover unverändert */
@media (max-width:767px){.badge-sig{gap:1rem}.badge-sig > .badge-sig__img{height:48px}.badge-sig__t{padding-left:1rem}}
/* Startseiten-Hero: mobil greift das Baumfoto 15 % nach oben (margin-top:-15 %) → Badge und Zeile bleiben mit Luft auf dem Steingrund */
.hero-tree__sig{margin-top:2.5rem}
@media (max-width:991px),(max-height:499px){.hero-tree__sig{margin-top:2rem;margin-bottom:calc(15vw + 1.75rem)}}
/* Startseiten-Hero (26.09.2026, Inhaber: „klar, dass die Pressemitteilung ein Link ist“): Unterstrich in Bronze, Clay verschwindet auf dem Steingrund */
.hero-tree__sig .press-note__l{color:var(--ink);text-decoration-color:var(--bronze-deep)}
/* OpenAI-Seite: Zeile über dem Link zur Pressemitteilung (Link-Stil .press-note__l in K-PRESSE) */
.press-note .badge-sig__z{margin-bottom:.3125rem}
@media (max-width:599px){.press-note .badge-sig__seit{display:none}}   /* das Datum steht mobil im Link darunter */
@media (max-width:479px){.press-note .press-note__l{font-size:.8125rem}}   /* ab 390 px Breite passt der Link in eine Zeile, die Haarlinie bleibt kurz */
/* Footer (dunkel): weiße Fassung, Zeile in Champagner */
.on-dark .badge-sig{color:var(--champagne)}
.on-dark .badge-sig__t{border-left-color:rgb(201 168 124/.4)}
.on-dark a.badge-sig:hover .badge-sig__z{color:var(--linen)}
.footer__seals .badge-sig > .badge-sig__img{height:48px}
@media (max-width:479px){.footer__seals{flex-wrap:wrap;gap:1.75rem 2.5rem}}

/* Umschalter ?badge= (nur zum Vergleichen) */
/* A · Pur: Original-PNG mit weißer Füllung überall auf Hell, Presse-Kopf 27rem mit kurzer mittiger Haarlinie */
html[data-badge="a"] .badge-fig > img,html[data-badge="a"] .press-note .badge-sig__img{content:url(assets/brand/openai-select-partner-horizontal.png)}
html[data-badge="a"] .badge-fig{width:27rem}
html[data-badge="a"] .badge-zeile{border-top:0;background:linear-gradient(var(--bronze),var(--bronze)) 50% 0/3rem 1px no-repeat;text-align:center}
@media (min-width:992px) and (max-width:1199px){html[data-badge="a"] .badge-fig{width:22rem}}
@media (max-width:991px){html[data-badge="a"] .badge-zeile{text-align:left;background-position:0 0}}
@media (max-width:767px){html[data-badge="a"] .badge-fig{width:100%;max-width:21rem}}
/* B · Schwarze Karte: weiße Fassung auf ruhiger dunkler Karte */
html[data-badge="b"] .badge-fig > img,html[data-badge="b"] .badge-sig > .badge-sig__img{content:url(assets/brand/openai-select-partner-horizontal-weiss.png)}
html[data-badge="b"] .badge-fig{width:28rem;padding:2.75rem 3rem 1.625rem;border-radius:20px;background:var(--badge-card);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 1px 2px rgb(20 16 12/.22),0 14px 28px -12px rgb(34 29 26/.35),0 40px 70px -30px rgb(34 29 26/.4)}
html[data-badge="b"] .badge-zeile{margin-top:2.25rem;padding-top:1.125rem;border-top-color:rgb(201 168 124/.28);font-size:.6875rem;letter-spacing:.18em;color:var(--champagne)}
html[data-badge="b"] .badge-sig > .badge-sig__img{box-sizing:content-box;height:34px;padding:7px 10px;border-radius:10px;background:var(--badge-card);
  box-shadow:inset 0 1px 0 rgb(255 255 255/.07),0 1px 2px rgb(20 16 12/.2),0 8px 18px -8px rgb(34 29 26/.45)}
html[data-badge="b"] .on-dark .badge-sig > .badge-sig__img{box-sizing:border-box;height:48px;padding:0;border-radius:0;background:none;box-shadow:none}
@media (min-width:992px) and (max-width:1199px){html[data-badge="b"] .badge-fig{width:24rem}}
@media (max-width:767px){html[data-badge="b"] .badge-fig{width:100%;padding:2rem 1.75rem 1.25rem;border-radius:16px}}
/* C rein: freigestellte Linien auch auf dem Bildgrund des Hero (so wie juriert; der Standard nimmt dort das Original) */
html[data-badge="c"] .hero-tree__sig .badge-sig__img{content:url(assets/brand/openai-select-partner-horizontal-linien.png)}

/* ==========================================================================
   Reduzierte Bewegung (global) und ?static=1
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}
html.is-static *,html.is-static *::before,html.is-static *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}

/* ==========================================================================
   K-SPRACHE Sprachumschalter DE / EN (25.09.2026): Header ab 992 px, Mobilmenü, Footer
   Markup aus site.js langSwitch(): span.lang[role=group] > a.lang__opt (andere Sprache) · span.lang__opt[aria-current] (aktive) · span.lang__sep
   ========================================================================== */
.lang{display:inline-flex;align-items:center;font:450 .8125rem/1 var(--font-sans);letter-spacing:.04em;white-space:nowrap}
.lang__opt{display:inline-flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;color:var(--text-soft);text-decoration:none;border-radius:var(--r-pill)}
.lang__opt[aria-current]{color:var(--ink);font-weight:600}
a.lang__opt:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lang__sep{margin-inline:.125rem;color:var(--field-border)}
/* Header: klein links neben dem Erstgespräch-Knopf; mobil übernimmt das Mobilmenü */
.lang--nav{margin-right:.125rem;padding:.25rem .5rem;border-radius:var(--r-pill);transition:background-color .3s var(--ease)}
/* Transparenter Header über dem Hero (Laub hinter der Leiste): leiser Glasgrund, damit 13 px lesbar bleiben */
.nav[data-variant="transparent"]:not(.is-scrolled):not(.is-open):not(:hover) .lang--nav{background:rgb(255 255 255/.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:991px){.lang--nav{display:none}}
/* Mobilmenü: ruhige Segment-Pille unter E-Mail und Telefon */
.lang--mm{display:flex;width:fit-content;margin-top:1.5rem;padding:3px;gap:2px;background:var(--mist);border:1px solid var(--line-soft);border-radius:var(--r-pill);font-size:.875rem}
.lang--mm .lang__sep{display:none}
.lang--mm .lang__opt{min-width:3.25rem;min-height:36px;padding:0 .875rem}
.lang--mm .lang__opt[aria-current]{background:#fff;box-shadow:var(--sh-ring)}
.lang--mm a.lang__opt:hover{text-decoration:none;background:rgb(255 255 255/.6)}
/* Footer: am Ende der Rechtszeile, auf Dunkel */
.lang--footer{font-size:inherit}
.lang--footer .lang__opt{color:var(--on-dark-soft)}
.lang--footer .lang__opt[aria-current]{color:var(--on-dark)}
.lang--footer a.lang__opt:hover{color:var(--on-dark)}
.lang--footer .lang__sep{color:rgb(255 255 255/.28)}

/* ==========================================================================
   K-EINSTIEGSKARTEN Einstiegskarten v2 (.ek2-) · eingebaut 25.09.2026 (Inhaber: „richtig geil das mischen wir rein“)
   Stellen (DE + EN): Startseite, Leistungen, Workshops, Fallstudien, Über uns, Karriere.
   Studie: konzepte/einstiegskarten-apple-studie.md · Entwurf: site/_karten-test-v2.html (bleibt als Testseite).
   Markup: section.ek2-sec[data-k=ek2] > .wrap > .ek2-head (h2 + grauer Nachsatz p) · .ek2-shelf > .ek2-rail > ul.ek2-row > li
   Regal nach Apple: randloser Scroller, erste Karte fluchtet mit der Überschrift, Einrasten, Pfeile nur mit Maus.
   Die Pfeile (.ek2-nav) baut site.js (Modul ek2) mit zweisprachigen aria-Labels; ohne JS bleibt das Regal wischbar.
   Eine Kartenhöhe (500 / mobil 450), drei Breiten (380 · 460 · 300, ab 1680 px 400 · 480 · 320 / mobil 300 · 330 · 260).
   Fünf Kartentypen, alle ohne Verlauf über dem Bild:
     --portraet  echte Person freigestellt, steht auf der Unterkante und wird von ihr geschnitten
     --buehne    Objekt freigestellt (Alpha), von Unterkante oder Seitenrand geschnitten
     --raum      Vollbild: Text liegt auf der ruhigen Wand des Bildes; wo das Bild die Karte nicht bis oben füllt,
                 setzt --wall die Wand fort (oberste Bildzeile gemessen)
     --cut       „Ausschnitt“: Text oben auf Kartenfarbe, Szene unten randlos mit gerader Kante
     --hint      halbe Höhe, zwei übereinander in einem Regalplatz: Linien-Glyphe + Satz mit Moos-Schlüsselwort
   v3 · 26.09.2026 Büro-Fotos (Inhaber 01:47: „wie bei apple mit den karten stark integrieren“), Bilder ek3-*:
     --raum.ek2-card--foto  das Foto IST die Karte (object-fit), Text auf der hellen Bildzone (Fenster, Himmel), gemessen ≥ 4,5:1
     --cut mit Foto         Ausschnitt 3:2, Fokus --x/--y, mobil --mx/--my
     .ek2-note              „Szenen KI-generiert“ unter jedem Regal mit KI-Szenen; Alt-Texte beginnen mit „Illustration:“
     --twm                  Textbreite nur mobil (wenn ein Kopf rechts neben dem Text steht); .is-knapp = mobil ohne Unterzeile
   Zuschnitt und Export: konzepte/_werkzeuge/einstiegskarten/ek3-bilder.mjs
   Maße in der Karte über Container-Einheiten (cqi/cqh), die Karte ist container-type:size.
   Bühne/Porträt: --oh Objektbreite in % der Kartenhöhe, --ob Unterkante in % der Kartenhöhe (negativ = angeschnitten),
   --oc Mitte in % der Kartenbreite neben der Kartenmitte. Raum: --s Bildbreite × Kartenbreite, --wall Wandfarbe.
   ========================================================================== */
.ek2-sec{--ek2-h:500px;--ek2-gap:20px;--ek2-r:18px;--ek2-edge:max(var(--gutter),calc((100% - var(--w-xl)) / 2));--ek2-card:var(--offwhite);--ek2-sh:2px 4px 12px rgb(34 29 26/.08);--ek2-sh-h:2px 4px 16px rgb(34 29 26/.16);background:var(--stone);padding-block:var(--sec-m) calc(var(--sec-m) - 2.25rem)}
/* Regal-Überschrift: fett + grauer Nachsatz in einer Zeile, so groß wie eine Kartenüberschrift (Apple 28/32) */
.ek2-head{max-width:60rem;font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;color:var(--ink-head);text-wrap:balance}
.ek2-head h2,.ek2-head p{display:inline;font:inherit;letter-spacing:inherit}
.ek2-head p{color:var(--text-soft)}
/* Regal */
.ek2-shelf{position:relative}
.ek2-rail{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ek2-edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ek2-rail::-webkit-scrollbar{display:none}
.ek2-row{display:flex;gap:var(--ek2-gap);width:max-content;padding:.875rem var(--ek2-edge) 2.25rem}
.ek2-row > li{--w:380px;flex:none;width:var(--w);scroll-snap-align:start}
.ek2-row > li.is-wide{--w:460px}
.ek2-row > li.is-narrow{--w:300px}
@media (min-width:1680px){.ek2-row > li{--w:400px}.ek2-row > li.is-wide{--w:480px}.ek2-row > li.is-narrow{--w:320px}}
.is-wide .ek2-text{--tw:23rem}
/* Karte */
.ek2-card{--pad:28px;position:relative;isolation:isolate;display:block;container-type:size;width:100%;height:var(--ek2-h);overflow:hidden;border-radius:var(--ek2-r);background:var(--bg,var(--ek2-card));color:inherit;text-decoration:none;box-shadow:var(--ek2-sh);-webkit-tap-highlight-color:transparent}
.ek2-card:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.ek2-text{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem;max-width:calc(var(--tw,18rem) + 2 * var(--pad));padding:var(--pad) var(--pad) 0}
.ek2-eb{font:500 .75rem/1.25 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--bronze-deep)}
.ek2-h{font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-size:1.625rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink-head);text-wrap:balance}
.ek2-p{max-width:30ch;margin-top:.125rem;font-size:.9375rem;line-height:1.4;letter-spacing:-.005em;color:var(--text-deep);text-wrap:pretty}
.ek2-card picture{display:block}
.ek2-card img{display:block;width:100%}
/* Bühne + Porträt: über die Höhe gemessen, damit der Bildaufbau auf der schmaleren Mobilkarte gleich bleibt */
.ek2-obj{position:absolute;z-index:1;left:calc(50% + var(--oc,0) * 1cqi);bottom:calc(var(--ob,0) * 1cqh);width:calc(var(--oh,60) * 1cqh);max-width:none;translate:-50% 0;pointer-events:none}
.ek2-obj img{height:auto}
/* Raum: Bild in voller Kartenbreite × --s, unten bündig, mittig; die Wand darüber setzt --wall fort */
.ek2-card--raum{background:var(--wall,var(--sand))}
.ek2-room{position:absolute;z-index:0;left:50%;bottom:0;width:calc(var(--s,1) * 100cqi);max-width:none;margin-left:calc(var(--dx,0) * 1cqi);translate:-50% 0}
.ek2-room img{height:auto}
/* Ausschnitt: Szene unten randlos, gerade Oberkante */
.ek2-cut{position:absolute;inset:auto 0 0;height:var(--mh,58%)}
.ek2-cut img{height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,50%)}
/* Hinweis-Paar */
.ek2-pair{display:flex;flex-direction:column;gap:var(--ek2-gap);height:var(--ek2-h)}
.ek2-card--hint{--pad:26px;height:calc((var(--ek2-h) - var(--ek2-gap)) / 2);padding:var(--pad);display:flex;flex-direction:column;gap:1rem}
.ek2-ico{width:30px;height:30px;color:var(--moss);stroke-width:1.5}
.ek2-hint{font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 0;font-size:1.3125rem;line-height:1.22;letter-spacing:-.015em;color:var(--ink-head);text-wrap:balance}
.ek2-hint em{font-style:normal;color:var(--moss)}
/* Pfeile: rund, Rauchglas auf Stein, nur mit Maus; deaktiviert = verschwunden (Apple), nicht ausgegraut */
.ek2-nav{position:absolute;z-index:3;top:calc(.875rem + var(--ek2-h) / 2);width:48px;height:48px;margin-top:-24px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgb(236 234 230/.78);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);color:var(--ink);box-shadow:0 0 0 1px rgb(42 37 33/.10),0 6px 16px -6px rgb(34 29 26/.28);cursor:pointer;transition:opacity .5s cubic-bezier(.15,0,.2,1),transform .5s var(--ease-out),background-color .2s}
.ek2-nav svg{width:22px;height:22px;fill:none;stroke:currentColor}
.ek2-nav--prev{left:24px}
.ek2-nav--next{right:24px}
.ek2-nav:hover{background:rgb(250 249 247/.92)}
.ek2-nav:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.ek2-nav[disabled]{opacity:0;transform:scale(.8);pointer-events:none}
@media not ((hover:hover) and (pointer:fine)),(max-width:767px){.ek2-nav{display:none}}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ek2-card{transition:transform .3s cubic-bezier(0,0,.5,1),box-shadow .3s cubic-bezier(0,0,.5,1)}
  .ek2-card:hover,.ek2-card:focus-visible{transform:scale(1.01);box-shadow:var(--ek2-sh-h)}
}
@media (max-width:767px){
  .ek2-sec{--ek2-h:450px;--ek2-gap:14px}
  .ek2-row > li{--w:300px}
  .ek2-row > li.is-wide{--w:330px}
  .ek2-row > li.is-narrow{--w:260px}
  .ek2-card{--pad:24px}
  .ek2-head{font-size:1.375rem}
  .ek2-h{font-size:1.4375rem}
  .ek2-hint{font-size:1.1875rem}
  .ek2-card--hint{--pad:22px;gap:.75rem}
}
/* v3 · RAUM-Foto: das Foto füllt die Karte; kein Verlauf, kein Scrim. Eyebrow und Unterzeile dunkler als auf Kartengrund,
   damit sie auf dem Foto ≥ 4,5:1 halten (gemessen unter den Glyphen, Desktop und mobil) */
.ek2-card--foto{background:var(--sand)}
.ek2-foto{position:absolute;inset:0;z-index:0}
.ek2-foto img{height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,50%)}
.ek2-card--foto .ek2-eb{color:#2B2117}
.ek2-card--foto .ek2-p{color:#2E2926}
/* Kennzeichnung unter dem Regal (Kontrast --text-soft auf --stone 5,7:1) */
.ek2-note{margin-top:-1rem;font:400 .75rem/1.4 var(--font-sans);letter-spacing:0;color:var(--text-soft)}
@media (max-width:767px){
  .ek2-text{max-width:calc(var(--twm,var(--tw,18rem)) + 2 * var(--pad))}
  .ek2-cut img,.ek2-foto img{object-position:var(--mx,var(--x,50%)) var(--my,var(--y,50%))}
  .ek2-note{margin-top:-1.25rem}
  .ek2-card.is-knapp .ek2-p{display:none}   /* mobil ohne Unterzeile, wo sie sonst ins Motiv liefe */
}

/* ==========================================================================
   K-HERO-MOBIL Startseiten-Hero ≤ 767 px (26.09.2026, Inhaber 03:54 + 04:12 mit Vorlage-Screenshots) · Desktop und 768–991 px unverändert
   Text wie in der Vorlage: mittig, Eyebrow klein und farbig, H1 groß über zwei Zeilen, Lead, großer Knopf, Badge (unverändert) darunter.
   Der Baum ist kein Bildkasten, sondern liegt in Stücken auf dem Sektionsgrund und tritt nur an Seitenkanten aus
   (Leiste, Viewport-Rand, Sektionsgrenze). Hero und Statements tragen denselben Grund --hm-grund = Bildgrund von lv-baum-i2
   nach flach.py (#D3CBC3; freie Bildkanten gemessen ≤ 5 Stufen daneben). Kein Verlauf, keine Maske über den Bildern.
   Stücke (.hm, konzepte/_werkzeuge/hero-mobil/hm-bilder.sh): k1 Fuß (Sockel unten, Stamm tritt rechts aus) · k1b Stammstück
   (von unten rechts) · k2 Krone (oben angeschnitten, Stamm von links) · k2m dieselbe gespiegelt (Stamm von rechts).
   Fassung c „Rahmen“ (Inhaber 26.09.2026 04:57; a „Vorlage-nah“ und b „Diagonale“ verworfen): k2m hängt unter der
   Leiste (Krone oben rechts), k1 steht unten rechts auf der Kante zur nächsten Sektion; der Stamm liegt gedacht hinter
   dem rechten Rand, Text und Statements mittig dazwischen.
   Neuer Baum = hm-bilder.sh mit neuer Quelle (Zuschnitte prüfen), Dateinamen hm-<kürzel>-<stück>-*.
   ========================================================================== */
.hm{display:none}
@media (max-width:767px){
  .hero-tree{--hm-grund:#D3CBC3;background:var(--hm-grund)}
  .hero-tree__media{display:none}
  .hero-tree__screen--1{z-index:2;padding-top:calc(var(--nav-h) + 3rem);padding-bottom:3.5rem}
  .hero-tree__screen--2{background:none;padding-block:3rem 4.5rem}
  .hero-tree__copy{position:relative;z-index:1;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}
  .hero-tree__copy .press-pill{display:none}
  .hero-tree__copy .press-pill + .eyebrow{margin-top:0}
  .hero-tree__copy .t-h1{margin-top:1rem;font-size:min(14vw,3.5rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
  .hero-tree__copy .t-h1 + *{margin-top:1.25rem}
  .hero-tree__copy .t-lead{max-width:21.5rem;text-wrap:pretty}
  .hero-tree__copy .btns{margin-top:2rem;justify-content:center}
  .hero-tree__copy .btn{padding:1.125rem 1.875rem;font-size:1.0625rem}
  .hero-tree__sig{margin:1.75rem auto 0}
  .hm{position:absolute;z-index:0;max-width:none;pointer-events:none}
  .hm img{display:block;width:100%;height:auto;max-width:none}
  .statements{position:relative;z-index:1}

  /* Rahmen · kompakt (Inhaber 05:07): Badge muss beim Öffnen über der Safari-Leiste stehen (390 × 844: Unterkante ≤ 650 px).
     Krone 78 vw oben rechts; die Eyebrow rückt 2 % in ihren unteren Rand (Solarblatt-Spitze rechts endet bei ~88 %). */
  .hm--k2m{display:block;top:var(--nav-h);right:0;width:78vw}
  .hero-tree__screen--1{padding-top:calc(var(--nav-h) + 78vw * 1000 / 1252 * .98)}
  .hero-tree__copy .eyebrow{margin-top:0}
  .hero-tree__copy .t-h1{margin-top:.625rem;font-size:min(12.5vw,3.25rem)}
  .hero-tree__copy .t-h1 + *{margin-top:1rem}
  .hero-tree__copy .btns{margin-top:1.5rem}
  .hero-tree__copy .btn{padding:1rem 1.75rem}
  .hero-tree__sig{margin-top:1.25rem}
  .hero-tree__sig .badge-sig__t{text-align:left}
  .hm--k1{display:block;right:0;bottom:0;width:90vw}
  .hero-tree__screen--2{padding-bottom:calc(90vw * 1536 / 1240 * .6)}
  .statements{margin-inline:auto;max-width:18.5rem;text-align:center}
}

/* ==========================================================================
   K-LESEN Statements werden beim Scrollen „gelesen“ (26.09.2026, Inhaber 04:57) · site.js statements()
   Wörter stehen grau (Tinte mit 24 % Deckkraft auf dem Grund), --f 0…1 färbt jedes Wort einzeln voll ein.
   Kurze Übergangszeit glättet die Scroll-Schritte. Ohne .is-lesen (kein JS, reduzierte Bewegung): volle Farbe.
   ========================================================================== */
.statements.is-lesen .lw{color:var(--ink-head);opacity:calc(.24 + var(--f,0) * .76);transition:opacity .18s linear}

/* ==========================================================================
   K-LEISTUNGEN-REIHE Startseite ≤ 767 px: die vier Leistungskarten als Wisch-Reihe (26.09.2026, Inhaber 05:08)
   Karte 84 % breit, Scroll-Snap an der Textkante, die nächste Karte lugt rechts vor; Karten gleich hoch, Links unten.
   Objekte ragen bis ~0,18 × --obj über die Kartenoberkante → Luft oben in der Reihe (overflow schneidet sonst ab).
   Rechter Rand über ::after (Innenabstand am Ende einer Scroll-Reihe ist in älteren Safaris unzuverlässig).
   Punkte darunter: site.js stackReihe(). Ab 768 px unverändert (Liste bzw. Desktop-Stapel).
   ========================================================================== */
.stack__dots{display:none}
@media (max-width:767px){
  .stack--obj .stack__cards{flex-direction:row;align-items:stretch;gap:12px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:3.75rem 0 1.25rem var(--gutter)}
  .stack--obj .stack__cards::-webkit-scrollbar{display:none}
  .stack--obj .stack__cards::after{display:block;content:"";flex:0 0 calc(var(--gutter) - 12px)}
  .stack--obj .stack__card{flex:0 0 84%;scroll-snap-align:start;--obj:min(62vw,15rem)}
  .stack--obj .stack__links{margin-top:auto;padding-top:1.5rem}
  .stack__dots{display:flex;justify-content:center;gap:8px;margin-top:.5rem}
  .stack__dots button{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:rgb(34 29 26/.22);cursor:pointer;
    transition:width .3s var(--ease),background-color .3s var(--ease)}
  .stack__dots button[aria-current="true"]{width:24px;background:var(--ink)}
  .stack__dots button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.stack__dots button{transition:none}}

/* ==========================================================================
   K-SPAR Kennzahl „−80 % KI-Verbrauch je Deck“ (26.09.2026, bis 05:25 „5ד) · brand-studio.html + en/, Ende von „Im Studio“
   Übernommen von der Brand-Studio-Demoseite (Block „Große Zahl: KI-Verbrauch je Deck“). Tokens umgelegt:
   --goldline → Bronze-Haarlinie · --use-bg → --white (wie die Kacheln darüber) · --gold-ink → --bronze · --tx → --ink ·
   --dim → --text-soft · --line → --line · --line2 → --clay · --sf → --font-serif (Zahl, Zeile darunter) / --font-sans (Rest).
   Gravur statt Funkeln: kein Glow, kein Glanzverlauf. Karte mit doppelter eingravierter Randlinie (wie K-PLAKETTE),
   Balkenbahn als Rille, 20-%-Balken als feine Bronze-Einlage mit Fase. Die 5× sind ein Richtwert, die Fußzeile sagt es.
   ========================================================================== */
.spar{--spar-edge:rgb(115 90 54/.26);--spar-edge2:rgb(115 90 54/.12);
  margin-top:clamp(2.5rem,5vw,4rem);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;
  padding:clamp(1.5rem,3.4vw,3rem);border-radius:var(--r-l);background:var(--white);
  box-shadow:inset 0 0 0 1px var(--spar-edge),inset 0 0 0 6px var(--white),inset 0 0 0 7px var(--spar-edge2);
  font-variant-numeric:tabular-nums}
.spar > *{min-width:0}
.spar-zahl b{display:block;font:var(--serif-wght) clamp(84px,10.5vw,152px)/.86 var(--font-serif);font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  white-space:nowrap;letter-spacing:-.05em;color:var(--bronze);font-variant-numeric:tabular-nums lining-nums}
/* 26.09.2026 05:25: „5ד → „−80 %“ (echtes Minus, schmales geschütztes Leerzeichen), gleich mit azena.ai/brand-studio; .sr-only trägt den Satz für Screenreader */
/* Minus in Fraunces opsz 144 ist nur eine Haarlinie (liest sich wie Gedankenstrich) → Textschnitt opsz 9, kräftigerer Strich, gleiche Familie */
.spar-minus{font-variation-settings:"opsz" 9,"SOFT" 0,"WONK" 0;font-weight:500;margin-right:.03em}
.spar-zahl > span{display:block;margin-top:1rem;font:var(--head-wght) clamp(1.25rem,1.9vw,1.625rem)/1.25 var(--font-serif);
  font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;letter-spacing:-.01em;color:var(--ink-head)}
.spar-zeile{display:grid;gap:.625rem}
.spar-zeile + .spar-zeile{margin-top:1.75rem}
.spar-zeile em{font:500 .9375rem/1.35 var(--font-sans);font-style:normal;color:var(--ink)}
.spar-balken{display:block;height:8px;border-radius:var(--r-pill);background:var(--linen);
  box-shadow:inset 0 1px 2px rgb(34 29 26/.14),inset 0 0 0 1px rgb(42 37 33/.06),0 1px 0 rgb(255 255 255/.9)}
.spar-balken i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--clay);box-shadow:inset 0 -1px 0 rgb(42 37 33/.10)}
.spar-zeile.gut .spar-balken i{background:var(--bronze);box-shadow:inset 0 1px 0 rgb(255 255 255/.22),inset 0 -1px 0 rgb(34 29 26/.28)}
.spar-zeile small{font-size:.8125rem;line-height:1.45;color:var(--text-soft)}
.spar-fuss{grid-column:1/-1;margin:0;padding-top:1.125rem;border-top:1px solid var(--line);font-size:.8125rem;line-height:1.5;color:var(--text-soft)}
@media (max-width:767px){
  .spar{grid-template-columns:1fr;gap:1.75rem}
  .spar-zahl > span{margin-top:.75rem}
}

/* ==========================================================================
   K-ZWISCHENZEILEN (26.09.2026, Inhaber 05:17)
   Startseite: vier ruhige Sätze zwischen den Sektionen, „natürliche × künstliche Intelligenz“ (Inhaber 05:18:
   „krasse Kompositionen“ → Satz und Motiv als ein Bild, asymmetrisch, jedes Band anders).
     Z1 nach Leistungen      sehr groß, unten links · Motiv oben rechts, hängt von der Oberkante
     Z4 nach „Der Anfang“    zwei Sätze, rechte Spalte oben · Motiv unten links, wächst aus der Unterkante
     Z2 nach dem Film        kleiner, unten links · viel Motiv rechts in voller Bandhöhe
     Z3 vor dem CTA          groß, oben rechts · Motiv unten links, wächst aus der Unterkante
   Markup: div.zw.zw--z1…z4[data-zw-band] > .zw__satz[data-lesen] > p · picture.zw__baum (Fassung b).
   Lesen: site.js statements() (jedes [data-lesen]); .lw grau → Wort für Wort volle Farbe wie K-LESEN.
   Ohne .is-lesen (kein JS, reduzierte Bewegung): volle Farbe.
   Fassungen (Testschalter ?zw=a|b|c → html[data-zw], Kopf-Skript; ohne JS gilt b):
     a Gravur        gestochener Olivenzweig in Bronze auf Papier, zeichnet sich synchron zum Lesen
                     (assets/zw/zw-a-*.svg aus konzepte/_werkzeuge/zwischenzeilen/gravur.py, site.js zwischenzeilen)
     b Baum wächst   Standard. Grund = Hero-Grund #D3CBC3, Stücke aus lv-baum-i2 (zw-bilder.sh), der Baum tritt nur an
                     Seitenkanten aus: Viewport-Rand oder Ober-/Unterkante des Bands. Spiegeln hier per scale.
     c Wurzelfaden   roségoldener Faden aus der Oberkante zum Satz, am Ende ein Trieb mit drei Blättern (site.js)
   ========================================================================== */
.zw{--zw-grund:#D3CBC3;--zw-fs:3rem;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:var(--zw-h,auto);padding:var(--zw-pt,6rem) var(--gutter) var(--zw-pb,6rem);background:var(--zw-grund)}
.zw__satz{position:relative;z-index:2;width:100%;max-width:var(--w-xl);margin:var(--zw-my,auto) auto;
  font-family:var(--font-serif);font-size:var(--zw-fs);font-weight:350;font-optical-sizing:auto;font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0;
  line-height:1.06;letter-spacing:-.024em;color:var(--ink-head)}
.zw__satz p{max-width:var(--zw-mass,11em);margin-left:var(--zw-x,0);text-wrap:balance}
.zw__satz p + p{margin-top:.34em}
.zw__satz.is-lesen .lw{color:var(--ink-head);opacity:calc(.24 + var(--f,0) * .76);transition:opacity .18s linear}
.zw__baum{position:absolute;z-index:1;display:block;pointer-events:none}
.zw__baum img{display:block;width:100%;height:auto}
.zw__baum.is-spiegel,.zw--z4 .zw__baum,.zw--z2 .zw__baum,.zw--z3 .zw__baum{scale:-1 1}

/* Z1 · sehr groß, wenig Motiv: ein einzelner Zweig mit Solarblatt hängt groß von der Oberkante (Stück „blatt“) */
.zw--z1{--zw-h:clamp(32rem,66vh,46rem);--zw-pt:9rem;--zw-pb:clamp(4.5rem,11vh,7.5rem);--zw-fs:clamp(2.75rem,5.4vw,5.75rem);--zw-my:auto 0;--zw-mass:10.4em}
.zw--z1 .zw__baum{top:0;right:max(var(--gutter),5vw);width:clamp(18rem,44vw,46rem)}
/* Z4 · zwei Sätze in der rechten Spalte, das Moospolster mit den Kabeln wächst links aus der Unterkante (Stück „wurzel“) */
.zw--z4{--zw-h:clamp(32rem,64vh,46rem);--zw-pt:clamp(4.5rem,12vh,7.5rem);--zw-pb:4rem;--zw-fs:clamp(2rem,3.3vw,3.5rem);--zw-my:0 auto;--zw-x:47%;--zw-mass:13.5em}
.zw--z4 .zw__baum{left:0;bottom:0;width:clamp(20rem,46vw,48rem)}
/* Z2 · kleiner Satz, viel Motiv: die Krone steht rechts in voller Bandhöhe (tritt oben, rechts und unten aus) */
.zw--z2{--zw-kw:min(60vw,70rem);--zw-h:calc(var(--zw-kw) * 900 / 1282);--zw-pt:4rem;--zw-pb:clamp(4rem,12vh,7rem);--zw-fs:clamp(1.75rem,2.5vw,2.625rem);--zw-my:auto 0;--zw-mass:13em}
.zw--z2 .zw__baum{top:0;bottom:0;right:0}
.zw--z2 .zw__baum img{width:auto;height:100%;max-width:none}
/* Z3 · groß oben rechts, zwei Triebe mit Solarblatt wachsen links aus der Unterkante und neigen sich zum Satz (Stück „trieb“) */
.zw--z3{--zw-h:clamp(32rem,64vh,46rem);--zw-pt:clamp(5rem,13vh,8rem);--zw-pb:4rem;--zw-fs:clamp(2.375rem,4.2vw,4.5rem);--zw-my:0 auto;--zw-x:40%;--zw-mass:11.2em}
.zw--z3 .zw__baum{left:0;bottom:0;width:clamp(15rem,27vw,28rem)}

/* Handy: Satz über oder unter dem Motiv, nie daneben; Stücke an Seiten- und Bandkanten wie am Desktop */
@media (max-width:767px){
  .zw{--zw-fs:2rem;--zw-x:0;--zw-mass:none;min-height:0}
  .zw__satz{line-height:1.1;letter-spacing:-.02em}
  .zw--z1{--zw-fs:2.25rem;--zw-pt:calc(64vw * 840 / 1320 * .95);--zw-pb:3.75rem}
  .zw--z1 .zw__baum{right:0;width:64vw}
  .zw--z4{--zw-fs:1.875rem;--zw-pt:3.5rem;--zw-pb:calc(92vw * 928 / 1500 * .93)}
  .zw--z4 .zw__baum{width:92vw}
  .zw--z2{--zw-fs:1.75rem;--zw-h:auto;--zw-pt:calc(72vw * 1400 / 1304 + .75rem);--zw-pb:3.75rem}
  .zw--z2 .zw__baum{top:0;bottom:auto;left:0;right:auto;width:72vw;scale:none}
  .zw--z2 .zw__baum img{width:100%;height:auto}
  .zw--z3{--zw-fs:2.125rem;--zw-pt:3.5rem;--zw-pb:calc(58vw * 1480 / 1440 * .96)}
  .zw--z3 .zw__baum{width:58vw}
}

/* Fassung a · Gravur: Bronze auf Papier; Strichstärken in Einheiten der viewBox (mobil kräftiger, weil kleiner gezeigt) */
html[data-zw="a"] .zw{--zw-grund:var(--paper)}
html[data-zw="a"] .zw__baum,html[data-zw="c"] .zw__baum{display:none}
.zw__motiv--a{position:absolute;z-index:1;pointer-events:none}
.zw__motiv--a svg{display:block;width:100%;height:auto}
.zw-g path{fill:none;stroke:var(--bronze);stroke-linecap:round;stroke-linejoin:round}
.zw-g .gf{fill:var(--zw-grund);stroke:none}
.zw-g .gs2{stroke-width:1.5}.zw-g .gs1{stroke-width:.8}.zw-g .gl2{stroke-width:1.2}.zw-g .gl1{stroke-width:.65}
.zw-g .gm{stroke-width:.7}.zw-g .gh{stroke-width:.45}.zw-g .go{stroke-width:1}.zw-g .go2{stroke-width:.55}
.zw--z1 .zw__motiv--a{top:0;right:4vw;width:clamp(18rem,36vw,38rem)}
.zw--z4 .zw__motiv--a{left:1vw;bottom:0;width:clamp(20rem,44vw,46rem)}
.zw--z2 .zw__motiv--a{right:0;top:50%;translate:0 -50%;width:clamp(22rem,54vw,58rem)}
.zw--z3 .zw__motiv--a{left:3vw;bottom:0;width:clamp(14rem,28vw,28rem)}
@media (max-width:767px){
  .zw-g .gs2{stroke-width:2.4}.zw-g .gs1{stroke-width:1.3}.zw-g .gl2{stroke-width:1.9}.zw-g .gl1{stroke-width:1.05}
  .zw-g .gm{stroke-width:1.1}.zw-g .gh{stroke-width:.75}.zw-g .go{stroke-width:1.6}.zw-g .go2{stroke-width:.9}
  .zw--z1 .zw__motiv--a{right:0;width:66vw}
  .zw--z4 .zw__motiv--a{left:0;width:88vw}
  .zw--z2 .zw__motiv--a{top:.5rem;translate:none;width:96vw}
  .zw--z3 .zw__motiv--a{left:0;width:60vw}
}

/* Fassung c · Wurzelfaden: Draht aus Roségold mit Glanzlinie und leisem Schlagschatten, kein Leuchten.
   Grund Nebel wie Film, Fallstudien und CTA: Z2 und Z3 gehen randlos in die Nachbarn über, der Faden läuft durch. */
html[data-zw="c"] .zw{--zw-grund:var(--mist)}
.zw-f{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible}
.zw-f path:not(.zw-f__blatt){fill:none;stroke-linecap:round;stroke-linejoin:round}
.zw-f__draht{stroke:#A26F58;stroke-width:1.5}
.zw-f__glanz{stroke:#F2D6C6;stroke-width:.55;translate:-.45px -.5px}
.zw-f__schatten{stroke:rgb(58 40 30/.13);stroke-width:2;translate:.9px 1.6px}
.zw-f__blatt{stroke:#80523E;stroke-width:.6;stroke-linejoin:round}
@media (max-width:767px){
  html[data-zw="c"] .zw--z1{--zw-pt:9.5rem}
  html[data-zw="c"] .zw--z2{--zw-pt:9rem}
  html[data-zw="c"] .zw--z4{--zw-pb:4rem}
  html[data-zw="c"] .zw--z3{--zw-pb:4rem}
}

/* K-ZWISCHENZEILEN · Feinschliff nach Sichtprüfung (26.09.2026, 1440 + 390 px) – überschreibt Werte aus dem Block oben
   (styles.css wird nur ergänzt, nie umgeschrieben): Satz sitzt oben/unten statt mittig, Z4 größer, Triebe in Z3 größer,
   am Handy mehr Luft zwischen Satz und Motiv. */
.zw__satz{margin:0 auto;margin-block:var(--zw-my,auto)}
.zw--z4{--zw-fs:clamp(2.25rem,3.7vw,4rem)}
.zw--z3 .zw__baum{width:clamp(16rem,33vw,34rem)}
@media (max-width:767px){
  .zw--z4{--zw-fs:1.875rem;--zw-pb:calc(92vw * 928 / 1500 + 1.25rem)}
  .zw--z3{--zw-pb:calc(58vw * 1480 / 1440 + 1rem)}
  .zw--z3 .zw__baum{width:58vw}
}
/* K-ZWISCHENZEILEN · Fassung a am Handy: Zweig in Z1 kleiner, sonst ragt seine Spitze in die erste Zeile.
   Stand 26.09.2026: a ist verworfen (wirkt neben b wie Vektor-Clipart), bleibt nur zum Ansehen über ?zw=a. */
@media (max-width:767px){.zw--z1 .zw__motiv--a{width:54vw}}

/* ==========================================================================
   K-KARUSSELL (26.09.2026) · Animations-Karussell (.ak-) auf der Startseite, DE + EN · übernommen aus _karussell-test.html
   Sitzt genau an der Stelle des Video-Blocks K13 (zwischen den Zwischenzeilen Z4 und Z2). Beide Sektionen stehen im HTML,
   CSS blendet um. Das Kopf-Skript setzt html[data-ak] nur bei Parameter: ?ak=1 Karussell · ?ak=0 Video-Block.
   Ohne Parameter (und ohne JS) gilt die STANDARDZEILE direkt unter diesem Kopf, für DE und EN zugleich.
     KARUSSELL ALS STANDARD = nur die Standardzeile ersetzen durch   :root{--ak-karussell:block;--ak-film:none}
     (danach zeigt ?ak=0 weiter den Video-Block zum Vergleich).
   Ausgeblendet lädt und läuft nichts: Bilder loading="lazy" (display:none lädt keine lazy Bilder), Videos preload="none"
   ohne src; site.js karussell() startet nur, wenn die Sektion sichtbar ist, und setzt src erst beim Abspielen.
   Aufbau
     section.ak.ak--start[data-k=karussell]  Region über aria-labelledby (Überschrift in .ak-head), aria-roledescription setzt site.js
     .ak-track           waagerechter Scroller mit Einrasten; erste Karte fluchtet mit der Überschrift, die nächste lugt hervor
     .ak-item > .ak-card hochformatige Karte 400 × 680 (991 px: 360; mobil 85 vw), Text oben, Motiv darunter
               .ak-cap   Satz unter der Karte, Muster „Fett. Rest grau.“
     .ak-ctrl            Pille mit Punkten (aktiver Punkt = gestreckter Fortschrittsbalken) + runder Play/Pause-Knopf
     .ak-note            Kennzeichnung „Szenen KI-generiert …“ unter dem Karussell
   Zwei Sorten Karten
     Video  (.ak-media)  Standbild <picture> + <video data-src="">, Dauer = Filmlänge. Ohne Film: 6 s Standbild, sanfter Zoom.
                         --mh Motivhöhe, --x/--y Ausschnitt, .ak-media--fade weich in die Kartenfarbe (--fade).
     Code   (.ak-stage)  echte Oberfläche aus HTML/CSS/SVG. Dauer in data-ak-dur (ms). Grundzustand ohne .is-playing =
                         Endzustand = Standbild (reduzierte Bewegung, inaktive Karten). Maße in cqi (1 cqi = 1 % Kartenbreite).
   Zeitsteuerung: site.js karussell() zählt die Zeit der aktiven Karte (rAF), CSS-Animationen laufen mit .is-playing und
   stehen mit .is-paused. ?static=1 (und ?rm=1) = reduzierte Bewegung erzwingen.
   ========================================================================== */
:root{--ak-karussell:none;--ak-film:block}   /* STANDARDZEILE: Video-Block K13. Karussell als Standard → :root{--ak-karussell:block;--ak-film:none} */
html[data-ak="1"]{--ak-karussell:block;--ak-film:none}
html[data-ak="0"]{--ak-karussell:none;--ak-film:block}
.p-index .vid{display:var(--ak-film)}
.ak--start{display:var(--ak-karussell)}
.ak{--ak-w:400px;--ak-gap:20px;--ak-r:24px;--ak-edge:max(var(--gutter),calc((100% - var(--w-xl)) / 2));
  --ak-rose:#C8957F;--ak-rose-2:#E2BFAE;--ak-dark:#211C19;--ak-on:#F5F1EB;--ak-on-soft:#B8ADA2;
  --ak-ctl:rgb(42 37 33/.07);--ak-ctl-h:rgb(42 37 33/.13);--ak-dot:#7E746B;--ak-ease:cubic-bezier(.22,.61,.36,1);
  padding-block:var(--sec-m);background:var(--paper)}
.ak-head{margin-bottom:2.25rem}
.ak-title{max-width:62rem;font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;font-size:2.625rem;line-height:1.15;letter-spacing:-.02em;color:var(--ink-head);text-wrap:balance}
.ak-title span{color:var(--text-soft)}
/* Scroller */
.ak-track{position:relative;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--ak-edge);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ak-track::-webkit-scrollbar{display:none}
.ak-track:focus-visible{outline:2px solid var(--moss);outline-offset:-2px}
.ak-row{position:relative;display:flex;align-items:flex-start;gap:var(--ak-gap);width:max-content;padding:4px var(--ak-edge) 6px}
.ak-item{flex:none;width:var(--ak-w);scroll-snap-align:start}
/* Karte */
.ak-card{--bg:var(--stone);--t-eb:var(--bronze-deep);--t-h:var(--ink-head);position:relative;isolation:isolate;container-type:inline-size;width:100%;aspect-ratio:400/680;overflow:hidden;border-radius:var(--ak-r);background:var(--bg);color:var(--t-h)}
.ak-card--dark{--bg:var(--ak-dark);--t-eb:#D6AE97;--t-h:var(--ak-on)}
.ak-text{position:relative;z-index:3;display:flex;flex-direction:column;gap:.5rem;padding:7cqi 7cqi 0}
.ak-eb{font:500 .75rem/1.25 var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--t-eb)}
.ak-h{font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 48,"SOFT" 0,"WONK" 0;font-size:1.75rem;line-height:1.14;letter-spacing:-.02em;color:var(--t-h);text-wrap:balance}
.ak-cap{max-width:var(--ak-w);margin-top:1.125rem;padding-right:1rem;font-size:1.0625rem;line-height:1.42;letter-spacing:-.01em;color:var(--text-soft);text-wrap:pretty}
.ak-cap b{font-weight:600;color:var(--ink-head)}
/* Video-Karten: Motiv unten mit gerader Kante (--mh Höhe, --x/--y Ausschnitt), optional weich in die Kartenfarbe (--fade) */
.ak-media{position:absolute;z-index:1;left:0;right:0;bottom:0;height:var(--mh,62%);overflow:hidden}
.ak-media--fade{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade,26%));mask-image:linear-gradient(180deg,transparent 0,#000 var(--fade,26%))}
.ak-poster,.ak-poster img,.ak-video{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.ak-poster img,.ak-video{object-fit:cover;object-position:var(--x,50%) var(--y,50%)}
.ak-video{opacity:0;transition:opacity .5s var(--ak-ease)}
.ak-media.is-video .ak-video{opacity:1}
/* Code-Karten: Bühne über die ganze Karte, Inhalt von unten verankert, Text liegt darüber */
.ak-stage{position:absolute;z-index:1;inset:0;font-family:var(--font-sans);letter-spacing:-.005em;line-height:1.25;pointer-events:none}
.ak-card--dark .ak-stage::before{content:"";position:absolute;left:-30%;right:-30%;bottom:-24%;height:78%;background:radial-gradient(closest-side,rgb(200 149 127/.17),rgb(200 149 127/0))}
.ak-ck{display:block;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ak-ck path{stroke-dasharray:1;stroke-dashoffset:0}
/* Zeitleiste: Grundzustand = Endbild; mit .is-playing starten die Animationen (fill both = Startbild bis zur Verzögerung --t) */
.ak-card.is-playing [data-an]{animation-duration:var(--du,.45s);animation-timing-function:var(--ak-ease);animation-delay:var(--t,0s);animation-fill-mode:both}
.ak-card.is-playing [data-an="in-up"]{animation-name:ak-in-up}
.ak-card.is-playing [data-an="in-down"]{animation-name:ak-in-down}
.ak-card.is-playing [data-an="fade"]{animation-name:ak-fade}
.ak-card.is-playing [data-an="wipe"]{animation-name:ak-wipe}
.ak-card.is-playing [data-an="pop"]{animation-name:ak-pop}
.ak-card.is-playing [data-an="draw"]{animation-name:ak-draw}
.ak-card.is-playing .ak-media:not(.is-video) .ak-poster img{animation:ak-kb var(--kb,6.4s) linear both}
.ak-card.is-paused,.ak-card.is-paused *,.ak-card.is-paused *::before,.ak-card.is-paused *::after{animation-play-state:paused!important}
@keyframes ak-in-up{from{opacity:0;translate:0 3cqi}}
@keyframes ak-in-down{from{opacity:0;translate:0 -3cqi}}
@keyframes ak-fade{from{opacity:0}}
@keyframes ak-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ak-pop{0%{opacity:0;scale:.5}65%{opacity:1;scale:1.08}100%{opacity:1;scale:1}}
@keyframes ak-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ak-kb{from{scale:1}to{scale:1.07}}

/* ---------- Karte „Auftragsentwurf“ (.ak-a-) · 8,0 s ---------- */
.ak-a-wrap{position:absolute;left:6cqi;right:6cqi;bottom:6cqi;display:flex;flex-direction:column;gap:4.5cqi;color:var(--ak-on)}
.ak-panel{position:relative;border-radius:4.5cqi;background:rgb(255 255 255/.06);box-shadow:inset 0 0 0 1px rgb(255 255 255/.09),0 3cqi 8cqi -3cqi rgb(0 0 0/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ak-a-mail{display:grid;grid-template-columns:9cqi 1fr auto;column-gap:3cqi;row-gap:.6cqi;align-items:center;padding:3.6cqi 4cqi 4cqi}
.ak-a-av{grid-row:1/3;display:grid;place-items:center;width:9cqi;height:9cqi;border-radius:50%;background:rgb(200 149 127/.18);color:var(--ak-rose-2)}
.ak-a-av svg{width:4.6cqi;height:4.6cqi;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.ak-a-subj{font-size:3.4cqi;font-weight:600}
.ak-a-time{font-size:2.5cqi;color:var(--ak-on-soft)}
.ak-a-from{grid-column:2/4;font-size:2.6cqi;color:var(--ak-on-soft)}
.ak-a-att{grid-column:2/4;justify-self:start;margin-top:1.6cqi}
.ak-chip{display:inline-flex;align-items:center;gap:1.4cqi;height:6cqi;padding:0 2.4cqi 0 1.6cqi;border-radius:1.6cqi;background:rgb(255 255 255/.08);box-shadow:inset 0 0 0 1px rgb(255 255 255/.1);font-size:2.6cqi;font-weight:500;white-space:nowrap;color:var(--ak-on)}
.ak-pdf{flex:none;width:3.2cqi;height:3.9cqi}
.ak-a-fly{position:absolute;z-index:5;left:0;top:0;opacity:0;background:rgb(80 66 58/.92);box-shadow:inset 0 0 0 1px var(--ak-rose-2),0 1.6cqi 4cqi rgb(0 0 0/.45)}
.ak-a-form{padding:4cqi 4.5cqi 4.5cqi;background:rgb(255 255 255/.085)}
.ak-a-fh{display:flex;align-items:center;gap:2cqi}
.ak-a-ft{font-size:3.4cqi;font-weight:600}
.ak-pill{display:inline-flex;align-items:center;height:4.4cqi;padding:0 1.8cqi;border-radius:99px;font-size:2.2cqi;font-weight:500;box-shadow:inset 0 0 0 1px rgb(226 191 174/.45);color:var(--ak-rose-2)}
.ak-a-fh .ak-chip{margin-left:auto}
.ak-a-fields{display:grid;grid-template-columns:1fr 1fr;gap:3cqi;margin-top:3.8cqi}
.ak-lab{display:block;margin-bottom:1.2cqi;font-size:2.3cqi;color:var(--ak-on-soft)}
.ak-slot{display:block;height:2.8cqi;border-radius:.8cqi;background:rgb(255 255 255/.06)}
.ak-bar{display:block;width:var(--w,60%);height:100%;border-radius:.8cqi;background:rgb(245 241 235/.66)}
.ak-a-tab{margin-top:3.8cqi}
.ak-a-tr{display:grid;grid-template-columns:1fr 11cqi 14cqi;column-gap:2.4cqi;align-items:center;height:6.4cqi;border-top:1px solid rgb(255 255 255/.08)}
.ak-a-th{height:4.4cqi;border-top:0;font-size:2.1cqi;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ak-on-soft)}
.ak-a-pos{display:flex;gap:1.6cqi;height:2.8cqi}
.ak-a-pos .ak-slot:first-child{flex:none;width:9cqi}
.ak-a-pos .ak-slot:last-child{flex:1}
.ak-a-tr > .ak-slot{width:7cqi}
.ak-st{display:inline-flex;align-items:center;gap:1.2cqi;font-size:2.3cqi;font-weight:500;white-space:nowrap}
.ak-ok,.ak-q{flex:none;display:grid;place-items:center;width:4.2cqi;height:4.2cqi;border-radius:50%}
.ak-ok{background:rgb(143 179 154/.28);color:#BCDCC5}
.ak-ok .ak-ck{width:2.6cqi;height:2.6cqi}
.ak-q{background:rgb(201 168 124/.22);color:var(--champagne);font-size:2.5cqi;font-weight:600}
.ak-st--q{color:var(--champagne)}
.ak-a-foot{display:flex;align-items:center;justify-content:space-between;gap:3cqi;margin-top:4cqi}
.ak-a-note{font-size:2.3cqi;line-height:1.3;color:var(--ak-on-soft)}
.ak-a-go{flex:none;display:inline-flex;align-items:center;gap:1.4cqi;height:7.4cqi;padding:0 3.2cqi 0 2.4cqi;border-radius:99px;background:var(--ak-rose-2);color:#2A1E18;font-size:2.8cqi;font-weight:600;white-space:nowrap}
.ak-a-go .ak-ck{width:3.4cqi;height:3.4cqi;stroke-width:2.4}
.ak-card.is-playing .ak-a-mail .ak-chip{animation:ak-a-glow .7s ease .6s both}
.ak-card.is-playing .ak-a-fly{animation:ak-a-fly 1.3s var(--ak-ease) .95s both}
.ak-card.is-playing .ak-a-go{animation:ak-a-go .5s var(--ak-ease) 5.4s both}
@keyframes ak-a-glow{0%,100%{box-shadow:inset 0 0 0 1px rgb(255 255 255/.1)}50%{box-shadow:inset 0 0 0 1px var(--ak-rose-2),0 0 0 .9cqi rgb(200 149 127/.25)}}
@keyframes ak-a-fly{0%{opacity:0;translate:0 0;scale:1}12%{opacity:1;translate:0 -1cqi;scale:1.05}82%{opacity:1;translate:var(--fx,0) var(--fy,0);scale:1}100%{opacity:0;translate:var(--fx,0) var(--fy,0);scale:1}}
@keyframes ak-a-go{from{background:rgb(255 255 255/.1);color:var(--ak-on-soft)}}

/* ---------- Karte „Vier Sprachen“ (.ak-b-) · 9,6 s ---------- */
.ak-b-wrap{position:absolute;left:5cqi;right:5cqi;bottom:6cqi;display:flex;flex-direction:column;align-items:center;gap:4.5cqi}
.ak-b-seg{position:relative;display:grid;grid-template-columns:repeat(4,13cqi);padding:.9cqi;border-radius:99px;background:rgb(42 37 33/.07)}
.ak-b-seg > span{position:relative;z-index:1;display:grid;place-items:center;height:6.6cqi;font-size:2.7cqi;font-weight:600;letter-spacing:.06em;color:var(--ink)}
.ak-b-seg > .ak-b-hl{position:absolute;z-index:0;left:.9cqi;top:.9cqi;width:13cqi;height:6.6cqi;border-radius:99px;background:#fff;box-shadow:0 .3cqi 1.2cqi rgb(34 29 26/.16)}
.ak-b-slide{display:grid;grid-template-columns:1fr 38%;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:1.8cqi;background:var(--offwhite);box-shadow:0 .3cqi .8cqi rgb(34 29 26/.08),0 3cqi 7cqi -2cqi rgb(34 29 26/.2)}
.ak-b-txt{display:flex;flex-direction:column;min-width:0;padding:5cqi 3cqi 3.6cqi 5cqi}
.ak-x{position:relative;display:grid}
.ak-x > *{grid-area:1/1}
.ak-x > :not(:first-child){opacity:0}
.ak-b-ey{font-size:1.75cqi;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze)}
.ak-b-ti{margin-top:1.6cqi;font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 0;font-size:4.5cqi;line-height:1.08;letter-spacing:-.02em;color:var(--ink-head)}
.ak-b-bo{margin-top:1.8cqi;font-size:2cqi;line-height:1.38;color:var(--text)}
.ak-b-ft{display:flex;align-items:center;gap:1cqi;margin-top:auto;font:400 2.3cqi/1 var(--font-mark);color:var(--ink)}
.ak-b-ft img{width:2.9cqi;height:2.9cqi}
.ak-b-img{margin:2.6cqi 2.6cqi 2.6cqi 0;overflow:hidden;border-radius:1cqi}
.ak-b-img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.ak-guide{position:absolute;inset:-.8cqi -1cqi;border:1px dashed rgb(115 90 54/.7);border-radius:.6cqi;opacity:0}
.ak-b-chips{display:flex;gap:2cqi}
.ak-b-chip{display:inline-flex;align-items:center;gap:1.2cqi;height:6.2cqi;padding:0 2.6cqi 0 1.8cqi;border-radius:99px;background:rgb(255 255 255/.72);box-shadow:inset 0 0 0 1px var(--line);font-size:2.5cqi;font-weight:500;color:var(--ink)}
.ak-b-chip .ak-ck{width:3cqi;height:3cqi;color:var(--moss)}
.ak-b-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqi;width:100%}
.ak-b-th{display:flex;flex-direction:column;align-items:center;gap:1.2cqi;font-size:2.2cqi;font-weight:600;letter-spacing:.06em;color:var(--text)}
.ak-b-mini{display:grid;grid-template-columns:1fr 36%;gap:1cqi;width:100%;aspect-ratio:16/9;padding:1.2cqi;border-radius:.8cqi;background:var(--offwhite);box-shadow:0 .2cqi .8cqi rgb(34 29 26/.14)}
.ak-b-mini > span:first-child{display:flex;flex-direction:column;gap:.7cqi;padding-top:.8cqi}
.ak-b-mini > span:first-child span{display:block;height:1cqi;border-radius:.3cqi;background:var(--clay)}
.ak-b-mini > span:first-child span:nth-child(1){width:90%;height:1.4cqi;background:#9C9187}
.ak-b-mini > span:first-child span:nth-child(2){width:70%;height:1.4cqi;background:#9C9187}
.ak-b-mini > span:first-child span:nth-child(3){width:80%}
.ak-b-mini > span:last-child{border-radius:.4cqi;background:linear-gradient(160deg,#D9CBB6,#B9A68C)}
.ak-card.is-playing .ak-b-hl{animation:ak-b-hl 9.6s linear both}
.ak-card.is-playing .ak-x > :nth-child(1){animation:ak-b-de 9.6s linear both}
.ak-card.is-playing .ak-x > :nth-child(2){animation:ak-b-en 9.6s linear both}
.ak-card.is-playing .ak-x > :nth-child(3){animation:ak-b-fr 9.6s linear both}
.ak-card.is-playing .ak-x > :nth-child(4){animation:ak-b-it 9.6s linear both}
.ak-card.is-playing .ak-guide{animation:ak-b-guide 9.6s linear both}
/* DE 0–2,0 s · EN 2,1–4,2 · FR 4,3–6,4 · IT 6,5–8,6 · zurück zu DE ab 8,6 s (Standbild = DE) */
@keyframes ak-b-hl{0%,20.8%{translate:0;animation-timing-function:var(--ak-ease)}25%,43.75%{translate:100%;animation-timing-function:var(--ak-ease)}47.9%,66.7%{translate:200%;animation-timing-function:var(--ak-ease)}70.8%,89.6%{translate:300%;animation-timing-function:var(--ak-ease)}93.8%,100%{translate:0}}
@keyframes ak-b-de{0%,20.8%{opacity:1;filter:blur(0)}24%,89.6%{opacity:0;filter:blur(.6cqi)}92.7%,100%{opacity:1;filter:blur(0)}}
@keyframes ak-b-en{0%,21.9%{opacity:0;filter:blur(.6cqi);translate:0 .8cqi}25%,43.75%{opacity:1;filter:blur(0);translate:0 0}46.9%,100%{opacity:0;filter:blur(.6cqi);translate:0 0}}
@keyframes ak-b-fr{0%,44.8%{opacity:0;filter:blur(.6cqi);translate:0 .8cqi}47.9%,66.7%{opacity:1;filter:blur(0);translate:0 0}69.8%,100%{opacity:0;filter:blur(.6cqi);translate:0 0}}
@keyframes ak-b-it{0%,67.7%{opacity:0;filter:blur(.6cqi);translate:0 .8cqi}70.8%,89.6%{opacity:1;filter:blur(0);translate:0 0}92.7%,100%{opacity:0;filter:blur(.6cqi);translate:0 0}}
@keyframes ak-b-guide{0%,19.8%{opacity:0}21.9%{opacity:1}28%,42.7%{opacity:0}44.8%{opacity:1}51%,65.6%{opacity:0}67.7%{opacity:1}74%,88.5%{opacity:0}90.6%{opacity:1}96.8%,100%{opacity:0}}

/* ---------- Karte „Gerät“ (.ak-c-) · 8,8 s · Telefon von der Unterkante angeschnitten ---------- */
.ak-c-phone{position:absolute;left:50%;top:57cqi;width:60cqi;height:130cqi;translate:-50% 0;padding:1.5cqi;border-radius:10cqi;background:#15120F;box-shadow:0 0 0 .5cqi #6B6159,0 0 0 .8cqi #2A2420,0 5cqi 12cqi rgb(0 0 0/.55)}
.ak-c-scr{position:relative;height:100%;overflow:hidden;border-radius:8.6cqi;background:#F3F1EE;color:var(--ink)}
.ak-c-island{position:absolute;left:50%;top:2.2cqi;width:16cqi;height:4.6cqi;translate:-50% 0;border-radius:99px;background:#0E0C0B}
.ak-c-top{position:absolute;left:5cqi;right:5cqi;top:11cqi;display:flex;align-items:flex-end;justify-content:space-between;gap:2cqi}
.ak-c-kick{display:block;margin-bottom:.8cqi;font-size:2cqi;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.ak-c-title{font-family:var(--font-serif);font-weight:var(--head-wght);font-variation-settings:"opsz" 36,"SOFT" 0,"WONK" 0;font-size:5cqi;line-height:1;letter-spacing:-.02em;color:var(--ink-head)}
.ak-c-pill{display:inline-flex;align-items:center;gap:1cqi;height:4.8cqi;margin-bottom:.4cqi;padding:0 2cqi;border-radius:99px;background:var(--moss-tint);color:var(--moss);font-size:2.3cqi;font-weight:600}
.ak-c-pill::before{content:"";width:1.4cqi;height:1.4cqi;border-radius:50%;background:currentColor}
.ak-box{position:relative;width:13cqi;height:13cqi;border-radius:3.2cqi;background:linear-gradient(160deg,#DCD7D0,#B2AAA0);box-shadow:inset 0 .3cqi 0 rgb(255 255 255/.65),0 1.2cqi 2.4cqi rgb(34 29 26/.2)}
.ak-box::after{content:"";position:absolute;right:2.3cqi;bottom:2.3cqi;width:1.4cqi;height:1.4cqi;border-radius:50%;background:var(--ak-rose)}
.ak-c-search{position:absolute;left:0;right:0;top:27cqi;display:flex;flex-direction:column;align-items:center;gap:6cqi;opacity:0}
.ak-c-radar{position:relative;display:grid;place-items:center;width:13cqi;height:13cqi;margin-top:9cqi}
.ak-c-ring{position:absolute;inset:0;border:.4cqi solid var(--ak-rose);border-radius:50%;opacity:0}
.ak-c-search > p{font-size:2.5cqi;color:var(--text-soft)}
.ak-c-sheet{position:absolute;left:3cqi;right:3cqi;top:60cqi;display:grid;grid-template-columns:9cqi 1fr;column-gap:3cqi;row-gap:4cqi;align-items:center;padding:4.4cqi 4cqi;border-radius:5.5cqi;background:#fff;box-shadow:0 -1cqi 5cqi rgb(34 29 26/.14);opacity:0;translate:0 30cqi}
.ak-c-sheet .ak-box{width:9cqi;height:9cqi;border-radius:2.4cqi}
.ak-c-sheet .ak-box::after{right:1.6cqi;bottom:1.6cqi;width:1.1cqi;height:1.1cqi}
.ak-c-sh{font-size:3.1cqi;font-weight:600;line-height:1.2}
.ak-c-sh small{display:block;margin-top:.6cqi;font-size:2.4cqi;font-weight:400;color:var(--text-soft)}
.ak-c-btn{grid-column:1/-1;display:grid;place-items:center;height:8.4cqi;border-radius:99px;background:var(--ink);color:#fff;font-size:2.9cqi;font-weight:600}
.ak-c-btn > span{grid-area:1/1;display:inline-flex;align-items:center;gap:1.2cqi}
.ak-c-btn .ak-ck{width:3.2cqi;height:3.2cqi}
.ak-c-l2{opacity:0}
.ak-c-list{position:absolute;left:4cqi;right:4cqi;top:27cqi;padding:.6cqi 3.4cqi;border-radius:4.4cqi;background:#fff;box-shadow:0 .4cqi 1.6cqi rgb(34 29 26/.08)}
.ak-c-row{display:grid;grid-template-columns:7cqi 1fr 4.4cqi;align-items:center;gap:2.4cqi;height:10.4cqi}
.ak-c-row + .ak-c-row{border-top:1px solid var(--line-soft)}
.ak-c-ic{display:grid;place-items:center;width:7cqi;height:7cqi;border-radius:2cqi;background:var(--mist);color:var(--ink)}
.ak-c-ic svg{width:3.8cqi;height:3.8cqi;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ak-c-lb{font-size:2.7cqi;font-weight:500}
.ak-c-ok{display:grid;place-items:center;width:4.4cqi;height:4.4cqi;border-radius:50%;background:var(--moss);color:#fff}
.ak-c-ok .ak-ck{width:2.8cqi;height:2.8cqi;stroke-width:3}
.ak-c-chart{position:absolute;left:4cqi;right:4cqi;top:66cqi;display:flex;flex-direction:column;gap:1.6cqi;padding:3cqi 3.4cqi 3.2cqi;border-radius:4.4cqi;background:#fff;box-shadow:0 .4cqi 1.6cqi rgb(34 29 26/.08)}
.ak-c-ct{font-size:2.4cqi;font-weight:600}
.ak-c-chart svg{display:block;width:100%;height:auto;aspect-ratio:100/26;overflow:visible}
.ak-c-grid{fill:none;stroke:var(--line);stroke-width:.4;vector-effect:non-scaling-stroke}
.ak-c-line{fill:none;stroke:var(--ak-rose);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ak-c-cf{font-size:2.2cqi;color:var(--text-soft)}
.ak-card.is-playing .ak-c-search{animation:ak-c-search 8.8s linear both}
.ak-card.is-playing .ak-c-ring{animation:ak-ring 1.5s cubic-bezier(.2,.6,.3,1) var(--t,0s) 2 both}
.ak-card.is-playing .ak-c-sheet{animation:ak-c-sheet 8.8s linear both}
.ak-card.is-playing .ak-c-btn{animation:ak-c-btn 8.8s linear both}
.ak-card.is-playing .ak-c-l1{animation:ak-c-l1 8.8s linear both}
.ak-card.is-playing .ak-c-l2{animation:ak-c-l2 8.8s linear both}
@keyframes ak-ring{from{opacity:.8;scale:1}to{opacity:0;scale:3.6}}
@keyframes ak-c-search{0%,47.7%{opacity:1}51.1%,100%{opacity:0}}
@keyframes ak-c-sheet{0%,29.5%{opacity:0;translate:0 30cqi;animation-timing-function:cubic-bezier(.22,.61,.36,1)}35.2%,47.7%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.55,0,.8,.3)}52.3%,100%{opacity:0;translate:0 30cqi}}
@keyframes ak-c-btn{0%,38.6%{scale:1;background-color:#2A2521}40.9%{scale:.94;background-color:#2A2521}43.2%,100%{scale:1;background-color:#3F5B45}}
@keyframes ak-c-l1{0%,40.9%{opacity:1}43.2%,100%{opacity:0}}
@keyframes ak-c-l2{0%,40.9%{opacity:0}43.2%,100%{opacity:1}}

/* ---------- Steuerung: Punkte-Pille + Play/Pause ---------- */
.ak-ctrl{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1.75rem;padding-inline:var(--gutter)}
html:not(.js) .ak-ctrl{display:none}
.ak-dots{display:flex;align-items:center;height:56px;padding:0 14px;border-radius:999px;background:var(--ak-ctl)}
.ak-dot{display:grid;place-items:center;width:24px;height:56px;padding:0;border:0;border-radius:12px;background:none;-webkit-tap-highlight-color:transparent;transition:width .5s var(--ak-ease)}
.ak-dot__bar{position:relative;display:block;width:8px;height:8px;overflow:hidden;border-radius:99px;background:var(--ak-dot);transition:width .5s var(--ak-ease),background-color .3s}
.ak-dot__fill{position:absolute;inset:0;display:none;border-radius:inherit;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.ak-dot.is-active{width:60px}
.ak-dot.is-active .ak-dot__bar{width:44px;background:rgb(42 37 33/.2)}
.ak-dot.is-active .ak-dot__fill{display:block}
.ak-dot:not(.is-active):hover .ak-dot__bar{background:var(--ink)}
.ak-dot:focus-visible{outline:2px solid var(--moss);outline-offset:-4px}
.ak-play{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--ak-ctl);color:var(--ink);transition:background-color .2s}
.ak-play:hover{background:var(--ak-ctl-h)}
.ak-play svg{display:none;width:18px;height:18px;fill:currentColor}
.ak-play[data-state="pause"] .ak-i-pause,.ak-play[data-state="play"] .ak-i-play,.ak-play[data-state="replay"] .ak-i-replay{display:block}
.ak-play .ak-i-replay{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ak-note{margin-top:1.5rem;font:400 .8125rem/1.45 var(--font-sans);color:var(--text-soft)}
/* Reduzierte Bewegung: kein Autoplay, keine Animation, Standbilder; Knopf entfällt, aktiver Punkt voll */
.ak.is-rm .ak-play{display:none}
.ak.is-rm .ak-dot,.ak.is-rm .ak-dot__bar{transition:none}
.ak.is-rm .ak-dot__fill{transform:none}
.ak.is-rm .ak-card *,.ak.is-rm .ak-card *::before{animation:none!important}
@media (prefers-reduced-motion:reduce){.ak-card *,.ak-card *::before{animation:none!important}.ak-dot,.ak-dot__bar{transition:none}}
@media (max-width:991px){.ak{--ak-w:360px;--ak-gap:16px}.ak-title{font-size:2.25rem}}
@media (max-width:767px){
  .ak{--ak-w:min(85vw,400px);--ak-gap:12px;--ak-r:20px}
  .ak-title{font-size:1.75rem}
  .ak-h{font-size:1.5rem}
  .ak-cap{font-size:1rem;padding-right:.5rem}
  .ak-head{margin-bottom:1.75rem}
}
/* Startseite: Eyebrow über der zweifarbigen Überschrift */
.ak-head .eyebrow{margin-bottom:1rem}
/* Marke bleibt klein (azena nie in Versalien): Eyebrow der Karte 1 ohne text-transform */
.ak-eb--marke{text-transform:none;letter-spacing:.01em}

/* ==========================================================================
   K-FOOTER-2 (26.09.2026, Inhaber 21:10: „Impressum bzw. den Footer verbessern“) · site.js buildFooter()
   Rubriken als <details>: Desktop immer offen (Zusammenfassung nicht klickbar), Handy ≤ 767 px zugeklappt mit Plus wie im
   Apple-Footer, Trennlinien statt Endlos-Liste. Unten: Marke · Kontakt · Sprache, darunter © und Rechtslinks als Liste
   (keine Trennpunkte, die beim Umbruch hängen). Impressum auf organic, Datenschutz/AGB/AVV auf azena.ai (↗).
   ========================================================================== */
.footer__col > summary{display:block;list-style:none;cursor:default}
.footer__col > summary::-webkit-details-marker{display:none}
.footer__bottom{display:grid;grid-template-columns:minmax(0,1fr);justify-content:normal;align-items:normal;gap:1.75rem;padding-block:2.25rem 2.75rem}   /* alte Flex-Regeln (space-between/center) neutralisieren, sonst schrumpft die Spalte */
.footer__row{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap}
.footer__kontakt{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin:0 0 0 auto;font-size:.9375rem}
.footer__kontakt a{color:var(--on-dark);text-decoration:none}
.footer__kontakt a:hover{text-decoration:underline;text-underline-offset:3px}
.footer .lang--footer{font-size:.875rem}
.footer__row--recht{padding-top:1.5rem;border-top:1px solid var(--line-dark);font-size:.8125rem;color:var(--on-dark-soft)}
.footer__copy{margin:0}
.footer__recht ul{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.footer__recht a{color:var(--on-dark-soft);text-decoration:none}
.footer__recht a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.footer__ext{margin-left:.25em;font-size:.85em;opacity:.7}
@media (max-width:767px){
  .footer{padding-top:3.5rem}
  .footer__top{gap:2.25rem}
  .footer__cols{display:block;border-top:1px solid var(--line-dark)}
  .footer__col{border-bottom:1px solid var(--line-dark)}
  .footer__col > summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;cursor:pointer;color:var(--on-dark)}
  .footer__col > summary .footer__head{margin:0;font:500 1rem/1.3 var(--font-sans);letter-spacing:0;text-transform:none}
  .footer__col > summary::after{content:"";flex:none;width:12px;height:12px;color:var(--on-dark-soft);transition:rotate .25s var(--ease);
    background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat}
  .footer__col[open] > summary::after{rotate:45deg}
  .footer__col ul{gap:.875rem;padding:.125rem 0 1.25rem}
  .footer__col a{font-size:.9375rem}
  .footer__col ul + .footer__head{margin:.25rem 0 .875rem;font-size:.75rem}
  .footer__seals{flex-wrap:nowrap;gap:1.5rem;justify-content:space-between}
  .footer__row:not(.footer__row--recht){display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.25rem 1rem}
  .footer__kontakt{grid-column:1/-1;grid-row:2;margin:0;flex-direction:column;gap:.625rem;font-size:1rem}
  .footer__row--recht{flex-direction:column-reverse;align-items:flex-start;gap:1rem}
  .footer__recht ul{gap:.625rem 1.5rem}
  .footer__recht a{font-size:.875rem}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){.footer__col > summary::after{transition:none}}

/* ==========================================================================
   K-RECHT Impressum (26.09.2026) · impressum.html + en/: Kopf, Steckbrief als Definitionsliste (3/2/1 Spalten), Rechtstext in .prose
   ========================================================================== */
.recht{padding-top:calc(var(--nav-h) + 4.5rem)}
.recht__kopf{max-width:var(--w-article);margin-inline:auto}
.recht__kopf .t-h1{margin-top:.75rem}
.recht__kopf .t-lead{margin-top:1rem}
.recht__kopf .t-lead a{color:var(--link);text-underline-offset:3px}
.recht__karte{max-width:60rem;margin:3rem auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.recht__karte > div{padding:1.5rem 1.75rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.recht__karte > div:nth-child(3n){border-right:0}
.recht__karte > div:nth-last-child(-n+3){border-bottom:0}
.recht__karte dt{font:500 .75rem/1.3 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--bronze-deep)}
.recht__karte dd{margin:.625rem 0 0;font-size:1rem;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
.recht__karte a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze-deep);text-decoration-thickness:1px;text-underline-offset:3px}
.recht__klein{font-size:.875rem;color:var(--text-soft)}
.recht__text{margin-top:3.5rem}
@media (max-width:991px){
  .recht__karte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recht__karte > div:nth-child(3n){border-right:1px solid var(--line)}
  .recht__karte > div:nth-child(2n){border-right:0}
  .recht__karte > div:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .recht__karte > div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:599px){
  .recht{padding-top:calc(var(--nav-h) + 2.5rem)}
  .recht__karte{grid-template-columns:1fr;margin-top:2rem}
  .recht__karte > div,.recht__karte > div:nth-child(3n),.recht__karte > div:nth-last-child(-n+3){border-right:0;border-bottom:1px solid var(--line)}
  .recht__karte > div:last-child{border-bottom:0}
  .recht__karte > div{padding:1.125rem 1.25rem}
  .recht__text{margin-top:2.5rem}
}

/* Honigtopf-Feld der Formulare (26.09.2026): für Menschen unsichtbar, Bots füllen es aus */
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* 404 (26.09.2026) */
.fehler{min-height:70vh}
.fehler .t-lead + .t-lead{margin-top:.5rem;font-size:1rem;color:var(--text-soft)}
.fehler__btns{margin-top:2rem;flex-wrap:wrap}

/* ==========================================================================
   K-HERO-I2 Startseiten-Hero am Desktop mit dem Handy-Baum lv-baum-i2 (26.09.2026, Inhaber 22:29: „exakt der Handy-Baum“,
   „die Krone soll richtig weit oben sein, nur nicht den Header verdecken“) · nur mit html[data-hero="i2"]
   (Kopf-Skript der Startseite: Testschalter ?baum=i2; Standard umschalten = dort eine Zeile). ≤ 767 px unverändert (K-HERO-MOBIL).
   Grund wie am Handy: #D3CBC3 = Bildgrund nach flach.py/glatt.py. Keine Wachstums-Karte, alte Bilder bleiben ungeladen
   (display:none + loading="lazy").
   ≥ 1200 px „Diagonale“: das ganze Bild hd-i2 (Zuschnitt 15–82 % der Quelle, konzepte/_werkzeuge/hero-mobil/hd-bilder.sh)
     steht 165vw breit, 18 % der Bildbreite links außerhalb. Oberkante = Unterkante der Leiste (Krone oben angeschnitten),
     Sockel auf der Unterkante des Heros und links am Viewport-Rand angeschnitten, Krone tritt rechts aus. Die Hero-Höhe folgt
     dem Bild (Leiste + 165vw · 1536/2752). Freie Flächen im Bild: oben links bis 41 % der Bildbreite (→ 37,95vw) für den Text,
     rechts unten ab 59 % Breite und 60 % Höhe für die Statements (→ unterhalb der ersten Bildschirmhöhe).
     --hi-s: breite Schirme rücken Bild, Text-Zone und Statements nach rechts (höchstens 4,9vw, sonst käme die linke Bildkante
     ins Bild). Text beginnt an der Wrap-Kante, höchstens so weit rechts, dass er 24 px vor der Zone endet (458 px = H1 + Luft).
   768–1199 px „Rahmen“ wie am Handy: Krone k2m (.hm--k2t) unter der Leiste oben rechts, Text mittig, Fuß k1 unten rechts.
   ========================================================================== */
.hero-tree__media > .hero-tree__i2{display:none}
html[data-hero="i2"] .hero-tree{background:#D3CBC3}
html[data-hero="i2"] .hero-tree__media > :not(.hero-tree__i2){display:none}
@media (min-width:1200px){
  html[data-hero="i2"] .hero-tree{--hi-w:165vw;--hi-h:calc(var(--hi-w) * 1536 / 2752);--hi-s:clamp(0px,(100vw - 1440px) * .2,4.9vw);
    display:block;height:calc(var(--nav-h) + var(--hi-h));min-height:0}
  html[data-hero="i2"] .hero-tree__media{position:absolute;inset:0;aspect-ratio:auto;margin:0;display:block}
  html[data-hero="i2"] .hero-tree__media > .hero-tree__i2{display:block;position:absolute;bottom:0;left:calc(var(--hi-w) * (413 / 2752 - .18) + var(--hi-s));
    width:calc(var(--hi-w) * 1844 / 2752);max-width:none}
  html[data-hero="i2"] .hero-tree__media .hero-tree__i2 img{position:static;display:block;width:100%;height:auto;min-height:0;max-width:none;translate:none;object-fit:fill}
  html[data-hero="i2"] .hero-tree__screen--1{min-height:0;max-width:none;padding-bottom:0;
    padding-top:clamp(calc(var(--nav-h) + 4.5rem),min(25vh,16vw),30vh);
    padding-left:clamp(var(--gutter),calc(var(--hi-w) * .23 + var(--hi-s) - 458px),max(var(--gutter),50vw - 600px))}
  html[data-hero="i2"] .hero-tree__screen--2{position:absolute;left:0;right:0;top:calc(var(--nav-h) + var(--hi-h) * .6 + 28px);
    display:block;min-height:0;max-width:none;margin:0;padding:0;background:none}
  html[data-hero="i2"] .statements{margin:0 0 0 calc(var(--hi-w) * .41 + var(--hi-s) + 28px);max-width:min(27.8vw,26rem)}
  html[data-hero="i2"] .statements .t-statement{font-size:clamp(1.75rem,2.78vw,2.5rem)}
}
@media (min-width:768px) and (max-width:1199px){
  html[data-hero="i2"] .hero-tree{--hm-kw:min(78vw,62.6vh);--hm-fw:min(90vw,60vh);min-height:0;display:flex;flex-direction:column}
  html[data-hero="i2"] .hero-tree__media{display:none}
  html[data-hero="i2"] .hero-tree__screen--1{order:1;z-index:2;min-height:0;padding-top:calc(var(--nav-h) + var(--hm-kw) * 1000 / 1252 * .98);padding-bottom:3.5rem}
  html[data-hero="i2"] .hero-tree__screen--2{order:3;min-height:0;display:block;background:none;padding-block:3rem calc(var(--hm-fw) * 1536 / 1240 * .6)}
  html[data-hero="i2"] .hero-tree__copy{position:relative;z-index:1;max-width:none;display:flex;flex-direction:column;align-items:center;text-align:center}
  html[data-hero="i2"] .hero-tree__copy .press-pill{display:none}
  html[data-hero="i2"] .hero-tree__copy .press-pill + .eyebrow{margin-top:0}
  html[data-hero="i2"] .hero-tree__copy .t-h1{margin-top:.75rem;font-size:3.25rem;line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
  html[data-hero="i2"] .hero-tree__copy .t-h1 + *{margin-top:1rem}
  html[data-hero="i2"] .hero-tree__copy .t-lead{max-width:26rem;text-wrap:pretty}
  html[data-hero="i2"] .hero-tree__copy .btns{margin-top:1.75rem;justify-content:center}
  html[data-hero="i2"] .hero-tree__sig{margin:1.5rem auto 0}
  html[data-hero="i2"] .hero-tree__sig .badge-sig__t{text-align:left}
  html[data-hero="i2"] .hm{position:absolute;z-index:0;max-width:none;pointer-events:none}
  html[data-hero="i2"] .hm img{display:block;width:100%;height:auto;max-width:none}
  html[data-hero="i2"] .hm--k2t{display:block;top:var(--nav-h);right:0;width:var(--hm-kw)}
  html[data-hero="i2"] .hm--k1{display:block;right:0;bottom:0;width:var(--hm-fw)}
  html[data-hero="i2"] .statements{position:relative;z-index:1;margin-inline:auto;max-width:24rem;text-align:center}
  html[data-hero="i2"] .statements .t-statement{font-size:2rem}
}
/* K-HERO-I2 · Lead ab 1200 px schmaler (drei Zeilen wie vorher): die Zeile reichte bei 1440 px bis an den Zweig links der Krone */
@media (min-width:1200px){html[data-hero="i2"] .hero-tree__copy .t-lead{max-width:27.5rem}}
/* K-HERO-I2 · 1200–1279 px: Zone für den Text ist schmaler als die H1 (gemessen 26.09.2026) → H1 und Lead etwas kleiner */
@media (min-width:1200px) and (max-width:1279px){
  html[data-hero="i2"] .hero-tree__copy .t-h1{font-size:3rem}
  html[data-hero="i2"] .hero-tree__copy .t-lead{max-width:23.5rem}
}

/* ==========================================================================
   K-TEAM-2 Über uns · weitere Teammitglieder unter der Gründerkarte (26.09.2026, Inhaber 22:29)
   Eine Zeile unter .person: Eyebrow „Im Team“, je Person Monogramm + Vorname + Rolle. Das Monogramm ist Platzhalter,
   bis ein Foto da ist (Grund wie .person__img: --grad-portrait, Buchstabe in Bronze wie graviert, keine Farbe sonst).
   ========================================================================== */
.person-row{max-width:64rem;margin:4.5rem auto 0;padding-top:2.25rem;border-top:1px solid var(--line)}
.person-row .eyebrow{color:var(--bronze-deep)}
.person-mini{display:flex;align-items:center;gap:1.25rem;margin-top:1.5rem}
.person-mini .t-h5{margin:0}
.person-mini .person__role{margin-top:.25rem}
.person-mono{flex:none;display:grid;place-items:center;width:5.5rem;aspect-ratio:1;border-radius:var(--r-m);overflow:hidden;
  background:var(--grad-portrait);box-shadow:inset 0 0 0 1px rgb(115 90 54/.22);
  font:400 2.75rem/1 var(--font-serif);font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;color:var(--bronze);
  text-shadow:0 1px 0 rgb(255 255 255/.55)}
.person-mono img{width:100%;height:100%;object-fit:cover}
@media (max-width:991px){.person-row{margin-top:3rem;max-width:28rem}}

/* ==========================================================================
   K-ZWISCHENZEILEN Runde 2 · Leistungsseiten (26.09.2026, Inhaber 22:29 „mehr Sprüche … immer so krasse Kompositionen“)
   Markup und Regeln wie Z1–Z4 (Block K-ZWISCHENZEILEN oben): Grund #D3CBC3, Stücke aus lv-baum-i2, der Baum tritt nur an
   Viewport-Rand oder Band-Ober-/Unterkante aus. Neue Stücke sockel + stamm: konzepte/_werkzeuge/zwischenzeilen/zw-bilder-2.sh.
     Z5 Leistungen          Satz groß oben links · Sockel mit Steckern wächst unten rechts aus der Unterkante
     Z6 Integrationen       Stammstück (Kabel, Gitter) gespiegelt links in voller Bandhöhe · Satz rechts unten
                            (bis 991 px: zwei Triebe unten rechts, Satz darüber)
     Z7 Maßanfertigung      Kronenast hängt oben links · Satz groß rechts unten
     Z8 OpenAI-Einführung   über Kreuz: hängender Zweig oben links (gespiegelt), Triebe unten rechts · Satz dazwischen
   ========================================================================== */
.zw--z5{--zw-h:clamp(32rem,66vh,46rem);--zw-pt:clamp(5rem,12vh,8rem);--zw-pb:4rem;--zw-fs:clamp(2.5rem,4.6vw,5rem);--zw-my:0 auto;--zw-x:0;--zw-mass:9.5em}
.zw--z5 .zw__baum{right:0;bottom:0;width:clamp(20rem,42vw,44rem)}
@media (min-width:992px){
  .zw--z6{--zw-kw:min(54vw,62rem);--zw-h:calc(var(--zw-kw) * 780 / 1440);--zw-pt:4rem;--zw-pb:clamp(4rem,10vh,6rem);--zw-fs:clamp(1.75rem,2.5vw,2.625rem);
    --zw-my:auto 0;--zw-x:calc(var(--zw-kw) + 3rem - max(var(--gutter),(100vw - 80rem) / 2));--zw-mass:13em;height:var(--zw-h)}
  .zw--z6 .zw__baum{top:0;bottom:0;left:0;scale:-1 1}
  .zw--z6 .zw__baum img{width:auto;height:100%;max-width:none}
}
@media (max-width:991px){
  .zw--z6{--zw-fs:2.25rem;--zw-x:0;--zw-mass:14em;--zw-pt:4rem;--zw-pb:calc(min(58vw,26rem) * 1480 / 1440 + 1rem);min-height:0}
  .zw--z6 .zw__baum{right:0;bottom:0;width:min(58vw,26rem)}
}
.zw--z7{--zw-h:clamp(32rem,64vh,46rem);--zw-pt:clamp(4.5rem,11vh,7rem);--zw-pb:clamp(4.5rem,11vh,7rem);--zw-fs:clamp(2.375rem,4.2vw,4.5rem);--zw-my:auto 0;--zw-x:43%;--zw-mass:10.5em}
.zw--z7 .zw__baum{top:0;left:0;width:clamp(16rem,34vw,36rem)}
.zw--z8{--zw-h:clamp(34rem,70vh,48rem);--zw-pt:clamp(6rem,15vh,9rem);--zw-pb:clamp(6rem,15vh,9rem);--zw-fs:clamp(2.25rem,3.8vw,4rem);--zw-my:auto;--zw-x:30%;--zw-mass:11.5em}
.zw--z8 .zw__baum{top:0;left:max(var(--gutter),4vw);width:clamp(14rem,30vw,32rem);scale:-1 1}
.zw--z8 .zw__baum--2{top:auto;bottom:0;left:auto;right:0;width:clamp(11rem,22vw,24rem);scale:none}
@media (max-width:767px){
  .zw--z5{--zw-fs:2.25rem;--zw-pt:3.5rem;--zw-pb:calc(92vw * 1254 / 1575 * .9)}
  .zw--z5 .zw__baum{width:92vw}
  .zw--z6{--zw-fs:1.875rem;--zw-pt:3.5rem}
  .zw--z7{--zw-fs:2rem;--zw-pt:calc(64vw * 1400 / 1304 + .75rem);--zw-pb:3.75rem}
  .zw--z7 .zw__baum{width:64vw}
  .zw--z8{--zw-fs:2rem;--zw-pt:calc(58vw * 840 / 1320 * .95);--zw-pb:calc(46vw * 1480 / 1440 + 1rem)}
  .zw--z8 .zw__baum{left:0;width:58vw}
  .zw--z8 .zw__baum--2{width:46vw}
}
@media (max-width:767px){.zw--z5,.zw--z7,.zw--z8{--zw-x:0;--zw-mass:none}}
/* Z5 nach Sichtprüfung 1440 px: Sockel größer, Band etwas niedriger (sonst viel leerer Grund unten links) */
.zw--z5{--zw-h:clamp(30rem,60vh,42rem)}
.zw--z5 .zw__baum{width:clamp(20rem,50vw,54rem)}
/* Z6 nach Sichtprüfung 1440 px: Satz etwas größer, Stammstück breiter */
@media (min-width:992px){.zw--z6{--zw-kw:min(58vw,66rem);--zw-fs:clamp(1.625rem,2.9vw,3.25rem);--zw-mass:12em}}
.zw--z7{--zw-mass:12em;--zw-x:40%}
.zw--z8 .zw__baum{width:clamp(14rem,34vw,36rem)}
.zw--z8 .zw__baum--2{width:clamp(11rem,25vw,27rem)}
@media (max-width:767px){.zw--z8 .zw__baum{width:58vw}.zw--z8 .zw__baum--2{width:46vw}}
@media (max-width:767px){.zw--z5 .zw__baum{width:92vw}}
/* K-ZWISCHENZEILEN Runde 2 · Handy nach Messung 390 px: Satz links bündig über die ganze Breite, Z8 Triebe rechts,
   Satz unter dem hängenden Zweig */
@media (max-width:767px){
  .zw--z5,.zw--z7,.zw--z8{--zw-x:0;--zw-mass:none}
  .zw--z8{--zw-pt:calc(58vw * 840 / 1320 + 1.25rem)}
  .zw--z8 .zw__baum--2{left:auto;right:0}
}
@media (max-width:767px){.zw--z7{--zw-pt:calc(64vw * 1400 / 1304 + 1.75rem)}}