/* prodct Homepage V3 — BEM h3-* · depends on prodct-tokens.css */
/* ============================================================
   prodct Homepage V3 — Typo-Bühne (BEM-Präfix h3-*)
   Basis: prodct-tokens.css. Zwei vollwertige Farbvarianten aus
   EINEM Markup: body.h3 = hell, body.h3.dark = dunkle Leitfassung
   (schaltet über den bestehenden Theme-Toggle der Site).
   ============================================================ */

/* ---------- Themen-Variablen ---------- */
body.h3{--stage:#FAF8F4;--stage-2:#F1EEE7;--ink:#0A0907;--ink-soft:#3B372D;--ink-mute:#6E6858;--ink-faint:#9C9585;--hair:rgba(10,9,7,.13);--hair-2:rgba(10,9,7,.22);--card:#FFFFFF;--card-hair:rgba(10,9,7,.11);--chip:#2D8168;--chip-h:#226553;--chip-fg:#fff;--accent:#2D8168;--stage-t:rgba(250,248,244,0);--stage-a:rgba(250,248,244,.62)}
body.h3.dark{--stage:#080D0B;--stage-2:#0D1411;--ink:#FAF8F4;--ink-soft:rgba(250,248,244,.74);--ink-mute:rgba(250,248,244,.52);--ink-faint:rgba(250,248,244,.36);--hair:rgba(255,255,255,.13);--hair-2:rgba(255,255,255,.24);--card:#101714;--card-hair:rgba(255,255,255,.12);--chip:#2D8168;--chip-h:#4EA388;--chip-fg:#fff;--accent:#82C2AD;--stage-t:rgba(8,13,11,0);--stage-a:rgba(8,13,11,.58)}

body.h3{margin:0;background:var(--stage);color:var(--ink-soft);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.h3 img{max-width:100%;display:block}
body.h3 a{color:var(--accent);text-decoration:none}
body.h3 a:hover{color:var(--ink)}
body.h3 *::selection{background:var(--chip);color:#fff}

.h3-wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.6vw,64px)}
.h3-sec{position:relative;padding:clamp(72px,8vw,140px) 0}
.h3-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);display:block}


/* Riesen-Typo — der Grundbaustein der Seite */
.h3-giant{font-family:var(--font-display);font-weight:600;font-size:clamp(46px,10.4vw,178px);line-height:.87;letter-spacing:-.042em;color:var(--ink);margin:0;text-wrap:balance}
.h3-giant em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* Ein CTA-Typ für die ganze Seite: Chip in prodct-Grün */
.h3-chip{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:14px 24px;border-radius:999px;font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-.01em;border:0;cursor:pointer}
body.h3 a.h3-chip,body.h3 button.h3-chip{background:var(--chip);color:var(--chip-fg)}
body.h3 a.h3-chip:hover,body.h3 button.h3-chip:hover{background:var(--chip-h);color:#fff}
body.h3 a.h3-chip--bare{background:transparent;color:var(--ink);border:1px solid var(--hair-2);padding:13px 23px}
body.h3 a.h3-chip--bare:hover{background:transparent;border-color:var(--ink);color:var(--ink)}
body.h3 a.h3-chip--text{background:transparent;border:0;padding:0;min-height:0;color:var(--ink);border-bottom:1px solid var(--hair-2);border-radius:0;padding-bottom:5px}
body.h3 a.h3-chip--text:hover{background:transparent;color:var(--accent);border-bottom-color:var(--accent)}
.h3-chip__a{transition:transform var(--dur-base) var(--ease-out)}
.h3-chip:hover .h3-chip__a{transform:translateX(4px)}

/* Reveals */
.h3-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.h3-rv.is-in{opacity:1;transform:none}

/* ============================================================
   HERO — Typo ist der Hero
   ============================================================ */
.h3-hero{position:relative;isolation:isolate;background:var(--stage);padding-top:clamp(96px,9vw,132px);padding-bottom:clamp(96px,11vw,168px);overflow:hidden}
.h3-hero__bg{position:absolute;inset:0;z-index:0;opacity:.16;filter:grayscale(.5)}
body.h3:not(.dark) .h3-hero__bg{opacity:.13}
body.h3[data-bg="off"] .h3-hero__bg{display:none}
.h3-hero__bg image-slot{width:100%;height:100%;display:block}
.h3-hero__bgMove{position:absolute;inset:-8%;animation:h3Drift 18s var(--ease-inout) infinite alternate}
@keyframes h3Drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(-4%,-3%,0)}}
.h3-hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--stage) 0%,rgba(8,13,11,0) 34%,var(--stage) 96%)}
body.h3:not(.dark) .h3-hero__veil{background:linear-gradient(180deg,var(--stage) 0%,rgba(250,248,244,0) 34%,var(--stage) 96%)}

/* Motion-Overlay: langsam wandernde Farbfelder plus feines Raster.
   Liegt in beiden Farbvarianten über dem Hintergrund, dezent. */
