/* ==========================================================================
   AIT Group, Designsystem 2 (Stand Oktober 2026)
   Neue Sektionen werden ausschliesslich hier gebaut, alle Klassen mit Praefix "a-".
   site.css bleibt nur so lange geladen, bis die letzte alte Sektion ersetzt ist.
   Regeln: keine Overrides auf alte Klassen, kein !important, Motion nur ueber
   transform und opacity, alles mit prefers-reduced-motion abschaltbar.
   ========================================================================== */

:root{
  /* Flaechen */
  --a-ink:#14161B;            /* dunkle Flaeche: Hero, KI-Band */
  --a-ink-2:#1C1F26;
  --a-paper:#FFFFFF;
  --a-paper-2:#F4F4F5;
  /* Schrift auf hell */
  --a-text:#141414;
  --a-text-2:#4A4A4E;
  --a-text-3:#75757A;
  --a-line:rgba(20,20,20,.13);
  /* Schrift auf dunkel */
  --a-on:#FFFFFF;
  --a-on-2:rgba(255,255,255,.82);
  --a-on-3:rgba(255,255,255,.62);
  --a-on-line:rgba(255,255,255,.13);
  /* Akzent: nur primaere Aktion und aktive Zustaende */
  --a-accent:#6D28D9;
  --a-accent-2:#5B21B6;
  /* Mass und Bewegung */
  --a-gutter:clamp(20px,3.9vw,56px);
  --a-max:1560px;
  --a-ease:cubic-bezier(.16,1,.3,1);
  --a-font:"Barlow",system-ui,sans-serif;
}

/* ---------- Buttons ---------- */
.a-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:0 22px;
  border:1px solid transparent;border-radius:2px;font-family:var(--a-font);font-size:15px;font-weight:600;letter-spacing:.01em;line-height:1;
  transition:background-color 200ms,border-color 200ms,color 200ms}
.a-btn svg{width:18px;height:18px;flex:none;transition:transform 300ms var(--a-ease)}
.a-btn:hover svg{transform:translateX(4px)}
.a-btn--primary{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.a-btn--primary:hover{background:var(--a-accent-2);border-color:var(--a-accent-2)}
.a-btn--ghost{background:transparent;border-color:rgba(255,255,255,.42);color:#fff}
.a-btn--ghost:hover{border-color:#fff}

/* ---------- Hero ---------- */
.a-hero{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;
  height:100vh;height:100svh;min-height:640px;
  background:var(--a-ink) url("hero-poster.jpg") center/cover no-repeat;color:var(--a-on);text-align:center}

.a-hero__media{position:absolute;inset:0;z-index:-2;pointer-events:none}
.a-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1400ms}
.a-hero__media video.is-playing{opacity:1}
/* Abdunklung ueber Poster und Video: oben fuer die Navigation, unten fuer Leiste und Logos */
.a-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(12,13,16,.64) 0%,rgba(12,13,16,.28) 26%,rgba(12,13,16,.36) 54%,rgba(12,13,16,.86) 80%,var(--a-ink) 100%),
  radial-gradient(62% 54% at 50% 42%,rgba(12,13,16,.42) 0%,rgba(12,13,16,0) 74%)}

.a-hero__body{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;
  padding:clamp(116px,15vh,170px) var(--a-gutter) clamp(24px,4vh,48px)}

.a-kicker{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 0 clamp(18px,3.4vh,34px);
  font-family:var(--a-font);font-size:12px;font-weight:600;letter-spacing:.2em;line-height:1.4;text-transform:uppercase;color:var(--a-on-2)}
.a-kicker i{display:block;width:44px;height:1px;background:rgba(255,255,255,.5)}

.a-hero__title{margin:0;font-family:var(--a-font);font-weight:700;font-size:clamp(42px,min(5.9vw,10.2vh),100px);line-height:1;letter-spacing:-.014em;
  color:var(--a-on);text-shadow:0 2px 34px rgba(0,0,0,.45)}
.a-hero__title .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.a-hero__title .l>span{display:block}
.a-hero__title .l--light{font-weight:300;color:var(--a-on-3)}

.a-hero__lead{margin:clamp(16px,3vh,28px) auto 0;max-width:54ch;font-family:var(--a-font);font-size:clamp(16px,1.25vw,19px);line-height:1.55;
  color:var(--a-on-2);text-shadow:0 1px 16px rgba(0,0,0,.45)}

.a-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:clamp(22px,3.8vh,36px)}
.a-hero__actions .a-btn{min-width:250px}

/* ---------- Leistungsleiste im Hero ---------- */
.a-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--a-on-line);text-align:left}
.a-rail a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:5px;align-items:center;
  padding:clamp(14px,2.3vh,22px) clamp(18px,2.4vw,36px);color:var(--a-on);transition:background-color 300ms}
