/* EIGENKERN Testversion — Zusatzstile fuer produkt.html, schulki.html, hof-ki.html (22.10.2026).
   Tokens und Bausteine kommen aus eigenkern.css; hier nur, was diese drei Seiten zusaetzlich brauchen. */

/* ---- Kleinigkeiten an den gemeinsamen Bausteinen ---- */
.karte ul{margin:12px 0 0;padding-left:18px;font-size:14.5px;opacity:.8}
.karte ul li{margin:4px 0}
.karte .klein{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:8px}
.karte .weiter{display:inline-block;margin-top:14px;font-weight:600;font-size:14.5px}
.karte .weiter::after{content:""}
.abschnitt-dunkel .unter{color:rgba(255,255,255,.78);opacity:1}
.abschnitt-dunkel .hinweis{color:rgba(255,255,255,.55)}
.abschnitt-dunkel .frage{border-color:var(--stahl-linie)}
.abschnitt-dunkel .karte p{color:rgba(255,255,255,.8)}
.abschnitt-dunkel .knopf-rand{color:#fff;border-color:rgba(255,255,255,.3)}
.abschnitt-dunkel .knopf-rand:hover{border-color:var(--orange);color:var(--orange-hell)}
.erprobung{display:inline-block;vertical-align:middle;font:600 11px/1 var(--fliess);letter-spacing:.06em;text-transform:uppercase;
  color:var(--orange);border:1px solid rgba(249,115,22,.5);border-radius:999px;padding:4px 8px;margin-left:8px}
.innen-schmal{max-width:820px}

/* ---- Gleichung: Ihre Unterlagen + Ihr Wissen = Ihre lokale KI ---- */
.gleichung{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:40px;font:400 clamp(18px,2.4vw,26px)/1.1 var(--titel);text-transform:uppercase;letter-spacing:.03em}
.gleichung span{border:1px solid var(--linie);border-radius:12px;padding:12px 18px;background:var(--platte)}
.gleichung .op{border:0;background:none;padding:0 2px;color:var(--orange);font-size:1.3em}
.gleichung .ziel{background:var(--orange);color:#111;border-color:var(--orange)}

/* ---- Notizen neben der Chat-Demo ---- */
.notizen{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.notizen li{border-top:2px solid var(--orange);padding-top:12px;font-size:15px;color:rgba(255,255,255,.82)}

/* ---- Chat-Demo (eigene statische Nachbildung, Dunkel-Orange) ---- */
.demo{display:grid;grid-template-columns:230px minmax(0,1fr);max-width:980px;margin:0 auto;background:var(--stahl);
  border:1px solid var(--stahl-linie);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(249,115,22,.12)}
.demo-rail{background:#0a0d12;border-right:1px solid var(--stahl-linie);padding:18px 14px;font-size:13.5px;color:rgba(255,255,255,.72)}
.demo-rail .marke-klein{font:400 16px/1 var(--titel);letter-spacing:.06em;text-transform:uppercase;color:#fff;display:flex;align-items:center;gap:7px;margin:4px 6px 16px}
.demo-rail .marke-klein i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.demo-rail .gruppe{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:16px 6px 6px}
.demo-rail .eintrag{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-rail .eintrag svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;flex-shrink:0}
.demo-rail .eintrag.aktiv{background:rgba(249,115,22,.14);color:#fff}
.demo-rail .punkt{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--orange)}
.demo-rail .punkt.technik{background:var(--orange-hell)}
.demo-rail .punkt.steuern{background:var(--orange-zart)}
.demo-rail .punkt.personal{background:#fff;opacity:.7}
.demo-main{padding:26px 28px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.demo-gruss{margin:0 0 6px;font-size:13.5px;color:rgba(255,255,255,.45)}
.demo-frage{align-self:flex-end;max-width:78%;margin:0;background:var(--orange);color:#111;padding:12px 16px;border-radius:16px 16px 4px 16px;font-weight:500;font-size:15px}
.demo-arbeit{display:flex;align-items:center;gap:10px;margin:0;font-size:13px;color:var(--orange-zart)}
.demo-arbeit i{width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);animation:demo-puls 1.6s ease-in-out infinite}
@keyframes demo-puls{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}
.demo-antwort{align-self:flex-start;max-width:86%;background:rgba(255,255,255,.05);border:1px solid var(--stahl-linie);border-radius:4px 16px 16px 16px;padding:14px 18px;font-size:15px;color:rgba(255,255,255,.9)}
.demo-antwort p{margin:0}
.demo-antwort p+p{margin-top:10px}
.demo-extra{display:flex;flex-wrap:wrap;gap:10px;margin:-4px 0 0}
.demo-quelle,.demo-wie{display:inline-flex;align-items:center;gap:7px;font-size:13px;border-radius:999px;padding:6px 12px}
.demo-quelle{color:var(--orange-hell);border:1px solid rgba(249,115,22,.45);background:rgba(249,115,22,.08)}
.demo-wie{color:rgba(255,255,255,.6);border:1px solid var(--stahl-linie)}
.demo-quelle svg,.demo-wie svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
.demo-eingabe{margin-top:10px;display:flex;align-items:center;gap:10px;border:1px solid var(--stahl-linie);border-radius:14px;padding:10px 10px 10px 16px;background:rgba(255,255,255,.03)}
.demo-eingabe span{flex:1;font-size:14.5px;color:rgba(255,255,255,.4)}
.demo-eingabe b{width:32px;height:32px;border-radius:50%;background:var(--orange);display:grid;place-items:center;flex-shrink:0}
.demo-eingabe b svg{width:16px;height:16px;stroke:#111;fill:none;stroke-width:2}
.demo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.demo-chips span{font-size:12.5px;color:rgba(255,255,255,.65);border:1px solid var(--stahl-linie);border-radius:999px;padding:5px 11px}
.demo-note{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.4)}
@media (max-width:760px){
  .demo{grid-template-columns:1fr}
  .demo-rail{border-right:0;border-bottom:1px solid var(--stahl-linie);display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px}
  .demo-rail .marke-klein{margin:0 10px 0 4px}
  .demo-rail .gruppe{margin:0 4px}
  .demo-rail .eintrag{padding:5px 9px;border:1px solid var(--stahl-linie);border-radius:999px;font-size:12.5px}
  .demo-rail .nur-gross{display:none}
  .demo-main{padding:20px 16px 16px}
  .demo-frage,.demo-antwort{max-width:100%}
  .notizen{grid-template-columns:1fr 1fr}
}

/* ---- Kennzahlen (Herstellerangabe) ---- */
.zahlen{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:36px}
.zahl strong{display:block;font:400 clamp(34px,4vw,52px)/1 var(--titel);color:var(--orange);margin-bottom:6px}
.zahl strong small{font:400 .45em/1 var(--titel);margin-left:4px;color:var(--text);opacity:.6}
.zahl span{font-size:14px;opacity:.75}

/* ---- Geraete-Tabelle ---- */
.tabelle-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.tabelle{width:100%;min-width:560px;border-collapse:collapse;background:var(--platte);border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.tabelle th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--stahl);padding:14px 18px}
.tabelle td{padding:16px 18px;border-top:1px solid var(--linie);font-size:15px;vertical-align:top}
.tabelle td:first-child{font-weight:600}

/* ---- Woher die KI kommt (Hersteller / Partner) ---- */
.herkunft{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.herkunft .karte .klein{color:var(--orange-zart)}
.herkunft .karte a{color:var(--orange-hell)}
.herkunft .pfeil{display:none}

/* ---- Rollen (SchulKI) ---- */
.rollen{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0 0 30px}
.rolle{border-top:2px solid var(--orange);padding-top:12px}
.rolle strong{display:block;font:400 19px/1.1 var(--titel);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.rolle span{font-size:14px;color:rgba(255,255,255,.78)}

/* ---- Hof-KI: Systeme, Zitat, Faelle, Zehn Dinge ---- */
.systeme{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 28px}
.systeme span{border:1px solid var(--linie);background:var(--platte);border-radius:999px;padding:9px 16px;font-size:14.5px;font-weight:500}
.systeme i{color:var(--orange);font-style:normal;font-weight:700}
.systeme .chaos{background:var(--stahl);color:#fff;border-color:var(--stahl)}
.zitat{margin:0;padding:26px 28px;border-left:4px solid var(--orange);background:var(--platte);border-radius:0 14px 14px 0;max-width:820px}
.zitat p{margin:0;font:400 clamp(20px,2.6vw,28px)/1.2 var(--titel);text-transform:uppercase;letter-spacing:.02em}
.zitat p .o{color:var(--orange)}
.zitat footer{margin-top:12px;font-size:13.5px;opacity:.6}
.faelle{border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:var(--platte)}
.fall{display:grid;grid-template-columns:.8fr 1.2fr 1.2fr;border-top:1px solid var(--linie)}
.fall:first-child{border-top:0}
.fall>div{padding:18px 22px;font-size:15px}
.fall .tag{font:400 18px/1.1 var(--titel);text-transform:uppercase;letter-spacing:.03em;color:var(--orange)}
.fall .ist{background:#fff7ed;font-weight:500}
.merksatz{margin:28px 0 0;padding:22px 26px;background:var(--stahl);color:#fff;border-radius:14px;font:400 clamp(19px,2.2vw,24px)/1.25 var(--titel);text-transform:uppercase;letter-spacing:.02em;max-width:820px}
.zehn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px 28px}
.zehn li{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--linie)}
.zehn .nr{font:400 26px/1 var(--titel);color:var(--orange);flex-shrink:0;width:38px}
.zehn b{display:block;font-weight:600;margin-bottom:3px}
.zehn span{font-size:14.5px;opacity:.75}
.abschnitt-dunkel .schritt p{color:rgba(255,255,255,.8);opacity:1}

@media (max-width:980px){
  .rollen{grid-template-columns:repeat(3,1fr)}
  .zahlen{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .herkunft,.rollen,.zehn,.zahlen,.notizen{grid-template-columns:1fr}
  .fall{grid-template-columns:1fr}
  .fall>div{padding:12px 18px}
  .fall .tag{padding-bottom:4px}
  .fall .war{padding-top:0}
  .zehn .nr{width:34px;font-size:22px}
  .gleichung{font-size:17px}
  .gleichung span{padding:10px 14px}
}

/* Drei statt vier Schritte (Hof-KI) */
.schritte-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.schritte-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.schritte-3{grid-template-columns:1fr}}

/* ======================================================================
   BEWEGUNG (23.10.2026) — Ergaenzungen zum Baukasten in eigenkern.css.
   Eigene Einblend-Regeln nur unter html.bewegt:not(.ruhig); bei html.ruhig alles sofort fertig.
   ====================================================================== */
[id]{scroll-margin-top:96px}
main{overflow-x:clip}
/* OFFEN (Baukasten): das Kopf-Skript setzt beim Aufklappen eines Mobil-Untermenues die Klasse .auf auf .menu —
   dieselbe Klasse blendet im Baukasten Elemente aus (.menu.auf wird opacity 0). Notloesung hier, gehoert in eigenkern.css/bewegung.js. */

/* Mikro-Details */
.knopf:active{transform:scale(.98)}
.karte .ikone{transition:stroke .25s ease,transform .25s ease}
.karte:hover .ikone{stroke:var(--orange-hell);transform:translateY(-2px)}
.frage summary{transition:color .2s ease}
.frage summary:hover{color:var(--orange)}
.abschnitt-dunkel .frage summary:hover{color:var(--orange-hell)}
.bewegt:not(.ruhig) .frage[open] p{animation:frage-auf .35s ease both}
@keyframes frage-auf{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Staffel ueber 8 Kinder hinaus (Systeme-Kette 13, Zehn Dinge 10) */
.systeme>*:nth-child(9),.zehn>*:nth-child(9){transition-delay:.72s}
.systeme>*:nth-child(10),.zehn>*:nth-child(10){transition-delay:.81s}
.systeme>*:nth-child(11){transition-delay:.9s}
.systeme>*:nth-child(12){transition-delay:.99s}
.systeme>*:nth-child(13){transition-delay:1.08s}
.rolle,.fall,.zehn li{transition:border-color .25s ease}

/* ---- Signatur: Tipp-Mechanik (Chat-Frage auf produkt.html, Zitat auf hof-ki.html) ----
   Das Skript legt den Originaltext unsichtbar in .voll (reserviert den Platz) und tippt in die
   darueber liegende Kopie .tipp. Platz bleibt stabil, nichts springt. */
.bewegt:not(.ruhig) .tippbar{position:relative}
.bewegt:not(.ruhig) .tippbar>.voll{visibility:hidden}
.bewegt:not(.ruhig) .tippbar>.tipp{position:absolute;left:0;top:0;right:0;bottom:0;padding:inherit;box-sizing:border-box;overflow:hidden}
.bewegt:not(.ruhig) .tippbar.tippt>.tipp::after{content:"";display:inline-block;width:2px;height:.9em;vertical-align:-.1em;margin-left:3px;background:currentColor;animation:tipp-blink .8s steps(2) infinite}
@keyframes tipp-blink{to{opacity:0}}
.bewegt:not(.ruhig) .tippbar.fertig>.voll{visibility:visible}
.bewegt:not(.ruhig) .tippbar.fertig>.tipp{display:none}

/* ---- Signatur: Chat-Choreographie (Frage tippt, Arbeits-Punkt, Antwort absatzweise, Quellen gestaffelt) ---- */
.bewegt:not(.ruhig) .demo.bereit .demo-arbeit,
.bewegt:not(.ruhig) .demo.bereit .demo-antwort p,
.bewegt:not(.ruhig) .demo.bereit .demo-extra>*{opacity:0;transform:translateY(8px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.bewegt:not(.ruhig) .demo.bereit .zeigt,.bewegt:not(.ruhig) .demo.bereit .demo-antwort p.zeigt{opacity:1;transform:none}
.bewegt:not(.ruhig) .demo.bereit .demo-arbeit i{animation-play-state:paused}
.bewegt:not(.ruhig) .demo.bereit .demo-arbeit.zeigt i{animation-play-state:running}
.demo-eingabe b{transition:transform .2s ease}
.demo.fertig .demo-eingabe b{transform:scale(1.08)}

/* Ruhig: keine Dauer-Animationen */
.ruhig .demo-arbeit i{animation:none;transform:none;opacity:1}
.ruhig .tippbar>.tipp::after{animation:none}
.ruhig .frage[open] p{animation:none}
.ruhig .karte .ikone,.ruhig .knopf,.ruhig .demo-eingabe b{transition:none}

/* Handy: Demo in voller Breite, Schrift mindestens 14 px */
@media (max-width:760px){
  .demo{max-width:100%}
  .demo-gruss,.demo-arbeit,.demo-quelle,.demo-wie,.demo-chips span,.demo-note,.demo-eingabe span,
  .demo-rail,.demo-rail .eintrag,.demo-rail .gruppe{font-size:14px}
  .demo-rail .gruppe{letter-spacing:.06em}
  .demo-frage,.demo-antwort{font-size:15px;line-height:1.5}
  .demo-extra{gap:8px}
  .demo-quelle,.demo-wie{max-width:100%;white-space:normal;line-height:1.35}
}

/* Dunkler Abschnitt: Schritte-Kacheln (eigenkern.css gibt .schritt weissen Grund) auf Stahl stellen, sonst weiss auf weiss */
.abschnitt-dunkel .schritte{background:var(--stahl-linie);border-color:var(--stahl-linie)}
.abschnitt-dunkel .schritt{background:var(--stahl-2)}
.abschnitt-dunkel .schritt h3{color:#fff}