/* Klick-Demo (SAAS-26) — Band, Hinweise, Tour. Farben aus dem Dashboard (CSS-Variablen von dashboard_style.css). */

/* Band oben — wie die Hinweisbänder der Suite (Eggshell, orange Linie), steht über allem. */
/* Fest oben: Die Seite scrollt am Fenster, die Seitenleiste ist fixiert — beide rücken um die Bandhöhe nach unten
   (--demo-band-h setzt band-tour.js nach dem Messen). */
:root { --demo-band-h: 50px; }
body { padding-top: var(--demo-band-h) !important; }
.sidebar { top: var(--demo-band-h) !important; height: calc(100dvh - var(--demo-band-h)) !important; }
#demoBand {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 8px 16px; background: var(--eggshell, #F0EAD7); color: var(--black, #1C1C1C);
  border-bottom: 3px solid var(--orange, #EC671B); font-size: 14px; line-height: 1.35;
}
.demo-band-text b { font-family: 'Barlow Condensed', sans-serif; letter-spacing: .02em; }
.demo-band-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.demo-band-tour { border: 1px solid var(--black, #1C1C1C); background: transparent; color: inherit; padding: 6px 12px; border-radius: 6px; font: inherit; cursor: pointer; }
.demo-band-tour:hover, .demo-band-tour:focus-visible { background: var(--black, #1C1C1C); color: var(--eggshell, #F0EAD7); outline: none; }
.demo-band-cta { background: var(--orange, #EC671B); color: #fff !important; text-decoration: none; padding: 7px 14px; border-radius: 6px; font-weight: 700; white-space: nowrap; }
.demo-band-cta:hover, .demo-band-cta:focus-visible { filter: brightness(.92); outline: none; }

/* Hinweise (statt alert) */
#demoToasts { position: fixed; right: 16px; bottom: 16px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.demo-toast { background: var(--black, #1C1C1C); color: #fff; padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; box-shadow: 0 6px 24px rgba(0,0,0,.18); transition: opacity .35s, transform .35s; }
.demo-toast-ok { border-left: 4px solid #2FA36B; }
.demo-toast-info { border-left: 4px solid var(--orange, #EC671B); }
.demo-toast.weg { opacity: 0; transform: translateY(6px); }
/* Ausweichplätze, damit der Hinweis nie über der Sprechblase liegt (toastPlatz in band-tour.js) */
#demoToasts.demo-toasts-links { left: 16px; right: auto; }
#demoToasts.demo-toasts-oben { top: calc(var(--demo-band-h, 52px) + 12px); bottom: auto; }

/* Tour */
/* Leuchtrahmen (Nina 29.10.: kein harter Rand — weich, verschwommen, orange, „shiny“).
   Eigenes Element über dem Ziel (#demoSpot, Lage setzt band-tour.js): innen durchsichtig, Klicks gehen durch.
   Drei Lagen: leichtes Abdunkeln ringsum · orange Schein (Blur) · ein wandernder heller Glanz auf dem Rand. */
@property --demo-glanz { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#demoSpot {
  position: fixed; z-index: 2400; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(28,28,28,.14), 0 0 14px 3px rgba(236,103,27,.45), 0 0 38px 12px rgba(255,150,70,.28);
  animation: demo-atmen 2.8s ease-in-out infinite;
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
#demoSpot::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--demo-glanz), rgba(236,103,27,.25), rgba(236,103,27,.85) 20%, #FFD2A8 32%, #fff 36%, #FFD2A8 40%, rgba(236,103,27,.85) 52%, rgba(236,103,27,.25) 75%, rgba(236,103,27,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(2px); animation: demo-glanz 3.6s linear infinite;
}
@keyframes demo-glanz { to { --demo-glanz: 360deg; } }
@keyframes demo-atmen {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(28,28,28,.14), 0 0 14px 3px rgba(236,103,27,.42), 0 0 38px 12px rgba(255,150,70,.24); }
  50%      { box-shadow: 0 0 0 9999px rgba(28,28,28,.14), 0 0 20px 5px rgba(236,103,27,.55), 0 0 56px 18px rgba(255,150,70,.34); }
}
/* Wo bin ich? Aktiver Punkt der Seitenleiste: derselbe weiche Glanz wie der Tour-Knopf, dazu eine tippende Zeigehand. */
#demoNav {
  position: fixed; z-index: 2450; pointer-events: none; border-radius: 10px;
  box-shadow: 0 0 12px 3px rgba(236,103,27,.45), 0 0 30px 8px rgba(255,150,70,.25);
  animation: demo-nav-atmen 2.8s ease-in-out infinite;
}
#demoNav::before {
  content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--demo-glanz), rgba(236,103,27,.25), rgba(236,103,27,.85) 20%, #FFD2A8 32%, #fff 36%, #FFD2A8 40%, rgba(236,103,27,.85) 52%, rgba(236,103,27,.25) 75%, rgba(236,103,27,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(1.5px); animation: demo-glanz 3.6s linear infinite;
}
.demo-nav-hand {
  position: absolute; right: -6px; top: 50%; margin-top: -4px; transform-origin: 40% 10%;
  filter: drop-shadow(0 2px 4px rgba(28,28,28,.25)); animation: demo-tippen 1.6s ease-in-out infinite;
}
@keyframes demo-tippen { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 45% { transform: translate(-5px, -4px) rotate(-12deg) scale(.92); } 60% { transform: translate(0, 0) rotate(-12deg); } }
/* Klickhand der Tour (z. B. Pfeil in der Aufgabenliste): tippt zweimal, dann löst die Tour den Klick aus. */
#demoKlickHand { position: fixed; z-index: 2600; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(28,28,28,.3)); }
#demoKlickHand svg { display: block; transform-origin: 40% 10%; animation: demo-tippen .85s ease-in-out infinite; }
.demo-klick-ziel { box-shadow: 0 0 0 3px rgba(236,103,27,.55), 0 0 14px 4px rgba(255,150,70,.4); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { #demoKlickHand svg { animation: none; } }
@keyframes demo-nav-atmen { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #demoNav, #demoNav::before, .demo-nav-hand { animation: none; } }
@media (prefers-reduced-motion: reduce) { #demoSpot, #demoSpot::before, #demoBlase, #planBody tr.demo-einflug > td { animation: none; } }
#demoBlase {
  position: fixed; z-index: 2500; width: min(380px, calc(100vw - 32px));
  background: #fff; color: var(--black, #1C1C1C); border-radius: 14px; padding: 14px 16px 12px;
  border-top: 4px solid var(--orange, #EC671B); font-size: 14.5px; line-height: 1.5;
  /* Lilac-Schein + leichtes Schweben (Nina 29.10.): sanft, ein paar Pixel auf und ab. `translate` statt `transform`,
     damit das Wackeln (transform) unabhängig davon läuft. */
  box-shadow: 0 12px 34px rgba(28,28,28,.16), 0 0 0 1px rgba(202,153,197,.45), 0 0 26px 4px rgba(202,153,197,.55), 0 0 64px 14px rgba(202,153,197,.28);
  animation: demo-schweben 4.8s ease-in-out infinite;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
#demoBlase b { font-weight: 700; color: var(--black, #1C1C1C); }
@keyframes demo-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
#demoBlase.demo-wackeln { animation: demo-schweben 4.8s ease-in-out infinite, demo-wackeln .42s ease; }
@keyframes demo-wackeln { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (min-width: 700px) { #demoBlase.demo-blase-ecke { left: auto !important; top: auto !important; right: 16px; bottom: 16px; } }
/* Mitmachen: klein in der Ecke, damit das echte Fenster frei bleibt. */
#demoBlase.demo-blase-mitmach { left: 16px !important; top: auto !important; bottom: 16px; right: auto; width: min(320px, calc(100vw - 32px)); font-size: 14px; padding: 12px 14px 10px; }
#demoBlase.demo-blase-mitmach .demo-blase-fuss { margin-top: 8px; }

/* Keine blaue Markierung, solange die Tour läuft (Doppelklick auf Weiter/Zurück markierte sonst die ganze Seite). */
#demoBand, #demoToasts { user-select: none; -webkit-user-select: none; }
body.demo-tour-an { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
body.demo-tour-an input, body.demo-tour-an textarea, body.demo-tour-an [contenteditable="true"] { user-select: text; -webkit-user-select: text; }

/* Neue Woche legt sich Zeile für Zeile in den Plan. */
#planBody tr.demo-einflug > td { animation: demo-einflug .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--demo-i, 0) * 110ms + 150ms); }
@keyframes demo-einflug { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
/* Selbst erzeugte Beiträge (Fachwissen, Trend, Idee): lila markiert. */
#planBody tr.demo-neu > td { background: var(--li100, #F3E9F2) !important; }
#planBody tr.demo-neu { outline: 2px solid var(--li500, #CA99C5); outline-offset: -2px; }
#planBody tr.demo-neu .plan-title-main::before { content: 'Neu'; display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 99px; background: var(--li500, #CA99C5); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
#demoBlase.demo-blase-unten { left: 16px !important; right: 16px; bottom: 16px; top: auto !important; width: auto; max-width: 560px; margin: 0 auto; }
.demo-blase-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.demo-blase-zaehler { font-size: 12px; font-weight: 700; color: var(--orange, #EC671B); letter-spacing: .04em; text-transform: uppercase; }
.demo-blase-zu { border: 0; background: transparent; font-size: 16px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.demo-blase-titel { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; line-height: 1.15; margin-bottom: 6px; }
.demo-blase-abschluss { margin-top: 12px; padding: 12px; background: rgba(236,103,27,.10); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.demo-blase-cta { align-self: flex-start; background: var(--orange, #EC671B); color: #fff !important; text-decoration: none; padding: 9px 16px; border-radius: 8px; font-weight: 700; }
.demo-blase-fuss { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; }
.demo-blase-fuss button { font: inherit; font-size: 13.5px; padding: 7px 12px; border-radius: 7px; cursor: pointer; border: 1px solid rgba(28,28,28,.25); background: #fff; }
.demo-blase-fuss .demo-weiter { background: var(--orange, #EC671B); border-color: var(--orange, #EC671B); color: #fff; font-weight: 700; }
.demo-blase-fuss button:disabled { opacity: .45; cursor: default; }
.demo-blase-fuss .demo-beenden { margin-right: auto; border-color: transparent; text-decoration: underline; background: transparent; }

@media (max-width: 700px) {
  #demoBand { padding: 8px 12px; font-size: 13px; }
  .demo-band-knoepfe { width: 100%; }
  .demo-band-cta { flex: 1; text-align: center; }
  #demoSpot { box-shadow: 0 0 12px 3px rgba(236,103,27,.45), 0 0 30px 10px rgba(255,150,70,.25); animation: none; }
  #demoToasts { top: calc(var(--demo-band-h) + 8px); bottom: auto; left: 12px; right: 12px; max-width: none; }
  /* Am Handy steht der Hinweis oben; liegt dort die Blase, weicht er nach unten aus. */
  #demoToasts.demo-toasts-links { top: auto; bottom: 12px; left: 12px; right: 12px; }
  /* Am Handy füllt das echte Fenster den Schirm — die Mitmach-Blase steht oben unter dem Band, schmal. */
  #demoBlase.demo-blase-mitmach { left: 12px !important; right: 12px; width: auto; bottom: auto; top: calc(var(--demo-band-h) + 8px) !important; font-size: 13px; padding: 9px 12px 8px; }
  #demoBlase { box-shadow: 0 10px 28px rgba(28,28,28,.16), 0 0 0 1px rgba(202,153,197,.45), 0 0 22px 3px rgba(202,153,197,.5); }
}

/* KIM am Ende der Tour (Nina 30.10.) — groß und zentriert über leicht abgedunkeltem Grund, schwebt wie im Onboarding. */
#demoKim { position: fixed; inset: 0; z-index: 2700; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(28,28,28,.38); animation: demo-kim-grund .4s ease both; }
#demoKim .demo-kim-karte { position: relative; width: min(440px, 100%); background: #fff; border-radius: 22px; border-top: 5px solid var(--orange, #EC671B); padding: 26px 28px 22px; text-align: center; box-shadow: 0 24px 60px rgba(28,28,28,.28), 0 0 0 1px rgba(202,153,197,.45), 0 0 40px 6px rgba(202,153,197,.45); animation: demo-kim-rein .6s cubic-bezier(.2,.8,.2,1) both; }
#demoKim .demo-kim-bild { display: block; width: 260px; max-width: 70%; height: auto; margin: -4px auto 6px; animation: demo-kim-schweben 3.6s ease-in-out infinite; }
#demoKim .demo-kim-frage { margin: 4px 0 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; color: var(--black, #1C1C1C); }
#demoKim .demo-kim-cta { display: inline-block; background: var(--orange, #EC671B); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; letter-spacing: .03em; padding: 14px 24px; border-radius: 11px; box-shadow: 0 6px 18px rgba(236,103,27,.35); }
#demoKim .demo-kim-cta:hover, #demoKim .demo-kim-cta:focus-visible { filter: brightness(1.08); outline: none; }
#demoKim .demo-kim-spaeter { display: block; margin: 14px auto 0; background: none; border: 0; color: rgba(28,28,28,.6); font-size: 13.5px; text-decoration: underline; cursor: pointer; }
#demoKim .demo-kim-zu { position: absolute; top: 12px; right: 14px; background: none; border: 0; font-size: 18px; color: rgba(28,28,28,.55); cursor: pointer; }
@keyframes demo-kim-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes demo-kim-rein { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes demo-kim-grund { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 699px) { #demoKim .demo-kim-frage { font-size: 22px; } #demoKim .demo-kim-karte { padding: 22px 18px 18px; } }
@media (prefers-reduced-motion: reduce) { #demoKim, #demoKim .demo-kim-karte, #demoKim .demo-kim-bild { animation: none; } }
/* Während KIM am Ende offen ist: Sprechblase an den linken Rand, damit KIM sie nicht verdeckt (kimPlatz). */
#demoBlase.demo-blase-links { left: 16px !important; top: auto !important; bottom: 16px; }
/* Startbild vor der Führung (Nina 30.10.): ihre Willkommensgrafik, groß und mittig. */
#demoWillkommen { position: fixed; inset: 0; z-index: 2800; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(28,28,28,.45); animation: demo-kim-grund .4s ease both; }
#demoWillkommen .demo-willk-karte { width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border-radius: 22px; border-top: 5px solid var(--orange, #EC671B); padding: 18px 28px 24px; text-align: center; box-shadow: 0 24px 60px rgba(28,28,28,.28), 0 0 40px 6px rgba(202,153,197,.45); animation: demo-kim-rein .6s cubic-bezier(.2,.8,.2,1) both; }
#demoWillkommen .demo-willk-bild { display: block; width: 100%; height: auto; margin: 0 auto 4px; }
#demoWillkommen .demo-willk-text { margin: 0 auto 18px; max-width: 520px; font-size: 16px; line-height: 1.5; color: var(--black, #1C1C1C); }
#demoWillkommen .demo-willk-start { display: inline-block; background: var(--orange, #EC671B); color: #fff; border: 0; font-weight: 700; font-size: 16px; letter-spacing: .03em; padding: 14px 30px; border-radius: 11px; cursor: pointer; box-shadow: 0 6px 18px rgba(236,103,27,.35); }
#demoWillkommen .demo-willk-start:hover, #demoWillkommen .demo-willk-start:focus-visible { filter: brightness(1.08); outline: none; }
#demoWillkommen .demo-willk-selbst { display: block; margin: 12px auto 0; background: none; border: 0; color: rgba(28,28,28,.6); font-size: 14px; text-decoration: underline; cursor: pointer; }
@media (max-width: 699px) { #demoWillkommen .demo-willk-karte { padding: 14px 16px 18px; } #demoWillkommen .demo-willk-text { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { #demoWillkommen, #demoWillkommen .demo-willk-karte { animation: none; } }