/* ------------------------------------------------------------------
   MCTec Altium Library Manager - Produktseite
   Farben und Typografie sind bewusst nah an der Anwendung gehalten:
   das Signalblau entspricht dem Bootstrap-Blau der Bedienoberflaeche,
   die Monospace-Schrift den Artikelnummern und Parametern im System.
   ------------------------------------------------------------------ */

/* Die Seite ist bewusst einfarbig hell gehalten - wie mctec.ch. Daher kein
   Dunkelmodus, aber jede Farbe ausdruecklich gesetzt, damit die Seite auf jedem
   Untergrund gleich aussieht. */
:root {
  color-scheme: light;

  --paper:        #ffffff;
  --surface:      #ffffff;
  --surface-sunk: #f8f9fa;
  --ink:          #212529;
  --ink-muted:    #5c636a;
  --ink-faint:    #868e96;
  --line:         #dee2e6;
  --line-soft:    #e9ecef;
  --signal:       #0d6efd;
  --signal-soft:  #e7f0ff;
  --signal-deep:  #0a58ca;
  --copper:       #b4603a;
  --ok:           #198754;
  --ok-soft:      #e4f3ea;
  --dark:         #212529;
  --dark-muted:   #adb5bd;
  --shadow-sm:    0 1px 2px rgba(33, 37, 41, .06);
  --shadow-lg:    0 1px 2px rgba(33, 37, 41, .05), 0 18px 48px rgba(33, 37, 41, .12);
  --radius:       10px;
  --maxw:         1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Sprachumschaltung: die jeweils andere Fassung wird ausgeblendet. */
html[lang="de"] [data-lang="en"],
html[lang="en"] [data-lang="de"] { display: none !important; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

a { color: var(--signal); }

h1, h2, h3 { text-wrap: balance; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; }
h2 { font-size: clamp(23px, 3.2vw, 31px); font-weight: 600; }
h3 { font-size: 17px; font-weight: 600; }
p  { margin: 0; }

code, .mono, .kbd {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}

.lead { font-size: 17.5px; color: var(--ink-muted); max-width: 62ch; }
.muted { color: var(--ink-muted); }

/* ---------- Kopfzeile ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--line-soft);
}
.head-row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 78px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand img { height: 50px; width: auto; display: block; }
.brand span { font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }

.head-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.head-nav a {
  font-size: 14.5px;
  color: var(--ink-muted);
  text-decoration: none;
}
.head-nav a:hover { color: var(--ink); }
.head-nav a.current { color: var(--ink); font-weight: 500; }

.lang {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--surface);
}
.lang button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--signal); color: #fff; }

.brand span { white-space: nowrap; }
@media (max-width: 760px) {
  .head-nav { gap: 14px; }
  .head-nav a { display: none; }
  .head-nav a.always { display: inline; }
}
@media (max-width: 480px) {
  /* Auf dem Handy traegt das Logo den Namen bereits - der Schriftzug daneben entfaellt. */
  .brand span { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: var(--signal-deep); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--ink-faint); }

:where(a, button):focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

/* ---------- Abschnitte ---------- */
section { padding-block: clamp(48px, 7vw, 84px); }
section + section { border-top: 1px solid var(--line-soft); }
.sec-head { max-width: 64ch; display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }

/* ---------- Hero mit Platinenbild ----------
   Gleicher Aufbau wie auf mctec.ch: das Foto unter einem dunklen Verlauf, damit der
   weisse Text darauf sicher lesbar bleibt - auch auf den hellen Stellen der Platine. */
.hero {
  border-top: 0;
  padding-block: clamp(64px, 9vw, 104px) clamp(56px, 8vw, 88px);
  background-color: #0b1b2e;
  background-image:
    linear-gradient(rgba(6, 16, 28, .62), rgba(6, 16, 28, .74)),
    url("../img/cover.jpg");
  background-size: cover;
  background-position: center center;
  color: #ffffff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
.hero-grid { display: flex; flex-direction: column; gap: 18px; max-width: 70ch; }
.hero h1 { color: #ffffff; }
.hero .lead { color: rgba(255, 255, 255, .93); }
.hero .eyebrow { color: #9fc6ff; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-cta .btn { text-shadow: none; }
.hero-cta .btn-ghost {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .45);
  color: #ffffff;
}
.hero-cta .btn-ghost:hover { background: rgba(255, 255, 255, .2); border-color: #ffffff; }
.hero-note { font-size: 13.5px; color: var(--ink-faint); }
.hero .hero-note { color: rgba(255, 255, 255, .72); }
.hero :where(a, button):focus-visible { outline-color: #ffffff; }

/* Der Abschnitt direkt unter dem Hero traegt den ersten Screenshot. */
.shot-band { padding-block: clamp(36px, 5vw, 56px); background: var(--surface-sunk); border-top: 0; }
.shot-band .shot { margin-top: 0; }

/* Bildschirmfoto in einem schlichten Fensterrahmen */
.shot {
  margin-top: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-sunk);
}
.shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.shot-bar span {
  margin-left: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.shot img { display: block; width: 100%; height: auto; }
.shot-cap { font-size: 13px; color: var(--ink-faint); margin-top: 10px; }

/* ---------- Funktionsraster ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
.cell {
  background: var(--surface);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cell-ic {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--signal-soft);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.cell-ic svg { width: 17px; height: 17px; }
.cell p { font-size: 14.5px; color: var(--ink-muted); }

/* ---------- Wechselnde Bild/Text-Reihen ---------- */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(26px, 5vw, 54px);
  align-items: center;
}
.split + .split { margin-top: clamp(40px, 6vw, 70px); }
.split.flip > :first-child { order: 2; }
.split-text { display: flex; flex-direction: column; gap: 12px; }
.split-text ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-muted); font-size: 14.5px; }
.split-text li { margin-bottom: 5px; }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}

/* ---------- Abspielbarer Erklaer-Ablauf ----------
   Kein Video, sondern eine gesteuerte Animation: Die Buehne traegt das Attribut
   data-scene, alles darin richtet sich danach aus. Dadurch bleibt der Text
   uebersetzbar, die Darstellung scharf und die Datei winzig. */
.player {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 1px 1px, rgba(13,110,253,.10) 1px, transparent 0) 0 0 / 22px 22px,
    #fbfcfd;
  overflow: hidden;
  container-type: inline-size;
}
/* Alle Groessen in der Buehne skalieren mit ihrer Breite, damit die Szene auf dem
   Handy genauso aufgeht wie auf dem Bildschirm. */
