* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; font-family: Arial, Helvetica, sans-serif; overscroll-behavior: none; }
body { background-size: cover; background-position: center; background-attachment: fixed; color: #222; overflow: hidden; touch-action: auto; }
.stage { width: 100vw; height: 100dvh; min-height: 100vh; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(74px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); position: relative; overflow: hidden; }
.paper-stack { width: calc(100vw - 36px); height: calc(100dvh - 112px); position: relative; perspective: 1400px; display: grid; place-items: center; overflow: visible; }
.paper { position: absolute; width: calc(var(--paper-w) * 1px); height: calc(var(--paper-h) * 1px); max-width: min(92vw, calc((100dvh - 120px) * (var(--paper-w) / var(--paper-h)))); max-height: min(calc(100dvh - 120px), calc(92vw * (var(--paper-h) / var(--paper-w)))); aspect-ratio: var(--paper-w) / var(--paper-h); z-index: var(--z); background-color: var(--paper-color); background-image: var(--paper-bg-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 10px; box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18); transform: translate(var(--x), var(--y)) rotate(var(--rot)); transition: transform .65s cubic-bezier(.2,.8,.2,1), opacity .45s ease; overflow: hidden; border: 1px solid rgba(0,0,0,.08); transform-origin: center center; }
.paper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 18%); pointer-events: none; }
.paper.no-page-transition { transition: none !important; animation: none !important; }
.paper-inner { height: 100%; padding: clamp(22px, 5vmin, 58px); overflow: hidden; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-content: center; align-items: flex-start; justify-content: stretch; gap: var(--gap); container-type: size; }
.align-v-start { align-content: flex-start; }
.align-v-center { align-content: center; }
.align-v-end { align-content: flex-end; }
.align-h-start { justify-content: flex-start; }
.align-h-center { justify-content: center; }
.align-h-end { justify-content: flex-end; }
.align-h-stretch { justify-content: stretch; }
.paper:not(.active) .paper-inner { pointer-events: none; }
.content-block { width: min(100%, var(--block-width)); max-width: 100%; animation: paperEffect .7s ease both; animation-delay: .12s; }
.align-h-stretch .content-block { flex-grow: 1; }
.paper:not(.active) .content-block { animation: none; }
.paper.thrown-left { transform: translate(-130vw, -18vh) rotate(-42deg); opacity: 0; pointer-events: none; }
.paper.thrown-right { transform: translate(130vw, 12vh) rotate(42deg); opacity: 0; pointer-events: none; }
.paper.thrown-up { transform: translate(15vw, -140vh) rotate(28deg); opacity: 0; pointer-events: none; }
.paper.thrown-down { transform: translate(-10vw, 140vh) rotate(-28deg); opacity: 0; pointer-events: none; }
.text-block { font-size: clamp(15px, 2.1cqw, 22px); line-height: 1.48; overflow-wrap: anywhere; }
.text-block h1 { font-size: clamp(28px, 5.2cqw, 58px); line-height: 1.05; margin: 0 0 .35em; }
.text-block h2 { font-size: clamp(22px, 3.8cqw, 38px); line-height: 1.15; margin: .2em 0 .35em; }
.text-block p { margin: 0 0 .75em; }
.image-figure { margin: 0; text-align: center; }
.paper-image { width: var(--image-size); max-width: 100%; max-height: 54cqh; object-fit: contain; border-radius: 10px; margin: 0 auto; box-shadow: 0 8px 22px rgba(0,0,0,.18); display: block; }
.paper-image.fit-cover { aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { margin-top: 8px; font-size: clamp(12px, 1.5cqw, 16px); opacity: .78; }
.contact-form { display: grid; gap: 10px; margin: 0; font-size: clamp(13px, 1.7cqw, 16px); }
.contact-form label { display: grid; gap: 5px; font-weight: 700; }
.contact-form input, .contact-form textarea { border: 1px solid rgba(0,0,0,.2); border-radius: 8px; padding: 9px 10px; font: inherit; background: rgba(255,255,255,.72); }
.contact-form textarea { min-height: 90px; resize: none; }
.contact-form button, .pager button { border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; font-weight: 700; background: #222; color: #fff; }
.reviews-box { padding: clamp(12px, 2.4cqw, 18px); background: rgba(255,255,255,.55); border-radius: 12px; overflow: hidden; }
.pager { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); border-radius: 999px; padding: 10px; box-shadow: 0 8px 25px rgba(0,0,0,.18); z-index: 5000; }
#paperCounter { min-width: 72px; text-align: center; font-weight: 700; }
.notice { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 9999; background: #ebfff1; color: #145c25; border: 1px solid #b7e7c1; padding: 12px 18px; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.14); }
.notice.error { background: #fff0f0; color: #8b1d1d; border-color: #f0b9b9; }
.effect-none { animation: none; }
.effect-fade { animation-name: fadeIn; }
.effect-zoom { animation-name: zoomIn; }
.effect-slide-up { animation-name: slideUp; }
.effect-slide-down { animation-name: slideDown; }
.effect-slide-left { animation-name: slideLeft; }
.effect-slide-right { animation-name: slideRight; }
.effect-soft-pop { animation-name: softPop; }
.effect-rotate-in { animation-name: rotateIn; }
.effect-blur-in { animation-name: blurIn; }
.effect-flip-in { animation-name: flipIn; }
.effect-float-in { animation-name: floatIn; }
.effect-tilt-in { animation-name: tiltIn; }
.effect-bounce-in { animation-name: bounceIn; }
.effect-wipe-in { animation-name: wipeIn; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes softPop { 0% { opacity: 0; transform: scale(.82); } 70% { transform: scale(1.035); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rotateIn { from { opacity: 0; transform: rotate(-6deg) scale(.92); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); } to { opacity: 1; filter: blur(0); } }
@keyframes flipIn { from { opacity: 0; transform: rotateX(65deg); } to { opacity: 1; transform: rotateX(0); } }
@keyframes floatIn { from { opacity: 0; transform: translateY(22px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes tiltIn { from { opacity: 0; transform: translateY(20px) rotate(-4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(.8); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes wipeIn { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@media (max-width: 700px) {
    .stage { padding: 12px 12px 78px; }
    .paper-stack { width: 100vw; height: calc(100dvh - 92px); }
    .paper { max-width: 74vw; max-height: calc(100dvh - 135px); }
    .paper-inner { padding: clamp(16px, 5vw, 28px); gap: min(var(--gap), 14px); }
    .content-block { width: 100% !important; }
    .text-block { font-size: clamp(13px, 3.6vw, 17px); line-height: 1.38; }
    .text-block h1 { font-size: clamp(24px, 7vw, 34px); }
    .text-block h2 { font-size: clamp(19px, 5.5vw, 26px); }
    .paper-image { max-height: 38cqh; }
    .pager { width: calc(100vw - 24px); justify-content: space-between; }
}
@media (max-width: 420px) { .paper { max-width: 70vw; max-height: calc(100dvh - 150px); } }
/* V4: Startanimation, Datenschutz-Gate und erweiterte Typografie */
.content-block { color: var(--text-color); font-size: var(--text-size); background: var(--block-bg); padding: var(--block-pad, 0); border-radius: 12px; }
.content-block[style*="--block-bg:#"], .content-block[style*="--block-bg: #"] { --block-pad: clamp(10px, 2cqw, 18px); }
.text-block { font-size: clamp(12px, var(--text-size), 96px); color: var(--text-color); }
.text-block h1, .text-block h2, .text-block h3, .text-block p, .text-block li { color: inherit; }

.stage.starting .paper { opacity: 0; pointer-events: none; }
.stage.start-effect-spin .paper { animation: startSpin var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; }
.stage.start-effect-fly .paper { animation: startFly var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 95ms); }
.stage.start-effect-spin-fly .paper { animation: startSpinFly var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 85ms); }
@keyframes startSpin { from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) - 420deg)) scale(.45); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startFly { from { opacity: 0; transform: translate(calc(var(--x) - 120vw), calc(var(--y) - 60vh)) rotate(calc(var(--rot) - 28deg)) scale(.75); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startSpinFly { from { opacity: 0; transform: translate(calc(var(--x) + 70vw), calc(var(--y) - 80vh)) rotate(calc(var(--rot) + 720deg)) scale(.35); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }

.privacy-gate { position: fixed; inset: 0; z-index: 20000; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(0,0,0,.48); backdrop-filter: blur(10px); color: var(--privacy-text); }
.privacy-gate.accepted { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.privacy-box { width: min(920px, 96vw); max-height: 88dvh; overflow: auto; background: var(--privacy-bg); color: var(--privacy-text); border-radius: 18px; padding: clamp(18px, 4vw, 34px); box-shadow: 0 24px 70px rgba(0,0,0,.38); }
.privacy-content { line-height: 1.55; font-size: clamp(14px, 2.1vw, 17px); }
.privacy-content h1, .privacy-content h2 { margin-top: 0; }
.privacy-box button { border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 800; cursor: pointer; background: var(--privacy-button); color: #fff; margin-top: 14px; }
.privacy-effect-fade .privacy-box { animation: fadeIn .45s ease both; }
.privacy-effect-zoom .privacy-box { animation: zoomIn .45s ease both; }
.privacy-effect-slide-up .privacy-box { animation: slideUp .45s ease both; }
.privacy-effect-blur-in .privacy-box { animation: blurIn .45s ease both; }
.privacy-effect-none .privacy-box { animation: none; }
@media (max-width: 700px) { .privacy-box { width: 94vw; max-height: 84dvh; padding: 18px; } }

/* V5: Zufallseffekte und mobiles Datenschutzfenster */
.effect-random { animation-name: fadeIn; }
.privacy-effect-random .privacy-box { animation: fadeIn .45s ease both; }
.privacy-gate { overflow: hidden; overscroll-behavior: contain; }
.privacy-box { display: flex; flex-direction: column; overflow: hidden; max-height: min(88dvh, 920px); }
.privacy-content { overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 8px; min-height: 0; }
.privacy-box button { flex: 0 0 auto; align-self: flex-start; position: sticky; bottom: 0; box-shadow: 0 -8px 18px rgba(0,0,0,.08); }
@media (max-width: 700px) {
    .privacy-gate { align-items: stretch; justify-items: center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
    .privacy-box { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 16px; border-radius: 16px; }
    .privacy-content { flex: 1 1 auto; max-height: none; font-size: 14px; line-height: 1.45; }
    .privacy-box button { width: 100%; margin-top: 12px; padding: 14px 16px; }
}

/* V6 flexibles Kontaktformular */
.contact-form fieldset { border: 1px solid rgba(0,0,0,.16); border-radius: 10px; padding: 10px; margin: 0; }
.contact-form legend { font-weight: 700; padding: 0 6px; }
.contact-form select { border: 1px solid rgba(0,0,0,.2); border-radius: 8px; padding: 9px 10px; font: inherit; background: rgba(255,255,255,.72); }
.inline-choice { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: 8px !important; font-weight: 600 !important; }
.inline-choice input { width: auto !important; margin-top: .25em; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }


/* V7: mehr Start-Effekte und Seitenwechsel-Rausflug-Effekte */
.stage.start-effect-spiral .paper { animation: startSpiral var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 75ms); }
.stage.start-effect-zoom-spin .paper { animation: startZoomSpin var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; }
.stage.start-effect-fan .paper { animation: startFan var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 65ms); }
.stage.start-effect-drop .paper { animation: startDrop var(--start-duration, 1800ms) cubic-bezier(.2,1.1,.2,1) both; animation-delay: calc(var(--paper-index, 0) * 55ms); }
.stage.start-effect-flip-stack .paper { animation: startFlipStack var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 75ms); }
.stage.start-effect-scatter .paper { animation: startScatter var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 60ms); }
.stage.start-effect-elastic .paper { animation: startElastic var(--start-duration, 1800ms) cubic-bezier(.18,1.4,.25,1) both; animation-delay: calc(var(--paper-index, 0) * 70ms); }
.stage.start-effect-tornado .paper { animation: startTornado var(--start-duration, 1800ms) cubic-bezier(.18,.89,.2,1.08) both; animation-delay: calc(var(--paper-index, 0) * 70ms); }
.stage.start-effect-fold .paper { animation: startFold var(--start-duration, 1800ms) ease both; animation-delay: calc(var(--paper-index, 0) * 75ms); transform-origin: top center; }
@keyframes startSpiral { from { opacity: 0; transform: translate(calc(var(--x) + 95vw), calc(var(--y) + 70vh)) rotate(calc(var(--rot) + 1080deg)) scale(.25); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startZoomSpin { from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) - 720deg)) scale(0); filter: blur(8px); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); filter: blur(0); } }
@keyframes startFan { from { opacity: 0; transform: translate(calc(var(--x) + (var(--paper-index) * 32px - 120px)), calc(var(--y) + 80px)) rotate(calc(var(--rot) + (var(--paper-index) * 18deg - 60deg))) scale(.8); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startDrop { 0% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 130vh)) rotate(calc(var(--rot) + 20deg)); } 70% { opacity: 1; transform: translate(var(--x), calc(var(--y) + 18px)) rotate(calc(var(--rot) - 3deg)); } 100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)); } }
@keyframes startFlipStack { from { opacity: 0; transform: translate(var(--x), var(--y)) rotateY(82deg) rotate(var(--rot)) scale(.86); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotateY(0) rotate(var(--rot)) scale(1); } }
@keyframes startScatter { from { opacity: 0; transform: translate(calc(var(--x) + (var(--paper-index) * 70px - 180px)), calc(var(--y) + (var(--paper-index) * -55px + 170px))) rotate(calc(var(--rot) + (var(--paper-index) * 55deg - 120deg))) scale(.72); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startElastic { 0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) + 360deg)) scale(.15); } 65% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) - 8deg)) scale(1.08); } 100% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } }
@keyframes startTornado { from { opacity: 0; transform: translate(calc(var(--x) + 10vw), calc(var(--y) - 110vh)) rotate(calc(var(--rot) + 1440deg)) scale(.2); filter: blur(10px); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); filter: blur(0); } }
@keyframes startFold { from { opacity: 0; transform: translate(var(--x), var(--y)) rotateX(-88deg) rotate(var(--rot)); } to { opacity: 1; transform: translate(var(--x), var(--y)) rotateX(0) rotate(var(--rot)); } }