.h3-hero__mo{display:none!important;position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* Motiv: Strömung. Rotierendes Farbrad im Hintergrund, darüber schräge
   Lichtbahnen, die quer durch den Hero ziehen. Deutlich mehr Bewegung. */
.h3-hero__mo::before{content:"";position:absolute;left:50%;top:50%;width:150vw;height:150vw;margin:-75vw 0 0 -75vw;border-radius:50%;background:conic-gradient(from 0deg,rgba(45,129,104,.55),rgba(220,255,75,.28),rgba(107,61,168,.42),rgba(45,129,104,.18),rgba(220,255,75,.3),rgba(45,129,104,.55));filter:blur(70px);opacity:.5;mix-blend-mode:screen;animation:h3Spin 26s linear infinite}
body.h3:not(.dark) .h3-hero__mo::before{mix-blend-mode:multiply;opacity:.3;background:conic-gradient(from 0deg,rgba(34,101,83,.5),rgba(122,151,182,.3),rgba(107,61,168,.28),rgba(34,101,83,.14),rgba(34,101,83,.5))}
@keyframes h3Spin{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.12)}to{transform:rotate(360deg) scale(1)}}
.h3-hero__mo i{position:absolute;display:block;left:-30%;width:160%;height:clamp(90px,13vw,220px);border-radius:999px;filter:blur(34px);will-change:transform;mix-blend-mode:screen;opacity:.85;transform-origin:center}
body.h3:not(.dark) .h3-hero__mo i{mix-blend-mode:multiply;opacity:.5}
.h3-hero__mo i:nth-child(1){top:12%;background:linear-gradient(90deg,transparent,rgba(45,129,104,.85),transparent);animation:h3Sweep 13s var(--ease-inout) infinite alternate}
.h3-hero__mo i:nth-child(2){top:44%;background:linear-gradient(90deg,transparent,rgba(220,255,75,.5),transparent);animation:h3Sweep2 10s var(--ease-inout) infinite alternate}
.h3-hero__mo i:nth-child(3){top:74%;background:linear-gradient(90deg,transparent,rgba(107,61,168,.62),transparent);animation:h3Sweep3 16s var(--ease-inout) infinite alternate}
body.h3:not(.dark) .h3-hero__mo i:nth-child(2){background:linear-gradient(90deg,transparent,rgba(34,101,83,.5),transparent)}
body.h3:not(.dark) .h3-hero__mo i:nth-child(3){background:linear-gradient(90deg,transparent,rgba(122,151,182,.55),transparent)}
@keyframes h3Sweep{from{transform:translate3d(-26%,0,0) rotate(-7deg) scaleY(.8)}to{transform:translate3d(24%,4vw,0) rotate(5deg) scaleY(1.25)}}
@keyframes h3Sweep2{from{transform:translate3d(22%,3vw,0) rotate(6deg) scaleY(1.2)}to{transform:translate3d(-22%,-3vw,0) rotate(-6deg) scaleY(.85)}}
@keyframes h3Sweep3{from{transform:translate3d(-18%,2vw,0) rotate(4deg) scaleY(.9)}to{transform:translate3d(26%,-4vw,0) rotate(-8deg) scaleY(1.3)}}
.h3-hero__mo u{display:none!important;position:absolute;inset:-20%;display:block;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:76px 76px;opacity:.55;animation:h3Grid 16s linear infinite}
@keyframes h3Grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(76px,76px,0)}}

/* Variante B: kein Raster. Strahlen bündeln sich nach rechts vorne,
   dazu Partikel, die auf derselben Achse beschleunigen. */
body.h3[data-hero="flow"] .h3-hero__mo u{display:none}
body.h3[data-hero="flow"] .h3-hero__mo i:nth-child(1){animation-duration:17s}
body.h3[data-hero="flow"] .h3-hero__mo i:nth-child(2){animation-duration:13s}
body.h3[data-hero="flow"] .h3-hero__mo i:nth-child(3){animation-duration:20s}
body.h3[data-hero="flow"] .h3-hero__mo::before{animation-duration:34s;opacity:.38}
.h3-flow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;display:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%)}
body.h3[data-hero="flow"] .h3-flow{display:block}
/* Bündelung: Linien starten breit gestreut und laufen auf einen Punkt zu */
.h3-flow__l{position:absolute;left:-14%;width:128%;height:1px;transform-origin:right center;background:linear-gradient(90deg,transparent 0,var(--accent) 62%,var(--ink) 100%);opacity:.16;animation:h3Rush calc(var(--rd,7s) * .55) var(--ease-out) var(--rdl,0s) infinite}
body.h3:not(.dark) .h3-flow__l{opacity:.2}
@keyframes h3Rush{0%{transform:translate3d(-24%,0,0) scaleX(.34);opacity:0}18%{opacity:.22}72%{opacity:.14}100%{transform:translate3d(16%,0,0) scaleX(1);opacity:0}}
/* Partikel auf derselben Achse, beschleunigen nach vorne */
.h3-flow__p{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent);opacity:0;animation:h3Fly calc(var(--pd,6s) * .55) cubic-bezier(.4,0,.2,1) var(--pdl,0s) infinite}
@keyframes h3Fly{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}12%{opacity:.9}100%{transform:translate3d(78vw,var(--py,0px),0) scale(1.5);opacity:0}}

/* Headline-Animation wie auf der Live-Site: Zeile 2 wird getippt */
.h3-type{white-space:nowrap}
.h3-caret{display:inline-block;width:.055em;height:.72em;margin-left:.06em;background:currentColor;animation:h3Blink 1s step-end infinite}
@keyframes h3Blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.h3-in{opacity:0;transform:translateY(14px);animation:h3Rise .9s var(--ease-out) forwards;animation-delay:var(--d,0s)}
@keyframes h3Rise{to{opacity:1;transform:none}}
.h3-hero__in{position:relative;z-index:2}
.h3-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,318px);gap:clamp(28px,5vw,72px);align-items:end}
.h3-hero__l2{display:block;margin-left:clamp(24px,11vw,190px)}
.h3-hero__side{display:flex;flex-direction:column;gap:26px;padding-bottom:14px}
.h3-hero__lede{font-family:var(--font-serif);font-size:clamp(20px,1.55vw,25px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);margin:0}
.h3-hero__lede b{font-family:var(--font-sans);font-weight:600;font-size:.82em}
.h3-hero__cta{align-self:flex-start}
.h3-hero__foot{margin-top:clamp(44px,6vw,96px);padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;align-items:baseline;gap:14px clamp(24px,4vw,64px);font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--ink-mute)}
.h3-hero__m b{color:var(--ink);font-weight:500;font-size:14px;letter-spacing:0}
.h3-hero__scroll{margin-left:auto;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}

/* ============================================================
   INSIGHTS ZUERST — hochformatige Karten
   ============================================================ */