.stage { font-size: clamp(7px, 1.35cqi, 15px); }

.sc {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: .8em;
  box-shadow: 0 1px 2px rgba(33,37,41,.06), 0 6px 18px rgba(33,37,41,.07);
  padding: 1em 1.1em;
  width: 17em;
  transition: opacity .55s ease, transform .75s cubic-bezier(.4,.1,.2,1);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.94);
  left: 50%; top: 50%;
}
@media (prefers-reduced-motion: reduce) { .sc { transition-duration: .01ms; } }
.sc-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: .82em;
  color: var(--signal);
  letter-spacing: .06em;
  display: block;
  margin-bottom: .35em;
}
.sc-title { font-size: 1.05em; font-weight: 600; color: var(--ink); line-height: 1.25; }
.sc-rows { display: flex; flex-direction: column; gap: .32em; }
/* Die Zeilen nehmen erst Platz ein, wenn sie dran sind - sonst steht in Szene 1
   eine hohe, leere Karte in der Buehne. */
.sc-row {
  display: flex; justify-content: space-between; gap: .8em;
  font-family: "IBM Plex Mono", monospace;
  font-size: .82em; color: var(--ink-muted);
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  max-height: 0;
  padding-bottom: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(.3em);
  transition: opacity .35s ease, transform .35s ease, max-height .45s ease,
              padding-bottom .45s ease, margin-top .45s ease;
}
.sc-rows .sc-row:first-child { margin-top: 0; }
.sc-row b { color: var(--ink); font-weight: 500; }
.badge-rel {
  display: inline-block;
  font-size: .78em; font-weight: 600; color: #fff;
  background: #198754; border-radius: .35em; padding: .12em .55em;
  transition: background-color .4s ease;
}
.badge-rel.is-obsolete { background: #6c757d; }

/* Kleine Zeichnungen: Footprint-Pads und Schaltplansymbol */
.pads { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35em; width: 5em; margin-top: .6em; }
.pads i { display: block; height: 1.1em; border-radius: .18em; background: #c8a24a; }
.symb { margin-top: .6em; width: 7.5em; }
.symb svg { width: 100%; height: auto; display: block; color: var(--ink-muted); }

/* Verbindungslinie zwischen Datenbank und Altium */
.wire {
  position: absolute;
  left: 50%; top: 50%; width: 7em; margin-left: -3.5em;
  height: 2px;
  background: linear-gradient(90deg, var(--signal), rgba(13,110,253,.25));
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .7s ease, opacity .3s ease, top .75s cubic-bezier(.4,.1,.2,1);
}
.wire::after {
  content: "";
  position: absolute; right: -.1em; top: 50%;
  width: .55em; height: .55em; margin-top: -.3em;
  border-top: 2px solid var(--signal); border-right: 2px solid var(--signal);
  transform: rotate(45deg);
}

/* --- Positionen und Sichtbarkeit je Szene --- */
.stage .s-foot  { width: 13em; }
.stage .s-symb  { width: 13em; }
.stage .s-db    { width: 20em; }
.stage .s-part  { width: 19em; }
.stage .s-altium{ width: 23em; }
.stage .s-web   { width: 20em; }

/* Szene 1: die drei Bausteine nebeneinander */
[data-scene="1"] .s-foot  { opacity: 1; transform: translate(-50%, -50%) translate(-18.5em, 0) scale(1); }
[data-scene="1"] .s-symb  { opacity: 1; transform: translate(-50%, -50%) translate(-3.5em, 0) scale(1); }
[data-scene="1"] .s-db    { opacity: 1; transform: translate(-50%, -50%) translate(15em, 0) scale(1); }

/* Szene 2: die Datenbankkarte in den Vordergrund, Felder laufen ein */
[data-scene="2"] .s-foot  { opacity: .3; transform: translate(-50%, -50%) translate(-19em, 0) scale(.9); }
[data-scene="2"] .s-symb  { opacity: .3; transform: translate(-50%, -50%) translate(-5.5em, 0) scale(.9); }
[data-scene="2"] .s-db    { opacity: 1; transform: translate(-50%, -50%) translate(11em, 0) scale(1.12); }
[data-scene="2"] .s-db .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="2"] .s-db .sc-row:nth-child(1) { transition-delay: .15s; }
[data-scene="2"] .s-db .sc-row:nth-child(2) { transition-delay: .45s; }
[data-scene="2"] .s-db .sc-row:nth-child(3) { transition-delay: .75s; }
[data-scene="2"] .s-db .sc-row:nth-child(4) { transition-delay: 1.05s; }
[data-scene="2"] .s-db .sc-row:nth-child(5) { transition-delay: 1.35s; }

/* Szene 3: alles rueckt zusammen und wird ein Bauteil */
[data-scene="3"] .s-foot  { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.8); }
[data-scene="3"] .s-symb  { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.8); }
[data-scene="3"] .s-db    { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(.8); }
[data-scene="3"] .s-part  { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
[data-scene="3"] .s-part .sc-rows { margin-top: .7em; }
[data-scene="3"] .s-part .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }

