/* Click-Demo: Ansichten der Oberfläche (demo/ansichten.js) in einem Fenster,
   daneben der Klickpfad. Gestaltung wie site.css (gigamedia.de). */
.demo-main { padding-block: 0 clamp(72px, 10vw, 140px); }
.demo-flaeche { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1100px) { .demo-flaeche { grid-template-columns: 1fr; } }

.schreibtisch { position: relative; background: var(--grau); padding: clamp(10px, 1.6vw, 22px); border-radius: var(--rund); }
.fenster { position: relative; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .06); border-radius: 12px; overflow: hidden; }
.fenster-leiste { display: flex; align-items: center; height: 32px; padding-left: 12px; background: #f3f3f3; border-bottom: 1px solid #e2e2e2; font-size: 12px; color: #333; }
.fenster-leiste img { height: 14px; width: auto; margin-right: 8px; }
.fenster-leiste .fk { margin-left: auto; display: flex; }
.fenster-leiste .fk i { width: 44px; height: 32px; display: grid; place-items: center; font-style: normal; color: #555; font-size: 13px; }
.skala { position: relative; overflow: hidden; }
.skala-innen { transform-origin: 0 0; }
#app { display: block; border: 0; width: 100%; height: 100%; background: #f4f6f8; }

.popup-halter { position: absolute; right: 18px; bottom: 18px; z-index: 5; width: 520px; max-width: calc(100% - 36px); filter: drop-shadow(0 16px 32px rgba(0, 0, 0, .25)); }
#pop { display: block; border: 0; width: 100%; height: 230px; background: transparent; }

.ring { position: absolute; z-index: 20; left: 0; top: 0; border: 3px solid var(--primaer); border-radius: 10px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 6px rgba(14, 113, 184, .18); transition: opacity .25s; }
.ring.an { opacity: 1; animation: ringPuls 1.4s ease-in-out infinite; }
@keyframes ringPuls { 50% { box-shadow: 0 0 0 12px rgba(14, 113, 184, .06); } }
@media (prefers-reduced-motion: reduce) { .ring.an { animation: none; } }

.tour { position: sticky; top: calc(var(--kopf) + 20px); background: var(--grau); padding: 28px; border-radius: var(--rund); }
.tour-kopf { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--leise); margin-bottom: 14px; }
.tour-leiste { flex: 1; height: 4px; border-radius: 2px; background: var(--grau2); overflow: hidden; }
.tour-leiste i { display: block; height: 100%; width: 0; background: var(--primaer); transition: width .4s var(--raus); }
.tour h2 { font-size: clamp(22px, 1.8vw, 28px); margin-bottom: 10px; }
.tour p { font-size: 15px; }
.tour .aktionen { margin-top: 20px; flex-direction: column; align-items: stretch; }
.tour .knopf { justify-content: center; min-height: 44px; }
.hinweis-klein { font-size: 13px; color: var(--leise); margin-top: 14px; }
@media (max-width: 1100px) { .tour { position: static; order: -1; padding: 20px; } .tour .aktionen { flex-direction: row; } }
.demo-flaeche > * { min-width: 0; }
.ring.stups { animation: ringStups .5s ease-in-out 2; }
@keyframes ringStups { 50% { box-shadow: 0 0 0 16px rgba(14, 113, 184, .28); transform: scale(1.04); } }
.hinweis-klein.stups { color: var(--primaer); font-weight: 600; }