/* Gestaltung der öffentlichen Startseite und der Preisseite (Klasse .lp) */
[x-cloak] { display: none !important; }
body { overflow-x: clip; }
.lp { --papier: #f4efe4; --tinte: #1c1917; --signal: #f59e0b; }
.lp-bleed { margin-inline: calc(50% - 50vw); padding-inline: max(1.5rem, calc(50vw - 456px)); }
.lp .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lp .marker { background: linear-gradient(transparent 62%, var(--signal) 62% 92%, transparent 92%); padding-inline: .1em; }

/* Scrollen: Abschnitte blenden ein, nur wenn JavaScript läuft */
.js .lp .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .lp .reveal.is-in { opacity: 1; transform: none; }
.lp .balken > i { display: block; height: 100%; width: 0; transition: width 1s cubic-bezier(.2,.7,.2,1) .2s; }
.lp .is-in .balken > i, .lp .balken.is-in > i { width: var(--w); }

/* Der Aufkleber: Scanlinie und leichtes Schweben */
@keyframes scan { 0%, 100% { top: 4%; } 50% { top: 92%; } }
@keyframes schweben { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-6px); } }
@keyframes lauf { to { transform: translateX(-50%); } }
.lp .scanlinie { position: absolute; left: -4%; right: -4%; height: 3px; background: var(--signal); box-shadow: 0 0 14px 2px rgb(245 158 11 / .7); animation: scan 3.6s ease-in-out infinite; }
.lp .aufkleber { transform: rotate(-3deg); animation: schweben 6s ease-in-out infinite; }
.lp .lauf { display: flex; width: max-content; animation: lauf 38s linear infinite; }
.lp dialog { margin: auto; }
.lp dialog::backdrop { background: rgb(28 25 23 / .65); }
.lp .aufkleber:hover, .lp .aufkleber:focus-visible { animation-play-state: paused; }
.lp .lauf:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .lp .scanlinie, .lp .aufkleber, .lp .lauf { animation: none; }
  .js .lp .reveal { opacity: 1; transform: none; transition: none; }
  .lp .balken > i { width: var(--w); transition: none; }
}