/* Bänder ziehen leicht in den Hero hinein */
.h3-ins{position:relative;z-index:3;padding-top:0;margin-top:clamp(-72px,-6vw,-40px)}
.h3-ins__link{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
body.h3 a.h3-ins__link:hover{color:var(--accent)}
/* Laufband: zwei Zeilen, langsam von rechts nach links, Stopp bei Hover */
.h3-mq{overflow:hidden;margin-bottom:clamp(12px,1.4vw,20px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.h3-mq__track{display:flex;gap:0;width:max-content;animation:h3Band var(--sp,86s) linear infinite}
.h3-mq:hover .h3-mq__track,.h3-mq:focus-within .h3-mq__track{animation-play-state:paused}
@keyframes h3Band{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.h3-mq--2 .h3-mq__track{--sp:118s;animation-direction:reverse}
.h3-mq__group{display:flex;gap:clamp(12px,1.4vw,18px);padding-right:clamp(12px,1.4vw,18px)}
.h3-card{flex:0 0 clamp(262px,23vw,329px);display:flex;flex-direction:column;min-height:clamp(313px,24vw,352px);background:var(--card);border:1px solid var(--card-hair);border-radius:var(--r-md);padding:16px 17px 0;overflow:hidden;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out)}
.h3-card:hover{border-color:var(--hair-2);transform:translateY(-3px)}
.h3-card__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;gap:10px;flex-wrap:wrap}
.h3-card__k span{color:var(--ink-faint)}
.h3-card__t{font-family:var(--font-sans);font-weight:600;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.24;letter-spacing:-.02em;color:var(--ink);margin:10px 0 14px}
.h3-card:hover .h3-card__t{color:var(--accent)}
.h3-card__thumb{margin:auto -17px 0;aspect-ratio:16/9;overflow:hidden;background:var(--stage-2)}
.h3-card__thumb image-slot{width:100%;height:100%;display:block}
.h3-card__thumb image-slot[src^="assets/fa-"]{padding:10px 14px;box-sizing:border-box}
.h3-card:hover .h3-card__thumb{opacity:.92}
.h3-card--ev{background:linear-gradient(160deg,var(--lime-400) 0%,var(--lime-300,var(--lime-400)) 100%);border-color:transparent}
body.h3:not(.dark) .h3-card--ev{background:linear-gradient(160deg,var(--prodct-600) 0%,var(--prodct-500,var(--prodct-600)) 100%);border-color:transparent}
.h3-card--ev .h3-card__t,.h3-card--ev .h3-card__date{color:var(--ink-inv,#0B0B0A)}
body.h3:not(.dark) .h3-card--ev .h3-card__t,body.h3:not(.dark) .h3-card--ev .h3-card__date{color:#fff}
.h3-card--ev .h3-card__where{color:rgba(11,11,10,.66)}
body.h3:not(.dark) .h3-card--ev .h3-card__where{color:rgba(255,255,255,.74)}
.h3-card--ev .h3-card__foot{border-top-color:rgba(11,11,10,.2);color:rgba(11,11,10,.66)}
body.h3:not(.dark) .h3-card--ev .h3-card__foot{border-top-color:rgba(255,255,255,.28);color:rgba(255,255,255,.78)}
.h3-card--ev:hover .h3-card__t{color:var(--ink-inv,#0B0B0A)}
body.h3:not(.dark) .h3-card--ev:hover .h3-card__t{color:#fff}
.h3-card--ev .h3-card__k{color:rgba(11,11,10,.7)}
body.h3:not(.dark) .h3-card--ev .h3-card__k{color:rgba(255,255,255,.8)}
.h3-card__date{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,1.9vw,28px);line-height:1;letter-spacing:-.03em;color:var(--ink);margin:12px 0 0}
.h3-card__where{font-family:var(--font-mono);font-size:10.5px;line-height:1.5;color:var(--ink-mute);margin:10px 0 0}
.h3-card--ev .h3-card__thumb{display:none}
.h3-card__foot{margin-top:auto;padding:12px 0 14px;border-top:1px solid var(--card-hair);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);display:flex;justify-content:space-between;gap:12px}
.h3-ins__note{display:block;margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint)}

/* ============================================================
   STATEMENT-TRENNER — Expertise in einer Zeile
   ============================================================ */
.h3-state__giant{margin-bottom:clamp(40px,5vw,80px)}
body.h3 .h3-state__giant a{color:var(--ink);position:relative;white-space:nowrap}
body.h3 .h3-state__giant a::after{content:"";position:absolute;left:0;right:0;bottom:.1em;height:3px;background:var(--chip);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease-out)}
body.h3 .h3-state__giant a:hover{color:var(--ink)}
body.h3 .h3-state__giant a:hover::after{transform:scaleX(1)}
.h3-state__dot{color:var(--ink-faint)}
.h3-rows{border-top:1px solid var(--hair)}
.h3-row{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr) 40px;gap:clamp(16px,3vw,48px);align-items:center;padding:26px 4px;border-bottom:1px solid var(--hair);transition:padding-left var(--dur-base) var(--ease-out)}
.h3-row:hover{padding-left:14px}
.h3-row__n{font-family:var(--font-sans);font-weight:600;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.025em;color:var(--u,var(--ink))}
.h3-row__n b{font-family:var(--font-mono);font-weight:500;font-size:.62em;letter-spacing:0;opacity:.85}
.h3-row__d{font-size:15.5px;line-height:1.45;color:var(--ink-mute)}
.h3-row__a{justify-self:end;font-size:19px;color:var(--ink-faint);transition:transform var(--dur-base) var(--ease-out),color var(--dur-base)}
.h3-row:hover .h3-row__a{transform:translateX(5px);color:var(--ink)}

/* Sektions-Headline über den Unit-Bändern (Live-Site-Duktus) */
.h3-uhead{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:clamp(32px,4vw,64px)}
.h3-uhead .h3-giant em{display:block;color:var(--accent);margin-left:clamp(12px,4vw,64px)}
.h3-uhead__meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}
body.h3 a.h3-uhead__meta__i{color:var(--ink-mute)}
body.h3 a.h3-uhead__meta__i:hover{color:var(--ink)}
.h3-uhead__x{font-size:16.5px;line-height:1.6;color:var(--ink-mute);margin:0;max-width:46ch}
body.h3 a.h3-uhead__l{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-mute)}
body.h3 a.h3-uhead__l:hover{color:var(--ink)}

/* Unit-Bänder: Bild liegt im Hintergrund unter einem Verlauf,
   Textspalte wechselt die Seite und die Ausrichtung. */
.h3-units{display:flex;flex-direction:column}
.h3-unit{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;min-height:clamp(320px,31vw,460px);padding:clamp(40px,4.4vw,72px) 0;border-top:1px solid var(--hair)}
.h3-unit__img{position:absolute;top:0;bottom:0;left:56%;right:-4vw;z-index:0;aspect-ratio:auto;border-radius:0;background:none;opacity:.34}
.h3-unit__img image-slot{width:100%;height:100%;display:block;filter:grayscale(1) contrast(1.12) brightness(.96)}
.h3-unit__img::before{display:none}

.h3-unit__img::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--stage) 0%,var(--stage) 22%,var(--stage-a) 62%,var(--stage-t) 100%)}
.h3-unit:nth-child(even) .h3-unit__img{left:56%;right:-4vw}
.h3-unit:nth-child(even) .h3-unit__img::after{background:linear-gradient(90deg,var(--stage) 0%,var(--stage) 22%,var(--stage-a) 62%,var(--stage-t) 100%)}
/* Farbfeld der Unit als leiser Grund unter dem ganzen Band */
.h3-unit::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(80% 120% at 88% 50%,var(--u,transparent) 0%,transparent 68%);opacity:.16;pointer-events:none}
.h3-unit:nth-child(even)::before{background:radial-gradient(80% 120% at 88% 50%,var(--u,transparent) 0%,transparent 68%)}
body.h3:not(.dark) .h3-unit::before{opacity:.11}