.paper.paper-out { pointer-events: none; animation-duration: var(--transition-duration, 900ms); animation-timing-function: cubic-bezier(.22,.78,.18,1); animation-fill-mode: both; }
.paper.paper-out-spin-fly { animation-name: outSpinFly; }
.paper.paper-out-spin { animation-name: outSpin; }
.paper.paper-out-fly { animation-name: outFly; }
.paper.paper-out-spiral { animation-name: outSpiral; }
.paper.paper-out-zoom-spin { animation-name: outZoomSpin; }
.paper.paper-out-fan { animation-name: outFan; }
.paper.paper-out-drop { animation-name: outDrop; }
.paper.paper-out-flip-stack { animation-name: outFlipStack; }
.paper.paper-out-scatter { animation-name: outScatter; }
.paper.paper-out-elastic { animation-name: outElastic; }
.paper.paper-out-tornado { animation-name: outTornado; }
.paper.paper-out-fold { animation-name: outFold; transform-origin: top center; }
@keyframes outSpinFly { to { opacity: 0; transform: translate(calc(var(--x) - 130vw), calc(var(--y) - 35vh)) rotate(calc(var(--rot) - 720deg)) scale(.35); } }
@keyframes outSpin { to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) + 540deg)) scale(.12); } }
@keyframes outFly { to { opacity: 0; transform: translate(calc(var(--x) + 130vw), calc(var(--y) + 18vh)) rotate(calc(var(--rot) + 36deg)); } }
@keyframes outSpiral { to { opacity: 0; transform: translate(calc(var(--x) - 85vw), calc(var(--y) + 80vh)) rotate(calc(var(--rot) - 1080deg)) scale(.18); filter: blur(8px); } }
@keyframes outZoomSpin { to { opacity: 0; transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) + 900deg)) scale(2.4); filter: blur(14px); } }
@keyframes outFan { to { opacity: 0; transform: translate(calc(var(--x) + 32vw), calc(var(--y) + 38vh)) rotate(calc(var(--rot) + 72deg)) scale(.78); } }
@keyframes outDrop { to { opacity: 0; transform: translate(var(--x), calc(var(--y) + 135vh)) rotate(calc(var(--rot) + 22deg)); } }
@keyframes outFlipStack { to { opacity: 0; transform: translate(calc(var(--x) - 40vw), var(--y)) rotateY(88deg) rotate(calc(var(--rot) - 24deg)) scale(.7); } }
@keyframes outScatter { to { opacity: 0; transform: translate(calc(var(--x) - 120vw), calc(var(--y) + 60vh)) rotate(calc(var(--rot) - 160deg)) scale(.65); } }
@keyframes outElastic { 0% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--rot)) scale(1); } 35% { transform: translate(var(--x), var(--y)) rotate(calc(var(--rot) - 5deg)) scale(1.08); } 100% { opacity: 0; transform: translate(calc(var(--x) + 95vw), calc(var(--y) - 70vh)) rotate(calc(var(--rot) + 520deg)) scale(.1); } }
@keyframes outTornado { to { opacity: 0; transform: translate(calc(var(--x) + 20vw), calc(var(--y) - 140vh)) rotate(calc(var(--rot) + 1600deg)) scale(.1); filter: blur(12px); } }
@keyframes outFold { to { opacity: 0; transform: translate(var(--x), var(--y)) rotateX(88deg) rotate(var(--rot)) scale(.92); } }