/* Szene 4: das Bauteil wandert nach Altium */
[data-scene="4"] .s-part   { opacity: 1; transform: translate(-50%, -50%) translate(-13em, 0) scale(.92); }
[data-scene="4"] .s-part .sc-rows, [data-scene="4"] .s-altium .sc-rows { margin-top: .7em; }
[data-scene="4"] .s-part .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="4"] .s-altium { opacity: 1; transform: translate(-50%, -50%) translate(12em, 0) scale(1); }
[data-scene="4"] .s-altium .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="4"] .wire     { opacity: 1; transform: scaleX(1); }

/* Szene 5: Status wechselt, Abgleich zeigt es - und die Help-URL oeffnet die Seite */
[data-scene="5"] .s-part   { opacity: 1; transform: translate(-50%, -50%) translate(-13em, -4.5em) scale(.92); }
[data-scene="5"] .s-part .sc-rows, [data-scene="5"] .s-altium .sc-rows, [data-scene="5"] .s-web .sc-rows { margin-top: .7em; }
[data-scene="5"] .s-part .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="5"] .s-altium { opacity: 1; transform: translate(-50%, -50%) translate(12em, -4.5em) scale(1); }
[data-scene="5"] .s-altium .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="5"] .wire     { opacity: 1; transform: scaleX(1); top: calc(50% - 4.5em); }
[data-scene="5"] .s-web    { opacity: 1; transform: translate(-50%, -50%) translate(3em, 8.2em) scale(1); }
[data-scene="5"] .s-web .sc-row { opacity: 1; transform: none; max-height: 3em; padding-bottom: .22em; }
[data-scene="5"] .badge-rel { background: #6c757d; }

/* --- Bedienleiste --- */
.player-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.pb-btn {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.pb-btn:hover { border-color: var(--signal); color: var(--signal); }
.pb-btn svg { width: 15px; height: 15px; }
.pb-btn .ic-pause { display: none; }
.player.is-playing .pb-btn .ic-play { display: none; }
.player.is-playing .pb-btn .ic-pause { display: block; }

.pb-caption { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-muted); }
.pb-caption .cap { display: none; }
.pb-caption .cap b { color: var(--ink); font-weight: 600; }
[data-scene="1"] ~ .player-bar .cap[data-s="1"],
[data-scene="2"] ~ .player-bar .cap[data-s="2"],
[data-scene="3"] ~ .player-bar .cap[data-s="3"],
[data-scene="4"] ~ .player-bar .cap[data-s="4"],
[data-scene="5"] ~ .player-bar .cap[data-s="5"] { display: block; }

.pb-dots { display: flex; gap: 6px; flex: none; }
.pb-dots button {
  width: 26px; height: 5px; padding: 0;
  border: 0; border-radius: 3px;
  background: var(--line); cursor: pointer;
}
.pb-dots button[aria-current="true"] { background: var(--signal); }
@media (max-width: 620px) {
  .pb-caption { order: 3; flex-basis: 100%; }
  .player-bar { flex-wrap: wrap; }
}

/* ---------- Ablaufgrafik: von den Bibliotheken bis nach Altium ----------
   Bewusst aus HTML-Kaesten statt als SVG gebaut, damit die Beschriftungen beim
   Sprachwechsel mitgehen und auf dem Handy umbrechen koennen. */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.flow-stage {
  position: relative;
  padding: 22px 20px 20px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.flow-stage:last-child { border-right: 0; }

/* Der Pfeil sitzt als Dreieck auf der Trennlinie zur naechsten Stufe. */
.flow-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -7px;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  transform: rotate(45deg);
  z-index: 2;
}
.flow-num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--signal);
}
.flow-stage h3 { font-size: 15.5px; }
.flow-stage p { font-size: 13.5px; color: var(--ink-muted); }
.flow-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.chip {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 2px 7px;
  white-space: nowrap;
}
.chip.accent { color: var(--signal); background: var(--signal-soft); border-color: #cfe1ff; }

/* Laufende Hervorhebung, die den Weg einmal durchgeht. */
.flow-stage::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  animation: flow-sweep 9s ease-in-out infinite;
}
.flow-stage:nth-child(1)::before { animation-delay: 0s; }
.flow-stage:nth-child(2)::before { animation-delay: .9s; }
.flow-stage:nth-child(3)::before { animation-delay: 1.8s; }
.flow-stage:nth-child(4)::before { animation-delay: 2.7s; }
@keyframes flow-sweep {
  0%            { transform: scaleX(0); }
  8%, 38%       { transform: scaleX(1); }
  48%, 100%     { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-stage::before { animation: none; transform: scaleX(1); opacity: .25; }
}

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
  .flow-stage:nth-child(2) { border-right: 0; }
  .flow-stage:nth-child(1), .flow-stage:nth-child(2) { border-bottom: 1px solid var(--line-soft); }
  .flow-stage:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .flow-stage { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .flow-stage:last-child { border-bottom: 0; }
  .flow-stage::after { display: none !important; }
}

/* Rueckweg: aus Altium zurueck auf die Bauteilseite */
.loopback {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunk);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--ink-muted);
}
.loopback .lb-ic {
  width: 34px; height: 34px; flex: none;
  border-radius: 9px;
  background: var(--signal-soft);
  color: var(--signal);
  display: flex; align-items: center; justify-content: center;
}
.loopback .lb-ic svg { width: 18px; height: 18px; }
.loopback strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .loopback { flex-direction: column; align-items: flex-start; } }