/* Alternative Darstellung: Bild nur als schmaler Streifen an der Kante */
.h3-unit__b{position:relative;z-index:2;grid-column:1/span 6;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:end;column-gap:clamp(20px,2.6vw,44px);row-gap:16px;justify-items:start}
.h3-unit__tag,.h3-unit__who,.h3-unit__b .h3-chip{grid-column:1/-1}
.h3-unit__n{grid-column:1}
.h3-unit__d{grid-column:2;padding-bottom:.24em}
.h3-unit__b{grid-column:1/span 10}
.h3-unit__tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--u,var(--ink));display:flex;align-items:center;gap:10px}
.h3-unit__tag::after{content:"";width:clamp(28px,4vw,72px);height:1px;background:currentColor;opacity:.5}
body.h3:not(.dark) .h3-unit__tag{color:var(--ul,var(--ink))}
.h3-unit__n{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.4vw,86px);line-height:.94;letter-spacing:-.04em;color:var(--ink);margin:0}
.h3-unit__d{font-family:var(--font-serif);font-size:clamp(22px,2.15vw,36px);line-height:1.26;letter-spacing:-.014em;color:var(--ink);margin:0;max-width:24ch;text-wrap:pretty}
.h3-unit__who{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-mute);margin:0}

/* ============================================================
   CASE-SLIDER — manuell
   ============================================================ */
.h3-cases{border-top:1px solid var(--hair)}
.h3-cs__top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:clamp(26px,3vw,44px)}
.h3-cs__stage{position:relative;max-width:1360px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,3.4vw,56px);padding-right:clamp(20px,3.4vw,56px)}
.h3-cs__slide{display:none;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4.4vw,72px);align-items:center}
.h3-cs__slide.is-on{display:grid;animation:h3Fade .55s var(--ease-out)}
@keyframes h3Fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.h3-cs__img{aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);background:var(--stage-2)}
.h3-cs__img image-slot{width:100%;height:100%;display:block}
.h3-cs__b{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.h3-cs__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;gap:12px;flex-wrap:wrap}
.h3-cs__k span{color:var(--ink-faint)}
.h3-cs__t{font-family:var(--font-sans);font-weight:600;font-size:clamp(26px,2.9vw,42px);line-height:1.08;letter-spacing:-.032em;color:var(--ink);margin:0}
.h3-cs__x{font-size:16.5px;line-height:1.6;color:var(--ink-mute);margin:0;max-width:52ch}
.h3-cs__fact{display:flex;align-items:baseline;gap:14px;padding-top:16px;border-top:1px solid var(--hair);width:100%}
.h3-cs__factN{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,3.2vw,50px);line-height:1;letter-spacing:-.035em;color:var(--ink)}
.h3-cs__factL{font-family:var(--font-mono);font-size:11.5px;line-height:1.5;letter-spacing:.02em;color:var(--ink-mute);max-width:26ch}
.h3-cs__bar{display:flex;align-items:center;gap:18px;margin-top:clamp(28px,3.4vw,52px);padding-top:20px;border-top:1px solid var(--hair)}
.h3-cs__count{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--ink-mute)}
.h3-cs__count b{color:var(--ink);font-weight:500}
.h3-cs__ticks{display:flex;gap:6px}
.h3-cs__tick{width:34px;height:3px;border:0;padding:0;border-radius:2px;background:var(--hair-2);cursor:pointer}
.h3-cs__tick[aria-selected="true"]{background:var(--chip)}
.h3-cs__nav{margin-left:auto;display:flex;gap:8px}
.h3-cs__arw{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-2);background:transparent;color:var(--ink);font-size:15px;cursor:pointer;display:grid;place-items:center}
.h3-cs__arw:hover{border-color:var(--ink);background:var(--ink);color:var(--stage)}

/* ============================================================
   FOUNDATION-ASCENT-COLLAGE — die violette Insel (beide Varianten)
   ============================================================ */