/* V8: Rueckwaerts-Blaettern bekommt ebenfalls den eingestellten/Zufalls-Effekt */
.paper.paper-in { pointer-events: none; animation-duration: var(--transition-duration, 900ms); animation-timing-function: cubic-bezier(.22,.78,.18,1); animation-fill-mode: both; }
.paper.paper-in-spin-fly { animation-name: startSpinFly; }
.paper.paper-in-spin { animation-name: startSpin; }
.paper.paper-in-fly { animation-name: startFly; }
.paper.paper-in-spiral { animation-name: startSpiral; }
.paper.paper-in-zoom-spin { animation-name: startZoomSpin; }
.paper.paper-in-fan { animation-name: startFan; }
.paper.paper-in-drop { animation-name: startDrop; }
.paper.paper-in-flip-stack { animation-name: startFlipStack; }
.paper.paper-in-scatter { animation-name: startScatter; }
.paper.paper-in-elastic { animation-name: startElastic; }
.paper.paper-in-tornado { animation-name: startTornado; }
.paper.paper-in-fold { animation-name: startFold; transform-origin: top center; }
body.is-preview .stage { min-height: 100dvh; padding: 10px; transform: scale(.96); transform-origin: center; }
body.is-preview .pager { bottom: 8px; }
body.is-preview .paper-stack { height: calc(100dvh - 70px); }

/* V8: Rueckwaerts-Blaettern bekommt ebenfalls den eingestellten/Zufalls-Effekt */
.paper.paper-in { pointer-events: none; animation-duration: var(--transition-duration, 900ms); animation-timing-function: cubic-bezier(.22,.78,.18,1); animation-fill-mode: both; }
.paper.paper-in-spin-fly { animation-name: startSpinFly; }
.paper.paper-in-spin { animation-name: startSpin; }
.paper.paper-in-fly { animation-name: startFly; }
.paper.paper-in-spiral { animation-name: startSpiral; }
.paper.paper-in-zoom-spin { animation-name: startZoomSpin; }
.paper.paper-in-fan { animation-name: startFan; }
.paper.paper-in-drop { animation-name: startDrop; }
.paper.paper-in-flip-stack { animation-name: startFlipStack; }
.paper.paper-in-scatter { animation-name: startScatter; }
.paper.paper-in-elastic { animation-name: startElastic; }
.paper.paper-in-tornado { animation-name: startTornado; }
.paper.paper-in-fold { animation-name: startFold; transform-origin: top center; }
body.is-preview .stage { min-height: 100dvh; padding: 10px; transform: scale(.96); transform-origin: center; }
body.is-preview .pager { bottom: 8px; }
body.is-preview .paper-stack { height: calc(100dvh - 70px); }

/* V10: Bildformen, Schatten, nicht verschiebbare Bilder und formatierbare Bildunterschriften */
.image-figure { user-select: none; -webkit-user-drag: none; }
.paper-image { border-radius: 0; box-shadow: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.image-figure.shadow-none .paper-image { box-shadow: none; }
.image-figure.shadow-soft .paper-image { box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.image-figure.shadow-medium .paper-image { box-shadow: 0 14px 34px rgba(0,0,0,.26); }
.image-figure.shadow-strong .paper-image { box-shadow: 0 22px 50px rgba(0,0,0,.38); }
.image-figure.shadow-glow .paper-image { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 0 35px rgba(255,255,255,.72), 0 12px 26px rgba(0,0,0,.2); }
.image-figure.shadow-paper .paper-image { box-shadow: 6px 7px 0 rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.18); }
.image-figure.shape-original .paper-image { border-radius: 0; clip-path: none; }
.image-figure.shape-rounded .paper-image { border-radius: 18px; clip-path: none; }
.image-figure.shape-circle .paper-image { aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; }
.image-figure.shape-pill .paper-image { border-radius: 999px; clip-path: none; }
.image-figure.shape-diamond .paper-image { aspect-ratio: 1 / 1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); object-fit: cover; }
.image-figure.shape-star .paper-image { aspect-ratio: 1 / 1; clip-path: polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 91%,50% 70%,21% 91%,32% 56%,2% 35%,39% 34%); object-fit: cover; }
.image-figure.shape-hexagon .paper-image { aspect-ratio: 1 / 1; clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); object-fit: cover; }
.image-figure.shape-blob .paper-image { border-radius: 38% 62% 48% 52% / 48% 35% 65% 52%; object-fit: cover; }
.image-figure.shape-ticket .paper-image { border-radius: 6px; clip-path: polygon(0 0,100% 0,100% 38%,94% 50%,100% 62%,100% 100%,0 100%,0 62%,6% 50%,0 38%); }
.image-figure.shape-polaroid { display: inline-block; background: #fff; padding: 12px 12px 34px; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.image-figure.shape-polaroid .paper-image { width: min(var(--image-size), 100%); border-radius: 2px; box-shadow: none; }
.image-figure figcaption { margin-top: 8px; font-size: var(--caption-size); color: var(--caption-color); font-family: var(--caption-font); opacity: .9; }

/* V11: Mobile Gesten und lange Inhalte im Blatt */
.paper-inner {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px), (pointer: coarse) {
    body {
        overflow: hidden;
        touch-action: none;
    }

    .paper.active .paper-inner {
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-y;
        scrollbar-width: thin;
    }

    .paper.active .paper-inner::-webkit-scrollbar {
        width: 6px;
    }

    .paper.active .paper-inner::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.25);
        border-radius: 999px;
    }

    .paper:not(.active) .paper-inner {
        overflow: hidden;
    }
}
.stage, .paper-stack, .paper {
    touch-action: none;
}
.paper.active .paper-inner {
    touch-action: pan-y;
}
@media (max-width: 900px), (pointer: coarse) {
    html, body { touch-action: auto; }
    .stage, .paper-stack, .paper { touch-action: none; }
    .paper.active .paper-inner { touch-action: pan-y; }
}

/* V12: schnelle Bedienung, Performance-Modus und Bildschatten nur um das Bild */
.paper.is-dormant {
    visibility: hidden !important;
    pointer-events: none !important;
}
.block-image {
    text-align: center;
}
.block-image .image-figure {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.block-image .paper-image {
    width: min(var(--image-size), 100%);
    height: auto;
    max-width: 100%;
}
.block-image .image-figure:not(.shape-polaroid) {
    box-shadow: none !important;
    background: transparent !important;
}
.block-image .image-figure.shape-polaroid {
    width: auto;
    max-width: 100%;
}

@media (max-width: 900px), (pointer: coarse) {
    html, body {
        overflow: hidden;
        touch-action: auto;
    }
    .stage, .paper-stack, .paper {
        touch-action: none;
    }
    .paper.active .paper-inner {
        overflow-x: hidden;
        overflow-y: auto;
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .paper.active .paper-inner::-webkit-scrollbar {
        width: 6px;
    }
    .paper.active .paper-inner::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.25);
        border-radius: 999px;
    }
    .paper:not(.active) .paper-inner {
        overflow: hidden;
    }
}

/* V12-fix: Bildblock-Kasten darf keinen eigenen Hintergrund/Schatten haben.
   Schatten/Formen liegen nur direkt auf dem Bild bzw. beim Polaroid auf dem kleinen Polaroid-Rahmen. */
