/* Halo · Startseiten-Demo („Aus Dokumenten werden Antworten")
 * -----------------------------------------------------------
 * Zwei Panels in einer Karte: links reinlegen, rechts sehen, was Halo daraus
 * macht. Die rechte Seite bildet bewusst die Optik des echten Tresors ab
 * (assets/vault.css) — was hier gezeigt wird, sieht im Konto genauso aus.
 *
 * Farben ausschließlich über die Tokens aus assets/tokens.css.
 * Bewegung ausschließlich in Klassen, die @media (prefers-reduced-motion)
 * am Ende dieser Datei wieder abschaltet.
 */

/* ---- Rahmen ------------------------------------------------------------ */
.demo-wrap { max-width: 1060px; margin: 0 auto; padding: 80px 20px 0; text-align: center; }
@media (max-width: 640px) { .demo-wrap { padding-top: 56px; } }

.demo-badge {
  display: inline-block; padding: 5px 14px; margin-bottom: 16px;
  background: var(--c-green-soft); color: var(--c-green-deep);
  border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em;
}

/* Auf der Startseite ist die Demo-Überschrift ein <h2> (die h1 steht im Hero
   darüber), auf eigenständigen Demo-Seiten bleibt sie eine <h1>. Beide Ebenen
   sehen gleich aus — nur die Position im Dokument unterscheidet sich. */
.demo-wrap h1, .demo-wrap h2 {
  font-size: 36px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
  color: var(--c-navy-deep); margin: 0 0 14px;
}
@media (max-width: 640px) { .demo-wrap h1, .demo-wrap h2 { font-size: 28px; } }
/* <em>-Akzent: siehe Basisregel in tokens.css. */

.demo-sub {
  font-size: 18px; line-height: 1.6; color: var(--c-text-muted);
  max-width: 620px; margin: 0 auto 40px;
}

/* ---- Die Karte --------------------------------------------------------- */
.demo-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--c-surface); border: 1px solid var(--c-track);
  border-radius: var(--radius-xl); box-shadow: var(--shadow); overflow: hidden; text-align: left;
}
.demo-panel { padding: 24px; min-width: 0; }
.demo-panel + .demo-panel { border-left: 1px solid var(--c-track); background: var(--c-bg); }

/* ---- Links: Ablegen ---------------------------------------------------- */
.demo-drop {
  border: 2px dashed var(--c-track); border-radius: var(--radius-lg);
  padding: 30px 18px; text-align: center; background: var(--c-bg);
  transition: border-color .18s, background .18s;
}
.demo-drop.is-over { border-color: var(--c-green); background: var(--c-green-soft); }
/* font-size steuert die Icon-Größe: .ico ist 1em breit und hoch. */
.demo-drop-ico { display: block; font-size: 32px; margin: 0 auto 10px; color: var(--c-navy); opacity: .55; }
.demo-drop h2 {
  font-size: 16px; font-weight: 600; color: var(--c-navy-deep); margin: 0 0 4px;
}
.demo-drop p { font-size: 13px; color: var(--c-text-muted); margin: 0; line-height: 1.5; }

.demo-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.demo-pick {
  display: inline-block; margin-top: 12px; padding: 9px 18px;
  background: var(--c-surface); border: 1px solid var(--c-track); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--c-navy); cursor: pointer;
}
.demo-pick:hover { background: var(--c-surface-soft); }
.demo-file:focus-visible + .demo-pick { outline: 2px solid var(--c-green); outline-offset: 2px; }

.demo-privacy {
  font-size: 12px; line-height: 1.5; color: var(--c-text-muted); margin: 10px 2px 0;
}
.demo-privacy a { color: inherit; }

/* ---- Links: Beispiel-Kacheln ------------------------------------------- */
.demo-tiles-label {
  font-size: 13px; color: var(--c-text-muted); margin: 20px 0 8px; font-weight: 600;
}
.demo-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.demo-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; background: var(--c-surface); cursor: pointer;
  border: 1px solid var(--c-track); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--c-navy-deep);
  transition: border-color .16s, transform .16s;
}
.demo-tile:hover { border-color: var(--c-green); transform: translateY(-2px); }
.demo-tile:focus-visible { outline: 2px solid var(--c-green); outline-offset: 2px; }
.demo-tile[aria-pressed="true"] { border-color: var(--c-green); background: var(--c-green-soft); }
.demo-tile-ico { font-size: 24px; line-height: 1; }
.demo-tile small { font-weight: 500; color: var(--c-text-muted); font-size: 12px; }

.demo-caption { font-size: 13px; color: var(--c-text-muted); margin: 12px 0 0; text-align: center; }