.h3-fa{position:relative;background:var(--stage-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:clamp(72px,8vw,132px) 0}
.h3-fa__in{position:relative}
.h3-fa__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:end}
.h3-fa__t{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,64px);line-height:.94;letter-spacing:-.042em;color:var(--ink);margin:16px 0 0}
.h3-fa__t sup{font-size:.22em;vertical-align:super;letter-spacing:0;color:var(--ink-faint)}
.h3-fa__sub{font-family:var(--font-serif);font-size:clamp(19px,1.8vw,28px);line-height:1.34;color:var(--ink);margin:20px 0 0;max-width:32ch}
.h3-fa__x{font-size:16px;line-height:1.6;color:var(--ink-mute);margin:0;max-width:46ch}
.h3-fa__steps{list-style:none;margin:clamp(36px,4.4vw,68px) 0 0;padding:0;border-top:1px solid var(--hair)}
.h3-fa__step{display:grid;grid-template-columns:56px minmax(0,1fr) clamp(80px,14vw,220px);gap:clamp(16px,2.6vw,44px);align-items:center;padding:22px 4px;border-bottom:1px solid var(--hair);transition:padding-left var(--dur-base) var(--ease-out)}
.h3-fa__step:hover{padding-left:14px}
.h3-fa__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--ink-faint)}
.h3-fa__c{display:flex;flex-direction:column;gap:5px}
.h3-fa__st{font-family:var(--font-sans);font-weight:600;font-size:clamp(19px,1.6vw,25px);letter-spacing:-.025em;color:var(--ink);margin:0}
.h3-fa__sx{font-size:15px;line-height:1.5;color:var(--ink-mute);margin:0}
.h3-fa__bar{justify-self:end;width:100%;max-width:220px;height:3px;border-radius:3px;background:var(--hair-2);position:relative;overflow:hidden}
.h3-fa__bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,.25))}
.h3-fa__foot{border-top:1px solid var(--hair);padding-top:clamp(24px,3vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(30px,3.6vw,54px)}
.h3-fa__note{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-faint)}
.h3-fa__ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   KARRIERE-BAND
   ============================================================ */
.h3-car{border-top:1px solid var(--hair)}
.h3-car__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.h3-car__img{aspect-ratio:5/4;overflow:hidden;border-radius:var(--r-md);background:var(--stage-2)}

/* ============================================================
   ABSCHLUSS-CTA
   ============================================================ */
.h3-end{background:var(--stage-2);border-top:1px solid var(--hair);padding:clamp(72px,8vw,132px) 0}
.h3-end__giant{max-width:22ch}
.h3-end__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px clamp(24px,4vw,56px);margin-top:clamp(34px,4vw,60px)}
.h3-end__mail{font-family:var(--font-mono);font-size:14px;letter-spacing:.01em;color:var(--ink-mute)}
body.h3 a.h3-end__mail:hover{color:var(--ink)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .h3-hero__grid{grid-template-columns:1fr;align-items:start}
  .h3-hero__l2{margin-left:clamp(16px,7vw,80px)}
  .h3-cs__slide.is-on{grid-template-columns:1fr}
  .h3-car__grid{grid-template-columns:1fr}
  .h3-unit__b,.h3-unit:nth-child(even) .h3-unit__b{grid-column:1/span 10;grid-template-columns:1fr}
  .h3-unit__n,.h3-unit__d,.h3-unit:nth-child(even) .h3-unit__n,.h3-unit:nth-child(even) .h3-unit__d{grid-column:1}
  .h3-unit__d{max-width:34ch;padding-bottom:0}
  .h3-unit__img,.h3-unit:nth-child(even) .h3-unit__img{left:24%;right:-8vw}
  .h3-unit:nth-child(even) .h3-unit__img::after{background:linear-gradient(90deg,var(--stage) 4%,var(--stage-a) 42%,var(--stage-t) 92%)}
  .h3-unit:nth-child(even) .h3-unit__b{align-items:flex-start;text-align:left}
  .h3-unit:nth-child(even) .h3-unit__tag{flex-direction:row}
  .h3-fa__head{grid-template-columns:1fr}
  .h3-fa__step{grid-template-columns:40px minmax(0,1fr);row-gap:10px}
  .h3-fa__bar{grid-column:1/-1;justify-self:stretch;max-width:none}
}
@media (max-width:640px){
  .h3-giant{font-size:clamp(38px,12.4vw,64px)}
  .h3-card{flex:0 0 78vw;min-height:262px}
  .h3-row{grid-template-columns:1fr 28px;row-gap:8px}
  .h3-row__d{grid-column:1/-1}
  .h3-unit__b,.h3-unit:nth-child(even) .h3-unit__b{grid-column:1/span 12}
  .h3-unit__img,.h3-unit:nth-child(even) .h3-unit__img{left:0;right:0;opacity:.3}
  .h3-cs__stage{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory}
  .h3-cs__slide{display:grid!important;grid-template-columns:1fr;scroll-snap-align:start}
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion:reduce){
  .h3-hero__mo i,.h3-hero__mo u{animation:none}
  .h3-flow{display:none!important}
  .h3-caret{display:none}
  .h3-in{opacity:1;transform:none;animation:none}
  .h3-rv{opacity:1;transform:none;transition:none}
  .h3-hero__bgMove{animation:none}
  .h3-cs__slide.is-on{animation:none}
  .h3-mq__track{animation:none}
  .h3-mq{overflow-x:auto}
  .h3-card,.h3-row,.h3-cs__arw{transition:none}
}

/* Variante Quadrate: vier quadratische Kacheln, zwei nebeneinander.
   Bild liegt vollflächig darunter, Text sitzt unten auf dem Verlauf. */