.a-rail a+a{border-left:1px solid var(--a-on-line)}
.a-rail a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--a-ease)}
.a-rail a:hover,.a-rail a:focus-visible{background:rgba(255,255,255,.045)}
.a-rail a:hover::before,.a-rail a:focus-visible::before{transform:scaleX(1)}
.a-rail__t{font-family:var(--a-font);font-size:clamp(16px,1.35vw,20px);font-weight:600;letter-spacing:-.004em;line-height:1.2}
.a-rail__d{grid-column:1/-1;font-family:var(--a-font);font-size:14px;line-height:1.4;color:var(--a-on-3);transition:color 300ms}
.a-rail a:hover .a-rail__d,.a-rail a:focus-visible .a-rail__d{color:var(--a-on-2)}
.a-rail svg{width:18px;height:18px;color:var(--a-on-3);transition:transform 320ms var(--a-ease),color 300ms}
.a-rail a:hover svg,.a-rail a:focus-visible svg{transform:translateX(4px);color:#fff}

/* ---------- Kundenlogos ---------- */
.a-logos{overflow:hidden;border-top:1px solid var(--a-on-line);background:var(--a-ink);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.a-logos__track{display:flex;align-items:center;width:max-content;animation:a-marquee 46s linear infinite}
.a-logos:hover .a-logos__track{animation-play-state:paused}
.a-logos__track a,.a-logos__track span{display:flex;align-items:center;justify-content:center;height:68px;padding:0 44px;border-right:1px solid rgba(255,255,255,.09)}
.a-logos__track img{display:block;width:auto;height:auto;max-width:120px;max-height:32px;object-fit:contain;filter:brightness(0) invert(1);opacity:.66;transition:opacity 300ms}
.a-logos__track img.tall{max-height:38px}
.a-logos__track img.wide{max-height:30px}
.a-logos__track img.big{max-height:36px}
.a-logos__track a:hover img{opacity:1}
@keyframes a-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- Auftakt: eine Sequenz beim Laden, laeuft ohne JavaScript ---------- */
@keyframes a-rise{from{transform:translateY(110%)}to{transform:none}}
@keyframes a-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes a-fade{from{opacity:0}to{opacity:1}}
.a-kicker{animation:a-fade 900ms 150ms both}
.a-hero__title .l>span{animation:a-rise 1100ms var(--a-ease) both}
.a-hero__title .l:nth-child(2)>span{animation-delay:90ms}
.a-hero__title .l:nth-child(3)>span{animation-delay:180ms}
.a-hero__lead{animation:a-in 900ms var(--a-ease) 450ms both}
.a-hero__actions{animation:a-in 900ms var(--a-ease) 620ms both}
.a-rail a{animation:a-in 800ms var(--a-ease) both}
.a-rail a:nth-child(1){animation-delay:800ms}
.a-rail a:nth-child(2){animation-delay:870ms}
.a-rail a:nth-child(3){animation-delay:940ms}
.a-rail a:nth-child(4){animation-delay:1010ms}
.a-logos{animation:a-fade 1000ms 1150ms both}

/* ---------- Niedrige Desktop-Fenster: alles bleibt im ersten Bildschirm ---------- */
@media (max-height:800px) and (min-width:901px){
  .a-hero__body{padding-top:clamp(96px,14vh,112px);padding-bottom:20px}
  .a-hero__title{font-size:clamp(40px,min(5.4vw,9vh),84px)}
  .a-kicker{margin-bottom:18px}
  .a-hero__lead{font-size:16px;margin-top:14px}
  .a-hero__actions{margin-top:20px}
  .a-rail a{padding-top:13px;padding-bottom:13px}
  .a-rail__d{font-size:13px}
  .a-logos__track a,.a-logos__track span{height:52px}
}

/* ---------- Tablet und Mobile ---------- */
@media (max-width:1100px){
  .a-hero::before{background:linear-gradient(180deg,rgba(12,13,16,.62) 0%,rgba(12,13,16,.40) 36%,rgba(12,13,16,.62) 68%,var(--a-ink) 100%)}
  .a-rail__d{display:none}
}
@media (max-width:900px){
  .a-hero{height:auto;min-height:100svh;background-position:center 30%}
  .a-hero__media{display:none}
  .a-hero__body{padding:112px var(--a-gutter) 36px}
  .a-kicker{font-size:11px;letter-spacing:.16em;gap:12px}
  .a-kicker i{width:22px}
  .a-hero__title{font-size:clamp(36px,10.4vw,60px);line-height:1.04;text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .a-hero__lead{font-size:17px;color:var(--a-on);text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .a-hero__actions .a-btn{min-width:220px}
  .a-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-rail a{padding:16px var(--a-gutter)}
  .a-rail a+a{border-left:0}
  .a-rail a:nth-child(even){border-left:1px solid var(--a-on-line)}
  .a-rail a:nth-child(n+3){border-top:1px solid var(--a-on-line)}
  .a-rail a:nth-child(n+3)::before{top:-1px}
  .a-rail__t{font-size:16px}
  .a-logos__track a,.a-logos__track span{height:56px;padding:0 24px}
  .a-logos__track img{max-height:26px}
}
/* Schmale Telefone: Headline fliesst als ein Satz, statt drei feste Zeilen zu erzwingen */
@media (max-width:600px){
  .a-hero__actions{width:100%;gap:12px}
  .a-hero__actions .a-btn{width:100%;min-width:0}
  .a-hero__title .l{display:inline;overflow:visible;padding:0;margin:0}
  .a-hero__title .l>span{display:inline;animation:none}
  .a-hero__title{animation:a-in 900ms var(--a-ease) 100ms both}
}

@media (max-width:380px){
  .a-kicker i{display:none}
  .a-kicker{letter-spacing:.14em}
}

@media (prefers-reduced-motion:reduce){
  .a-hero__media{display:none}
  .a-kicker,.a-hero__title,.a-hero__title .l>span,.a-hero__lead,.a-hero__actions,.a-rail a,.a-logos,.a-logos__track{animation:none}
  .a-rail a::before,.a-rail svg,.a-btn svg{transition:none}
}

/* ==========================================================================
   Sektionsgeruest fuer alle hellen Sektionen
   ========================================================================== */
.a-sec{background:var(--a-paper);color:var(--a-text-2);padding:clamp(64px,9vh,120px) var(--a-gutter)}
.a-wrap{max-width:var(--a-max);margin:0 auto}
.a-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,120px);align-items:end;margin-bottom:clamp(40px,6vh,72px)}
.a-eyebrow{display:flex;align-items:center;gap:16px;margin:0 0 22px;font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-3)}
.a-eyebrow i{display:block;width:34px;height:1px;background:#9B9BA1}
.a-h2{margin:0;font-family:var(--a-font);font-weight:700;font-size:clamp(30px,3vw,50px);line-height:1.08;letter-spacing:-.008em;color:var(--a-text)}
.a-h2 span{display:block;font-weight:300;color:var(--a-text-3)}
.a-head__lead{margin:0;max-width:52ch;font-family:var(--a-font);font-size:clamp(16px,1.2vw,18px);line-height:1.6;color:var(--a-text-2)}

.a-btn--dark{background:var(--a-text);border-color:var(--a-text);color:#fff}
.a-btn--dark:hover{background:#000;border-color:#000}
.a-link{display:inline-flex;align-items:center;gap:10px;padding-bottom:4px;border-bottom:1px solid var(--a-text);font-family:var(--a-font);font-size:15px;font-weight:600;line-height:1.2;color:var(--a-text)}
.a-link svg{width:16px;height:16px;transition:transform 300ms var(--a-ease)}
.a-link:hover svg{transform:translateX(4px)}

.a-status{display:inline-flex;align-items:center;gap:8px;font-family:var(--a-font);font-size:11px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.a-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#2BB583}
.a-status--soon::before{background:#D09A2E}

/* Einblenden beim Erreichen, nur wenn JavaScript laeuft */
.a-js .a-rv{opacity:0;transform:translateY(14px);transition:opacity 800ms,transform 800ms var(--a-ease)}
.a-js .a-rv.is-in{opacity:1;transform:none}


@media (max-width:900px){
  .a-head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .a-js .a-rv{opacity:1;transform:none;transition:none}
  .a-link svg{transition:none}
}

/* ==========================================================================
   Sektion 2: Projekt-Tour
   Grundzustand ist eine gestapelte Liste (ohne JavaScript und bei reduzierter
   Bewegung). Mit .is-live wird daraus eine angepinnte Buehne: jedes Projekt
   kommt aus der Tiefe, fuellt das Bild, laeuft durch und man geht hindurch
   zum naechsten. Bewegt werden nur transform und opacity.
   ========================================================================== */
.a-tour{background:var(--a-ink);color:var(--a-on)}
.a-tour__head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,6vw,120px);align-items:end;
  max-width:calc(var(--a-max) + 2*var(--a-gutter));margin:0 auto;padding:clamp(72px,11vh,136px) var(--a-gutter) clamp(40px,7vh,80px)}
.a-tour .a-eyebrow{color:var(--a-on-3)}
.a-tour .a-eyebrow i{background:rgba(255,255,255,.4)}
.a-tour .a-h2{color:#fff}
.a-tour .a-h2 span{color:var(--a-on-3)}
.a-tour .a-head__lead{color:var(--a-on-2)}
.a-tour .a-link{color:#fff;border-bottom-color:rgba(255,255,255,.55)}

/* ---------- Grundzustand: Liste ---------- */
.a-tour__stage{display:grid;gap:clamp(56px,9vh,104px);max-width:calc(var(--a-max) + 2*var(--a-gutter));margin:0 auto;padding:0 var(--a-gutter)}
.a-world{position:relative}
.a-world__glow,.a-world__dim,.a-world__scrim,.a-tour__rail,.a-world__name,.a-world__skip,.a-world__no{display:none}
.a-world__title{margin:0 0 18px;font-family:var(--a-font);font-size:clamp(26px,2.4vw,38px);font-weight:700;line-height:1.1;letter-spacing:-.006em;color:#fff}
.a-world__view{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:6px;background:#0B0C10}
.a-world__view img{position:absolute;left:0;top:0;display:block;width:100%;height:auto}
.a-world__info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(18px,5vw,96px);align-items:start;margin-top:24px}
.a-world__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 12px;font-family:var(--a-font);font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;color:var(--a-on-2)}
.a-world__count{font-variant-numeric:tabular-nums;color:var(--a-on-3)}
.a-world__sys{margin:0;font-family:var(--a-font);font-size:clamp(22px,2.4vw,38px);font-weight:600;line-height:1.1;letter-spacing:-.008em;color:#fff}
.a-world__text{margin:0 0 18px;max-width:50ch;font-family:var(--a-font);font-size:17px;line-height:1.6;color:var(--a-on-2)}
.a-world__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.a-world__ext{display:inline-flex;align-items:center;gap:8px;font-family:var(--a-font);font-size:15px;font-weight:500;color:var(--a-on-2);transition:color 200ms}
.a-world__ext:hover{color:#fff}
.a-world__ext svg{width:13px;height:13px}
.a-tour__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;scroll-margin-top:72px;
  max-width:calc(var(--a-max) + 2*var(--a-gutter));margin:0 auto;padding:clamp(44px,7vh,72px) var(--a-gutter) clamp(64px,10vh,120px)}
.a-tour__foot p{margin:0;font-family:var(--a-font);font-size:16px;line-height:1.5;color:var(--a-on-3)}

/* ---------- Tour: angepinnte Buehne ---------- */
.a-tour.is-live .a-tour__stage{position:sticky;top:0;display:block;max-width:none;height:100vh;height:100svh;margin:0;padding:0;overflow:hidden}
.a-tour.is-live .a-world{position:absolute;inset:0;visibility:hidden}
.a-tour.is-live .a-world.is-on{visibility:visible}

/* Atmosphaere des Projekts: winziges, vorab weichgezeichnetes Bild, kein Filter zur Laufzeit */
.a-tour.is-live .a-world__glow{display:block;position:absolute;inset:-8%;background-position:center;background-size:cover;opacity:0;will-change:opacity}
.a-tour.is-live .a-world__glow::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 56% at 50% 52%,rgba(20,22,27,.12) 0%,rgba(20,22,27,.8) 68%,var(--a-ink) 100%)}

/* Das Fenster ins Projekt: buendig mit der Navigationsleiste */
.a-tour.is-live .a-world__screen{position:absolute;z-index:1;top:100px;right:24px;bottom:24px;left:24px;overflow:hidden;border-radius:10px;isolation:isolate;
  background:#0B0C10;transform-origin:50% 46%;opacity:0;will-change:transform,opacity}
.a-tour.is-live .a-world__screen::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.14);border-radius:inherit;pointer-events:none}
.a-tour.is-live .a-world__view{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.a-tour.is-live .a-world__dim{display:block;position:absolute;inset:0;background:#0B0C10;opacity:.6;pointer-events:none}
.a-tour.is-live .a-world__scrim{display:block;position:absolute;right:0;bottom:0;left:0;height:52%;opacity:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,12,16,.98) 0%,rgba(11,12,16,.96) 40%,rgba(11,12,16,.6) 70%,rgba(11,12,16,0) 100%)}
.a-tour.is-live .a-world__info{position:absolute;right:clamp(20px,3.2vw,52px);bottom:clamp(22px,4.2vh,46px);left:clamp(20px,3.2vw,52px);margin:0;align-items:end;opacity:0;pointer-events:none}
.a-tour.is-live .a-world.is-active .a-world__info{pointer-events:auto}
.a-tour.is-live .a-world__name{display:inline;color:#fff}
.a-tour.is-live .a-world__skip{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--a-font);font-size:14px;font-weight:500;color:var(--a-on-3);transition:color 200ms}
.a-tour.is-live .a-world__skip:hover{color:#fff}
.a-tour.is-live .a-world__skip svg{width:14px;height:14px}

/* Der Name fliegt als Titel vor dem Fenster vorbei */
.a-tour.is-live .a-world__title{position:absolute;z-index:2;top:53%;right:0;left:0;margin:0;padding:0 6vw;text-align:center;
  font-size:clamp(44px,8.4vw,164px);line-height:.96;letter-spacing:-.022em;text-shadow:0 4px 60px rgba(0,0,0,.55);
  transform:translate3d(0,-50%,0);opacity:0;pointer-events:none;will-change:transform,opacity}

.a-tour.is-live .a-world__no{display:block;margin:0 0 1.5em;font-size:max(12px,.105em);font-weight:600;line-height:1;letter-spacing:.22em;color:var(--a-on-2);font-variant-numeric:tabular-nums;text-shadow:none}

/* Fortschritt im rechten Rand */
.a-tour.is-live .a-tour__rail{display:block;position:absolute;z-index:20;top:50%;right:11px;width:2px;height:min(32vh,260px);margin-top:38px;transform:translateY(-50%);background:rgba(255,255,255,.16);pointer-events:none}
.a-tour__rail i{position:absolute;inset:0;background:#fff;transform:scaleY(0);transform-origin:top}

@media (max-width:900px){
  .a-tour__head{grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
  .a-world__info{grid-template-columns:minmax(0,1fr);gap:14px}
  .a-tour.is-live .a-world__screen{top:86px;right:12px;bottom:12px;left:12px}
  .a-tour.is-live .a-world__scrim{height:64%}
  .a-tour.is-live .a-world__info{right:18px;bottom:20px;left:18px;gap:10px}
  .a-tour.is-live .a-world__text{font-size:15px;line-height:1.5;margin-bottom:14px}
  .a-tour.is-live .a-world__sys{font-size:21px}
  .a-tour.is-live .a-world__title{font-size:clamp(40px,12vw,96px);padding:0 24px}
  .a-tour.is-live .a-tour__rail{right:5px;margin-top:37px}
}
@media (max-width:700px){
  .a-world__view{aspect-ratio:4/5}
  .a-tour__foot .a-btn{width:100%}
}

/* ---------- Tour als Explosionsansicht (WebGL) ----------
   Gezeichnet in assets/tour-stack.js: schwarzer Raum, pro Projekt ein Stapel
   Bildschirmplatten. Aus dem HTML bleiben Name, Beschriftungen und Angaben.
   Ohne WebGL laeuft die flache Tour oben. */
.a-tour__gl{position:absolute;inset:0;display:block;width:100%;height:100%}
.a-tour__shade{position:absolute;right:0;bottom:0;left:0;height:56%;opacity:0;pointer-events:none;
  background:linear-gradient(to top,rgba(11,12,16,.96) 0%,rgba(11,12,16,.7) 46%,rgba(11,12,16,0) 100%)}
.a-tour__labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.a-xl{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:flex-start;opacity:0;white-space:nowrap;will-change:transform,opacity;
  font-family:var(--a-font);font-size:13px;font-weight:500;line-height:1.2;color:rgba(255,255,255,.88)}
.a-xl b{margin-right:8px;font-weight:600;color:rgba(255,255,255,.46);font-variant-numeric:tabular-nums}
.a-xl em{font-style:normal}
.a-xl i{position:relative;display:block;width:1px;height:var(--lh,30px);margin-top:7px;background:rgba(255,255,255,.36)}
.a-xl i::after{content:"";position:absolute;bottom:-2px;left:-2px;width:5px;height:5px;border-radius:50%;background:#fff}
.a-tour.is-world .a-tour__stage{background:#0B0C10}
.a-tour.is-world .a-world{visibility:visible;pointer-events:none}
.a-tour.is-world .a-world__glow,.a-tour.is-world .a-world__view,.a-tour.is-world .a-world__scrim,.a-tour.is-world .a-world__screen::after{display:none}
.a-tour.is-world .a-world__screen{top:0;right:0;bottom:0;left:0;overflow:visible;border-radius:0;background:none;opacity:1;transform:none;will-change:auto}
.a-tour.is-world .a-world__title{top:auto;right:var(--tour-pad,56px);bottom:calc(clamp(30px,5.4vh,58px) + var(--tour-lift,0px));left:var(--tour-pad,56px);padding:0;text-align:left;transform:none;
  font-size:clamp(34px,4.3vw,70px);line-height:1;letter-spacing:-.018em;text-shadow:none}
.a-tour.is-world .a-world__no{margin-bottom:1.2em;font-size:12px}
.a-tour.is-world .a-world__info{right:var(--tour-pad,56px);bottom:calc(clamp(26px,4.6vh,50px) + var(--tour-lift,0px));left:var(--tour-pad,56px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,72px)}
.a-tour.is-world:not(.is-overlay) .a-world__info{top:var(--tour-info-top,auto);bottom:auto;align-items:start}
.a-tour.is-world .a-world__sys{font-size:clamp(21px,1.9vw,32px)}
.a-tour.is-world .a-world__top{margin-bottom:10px}
.a-tour.is-world .a-world.is-active .a-world__info{pointer-events:auto}
@media (max-width:900px){
  .a-xl{font-size:12px}
  .a-tour.is-world .a-world__title{font-size:clamp(32px,9.6vw,52px);bottom:28px}
  .a-tour.is-world .a-world__info{bottom:22px;grid-template-columns:minmax(0,1fr);gap:10px}
}

/* ==========================================================================
   Sektion 3: Das System dahinter
   Ein Vorgang laeuft von der Website ins System und wieder hinaus.
   Die Flaechen sind in HTML gebaut (keine Screenshots) und klar als
   Darstellung mit Beispieldaten ausgewiesen. Endzustand ist der Grundzustand,
   der Ablauf wird nur mit JavaScript abgespielt.
   ========================================================================== */
.a-flow{border:1px solid var(--a-line);border-radius:8px;background:var(--a-paper-2);overflow:hidden}
.a-flow__tabs{display:none}
.a-js .a-flow__tabs{display:flex;border-bottom:1px solid var(--a-line);background:var(--a-paper)}
.a-flow__tab{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:18px clamp(14px,2.2vw,32px);
  background:none;border:0;border-right:1px solid var(--a-line);text-align:left;font-family:var(--a-font);color:var(--a-text-3);cursor:pointer;transition:color 200ms}
.a-flow__tab:last-child{border-right:0}
.a-flow__tab b{font-size:clamp(15.5px,1.3vw,19px);font-weight:600;line-height:1.2;color:inherit}
.a-flow__tab span{font-size:13.5px;line-height:1.3;color:var(--a-text-3)}
.a-flow__tab::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--a-text);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--a-ease)}
.a-flow__tab:hover,.a-flow__tab[aria-selected="true"]{color:var(--a-text)}
.a-flow__tab[aria-selected="true"]::after{transform:scaleX(1)}

.a-flow__panel{padding:clamp(20px,2.6vw,40px)}
.a-flow__panel+.a-flow__panel{border-top:1px solid var(--a-line)}
.a-js .a-flow__panel{display:none}
.a-js .a-flow__panel.is-active{display:block}
.a-flow__grid{display:grid;grid-template-columns:minmax(0,3.2fr) clamp(28px,3.4vw,56px) minmax(0,5.6fr) clamp(28px,3.4vw,56px) minmax(0,3.2fr);align-items:stretch}
.a-st{display:flex;flex-direction:column;min-width:0}
.a-st__label{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-family:var(--a-font);font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:var(--a-text-3)}
.a-st__label i{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid var(--a-line);border-radius:50%;background:#fff;font-style:normal;font-size:11px;letter-spacing:0;color:var(--a-text-2)}

/* Verbindung zwischen den Stationen */
.a-conn{position:relative;align-self:center;height:1px;margin-top:34px;background:rgba(20,20,20,.18)}
.a-conn i{position:absolute;top:-.5px;right:0;left:0;height:2px;background:var(--a-text);transform-origin:left;transition:transform 520ms var(--a-ease)}
.a-conn::after{content:"";position:absolute;top:-4px;right:0;width:8px;height:8px;border-top:1.5px solid var(--a-text);border-right:1.5px solid var(--a-text);transform:rotate(45deg)}

/* Station 1: was der Gast auf der Website tut */
.a-web{flex:1;display:flex;flex-direction:column;padding:18px;border:1px solid var(--a-line);border-radius:6px;background:#fff}
.a-web__brand{margin:0;font-family:var(--a-font);font-size:14.5px;font-weight:600;line-height:1.3;color:var(--a-text)}
.a-web__title{margin:2px 0 14px;font-family:var(--a-font);font-size:13.5px;line-height:1.3;color:var(--a-text-3)}
.a-web__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:0 0 16px}
.a-web__f{min-width:0}
.a-web__f--wide{grid-column:1/-1}
.a-web__f span{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--a-text-3)}
.a-web__f b{display:block;padding:9px 11px;overflow:hidden;border:1px solid var(--a-line);border-radius:3px;font-size:14.5px;font-weight:500;line-height:1.3;color:var(--a-text);white-space:nowrap;text-overflow:ellipsis}
.a-web__btn{display:grid;place-items:center;height:44px;margin-top:auto;border-radius:3px;background:var(--acc,#141414);font-family:var(--a-font);font-size:14.5px;font-weight:600;color:var(--acc-on,#fff)}
.a-web__btn span{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;transition:opacity 280ms}
.a-web__btn svg{width:15px;height:15px}
.a-web__btn .b0{opacity:0}

/* Station 2: das System, in dem der Vorgang ankommt */
.a-app{flex:1;display:flex;flex-direction:column;min-width:0;padding:18px 20px 6px;border-radius:6px;background:#101218;color:rgba(255,255,255,.86)}
.a-app__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.a-app__title{margin:0;font-family:var(--a-font);font-size:16px;font-weight:600;line-height:1.3;color:#fff}
.a-app__sub{margin:0;font-family:var(--a-font);font-size:13px;line-height:1.3;color:rgba(255,255,255,.55);white-space:nowrap}
.a-app__metric{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;margin:14px 0 6px;padding:11px 14px;border:1px solid rgba(255,255,255,.1);border-radius:4px}
.a-app__metric>span{font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.a-app__metric .a-app__val{display:grid;font-size:15px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none;color:#fff;font-variant-numeric:tabular-nums;text-align:right}
.a-app__val b{grid-area:1/1;font-weight:600;color:#fff;transition:opacity 350ms}
.a-app__val .v0{opacity:0}
.a-app__bar{grid-column:1/-1;height:3px;overflow:hidden;border-radius:2px;background:rgba(255,255,255,.1)}
.a-app__bar i{display:block;height:100%;background:#8B5CF6;transform:scaleX(var(--to,1));transform-origin:left;transition:transform 700ms var(--a-ease)}
.a-app__list{position:relative;height:200px;overflow:hidden}
.a-app__track{transition:transform 650ms var(--a-ease)}
.a-row{position:relative;display:grid;grid-template-columns:86px minmax(0,1fr) minmax(0,1.3fr) 112px;align-items:center;gap:12px;height:50px;border-top:1px solid rgba(255,255,255,.08);font-family:var(--a-font);font-size:14px;line-height:1.2}
.a-row>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.a-row__t{color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
.a-row__n{font-weight:500;color:#fff}
.a-row__d{color:rgba(255,255,255,.62)}
.a-row--new::before{content:"";position:absolute;top:0;right:-20px;bottom:0;left:-20px;border-left:2px solid #8B5CF6;background:rgba(139,92,246,.1);opacity:0;transition:opacity 500ms}
.a-row>.a-chip,.a-row>.a-swap{justify-self:end}
.a-chip{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid;border-radius:11px;font-size:11.5px;font-weight:600;line-height:1;white-space:nowrap}
.a-chip--ok{color:#4ADE9A;border-color:rgba(74,222,154,.4)}
.a-chip--new{color:#B79CFF;border-color:rgba(183,156,255,.5)}
.a-chip--wait{color:#E5B657;border-color:rgba(229,182,87,.45)}
.a-chip--off{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.2)}
.a-swap{display:inline-grid;position:relative}
.a-swap>*{grid-area:1/1;justify-self:end;transition:opacity 350ms}
.a-swap .c0{opacity:0}

/* Station 3: was hinausgeht */
.a-out{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;transition:opacity 600ms,transform 600ms var(--a-ease)}
.a-mail{padding:18px;border:1px solid var(--a-line);border-radius:6px;background:#fff}
.a-mail__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--a-text-3)}
.a-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;background:rgba(14,143,94,.1);font-size:11.5px;font-weight:600;line-height:1;letter-spacing:0;text-transform:none;color:#0B7A50;white-space:nowrap}
.a-badge svg{width:12px;height:12px}
.a-mail__subj{margin:0 0 8px;font-family:var(--a-font);font-size:17px;font-weight:600;line-height:1.3;color:var(--a-text)}
.a-mail__body{margin:0;font-family:var(--a-font);font-size:14.5px;line-height:1.55;color:var(--a-text-2)}
.a-mail__foot{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--a-line);font-family:var(--a-font);font-size:13px;line-height:1.4;color:var(--a-text-3)}
.a-bon{position:relative;align-self:center;width:min(100%,240px);margin-bottom:8px;padding:18px 18px 20px;border:1px solid rgba(20,20,20,.16);border-bottom:0;background:#fff;box-shadow:0 18px 30px -22px rgba(16,19,24,.45);font-family:var(--a-font);color:#1E1E1E}
.a-bon::after{content:"";position:absolute;right:-1px;bottom:-8px;left:-1px;height:8px;
  background:linear-gradient(135deg,#fff 50%,transparent 50%) 0 0/12px 8px repeat-x,linear-gradient(225deg,#fff 50%,transparent 50%) 0 0/12px 8px repeat-x}
.a-bon__shop{margin:0;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:center;color:#1E1E1E}
.a-bon__big{margin:12px 0 2px;font-size:26px;font-weight:700;line-height:1.1;text-align:center;color:#1E1E1E;font-variant-numeric:tabular-nums}
.a-bon__no{margin:0 0 12px;padding-bottom:12px;border-bottom:1px dashed rgba(20,20,20,.3);font-size:13px;line-height:1.3;text-align:center;color:#555}
.a-bon__items{margin:0;padding:0;list-style:none}
.a-bon__items li{padding:3px 0;font-size:14.5px;line-height:1.35;color:#1E1E1E}
.a-bon__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px dashed rgba(20,20,20,.3);font-size:13px;line-height:1.3;color:#555}

.a-flow__note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:clamp(18px,2.4vw,28px) 0 0;padding-top:16px;border-top:1px solid var(--a-line);font-family:var(--a-font);font-size:15.5px;line-height:1.5;color:var(--a-text-2)}
.a-flow__note .a-status{color:var(--a-text)}
.a-flow__note strong{font-weight:600;color:var(--a-text)}
.a-flow__note small{margin-left:auto;font-size:13px;color:var(--a-text-3)}

/* Ablauf: Zustaende vor dem jeweiligen Schritt (nur mit JavaScript) */
.a-js .a-flow__panel:not(.is-s1) .a-web__btn .b0{opacity:1}
.a-js .a-flow__panel:not(.is-s1) .a-web__btn .b1{opacity:0}
.a-js .a-flow__panel:not(.is-s2) .a-conn--1 i{transform:scaleX(0)}
.a-js .a-flow__panel:not(.is-s3) .a-app__track{transform:translateY(-50px)}
.a-js .a-flow__panel:not(.is-s3) .a-app__val .v0{opacity:1}
.a-js .a-flow__panel:not(.is-s3) .a-app__val .v1{opacity:0}
.a-js .a-flow__panel:not(.is-s3) .a-app__bar i{transform:scaleX(var(--from,1))}
.a-js .a-flow__panel.is-s3:not(.is-s4) .a-row--new::before{opacity:1}
.a-js .a-flow__panel:not(.is-s4) .a-swap .c0{opacity:1}
.a-js .a-flow__panel:not(.is-s4) .a-swap .c1{opacity:0}
.a-js .a-flow__panel:not(.is-s5) .a-conn--2 i{transform:scaleX(0)}
.a-js .a-flow__panel:not(.is-s6) .a-out{opacity:.28;transform:translateY(8px)}

/* Vom einzelnen Ablauf zum Unternehmenssystem */
.a-intern{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(32px,6vw,120px);margin-top:clamp(72px,11vh,136px)}
.a-h3{margin:0;font-family:var(--a-font);font-size:clamp(24px,2.3vw,38px);font-weight:700;line-height:1.12;letter-spacing:-.006em;color:var(--a-text)}
.a-intern__text{margin:18px 0 0;max-width:52ch;font-family:var(--a-font);font-size:17px;line-height:1.6;color:var(--a-text-2)}
.a-ticks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 28px;margin:24px 0 30px;padding:0;list-style:none}
.a-ticks li{position:relative;padding-left:16px;font-family:var(--a-font);font-size:15.5px;line-height:1.45;color:var(--a-text-2)}
.a-ticks li::before{content:"";position:absolute;top:.62em;left:0;width:5px;height:5px;border-radius:50%;background:#9B9BA1}
.a-intern__vis{margin:0}
.a-intern__stack{position:relative;padding-bottom:9%}
.a-shot{overflow:hidden;border:1px solid var(--a-line);border-radius:6px;background:#0B0B0F;box-shadow:0 30px 70px -40px rgba(16,19,24,.4)}
.a-shot img{display:block;width:100%;height:auto}
.a-shot--main{width:88%}
.a-shot--over{position:absolute;right:0;bottom:0;width:56%}
.a-intern__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;margin:22px 0 0;padding-top:14px;border-top:1px solid var(--a-line);
  font-family:var(--a-font);font-size:13px;line-height:1.4;color:var(--a-text-3)}
.a-intern__cap b{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text)}

@media (max-width:1100px){
  .a-row{grid-template-columns:78px minmax(0,1fr) 112px}
  .a-row__d{display:none}
}
@media (max-width:900px){
  .a-flow__tab span{display:none}
  .a-flow__tab{padding:15px 12px;align-items:center;text-align:center}
  .a-flow__grid{grid-template-columns:minmax(0,1fr)}
  .a-conn{justify-self:center;width:1px;height:30px;margin:12px 0 14px}
  .a-conn i{top:0;right:auto;bottom:0;left:-.5px;width:2px;height:auto;transform-origin:top}
  .a-conn::after{top:auto;right:-3.5px;bottom:0;transform:rotate(135deg)}
  .a-js .a-flow__panel:not(.is-s2) .a-conn--1 i,.a-js .a-flow__panel:not(.is-s5) .a-conn--2 i{transform:scaleY(0)}
  .a-row{grid-template-columns:86px minmax(0,1fr) minmax(0,1.3fr) 112px}
  .a-row__d{display:block}
  .a-flow__note small{margin-left:0}
  .a-intern{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:600px){
  .a-flow__tab b{font-size:14.5px}
  .a-row{grid-template-columns:auto minmax(0,1fr) 106px;font-size:13.5px}
  .a-row__d{display:none}
  .a-app{padding:16px 14px 6px}
  .a-row--new::before{right:-14px;left:-14px}
  .a-ticks{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .a-flow__tab::after,.a-conn i,.a-app__track,.a-app__bar i,.a-app__val b,.a-swap>*,.a-out,.a-web__btn span,.a-row--new::before{transition:none}
}

/* ==========================================================================
   Dunkle Sektionen: gemeinsame Farben fuer Kopfzeilen
   ========================================================================== */
.a-dark{background:var(--a-ink);color:var(--a-on)}
.a-dark .a-eyebrow{color:var(--a-on-3)}
.a-dark .a-eyebrow i{background:rgba(255,255,255,.4)}
.a-dark .a-h2{color:#fff}
.a-dark .a-h2 span{color:var(--a-on-3)}
.a-dark .a-head__lead{color:var(--a-on-2)}
.a-head--wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.a-h2--xl{font-size:clamp(31px,3.5vw,58px);line-height:1.06}

/* ==========================================================================
   Sektion 4: Kuenstliche Intelligenz
   Eine Anweisung laeuft durch fuenf Ebenen und haelt vor der kritischen
   Aktion an. Der Besucher bestaetigt oder lehnt ab. Endzustand ist der
   Grundzustand, der Ablauf wird nur mit JavaScript abgespielt.
   ========================================================================== */
.a-ki{padding:clamp(72px,11vh,136px) var(--a-gutter)}
.a-trace{border:1px solid var(--a-on-line);border-radius:8px;background:rgba(255,255,255,.025)}
.a-trace__ask{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px 24px;padding:20px clamp(18px,2.4vw,36px);border-bottom:1px solid var(--a-on-line)}
.a-trace__asklabel{font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;color:var(--a-on-3)}
.a-trace__ask p{margin:0;font-family:var(--a-font);font-size:clamp(17px,1.5vw,22px);font-weight:500;line-height:1.35;color:#fff}
.a-trace__replay{display:none;align-items:center;gap:8px;padding:0;border:0;background:none;font-family:var(--a-font);font-size:14px;font-weight:500;color:var(--a-on-3);cursor:pointer;transition:color 200ms}
.a-trace__replay:hover{color:#fff}
.a-trace__replay svg{width:14px;height:14px}
.a-js .a-trace.is-done .a-trace__replay,.a-js .a-trace.is-no .a-trace__replay{display:inline-flex}

.a-trace__rows{margin:0;padding:4px clamp(18px,2.4vw,36px);list-style:none}
.a-trow{position:relative;display:grid;grid-template-columns:30px minmax(0,2.3fr) minmax(0,4fr) minmax(0,4.3fr);align-items:start;gap:0 clamp(16px,2.2vw,36px);padding:24px 0}
.a-trow+.a-trow::before{content:"";position:absolute;top:0;right:0;left:calc(30px + clamp(16px,2.2vw,36px));height:1px;background:var(--a-on-line)}
.a-trow__node{position:relative;align-self:stretch}
.a-trow__node b{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border:1px solid #fff;border-radius:50%;background:#fff;
  font-family:var(--a-font);font-size:13px;font-weight:600;line-height:1;color:var(--a-ink);font-variant-numeric:tabular-nums;transition:background-color 400ms,border-color 400ms,color 400ms}
.a-trow__seg{position:absolute;top:30px;bottom:-48px;left:14px;width:2px;background:rgba(255,255,255,.14)}
.a-trow__seg i{position:absolute;inset:0;background:#fff;transform-origin:top;transition:transform 600ms var(--a-ease)}
.a-trow__name{transition:opacity 500ms}
.a-trow__title{margin:3px 0 4px;font-family:var(--a-font);font-size:clamp(19px,1.6vw,24px);font-weight:600;line-height:1.2;letter-spacing:-.004em;color:#fff}
.a-trow__role{margin:0;font-family:var(--a-font);font-size:13.5px;line-height:1.35;color:var(--a-on-3)}
.a-trow__text{margin:3px 0 0;max-width:46ch;font-family:var(--a-font);font-size:16px;line-height:1.55;color:var(--a-on-2);transition:opacity 500ms}
.a-trow__ex{padding:12px 14px;border:1px solid var(--a-on-line);border-radius:4px;background:rgba(255,255,255,.035);transition:opacity 500ms,transform 500ms var(--a-ease)}
.a-trow__tag{display:block;margin:0 0 5px;font-family:var(--a-font);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#B79CFF}
.a-trow__ex p{margin:0;font-family:var(--a-font);font-size:15px;line-height:1.45;color:#fff}

/* Ebene 5: die Entscheidung liegt beim Menschen */
.a-ctrl__btns{display:none;flex-wrap:wrap;gap:10px;margin-top:12px}
.a-js .a-ctrl__btns{display:flex}
.a-sbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:1px solid transparent;border-radius:3px;font-family:var(--a-font);font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background-color 200ms,border-color 200ms,opacity 300ms}
.a-sbtn svg{width:14px;height:14px}
.a-sbtn--ok{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.a-sbtn--ok:hover{background:var(--a-accent-2);border-color:var(--a-accent-2)}
.a-sbtn--no{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.a-sbtn--no:hover{border-color:#fff}
.a-sbtn:disabled{opacity:.4;cursor:default}
.a-ctrl__done,.a-ctrl__no{display:none}
.a-trace.is-done .a-ctrl__q,.a-trace.is-no .a-ctrl__q{display:none}
.a-trace.is-done .a-ctrl__done,.a-trace.is-no .a-ctrl__no{display:block}
.a-trace.is-done .a-ctrl__done .a-trow__tag{color:#4ADE9A}
.a-trace.is-no .a-ctrl__no .a-trow__tag{color:var(--a-on-3)}
.a-trace.is-done .a-trow[data-k="5"] .a-trow__node b{background:#2BB583;border-color:#2BB583;color:#fff}
.a-trace.is-no .a-trow[data-k="5"] .a-trow__node b{background:transparent;border-color:rgba(255,255,255,.4);color:var(--a-on-3)}
.a-trace__note{margin:0;padding:14px clamp(18px,2.4vw,36px);border-top:1px solid var(--a-on-line);font-family:var(--a-font);font-size:13px;line-height:1.4;color:var(--a-on-3)}

/* Zustaende vor dem jeweiligen Schritt (nur mit JavaScript) */
.a-js .a-trace:not(.is-k1) .a-trow[data-k="1"] .a-trow__node b,
.a-js .a-trace:not(.is-k2) .a-trow[data-k="2"] .a-trow__node b,
.a-js .a-trace:not(.is-k3) .a-trow[data-k="3"] .a-trow__node b,
.a-js .a-trace:not(.is-k4) .a-trow[data-k="4"] .a-trow__node b,
.a-js .a-trace:not(.is-k5) .a-trow[data-k="5"] .a-trow__node b{background:var(--a-ink);border-color:rgba(255,255,255,.28);color:var(--a-on-3)}
.a-js .a-trace:not(.is-k1) .a-trow[data-k="1"] .a-trow__name,.a-js .a-trace:not(.is-k1) .a-trow[data-k="1"] .a-trow__text,
.a-js .a-trace:not(.is-k2) .a-trow[data-k="2"] .a-trow__name,.a-js .a-trace:not(.is-k2) .a-trow[data-k="2"] .a-trow__text,
.a-js .a-trace:not(.is-k3) .a-trow[data-k="3"] .a-trow__name,.a-js .a-trace:not(.is-k3) .a-trow[data-k="3"] .a-trow__text,
.a-js .a-trace:not(.is-k4) .a-trow[data-k="4"] .a-trow__name,.a-js .a-trace:not(.is-k4) .a-trow[data-k="4"] .a-trow__text,
.a-js .a-trace:not(.is-k5) .a-trow[data-k="5"] .a-trow__name,.a-js .a-trace:not(.is-k5) .a-trow[data-k="5"] .a-trow__text{opacity:.42}
.a-js .a-trace:not(.is-k1) .a-trow[data-k="1"] .a-trow__ex,
.a-js .a-trace:not(.is-k2) .a-trow[data-k="2"] .a-trow__ex,
.a-js .a-trace:not(.is-k3) .a-trow[data-k="3"] .a-trow__ex,
.a-js .a-trace:not(.is-k4) .a-trow[data-k="4"] .a-trow__ex,
.a-js .a-trace:not(.is-k5) .a-trow[data-k="5"] .a-trow__ex{opacity:0;transform:translateY(8px)}
.a-js .a-trace:not(.is-k2) .a-trow[data-k="1"] .a-trow__seg i,
.a-js .a-trace:not(.is-k3) .a-trow[data-k="2"] .a-trow__seg i,
.a-js .a-trace:not(.is-k4) .a-trow[data-k="3"] .a-trow__seg i,
.a-js .a-trace:not(.is-k5) .a-trow[data-k="4"] .a-trow__seg i{transform:scaleY(0)}
/* Warten auf die Bestaetigung: der Knoten atmet */
.a-js .a-trace.is-k5:not(.is-done):not(.is-no) .a-trow[data-k="5"] .a-trow__node b{background:var(--a-accent);border-color:var(--a-accent);color:#fff}
.a-js .a-trace.is-k5:not(.is-done):not(.is-no) .a-trow[data-k="5"] .a-trow__node::after{content:"";position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;border:1px solid #A78BFA;animation:a-wait 1.8s ease-out infinite}
@keyframes a-wait{from{transform:scale(1);opacity:.9}to{transform:scale(2);opacity:0}}

/* Was AIT in diesem Bereich baut */
.a-ki__build{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(20px,2.6vw,48px);margin:clamp(56px,8vh,96px) 0 0;padding:0;list-style:none}
.a-ki__build li{padding-top:20px;border-top:1px solid var(--a-on-line)}
.a-ki__build h3{margin:0 0 8px;font-family:var(--a-font);font-size:18px;font-weight:600;line-height:1.25;color:#fff}
.a-ki__build p{margin:0;font-family:var(--a-font);font-size:15.5px;line-height:1.55;color:var(--a-on-2)}
.a-ki__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(56px,8vh,96px);padding-top:32px;border-top:1px solid var(--a-on-line)}
.a-ki__claim{margin:0;font-family:var(--a-font);font-size:clamp(23px,2.3vw,36px);font-weight:700;line-height:1.14;letter-spacing:-.006em;color:#fff}
.a-ki__claim span{display:block;font-weight:300;color:var(--a-on-3)}
.a-ki__btns{display:flex;flex-wrap:wrap;gap:14px}

@media (max-width:1100px){
  .a-trow{grid-template-columns:30px minmax(0,1fr) minmax(0,1.3fr)}
  .a-trow__node{grid-row:1/span 2}
  .a-trow__ex{grid-column:2/-1;margin-top:14px}
  .a-ki__build{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .a-head--wide{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .a-trace__ask{grid-template-columns:minmax(0,1fr)}
  .a-trow{grid-template-columns:30px minmax(0,1fr);gap:0 16px}
  .a-trow+.a-trow::before{left:46px}
  .a-trow__node{grid-row:1/span 3}
  .a-trow__name,.a-trow__text,.a-trow__ex{grid-column:2}
  .a-trow__text{margin-top:8px}
  .a-ki__build{grid-template-columns:minmax(0,1fr);gap:24px}
  .a-ki__btns,.a-ki__btns .a-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .a-trow__node b,.a-trow__seg i,.a-trow__name,.a-trow__text,.a-trow__ex{transition:none}
  .a-js .a-trace.is-k5:not(.is-done):not(.is-no) .a-trow[data-k="5"] .a-trow__node::after{animation:none;opacity:0}
}

/* ==========================================================================
   Sektion 5: Arbeitsweise
   Vier Phasen an einer Linie. Die Linie zeichnet sich einmal, wenn die
   Sektion ins Bild kommt. Nach der vierten Phase laeuft sie offen weiter:
   der Betrieb endet nicht mit dem Projekt.
   ========================================================================== */
.a-way{overflow:hidden}
.a-phases-wrap{position:relative;--pg:clamp(20px,2.6vw,48px)}
.a-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--pg);margin:0;padding:0;list-style:none}
.a-phases__rail{position:absolute;top:14px;right:calc((100% - 100vw)/2);left:0;height:2px;background:rgba(20,20,20,.12);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 180px),transparent)}
.a-phases__rail i{position:absolute;inset:0;background:var(--a-text);transform-origin:left;transition:transform 1800ms linear}
/* Laufender Betrieb: ein Lichtpunkt wandert ueber das offene Ende */
.a-phases__run{position:absolute;top:14px;right:calc((100% - 100vw)/2);left:calc(75% + var(--pg)*.75 + 30px);height:2px;overflow:hidden;opacity:0;transition:opacity 600ms 2000ms}
.a-phases__run i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(167,139,250,0) 40%,#A78BFA 50%,rgba(167,139,250,0) 60%);animation:a-run 3.4s linear infinite}
@keyframes a-run{from{transform:translateX(-62%)}to{transform:translateX(62%)}}

.a-phase{position:relative;min-width:0;padding-top:54px}
.a-phase__node{position:absolute;top:0;left:0;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--a-text);border-radius:50%;background:var(--a-text);
  font-family:var(--a-font);font-size:13px;font-weight:600;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
  transition:background-color 400ms var(--d,0ms),border-color 400ms var(--d,0ms),color 400ms var(--d,0ms)}
.a-phase__title,.a-phase__text,.a-phase__meta{transition:opacity 700ms var(--d,0ms),transform 700ms var(--a-ease) var(--d,0ms)}
.a-phase__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-family:var(--a-font);font-size:clamp(22px,1.9vw,29px);font-weight:700;line-height:1.15;letter-spacing:-.006em;color:var(--a-text)}
.a-phase__title .a-status{color:var(--a-text-2)}
.a-phase__text{margin:12px 0 0;max-width:36ch;font-family:var(--a-font);font-size:16px;line-height:1.6;color:var(--a-text-2)}
.a-phase__meta{display:grid;align-content:start;gap:12px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--a-line)}
.a-phase__meta dt{margin:0 0 3px;font-family:var(--a-font);font-size:11px;font-weight:600;line-height:1.2;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-3)}
.a-phase__meta dd{margin:0;font-family:var(--a-font);font-size:15px;line-height:1.45;color:var(--a-text)}

/* Zustand vor dem Erreichen (nur mit JavaScript) */
.a-js .a-phases-wrap:not(.is-in) .a-phases__rail i{transform:scaleX(0)}
.a-js .a-phases-wrap:not(.is-in) .a-phase__node{border-color:rgba(20,20,20,.22);background:#fff;color:var(--a-text-3)}
.a-js .a-phases-wrap:not(.is-in) .a-phase__title,.a-js .a-phases-wrap:not(.is-in) .a-phase__text,.a-js .a-phases-wrap:not(.is-in) .a-phase__meta{opacity:0;transform:translateY(12px)}
.a-phases-wrap.is-in .a-phases__run{opacity:1}
/* Gleiche Zeilenhoehen ueber alle vier Phasen, damit Ergebnis und Entscheid auf einer Linie stehen */
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .a-phases{grid-template-rows:auto auto auto}
    .a-phase{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  }
}

@media (max-width:900px){
  .a-phases{grid-template-columns:minmax(0,1fr);gap:40px 0}
  .a-phases__rail{top:0;right:auto;bottom:-56px;left:14px;width:2px;height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 70px),transparent)}
  .a-phases__rail i{transform-origin:top}
  .a-js .a-phases-wrap:not(.is-in) .a-phases__rail i{transform:scaleY(0)}
  .a-phases__run{display:none}
  .a-phase{padding:2px 0 0 52px}
  .a-phase__text{max-width:none}
  .a-way{padding-bottom:clamp(96px,14vh,140px)}
}
@media (prefers-reduced-motion:reduce){
  .a-phases__rail i,.a-phase__node,.a-phase__title,.a-phase__text,.a-phase__meta{transition:none}
  .a-phases__run{display:none}
}

/* ==========================================================================
   Sektion 6: Betrieb und Sicherheit
   Links sechs Zusagen, rechts die Tafel der Systeme mit Ortszeit in Triesen.
   ========================================================================== */
.a-run{border-top:1px solid var(--a-line)}
.a-ops-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:clamp(32px,5vw,96px)}
.a-keep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,56px);margin:0;padding:0;list-style:none}
.a-keep li{padding:20px 0 28px;border-top:1px solid var(--a-line)}
.a-keep h3{margin:0 0 8px;font-family:var(--a-font);font-size:17.5px;font-weight:600;line-height:1.3;color:var(--a-text)}
.a-keep p{margin:0;font-family:var(--a-font);font-size:15.5px;line-height:1.6;color:var(--a-text-2)}

.a-ops{padding:20px 22px 16px;border-radius:8px;background:#101218;color:rgba(255,255,255,.86)}
.a-ops__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1)}
.a-ops__title{margin:0;font-family:var(--a-font);font-size:12px;font-weight:600;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.a-ops__clock{font-family:var(--a-font);font-size:13px;line-height:1.3;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
.a-ops__list{margin:0;padding:0;list-style:none}
.a-ops__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.08);
  transition:opacity 600ms var(--d,0ms),transform 600ms var(--a-ease) var(--d,0ms)}
.a-ops__name{overflow:hidden;font-family:var(--a-font);font-size:15.5px;font-weight:600;line-height:1.3;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.a-ops__what{grid-column:1;font-family:var(--a-font);font-size:13.5px;line-height:1.35;color:rgba(255,255,255,.58)}
.a-ops__row .a-status{grid-column:2;grid-row:1/span 2;color:rgba(255,255,255,.86)}
.a-ops__row .a-status:not(.a-status--soon)::before{animation:a-breathe 2.6s ease-in-out infinite}
@keyframes a-breathe{0%,100%{opacity:1}50%{opacity:.45}}
.a-ops__foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;font-family:var(--a-font);font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.5)}
.a-js .a-ops:not(.is-in) .a-ops__row{opacity:0;transform:translateY(8px)}

@media (max-width:1100px){
  .a-ops-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:600px){
  .a-keep{grid-template-columns:minmax(0,1fr)}
  .a-ops{padding:18px 16px 14px}
}
@media (prefers-reduced-motion:reduce){
  .a-ops__row{transition:none}
  .a-ops__row .a-status::before{animation:none}
}

/* ==========================================================================
   Sektion 7: Unternehmen
   Zwei Gruender, gleich behandelt: Portraet, Funktion, Verantwortung, direkter
   Kontakt. Darunter das Versprechen, die Grundsaetze und die Eckdaten.
   ========================================================================== */
.a-co{border-top:1px solid var(--a-line)}
.a-lead{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,72px)}
.a-founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"img id" "img more";grid-template-rows:auto 1fr;
  gap:0 clamp(20px,2.4vw,40px);padding-top:28px;border-top:1px solid var(--a-text)}
.a-founder__img{grid-area:img;position:relative;overflow:hidden;aspect-ratio:4/5;margin:0;border-radius:2px;background:#15171C}
.a-founder__img img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity 900ms var(--d,0ms),transform 1300ms var(--a-ease) var(--d,0ms)}
.a-founder__id{grid-area:id}
.a-founder__label{margin:0;font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-3)}
.a-founder__name{margin:10px 0 8px;font-family:var(--a-font);font-size:clamp(25px,2.3vw,36px);font-weight:700;line-height:1.08;letter-spacing:-.008em;color:var(--a-text)}
.a-founder__role{margin:0;font-family:var(--a-font);font-size:13.5px;font-weight:600;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--a-text-2)}
.a-founder__more{grid-area:more;padding-top:20px}
.a-founder__text{margin:0 0 20px;max-width:40ch;font-family:var(--a-font);font-size:16.5px;line-height:1.6;color:var(--a-text-2)}
.a-founder__mail{font-family:var(--a-font);font-size:15px;font-weight:600;line-height:1.3;color:var(--a-text);border-bottom:1px solid rgba(20,20,20,.35);padding-bottom:3px;transition:border-color 200ms}
.a-founder__mail:hover{border-color:var(--a-text)}
.a-js .a-lead:not(.is-in) .a-founder__img img{opacity:0;transform:scale(1.06)}

.a-co__claim{margin:clamp(52px,8vh,96px) 0 0;font-family:var(--a-font);font-size:clamp(25px,2.7vw,44px);font-weight:700;line-height:1.12;letter-spacing:-.008em;color:var(--a-text)}
.a-co__claim span{display:block;font-weight:300;color:var(--a-text-3)}

.a-co__sub{display:flex;align-items:center;gap:16px;margin:clamp(52px,8vh,96px) 0 22px;font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-3)}
.a-co__sub i{display:block;width:34px;height:1px;background:#9B9BA1}
.a-values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,48px);margin:0;padding:0;list-style:none}
.a-values li{padding:20px 0 4px;border-top:1px solid var(--a-line)}
.a-values h3{margin:0 0 8px;font-family:var(--a-font);font-size:17.5px;font-weight:600;line-height:1.3;color:var(--a-text)}
.a-values p{margin:0;font-family:var(--a-font);font-size:15.5px;line-height:1.6;color:var(--a-text-2)}

.a-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px clamp(20px,2.6vw,48px);margin:clamp(48px,7vh,80px) 0 0;padding:24px 0 0;border-top:1px solid var(--a-text)}
.a-facts dt{margin:0 0 6px;font-family:var(--a-font);font-size:11.5px;font-weight:600;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;color:var(--a-text-3)}
.a-facts dd{margin:0;font-family:var(--a-font);font-size:16.5px;font-weight:500;line-height:1.4;color:var(--a-text)}
.a-co__more{margin-top:32px}

@media (max-width:1100px){
  .a-lead{grid-template-columns:minmax(0,1fr);gap:44px}
  .a-values{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(20px,2.6vw,48px)}
  .a-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .a-founder{grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-areas:"img id" "more more";gap:0 18px;align-items:end}
  .a-founder__more{padding-top:18px}
  .a-founder__text{max-width:none}
  .a-values,.a-facts{grid-template-columns:minmax(0,1fr)}
  .a-facts{gap:18px}
}
@media (prefers-reduced-motion:reduce){
  .a-founder__img img{transition:none}
}