/* ---- Links: Bestätigen vor dem echten Upload --------------------------- */
/* Erscheint erst, wenn eine ECHTE Datei gewählt wurde. Die Einwilligung nach
   Art. 9 DSGVO braucht eine gesonderte bestätigende Handlung — sie steht
   deshalb hier, unmittelbar vor der Übertragung, und nennt die konkrete
   Datei. Ein Hinweistext allein wäre keine Einwilligung. */
.demo-confirm { border: 1px solid var(--c-track); border-radius: var(--radius-lg); padding: 18px; background: var(--c-surface); }
.demo-confirm-file {
  display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
  border-bottom: 1px solid var(--c-track); margin-bottom: 14px;
}
.demo-confirm-ico {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--c-surface-soft); color: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  /* 20px, nicht mehr 11px: das Feld trug früher ein Textkürzel, jetzt ein Icon. */
  font-size: 20px;
}
/* Wie oben: beide sind <span> in einem <span> und müssen umbrechen. */
.demo-confirm-name { display: block; font-size: 14px; font-weight: 600; color: var(--c-navy-deep); word-break: break-word; }
.demo-confirm-meta { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }

.demo-consent {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13px; line-height: 1.55; color: var(--c-text);
}
.demo-consent input { margin-top: 3px; flex-shrink: 0; }
.demo-consent-note { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 5px; }

.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.demo-btn {
  padding: var(--btn-pad-md); border: none; border-radius: 999px; cursor: pointer;
  background: var(--c-green); color: #fff; font-family: inherit;
  font-size: 15px; font-weight: 600;
}
.demo-btn:hover:not(:disabled) { background: var(--c-green-hover); }
.demo-btn:disabled { background: var(--c-surface-soft); color: var(--c-text-muted); cursor: not-allowed; }
.demo-btn-ghost {
  background: none; border: 1px solid var(--c-track); color: var(--c-text-muted);
  padding: var(--btn-pad-md); border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 14px;
}
.demo-btn-ghost:hover { background: var(--c-surface-soft); }

/* ---- Rechts: leer, lädt, Ergebnis -------------------------------------- */
.demo-empty { text-align: center; padding: 46px 16px; }
.demo-empty-ico { font-size: 32px; opacity: .35; margin-bottom: 12px; }
.demo-empty h2 { font-size: 16px; font-weight: 600; color: var(--c-navy-deep); margin: 0 0 6px; }
.demo-empty p { font-size: 14px; color: var(--c-text-muted); margin: 0; line-height: 1.55; max-width: 280px; margin-inline: auto; }

/* Skelett statt Spinner: ein Spinner sagt „warte", ein Skelett sagt „hier
   entsteht gerade dein Ergebnis" — und zeigt schon die Form davon. */
.demo-skel-line, .demo-skel-block {
  background: linear-gradient(90deg, var(--c-surface-soft) 25%, var(--c-track) 37%, var(--c-surface-soft) 63%);
  background-size: 400% 100%; border-radius: var(--radius-sm);
  animation: demo-shimmer 1.4s ease-in-out infinite;
}
.demo-skel-line { height: 12px; margin-bottom: 10px; }
.demo-skel-block { height: 58px; margin-bottom: 12px; border-radius: var(--radius-md); }
@keyframes demo-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.demo-skel-status { font-size: 13px; color: var(--c-text-muted); margin: 4px 0 16px; font-weight: 600; }

.demo-result { animation: demo-rise .32s ease-out both; }
@keyframes demo-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.demo-result-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.demo-result-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md);
  background: var(--c-green-soft); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
/* display:block ist nötig, nicht kosmetisch: beides sind <span> in einem
   <span> (damit der Kopf als eine Einheit umbricht). Ohne die Umschaltung
   laufen Dokumenttyp und Kategorie in einer Zeile ineinander. */
.demo-result-typ { display: block; font-size: 16px; font-weight: 700; color: var(--c-navy-deep); line-height: 1.3; }
.demo-result-kat { display: block; font-size: 13px; color: var(--c-text-muted); margin-top: 3px; }

.demo-badge-ok {
  display: inline-block; padding: 2px 9px; border-radius: 999px; margin-bottom: 10px;
  background: var(--c-green-soft); color: var(--c-green-deep); font-size: 12px; font-weight: 700;
}

.demo-summary { font-size: 14px; line-height: 1.6; color: var(--c-text); margin: 0 0 14px; }

.demo-fields { margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.demo-fields dt { color: var(--c-text-muted); }
.demo-fields dd { margin: 0; color: var(--c-text); font-weight: 600; word-break: break-word; }

/* Unsicher ausgelesener Wert. Bewusst dieselbe Amber-Familie wie die Frist:
   „schau da nochmal hin", nicht „Fehler". */
.demo-pruefen {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--c-amber-soft); color: var(--c-amber-deep);
  font-size: 11px; font-weight: 700; vertical-align: middle;
}

