/* Praxis-Takt: Ablauf-Fassung 3 (bausteine-ablauf.py, takt_ablauf).
   Torben, 22.09.2026: "eher einen animierten Prozess". Jede Karte hat oben
   eine kleine Zeichnung, die Reihe laeuft in Dauerschleife von 1 bis 4: die
   Karte leuchtet auf, die Ziffer schlaegt eine Welle, die Zeichnung spielt,
   ein Lichtpunkt wandert zur naechsten Karte. Ruhezustand (ohne JavaScript,
   ausserhalb des Bildes, "Bewegung reduzieren") ist das fertige Bild.
   Bild, Kopf und Text stehen per subgrid auf gemeinsamen Zeilen. */
.takt{--fertig:var(--akzent);--phase:calc(var(--dur-takt) * 2.4);--zyklus:calc(var(--phase) * 4);--licht:color-mix(in oklab,var(--akzent) 70%,#fff);--licht-schein:color-mix(in oklab,var(--akzent) 22%,transparent);row-gap:0}
.takt-schritt{--start:calc(var(--nr) * var(--phase));grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;padding:20px 22px 24px;border-color:var(--linie-kraeftig);position:relative}
.takt-szene{height:112px;margin-bottom:16px;border-radius:10px;background:var(--akzent-blass);display:flex;align-items:center;justify-content:center}
.takt-szene svg{width:160px;height:104px;overflow:visible}
.takt .karte-kopf{position:relative;margin-bottom:10px;align-items:flex-start}
.takt .karte-kopf h3{min-height:0;padding-top:9px}
.takt-schritt p a{color:var(--akzent-dunkel);text-decoration:underline;text-underline-offset:3px}
.takt .schritt-zahl::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--licht);opacity:0;pointer-events:none}
.takt .fertig-haken{opacity:1;transform:none}
.takt.laeuft .fertig-haken{animation:none}
/* Verbindung in der Luecke zur naechsten Karte, auf Hoehe der Ziffer */
.takt .karte-kopf::before,.takt .karte-kopf::after{content:"";position:absolute;top:22px;left:calc(100% + 23px)}
.takt .karte-kopf::before{width:20px;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--akzent-hell)}
.takt .karte-kopf::after{width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--licht);box-shadow:0 0 0 4px var(--licht-schein);opacity:0}
.takt-schritt:last-child .karte-kopf::before,.takt-schritt:last-child .karte-kopf::after{display:none}
/* Zeichnungen */
.sz-flaeche{fill:#fff;stroke:var(--akzent-hell);stroke-width:2.5}
.sz-strich{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sz-akzent{stroke:var(--akzent)}
.sz-leise{stroke:color-mix(in oklab,var(--akzent) 30%,#fff)}
.sz-dunkel{stroke:var(--tinte)}
.sz-weiss{stroke:#fff}
.sz-leise-fuell{fill:var(--akzent-hell)}
.sz-tag{fill:var(--akzent);transform-box:fill-box;transform-origin:center}
.sz-mitte{fill:var(--tinte)}
.sz-feld{fill:none;stroke:var(--licht);stroke-width:34;stroke-dasharray:100;stroke-dashoffset:var(--bis);opacity:.5}
.sz-zeiger{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(var(--grad))}
.sz-schreiben,.sz-haken{stroke-dasharray:100;stroke-dashoffset:0}
.sz-wieder{transform-box:fill-box;transform-origin:center}
/* Der Takt: jede Karte ist ein Viertel des Zyklus dran */
.takt.laeuft .takt-schritt,.takt.laeuft .takt-schritt .schritt-zahl,.takt.laeuft .takt-schritt .schritt-zahl::after,
.takt.laeuft .karte-kopf::after,.takt.laeuft .takt-szene *{animation-duration:var(--zyklus);animation-delay:var(--start);animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:var(--ease-in-out)}
.takt.laeuft .takt-schritt{animation-name:takt-karte}
.takt.laeuft .schritt-zahl{animation-name:takt-zahl}
.takt.laeuft .schritt-zahl::after{animation-name:takt-welle}
.takt.laeuft .karte-kopf::after{animation-name:takt-licht}
.takt.laeuft .sz-schreiben,.takt.laeuft .sz-haken{animation-name:takt-zeichnen}
.takt.laeuft .sz-tag{animation-name:takt-tag}
.takt.laeuft .sz-feld{animation-name:takt-feld}
.takt.laeuft .sz-zeiger{animation-name:takt-zeiger}
.takt.laeuft .sz-wieder{animation-name:takt-wieder}
@keyframes takt-karte{0%,25%,100%{border-color:var(--linie-kraeftig);box-shadow:none}5%,19%{border-color:var(--licht);box-shadow:0 0 0 3px var(--licht-schein),0 10px 24px rgba(var(--schatten),.10)}}
@keyframes takt-zahl{0%,22%,100%{transform:scale(1);background-color:var(--akzent)}5%{transform:scale(1.18);background-color:var(--licht)}11%{transform:scale(1.05);background-color:var(--licht)}}
@keyframes takt-welle{0%{opacity:0;transform:scale(1)}4%{opacity:.9;transform:scale(1)}15%,100%{opacity:0;transform:scale(2.2)}}
@keyframes takt-licht{0%,18%{opacity:0;transform:translateX(0)}20%{opacity:1;transform:translateX(0)}25%{opacity:1;transform:translateX(20px)}27%,100%{opacity:0;transform:translateX(20px)}}
@keyframes takt-zeichnen{0%{stroke-dashoffset:0}3%,8%{stroke-dashoffset:100}18%,100%{stroke-dashoffset:0}}
@keyframes takt-tag{0%{opacity:1;transform:scale(1)}3%,6%{opacity:0;transform:scale(.5)}10%{opacity:1;transform:scale(1.15)}13%,100%{opacity:1;transform:scale(1)}}
@keyframes takt-feld{0%{stroke-dashoffset:var(--bis)}3%,5%{stroke-dashoffset:100}20%,100%{stroke-dashoffset:var(--bis)}}
@keyframes takt-zeiger{0%{transform:rotate(var(--grad))}3%,5%{transform:rotate(0deg)}20%,100%{transform:rotate(var(--grad))}}
@keyframes takt-wieder{0%,8%{transform:rotate(0deg)}22%,100%{transform:rotate(360deg)}}
@media (max-width:1100px){
.takt{row-gap:20px}
.takt-schritt:nth-child(2n) .karte-kopf::before,.takt-schritt:nth-child(2n) .karte-kopf::after{display:none}
}
@media (max-width:560px){
.takt .karte-kopf::before,.takt .karte-kopf::after{display:none}
}
@media (prefers-reduced-motion:reduce){
.takt.laeuft .takt-schritt,.takt.laeuft .takt-schritt *,.takt.laeuft .takt-schritt ::after,.takt.laeuft .karte-kopf::after{animation:none}
}

/* Ablauf-Karten mit Szenenfoto (bausteine-ablauf.py, takt_ablauf mit
   fotos=). Das Foto fuellt das Feld oben, die Takt-Zeichnung laeuft auf
   einem kleinen weissen Abzeichen unten rechts weiter. Aus Praxis
   Hafner-Wilson (04.10.2026), Rueckfluss 04.10.2026. */
.takt-szene.takt-foto{position:relative;height:150px;overflow:hidden;background-color:var(--akzent-blass);
  margin-bottom:34px;display:block}
.takt-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.takt-abzeichen{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;
  width:84px;height:60px;border-radius:10px;background-color:#fff;border:1px solid var(--linie-kraeftig);
  box-shadow:0 4px 12px rgba(var(--schatten),.12)}
.takt-abzeichen svg{width:70px;height:46px}
@media (max-width:760px){
  .takt-szene.takt-foto{height:180px}
}


/* ---- Spiegel engineering, Auffrischung 28.10.2026 ---- */
.takt-szene,.takt-szene.takt-foto,.takt-abzeichen{border-radius:0}
.takt-schritt{border-radius:0}
/* Kundenleiste: neutrale Bezeichnungen als Schrift, alle gleich gross */
.marken-logo.marken-wort{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:19px;
  color:#5f6062;text-transform:capitalize;white-space:nowrap;text-align:center}
@media (max-width:760px){.marken-logo.marken-wort{font-size:16px}}
/* Standortkarte als Bild statt leerer Google-Karte */
.kartenfeld img{display:block;object-position:66% 62%}
/* Geschaeftsleitung: groesseres Foto mit KI-Kennzeichnung */
.nb-person{grid-template-columns:190px minmax(0,1fr);align-items:start}
.nb-person-bild{position:relative;display:block;width:190px;height:190px}
.nb-person .nb-person-bild img{width:100%;height:100%;object-fit:cover;display:block}
.nb-person-bild::after{content:"KI-Bild";position:absolute;right:6px;bottom:6px;padding:1px 6px;
  font-size:11px;font-weight:700;line-height:1.5;color:#464646;background:rgba(255,255,255,.82)}
@media (max-width:1100px){.nb-person{grid-template-columns:130px minmax(0,1fr)}.nb-person-bild{width:130px;height:130px}}
/* Stellen: Foto links, Kacheln rechts, beide Spalten gleich hoch */
.nb-stellen-reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:18px;margin-top:36px;align-items:stretch}
.nb-stellen-reihe .nb-stellen{grid-template-columns:1fr 1fr;margin-top:0}
.nb-stellen-foto{position:relative;min-height:240px;border:1px solid var(--linie-kraeftig);overflow:hidden}
.nb-stellen-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){.nb-stellen-reihe{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.nb-stellen-reihe .nb-stellen{grid-template-columns:1fr}}
@media (max-width:760px){.nb-person{grid-template-columns:minmax(0,1fr)}.nb-person-bild{width:160px;height:160px}}