/* ---------- Statusreihe ---------- */
.states { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.state {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 14px;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.state b {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
}
.state b.s-created  { background: #ffc107; color: #332701; }
.state b.s-reviewed { background: #0d6efd; }
.state b.s-released { background: #198754; }
.state b.s-issue    { background: #dc3545; }
.state b.s-obsolete { background: #6c757d; }

/* ---------- Schritte (nur dort, wo die Reihenfolge wirklich zaehlt) ---------- */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line-soft);
}
.step:last-child { border-bottom: 1px solid var(--line-soft); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--signal);
  padding-top: 2px;
}
.step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.step-body p { font-size: 14.5px; color: var(--ink-muted); }

/* ---------- Codeblock ---------- */
pre {
  margin: 4px 0 0;
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 13px 15px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink);
}
pre .c { color: var(--ink-faint); }
code:not(pre code) {
  background: var(--surface-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: .88em;
}

/* ---------- Tabelle ---------- */
.table-scroll { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
th, td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
tr:last-child td { border-bottom: 0; }
th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
td:first-child { font-weight: 500; white-space: nowrap; }
td .mono { font-size: 13.5px; }

/* ---------- Hinweiskasten ---------- */
.note {
  border-left: 3px solid var(--signal);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  padding: 15px 18px;
  font-size: 14.5px;
  color: var(--ink-muted);
  margin-top: 16px;
}
.note.warn { border-left-color: var(--copper); }
.note strong { color: var(--ink); font-weight: 600; }

/* ---------- Demo-Kasten ---------- */
.demo-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: clamp(22px, 4vw, 34px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px) { .demo-card { grid-template-columns: 1fr; } }
.demo-creds {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  color: var(--ink-muted);
  background: var(--surface-sunk);
  border-radius: 8px;
  padding: 13px 16px;
  white-space: nowrap;
}
.demo-creds b { color: var(--ink); font-weight: 600; }

.placeholder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--copper);
  background: color-mix(in srgb, var(--copper) 10%, transparent);
  border: 1px dashed var(--copper);
  border-radius: 6px;
  padding: 3px 9px;
}

/* ---------- Fusszeile (dunkel, wie auf mctec.ch) ---------- */
.site-foot {
  background: var(--dark);
  color: var(--dark-muted);
  padding-block: 40px 48px;
  font-size: 14px;
}
.foot-row { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; }
.foot-row div { display: flex; flex-direction: column; gap: 4px; }
.foot-row strong { color: #ffffff; }
.site-foot a { color: var(--signal); text-decoration: none; }
.site-foot a:hover { color: #ffffff; }

/* ---------- Inhaltsverzeichnis auf den Unterseiten ---------- */
.doc-layout { display: grid; grid-template-columns: 210px 1fr; gap: clamp(26px, 5vw, 56px); align-items: start; }
@media (max-width: 880px) { .doc-layout { grid-template-columns: 1fr; } .toc { position: static !important; } }
/* Haengt unter der 78px hohen Kopfleiste, damit beim Springen nichts verdeckt wird. */
.toc { position: sticky; top: 100px; font-size: 14px; display: flex; flex-direction: column; gap: 7px; }
.toc b {
  font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin-bottom: 3px;
}
.toc a { color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--signal); }

.doc-body { min-width: 0; display: flex; flex-direction: column; gap: 42px; }
/* Flex- und Grid-Kinder bekommen von sich aus min-width:auto und wachsen dann an ihrem
   breitesten Inhalt (Codeblock, Tabelle) ueber den Bildschirm hinaus. Diese Regeln halten
   sie in der Spur, damit nur der Block selbst scrollt und nicht die ganze Seite. */
.doc-body > *,
.doc-body section > *,
.split-text > * { min-width: 0; max-width: 100%; }
pre, .table-scroll { min-width: 0; max-width: 100%; }
.doc-body section { padding: 0; border: 0; }
.doc-body h2 { margin-bottom: 12px; }
.doc-body h3 { margin: 22px 0 6px; }
.doc-body p + p { margin-top: 10px; }
.doc-body ul { color: var(--ink-muted); font-size: 15px; padding-left: 20px; }
.doc-body li { margin-bottom: 6px; }