/* Siemens: Erklaergrafiken G01, G02, G04–G13 und die powerMove-Demo als HTML/SVG
   (22.10.2026; ruhig seit 27.10.2026: ohne Kasten, Kicker, Knoepfe und Fusszeile,
   CASE-STUDY-STANDARD.md 3.5). Markup und Keyframes erzeugt
   09_grafiken/web/web_grafiken_bauen.py im Master (css/siemens-graphics-anim.css);
   das Abspielen, die Buehne und die Demo steuert js/siemens-graphics.js. Farben wie
   ../src/base.css der Generatoren, Namen mit Praefix shg- (Demo shd-); die Kernfarben
   (Flaeche, Linie, Text, Akzent) kommen aus css/tokens.css. */

.shg-fig,
.shd {
  --shg-card: var(--color-surface); --shg-hair: var(--color-line);
  --shg-text: var(--color-ink); --shg-body: var(--color-ink-body); --shg-muted: var(--color-ink-muted);
  --shg-faint: #9a9a9a; --shg-accent: var(--color-accent); --shg-accent-2: #9aa0f2;
  --shg-bsh-soft: #e2e2e6; --shg-glass: #2b2d31; --shg-glass-2: #3a3d44;
  --shg-pot: #e4e4e9; --shg-pot-2: #c9c9d1; --shg-screen: #141519; --shg-ring: #8a90ff;
  --shg-steel: #d9dade; --shg-steel-2: #c4c6cc;
  container: shg / inline-size;
  color: var(--shg-text);
  font-family: var(--font-sans);
}

.shg-fig p,
.shg-fig ol,
.shg-fig ul { margin: 0; padding: 0; }
.shg-fig ol,
.shg-fig ul { list-style: none; }

/* ---------- SVG-Grafiken (G05–G13, Demo) ---------- */

.shg-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.shg-svg text { font-family: var(--font-sans); fill: var(--shg-text); }
.shg-svg rect[fill="var(--shg-card)"]:not([stroke]) { stroke: var(--shg-hair); stroke-width: 1px; }
.shg-svg .shg-t-xs { font-size: 15px; font-weight: 500; }
.shg-svg .shg-t-s { font-size: 18px; font-weight: 500; }
.shg-svg .shg-t-m { font-size: 22px; font-weight: 600; letter-spacing: -.2px; }
.shg-svg .shg-t-l { font-size: 30px; font-weight: 600; letter-spacing: -.5px; }
.shg-svg .shg-muted { fill: var(--shg-muted) !important; }
.shg-svg .shg-faint { fill: var(--shg-faint) !important; }
.shg-svg .shg-accent { fill: var(--shg-accent) !important; }
.shg-svg .shg-white { fill: #fff !important; }
.shg-svg .shg-caps { letter-spacing: var(--tracking-label); text-transform: uppercase; font-weight: 700; }
/* Feldbeschriftungen ueber Kochfeld und Display: Groesse je Ausschnitt aus dem Export
   (--shg-caps fuer die breite Fassung, --shg-caps-s fuers Handy) */
.shg-svg text.shg-caps { font-size: var(--shg-caps, 15px) !important; }

@container shg (max-width: 560px) {
  .shg-svg text.shg-caps { font-size: var(--shg-caps-s, var(--shg-caps, 15px)) !important; }
}

/* Auf schmalen Flaechen stehen Kochfeld und Display untereinander. */
.shg-stack { display: none; }

@container shg (max-width: 560px) {
  .shg-svg--wide.has-stack { display: none; }
  .shg-stack { display: grid; gap: var(--space-4); }
}

/* Zwei Hochformate (G12) in mittleren Breiten nebeneinander, am Telefon untereinander. */
@container shg (min-width: 440px) and (max-width: 560px) {
  .shg-stack--side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

/* ---------- Schritte neben der Grafik (G12, G13) ---------- */
/* Wie die Schrittlisten bei Moving Types: ohne JS alle gleich, waehrend des Ablaufs ist der
   laufende Schritt gefuellt und die anderen treten zurueck. */

.shg-steps {
  display: grid;
  gap: var(--space-5) var(--space-8);
  margin-top: var(--space-8) !important;
}

@container shg (min-width: 560px) {
  .shg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.shg-steps li {
  display: grid;
  grid-template-columns: var(--space-8) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: start;
}

.shg-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-round);
  color: var(--color-accent);
  font: var(--weight-semibold) var(--text-caption)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.shg-steps .shg-num { grid-row: span 2; }

.shg-steps strong {
  padding-top: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  transition: color var(--dur-base) var(--ease-out);
}

.shg-steps p {
  color: var(--color-ink-body);
  font-size: var(--text-small);
  line-height: var(--leading-small);
  transition: color var(--dur-base) var(--ease-out);
}

.shg-steps.is-live li:not(.is-current) strong,
.shg-steps.is-live li:not(.is-current) p { color: var(--color-ink-muted); }

.shg-steps li.is-current .shg-num {
  background: var(--color-accent);
  color: var(--color-ink-on-dark);
}

/* ---------- G01 Arbeit je Produkt ---------- */
/* Drei Zeilen zwischen Haarlinien; ein Punkt in Blau ist meine Arbeit, in Grau die der BSH. */

.shg-work { display: grid; }

.shg-work__lane {
  display: grid;
  grid-template-columns: clamp(170px, 22cqi, 250px) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid var(--color-line-strong);
}

.shg-work__lane:last-child { border-bottom: 1px solid var(--color-line-strong); }

.shg-work__name strong {
  display: block;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h3);
}

.shg-work__name span {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
}

.shg-work__items { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }

.shg-work__items li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-ink);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.shg-work__items li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--shg-accent);
}