body.h3[data-units="quad"] .h3-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
body.h3[data-units="quad"] .h3-unit{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;container-type:inline-size;aspect-ratio:1/1;min-height:0;padding:0;border-top:0;border-radius:var(--r-md);overflow:hidden;background:var(--card);transition:transform var(--dur-base) var(--ease-out)}
body.h3[data-units="quad"] .h3-unit:hover{transform:translateY(-4px)}
body.h3[data-units="quad"] .h3-unit__img{position:absolute;inset:0;left:0;right:0;width:auto;opacity:.5;transition:opacity var(--dur-base) var(--ease-out),transform 1.2s var(--ease-out)}
body.h3[data-units="quad"] .h3-unit:hover .h3-unit__img{opacity:.62;transform:scale(1.04)}
body.h3[data-units="quad"] .h3-unit__img::after{background:linear-gradient(178deg,var(--stage-t) 0%,var(--stage-a) 22%,var(--stage) 58%,var(--stage) 100%)}
body.h3[data-units="quad"] .h3-unit::before{background:linear-gradient(180deg,transparent 0%,var(--stage) 62%,var(--stage) 100%);opacity:.5}
body.h3[data-units="quad"] .h3-unit::after{display:none}

body.h3:not(.dark)[data-units="quad"] .h3-unit::before{opacity:.34}
body.h3[data-units="quad"] .h3-unit__b{position:static;z-index:2;width:100%;min-width:0;grid-column:auto;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4vw,38px);max-width:none}
body.h3[data-units="quad"] .h3-unit__tag{position:absolute;top:clamp(18px,2vw,30px);left:clamp(22px,2.4vw,38px);z-index:3}
body.h3[data-units="quad"] .h3-unit__n{font-size:clamp(26px,10.4cqw,70px);overflow-wrap:anywhere;line-height:.98;letter-spacing:-.035em;width:100%;text-wrap:balance}
body.h3[data-units="quad"] .h3-unit__d,body.h3[data-units="quad"] .h3-unit__who,body.h3[data-units="quad"] .h3-unit__b .h3-chip{position:relative;z-index:3}
body.h3[data-units="quad"] .h3-unit__d{max-width:34ch}
@media (max-width:1000px){body.h3[data-units="quad"] .h3-unit{aspect-ratio:auto;min-height:clamp(320px,46vw,460px)}}
@media (max-width:720px){body.h3[data-units="quad"] .h3-units{grid-template-columns:1fr}}

/* CTA in der Unit-Farbe */
body.h3 .h3-unit a.h3-chip--text{color:var(--u,var(--ink));border-bottom-color:color-mix(in oklab,var(--u,var(--ink)) 45%,transparent)}
body.h3:not(.dark) .h3-unit a.h3-chip--text{color:var(--ul,var(--ink));border-bottom-color:color-mix(in oklab,var(--ul,var(--ink)) 45%,transparent)}
body.h3 .h3-unit a.h3-chip--text:hover{color:var(--u,var(--ink));border-bottom-color:var(--u,var(--ink))}
body.h3:not(.dark) .h3-unit a.h3-chip--text:hover{color:var(--ul,var(--ink));border-bottom-color:var(--ul,var(--ink))}

/* Kundenstimmen als eigene Slides im Case-Slider.
   Volle Breite, sehr große Schrift, heller Grund mit schwarzer Type. */
