/* ==========================================================================
   ask-tino – Styles
   1. Tokens & Themes   2. Basis   3. Layout   4. Hero   5. Chat
   6. Eingabe           7. Menü & Dialog       8. Unterseiten
   9. Tablet            10. Desktop
   Keine externen Ressourcen, nur System-Schriften (DSGVO).
   ========================================================================== */

/* 1. Tokens & Themes ------------------------------------------------------ */
:root {
  --font: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ink: #0d1726;
  --text: #243042;
  --muted: #5b6676;
  --line: #e3e9f0;
  --surface: #ffffff;
  --surface-2: #f4f7fa;

  --radius: 18px;
  --content-width: 42rem;

  /* Neutrales Theme (Standard, auch ohne Einladung) */
  --brand: #123b5c;
  --brand-deep: #08192b;
  --brand-light: #1f5f8b;
  --accent: #14a3a3;
  --accent-soft: #7fe0d8;
  --on-accent: #08192b;
  --soft: #edf4f6;

  --hero-gradient: radial-gradient(120% 90% at 100% 0%, var(--brand-light) 0%, var(--brand) 15%, var(--brand-deep) 100%);
}

/* Rädlinger-Theme (Variablen werden vom Seiten-Attribut data-theme gewählt) */
[data-theme="jr"] {
  --brand: #003e9c;
  --brand-deep: #021b47;
  --brand-light: #1a5bd0;
  --accent: #ee7203;
  --accent-soft: #ffb36b;
  --on-accent: #021b47; /* dunkle Schrift auf Orange: Kontrast ≥ 4.5:1 */
  --soft: #eef3fa;
}

/* CipSoft: tiefes Grün mit Neongrün, dunkle Schrift auf dem Akzent */
[data-theme="cipsoft"] {
  --brand: #16241b;
  --brand-deep: #070b08;
  --brand-light: #2c4a35;
  --accent: #8ee04a;
  --accent-soft: #b9f08a;
  --on-accent: #0b120d;
  --soft: #eef5ea;
}

/* Syskron: Industrieblau mit Cyan */
[data-theme="syskron"] {
  --brand: #0b4c8c;
  --brand-deep: #05213f;
  --brand-light: #2d86d6;
  --accent: #22c3e6;
  --accent-soft: #8be4f5;
  --on-accent: #04203a;
  --soft: #e8f3fa;
}

/* 2. Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--surface); }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
}

a { color: var(--brand); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

button, textarea { font: inherit; color: inherit; }

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: .5rem .8rem; border-radius: 8px; background: var(--surface); color: var(--ink);
}
.skip-link:focus { top: 1rem; }

/* 3. Layout (Handy zuerst) ------------------------------------------------ */
.layout { min-height: 100dvh; display: flex; flex-direction: column; }

/* 4. Hero ----------------------------------------------------------------- */
.hero { background: var(--surface); }

.hero-head {
  position: relative;
  padding: max(1.5rem, env(safe-area-inset-top)) 1.25rem 1.75rem;
  color: #fff;
  background: var(--hero-gradient);
}
.hero-head::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 4.5rem; height: 6px; background: var(--accent);
}

.kicker { margin: 0; font-size: .85rem; font-weight: 500; letter-spacing: .01em; opacity: .8; }

.hero-title {
  margin: .9rem 0 .7rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 7.2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.012em;
}
/* Hervorhebungen („JR“, „Wert“) in der Logofarbe; große Schrift, daher reicht
   Kontrast ≥ 3:1 (WCAG AA für große Schrift). */
.hero-title em { font-style: normal; font-weight: 600; color: var(--accent); }
/* Neutrales Theme: dunkles Petrol wäre auf dem Verlauf zu schwach – dort die helle Variante. */
[data-theme="neutral"] .hero-title em { color: var(--accent-soft); }

.hero-intro { margin: 0; max-width: 34rem; font-size: .95rem; opacity: .9; }

