/* Produkt-Tour (siehe tour.js): Schrittleiste, Fenster mit vier Ansichten, fiktiver Mauszeiger, Steuerung. */
.tour { margin-top: var(--s5); }
.tour-fallback { display: none; }
html:not(.js) .tour { display: none; }
html:not(.js) .tour-fallback { display: grid; }

.tour-steps { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.ts { width: 100%; position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px 18px; border: 0; border-radius: var(--r-card); background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); font-family: var(--font); color: var(--ink);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease); }
.tn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 1.0625rem var(--font-mono); transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.tt { display: grid; gap: 2px; min-width: 0; }
.tt b { font-size: 1rem; line-height: 1.2; } .tt small { color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.tbar { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tbar u { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); transform-origin: left; transform: scaleX(0); transition: transform 900ms var(--ease); }
.ts.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-1); }
.ts.on .tn { background: var(--accent); color: #fff; transform: scale(1.08); }
.ts.done .tn { background: var(--ok); color: #fff; }
.ts.done .tbar u { background: var(--ok); }

.tour-window { position: relative; isolation: isolate; border-radius: 20px; background: #fff; box-shadow: 0 30px 80px rgba(15, 27, 45, .22), inset 0 0 0 1px var(--line); overflow: hidden; }
.tw-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: linear-gradient(180deg, #F2F5FA, #E9EEF6); border-bottom: 1px solid var(--line); }
.tw-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #D3DAE6; } .tw-bar > i:nth-child(1) { background: #F0A39E; } .tw-bar > i:nth-child(2) { background: #F2CF8A; } .tw-bar > i:nth-child(3) { background: #9FD6B8; }
.tw-url { margin-left: 12px; flex: 1; max-width: 360px; padding: 5px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 .8125rem var(--font-mono); color: var(--muted); }
.tw-url b { color: var(--ink); font-weight: 600; }
.tw-body { display: grid; min-height: 640px; background: linear-gradient(180deg, #fff, var(--paper)); }
.tw-body { pointer-events: none; }
.tour-window.manual .tw-body { pointer-events: auto; }
.tv { grid-area: 1 / 1; padding: var(--s6); opacity: 0; transform: translateY(18px) scale(.975); filter: blur(5px); pointer-events: none; visibility: hidden; transition: opacity 700ms var(--ease), transform 900ms var(--ease), filter 700ms var(--ease), visibility 0s linear 900ms; align-content: start; display: grid; gap: var(--s4); }
.tv.past { transform: translateY(-14px) scale(1.03); }
.tv.on { opacity: 1; transform: none; filter: none; visibility: visible; transition-delay: 0s; }
.tv-title { margin: 0; font: 650 1.375rem/1.2 var(--font); letter-spacing: -.02em; } .tv-title b { color: var(--accent); }
.tv-sub { margin: 0 0 var(--s2); font-size: .8125rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tv-note { margin: 0; color: var(--muted); font-size: .875rem; }
.tv-go { position: relative; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: var(--r-pill); background: linear-gradient(135deg, #1B5FD1, #2F7FE6); color: #fff; font: 700 .9375rem var(--font); cursor: pointer; box-shadow: 0 10px 24px rgba(27, 95, 209, .3); transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.press { transform: scale(.94) !important; }
.t-ripple { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: rgba(27, 95, 209, .35); animation: ripple 420ms var(--ease) forwards; pointer-events: none; }
.tv-go .t-ripple { background: rgba(255, 255, 255, .55); }

/* 1 Firma */
.tv1 { align-content: center; justify-items: center; text-align: center; }
.tv-input { position: relative; display: flex; align-items: center; gap: 12px; width: min(100%, 640px); padding: 10px 10px 10px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(27, 95, 209, .3), var(--shadow-1); text-align: left; }
.tv-ic { width: 22px; height: 22px; color: var(--accent); flex: none; } .tv-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tv-typed { font: 600 1.25rem var(--font); min-width: 1ch; }
.tv-input .caret { width: 2px; height: 24px; background: var(--accent); animation: blink 1s steps(1) infinite; margin-left: -8px; }
.tv-input .tv-go { margin-left: auto; }
@keyframes blink { 50% { opacity: 0; } }

/* 2 Seiten und Format */
.tv2-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.tv2-sum { padding: 7px 16px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; font-size: .875rem; }
.tv2-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s6); }
.pgchips { display: flex; flex-wrap: wrap; gap: 8px; }
.pgc { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--muted); font: 600 .875rem var(--font); cursor: pointer; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.pgc::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.pgc.on { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1.5px var(--accent); animation: chip-select 520ms var(--ease); }
@keyframes chip-select { 0% { transform: scale(.9); } 55% { transform: scale(1.09); } 100% { transform: scale(1); } }
.pgc.on::before { background: var(--accent) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.8 2.8L12 5.5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
.fmts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fmc { position: relative; overflow: hidden; display: grid; gap: 8px; justify-items: start; padding: 14px; border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 700 .875rem var(--font); color: var(--ink); cursor: pointer; text-align: left; transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), transform var(--t-fast) var(--ease); }
.fmc i { display: block; width: 38px; height: 28px; border-radius: 6px; background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fmc i.fi2 { width: 26px; height: 34px; } .fmc i.fi3 { width: 28px; height: 34px; background: var(--err-soft); box-shadow: inset 0 0 0 1.5px #E39B96; }
.fmc.on { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.fmc.pick { animation: fmt-pick 900ms var(--ease); transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--accent), 0 14px 30px rgba(27, 95, 209, .26); }
@keyframes fmt-pick { 0% { transform: scale(.94); } 50% { transform: scale(1.07) translateY(-3px); } 100% { transform: translateY(-3px); } }
.tv2-auto { display: none; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--r-pill); background: #F2F7FF; color: var(--accent-strong); font-size: .8125rem; font-weight: 600; margin-left: auto; }
.tv2-auto.show { display: inline-flex; }
.tv2-auto i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ping-s 1s ease-in-out infinite; }
.tv2-auto.ok { background: var(--ok-soft); color: var(--ok); }
.tv2-auto.ok i { background: var(--ok); animation: none; }
.tv2-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding-top: var(--s3); border-top: 1px solid var(--line); }

/* 3 Zeitstrahl */
.tv3-head { display: flex; align-items: center; justify-content: space-between; }
.tv3-time { font: 700 1.5rem var(--font-mono); color: var(--accent); }
.tl { padding: var(--s3) 0 var(--s2); }
.tl-phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: var(--s3); }
.tl-phases span { padding: 8px 10px; border-radius: 10px; background: var(--neutral-soft); color: var(--muted); font-size: .8125rem; font-weight: 600; text-align: center; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.tl-phases span.on { background: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(27, 95, 209, .3); }
.tl-phases span.done { background: var(--ok-soft); color: var(--ok); }
.tl-track { position: relative; height: 10px; border-radius: 5px; background: var(--line); }
.tl-fill { position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--cyan)); transform-origin: left; transform: scaleX(0); }
.tl-head { position: absolute; left: 0; top: -5px; width: 16px; height: 20px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 6px 14px rgba(27, 95, 209, .4); }
.tv3-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s5); align-items: start; }
.tv3-prev { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #EEF3FB, #DDE7F7); box-shadow: 0 20px 50px rgba(15, 27, 45, .2), inset 0 0 0 1px var(--line); }
.tv3-prev img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(.9); transition: opacity 700ms var(--ease), transform 1100ms var(--ease); }
.tv3-prev img.on { opacity: 1; transform: none; }
.prev-cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(15, 27, 45, .85); color: #fff; font-size: .75rem; font-weight: 600; opacity: 0; transition: opacity var(--t-base) var(--ease); }
.tv3-prev.has .prev-cap { opacity: 1; }
.tv3-prev::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); transform: translateX(-100%); animation: prev-shine 2.4s var(--ease) infinite; }
.tv3-prev.has::before { animation: none; opacity: 0; }
@keyframes prev-shine { to { transform: translateX(100%); } }
.tv3-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.th { position: relative; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px rgba(15, 27, 45, .14), inset 0 0 0 1px var(--line); animation: th-pop 760ms var(--ease) both; }
.th img { display: block; width: 100%; height: auto; }
.th span { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; background: linear-gradient(180deg, transparent, rgba(15, 27, 45, .82)); color: #fff; font-size: .6875rem; font-weight: 600; }
@keyframes th-pop { 0% { opacity: 0; transform: translateY(18px) scale(.4); filter: blur(4px); } 60% { transform: scale(1.08); filter: none; } 100% { opacity: 1; transform: none; } }

/* 4 Fertig, Download, Viewer */
.tv4-done { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding: var(--s4) var(--s5); border-radius: 18px; background: var(--ok-soft); box-shadow: inset 0 0 0 1px #BFE3D3; opacity: 0; transform: translateY(10px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.tv4-done.shown { opacity: 1; transform: none; }
.done-check { width: 48px; height: 48px; border-radius: 50%; background: var(--ok); display: grid; place-items: center; flex: none; }
.done-check svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; }
.tv4-done.shown .done-check svg { animation: draw var(--t-slow) var(--ease) .2s forwards; }
.done-txt { flex: 1; min-width: 200px; }
.tv-go.dl { min-width: 250px; background: var(--ok); box-shadow: 0 10px 24px rgba(12, 122, 87, .3); --dl: 0; }
.tv-go.dl .dl-fill { position: absolute; inset: 0; background: #095f44; transform-origin: left; transform: scaleX(var(--dl)); }
.tv-go.dl .dl-label { position: relative; }
.tv-go.dl.ok { background: #095f44; }

/* Fiktiver Mauszeiger */
.tour-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 28px; height: 28px; pointer-events: none; opacity: 0; transition: transform 850ms var(--ease), opacity var(--t-base) var(--ease); filter: drop-shadow(0 4px 6px rgba(15, 27, 45, .35)); }
.tour-cursor.on { opacity: 1; }
.tour-cursor svg { width: 100%; height: 100%; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; transition: transform 160ms var(--ease); transform-origin: 20% 10%; }
.tour-cursor.tap svg { transform: scale(.8); }

.tour-controls { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s3); }
.tc { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; min-height: 42px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 600 .875rem var(--font); color: var(--ink); cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent); }
.tc-ic { font-size: .75rem; }
.tour-note { color: var(--muted); font-size: .8125rem; margin-left: auto; max-width: 52ch; }

.tour-fallback { gap: var(--s4); grid-template-columns: repeat(3, 1fr); margin-top: var(--s5); }
.tour-fallback .step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s5); box-shadow: var(--shadow-1); }
.tour-fallback .n { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font: 700 1.125rem var(--font-mono); margin-bottom: var(--s3); }