.shg-work__items li.is-bsh { color: var(--color-ink-body); }
.shg-work__items li.is-bsh::before { background: var(--shg-bsh-soft); box-shadow: inset 0 0 0 1px var(--color-line-strong); }

@container shg (max-width: 700px) {
  .shg-work__lane { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- G02 Vom Konzept zum Geraet ---------- */
/* Sechs Schritte mit nummerierten Kreisen und Pfeilen dazwischen; gefuellt ist meine Arbeit. */

.shg-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); }

.shg-flow > li { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }

.shg-flow > li + li::before {
  content: ""; position: absolute; left: -22px; top: 12px; width: 8px; height: 8px;
  border-top: 2px solid var(--shg-faint); border-right: 2px solid var(--shg-faint);
  transform: rotate(45deg);
}

.shg-flow .shg-num { margin-bottom: var(--space-2); }
.shg-flow > li.is-me .shg-num { background: var(--color-accent); color: var(--color-ink-on-dark); }

.shg-flow strong {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
}

.shg-flow p { color: var(--color-ink-body); font-size: var(--text-small); line-height: var(--leading-small); }
.shg-flow .shg-flow__who { margin-top: auto; padding-top: var(--space-2); color: var(--color-ink-muted); font-size: var(--text-caption); }
.shg-flow > li.is-me .shg-flow__who { color: var(--color-accent); font-weight: var(--weight-semibold); }

.shg-loop { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-8); }
.shg-loop > div { grid-column: 4 / 6; text-align: center; }
.shg-loop svg { display: block; width: 60%; height: auto; margin: var(--space-1) auto 0; overflow: visible; }
.shg-loop p { margin-top: 2px !important; color: var(--shg-accent); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.shg-loop__steps { display: none; }

@container shg (max-width: 900px) {
  .shg-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shg-flow > li:nth-child(3n + 1)::before { display: none; }
  .shg-loop { display: block; margin-top: var(--space-6); }
  .shg-loop svg { display: none; }
  .shg-loop > div { text-align: left; }
  .shg-loop__steps { display: inline; }
}

@container shg (max-width: 560px) {
  .shg-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
  .shg-flow > li::before { display: none; }
}

/* ---------- G04 Drei Wertigkeitsklassen ---------- */

.shg-classes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.shg-classes > li { text-align: center; }

.shg-classes__name {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-h4);
}