.content-block.block-image {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 0;
}
.content-block.block-image .image-figure {
    line-height: normal;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto !important;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
}
.content-block.block-image .paper-image {
    display: block;
    width: min(var(--image-size), 100%);
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}
.content-block.block-image .image-figure.shadow-soft .paper-image { box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.content-block.block-image .image-figure.shadow-medium .paper-image { box-shadow: 0 14px 34px rgba(0,0,0,.26); }
.content-block.block-image .image-figure.shadow-strong .paper-image { box-shadow: 0 22px 50px rgba(0,0,0,.38); }
.content-block.block-image .image-figure.shadow-glow .paper-image { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 0 35px rgba(255,255,255,.72), 0 12px 26px rgba(0,0,0,.2); }
.content-block.block-image .image-figure.shadow-paper .paper-image { box-shadow: 6px 7px 0 rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.18); }
.content-block.block-image .image-figure.shape-polaroid {
    display: inline-flex !important;
    background: #fff;
    padding: 12px 12px 34px;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.content-block.block-image .image-figure.shape-polaroid .paper-image {
    box-shadow: none !important;
}
.content-block.block-image figcaption {
    line-height: 1.35;
}

/* V13: endgueltiger Bildschatten-Fix
   Der Schatten wird nicht mehr als box-shadow auf einen breiten Block gelegt,
   sondern als drop-shadow direkt auf das tatsaechlich gerenderte Bild.
   Dadurch bleibt der Schatten auch dann am Bild, wenn der Inhaltsblock breiter ist. */
.content-block.block-image {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
    line-height: normal !important;
}
.content-block.block-image .image-figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
    text-align: center !important;
}
.content-block.block-image .paper-image {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(var(--image-size), 100%) !important;
    max-height: 54cqh !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
@media (max-width: 900px), (pointer: coarse) {
    .content-block.block-image .paper-image {
        max-height: 38cqh !important;
    }
}
.content-block.block-image .paper-image.fit-cover,
.content-block.block-image .image-figure.shape-circle .paper-image,
.content-block.block-image .image-figure.shape-diamond .paper-image,
.content-block.block-image .image-figure.shape-star .paper-image,
.content-block.block-image .image-figure.shape-hexagon .paper-image,
.content-block.block-image .image-figure.shape-blob .paper-image {
    width: min(var(--image-size), 100%) !important;
    max-width: min(var(--image-size), 100%) !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}
.content-block.block-image .paper-image.fit-cover {
    aspect-ratio: 4 / 3 !important;
}
.content-block.block-image .image-figure.shadow-none .paper-image {
    filter: none !important;
}
.content-block.block-image .image-figure.shadow-soft .paper-image {
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important;
}
.content-block.block-image .image-figure.shadow-medium .paper-image {
    filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important;
}
.content-block.block-image .image-figure.shadow-strong .paper-image {
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.38)) !important;
}
.content-block.block-image .image-figure.shadow-glow .paper-image {
    filter: drop-shadow(0 0 12px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important;
}
.content-block.block-image .image-figure.shadow-paper .paper-image {
    filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important;
}
.content-block.block-image .image-figure.shape-polaroid {
    display: inline-flex !important;
    width: auto !important;
    max-width: min(var(--image-size), 100%) !important;
    padding: 12px 12px 34px !important;
    background: #fff !important;
    box-shadow: none !important;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.28)) !important;
}
.content-block.block-image .image-figure.shape-polaroid .paper-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 54cqh !important;
    filter: none !important;
    box-shadow: none !important;
}
.content-block.block-image .image-figure.shape-polaroid.shadow-none {
    filter: none !important;
}
.content-block.block-image figcaption {
    display: block !important;
    width: auto !important;
    max-width: min(var(--image-size), 100%) !important;
    margin: 8px auto 0 !important;
    line-height: 1.35 !important;
}

/* TESTAPPEND */

/* V15 final: Bild-CSS strikt von Box-CSS getrennt.
   --block-width ist die breite Spalte/Karte. --image-size gilt nur fuer die innere Bildhuelle. */
