/* keytos.de/neu/automatisierung · nur diese Seite (Jonas, 15.10.2026)
   Richtung „Type and nothing else" (taste-skill v2): Schrift als Bild, Flächen statt Karten, keine Linien/Schatten/Verläufe.
   Farben und Schrift aus dem Squarespace-Theme (Inter, Schwarz/Weiß/Grau), daher kein Akzent – Blau ist dort Preis-Badges
   vorbehalten. Schriftstufen: Kopf-Titel (wie /neu/team), die Angebots-Tafeln, Oberflächen-Ausschnitte. */
:root {
  --ki-ton: #f2f2f2;                      /* eine Tonstufe über Weiß: Kern des Orbits im Kopf */
  --ki-aus: cubic-bezier(.22, 1, .36, 1);
  --ki-weich: cubic-bezier(.33, 1, .68, 1);
}
/* :where() hält die Grundwerte auf Spezifität 0, sonst schlüge die ID jeden Abstand weiter unten. */
:where(#main) :where(p, h1, h2, h3, figure) { margin: 0; }
:where(#main) :where(h1, h2, h3) { font-weight: var(--weight-light); }
#main em { font-style: normal; font-weight: var(--weight-bold); }
#main b { font-weight: var(--weight-bold); }


/* Knopf: eine Form für die ganze Seite (Theme-Radius 4 px), flach, Satzschreibung. */
.ki-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 28px; border: 0; border-radius: var(--radius-button); background: var(--primitive-black); color: var(--primitive-white); font: var(--weight-bold) 17px/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: transform 140ms var(--ki-aus), background-color .18s ease; }
.ki-knopf:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ki-knopf:hover { background: var(--color-gray-800); } }
.ki-knopf:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* ── Kopf wie /neu/team: der ganze erste Bildschirm, Titel in zwei Zeilen (zweite grau), darunter die Angebote
   als überlappende Kreise mit Unterschrift (wie die Gründer-Kreise). Maße aus team.css übernommen. */
.ki-kopf { padding: 0 var(--grid-gutter-width); }
/* Erster Bildschirm wie vor dem Orbit (Jonas, 16.10.2026: Schrift genau da und genau so groß wie vorher): Titel + Kreise
   mittig im ganzen Bildschirm, gleiche Abstände; der Orbit folgt darunter (Handy/Tablet) bzw. rechts daneben (ab 1020 px). */