.resume-button {
  margin-top: 1rem; min-height: 2.75rem; padding: .5rem 1.1rem;
  border: 1px solid var(--accent); border-radius: 999px;
  background: transparent; color: #fff; font-size: .95rem; font-weight: 600; cursor: pointer;
}
.resume-button:hover { background: rgb(255 255 255 / 10%); }
.resume-button[hidden] { display: none; }

.chips { list-style: none; margin: 0; padding: 1rem 1.25rem .5rem; display: grid; gap: .5rem; }

.chip {
  display: flex; align-items: center; gap: .7rem;
  width: 100%; min-height: 2.9rem;
  padding: .65rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  /* Dunkler Grund, weiße Schrift (≈ 16:1), Strich in der Akzentfarbe. */
  background: var(--brand-deep);
  color: #fff;
  text-align: left;
  font-size: .95rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.chip::before {
  content: ""; flex: none;
  width: .9rem; height: 2px; border-radius: 2px;
  background: var(--accent);
}
.chip:hover { border-color: var(--accent); }

/* CipSoft: eckige Chips mit quadratischem Punkt, Kicker wie ein Terminal (Handy und Desktop).
   Grund bleibt dunkel, Schrift weiß – auch am Handy gut lesbar. */
[data-theme="cipsoft"] .kicker { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; letter-spacing: .02em; }
[data-theme="cipsoft"] .chip { border-radius: 4px; }
[data-theme="cipsoft"] .chip::before { width: 6px; height: 6px; border-radius: 0; }

.hero-links { padding: .5rem 1.25rem 1rem; font-size: .85rem; color: var(--muted); }
.hero-links a { color: inherit; }

.in-conversation .hero { display: none; }
/* Handy-Startansicht nach „←“: nur Begrüßung und Vorschläge, der Verlauf wartet hinter „Weiter zum Chat“. */
@media (max-width: 959.98px) {
  body:not(.in-conversation) .log { display: none; }
}

/* 5. Chat ----------------------------------------------------------------- */
.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.chat-bar {
  position: sticky; top: 0; z-index: 5;
  display: none; align-items: center; gap: .75rem;
  padding: max(.75rem, env(safe-area-inset-top)) 1rem .75rem;
  color: #fff;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
}
.chat-bar::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 3.25rem; height: 3px; background: var(--accent);
}
.in-conversation .chat-bar { display: flex; }

.chat-title { flex: 1; margin: 0; font-size: .95rem; font-weight: 600; }

.ghost-button { display: none; }

.menu-button {
  min-width: 2.75rem; min-height: 2.75rem;
  padding: .2rem .55rem; border: 0; border-radius: 10px;
  background: transparent; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.menu-button:hover, .menu-button[aria-expanded="true"] { background: rgb(255 255 255 / 12%); }
.questions-button {
  min-height: 2.25rem; padding: .2rem .85rem;
  border: 1px solid rgb(255 255 255 / 40%); border-radius: 999px;
  color: #fff; font-size: .9rem; font-weight: 500;
}
.back-button { min-width: 2.25rem; margin-left: -.45rem; padding: .2rem .35rem; font-size: 1.3rem; }
.questions-menu { min-width: min(20rem, calc(100vw - 1.5rem)); }

.log {
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}

.msg { overflow-wrap: anywhere; }

.msg-user {
  align-self: flex-end;
  max-width: 85%;
  padding: .6rem .95rem;
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  background: var(--soft);
  color: var(--ink);
  white-space: pre-wrap;
}

.msg-assistant { padding-left: .95rem; border-left: 2px solid var(--accent); color: var(--text); }
.msg-assistant p { margin: 0 0 .65rem; }
.msg-assistant ul, .msg-assistant ol { margin: .25rem 0 .65rem; padding-left: 1.25rem; }
.msg-assistant li + li { margin-top: .2rem; }
.msg-assistant strong { font-weight: 650; color: var(--ink); }
.msg-body > :last-child { margin-bottom: 0; }

.msg-note { display: block; margin-top: .35rem; font-size: .8rem; color: var(--muted); }

.cursor {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  vertical-align: -.15em; background: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}

.typing { display: inline-flex; gap: .3rem; padding: .4rem 0; }
.typing span {
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--muted); opacity: .3; animation: pulse 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }

@keyframes blink { to { visibility: hidden; } }
@keyframes pulse { 50% { opacity: 1; } }

/* Statusanzeige der Site in der Kopfzeile: nur Desktop mit Firmen-Theme (siehe Media Query unten). */
.site-road { display: none; }

@keyframes digger-dig { from { transform: rotate(-5deg); } to { transform: rotate(9deg); } }
@keyframes digger-tread { to { stroke-dashoffset: -4; } }

@media (prefers-reduced-motion: reduce) {
  .cursor, .typing span { animation: none; }
  .typing span { opacity: .7; }
  .chip { transition: none; }
}

.notice {
  width: calc(100% - 2.2rem); max-width: var(--content-width);
  margin: 0 auto .5rem; padding: .65rem .9rem;
  border: 1px solid #f6c89b; border-radius: 12px;
  background: #fff4e8; color: #6b3200; font-size: .9rem;
}
.notice[hidden] { display: none; }

/* 6. Eingabe -------------------------------------------------------------- */
.composer-wrap {
  position: sticky; bottom: 0; z-index: 4;
  padding: .5rem 1rem max(.75rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface) 80%, transparent);
}

.composer {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex; align-items: flex-end; gap: .5rem;
  padding: .4rem .4rem .4rem 1rem;
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface-2);
}
.composer:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
/* 1rem Schriftgröße verhindert das automatische Zoomen auf iOS. */
.composer textarea {
  flex: 1; min-width: 0; max-height: 10rem; padding: .5rem 0;
  border: 0; background: transparent; resize: none; outline: none;
  font-size: 1rem; line-height: 1.4;
}
.composer textarea::placeholder { color: #6f7988; }

.counter { align-self: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.send {
  flex: none; min-height: 2.5rem; padding: .55rem 1.15rem;
  border: 0; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 650; cursor: pointer;
}
.send:hover { filter: brightness(1.06); }
.send:disabled { opacity: .55; cursor: progress; filter: none; }

.fineprint { max-width: var(--content-width); margin: .5rem auto 0; font-size: .75rem; line-height: 1.45; color: var(--muted); text-align: center; }

/* 7. Menü & Dialog -------------------------------------------------------- */
.menu {
  position: absolute; right: .75rem; top: calc(100% + .25rem);
  display: grid; min-width: 14rem; padding: .35rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 12px 32px rgb(2 27 71 / 18%);
}
.menu[hidden] { display: none; }
.menu a, .menu button {
  display: block; padding: .7rem .75rem; border: 0; border-radius: 8px;
  background: none; color: inherit; text-align: left; text-decoration: none;
  font-size: .95rem; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--surface-2); }
.menu [data-action="clear"] { color: #b42318; }
[data-action="clear"]:disabled { opacity: .5; cursor: not-allowed; }

dialog {
  max-width: min(26rem, calc(100vw - 2rem)); padding: 1.5rem;
  border: 0; border-radius: 16px; color: var(--ink); background: var(--surface);
  box-shadow: 0 24px 60px rgb(2 27 71 / 30%);
}
dialog::backdrop { background: rgb(2 27 71 / 45%); }
dialog h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
dialog p { margin: 0 0 1.25rem; color: var(--muted); }

.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin: 0; }

.button {
  min-height: 2.5rem; padding: .55rem 1.1rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-weight: 600; cursor: pointer;
}
.button:hover { border-color: var(--muted); }
.button-danger { border-color: #b42318; background: #b42318; color: #fff; }
.button-danger:hover { border-color: #912018; background: #912018; }

/* 8. Unterseiten (Gate, Architektur, Kontakt, Datenschutz) ------------- */
.page-hero, .gate {
  position: relative;
  color: #fff;
  background: var(--hero-gradient);
}
.page-hero::after, .gate::after {
  content: ""; position: absolute; left: 1.25rem; bottom: 0;
  width: 5rem; height: 6px; background: var(--accent);
}

.page-hero { padding: max(2rem, env(safe-area-inset-top)) 1.25rem 2.25rem; }
.page-hero-inner, .article { max-width: 46rem; margin: 0 auto; }
.page-hero h1 {
  margin: .75rem 0 0;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.1;
}
.page-hero p { margin: .75rem 0 0; opacity: .88; max-width: 38rem; }
.back-link { color: #fff; opacity: .8; font-size: .9rem; text-decoration: none; }
.back-link:hover { opacity: 1; text-decoration: underline; }

.article { max-width: calc(46rem + 2.5rem); padding: 2rem 1.25rem 3rem; color: var(--text); }
.article h2 { margin: 2.25rem 0 .5rem; font-size: 1.25rem; color: var(--ink); }
.article h2:first-child { margin-top: 0; }
.article p, .article li { max-width: 40rem; }
.article li + li { margin-top: .3rem; }
.article strong { color: var(--ink); }
.article code { padding: .1rem .35rem; border-radius: 6px; background: var(--surface-2); font-size: .9em; }

.todo { padding: .05rem .35rem; border-left: 3px solid var(--accent); background: #fff4e8; color: #6b3200; }

.page-footer { padding: 1.25rem; border-top: 1px solid var(--line); text-align: center; font-size: .85rem; color: var(--muted); }
.page-footer a { color: inherit; }

.gate { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.gate-card { max-width: 32rem; }
.gate h1 {
  margin: .75rem 0 1rem;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1;
}
.gate p { opacity: .9; }
.gate a { color: var(--accent-soft); }
.gate-links { margin-top: 2.5rem; font-size: .85rem; opacity: .75; }
.gate-links a { color: #fff; }

.diagram { display: block; width: 100%; height: auto; margin: 1.25rem 0; }
.diagram .box { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.diagram .box-main { fill: var(--soft); stroke: var(--brand); stroke-width: 1.5; }
.diagram .label { font: 600 14px var(--font); fill: var(--ink); }
.diagram .small { font: 12px var(--font); fill: var(--muted); }
.diagram .arrow { stroke: var(--accent); stroke-width: 2; fill: none; }
.diagram .arrow-head { fill: var(--accent); }

/* 9. Tablet: fließender Übergang, Chips zweispaltig ------------------------ */
@media (min-width: 600px) and (max-width: 959.98px) {
  .hero-head { padding-left: 2rem; padding-right: 2rem; }
  .chips { grid-template-columns: 1fr 1fr; padding-left: 2rem; padding-right: 2rem; }
  .hero-links { padding-left: 2rem; padding-right: 2rem; }
}

/* 10. Desktop ------------------------------------------------------------- */
@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: minmax(20rem, 36%) 1fr;
    /* auf ganze Pixel runden, damit der senkrechte orange Strich nicht verwischt (ältere Browser ignorieren die Zeile) */
    grid-template-columns: minmax(20rem, round(down, 36%, 1px)) 1fr;
    height: 100dvh;
  }

  .hero, .in-conversation .hero {
    position: relative;
    display: flex; flex-direction: column;
    height: 100dvh; overflow-y: auto;
    color: #fff;
    background: var(--hero-gradient);
  }
  .hero::after {
    content: ""; position: absolute; left: 2.25rem; bottom: 0;
    width: 5rem; height: 3px; background: var(--accent); /* gleiche Stärke wie die Striche am Chat */
  }
  .hero-head { padding: 2.75rem 2.25rem 0; background: none; }
  .hero-head::after { display: none; }
  .hero-title { font-size: clamp(2.1rem, 2.8vw, 2.9rem); }

  .chips { padding: 1.75rem 2.25rem 0; }
  /* Auf dem Verlauf hebt ein heller Rand die dunklen Vorschläge ab. */
  .chip { border-color: rgb(255 255 255 / 22%); }

  .hero-links { margin-top: auto; padding: 1.5rem 2.25rem 2rem; color: rgb(255 255 255 / 72%); }

  .chat { height: 100dvh; }

  .chat-bar, .in-conversation .chat-bar {
    position: relative; display: flex;
    padding: .9rem 1.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--surface); color: var(--muted);
  }
  .chat-bar::after { display: none; }
  .chat-title { color: var(--ink); font-weight: 500; }

  /* Firmen-Themes: Band setzt die helle Ecke der Seitenleiste fort und wird nach rechts dunkler;
     die Akzentlinie läuft unter dem Band und knickt an der Seitenleiste nach unten ab. */
  html:not([data-theme="neutral"]) .chat-bar {
    height: 56px; padding: 0 1.75rem;
    border-bottom: 3px solid var(--accent);
    background:
      linear-gradient(90deg, transparent, var(--brand) 40%, var(--brand-deep)),
      /* senkrecht wie der rechte Rand der Seitenleiste in dieser Höhe (nahtloser Übergang) */
      linear-gradient(180deg, var(--brand-light), color-mix(in srgb, var(--brand-light) 65%, var(--brand)));
    color: #fff;
  }
  html:not([data-theme="neutral"]) .chat { position: relative; }
  html:not([data-theme="neutral"]) .chat::before {
    content: ""; position: absolute; z-index: 6;
    top: 53px; bottom: 0; left: 0; width: 3px; /* 53px = Unterkante des Bands minus Strichstärke */
    background: var(--accent);
  }
  html:not([data-theme="neutral"]) .chat-title { flex: none; color: #fff; }
  html:not([data-theme="neutral"]) .site-road {
    display: block; position: relative; flex: 1; align-self: stretch; margin: 0 2rem;
  }
  /* Bagger (JR): Ruhe: links geparkt. Beim Antworten (body.is-busy) in die Mitte fahren und baggern. */
  .digger { position: absolute; bottom: 0; left: 0; transition: left 1.4s ease-in-out; }
  .is-busy .digger { left: calc(50% - 32px); }
  .digger-arm { transform-box: view-box; transform-origin: 33px 17px; }
  .is-busy .digger-arm { animation: digger-dig .8s ease-in-out 1.4s infinite alternate; }
  .site-road.driving .digger-tread { animation: digger-tread .35s linear infinite; }

  /* CipSoft: Release-Pipeline im Pixel-Stil. Stufen leuchten beim Antworten nacheinander auf,
     der Balken füllt sich in Pixelschritten; „live ✓“ erst nach erfolgreicher Antwort (body.is-done). */
  .pipe {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 5px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .72rem;
  }
  .stages { display: flex; gap: 6px; align-items: center; }
  .stage { padding: 2px 7px; border: 2px solid rgb(255 255 255 / 25%); color: rgb(255 255 255 / 55%); }
  .pipe .arrow { color: rgb(255 255 255 / 30%); }
  .pbar { height: 8px; padding: 1px; border: 2px solid rgb(255 255 255 / 25%); }
  .pfill { width: 0; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px); }
  .is-busy .pfill { animation: pipe-fill 4.8s steps(24) forwards; }
  .is-busy .stage { animation: stage-on .2s steps(1) forwards; }
  .is-busy .stage.s-test { animation-delay: 1.6s; }
  .is-busy .stage.s-deploy { animation-delay: 3.2s; }
  .s-live { border-style: dashed; }
  .is-busy .stage.s-live { animation: none; }
  .is-done .stage { border-color: var(--accent); color: var(--accent); }
  .is-done .pfill { width: 100%; }
  .is-done .stage.s-live { border-style: solid; background: var(--accent); color: var(--on-accent); animation: live-blink .5s steps(2) 3; }

  /* Syskron: Flasche auf dem Förderband. Beim Antworten fährt sie unter die Abfüllung und füllt sich;
     bei is-done ist sie voll, bekommt den Deckel und fährt nach rechts. Danach springt sie ohne Übergang zurück. */
  .line { position: absolute; inset: 0; }
  .belt {
    position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; border-radius: 4px;
    background: #3a4a5c repeating-linear-gradient(90deg, #8fa2b6 0 3px, transparent 3px 10px);
    background-size: 10px 100%;
  }
  .site-road.driving .belt { animation: belt-run .35s linear infinite; }
  .nozzle { position: absolute; left: calc(50% - 7px); top: 0; width: 14px; height: 14px; border-radius: 0 0 3px 3px; background: #c9d6e3; }
  .nozzle::before { content: ""; position: absolute; left: -10px; top: 0; width: 34px; height: 4px; background: #c9d6e3; }
  .stream { position: absolute; left: calc(50% - 1.5px); top: 14px; width: 3px; height: 0; background: var(--accent); }
  .is-busy .stream { animation: stream-on 0s 1.2s forwards; } /* erst wenn die Flasche steht */
  .bottle { position: absolute; left: 0; bottom: 11px; width: 16px; height: 30px; }
  .is-busy .bottle { left: calc(50% - 8px); animation: bottle-in 1.2s ease-in-out; }
  .is-done .bottle { left: calc(100% - 16px); transition: left 1.2s ease-in-out; }
  .liquid { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
  .is-busy .liquid { animation: bottle-fill 8s linear 1.2s forwards; }
  .is-done .liquid { transform: scaleY(1); }
  .cap { opacity: 0; transform: translateY(-6px); }
  .is-done .cap { opacity: 1; transform: none; transition: transform .25s, opacity .25s; }

  @keyframes pipe-fill { to { width: 100%; } }
  @keyframes stage-on { to { border-color: var(--accent); color: var(--accent); } }
  @keyframes live-blink { 50% { background: transparent; color: var(--accent); } }
  @keyframes belt-run { to { background-position: -10px 0; } }
  @keyframes stream-on { to { height: 14px; } }
  @keyframes bottle-in { from { left: 0; } }
  @keyframes bottle-fill { to { transform: scaleY(.9); } }

  .ghost-button {
    display: inline-block; padding: .35rem .85rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--muted);
    font-size: .85rem; cursor: pointer;
  }
  .ghost-button:hover { border-color: var(--muted); color: var(--ink); }
  html:not([data-theme="neutral"]) .ghost-button { border-color: rgb(255 255 255 / 35%); background: transparent; color: #fff; }
  html:not([data-theme="neutral"]) .ghost-button:hover { border-color: #fff; color: #fff; }

  .menu-button, .menu, .resume-button { display: none; }

  .log {
    max-width: none; margin: 0;
    padding: 1.75rem max(1.75rem, calc((100% - var(--content-width)) / 2));
    overflow-y: auto;
  }
  .log:empty::before {
    content: "Stell eine Frage oder wähle links einen Vorschlag.";
    margin: auto; color: var(--muted);
  }

  .composer-wrap { position: static; padding: .5rem 1.75rem 1rem; background: none; }

  .page-hero { padding: 3rem 1.25rem 2.75rem; }
  .page-hero::after, .gate::after { left: max(1.25rem, calc((100% - 46rem) / 2)); }
}

/* Steht bewusst am Ende, damit es die Desktop-Animationen überschreibt:
   ohne Bewegung springen Bagger, Pipeline und Flasche nur zwischen den Zuständen. */
@media (prefers-reduced-motion: reduce) {
  .digger { transition: none; }
  .digger-arm, .digger-tread, .is-busy .digger-arm, .site-road.driving .digger-tread { animation: none; }

  .pipe *, .bottle, .liquid, .cap, .stream, .belt,
  .is-busy .pfill, .is-busy .stage, .is-busy .bottle, .is-busy .liquid, .is-busy .stream,
  .is-done .stage.s-live, .is-done .bottle, .is-done .cap, .site-road.driving .belt { animation: none; transition: none; }
  /* Zustände bleiben sichtbar: Stufen leuchten beim Antworten, die Flasche steht unter der Abfüllung. */
  .is-busy .stage:not(.s-live) { border-color: var(--accent); color: var(--accent); }
  .is-busy .stream { height: 14px; }
  .is-busy .liquid { transform: scaleY(.5); }
}