.content-block.block-image {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  text-align: center !important;
  line-height: normal !important;
}
.content-block.block-image .image-figure {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  text-align: center !important;
}
.content-block.block-image .image-shadow-wrap {
  display: inline-block !important;
  width: auto !important;
  max-width: min(var(--image-size), 100%) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  vertical-align: top !important;
}
.content-block.block-image .paper-image {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 54cqh !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
.content-block.block-image .image-figure.shadow-none .image-shadow-wrap { box-shadow: none !important; }
.content-block.block-image .image-figure.shadow-soft .image-shadow-wrap { box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; }
.content-block.block-image .image-figure.shadow-medium .image-shadow-wrap { box-shadow: 0 14px 34px rgba(0,0,0,.26) !important; }
.content-block.block-image .image-figure.shadow-strong .image-shadow-wrap { box-shadow: 0 22px 50px rgba(0,0,0,.38) !important; }
.content-block.block-image .image-figure.shadow-glow .image-shadow-wrap { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 0 35px rgba(255,255,255,.72), 0 12px 26px rgba(0,0,0,.2) !important; }
.content-block.block-image .image-figure.shadow-paper .image-shadow-wrap { box-shadow: 6px 7px 0 rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.18) !important; }
.content-block.block-image .image-figure.shape-none .image-shadow-wrap,
.content-block.block-image .image-figure.shape-none .paper-image { border-radius: 0 !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-rounded .image-shadow-wrap,
.content-block.block-image .image-figure.shape-rounded .paper-image { border-radius: 14px !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-pill .image-shadow-wrap,
.content-block.block-image .image-figure.shape-pill .paper-image { border-radius: 999px !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-circle .image-shadow-wrap,
.content-block.block-image .image-figure.shape-diamond .image-shadow-wrap,
.content-block.block-image .image-figure.shape-star .image-shadow-wrap,
.content-block.block-image .image-figure.shape-hexagon .image-shadow-wrap,
.content-block.block-image .image-figure.shape-blob .image-shadow-wrap {
  width: min(var(--image-size), 100%) !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.content-block.block-image .image-figure.shape-circle .image-shadow-wrap { border-radius: 50% !important; }
.content-block.block-image .image-figure.shape-diamond .image-shadow-wrap { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important; }
.content-block.block-image .image-figure.shape-star .image-shadow-wrap { clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%) !important; }
.content-block.block-image .image-figure.shape-hexagon .image-shadow-wrap { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%) !important; }
.content-block.block-image .image-figure.shape-blob .image-shadow-wrap { border-radius: 58% 42% 49% 51% / 45% 55% 45% 55% !important; overflow: hidden !important; }
.content-block.block-image .image-figure.shape-circle .paper-image,
.content-block.block-image .image-figure.shape-diamond .paper-image,
.content-block.block-image .image-figure.shape-star .paper-image,
.content-block.block-image .image-figure.shape-hexagon .paper-image,
.content-block.block-image .image-figure.shape-blob .paper-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}
.content-block.block-image .paper-image.fit-cover {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.content-block.block-image .image-figure:not(.shape-circle):not(.shape-diamond):not(.shape-star):not(.shape-hexagon):not(.shape-blob) .paper-image.fit-cover { aspect-ratio: 4 / 3 !important; }
.content-block.block-image .image-figure.shape-polaroid .image-shadow-wrap {
  display: inline-block !important;
  width: auto !important;
  max-width: min(var(--image-size), 100%) !important;
  padding: 12px 12px 34px !important;
  background: #fff !important;
  border-radius: 2px !important;
  clip-path: none !important;
}
.content-block.block-image .image-figure.shape-polaroid .paper-image {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 54cqh !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  filter: none !important;
}
.content-block.block-image figcaption {
  display: block !important;
  max-width: min(var(--image-size), 100%) !important;
  margin: 8px auto 0 !important;
  color: var(--caption-color) !important;
  font-size: var(--caption-size) !important;
  font-family: var(--caption-font) !important;
  line-height: 1.35 !important;
}
@media (max-width: 900px), (pointer: coarse) {
  .content-block.block-image .paper-image,
  .content-block.block-image .image-figure.shape-polaroid .paper-image { max-height: 38cqh !important; }
}

/* V16: Bildgroesse und Schatten wirklich trennen.
   Bei --image-size:100% entscheidet JS: Wenn das Bild dadurch hoeher als der verfuegbare Bildbereich wird,
   wird der Prozentwert entfernt und das Bild laeuft auf auto/max-height. Der Schatten bleibt immer an der
   inneren Bildhuelle, nie am breiten Block. */
.content-block.block-image {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}
.content-block.block-image .image-figure {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
  text-align: center !important;
}
.content-block.block-image .image-shadow-wrap {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  line-height: 0 !important;
  vertical-align: top !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-shadow-wrap {
  width: min(var(--image-size), 100%) !important;
  max-width: 100% !important;
}
.content-block.block-image.image-size-percent:not(.image-size-auto) .paper-image {
  width: 100% !important;
  max-width: 100% !important;
}
.content-block.block-image.image-size-auto .image-shadow-wrap {
  width: auto !important;
  max-width: 100% !important;
}
.content-block.block-image.image-size-auto .paper-image {
  width: auto !important;
  max-width: 100% !important;
}
.content-block.block-image .paper-image {
  display: block !important;
  height: auto !important;
  max-height: 54cqh !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
.content-block.block-image .image-figure.shadow-none .image-shadow-wrap { box-shadow: none !important; }
.content-block.block-image .image-figure.shadow-soft .image-shadow-wrap { box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; }
.content-block.block-image .image-figure.shadow-medium .image-shadow-wrap { box-shadow: 0 14px 34px rgba(0,0,0,.26) !important; }
.content-block.block-image .image-figure.shadow-strong .image-shadow-wrap { box-shadow: 0 22px 50px rgba(0,0,0,.38) !important; }
.content-block.block-image .image-figure.shadow-glow .image-shadow-wrap { box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 0 35px rgba(255,255,255,.72), 0 12px 26px rgba(0,0,0,.2) !important; }
.content-block.block-image .image-figure.shadow-paper .image-shadow-wrap { box-shadow: 6px 7px 0 rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.18) !important; }
@media (max-width: 900px), (pointer: coarse) {
  .content-block.block-image .paper-image { max-height: 38cqh !important; }
}

/* V17 FINAL: Bildschatten wirklich nur am sichtbaren Bild.
   Der breite content-block bleibt nur Layout-Spalte. --image-size wirkt nur als max-width auf das IMG.
   Dadurch wird bei hoehenbegrenzten Bildern nicht der breite Kasten beschattet. */
.content-block.block-image,
.content-block.block-image .image-figure,
.content-block.block-image .image-shadow-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
}
.content-block.block-image {
    padding: 0 !important;
    overflow: visible !important;
    text-align: center !important;
}
.content-block.block-image .image-figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
    text-align: center !important;
}
.content-block.block-image .image-shadow-wrap {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    line-height: 0 !important;
    vertical-align: top !important;
}
.content-block.block-image .paper-image {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(var(--image-size, 100%), 100%) !important;
    max-height: 54cqh !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
.content-block.block-image .image-figure.shadow-none .paper-image { filter: none !important; }
.content-block.block-image .image-figure.shadow-soft .paper-image { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image .image-figure.shadow-medium .paper-image { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image .image-figure.shadow-strong .paper-image { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image .image-figure.shadow-glow .paper-image { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image .image-figure.shadow-paper .paper-image { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
.content-block.block-image .image-figure.shape-none .paper-image,
.content-block.block-image .image-figure.shape-original .paper-image { border-radius: 0 !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-rounded .paper-image { border-radius: 14px !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-pill .paper-image { border-radius: 999px !important; clip-path: none !important; }
.content-block.block-image .image-figure.shape-circle .paper-image,
.content-block.block-image .image-figure.shape-diamond .paper-image,
.content-block.block-image .image-figure.shape-star .paper-image,
.content-block.block-image .image-figure.shape-hexagon .paper-image,
.content-block.block-image .image-figure.shape-blob .paper-image {
    width: min(var(--image-size, 100%), 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-height: min(54cqh, min(var(--image-size, 100%), 100%)) !important;
    object-fit: cover !important;
}
.content-block.block-image .image-figure.shape-circle .paper-image { border-radius: 50% !important; }
.content-block.block-image .image-figure.shape-diamond .paper-image { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important; }
.content-block.block-image .image-figure.shape-star .paper-image { clip-path: polygon(50% 0%, 61% 34%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 34%) !important; }
.content-block.block-image .image-figure.shape-hexagon .paper-image { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%) !important; }
.content-block.block-image .image-figure.shape-blob .paper-image { border-radius: 58% 42% 49% 51% / 45% 55% 45% 55% !important; }
.content-block.block-image .image-figure.shape-ticket .paper-image { border-radius: 6px !important; clip-path: polygon(0 0,100% 0,100% 38%,94% 50%,100% 62%,100% 100%,0 100%,0 62%,6% 50%,0 38%) !important; }
.content-block.block-image .image-figure.shape-polaroid .image-shadow-wrap {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 12px 12px 34px !important;
    background: #fff !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.content-block.block-image .image-figure.shape-polaroid .paper-image {
    max-width: min(var(--image-size, 100%), 100%) !important;
    max-height: 54cqh !important;
    border-radius: 2px !important;
    filter: none !important;
}
.content-block.block-image .image-figure.shape-polaroid.shadow-none .image-shadow-wrap { filter: none !important; }
.content-block.block-image .image-figure.shape-polaroid.shadow-soft .image-shadow-wrap { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image .image-figure.shape-polaroid.shadow-medium .image-shadow-wrap { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image .image-figure.shape-polaroid.shadow-strong .image-shadow-wrap { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image .image-figure.shape-polaroid.shadow-glow .image-shadow-wrap { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image .image-figure.shape-polaroid.shadow-paper .image-shadow-wrap { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
.content-block.block-image figcaption {
    display: block !important;
    width: auto !important;
    max-width: min(var(--image-size, 100%), 100%) !important;
    margin: 8px auto 0 !important;
    line-height: 1.35 !important;
}
@media (max-width: 900px), (pointer: coarse) {
    .content-block.block-image .paper-image,
    .content-block.block-image .image-figure.shape-polaroid .paper-image { max-height: 38cqh !important; }
}

/* V17 override gegen alte image-size-percent-Regeln mit hoeherer Spezifitaet */
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-shadow-wrap,
.content-block.block-image.image-size-percent.image-size-auto .image-shadow-wrap,
.content-block.block-image.image-size-percent .image-shadow-wrap {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
    filter: none !important;
}
.content-block.block-image.image-size-percent:not(.image-size-auto) .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .paper-image,
.content-block.block-image.image-size-percent .paper-image,
.content-block.block-image .image-figure:not(.shape-circle):not(.shape-diamond):not(.shape-star):not(.shape-hexagon):not(.shape-blob) .paper-image.fit-cover,
.content-block.block-image .paper-image.fit-cover {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(var(--image-size, 100%), 100%) !important;
    max-height: 54cqh !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-none .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-none .paper-image { filter: none !important; }
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-soft .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-soft .paper-image { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-medium .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-medium .paper-image { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-strong .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-strong .paper-image { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-glow .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-glow .paper-image { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image.image-size-percent:not(.image-size-auto) .image-figure.shadow-paper .paper-image,
.content-block.block-image.image-size-percent.image-size-auto .image-figure.shadow-paper .paper-image { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
@media (max-width: 900px), (pointer: coarse) {
    .content-block.block-image.image-size-percent:not(.image-size-auto) .paper-image,
    .content-block.block-image.image-size-percent.image-size-auto .paper-image,
    .content-block.block-image.image-size-percent .paper-image,
    .content-block.block-image .paper-image.fit-cover { max-height: 38cqh !important; }
}

/* V18: harte Trennung von Bildbox und Karten-/Blockbox.
   Der breite Block ist nur Layout. JavaScript setzt .image-shadow-wrap exakt auf die echte Bildgröße.
   Schatten liegt danach nur noch auf dem gerenderten Bild bzw. bei Polaroid auf der exakt gesetzten Hülle. */
.content-block.block-image.image-size-js-fitted,
.content-block.block-image.image-size-js-fitted .image-figure {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}
.content-block.block-image.image-size-js-fitted .image-figure {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    line-height: 0 !important;
}
.content-block.block-image.image-size-js-fitted .image-shadow-wrap {
    display: inline-block !important;
    box-sizing: content-box !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    line-height: 0 !important;
    vertical-align: top !important;
}
.content-block.block-image.image-size-js-fitted .paper-image {
    display: block !important;
    box-sizing: border-box !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
.content-block.block-image.image-size-js-fitted .image-figure.shadow-none .paper-image { filter: none !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shadow-soft .paper-image { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shadow-medium .paper-image { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shadow-strong .paper-image { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shadow-glow .paper-image { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shadow-paper .paper-image { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid .image-shadow-wrap {
    padding: 12px 12px 34px !important;
    background: #fff !important;
    border-radius: 2px !important;
}
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid .paper-image { filter: none !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-none .image-shadow-wrap { filter: none !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-soft .image-shadow-wrap { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-medium .image-shadow-wrap { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-strong .image-shadow-wrap { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-glow .image-shadow-wrap { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image.image-size-js-fitted .image-figure.shape-polaroid.shadow-paper .image-shadow-wrap { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-js-fitted figcaption {
    line-height: 1.35 !important;
    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* V19: 100%-Contain-Bilder nicht kuenstlich auf Blockbreite ziehen.
   Wenn Bildgroesse 100% ist und Darstellung "Ganz anzeigen" genutzt wird,
   gibt es bewusst KEIN --image-size. Dann bestimmt das echte Bild + max-width/max-height
   die sichtbare Groesse, und der Schatten klebt nur am Bild. */
.content-block.block-image.image-size-natural,
.content-block.block-image.image-size-natural .image-figure,
.content-block.block-image.image-size-natural .image-shadow-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    overflow: visible !important;
}
.content-block.block-image.image-size-natural .image-figure {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
    line-height: 0 !important;
}
.content-block.block-image.image-size-natural .image-shadow-wrap {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: top !important;
}
.content-block.block-image.image-size-natural .paper-image.fit-contain {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 54cqh !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
@media (max-width: 900px), (pointer: coarse) {
    .content-block.block-image.image-size-natural .paper-image.fit-contain { max-height: 38cqh !important; }
}
.content-block.block-image.image-size-natural .image-figure.shadow-none .paper-image { filter: none !important; }
.content-block.block-image.image-size-natural .image-figure.shadow-soft .paper-image { filter: drop-shadow(0 8px 14px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-natural .image-figure.shadow-medium .paper-image { filter: drop-shadow(0 12px 20px rgba(0,0,0,.28)) !important; }
.content-block.block-image.image-size-natural .image-figure.shadow-strong .paper-image { filter: drop-shadow(0 18px 30px rgba(0,0,0,.38)) !important; }
.content-block.block-image.image-size-natural .image-figure.shadow-glow .paper-image { filter: drop-shadow(0 0 14px rgba(255,255,255,.75)) drop-shadow(0 12px 18px rgba(0,0,0,.22)) !important; }
.content-block.block-image.image-size-natural .image-figure.shadow-paper .paper-image { filter: drop-shadow(6px 7px 0 rgba(0,0,0,.10)) drop-shadow(0 12px 18px rgba(0,0,0,.20)) !important; }
.content-block.block-image.image-size-natural .image-figure.shape-none .paper-image,
.content-block.block-image.image-size-natural .image-figure.shape-original .paper-image { border-radius: 0 !important; clip-path: none !important; }
.content-block.block-image.image-size-natural .image-figure.shape-rounded .paper-image { border-radius: 14px !important; clip-path: none !important; }
.content-block.block-image.image-size-natural .image-figure.shape-pill .paper-image { border-radius: 999px !important; clip-path: none !important; }
.content-block.block-image.image-size-natural figcaption {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 8px auto 0 !important;
    line-height: 1.35 !important;
}

/* V24: Desktop-Kartenscroll und Seiten-Farbverlauf */
.paper {
    background-image: var(--paper-gradient, none), var(--paper-bg-image, none) !important;
    background-size: cover, cover !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}
.paper.active .paper-inner {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.paper.active .paper-inner.is-scrollable {
    align-content: flex-start !important;
}
.paper.active .paper-inner::-webkit-scrollbar { width: 8px; }
.paper.active .paper-inner::-webkit-scrollbar-thumb { background: rgba(0,0,0,.24); border-radius: 999px; }
.paper:not(.active) .paper-inner { overflow: hidden !important; }

/* V28: Karte zwischen den anderen hervorheben / nur herausgucken lassen */
.paper.highlight-peek:not(.highlight-is-current) {
    cursor: pointer;
    pointer-events: auto;
    will-change: transform;
    animation-duration: var(--highlight-duration, 4s);
    animation-iteration-count: var(--highlight-count, 3);
    animation-timing-function: cubic-bezier(.2,.9,.18,1);
    animation-fill-mode: forwards;
    /* V29: Die Karte bleibt unter den normalen Karten.
       Nur der herausgeschobene Rand bleibt sichtbar und wackelt. */
    z-index: 1 !important;
}
.paper.highlight-peek:not(.highlight-is-current).active {
    z-index: 1 !important;
}
.paper.highlight-peek:not(.highlight-is-current) .highlight-title { opacity: 1; }
.paper.highlight-stopped .highlight-title { display: none !important; }
.paper.highlight-is-current { animation: none !important; }
.paper.highlight-is-current .highlight-title { display: none; }
.paper.highlight-left:not(.highlight-is-current) { animation-name: highlightPeekLeft; }
.paper.highlight-right:not(.highlight-is-current) { animation-name: highlightPeekRight; }
.paper.highlight-up:not(.highlight-is-current) { animation-name: highlightPeekUp; }
.paper.highlight-down:not(.highlight-is-current) { animation-name: highlightPeekDown; }
.paper.highlight-diag-left:not(.highlight-is-current) { animation-name: highlightPeekDiagLeft; }
.paper.highlight-diag-right:not(.highlight-is-current) { animation-name: highlightPeekDiagRight; }
.highlight-title {
    position: absolute;
    z-index: 2;
    border: 0;
    border-radius: 999px;
    background: var(--highlight-button-bg, rgba(255,255,255,.95));
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    color: var(--highlight-button-color, #222);
    font-weight: 800;
    font-size: clamp(12px, 1.7vmin, 17px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    opacity: .98;
    padding: 9px 14px;
    touch-action: manipulation;
    max-width: min(340px, calc(100vw - 28px));
}
.paper.highlight-left .highlight-title { left: 12px; top: 50%; transform: translateY(-50%); }
.paper.highlight-right .highlight-title { right: 12px; top: 50%; transform: translateY(-50%); }
.paper.highlight-up .highlight-title { left: 50%; top: 12px; transform: translateX(-50%); }
.paper.highlight-down .highlight-title { left: 50%; bottom: 12px; transform: translateX(-50%); }
.paper.highlight-diag-left .highlight-title { left: 12px; top: 12px; }
.paper.highlight-diag-right .highlight-title { right: 12px; top: 12px; }
.highlight-title:hover { filter: brightness(1.04); }
@keyframes highlightPeekLeft {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) - 1.2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) - 3deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) + 2deg)); }
    100% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) - 1.2deg)); }
}
@keyframes highlightPeekRight {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) + 1.2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) + 3deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) - 2deg)); }
    100% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), var(--y)) rotate(calc(var(--rot) + 1.2deg)); }
}
@keyframes highlightPeekUp {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(var(--x), calc(var(--y) - var(--highlight-distance, 120px))) rotate(var(--rot)); }
    24%, 48%, 72% { transform: translate(var(--x), calc(var(--y) - var(--highlight-distance, 120px))) rotate(calc(var(--rot) - 2.5deg)); }
    36%, 60%, 84% { transform: translate(var(--x), calc(var(--y) - var(--highlight-distance, 120px))) rotate(calc(var(--rot) + 2.5deg)); }
    100% { transform: translate(var(--x), calc(var(--y) - var(--highlight-distance, 120px))) rotate(var(--rot)); }
}
@keyframes highlightPeekDown {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(var(--x), calc(var(--y) + var(--highlight-distance, 120px))) rotate(var(--rot)); }
    24%, 48%, 72% { transform: translate(var(--x), calc(var(--y) + var(--highlight-distance, 120px))) rotate(calc(var(--rot) + 2.5deg)); }
    36%, 60%, 84% { transform: translate(var(--x), calc(var(--y) + var(--highlight-distance, 120px))) rotate(calc(var(--rot) - 2.5deg)); }
    100% { transform: translate(var(--x), calc(var(--y) + var(--highlight-distance, 120px))) rotate(var(--rot)); }
}
@keyframes highlightPeekDiagLeft {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 4deg)); }
    28%, 58%, 82% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 7deg)); }
    42%, 70% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 1deg)); }
    100% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 4deg)); }
}
@keyframes highlightPeekDiagRight {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 4deg)); }
    28%, 58%, 82% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 7deg)); }
    42%, 70% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 1deg)); }
    100% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 4deg)); }
}
@media (max-width: 900px), (pointer: coarse) {
    .highlight-title { padding: 9px 14px; font-size: clamp(12px, 3.3vw, 16px); }
}

