/* Animated guides (30.09.2026): real screenshots in a phone frame, the pointer, the tap and the
 * highlight ring, captions (assets/js/tutorial_player.js). */
.tp { max-width: 420px; margin: 0 auto; font-family: inherit; color: #1e293b; }
.tp-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tp-kopf[hidden], .tp-punkte[hidden] { display: none; }
.tp-titel { flex: 1; font-weight: 800; font-size: 1.05rem; }
.tp-knopf { width: 38px; height: 38px; border: 1.5px solid #cbd5e1; border-radius: 10px; background: #fff; color: #334155; font-size: 15px; cursor: pointer; }
/* The frame keeps the pictures' own proportions (375 × 812 CSS px). */
.tp-geraet { width: min(300px, 100%); margin: 0 auto; border: 10px solid #1e293b; border-radius: 30px; background: #1e293b;
             overflow: hidden; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, .45); }
.tp-bildschirm { position: relative; aspect-ratio: 375 / 812; border-radius: 20px; overflow: hidden; background: #f1f5f9; }
.tp-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.tp-bild.tp-bild-an { opacity: 1; }
.tp-zeiger { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; z-index: 3;
             background: rgba(59, 130, 246, .35); border: 2px solid #2563eb; pointer-events: none; opacity: 0;
             transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.tp-zeiger.tp-klickt { background: rgba(37, 99, 235, .85); box-shadow: 0 0 0 10px rgba(37, 99, 235, .18); }
.tp-ring { position: absolute; left: -34px; top: -34px; width: 68px; height: 68px; border-radius: 50%; z-index: 2;
           border: 3px solid #f59e0b; opacity: 0; pointer-events: none; }
.tp-ring.tp-ring-an { opacity: 1; animation: tpPuls 1s ease-in-out 3; }
@keyframes tpPuls { 50% { border-color: rgba(245, 158, 11, .25); } }
.tp-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 12px 0 6px; padding: 0; list-style: none; }
.tp-punkte li { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 700; }
.tp-punkte li.tp-fertig { background: #bbf7d0; color: #166534; }
.tp-punkte li.tp-an { background: #2563eb; color: #fff; }
.tp-text { min-height: 3em; margin: 0; text-align: center; font-size: 15px; line-height: 1.45; }
/* Without animation (prefers-reduced-motion): the pictures one below the other. */
.tp-liste-still { margin: 0; padding-left: 20px; }
.tp-liste-still img { display: block; width: min(260px, 100%); border-radius: 14px; border: 1px solid #e2e8f0; }
.tp-liste-still p { margin: 6px 0 18px; }

/* /start while waiting for the register (includes/start_warten.php). */
.sw-karte { max-width: 1100px; margin: 16px auto 0; padding: 18px 20px; border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff; }
.sw-stand { margin: 0 0 6px; font-weight: 700; color: #1e3a8a; }
.sw-stand i { margin-right: 6px; }
.sw-unter { margin: 0 0 14px; color: #475569; }
@media (max-width: 640px) { .sw-karte { margin: 12px 16px 0; } }

/* /anleitung: the list of topics above the player (anleitung.php). */
.tp-themen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.tp-themen a { padding: 8px 14px; border: 1.5px solid #cbd5e1; border-radius: 999px; color: #334155; text-decoration: none; font-weight: 600; }
.tp-themen a.tp-thema-an { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }

/* Outro of every guide (30.09.2026, owner): 5 seconds of e-kasse.eu — gradient, the register sign
   pops in, a light sweeps over the name, the two sentences slide in. */
.tp-werbung { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 10px; padding: 24px; text-align: center; color: #fff; overflow: hidden; opacity: 0; pointer-events: none;
              background: radial-gradient(circle at 30% 20%, #3b82f6 0%, #1e3a8a 55%, #0f172a 100%); transition: opacity .6s ease; }
.tp-werbung-an .tp-werbung { opacity: 1; }
.tp-w-zeichen { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 24px; background: rgba(255, 255, 255, .15);
                font-size: 40px; box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); transform: scale(0); }
.tp-werbung-an .tp-w-zeichen { animation: twPop .7s .3s cubic-bezier(.3, 1.6, .5, 1) forwards, twWelle 1.8s 1s ease-out 2; }
.tp-w-marke { position: relative; font-size: 34px; font-weight: 900; letter-spacing: -.5px; opacity: 0; transform: translateY(12px); }
.tp-w-marke span { color: #93c5fd; }
.tp-werbung-an .tp-w-marke { animation: twRein .6s .9s ease-out forwards; }
.tp-w-satz1, .tp-w-satz2 { margin: 0; opacity: 0; transform: translateY(12px); }
.tp-w-satz1 { font-size: 17px; font-weight: 700; }
.tp-w-satz2 { font-size: 14px; color: #dbeafe; }
.tp-werbung-an .tp-w-satz1 { animation: twRein .6s 1.6s ease-out forwards; }
.tp-werbung-an .tp-w-satz2 { animation: twRein .6s 2.3s ease-out forwards; }
.tp-w-glanz { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; transform: rotate(18deg);
              background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
.tp-werbung-an .tp-w-glanz { animation: twGlanz 1.6s 1.2s ease-in-out 2; }
@keyframes twPop { to { transform: scale(1); } }
@keyframes twRein { to { opacity: 1; transform: none; } }
@keyframes twWelle { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 100% { box-shadow: 0 0 0 28px rgba(255, 255, 255, 0); } }
@keyframes twGlanz { from { left: -60%; } to { left: 130%; } }
.tp-nochmal { position: absolute; left: 50%; bottom: 28px; z-index: 5; transform: translateX(-50%); padding: 12px 18px; border: 0;
              border-radius: 999px; background: #fff; color: #1e3a8a; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap;
              box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.tp-nochmal[hidden] { display: none; }

/* On the start page (inhalt.php, 30.09.2026): only the phone — no title, buttons, steps or captions. */
.tp-nur-geraet .tp-kopf, .tp-nur-geraet .tp-punkte, .tp-nur-geraet .tp-text { display: none; }
.tp-nur-geraet { width: min(290px, 100%); }
@media (max-width: 640px) { .tp-nur-geraet { width: min(240px, 100%); } }
.tp-nur-geraet .tp-geraet { width: 100%; }