.ki-kopf__text { display: flex; flex-direction: column; justify-content: center; gap: 48px; min-height: 100vh; /* taste-skill-ignore: Rückfall für Browser ohne lvh, danach 100lvh wie /neu/team */ min-height: 100lvh; padding: calc(12px + var(--notch-h) + 32px) 0 48px; } /* unter der Notch, wächst mit ihr mit */
.ki-kopf__bild { padding-bottom: 48px; }
.ki-kopf__titel { font-size: clamp(30px, 9.6vw, 128px); font-weight: var(--weight-light); line-height: 1.04; letter-spacing: -.05em; }
.ki-kopf__leise { color: var(--color-gray-500); } /* große Schrift: 3,5:1 reicht ab 24 px (WCAG AA groß), wie auf /neu/team */
.ki-zeile { display: block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.1em; }
.ki-zeile > span { display: block; }
.ki-bausteine { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ki-bausteine__kreise { display: flex; margin: 0; padding: 0 0 0 12px; list-style: none; }
.ki-bausteine__kreise li { margin-left: -12px; }
/* weißer Rand statt Schatten: trennt die überlappenden Kreise wie auf /neu/team */
/* Je Angebot eine helle Farbe wie die Gründer-Kreise auf /neu/team (gleiche Helligkeit, verschiedene Töne: Blau, Mint,
   Butter, Apricot, Rosé), Symbole schwarz (über 15:1). Kopf-Kreise und je Angebot Farbfeld, Symbol und Haken. */
[href="#ki-abo"], #ki-abo { --farbe: #dbe8ff; }
[href="#ki-assistenten"], #ki-assistenten { --farbe: #d7f0e3; }
[href="#ki-ablaeufe"], #ki-ablaeufe { --farbe: #fbefc8; }
[href="#ki-dashboards"], #ki-dashboards { --farbe: #fde4d3; }
[href="#ki-claude-code"], #ki-claude-code { --farbe: #fbdde4; }
.ki-kreis { display: grid; place-items: center; width: 72px; height: 72px; border: 4px solid var(--primitive-white); border-radius: 50%; background: var(--farbe, var(--ki-ton)); color: var(--primitive-black); transition: transform var(--dur-fast) var(--ease-cubic-in-out); }
.ki-kreis svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ki-kreis:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .ki-kreis:hover { transform: translateY(-4px); } }
.ki-bausteine__namen { max-width: 26em; font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
@media (min-width: 744px) { .ki-kopf__titel { font-size: clamp(60px, 8.2vw, 128px); } }
@media (min-width: 1020px) {
  .ki-kopf__text { gap: 80px; padding-bottom: 64px; }
  .ki-bausteine__kreise li { margin-left: -20px; }
  .ki-bausteine__kreise { padding-left: 20px; }
  .ki-kreis { width: 128px; height: 128px; border-width: 6px; }
  .ki-kreis svg { width: 44px; height: 44px; }
  .ki-bausteine__namen { font-size: 20px; }
}

/* ── Orbit im Kopf (Jonas, 16.10.2026): großer Ring unten (im Uhrzeigersinn), kleiner oben (dagegen), darauf Logos und Symbole in
   Pastelltönen der Seite (+ Schwarz, Claude-Orange #D97757 – bewusst, passend zum Claude-Logo; taste-skill-ignore) und verschiedenen Größen; Bewegung per GSAP im Skript. Ohne Skript steht
   alles an seinem Platz: jedes Element sitzt per transform auf seinem Winkel (--w) am Rand des Rings (Radius = halber Durchmesser).
   Größen als Anteil des Durchmessers (--s), damit der Orbit von Handy bis Desktop gleich aussieht. */
.ki-orbit { --d: min(90vw, 500px); position: relative; width: var(--d); height: var(--d); margin: 8px auto; overflow: hidden; overflow: clip; } /* drehende Ringe sind Quadrate: ohne Abschneiden ragten ihre Ecken über den Seitenrand */
.ki-ring { --rd: calc(var(--d) * .8); position: absolute; inset: 0; width: var(--rd); height: var(--rd); margin: auto; border-radius: 50%; }
.ki-ring--innen { --rd: calc(var(--d) * .48); background: var(--ki-ton); } /* Kern eine Tonstufe dunkler */
.ki-ring__bahn { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ki-ring__bahn circle { fill: none; stroke: #d6d6d6; stroke-width: 2px; stroke-dasharray: 3 9; stroke-linecap: round; vector-effect: non-scaling-stroke; } /* gestrichelte Bahn: macht das Drehen sichtbar */
.ki-ring ul { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ki-ring li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--w)) translateX(calc(var(--rd) / 2)) rotate(calc(var(--w) * -1)); }
.ki-chip { display: grid; place-items: center; width: calc(var(--d) * var(--s)); height: calc(var(--d) * var(--s)); border: max(3px, calc(var(--d) * .008)) solid var(--primitive-white); border-radius: 50%; background: var(--farbe); color: var(--primitive-black); }
.ki-chip svg { width: 46%; height: 46%; fill: currentColor; }
.ki-chip--dunkel { color: var(--primitive-white); }
.ki-chip[title="Claude Code"] { color: #141413; } /* Schwarz auf Claude-Orange: 6,6:1 */
.ki-chip--logo { overflow: hidden; }
.ki-chip--logo img { width: 100%; height: 100%; object-fit: contain; }
.ki-chip--claude { border: 0; border-radius: 22%; background: transparent; } /* Logo unverändert: eigene abgerundete Form */
.ki-chip--synaplan img { width: 84%; height: 84%; } /* Schriftzug bleibt im Kreis */
.ki-punkt { display: block; width: calc(var(--d) * var(--s)); height: calc(var(--d) * var(--s)); border-radius: 50%; background: var(--farbe); }
.ki-nabe { position: absolute; inset: 0; display: grid; place-items: center; width: calc(var(--d) * .2); height: calc(var(--d) * .2); margin: auto; border-radius: 50%; background: var(--primitive-white); }
.ki-nabe img { width: 52%; height: 52%; border-radius: 22%; }
@media (min-width: 1020px) {
  /* Textblock (Titel + Kreise) exakt wie vor dem Orbit – gleiche Größe, gleicher Platz (Jonas, 16.10.2026). Der Orbit liegt frei
     darüber im leeren Feld rechts neben dem Titel, oberhalb der Kreis-Reihe: das Skript misst das Feld und setzt Größe (--d) und
     Lage so, dass er mittig zwischen Schrift und rechtem Seitenrand steht. Ohne Skript: oben rechts, klein genug für jedes Feld. */
  .ki-kopf { position: relative; }
  .ki-kopf__bild { position: absolute; top: calc(12px + var(--notch-h) + 24px); right: var(--grid-gutter-width); padding: 0; }
  .ki-orbit { --d: clamp(260px, 26vw, 420px); margin: 0; }
}

@media (min-width: 1152px) {
  /* Ab hier (Inhaltsbreite ≥ 560 + 24 + 520 px) stünde die Unterschrift neben den Kreisen und ragte unter den Orbit. Sie steht deshalb unter den Kreisen – außerhalb des
     Flusses, damit Titel und Kreise exakt an ihrem Platz bleiben (Jonas, 16.10.2026: Kreis mittig zu allem links, Schrift unverändert). */
  .ki-bausteine { position: relative; }
  .ki-bausteine__namen { position: absolute; left: 0; top: calc(100% + 16px); }
}

/* ── Einleitung: Aussage links, Notiz rechts auf derselben Grundlinie. */

/* ── Die fünf Angebote wie /neu/angebote (Jonas, 16.10.2026: „rechts wie die Angebote-Kategorie, links die Veranschaulichung;
   durch Scrollen rechts die Punkte erklärt und links veranschaulicht – bei allen Punkten“). Je Stufe links ein Farbfeld (Farbe des
   Kopf-Kreises) mit dem Beispiel-Fragment, rechts die Tafel (.ang-tafel: leichter Titel, Pille, Text, Punkte mit fettem Titel).
   Ohne Skript, Handy, Tablet, „Bewegung reduzieren“: untereinander, jede Veranschaulichung unter ihrem Punkt. Bühne (.ist-buehne
   vom Skript, ab 1020 × 720 px): die Stufe ist lang, das Widget steht bildschirmfüllend, die Tafel kommt von rechts, je Punkt
   wechselt links die Veranschaulichung und ein Pfeil zeigt auf den Punkt. */
.ki-angebote { padding: 0 var(--grid-gutter-width); } /* direkt nach dem Kopf, ohne Einleitung (Jonas, 17.10.2026) */

.ki-stufen { margin: 0 calc(var(--grid-gutter-width) * -1); } /* randlos bis an die Fensterkanten, Stufen ohne Fuge */
.ki-widget { position: relative; display: grid; overflow: hidden; background: #f2f2f2; }
.ki-feld { --breite: 560px; display: grid; place-items: center; padding: 48px var(--grid-gutter-width); background: var(--farbe); }
.ki-feld[data-breit] { --breite: 680px; }
.ki-folien { display: grid; place-items: center; width: 100%; }
.ki-folie { grid-area: 1 / 1; }
.ki-folie--start { display: grid; justify-items: center; gap: 20px; width: 100%; margin: 0; }
.ki-feld__ui, .ki-feld__beispiel { width: min(100%, var(--breite)); } /* Unterschrift bündig mit dem Fragment */
.ki-feld__ui > [data-ui] { width: 100%; }
.ki-feld__beispiel { font-size: 16px; line-height: 1.5; text-wrap: pretty; }
/* Tafel: Maße und Schrift wie .ang-tafel auf /neu/angebote */
.ki-tafel { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 28px 24px 32px; }
.ki-tafel__kopf { display: grid; gap: 12px; }
.ki-tafel__titel { font-weight: var(--weight-light); font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.ki-tafel__preis { justify-self: start; padding: 6px 16px 7px; border-radius: 999px; background: var(--farbe); font-size: 20px; font-weight: var(--weight-bold); letter-spacing: -.015em; }
.ki-tafel__satz { font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.ki-liste { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ki-eintrag { display: grid; gap: 4px; }
.ki-eintrag__titel { font-size: 17px; font-weight: var(--weight-bold); line-height: 1.35; }
.ki-eintrag__text { font-size: 16px; line-height: 1.45; color: var(--color-gray-800); text-wrap: pretty; }
.ki-eintrag__schau { display: grid; justify-items: center; margin: 12px 0 12px; padding: 28px 16px; border-radius: 16px; background: var(--farbe); }
@media (max-width: 599.98px) { .ki-eintrag__schau { padding: 16px 8px; } .ki-eintrag__schau [data-ui].ki-schau { padding: 16px 14px 18px; } }
.ki-tafel__gut { font-size: 15px; line-height: 1.5; color: var(--color-gray-800); text-wrap: pretty; }
.ki-tafel__gut b { color: var(--primitive-black); }
/* Nummer: verbindet Punkt rechts und Bereich links (Jonas: „Nummern statt Pfeile“) */
.ki-nr { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-right: .55em; border-radius: 50%; background: var(--primitive-black); color: var(--primitive-white); font-size: .78em; font-weight: var(--weight-bold); line-height: 1; vertical-align: .14em; font-variant-numeric: tabular-nums; }
@media (min-width: 744px) { .ki-tafel { padding: 32px; } }
@media (min-width: 1020px) {
  .ki-widget { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ki-feld { align-items: start; padding: 64px 40px; }
  .ki-folien { position: sticky; top: calc(12px + var(--notch-h) + 24px); }
}
@media (max-width: 599.98px) { .ki-tafel .ki-knopf { align-self: stretch; } .ki-tafel__preis { font-size: 17px; } } /* Pille bleibt einzeilig */

/* Bühne. lvh = Höhe bei eingeklappter Browserleiste; was bei ausgeklappter Leiste darunter läge, hält das Polster frei (wie .ang-tafel). */
.ist-buehne { position: relative; height: calc(100vh + 260svh); height: calc(100lvh + 260svh); } /* taste-skill-ignore: 100vh nur Rückfall für Browser ohne lvh */
/* Übergabe wie gestapelte Karten: folgt eine weitere Bühnen-Stufe, bleibt diese eine Bildschirmhöhe länger stehen und die nächste
   fährt (eine Bildschirmhöhe nach oben gezogen, später im DOM = darüber) über sie hinweg */
.ist-buehne:has(+ .ist-buehne) { height: calc(200vh + 260svh); height: calc(200lvh + 260svh); } /* taste-skill-ignore: Rückfall wie oben */
.ist-buehne + .ist-buehne { margin-top: -100vh; margin-top: -100lvh; } /* taste-skill-ignore: Rückfall wie oben */
.ist-buehne .ki-widget { --oben: calc(12px + var(--notch-h) + 24px); --tafel: min(44%, 620px); position: sticky; top: 0; display: block; height: 100vh; height: 100lvh; background: var(--farbe); } /* taste-skill-ignore: Rückfall wie oben */
.ist-buehne .ki-feld { position: absolute; inset: 0 var(--tafel) 0 0; display: block; padding: var(--oben) 40px calc(32px + 100lvh - 100svh); } /* block: die Folien bekommen genau die freie Höhe (sonst wüchsen sie mit) */
.ist-buehne .ki-folien { position: static; height: 100%; }
.ist-buehne .ki-tafel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tafel); justify-content: center; gap: 32px; padding: var(--oben) 40px calc(40px + 100lvh - 100svh); overflow: hidden; background: #f2f2f2; }
.ist-buehne .ki-eintrag__schau { display: none; }
/* Leinwand: die drei Bereiche eines Angebots untereinander (① oben = Punkt 1 oben), Schrift wächst mit der Bildschirmhöhe */
.ki-leinwand { display: none; }
.ist-buehne .ki-leinwand { display: grid; align-content: center; gap: .55em; width: min(100%, 48em); font-size: clamp(13px, 1.75svh, 17px); } /* passt es nicht, verkleinert das Skript die Schrift bis 12 px */
.ist-buehne .ki-leinwand [data-ui].ki-schau { width: auto; padding: .75em 1em .8em; font-size: 1em; }
.ist-buehne .ki-leinwand .ui__kopf { margin-bottom: .6em; }
.ist-buehne .ki-leinwand .ui__chip { display: none; } /* ein Hinweis „Beispielwerte“ unter dem Bild statt in jedem Bereich */
.ki-leinwand__notiz { margin: 0; font-size: .8em; text-align: center; color: var(--color-gray-800); }
/* Niedrige Laptops (bis 860 px Höhe): Tafel breiter und dichter, wie .ang-tafel */
@media (max-height: 860px) {
  .ist-buehne .ki-widget { --tafel: min(56%, 720px); }
  .ist-buehne .ki-feld { padding-inline: 32px; }
  .ist-buehne .ki-tafel { gap: 16px; padding: var(--oben) 36px calc(24px + 100lvh - 100svh); }
  .ist-buehne .ki-tafel__kopf { gap: 10px; }
  .ist-buehne .ki-tafel__titel { font-size: 32px; }
  .ist-buehne .ki-tafel__satz { font-size: 15px; line-height: 1.45; }
  .ist-buehne .ki-liste { gap: 10px; }
  .ist-buehne .ki-eintrag__text, .ist-buehne .ki-tafel__gut { font-size: 15px; line-height: 1.4; }
  .ist-buehne .ki-tafel .ki-knopf { min-height: 48px; }
  .ist-buehne .ki-feld[data-breit] { --breite: 480px; }
  .ist-buehne .ki-feld [data-ui].dash { padding: 20px; }
  .ist-buehne .ki-feld .dash__top { margin-bottom: 12px; }
  .ist-buehne .ki-folie--start { gap: 14px; }
  .ist-buehne .ki-feld__beispiel { font-size: 14px; }
}

/* ── Beispiel-Fragmente: Oberflächen-Ausschnitte ([data-ui]) mit eigenen Konventionen (feine Linien, Schatten erlaubt). */
[data-ui].ui { padding: 20px 22px 22px; border-radius: 12px; background: var(--primitive-white); color: var(--primitive-black); font-family: var(--font-sans); font-size: 15px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08); }
[data-ui] .ui__kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--color-gray-800); }
[data-ui] .ui__chip { flex: none; padding: 4px 10px; border-radius: 999px; background: #f0f0f0; font-size: 12px; font-weight: 400; }
[data-ui] ul { margin: 0; padding: 0; list-style: none; }
[data-ui] em { font-style: normal; }
/* Abo */
[data-ui] .ui-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid #ececec; }
[data-ui] .ui-liste li:first-child { border-top: 0; padding-top: 0; }
[data-ui] .ui-liste b { display: block; font-weight: 500; }
[data-ui] .ui-liste small { display: block; margin-top: 2px; font-size: 13px; color: var(--color-gray-800); }
[data-ui] .ui-liste--leise b { color: var(--color-gray-800); font-weight: 400; }
[data-ui] .ui-marke { flex: none; padding: 6px 10px; border-radius: 999px; background: #f0f0f0; font-size: 13px; white-space: nowrap; }
[data-ui] .ui-marke--voll { background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .ui-marke--leer { background: transparent; color: var(--color-gray-800); }
[data-ui] .ui-summe { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: var(--primitive-black); color: var(--primitive-white); font-size: 14px; }
[data-ui] .ui-summe b { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
/* Assistent */
[data-ui] .ui-wissen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
[data-ui] .ui-wissen span { padding: 4px 10px; border-radius: 6px; background: #f0f0f0; font-size: 12px; }
[data-ui] .ui-blase { max-width: 92%; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: #f2f2f2; font-size: 14px; line-height: 1.45; }
[data-ui] .ui-blase--anfrage { margin-left: auto; background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .ui-knoepfe { display: flex; gap: 8px; margin-top: 4px; }
[data-ui] .ui-knopf { padding: 8px 12px; border-radius: 6px; background: #f0f0f0; font-size: 13px; font-weight: 500; }
[data-ui] .ui-knopf--voll { background: var(--primitive-black); color: var(--primitive-white); }
/* Zeitplan */
[data-ui] .ui-plan li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-top: 1px solid #ececec; font-size: 14px; }
[data-ui] .ui-plan li:first-child { border-top: 0; padding-top: 0; }
[data-ui] .ui-plan time { width: 76px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-ui] .ui-plan span { flex: 1 1 140px; }
[data-ui] .ui-status { padding: 4px 10px; border-radius: 999px; background: #f0f0f0; font-size: 12px; white-space: nowrap; }
[data-ui] .ui-status--ok { background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .ui-status--warten { background: var(--primitive-white); box-shadow: inset 0 0 0 1px var(--primitive-black); }
[data-ui] .ui-fuss { margin-top: 12px; font-size: 13px; color: var(--color-gray-800); }
/* Claude Code: Terminal-Ausschnitt, hier ist Festbreitenschrift die echte Konvention */
[data-ui].ui--code { background: #111; color: #e6e6e6; }
[data-ui].ui--code .ui__kopf { color: var(--color-gray-400); }
[data-ui].ui--code .ui__chip { background: #222; color: #bdbdbd; }
[data-ui] .ui-term { font-size: 13px; line-height: 1.6; }
[data-ui] .ui-term samp, [data-ui] .ui-term kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: inherit; } /* taste-skill-ignore: echte Terminal-Ein- und Ausgabe (kbd/samp) */
[data-ui] .ui-term p { margin: 0 0 6px; color: #bdbdbd; }
[data-ui] .ui-term kbd { color: #fff; }
[data-ui] .ui-term b { color: #fff; font-weight: 500; }
[data-ui] .ui-term .ui-term__ein { margin-bottom: 14px; color: #fff; }
[data-ui] .ui-term__prompt { color: var(--color-gray-400); }
[data-ui] .ui-term .ui-term__fertig { margin-top: 12px; color: #fff; }
[data-ui] .ui-term__cursor { display: inline-block; width: .55em; height: 1.1em; margin-left: 2px; vertical-align: -.2em; background: #e6e6e6; }
/* Dashboard (von der Startseite) */
[data-ui].dash { padding: 24px; border-radius: var(--radius-card); background: var(--panel-dark-2); color: var(--primitive-white); font-family: var(--font-sans); }
[data-ui] .dash__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 15px; font-weight: 500; }
[data-ui] .dash__chip { padding: 6px 12px; border-radius: 30px; background: var(--color-shade-t-white-100); font-size: 12px; font-weight: 400; }
[data-ui] .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
[data-ui] .kpi { min-width: 0; padding: 16px; border-radius: var(--radius-blade); background: var(--color-gray-900); }
[data-ui] .kpi b { display: block; font-weight: 300; font-size: clamp(22px, 6vw, 28px); letter-spacing: -.04em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-ui] .kpi__name { display: block; margin-top: 4px; font-size: 12px; color: var(--color-gray-400); }
[data-ui] .kpi__trend { font-size: 12px; color: var(--color-gray-200); }
[data-ui] .chart { margin-top: 12px; padding: 16px; border-radius: var(--radius-blade); background: var(--color-gray-900); }
[data-ui] .chart__h { margin-bottom: 8px; font-size: 12px; color: var(--color-gray-400); }
[data-ui] .chart svg { display: block; width: 100%; height: auto; }
[data-ui] .chart__raster { stroke: #ffffff26; stroke-width: 1; }
[data-ui] .chart__flaeche { fill: #ffffff14; }
[data-ui] .chart__linie { fill: none; stroke: var(--primitive-white); stroke-width: 2; stroke-linejoin: round; }
[data-ui] .chart__monate { fill: var(--color-gray-400); font-size: 11px; font-family: var(--font-sans); }
@media (max-width: 743.98px) { [data-ui] .chart__monate { font-size: 20px; } }
/* Spalten nach der eigenen Breite (Bühne, Punkt, Handy): vier Zahlenkacheln erst, wenn „€ 28.450“ in 28 px hineinpasst. */
[data-ui].dash { container-type: inline-size; }
@media (min-width: 744px) { [data-ui].dash { padding: 32px; } }
@container (min-width: 740px) { [data-ui] .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } [data-ui] .kpi b { font-size: 28px; } }

/* ── Veranschaulichungen der Punkte (_schau.php): Oberflächen-Ausschnitte wie die Fragmente oben ([data-ui]: feine Linien und
   Schatten erlaubt). Maße in em: auf dem Handy 15 px, auf der Bühne wächst alles mit der Leinwand. Farbe des Angebots für das,
   worauf es ankommt. Ruhiges CSS = Endzustand; die Bewegung kommt aus dem Skript. */
.ki-schau { position: relative; container-type: inline-size; width: min(100%, 560px); }
.ki-schau .ui__kopf { margin-bottom: .8em; font-size: 1em; font-weight: 500; color: var(--primitive-black); }
.ki-schau .ui__chip { padding: .3em .7em; font-size: .78em; color: var(--color-gray-800); }
.ki-schau small { display: block; margin-top: .1em; font-size: .85em; line-height: 1.3; color: var(--color-gray-800); }
.ki-schau b { font-weight: 500; }
.ki-schau .ui-status { padding: .25em .7em; font-size: .8em; }
.sch-fokus { position: absolute; inset: -.3em; border: 2px solid var(--primitive-black); border-radius: calc(12px + .3em); opacity: 0; pointer-events: none; } /* Umrandung des Bereichs, der gerade erklärt wird */
[data-ui] .sch-ico { flex: none; width: 1.2em; height: 1.2em; fill: currentColor; }
[data-ui] .sch-ok, [data-ui] .sch-zu { display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .sch-zu { background: #e4e4e4; color: var(--primitive-black); }
[data-ui] .sch-ok .sch-ico, [data-ui] .sch-zu .sch-ico { width: .9em; height: .9em; }
[data-ui] .sch-fazit { margin: .8em 0 0; padding: .6em .9em; border-radius: 8px; background: var(--farbe); }

/* Abo ① Wer arbeitet wie oft mit KI? */
[data-ui] .sch-bedarf li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 6.4em; align-items: center; gap: .9em; padding: .5em 0; border-top: 1px solid #ececec; }
[data-ui] .sch-bedarf li:first-child { padding-top: 0; border-top: 0; }
[data-ui] .sch-wer b { display: block; }
[data-ui] .sch-balken { height: .65em; overflow: hidden; border-radius: 99px; background: #f0f0f0; }
[data-ui] .sch-balken i { display: block; height: 100%; border-radius: inherit; background: var(--primitive-black); transform: scaleX(var(--w)); transform-origin: left; }
[data-ui] .sch-bedarf em { font-size: .87em; text-align: right; color: var(--color-gray-800); }
/* Abo ② Welches Abo passt? */
[data-ui] .sch-plaene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em; }
@container (min-width: 520px) { [data-ui] .sch-plaene { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-ui] .sch-plaene > li { position: relative; display: grid; align-content: start; gap: .3em; padding: .7em .8em; border-radius: 10px; background: #f5f5f5; }
[data-ui] .sch-plaene > li.sch-plaene__wahl { background: var(--farbe); box-shadow: inset 0 0 0 2px var(--primitive-black); }
[data-ui] .sch-plaene b { font-size: 1.12em; letter-spacing: -.01em; }
[data-ui] .sch-plaene small { margin: 0; }
[data-ui] .sch-leute { display: flex; align-items: center; gap: .2em; min-height: 1.5em; }
[data-ui] .sch-leute > .sch-ico { width: 1.35em; height: 1.35em; }
[data-ui] .sch-tag { flex: 1; height: .5em; margin-left: .35em; overflow: hidden; border-radius: 99px; background: #e0e0e0; }
[data-ui] .sch-tag i { display: block; height: 100%; background: var(--primitive-black); transform-origin: left; }
[data-ui] .sch-rechnung { display: inline-flex; align-items: center; gap: .1em; margin-left: auto; padding: .1em .45em .1em .25em; border-radius: 99px; background: var(--primitive-white); font-size: .8em; }
[data-ui] .sch-leute--viele { display: grid; grid-template-columns: repeat(10, .45em); gap: .22em; }
[data-ui] .sch-leute--viele i { width: .45em; height: .45em; border-radius: 50%; background: var(--primitive-black); }
[data-ui] .sch-plaene__wahl em { position: absolute; top: .6em; right: .6em; padding: .15em .55em; border-radius: 99px; background: var(--primitive-black); color: var(--primitive-white); font-size: .78em; }
/* Abo ③ Eingerichtet und geschützt */
[data-ui] .sch-haken { display: flex; flex-wrap: wrap; gap: .5em; }
[data-ui] .sch-haken li { display: inline-flex; align-items: center; gap: .5em; padding: .4em .85em .4em .4em; border-radius: 99px; background: #f5f5f5; font-weight: 500; }
[data-ui] .sch-schalter { display: flex; align-items: center; gap: .8em; margin-top: .7em; padding: .7em .9em; border-radius: 10px; background: var(--farbe); }
[data-ui] .sch-schalter > span:first-of-type { flex: 1; }
[data-ui] .sch-schalter__schloss { width: 1.4em; height: 1.4em; }
[data-ui] .sch-schalter__knopf { position: relative; flex: none; width: 2.8em; height: 1.65em; border-radius: 99px; background: #9e9e9e; }
[data-ui] .sch-schalter__knopf i { position: absolute; top: .2em; left: .2em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--primitive-white); }

/* Assistenten ① feste Anweisungen */
[data-ui] .sch-regeln { display: grid; gap: .45em; margin: 0; }
[data-ui] .sch-regeln > div { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); align-items: center; gap: .7em; padding: .55em .8em; border-radius: 10px; background: #f5f5f5; }
[data-ui] .sch-regeln > .sch-regeln__nie { background: var(--farbe); }
[data-ui] .sch-regeln dt { justify-self: start; padding: .15em .55em; border-radius: 99px; background: var(--primitive-white); font-size: .8em; font-weight: 500; }
[data-ui] .sch-regeln__nie dt { background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .sch-regeln dd { margin: 0; }
[data-ui] .sch-schritte { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
[data-ui] .sch-schritte span { padding: .15em .55em; border-radius: 6px; background: var(--primitive-white); font-size: .9em; }
[data-ui] .sch-schritte .sch-ico { width: .9em; height: .9em; }
/* Assistenten ② Das weiß der Assistent */
[data-ui] .ui__chip b { font-weight: 500; }
[data-ui] .sch-dateien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45em; }
@container (min-width: 520px) { [data-ui] .sch-dateien { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
[data-ui] .sch-dateien li { display: flex; align-items: center; gap: .45em; min-width: 0; padding: .6em .7em; border-radius: 8px; background: #f5f5f5; font-size: .93em; }
[data-ui] .sch-dateien span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
[data-ui] .sch-ablage { display: flex; align-items: center; gap: .7em; margin: .6em 0 0; padding: .65em .9em; border-radius: 10px; background: var(--farbe); }
[data-ui] .sch-ablage .sch-ico { width: 1.8em; height: 1.8em; }
/* Netz: Verbindungen (Assistenten ③) und Quellen (Dashboards ②). Zeilen 2,1em hoch mit 0,35em Abstand → Linien treffen die Mitten */
[data-ui] .sch-netz { display: grid; grid-template-columns: auto minmax(2.4em, 1fr) auto; align-items: center; }
[data-ui] .sch-netz__quellen { display: grid; gap: .35em; }
[data-ui] .sch-netz__quellen li { display: flex; align-items: center; gap: .5em; height: 2.1em; padding: 0 .75em; border-radius: 8px; background: #f5f5f5; white-space: nowrap; }
[data-ui] .sch-netz__linien { display: block; width: 100%; height: 7em; overflow: visible; }
[data-ui] .sch-netz__mitte { position: relative; height: 9.45em; }
[data-ui] .sch-netz__mitte .sch-netz__linien { height: 100%; }
[data-ui] .sch-netz__linien path { fill: none; stroke: var(--primitive-black); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-ui] .sch-netz__linien .sch-netz__export { stroke-dasharray: 4 5; }
[data-ui] .sch-netz__ziel { display: flex; align-items: center; gap: .5em; margin: 0; padding: .7em .85em; border-radius: 10px; background: var(--primitive-black); color: var(--primitive-white); font-weight: 500; }
[data-ui] .sch-bahn { position: absolute; inset: 0; opacity: 0; pointer-events: none; } /* Datenpunkt fährt mit der ganzen Ebene: xPercent 100 = rechte Kante */
[data-ui] .sch-bahn > * { position: absolute; left: 0; top: calc(var(--y) / 94.5 * 100%); }
[data-ui] .sch-bahn i { width: .55em; height: .55em; margin: -.275em 0 0 -.275em; border-radius: 50%; background: var(--primitive-black); }
[data-ui] .sch-bahn .sch-ico { width: 1.3em; height: 1.3em; margin: -.65em 0 0 -.65em; padding: .12em; border-radius: 4px; background: var(--primitive-white); }
[data-ui] .sch-freigabe { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .75em; }
[data-ui] .sch-freigabe li { display: inline-flex; align-items: center; gap: .45em; padding: .3em .35em .3em .7em; border-radius: 99px; background: #f5f5f5; font-size: .93em; }
[data-ui] .sch-legende { display: flex; flex-wrap: wrap; gap: .3em 1em; margin: .7em 0 0; font-size: .82em; color: var(--color-gray-800); }
[data-ui] .sch-legende span { display: inline-flex; align-items: center; gap: .4em; }
[data-ui] .sch-legende i { width: 1.6em; border-top: 1.5px solid var(--primitive-black); }
[data-ui] .sch-legende i.sch-legende__export { border-top-style: dashed; }

/* Zeitpläne ① Wann soll es laufen? */
[data-ui] .sch-wahl { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .2em; border-radius: 10px; background: #f0f0f0; font-size: .9em; text-align: center; }
[data-ui] .sch-wahl span { position: relative; padding: .5em .1em; }
[data-ui] .sch-wahl__marke { position: absolute; top: .2em; bottom: .2em; left: calc(.2em + (100% - .4em) * .75); width: calc((100% - .4em) / 4); border-radius: 8px; background: var(--primitive-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
[data-ui] .sch-woche { margin-top: .7em; }
[data-ui] .sch-woche__tage, [data-ui] .sch-muster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
[data-ui] .sch-woche__tage { font-size: .8em; color: var(--color-gray-800); }
[data-ui] .sch-woche__muster { display: grid; height: 4.2em; margin-top: .35em; border-radius: 8px; background: #f5f5f5; }
[data-ui] .sch-muster { grid-area: 1 / 1; align-items: center; opacity: 0; }
[data-ui] .sch-muster:last-child { opacity: 1; }
[data-ui] .sch-muster span { display: grid; justify-items: center; gap: .2em; }
[data-ui] .sch-muster i { width: .55em; height: .55em; border-radius: 50%; background: var(--primitive-black); }
[data-ui] .sch-aus { display: flex; align-items: center; gap: .65em; margin: .7em 0 0; padding: .6em .85em; border-radius: 10px; background: var(--farbe); }
[data-ui] .sch-aus span { flex: 1; }
[data-ui] .sch-aus .sch-ico { width: 1.5em; height: 1.5em; }
/* Zeitpläne ② Was ist wann passiert? */
[data-ui] .sch-verlauf { position: relative; margin: 0; padding: 0 0 0 1.3em; list-style: none; }
[data-ui] .sch-verlauf::before { content: ""; position: absolute; left: .32em; top: .9em; bottom: .9em; width: 2px; background: #e4e4e4; }
[data-ui] .sch-verlauf > li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3em .65em; padding: .35em 0; }
[data-ui] .sch-verlauf > li::before { content: ""; position: absolute; left: -1.3em; top: 1.05em; width: .75em; height: .75em; margin-top: -.375em; border-radius: 50%; background: var(--primitive-black); }
[data-ui] .sch-verlauf time { flex: none; width: 5em; white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
[data-ui] .sch-verlauf > li > span { flex: 1 1 7.5em; min-width: 0; } /* zu schmal: der Status rückt in die nächste Zeile statt über den Text */
[data-ui] .sch-verlauf__detail { display: flex; align-items: flex-start; gap: .55em; margin: .5em 0 0; padding: .6em .8em; border-radius: 8px; background: var(--farbe); font-size: .93em; line-height: 1.4; }
/* Zeitpläne ③ Ihr Server */
[data-ui] .sch-puls { display: grid; gap: .5em; padding: .8em .9em; border-radius: 10px; background: #111; color: #e6e6e6; }
[data-ui] .sch-puls svg { display: block; width: 100%; height: 3.2em; }
[data-ui] .sch-puls path { fill: none; stroke: var(--farbe); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
[data-ui] .sch-puls p { display: flex; align-items: center; gap: .5em; margin: 0; font-size: .87em; }
[data-ui] .sch-puls__punkt { width: .55em; height: .55em; border-radius: 50%; background: var(--farbe); }
[data-ui] .sch-server { margin-top: .4em; }
[data-ui] .sch-server li { display: flex; align-items: center; gap: .65em; padding: .5em 0; border-top: 1px solid #ececec; }
[data-ui] .sch-server li:first-child { border-top: 0; }
[data-ui] .sch-server span { flex: 1; min-width: 0; }
[data-ui] .sch-server .sch-ico { width: 1.3em; height: 1.3em; }

/* Dashboards ① Welche Zahlen? */
[data-ui] .sch-zahlen { display: flex; flex-wrap: wrap; gap: .35em; }
[data-ui] .sch-zahlen li { padding: .3em .7em; border-radius: 99px; background: #f0f0f0; font-size: .87em; }
[data-ui] .sch-zahlen li.sch-zahlen__weg { padding: calc(.3em - 1px) calc(.7em - 1px); border: 1px dashed #9e9e9e; background: transparent; }
[data-ui] .sch-auswahl { display: grid; gap: .5em; margin-top: .7em; padding: .7em .8em; border-radius: 10px; background: #111; color: var(--primitive-white); }
[data-ui] .sch-auswahl > span { font-size: .87em; color: var(--color-gray-400); }
[data-ui] .sch-auswahl ul { display: flex; flex-wrap: wrap; gap: .35em; }
[data-ui] .sch-auswahl li { padding: .45em .75em; border-radius: 8px; background: var(--farbe); color: var(--primitive-black); font-size: .93em; font-weight: 500; }
/* Dashboards ③ Wo sehen Sie sie? */
[data-ui] .sch-adresse { display: flex; align-items: center; gap: .5em; margin: 0 0 .7em; padding: .5em .9em; border-radius: 99px; background: #f0f0f0; }
[data-ui] .sch-adresse > span:first-of-type { flex: 1; }
[data-ui] .sch-adresse .sch-ico { width: 1em; height: 1em; }
[data-ui] .sch-login { display: flex; gap: .3em; }
[data-ui] .sch-login i { width: .5em; height: .5em; border-radius: 50%; background: var(--primitive-black); }
[data-ui] .sch-geraete { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: end; gap: .9em; } /* Hinweis bricht in seiner Spalte um, die Reihe nie */
[data-ui] .sch-geraet { display: grid; justify-items: center; gap: .3em; margin: 0; }
[data-ui] .sch-geraet figcaption { font-size: .8em; color: var(--color-gray-800); }
[data-ui] .sch-geraet__schirm { display: grid; align-content: end; gap: .25em; box-sizing: border-box; height: 5.6em; padding: .4em; border: .25em solid #1d1d1f; border-radius: .5em; background: #111; }
[data-ui] .sch-geraet--rechner .sch-geraet__schirm { aspect-ratio: 16 / 10; }
[data-ui] .sch-geraet--tablet .sch-geraet__schirm { aspect-ratio: 3 / 4; border-radius: .65em; }
[data-ui] .sch-geraet--handy .sch-geraet__schirm { aspect-ratio: 9 / 18; padding: .3em; border-radius: .8em; }
[data-ui] .sch-geraet__schirm i { height: .35em; border-radius: 3px; background: var(--farbe); transform-origin: left; }
[data-ui] .sch-geraet__schirm i + i { width: 60%; background: #5a5a5a; }
[data-ui] .sch-geraet svg { width: 100%; height: 1.4em; }
[data-ui] .sch-geraet path { fill: none; stroke: var(--primitive-white); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
[data-ui] .sch-geraete__neu { display: flex; align-items: center; justify-content: flex-end; gap: .4em; margin: 0 0 1.6em; font-size: .87em; line-height: 1.3; text-align: right; color: var(--color-gray-800); }

/* Claude Code ① Arbeitet selbst */
[data-ui] .sch-chat { display: flex; align-items: center; gap: .6em; margin: 0 0 .7em; padding: .6em .8em; border-radius: 12px; background: #f2f2f2; color: var(--color-gray-800); }
[data-ui] .sch-chat span { flex: 1; }
[data-ui] .sch-chat em { flex: none; padding: .15em .55em; border-radius: 99px; background: var(--primitive-white); font-size: .8em; }
[data-ui] .sch-chat .sch-ico { width: 1.4em; height: 1.4em; }
[data-ui] .sch-kreis { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
[data-ui] .sch-kreis li { position: relative; z-index: 1; display: grid; justify-items: center; gap: .1em; padding: .8em .2em; text-align: center; }
[data-ui] .sch-kreis .sch-ico { width: 1.6em; height: 1.6em; margin-bottom: .2em; }
[data-ui] .sch-kreis small { font-size: .8em; }
[data-ui] .sch-kreis__marke { position: absolute; top: 0; bottom: 0; left: 75%; width: 25%; border-radius: 10px; background: var(--farbe); }
/* Claude Code ② Routine */
[data-ui] .sch-routine { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 1.1em; }
[data-ui] .sch-uhr { width: 5.2em; height: 5.2em; }
[data-ui] .sch-uhr circle { fill: #f5f5f5; stroke: var(--primitive-black); stroke-width: 3; }
[data-ui] .sch-uhr path { stroke: var(--primitive-black); stroke-width: 4; stroke-linecap: round; }
[data-ui] .sch-uhr .sch-uhr__min { stroke-width: 3; }
[data-ui] .sch-routine__zeit { margin: 0 0 .5em; }
[data-ui] .sch-routine__zeit b { margin-right: .4em; }
[data-ui] .sch-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2em; text-align: center; }
[data-ui] .sch-tage li { display: grid; justify-items: center; gap: .3em; font-size: .8em; color: var(--color-gray-800); }
[data-ui] .sch-tage i { display: grid; place-items: center; width: 2em; height: 2em; font-style: normal; }
/* Claude Code ③ Nachvollziehbar und geprüft */
[data-ui] .sch-commits { position: relative; margin: 0; padding: 0 0 0 1.4em; list-style: none; }
[data-ui] .sch-commits::before { content: ""; position: absolute; left: .32em; top: .8em; bottom: .8em; width: 2px; background: #e4e4e4; }
[data-ui] .sch-commits li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: .7em; padding: .35em 0; }
[data-ui] .sch-commits li::before { content: ""; position: absolute; left: -1.4em; top: .62em; box-sizing: border-box; width: .8em; height: .8em; border: 2px solid var(--primitive-black); border-radius: 50%; background: var(--primitive-white); }
[data-ui] .sch-commits small { margin: 0; white-space: nowrap; }
[data-ui] .sch-pruefung { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7em; margin-top: .7em; padding: .75em .85em; border-radius: 10px; background: var(--farbe); }
[data-ui] .sch-pruefung p { margin: 0; }
[data-ui] .sch-pruefung ul { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .35em; }
[data-ui] .sch-pruefung li { display: grid; place-items: center; height: 1.9em; border-radius: 6px; background: var(--primitive-black); color: var(--primitive-white); }
[data-ui] .sch-pruefung li .sch-ico { width: .9em; height: .9em; }
[data-ui] .sch-pruefung em { grid-column: 2; grid-row: 1; }
/* Schmale Bereiche (Handy): Netz kleiner gesetzt, Geräte kleiner, Hinweis in eigener Zeile – nichts ragt heraus oder überdeckt */
@container (max-width: 340px) {
  [data-ui] .sch-netz { font-size: .78em; }
  [data-ui] .sch-netz__quellen li { padding: 0 .55em; }
  [data-ui] .sch-adresse { gap: .4em; padding: .45em .7em; font-size: .9em; }
  [data-ui] .sch-login { gap: .2em; }
  [data-ui] .sch-login i { width: .4em; height: .4em; }
  [data-ui] .sch-geraete { grid-template-columns: repeat(3, auto); justify-content: start; }
  [data-ui] .sch-geraet__schirm { height: 4.6em; }
  [data-ui] .sch-geraete__neu { grid-column: 1 / -1; justify-content: flex-start; margin: 0; text-align: left; }
}

/* ── Bewegung. Kopf: die Titelzeilen steigen aus ihrer Maske, Kreise und Text folgen. Dazu zeichnet sich die Kurve
   (Dashboards) und Claude Code tippt. Alles nur transform/opacity/clip-path; bei „Bewegung reduzieren" sofort der Endzustand. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeile] { transform: translateY(105%); animation: ki-hoch 1s var(--ki-aus) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js [data-steig] { opacity: 0; transform: translateY(18px); animation: ki-steig .8s var(--ki-aus) forwards; animation-delay: calc(var(--i, 0) * 90ms + 450ms); }
  .js .ki-stufe .chart__linie { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ki-weich) .35s; }
  .js .ki-stufe.ist-aktiv .chart__linie { stroke-dashoffset: 0; }
  /* Claude Code: die Eingabe wird getippt, dann erscheinen die Schritte nacheinander (Skript unten) */
  .js [data-ui].ui--code:not(.laeuft) [data-tippen] { visibility: hidden; }
  .js [data-ui] [data-term] { opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ki-aus), transform .35s var(--ki-aus); }
  .js [data-ui] [data-term].ist-da { opacity: 1; transform: none; }
  [data-ui] .ui-term__cursor { animation: ki-blinken 1s steps(1) infinite; }
}
@keyframes ki-hoch { to { transform: none; } }
@keyframes ki-steig { to { opacity: 1; transform: none; } }
@keyframes ki-blinken { 50% { opacity: 0; } }