/* NHI4 · Demo-Modus — die Landing-Seite /demo.html und die Karte
   „Ausprobieren“ auf der Anmeldeseite. Edles Dunkel (Skill
   edles-dunkel-design): Glas statt Fläche, Kontur und Schein in Markenblau
   (Anmeldung und Landing tragen keine Rubrikfarbe, Regel R-E), Hauptaktion
   als Glas mit Symbol, Zahlen nie als Fläche, nur Token aus tokens.css und
   nachtglas.css — beide Themen über dieselben Token. Bewegung nur auf Maus
   und Klick; prefers-reduced-motion schaltet sie aus. Nur Klassen mit
   Präfix hl-demo-. */

/* ------------------------------------------- Kachel „Ausprobieren“ (Anmeldung)
   NHI17 (SC58, Vahid 21.10.2026): ein eigenes Glas-Fenster UNTER der
   Anmelde-Karte (login.html, in .login-wrap nach .login-card) — gleiche
   Breite und dasselbe Glas wie die Karte (nachtglas.css §8), Kontur und
   Schein in Markenblau, damit sie als Angebot neben der Anmeldung steht und
   nicht als Teil des Formulars. Der Abstand kommt vom gap der .login-wrap. */
html.edel .hl-demo-login {
  width: 300px; max-width: 100%; box-sizing: border-box;
  margin: 0; padding: 18px 22px 16px;
  background: var(--glas);
  border: 1px solid color-mix(in srgb, var(--marke-blau) 60%, transparent);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 12px color-mix(in srgb, var(--marke-blau) 18%, transparent),
              0 20px 50px var(--schatten-fenster);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html.edel .hl-demo-login[hidden] { display: none; }
html.edel .hl-demo-login-titel { margin: 0 0 6px; font-weight: 700; font-size: var(--fs-card); line-height: 1.3; color: var(--text-stark); }
html.edel .hl-demo-login-text { margin: 0 0 10px; color: var(--glas-text); font-size: var(--fs-body); line-height: 1.4; }
html.edel .hl-demo-login-hinweis { margin: 8px 0 0; color: var(--glas-leise); font-size: var(--fs-small); line-height: 1.4; }

/* Hauptaktion als Glas (Tönung 18 %, Kontur und Schein in Markenblau, fett, Symbol). */
html.edel .hl-demo-login-knopf, html.edel .hl-demo-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px; padding: 8px 16px;
  font: inherit; font-weight: 700; color: var(--text-stark); text-decoration: none;
  background: color-mix(in srgb, var(--marke-blau) 18%, transparent);
  border: 1px solid var(--marke-blau); border-radius: var(--r-knopf);
  box-shadow: 0 0 14px color-mix(in srgb, var(--marke-blau) 35%, transparent);
  cursor: pointer; transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
html.edel .hl-demo-login-knopf svg, html.edel .hl-demo-knopf svg { color: var(--marke-blau); flex: 0 0 auto; }
html.edel .hl-demo-login-knopf:disabled { cursor: progress; opacity: 0.7; }
html.edel .hl-demo-login-knopf:focus-visible, html.edel .hl-demo-knopf:focus-visible {
  outline: 2px solid var(--marke-blau); outline-offset: 2px;
}
@media (hover: hover) {
  html.edel .hl-demo-login-knopf:enabled:hover, html.edel .hl-demo-knopf:hover {
    background: color-mix(in srgb, var(--marke-blau) 26%, transparent);
    box-shadow: 0 0 20px color-mix(in srgb, var(--marke-blau) 45%, transparent);
  }
}

/* ------------------------------------------------------- Landing-Seite */
html.edel .hl-demo-body { margin: 0; min-height: 100vh; color: var(--glas-text); }
html.edel .hl-demo-seite {
  max-width: 1080px; margin-inline: auto; padding: 32px 20px 48px;
  display: flex; flex-direction: column; gap: 28px; min-width: 0;
}
html.edel .hl-demo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
html.edel .hl-demo-marke { display: inline-flex; align-items: center; gap: 10px; }
html.edel .hl-demo-marke img { width: 34px; height: 34px; }
html.edel .hl-demo-schriftzug { font-size: var(--fs-page); line-height: 1; }
html.edel .hl-demo-sprachen { display: flex; align-items: center; gap: 4px; color: var(--glas-leise); font-size: var(--fs-body); }
html.edel .hl-demo-sprachen button {
  background: none; border: 0; padding: 6px 8px; min-height: 0; font: inherit;
  color: var(--glas-leise); letter-spacing: 0.06em; border-radius: 6px; cursor: pointer;
}
html.edel .hl-demo-sprachen button[aria-pressed="true"] { color: var(--marke-blau); font-weight: 700; }
html.edel .hl-demo-sprachen button:focus-visible { outline: 2px solid var(--marke-blau); outline-offset: 1px; }

html.edel .hl-demo-held {
  padding: 28px 26px 24px;
  background: var(--glas); border: 1px solid color-mix(in srgb, var(--marke-blau) 60%, transparent);
  border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante), 0 0 12px color-mix(in srgb, var(--marke-blau) 18%, transparent);
}
html.edel .hl-demo-held h1 { margin: 0 0 10px; font-size: var(--fs-display); line-height: 1.15; color: var(--text-stark); font-weight: 700; }
html.edel .hl-demo-lead { margin: 0 0 18px; max-width: 62ch; font-size: var(--fs-ui); line-height: 1.5; color: var(--glas-text); }
html.edel .hl-demo-held .hl-demo-knopf { width: auto; min-width: 220px; }
html.edel .hl-demo-hinweis { margin: 14px 0 0; color: var(--glas-leise); font-size: var(--fs-body); line-height: 1.4; }