/* V32: Highlight auf Smartphones sichtbar machen.
   Links/rechts bietet auf kleinen Displays zu wenig sichtbaren Rand, wenn die Karte
   wirklich unter dem Stapel bleiben soll. Mobil wird deshalb automatisch nach unten
   oder oben herausgeschoben; der Button bleibt voll lesbar. */
@media (max-width: 700px), (pointer: coarse) {
    .paper.highlight-peek:not(.highlight-is-current) {
        overflow: visible !important;
        z-index: 1 !important;
    }
    .paper.highlight-peek:not(.highlight-is-current)::before,
    .paper.highlight-peek:not(.highlight-is-current) .paper-inner {
        overflow: hidden !important;
    }
    .paper.highlight-peek:not(.highlight-is-current) .highlight-title {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        min-height: 38px;
        max-width: min(78vw, 320px);
        padding: 10px 16px;
        font-size: clamp(13px, 3.6vw, 16px);
        box-shadow: 0 8px 22px rgba(0,0,0,.24);
    }
    .paper.highlight-down .highlight-title {
        left: 50% !important;
        right: auto !important;
        bottom: 10px !important;
        top: auto !important;
        transform: translateX(-50%) !important;
    }
    .paper.highlight-up .highlight-title {
        left: 50% !important;
        right: auto !important;
        top: 10px !important;
        bottom: auto !important;
        transform: translateX(-50%) !important;
    }
}

/* V33: Die Hervorheben-Animation laeuft direkt auf der echten Paper-Karte.
   Beim Klick wird genau dieses .paper-Element aktiv gesetzt. */
.paper.highlight-peek { backface-visibility: hidden; transform-style: preserve-3d; }

