/* «Wie wir arbeiten» — Variante A: geordneter Kopf, Tage als Zeitachse.
   Farben: Weiss als Textfarbe, Hellblau als Leitfarbe, Gelb als Akzent. */
.wa{max-width:1500px;margin:0 auto;color:var(--ink)}

/* Kopf: Titel, darunter die Kernaussage, darunter der beschreibende Text. */


.wa h2{font:600 clamp(30px,3.4vw,46px)/1.12 var(--sans);margin:0 0 24px;letter-spacing:-.03em;max-width:16ch;text-wrap:balance}
.wa-standfirst{margin:0 0 30px;max-width:44ch;font:500 clamp(19px,1.5vw,25px)/1.46 var(--sans);letter-spacing:-.015em;color:#f2f1ed;text-wrap:balance}


.wa-note{margin:26px 0 0 !important;padding-top:16px;border-top:1px solid #26262a;font-size:15px;line-height:1.65;color:#87868c}
.wa-note a{color:#8fbeff}

/* Zeitachse */
.wa-rail{display:grid;border-top:1px solid #26262a}
.wa-step{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,400px);
 gap:clamp(26px,3vw,56px);align-items:start;padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid #26262a}
.wa-dot{position:relative;align-self:stretch}
.wa-dot span{display:grid;place-items:center;width:40px;height:40px;border:1px solid #8fbeff;border-radius:50%;
 font:12px var(--mono);color:#8fbeff}

.wa-step:last-child{border-bottom:0}
.wa-num{font:11px var(--mono);letter-spacing:.14em;color:#87868c;display:block;margin-bottom:10px}
.wa-step h3{font:600 21px/1.3 var(--sans);margin:0 0 12px;letter-spacing:-.01em;text-wrap:balance;color:#f2f1ed}
.wa-teaser{font-size:16.5px;line-height:1.7;color:#d8d7d3;margin:0;max-width:58ch}
.wa-fig{height:120px;margin:0;align-self:center}
.wa-fig svg{width:100%;height:100%;overflow:visible;display:block}

details.wa-more{margin-top:18px;border-top:1px solid #26262a;padding-top:13px;max-width:58ch}
details.wa-more summary{cursor:pointer;list-style:none;font:11px var(--mono);letter-spacing:.1em;color:#8fbeff;
 display:flex;justify-content:space-between;align-items:center;gap:16px}
details.wa-more summary::-webkit-details-marker{display:none}
details.wa-more summary::after{content:'+';font-size:16px;line-height:1}
details.wa-more[open] summary::after{content:'\2212'}
details.wa-more .wa-body{padding-top:16px}
details.wa-more p{font-size:15px;line-height:1.7;color:#b8b7b4;margin:0}
details.wa-more p + p{margin-top:13px}
details.wa-more .wa-cap{font:11px var(--mono);letter-spacing:.14em;color:#6f6e75;display:block;margin:20px 0 10px}
details.wa-more ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
details.wa-more li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:#d8d7d3}
details.wa-more li::before{content:'';flex:0 0 12px;height:1px;background:#ffcc54;margin-top:11px}

.wa-foot{margin-top:clamp(34px,3.4vw,52px);background:#0e0e10;border:1px solid #26262a;padding:28px 34px;
 display:flex;flex-wrap:wrap;gap:18px 46px;align-items:baseline;justify-content:space-between}
.wa-foot p{font-size:16px;line-height:1.75;color:#b8b7b4;margin:0;flex:1 1 600px}
.wa-foot a{color:#8fbeff;white-space:nowrap;font-size:15px}

/* Zeichenstil der Grafiken: Linien grau, Leitfarbe hellblau, Akzent gelb */
.wa-fig .ln{fill:none;stroke:#4a4a52;stroke-width:1.4}
.wa-fig .ac{fill:none;stroke:#8fbeff;stroke-width:1.6}
.wa-fig .bx{fill:none;stroke:#3a3a42;stroke-width:1.2;transition:stroke .35s ease}
.wa-fig .fl{fill:#8fbeff}
.wa-fig .fa{fill:#ffcc54}
.wa-step:hover .wa-fig .bx{stroke:#4d4d57}
.fig-scan{opacity:0}
.fig-flag,.fig-claim{opacity:.55;transition:opacity .3s ease}
.fig-claim{stroke:#ffcc54;stroke-width:1.4}
.wa-step:hover .fig-flag,.wa-step:hover .fig-claim{opacity:1}
.fig-feed{stroke-dasharray:90;stroke-dashoffset:0}
.fig-pick{transition:stroke .3s ease}
.wa-step:hover .fig-pick{stroke:#b4d4ff}
.fig-goal{opacity:.5;transition:opacity .3s ease}
.wa-step:hover .fig-goal{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .wa-step:hover .fig-scan{animation:fig-scan 1.5s ease-in-out}
  .wa-step:hover .fig-feed{animation:fig-feed 1.2s ease-out}
  .wa-step:hover .fig-dot{animation:fig-climb 1.9s ease-in-out}
  .wa-step:hover .fig-goal{animation:fig-goal 1.9s ease-out}
}
@keyframes fig-scan{0%{opacity:0;transform:translateX(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(178px)}}
@keyframes fig-feed{from{stroke-dashoffset:90}to{stroke-dashoffset:0}}
@keyframes fig-climb{0%{transform:translate(0,0)}14%{transform:translate(74px,0)}26%{transform:translate(74px,-32px)}
 40%{transform:translate(152px,-32px)}52%{transform:translate(152px,-64px)}68%{transform:translate(238px,-64px)}
 80%{transform:translate(238px,-88px)}100%{transform:translate(284px,-88px)}}
@keyframes fig-goal{0%,70%{opacity:.5}85%,100%{opacity:1}}

@media(max-width:1000px){
  .wa-step{grid-template-columns:52px minmax(0,1fr);gap:20px 22px}
  .wa-fig{grid-column:2;margin-top:16px;align-self:start}
  .wa-dot::after{display:none}
}
@media(max-width:700px){
  .wa-step{grid-template-columns:minmax(0,1fr)}
  .wa-dot{display:none}
  .wa-fig{grid-column:1}
  .wa-foot{padding:24px}
}

/* Die folgenden Sektionen auf dieselbe linke Kante wie «Wie wir arbeiten».
   .concept setzt 5% seitlich (ab 850px abwärts 24px) — hier gleichgezogen. */
.publication-feature,
#was-sie-mitnehmen.work-takeaways{
  padding-inline:5% !important;
  box-sizing:border-box;
}
#was-sie-mitnehmen .blue-chapters{padding-inline:0}
@media(max-width:850px){
  .publication-feature,
  #was-sie-mitnehmen.work-takeaways{padding-inline:24px !important}
}

/* Bild und Terminspalte schliessen unten bündig ab */
.sandbox-module.sandbox-split .intro>.wrap{display:flex;flex-direction:column;flex:1 1 auto;height:100%}
.sandbox-module.sandbox-split .intro .photo-overlay{flex:1 1 auto;min-height:0}
.sandbox-module.sandbox-split .intro .photo-overlay img{width:100%;height:100%;object-fit:cover;display:block}

/* Vorspann etwas grösser, damit der Einstieg trägt */


/* Handbuch-Vorschau: die Seite füllt den Rahmen randlos aus */
.publication-feature .publication-scroll{height:auto !important;max-height:none !important;aspect-ratio:1062/1500;width:100%;margin-inline:0;scroll-snap-type:y mandatory;padding:0 !important;scrollbar-width:none}
.publication-feature .publication-scroll::-webkit-scrollbar{display:none}
.publication-feature .publication-scroll figure{height:100%;margin:0;padding:0;position:relative;display:block;scroll-snap-align:start}
.publication-feature .publication-scroll img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0}
.publication-feature .publication-scroll figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 14px;text-align:center;background:linear-gradient(0deg,rgba(8,10,9,.92),rgba(8,10,9,0))}

/* Titel auf dem Sandbox-Bild — Entwurf 01 «Prompt» */
.training-sandbox-photo{position:relative}
.training-sandbox-photo .sandbox-wordmark{position:absolute;bottom:clamp(22px,2.6vw,36px);left:clamp(20px,2.5vw,34px);z-index:3;
 display:flex;align-items:center;gap:.5em;font:500 clamp(19px,1.95vw,30px)/1 'IBM Plex Mono',monospace;
 letter-spacing:.2em;color:#f2f1ed;text-shadow:0 2px 22px rgba(0,0,0,.65);font-family:'IBM Plex Mono',monospace !important}
.training-sandbox-photo .sandbox-wordmark s{text-decoration:none;color:#ed675a}
.training-sandbox-photo .sandbox-wordmark i{width:.52em;height:1.05em;background:#ed675a;animation:sb-blink 1.05s steps(1) infinite}
@keyframes sb-blink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.training-sandbox-photo .sandbox-wordmark i{animation:none}}



/* Kopf des Abschnitts: Titel links, Kernaussage rechts, darunter zwei gleich hohe Textspalten */
.wa-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(44px,5vw,92px);align-items:start;margin:0 0 clamp(34px,3.4vw,52px)}
.wa-top h2{margin:0;max-width:14ch}
.wa-standfirst{margin:4px 0 0;max-width:34ch;font:500 clamp(19px,1.5vw,25px)/1.46 var(--sans);letter-spacing:-.015em;color:#f2f1ed;text-wrap:balance}
.wa-note{border-top:1px solid #26262a;margin:clamp(22px,2.4vw,32px) 0 0;padding-top:16px;max-width:none}
@media(max-width:900px){.wa-top{grid-template-columns:minmax(0,1fr);row-gap:20px}.wa-top h2,.wa-standfirst{max-width:none}.wa-lead-body{columns:1}}

/* Kopf liegt auf demselben Raster wie die Tage */
.wa-head{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,400px);
 gap:clamp(26px,3vw,56px);align-items:start;margin-bottom:clamp(36px,3.6vw,56px)}
.wa-head-rail{height:1px}
.wa-head-main .eyebrow{margin-bottom:20px}
.wa-head h2{margin:0 0 22px}
.wa-standfirst{margin:0;max-width:42ch}
.wa-frame{margin:0;align-self:end;font-size:16px;line-height:1.75;color:#b8b7b4}

/* Zielzeile je Tag */
.wa-goal{margin:12px 0 0;max-width:58ch;font-size:15.5px;line-height:1.6;color:#f2f1ed;
 padding-left:15px;border-left:2px solid #ffcc54}
.wa-note-foot{flex:1 1 100%;font-size:15px;line-height:1.65;color:#87868c;margin:0 0 4px}
.wa-note-foot a{color:#8fbeff}
@media(max-width:1000px){.wa-head{grid-template-columns:minmax(0,1fr);gap:22px}.wa-head-rail{display:none}}

/* Klappinhalt bleibt geschlossen, bis geklickt wird */
details.wa-more:not([open]) .wa-body{display:none !important}
details.wa-more[open] .wa-body{display:block}