@media (max-width: 860px) {
  .tour-steps { grid-template-columns: 1fr; }
  .tv { padding: var(--s4); }
  .tv2-grid { grid-template-columns: 1fr; }
  .tl-phases { grid-template-columns: repeat(2, 1fr); }
  .tw-body { min-height: 620px; }
  .tour-note { margin-left: 0; }
  .tour-fallback { grid-template-columns: 1fr; }
}

/* Zusatzflaechen, damit keine Ansicht leer wirkt und das Fenster nicht springt */
.tv-dd { width: min(100%, 640px); padding: 10px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line); text-align: left; opacity: 0; transform: translateY(-8px); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.tv-dd.show { opacity: 1; transform: none; }
.tv-dd small { display: block; padding: 2px 8px 6px; color: var(--muted); font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.dd-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.dd-row:first-of-type { background: var(--accent-soft); }
.dd-row b { font-size: .9375rem; } .dd-row span { color: var(--muted); font-size: .8125rem; }
.dd-row.dim { opacity: .55; }
.tv2-drop { display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border: 2px dashed var(--line); border-radius: 16px; background: rgba(255, 255, 255, .6); }
.tv2-drop b { display: block; } .tv2-drop small { color: var(--muted); }
.dz-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; animation: dz-bob 2.2s ease-in-out infinite; }
@keyframes dz-bob { 50% { transform: translateY(-4px); } }
.tv3-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tv3-log li { position: relative; padding: 8px 14px 8px 36px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: .875rem; animation: rise var(--t-slow) var(--ease) both; }
.tv3-log li::before { content: "✓"; position: absolute; left: 12px; top: 8px; width: 17px; height: 17px; border-radius: 50%; background: var(--ok); color: #fff; font-size: .6875rem; display: grid; place-items: center; }
@media (max-width: 860px) { .tw-body { min-height: 760px; } }

.tour-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(15, 27, 45, .08); z-index: 31; }
.tour-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--cyan)); transform-origin: left; transform: scaleX(0); transition: transform 500ms linear; }
.tour-window.is-paused::after { content: "Pausiert"; position: absolute; right: 16px; top: 54px; z-index: 32; padding: 5px 14px; border-radius: var(--r-pill); background: rgba(15, 27, 45, .85); color: #fff; font-size: .75rem; font-weight: 700; }
@media (max-width: 860px) { .tv3-grid { grid-template-columns: 1fr; } .tv2-auto { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .tv { filter: none; }  }

/* Wartezustand: die Tour wartet auf einen Klick des Besuchers. Der Knopf wird deutlich hervorgehoben: atmet, wackelt kurz, doppelter Leuchtring, Rest tritt zurueck */
.tv-go { font-family: var(--font); }
.tv-go.await { pointer-events: auto; cursor: pointer; z-index: 5; animation: await-breathe 1.5s var(--ease) infinite, await-wiggle 3.2s ease-in-out infinite; }
.tv-go.await::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: rgba(255, 255, 255, .26); transform: translateX(-120%) skewX(-20deg); animation: await-sheen 1.8s ease-in-out infinite; pointer-events: none; }
.tv-go.await:hover { transform: scale(1.1); animation-play-state: paused; }
@keyframes await-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 12px 28px rgba(27, 95, 209, .4), 0 0 0 0 rgba(27, 95, 209, .6), 0 0 0 0 rgba(63, 167, 214, .45); } 55% { transform: scale(1.09); box-shadow: 0 18px 40px rgba(27, 95, 209, .55), 0 0 0 12px rgba(27, 95, 209, 0), 0 0 0 26px rgba(63, 167, 214, 0); } }
@keyframes await-wiggle { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: -2.4deg; } 78% { rotate: 2.4deg; } 82% { rotate: -1.8deg; } 86% { rotate: 1.8deg; } 90% { rotate: 0deg; } }
@keyframes await-sheen { 0% { transform: translateX(-120%) skewX(-20deg); } 60%, 100% { transform: translateX(260%) skewX(-20deg); } }
.tv-go.dl.await { animation-name: await-breathe-ok, await-wiggle; }
@keyframes await-breathe-ok { 0%, 100% { transform: scale(1); box-shadow: 0 12px 28px rgba(12, 122, 87, .4), 0 0 0 0 rgba(12, 122, 87, .6), 0 0 0 0 rgba(12, 122, 87, .4); } 55% { transform: scale(1.09); box-shadow: 0 18px 40px rgba(12, 122, 87, .55), 0 0 0 12px rgba(12, 122, 87, 0), 0 0 0 26px rgba(12, 122, 87, 0); } }
.tour-window.awaiting .tv.on > *:not(.tv-input):not(.tv2-foot):not(.tv4-done):not(.tv-dd) { opacity: .55; transition: opacity 600ms var(--ease); }
.tour-window.awaiting .tv.on .tv2-foot > .tv-note, .tour-window.awaiting .tv.on .tv-input > *:not(.tv-go) { opacity: .6; }
.tour-window .tw-bar { position: relative; }
.tour-window.awaiting .tw-bar::after { content: "Jetzt klicken"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); padding: 4px 14px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; animation: await-tag 1.2s ease-in-out infinite; }
@keyframes await-tag { 50% { transform: translateY(-50%) scale(1.1); } }