html.edel .hl-demo-abschnitt[hidden] { display: none; }
html.edel .hl-demo-abschnitt h2 { margin: 0 0 12px; font-size: var(--fs-card); color: var(--text-stark); }
html.edel .hl-demo-raster {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
html.edel .hl-demo-raster.hl-demo-klein { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
html.edel .hl-demo-clip {
  margin: 0; padding: 10px; min-width: 0;
  background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--r-kachel);
  box-shadow: inset 0 1px 0 var(--glas-kante);
}
html.edel .hl-demo-clip video {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  background: var(--grund-inhalt-2); border-radius: var(--r-feld);
}
html.edel .hl-demo-clip.hl-demo-handy video { aspect-ratio: 390 / 844; max-height: 420px; }
html.edel .hl-demo-clip figcaption { margin: 8px 2px 0; display: flex; flex-direction: column; gap: 2px; }
html.edel .hl-demo-clip-titel { font-weight: 700; color: var(--text-stark); overflow-wrap: anywhere; }
html.edel .hl-demo-clip-wo { color: var(--glas-leise); font-size: var(--fs-small); }
html.edel .hl-demo-clip-text { color: var(--glas-text); font-size: var(--fs-body); line-height: 1.4; }
html.edel .hl-demo-fehler { margin: 0; color: var(--bernstein); }
html.edel .hl-demo-fehler[hidden] { display: none; }

@media (max-width: 560px) {
  html.edel .hl-demo-seite { padding: 20px 16px 36px; gap: 22px; }
  html.edel .hl-demo-held { padding: 20px 16px 18px; }
  html.edel .hl-demo-held h1 { font-size: var(--fs-page); }
  html.edel .hl-demo-held .hl-demo-knopf { width: 100%; min-height: 48px; }
  html.edel .hl-demo-sprachen button { min-height: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html.edel .hl-demo-login-knopf, html.edel .hl-demo-knopf { transition: none; }
}

/* ---------------------------------------- Seite des Demo-Links (NHI18.1)
   /einladung/<token> (frontend/einladung.html): dieselbe Glas-Kachel wie
   „Die Demo gibt es auf Anfrage“ auf der Anmeldeseite, darüber Bildmarke und
   Schriftzug, darunter DE · EN · ES. Zustände (prüft, abgelaufen, ungültig,
   nicht erreichbar) tauscht js/einladung.js nur über Texte und Knöpfe. */
html.edel .hl-einl-marke { display: flex; align-items: center; gap: 12px; }
html.edel .hl-einl-marke img { width: 40px; height: 40px; }
html.edel .hl-einl-kachel { width: 340px; }
html.edel .hl-einl-kachel .hl-demo-login-titel { font-size: var(--fs-card); }
html.edel .hl-einl-kachel .hl-demo-login-knopf[hidden], html.edel .hl-einl-kachel p[hidden] { display: none; }
html.edel .hl-einl-kachel .hl-demo-login-knopf + .hl-demo-login-knopf { margin-top: 8px; }