/* V34: Desktop-Hervorhebung links/rechts oben/mittig/unten; mobil nur oben/unten */
.paper.highlight-left-top:not(.highlight-is-current) { animation-name: highlightPeekLeftTop !important; }
.paper.highlight-left-middle:not(.highlight-is-current) { animation-name: highlightPeekLeft !important; }
.paper.highlight-left-bottom:not(.highlight-is-current) { animation-name: highlightPeekLeftBottom !important; }
.paper.highlight-right-top:not(.highlight-is-current) { animation-name: highlightPeekRightTop !important; }
.paper.highlight-right-middle:not(.highlight-is-current) { animation-name: highlightPeekRight !important; }
.paper.highlight-right-bottom:not(.highlight-is-current) { animation-name: highlightPeekRightBottom !important; }
.paper.highlight-left-top .highlight-title { left: 12px !important; right: auto !important; top: 12px !important; bottom: auto !important; transform: none !important; }
.paper.highlight-left-middle .highlight-title { left: 12px !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
.paper.highlight-left-bottom .highlight-title { left: 12px !important; right: auto !important; top: auto !important; bottom: 12px !important; transform: none !important; }
.paper.highlight-right-top .highlight-title { right: 12px !important; left: auto !important; top: 12px !important; bottom: auto !important; transform: none !important; }
.paper.highlight-right-middle .highlight-title { right: 12px !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; }
.paper.highlight-right-bottom .highlight-title { right: 12px !important; left: auto !important; top: auto !important; bottom: 12px !important; transform: none !important; }

@keyframes highlightPeekLeftTop {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 4deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 1deg)); }
    100% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 2deg)); }
}
@keyframes highlightPeekLeftBottom {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) - 2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) - 4deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) + 1deg)); }
    100% { transform: translate(calc(var(--x) - var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) - 2deg)); }
}
@keyframes highlightPeekRightTop {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 4deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) - 1deg)); }
    100% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) - 70px)) rotate(calc(var(--rot) + 2deg)); }
}
@keyframes highlightPeekRightBottom {
    0% { transform: translate(var(--x), var(--y)) rotate(var(--rot)); }
    12% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) + 2deg)); }
    24%, 48%, 72% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) + 4deg)); }
    36%, 60%, 84% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) - 1deg)); }
    100% { transform: translate(calc(var(--x) + var(--highlight-distance, 120px)), calc(var(--y) + 70px)) rotate(calc(var(--rot) + 2deg)); }
}
@media (max-width: 700px), (pointer: coarse) {
    .paper.highlight-left-top, .paper.highlight-left-middle, .paper.highlight-left-bottom,
    .paper.highlight-right-top, .paper.highlight-right-middle, .paper.highlight-right-bottom {
        animation-name: none !important;
    }
}

/* V37: Illustrative Objekt-Hintergruende und animierte Szenen */
.stage { isolation: isolate; }
.paper-stack { z-index: 2; }
.scene-layer {
    position: absolute;
    inset: -2.5vw;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.scene-backdrop,
.scene-objects {
    position: absolute;
    inset: 0;
}
.scene-objects {
    z-index: 2;
}
.scene-layer.theme-painter {
    mix-blend-mode: multiply;
}
.scene-layer.theme-it {
    mix-blend-mode: screen;
}
.scene-object {
    position: absolute;
    left: var(--obj-left);
    top: var(--obj-top);
    width: var(--obj-size);
    color: var(--obj-color);
    opacity: var(--obj-opacity);
    transform: translate(-50%, -50%) rotate(var(--obj-rot));
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .10));
    animation: sceneObjectFloat var(--obj-duration) ease-in-out infinite alternate;
    animation-delay: calc(var(--obj-delay) * -1);
    will-change: transform;
}
.scene-object svg {
    width: 100%;
    height: auto;
    display: block;
}
@keyframes sceneObjectFloat {
    0% {
        transform: translate(-50%, -50%) rotate(var(--obj-rot)) scale(1);
    }
    100% {
        transform: translate(calc(-50% + var(--obj-drift-x)), calc(-50% + var(--obj-drift-y))) rotate(calc(var(--obj-rot) + 6deg)) scale(1.035);
    }
}

/* Maler-Hintergrund */
.painter-backdrop::before,
.painter-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.painter-backdrop::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 167, 92, .18), transparent 20%),
        radial-gradient(circle at 84% 26%, rgba(92, 200, 255, .16), transparent 18%),
        radial-gradient(circle at 26% 78%, rgba(255, 105, 97, .16), transparent 20%),
        radial-gradient(circle at 76% 78%, rgba(141, 208, 129, .16), transparent 18%);
}
.painter-backdrop::after {
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 38%);
}
.paint-blob {
    position: absolute;
    left: var(--blob-left);
    top: var(--blob-top);
    width: var(--blob-size);
    aspect-ratio: 1 / 1;
    border-radius: 42% 58% 51% 49% / 46% 40% 60% 54%;
    background: var(--blob-color);
    opacity: .18;
    filter: blur(2px);
    animation: paintBlobMove var(--blob-duration) ease-in-out infinite alternate;
    animation-delay: var(--blob-delay);
}
@keyframes paintBlobMove {
    from {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
        border-radius: 42% 58% 51% 49% / 46% 40% 60% 54%;
    }
    to {
        transform: translate(calc(-50% + 12px), calc(-50% - 10px)) rotate(14deg) scale(1.08);
        border-radius: 56% 44% 37% 63% / 42% 57% 43% 58%;
    }
}
.paint-roller-track {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 17%;
    height: 140px;
    opacity: .8;
}
.paint-stroke {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,148,88,.12), rgba(255,215,102,.24) 28%, rgba(92,200,255,.22) 58%, rgba(142,208,129,.15));
    filter: blur(.3px);
    animation: paintStrokePulse 15s linear infinite;
}
@keyframes paintStrokePulse {
    0%, 100% { opacity: .26; }
    50% { opacity: .42; }
}
.paint-roller {
    position: absolute;
    left: -180px;
    top: 0;
    width: 170px;
    height: 120px;
    animation: paintRollerMove 18s linear infinite;
}
@keyframes paintRollerMove {
    from { transform: translateX(0) rotate(-5deg); }
    to { transform: translateX(calc(100vw + 280px)) rotate(2deg); }
}
.roller-head,
.roller-arm,
.roller-handle {
    position: absolute;
    display: block;
}
.roller-head {
    left: 0;
    top: 18px;
    width: 84px;
    height: 34px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.02)), #f6d15b;
    box-shadow: inset 0 0 0 4px rgba(71, 50, 25, .18);
}
.roller-arm {
    left: 70px;
    top: 50px;
    width: 30px;
    height: 30px;
    border-left: 6px solid rgba(89, 70, 40, .55);
    border-bottom: 6px solid rgba(89, 70, 40, .55);
    border-bottom-left-radius: 16px;
}
.roller-handle {
    left: 98px;
    top: 72px;
    width: 12px;
    height: 52px;
    border-radius: 999px;
    background: linear-gradient(180deg, #5c4a33, #8a6d4a);
    transform: rotate(22deg);
    transform-origin: top center;
}

/* IT-Hintergrund */
.it-backdrop {
    background:
        radial-gradient(circle at 14% 18%, rgba(113, 238, 255, .12), transparent 18%),
        radial-gradient(circle at 88% 22%, rgba(126, 167, 255, .12), transparent 18%),
        radial-gradient(circle at 22% 84%, rgba(104, 255, 212, .12), transparent 18%),
        radial-gradient(circle at 84% 84%, rgba(108, 139, 255, .12), transparent 18%);
}
.it-backdrop::before,
.it-backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.it-backdrop::before {
    background-image:
        linear-gradient(rgba(111, 233, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 233, 255, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,.85) 30%, transparent 92%);
}
.it-backdrop::after {
    background: linear-gradient(90deg, transparent 0%, rgba(119, 245, 255, .16) 48%, transparent 100%);
    animation: techSweep 14s linear infinite;
    transform: translateX(-100%);
}
@keyframes techSweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
.circuit-node,
.circuit-trace {
    position: absolute;
    display: block;
}
.circuit-node {
    left: var(--node-left);
    top: var(--node-top);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(122, 245, 255, .75);
    box-shadow: 0 0 0 4px rgba(122, 245, 255, .10), 0 0 18px rgba(122, 245, 255, .45);
    animation: circuitPulse var(--node-duration) ease-in-out infinite;
    animation-delay: var(--node-delay);
}
@keyframes circuitPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(.85); opacity: .4; }
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: .95; }
}
.circuit-trace {
    left: var(--trace-left);
    top: var(--trace-top);
    width: var(--trace-width);
    height: 2px;
    transform: translate(-50%, -50%) rotate(var(--trace-rot));
    background: linear-gradient(90deg, transparent 0%, rgba(124, 244, 255, .12) 18%, rgba(124, 244, 255, .82) 50%, rgba(124, 244, 255, .12) 82%, transparent 100%);
    box-shadow: 0 0 12px rgba(124, 244, 255, .26);
    animation: circuitFlow var(--trace-duration) linear infinite;
    animation-delay: var(--trace-delay);
}
@keyframes circuitFlow {
    0% { opacity: .15; filter: brightness(.8); }
    45% { opacity: .7; filter: brightness(1.3); }
    100% { opacity: .2; filter: brightness(.9); }
}

@media (max-width: 900px) {
    .scene-layer {
        inset: -6vw;
    }
    .scene-object {
        width: calc(var(--obj-size) * .85);
        opacity: calc(var(--obj-opacity) * .9);
    }
    .paint-roller-track {
        top: 12%;
        transform: scale(.82);
        transform-origin: left top;
    }
}

