/* ============================================================================
   DIE NOTIZ-EBENE (Sprint 54, Gruppe A — 05.08.2026)

   Fabios Auftrag: Der Kunde soll in jedem Demo sehen, was er hier tun kann UND
   wie weit das echte System geht, wo das Demo es nicht zeigt.

   Einmal gebaut, von allen vier Demos geladen. Vier eigene Fassungen waeren
   nach dem zweiten Demo vier verschiedene Verhalten.

   Die Farben kommen aus dem jeweiligen Demo (--guide-accent), damit sich die
   Ebene in jede der vier Welten einfuegt, statt sie zu ueberkleben.
   ========================================================================== */

:root {
  --guide-accent: #b8860b;
  --guide-ink: #1f1d1b;
  --guide-dim: #5f5a54;
  --guide-card: #ffffff;
  --guide-line: rgba(0, 0, 0, 0.1);
}

/* ── Die Rollen-Zeile: wer bin ich, welcher Tag ist es ────────────────────── */
.guide-role {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--guide-dim);
}
.guide-role b {
  color: var(--guide-ink);
  font-weight: 600;
}

/* ── Der ⓘ-Punkt ──────────────────────────────────────────────────────────── */
.guide-dot {
  position: absolute;
  z-index: 40;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--guide-accent);
  color: #fff;
  font: 700 13px/22px ui-sans-serif, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.guide-dot:hover,
.guide-dot:focus-visible {
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  outline: 2px solid var(--guide-accent);
  outline-offset: 3px;
}
.guide-dot[aria-expanded='true'] {
  transform: scale(1.15);
}

/* Der Anker traegt den Punkt in seiner Ecke. */
.guide-anchor {
  position: relative;
}

/* ── Die Karte ────────────────────────────────────────────────────────────── */
.guide-card {
  position: absolute;
  z-index: 60;
  width: min(320px, calc(100vw - 32px));
  padding: 15px 17px 16px;
  border: 1px solid var(--guide-line);
  border-radius: 10px;
  background: var(--guide-card);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.3);
  font: 400 13px/1.6 ui-sans-serif, system-ui, sans-serif;
  color: var(--guide-ink);
}
.guide-card h4 {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--guide-ink);
}
.guide-card section + section {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--guide-line);
}
.guide-card .guide-label {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--guide-accent);
}
.guide-card p {
  margin: 0;
  color: var(--guide-dim);
}
.guide-card .guide-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--guide-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* ── Der geführte Einstieg: genau EIN Element pulsiert ────────────────────── */
.guide-start {
  position: relative;
  outline: 2px solid var(--guide-accent);
  outline-offset: 2px;
  border-radius: 6px;
  animation: guide-pulse 2.6s ease-in-out infinite;
}
.guide-start-flag {
  position: absolute;
  top: -11px;
  left: 12px;
  z-index: 41;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--guide-accent);
  color: #fff;
  font: 700 9.5px/1.7 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
@keyframes guide-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.42);
  }
  55% {
    box-shadow: 0 0 0 9px rgba(184, 134, 11, 0);
  }
}

/* ── Der Schalter ─────────────────────────────────────────────────────────── */
.guide-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--guide-line);
  border-radius: 999px;
  background: transparent;
  color: var(--guide-dim);
  font: 600 10.5px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  cursor: pointer;
}
.guide-toggle::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--guide-accent);
}
.guide-toggle[aria-pressed='false']::before {
  background: var(--guide-line);
}

/* ── Der Abschluss-Kasten ─────────────────────────────────────────────────── */
.guide-howfar {
  margin: 34px 0 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--guide-line);
  border-left: 3px solid var(--guide-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(0, 0, 0, 0.02);
}
.guide-howfar h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--guide-ink);
}
.guide-howfar .guide-howfar-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--guide-dim);
}
.guide-howfar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.guide-howfar li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--guide-dim);
}
.guide-howfar li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--guide-accent);
}

/* ── Handy: die Karte kommt als Bogen von unten ───────────────────────────── */
@media (max-width: 720px) {
  .guide-card {
    position: fixed;
    top: auto !important;
    right: 0 !important;
    bottom: 0;
    left: 0 !important;
    width: 100%;
    max-height: 62vh;
    overflow-y: auto;
    border: 0;
    border-top: 1px solid var(--guide-line);
    border-radius: 16px 16px 0 0;
    padding: 20px 20px 26px;
    box-shadow: 0 -14px 44px -10px rgba(0, 0, 0, 0.34);
  }
  .guide-card::before {
    content: '';
    display: block;
    width: 38px;
    height: 4px;
    margin: -6px auto 14px;
    border-radius: 999px;
    background: var(--guide-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-start {
    animation: none;
  }
  .guide-dot {
    transition: none;
  }
}

/* ── Der Sprachumschalter der Demos ───────────────────────────────────────
   Sitzt fest oben rechts, damit er auf jeder der vier Oberflaechen an
   derselben Stelle liegt. Die Demos haben sehr verschiedene Koepfe (dunkles
   Blau, Waldgruen, Papierweiss), deshalb traegt er einen eigenen, neutralen
   Hintergrund statt sich in den jeweiligen Kopf einzufuegen. */
.demo-lang {
  /*
   * Eigener Streifen statt schwebend ueber der Seite. Fest positioniert lag
   * der Umschalter auf allen vier Demos ueber der Kopfzeile („Ein
   * Beispielsystem von Domani AI" war verdeckt) und beim Scrollen ueber dem
   * Text. Der Streifen kostet 44 Pixel und macht die Wahl trotzdem als
   * Erstes sichtbar, was die richtige Reihenfolge ist: Sprache waehlen,
   * dann lesen.
   */
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 60;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(12, 14, 20, 0.82);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
}
.demo-lang button {
  border: 0;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font: 700 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.8px;
}
.demo-lang button:hover {
  color: #fff;
}
.demo-lang button.an {
  background: #fff;
  color: #12141a;
}

@media (max-width: 640px) {
  .demo-lang {
    top: 8px;
    right: 8px;
  }
  .demo-lang button {
    padding: 5px 8px;
    font-size: 10px;
  }
}

/* Der Streifen, in dem der Umschalter sitzt. */
body:has(.demo-lang) {
  position: relative;
  padding-top: 44px;
}