.h3-cs__slide--q.is-on{display:block;grid-template-columns:none}
.h3-q{margin:0;background:var(--paper,#FAF8F4);border-radius:var(--r-md);padding:clamp(32px,5vw,84px);display:flex;flex-direction:column;gap:clamp(24px,3vw,44px);min-height:clamp(320px,34vw,520px);justify-content:center}
.h3-q__t{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4.6vw,76px);line-height:1.02;letter-spacing:-.04em;color:#0A0907;margin:0;text-wrap:balance}
.h3-q__t::before{content:"\201E"}
.h3-q__t::after{content:"\201C"}
.h3-q__f{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,9,7,.55)}
.h3-q__n{color:#0A0907}
body.h3:not(.dark) .h3-q{background:var(--stage-2);border:1px solid var(--hair)}
@media (max-width:640px){.h3-q__t::before,.h3-q__t::after{content:none}}

/* Case-Slides: Bild liegt vollflächig im Hintergrund, Text darüber. */
.h3-cs__slide:not(.h3-cs__slide--q).is-on{display:block;position:relative;isolation:isolate;border-radius:var(--r-md);overflow:hidden;min-height:clamp(360px,40vw,560px)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{position:absolute;inset:0;z-index:0;aspect-ratio:auto;border-radius:0}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img image-slot{filter:grayscale(1) contrast(1.08) brightness(.9)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--stage-t) 0%,var(--stage-a) 40%,var(--stage) 94%),linear-gradient(90deg,var(--stage-a) 0%,var(--stage-t) 62%)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b{position:relative;z-index:2;justify-content:flex-end;min-height:inherit;padding:clamp(28px,4vw,64px);max-width:min(720px,88%)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__fact{width:auto;max-width:520px}

/* Hover: Bild kommt in Originalfarbe zurück */
.h3-unit__img image-slot{transition:filter .5s var(--ease-out)}
.h3-unit:hover .h3-unit__img image-slot{filter:none}
body.h3[data-units="quad"] .h3-unit:hover .h3-unit__img{opacity:.9}

/* Referenzen über die volle Seitenbreite, Text links auf Schwarz, Bild rechts */
.h3-cases{padding-bottom:0}
.h3-cases>.h3-wrap{max-width:none;padding:0}
.h3-cases .h3-cs__top,.h3-cases .h3-cs__bar{max-width:1360px;margin-left:auto;margin-right:auto;padding-left:clamp(20px,3.4vw,56px);padding-right:clamp(20px,3.4vw,56px)}
.h3-cs__slide:not(.h3-cs__slide--q).is-on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:0;min-height:clamp(420px,44vw,660px)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{position:relative;inset:auto;order:2;height:100%}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img image-slot{filter:none;height:100%}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img::after{display:none}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b{order:1;background:#000;color:rgba(255,255,255,.72);justify-content:center;max-width:none;padding:clamp(32px,5vw,88px)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b>*{max-width:34rem}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__t,.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__factN{color:#fff}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__x{color:rgba(255,255,255,.68)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__fact{border-top-color:rgba(255,255,255,.18)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__factL,.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__k span{color:rgba(255,255,255,.5)}
body.h3 .h3-cs__slide:not(.h3-cs__slide--q) a.h3-chip--bare{color:#fff;border-color:rgba(255,255,255,.34)}
body.h3 .h3-cs__slide:not(.h3-cs__slide--q) a.h3-chip--bare:hover{border-color:#fff;background:#fff;color:#000}
.h3-cs__slide--q.is-on{padding:0 clamp(20px,3.4vw,56px)}
.h3-cs__bar{max-width:1360px}
@media (max-width:860px){.h3-cs__slide:not(.h3-cs__slide--q).is-on{grid-template-columns:1fr}.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{order:1;aspect-ratio:16/10}.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b{order:2}}

/* FA-Sektion durchgehend dunkel, in beiden Farbvarianten */
.h3-fa{background:#000;border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.72)}
.h3-fa .h3-k{color:rgba(255,255,255,.5)}
.h3-fa__t{color:#fff}
.h3-fa__t sup{color:rgba(255,255,255,.4)}
.h3-fa__sub{color:rgba(255,255,255,.9)}
.h3-fa__x{color:rgba(255,255,255,.66)}
.h3-fa__note{color:rgba(255,255,255,.45)}
body.h3 .h3-fa a.h3-chip{background:#fff;color:#000}
body.h3 .h3-fa a.h3-chip:hover{background:rgba(255,255,255,.86);color:#000}
body.h3 .h3-fa a.h3-chip--bare{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
body.h3 .h3-fa a.h3-chip--bare:hover{background:transparent;border-color:#fff;color:#fff}

/* Referenzen: Grund wie im Hero, Text links ohne Fläche, Bild rechts mit Verlauf */
.h3-cases{background:var(--stage)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b{background:transparent;color:var(--ink-mute);padding:clamp(32px,4.4vw,80px) clamp(20px,3.4vw,56px)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__t,.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__factN{color:var(--ink)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__x{color:var(--ink-mute)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__fact{border-top-color:var(--hair)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__factL,.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__k span{color:var(--ink-faint)}
body.h3 .h3-cs__slide:not(.h3-cs__slide--q) a.h3-chip--bare{color:var(--ink);border-color:var(--hair-2)}
body.h3 .h3-cs__slide:not(.h3-cs__slide--q) a.h3-chip--bare:hover{background:var(--ink);border-color:var(--ink);color:var(--stage)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{position:relative}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img::after{display:block;content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--stage) 0%,var(--stage-a) 34%,var(--stage-t) 78%)}
.h3-cs__nav{margin-left:0}
.h3-cs__bar{justify-content:space-between}
.h3-cs__head{max-width:1360px;margin:0 auto clamp(22px,2.6vw,38px);padding:0 clamp(20px,3.4vw,56px)}
.h3-cs__h{margin:0;max-width:26ch}
.h3-cs__h em{display:block;color:var(--accent);margin-left:clamp(12px,4vw,64px)}

/* Referenzen: keine Trennlinien, Pfeile ohne Rahmen, Bewegung im Grund */
.h3-cases{border-top:0;position:relative;isolation:isolate;overflow:hidden}
.h3-cases>.h3-wrap{position:relative;z-index:1}
.h3-cases .h3-cs__bar{border-top:0}
.h3-cases .h3-cs__fact{border-top:0;padding-top:6px}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__fact{border-top:0}
.h3-cs__arw{border:0;background:transparent;font-size:20px}
.h3-cs__arw:hover{background:transparent;color:var(--accent);border:0}
.h3-cases__mo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 88%,transparent 100%)}
.h3-cases__mo .h3-flow__l,.h3-cases__mo .h3-flow__p{opacity:.16}
.h3-cs__hx{font-size:16.5px;line-height:1.6;color:var(--ink-mute);margin:22px 0 0;max-width:56ch}
.h3-cs__head .h3-uhead__l{display:inline-block;margin-top:20px}

/* Alle Slides gleich hoch */
.h3-cs__stage{--slideH:clamp(420px,44vw,660px)}
.h3-cs__slide.is-on{min-height:var(--slideH)}
.h3-cs__slide:not(.h3-cs__slide--q).is-on{min-height:var(--slideH)}
.h3-cs__slide--q.is-on{display:flex}
.h3-q{min-height:var(--slideH);flex:1}
@media (max-width:860px){.h3-cs__stage{--slideH:auto}}

/* Bühne mit fester Höhe, damit kein Slide springt */
.h3-cs__stage{--slideH:clamp(520px,46vw,660px);height:var(--slideH)}
.h3-cs__slide.is-on,.h3-cs__slide:not(.h3-cs__slide--q).is-on,.h3-q{height:100%;min-height:0}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__b{overflow:hidden}
@media (max-width:860px){.h3-cs__stage{height:auto}.h3-cs__slide.is-on,.h3-cs__slide:not(.h3-cs__slide--q).is-on,.h3-q{height:auto}}


/* Karriere: Kopf plus zwei Laufbänder mit Positionskarten */
.h3-car__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:clamp(28px,3.4vw,48px)}
.h3-car__t{margin:0;max-width:24ch}
.h3-car__t em{display:block;color:var(--accent);margin-left:clamp(12px,4vw,64px)}
.h3-car__x{font-size:16.5px;line-height:1.6;color:var(--ink-mute);margin:0;max-width:52ch}
.h3-mq--j1 .h3-mq__track{--sp:78s}
.h3-mq--j2 .h3-mq__track{--sp:112s;animation-direction:reverse}
.h3-mq--j2{margin-top:clamp(12px,1.4vw,18px)}
.h3-job{flex:0 0 auto;display:flex;flex-direction:column;gap:8px;padding:22px 24px 18px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--card-hair);border-top:3px solid var(--j);color:var(--ink);transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.h3-job:hover{transform:translateY(-3px);border-color:var(--j)}
.h3-job--sm{width:clamp(230px,20vw,290px);min-height:180px}
.h3-job--md{width:clamp(270px,24vw,340px);min-height:210px}
.h3-job--lg{width:clamp(310px,28vw,400px);min-height:250px}
.h3-job__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--j)}
.h3-job__t{font-family:var(--font-sans);font-weight:600;font-size:clamp(18px,1.5vw,24px);line-height:1.16;letter-spacing:-.025em;color:var(--ink);margin:6px 0 0}
.h3-job__l{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-mute)}
.h3-job__f{margin-top:auto;padding-top:14px;border-top:1px solid var(--card-hair);display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint)}
.h3-job:hover .h3-job__f{color:var(--j)}

/* Karten einfarbig, ohne Unit-Farben */
.h3-job{--j:var(--ink);border-top-color:var(--card-hair)}
.h3-job:hover{border-color:var(--hair-2)}
.h3-job__k{color:var(--ink-faint)}
.h3-job:hover .h3-job__f{color:var(--ink)}

/* Hover: Karte füllt sich in der Unit-Farbe */
.h3-job{--jc:var(--accent);transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.h3-job:hover{background:var(--jc);border-color:var(--jc);color:#fff}
body.h3 .h3-job:hover .h3-job__t{color:#fff}
body.h3 .h3-job:hover .h3-job__k,body.h3 .h3-job:hover .h3-job__l,body.h3 .h3-job:hover .h3-job__f{color:rgba(255,255,255,.78)}
.h3-job:hover .h3-job__f{border-top-color:rgba(255,255,255,.28)}
.h3-fa__mark{display:block;width:clamp(120px,12vw,190px);height:auto;margin:0 0 22px;opacity:.9}

/* Bild im Referenz-Slider rundum in den Grund verlaufen */
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img::after{background:linear-gradient(90deg,var(--stage) 0%,var(--stage-a) 30%,var(--stage-t) 72%),linear-gradient(270deg,var(--stage) 0%,var(--stage-t) 26%),linear-gradient(180deg,var(--stage) 0%,var(--stage-t) 28%),linear-gradient(0deg,var(--stage) 0%,var(--stage-t) 28%)}

/* Bild kleiner, in Graustufen, beim Hover farbig. Pfeile dichter darunter. */
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{align-self:center;height:82%;margin-right:clamp(20px,3.4vw,56px)}
.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img image-slot{height:100%;filter:grayscale(1) contrast(1.1) brightness(.95);transition:filter .5s var(--ease-out)}
.h3-cs__slide:not(.h3-cs__slide--q):hover .h3-cs__img image-slot{filter:none}
.h3-cases .h3-cs__bar{margin-top:0;padding-top:12px}
@media (max-width:860px){.h3-cs__slide:not(.h3-cs__slide--q) .h3-cs__img{height:auto;margin-right:0}}

/* FAQ über dem Footer */
.h3-faq__head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:clamp(28px,3.4vw,48px)}
.h3-faq__t{margin:0;max-width:22ch}
.h3-faq__t em{display:block;color:var(--accent);margin-left:clamp(12px,4vw,64px)}
.h3-faq__x{font-size:16.5px;line-height:1.6;color:var(--ink-mute);margin:0;max-width:52ch}
.h3-faq__list{border-top:1px solid var(--hair)}
.h3-faq__i{border-bottom:1px solid var(--hair)}
.h3-faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;font-family:var(--font-sans);font-weight:600;font-size:clamp(17px,1.5vw,23px);letter-spacing:-.022em;color:var(--ink);transition:padding-left var(--dur-base) var(--ease-out)}
.h3-faq__q::-webkit-details-marker{display:none}
.h3-faq__i:hover .h3-faq__q{padding-left:14px}
.h3-faq__s{position:relative;flex:0 0 18px;height:18px}
.h3-faq__s::before,.h3-faq__s::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:var(--ink);transition:transform var(--dur-base) var(--ease-out)}
.h3-faq__s::after{transform:rotate(90deg)}
.h3-faq__i[open] .h3-faq__s::after{transform:rotate(0)}
.h3-faq__i[open] .h3-faq__q{color:var(--accent)}
.h3-faq__i[open] .h3-faq__s::before,.h3-faq__i[open] .h3-faq__s::after{background:var(--accent)}
.h3-faq__a{font-size:16px;line-height:1.62;color:var(--ink-mute);margin:0 0 26px;max-width:62ch;padding-left:4px}

/* Hero: Paar-Rotator, beide Wörter wechseln synchron */
.h3-rotw{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
.h3-rotw--b{color:var(--accent)}
.h3-rotw--b::after{content:"";display:inline-block;width:.06em;height:.82em;margin-left:.06em;vertical-align:-.06em;background:currentColor;animation:h3Caret 1s steps(1) infinite}
@media (prefers-reduced-motion:reduce){.h3-rotw--b::after{display:none}}

@keyframes h3Caret{0%,49%{opacity:1}50%,100%{opacity:0}}


/* H1 in drei Zeilen, Beiwerk immer darunter */
.h3-hero__grid{display:block}
.h3-hero__h1{line-height:1.04;text-wrap:nowrap}
.h3-hero__r1,.h3-hero__r2,.h3-hero__l2{display:block;white-space:nowrap;margin-left:0}
.h3-hero__l2{color:var(--ink)}
.h3-hero__side{margin-top:clamp(28px,3.4vw,52px);padding-bottom:0;max-width:640px}
@media (max-width:640px){.h3-hero__r1,.h3-hero__r2,.h3-hero__l2{white-space:normal}}

/* Abschluss-CTA auf Schwarz */
.h3-end{background:#000;color:rgba(255,255,255,.72);border-top:0}
.h3-end .h3-k{color:rgba(255,255,255,.5)}
.h3-end__giant{color:#fff}
.h3-end__giant em{color:var(--accent)}
body.h3 .h3-end a.h3-end__mail{color:rgba(255,255,255,.66)}
body.h3 .h3-end a.h3-end__mail:hover{color:#fff}
body.h3 .h3-end a.h3-chip{background:#fff;color:#000}
body.h3 .h3-end a.h3-chip:hover{background:rgba(255,255,255,.86);color:#000}

/* Visually hidden, accessible to screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}