/* V40: IT-Schaltplan-Hintergrund nur aus Strichen, ohne gefuellte Musterflaechen */
.scene-layer.theme-it {
    mix-blend-mode: normal;
}
.scene-layer.theme-it .scene-backdrop,
.scene-layer.theme-it .circuit-board {
    inset: 0;
}
.circuit-board {
    background: var(--circuit-bg) !important;
    opacity: .94;
    overflow: hidden;
}
.circuit-board::before,
.circuit-board::after {
    content: none !important;
    display: none !important;
}
.circuit-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.circuit-paths path {
    fill: none !important;
    stroke: var(--circuit-trace) !important;
    stroke-width: calc(var(--circuit-trace-width) * 1px);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .64;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 calc(var(--circuit-trace-width) * 2px) color-mix(in srgb, var(--circuit-trace) 55%, transparent));
}
.circuit-paths path:nth-child(3n) { opacity: .48; }
.circuit-paths path:nth-child(4n) { opacity: .78; }
.circuit-junctions circle {
    fill: none !important;
    stroke: var(--circuit-trace) !important;
    stroke-width: calc(max(1.2, var(--circuit-trace-width) * .72) * 1px);
    opacity: .78;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--circuit-trace) 45%, transparent));
    animation: circuitPulse 4.8s ease-in-out infinite;
}
.circuit-junctions circle:nth-child(2n) { animation-delay: -1.1s; }
.circuit-junctions circle:nth-child(3n) { animation-delay: -2.4s; }
.electron-core {
    fill: var(--circuit-electron) !important;
    opacity: .98;
}
.electron-tail {
    fill: none !important;
    stroke: var(--circuit-electron) !important;
    stroke-width: calc(var(--circuit-electron-size) * 1.35px);
    stroke-linecap: round;
    opacity: .58;
    filter: drop-shadow(0 0 calc(var(--circuit-electron-size) * 1.8px) color-mix(in srgb, var(--circuit-electron) 80%, transparent));
}
@keyframes circuitPulse {
    0%, 100% { opacity: .42; }
    50% { opacity: .95; }
}
@media (max-width: 900px) {
    .circuit-paths path { stroke-width: calc(var(--circuit-trace-width) * 1.15px); }
    .electron-tail { stroke-width: calc(var(--circuit-electron-size) * 1.55px); }
}

/* V41: harte Korrektur - IT-Schaltplan ausschliesslich als Striche, Farben immer aus Admin-CSS-Variablen */
.scene-layer.theme-it,
.scene-layer.theme-it * { box-sizing: border-box; }
.scene-layer.theme-it .it-backdrop,
.scene-layer.theme-it .circuit-board {
    background-color: var(--circuit-bg) !important;
    background-image: none !important;
}
.scene-layer.theme-it .it-backdrop::before,
.scene-layer.theme-it .it-backdrop::after,
.scene-layer.theme-it .circuit-board::before,
.scene-layer.theme-it .circuit-board::after {
    content: none !important;
    display: none !important;
    background: none !important;
}
.scene-layer.theme-it .circuit-node,
.scene-layer.theme-it .circuit-trace { display: none !important; }
.scene-layer.theme-it .circuit-svg,
.scene-layer.theme-it .circuit-svg * { background: transparent !important; }
.scene-layer.theme-it .circuit-svg rect,
.scene-layer.theme-it .circuit-svg polygon,
.scene-layer.theme-it .circuit-svg ellipse { display: none !important; }
.scene-layer.theme-it .circuit-svg path,
.scene-layer.theme-it .circuit-svg line,
.scene-layer.theme-it .circuit-svg polyline { fill: none !important; }
.scene-layer.theme-it .circuit-paths path {
    stroke: var(--circuit-trace) !important;
    stroke-width: calc(var(--circuit-trace-width) * 1px) !important;
    fill: none !important;
}
.scene-layer.theme-it .circuit-junctions circle { fill: none !important; stroke: var(--circuit-trace) !important; }
.scene-layer.theme-it .electron-core { fill: var(--circuit-electron) !important; stroke: none !important; }
.scene-layer.theme-it .electron-tail {
    fill: none !important;
    stroke: var(--circuit-electron) !important;
    stroke-width: calc(var(--circuit-electron-size) * 1.35px) !important;
}

/* V42: IT-Leiterbahnen als gleichmaessiges Liniennetz mit Knotenpunkten und gebogenem Elektronen-Schweif */
.circuit-paths path,
.circuit-junctions circle,
.circuit-holes circle,
.electron-core,
.electron-trail-dot {
    fill: none !important;
}
.circuit-holes circle {
    fill: var(--circuit-bg) !important;
    stroke: var(--circuit-trace) !important;
    stroke-width: calc(max(1.1, var(--circuit-trace-width) * .7) * 1px);
    opacity: .86;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--circuit-trace) 35%, transparent));
}
.electron-trail-dot {
    fill: var(--circuit-electron) !important;
    opacity: var(--trail-opacity, .35);
    filter: drop-shadow(0 0 calc(var(--circuit-electron-size) * 1.2px) color-mix(in srgb, var(--circuit-electron) 70%, transparent));
}
.electron-runner.ends-in-hole .electron-core,
.electron-runner.ends-in-hole .electron-trail-dot {
    animation: electronIntoHoleFade 1s linear infinite;
}
@keyframes electronIntoHoleFade {
    0%, 78% { opacity: var(--trail-opacity, .98); }
    100% { opacity: 0; }
}


/* V43: Elektron-Kopf vorne, weicher Verlauf-Schweif direkt auf der Leiterbahn */
.scene-layer.theme-it .electron-trail-dot {
    fill: var(--circuit-electron) !important;
    stroke: none !important;
    opacity: var(--trail-opacity, .25);
    filter: blur(.35px) drop-shadow(0 0 calc(var(--circuit-electron-size) * 1.9px) color-mix(in srgb, var(--circuit-electron) 82%, transparent));
}
.scene-layer.theme-it .electron-core {
    fill: var(--circuit-electron) !important;
    stroke: color-mix(in srgb, var(--circuit-electron) 70%, white) !important;
    stroke-width: calc(max(.7, var(--circuit-electron-size) * .18) * 1px);
    opacity: 1 !important;
    filter: drop-shadow(0 0 calc(var(--circuit-electron-size) * 2.4px) var(--circuit-electron));
}
.scene-layer.theme-it .electron-runner {
    mix-blend-mode: screen;
}

/* V44: Elektronen-Schweif als weicher Lichtstrahl statt Punktkette */
.scene-layer.theme-it .electron-tail-beam {
    fill: none !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--beam-width, calc(var(--circuit-electron-size) * 1px));
    opacity: var(--beam-opacity, .35);
    vector-effect: non-scaling-stroke;
    filter: blur(.55px) drop-shadow(0 0 calc(var(--circuit-electron-size) * 2px) var(--circuit-electron));
}
.scene-layer.theme-it .electron-trail-dot {
    display: none !important;
}

/* V45: Stromfluss ist ein Aufleuchten der Leiterbahn selbst, kein separater Schweif */
.scene-layer.theme-it .electron-trace-glow {
    fill: none !important;
    stroke: color-mix(in srgb, var(--circuit-trace) 56%, white) !important;
    stroke-width: var(--glow-width, calc(var(--circuit-trace-width) * 2.2px)) !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: var(--glow-opacity, .55);
    vector-effect: non-scaling-stroke;
    filter: blur(.45px) drop-shadow(0 0 calc(var(--circuit-trace-width) * 4px) color-mix(in srgb, var(--circuit-trace) 70%, white));
    pointer-events: none;
}
.scene-layer.theme-it .electron-tail,
.scene-layer.theme-it .electron-tail-beam,
.scene-layer.theme-it .electron-trail-dot {
    display: none !important;
}
.scene-layer.theme-it .circuit-paths path {
    mix-blend-mode: normal !important;
}
.scene-layer.theme-it .electron-runner {
    mix-blend-mode: screen;
}

/* V46: fluessige JS-Animation, Kopf immer vorne, Leiterbahn leuchtet direkt dahinter aus */
.scene-layer.theme-it .electron-trace-glow-js {
    fill: none !important;
    stroke: color-mix(in srgb, var(--circuit-trace) 54%, white) !important;
    stroke-width: var(--glow-width, calc(var(--circuit-trace-width) * 2.4px)) !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: var(--glow-opacity, .55);
    vector-effect: non-scaling-stroke;
    filter: blur(.32px) drop-shadow(0 0 calc(var(--circuit-trace-width) * 4px) color-mix(in srgb, var(--circuit-trace) 72%, white));
    pointer-events: none;
}
.scene-layer.theme-it .electron-core-js {
    fill: var(--circuit-electron) !important;
    stroke: color-mix(in srgb, var(--circuit-electron) 55%, white) !important;
    stroke-width: calc(max(.7, var(--circuit-electron-size) * .18) * 1px);
    filter: drop-shadow(0 0 calc(var(--circuit-electron-size) * 1.8px) var(--circuit-electron));
}
.scene-layer.theme-it .electron-runner-js { mix-blend-mode: screen; }