.shg-fridge { display: block; width: min(100%, 250px); height: auto; margin: var(--space-3) auto; overflow: visible; }
.shg-classes > li > p:last-child { color: var(--color-ink-body); font-size: var(--text-small); line-height: var(--leading-small); }
.shg-classes > li > p:last-child strong { display: block; font-weight: var(--weight-semibold); color: var(--color-ink); }

.shg-brackets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.shg-bracket { position: relative; padding-top: var(--space-6); }
.shg-bracket--two { grid-column: 1 / 3; }

.shg-bracket > i {
  position: absolute; top: 0; left: 10px; right: 10px; height: 14px;
  border: 2px solid var(--shg-accent); border-top: 0;
  transform-origin: left center;
}

.shg-bracket strong { display: block; font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: var(--leading-h4); }
.shg-bracket p { margin-top: var(--space-1) !important; color: var(--color-ink-body); font-size: var(--text-small); line-height: var(--leading-small); }
.shg-bracket__for { display: none; }

@container shg (max-width: 700px) {
  .shg-classes,
  .shg-brackets { grid-template-columns: minmax(0, 1fr); }
  .shg-classes { gap: var(--space-10); }
  .shg-bracket--two { grid-column: auto; }
  .shg-bracket > i { display: none; }
  .shg-bracket { padding-top: 0; }
  .shg-bracket__for { display: block; margin-bottom: var(--space-1); color: var(--color-ink-muted); font-size: var(--text-caption); }
}

/* ---------- Demo powerMove ---------- */
/* Die Toepfe sind ziehbar, sobald js/siemens-graphics.js uebernimmt (.is-live). Der Fokusring
   ist ein Kreis im SVG, weil SVG-Gruppen keinen Umriss zeichnen. */

.shd .shd-focus { opacity: 0; }

.shd.is-live [data-shd-input] .shd-pot { cursor: grab; touch-action: none; outline: none; }
.shd.is-live [data-shd-input] .shd-pot.is-dragging { cursor: grabbing; }
.shd.is-live [data-shd-input] .shd-pot:focus-visible .shd-focus { opacity: 1; stroke: var(--color-accent-on-dark); }

/* ---------- Bausteine der Generatoren (wie ../src/base.css) ---------- */

.shg-fig .shg-fade { opacity: 0; animation: shg-fade var(--dur-reveal) ease-out both; }
.shg-fig .shg-pop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: shg-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.shg-fig .shg-rise { opacity: 0; animation: shg-rise var(--dur-reveal) ease-out both; }
.shg-fig .shg-draw { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: shg-draw 1s ease-in-out both; }
.shg-fig .shg-grow { transform-box: fill-box; transform-origin: left center; animation: shg-grow 1s cubic-bezier(.3, .8, .3, 1) both; }

/* Ohne JavaScript (oder bevor js/siemens-graphics.js uebernimmt): kein Ablauf, sondern das
   Standbild. Jede Animation steht angehalten auf ihrem Zustand zum Zeitpunkt --shg-still;
   die kurzen Einblendungen sind dann laengst fertig. Der Abspieler setzt .is-live und
   uebernimmt die Zeitachse, auch bei reduzierter Bewegung (dort bleibt er beim Standbild). */
.shg-fig:not(.is-live) *,
.shg-fig:not(.is-live) *::before,
.shg-fig:not(.is-live) *::after {
  animation-delay: calc(var(--shg-still, 0) * -1s) !important;
  animation-play-state: paused !important;
}

@keyframes shg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes shg-pop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes shg-draw { to { stroke-dashoffset: 0; } }
@keyframes shg-grow { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .shg-num,
  .shg-steps strong,
  .shg-steps p { transition: none; }
}