/* Finale: weicher Seitenlauf */
.fly { position: relative; height: 430px; perspective: 1800px; perspective-origin: 50% 40%; }
.fp { position: absolute; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 10px 28px rgba(15, 27, 45, .2), 0 0 0 1px var(--line); opacity: 0; transform-origin: 50% 50%; }
.fly.glide .fp { transition: transform 1400ms cubic-bezier(.22, .8, .24, 1), opacity 1100ms var(--ease), box-shadow 900ms var(--ease); }
.fly.morph .fp { transition: transform 1500ms cubic-bezier(.5, 0, .2, 1), opacity 900ms var(--ease), box-shadow 900ms var(--ease); }
.fp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp span { position: absolute; left: 14px; bottom: 12px; padding: 4px 14px; border-radius: var(--r-pill); background: rgba(15, 27, 45, .78); color: #fff; font-size: .9rem; font-weight: 600; transition: opacity 700ms var(--ease); }
.fp.focus { box-shadow: 0 30px 70px rgba(15, 27, 45, .3), 0 0 0 1px rgba(27, 95, 209, .25); }
.fp:not(.focus) span { opacity: 0; }
.fly.done .fp span { opacity: 1; font-size: 1.7rem; left: 20px; bottom: 16px; padding: 6px 22px; }
.fly.done .fp { box-shadow: 0 12px 30px rgba(20, 73, 168, .22), 0 0 0 1px rgba(27, 95, 209, .22); }
.fly-cap { margin: 0; text-align: center; color: var(--muted); font-size: .875rem; opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.fly-cap.show { opacity: 1; transform: none; }
@media (max-width: 860px) { .fly { height: 300px; } }
/* Handy: Produktvideo deutlich kleiner, die Inhalte werden verkleinert statt breit gezogen  */
@media (max-width: 600px) { .tour-window .tw-body { zoom: .72; min-height: 560px; } .tour-window .tw-body .tv { padding: var(--s3); } .fly { height: 260px; } }
/* Handy: Adressleiste schrumpft und kuerzt mit "...", damit "Jetzt klicken" sie nie ueberlagert (Nutzer 04.11.2026) */
@media (max-width: 600px) { .tw-url { min-width: 0; margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; padding: 4px 10px; } .tour-window .tw-bar { padding: 10px 12px; gap: 5px; } .tour-window.awaiting .tw-url { margin-right: 108px; } .tour-window.awaiting .tw-bar::after { right: 10px; padding: 3px 11px; font-size: .7rem; } }