.demo-links-label, .demo-frist-label {
  font-size: 12px; font-weight: 700; color: var(--c-text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 6px;
}
.demo-links { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.demo-link {
  padding: 5px 11px; border-radius: 999px; background: var(--c-surface-soft);
  font-size: 13px; color: var(--c-navy); font-weight: 600;
}
.demo-link:before { content: "↗"; margin-right: 5px; opacity: .6; }

.demo-frist {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 13px; border-radius: var(--radius-md);
  background: var(--c-amber-soft); color: var(--c-amber-deep);
  font-size: 13px; font-weight: 600;
}

/* Erinnerungshinweis am Frist-Chip. Hieß bis Phase 4 „in Vorbereitung" —
   seit die Erinnerungen ausgeliefert sind, steht dort die tatsächliche
   Vorlaufzeit. Die Klasse bleibt als neutrale Nebenauszeichnung erhalten:
   was hier steht, muss das Produkt einlösen. */
.demo-erinnerung, .demo-soon {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--c-surface-soft); color: var(--c-text-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
}

/* ---- Rechts: Stapel-Ergebnis („Ordner") -------------------------------- */
.demo-batch-head { font-size: 13px; color: var(--c-text-muted); margin: 0 0 12px; }
.demo-batch-head strong { color: var(--c-navy-deep); }
.demo-batch-group { margin-bottom: 12px; }
.demo-batch-group h3 {
  font-size: 12px; font-weight: 700; color: var(--c-text-muted);
  margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
.demo-batch-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; margin-bottom: 5px;
  background: var(--c-surface); border: 1px solid var(--c-track); border-radius: var(--radius-md);
  font-size: 13px; color: var(--c-text);
}
.demo-batch-item.is-dup { background: var(--c-surface-soft); color: var(--c-text-muted); }
.demo-batch-item-name { flex: 1; min-width: 0; word-break: break-word; }
.demo-batch-flag { font-size: 12px; font-weight: 700; color: var(--c-amber-deep); white-space: nowrap; }

/* ---- Rechts: Abschluss ------------------------------------------------- */
.demo-cta-box { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-track); }
.demo-cta {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  background: var(--c-green); color: #fff; text-decoration: none;
  font-size: 15px; font-weight: 600;
}
.demo-cta:hover { background: var(--c-green-hover); }
.demo-cta-meta { font-size: 13px; color: var(--c-text-muted); margin: 10px 0 0; line-height: 1.55; }

.demo-note {
  font-size: 12px; color: var(--c-text-muted); margin: 14px 0 0; line-height: 1.55;
  padding-top: 12px; border-top: 1px solid var(--c-track);
}

.demo-error {
  padding: 13px 15px; border-radius: var(--radius-md); margin-bottom: 12px;
  background: var(--c-red-soft); color: var(--c-red-deep);
  font-size: 14px; line-height: 1.55;
}
.demo-error strong { display: block; margin-bottom: 3px; }

/* ---- Mobil ------------------------------------------------------------- */
@media (max-width: 820px) {
  .demo-wrap { padding: 34px 16px 12px; }
  .demo-wrap h1, .demo-wrap h2 { font-size: 32px; }
  .demo-sub { font-size: 16px; margin-bottom: 22px; }
  .demo-card { grid-template-columns: 1fr; }
  .demo-panel { padding: 18px; }
  .demo-panel + .demo-panel { border-left: none; border-top: 1px solid var(--c-track); }

  /* Drop-Fläche wird zur Schaltfläche: auf einem Telefon zieht niemand eine
     Datei irgendwohin. */
  .demo-drop { padding: 20px 14px; }
  .demo-drop p { display: none; }

  /* Kacheln scrollen seitlich, statt auf ein Drittel Breite zu schrumpfen.
     Negative Ränder, damit die Reihe optisch am Kartenrand beginnt. */
  .demo-tiles {
    display: flex; overflow-x: auto; gap: 8px;
    margin: 0 -18px; padding: 2px 18px 4px;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .demo-tiles::-webkit-scrollbar { display: none; }
  .demo-tile { flex: 0 0 132px; scroll-snap-align: start; }
  .demo-fields { grid-template-columns: 1fr; gap: 2px 0; }
  .demo-fields dd { margin-bottom: 8px; }
}

/* ---- Bewegung abschaltbar --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .demo-skel-line, .demo-skel-block { animation: none; background: var(--c-surface-soft); }
  .demo-result { animation: none; }
  .demo-tile, .demo-drop { transition: none; }
  .demo-tile:hover { transform: none; }
}