/* ZOLLER Messe-App – dunkles Stand-Layout für iPad (quer + hoch) und große Touch-Bildschirme */
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "T-Star"; src: url("../fonts/T-Star-Heavy.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --bg: #0b0c0d; --bg2: #121416; --card: #1a1c1f; --card2: #23262a; --line: rgba(255, 255, 255, .1); --line2: rgba(255, 255, 255, .18);
  --text: #f4f5f6; --muted: #a3a8ad; --dim: #6c7176;
  --yellow: #f0e600; --yellow-d: #d8cf00; --green: #3ccf7a; --red: #ff6b5e;
  --font: "T-Star", "Helvetica Neue", Arial, sans-serif;
  --r: 22px; --r-sm: 14px; --gap: clamp(14px, 1.6vw, 26px);
  --pad: clamp(16px, 2.4vw, 40px);
  --bar-h: clamp(64px, 7.4vh, 84px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --fs-xl: clamp(2.4rem, 1.2rem + 3.6vw, 5rem);
  --fs-l: clamp(1.8rem, 1.1rem + 2vw, 3.2rem);
  --fs-m: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  --fs-b: clamp(1.02rem, .92rem + .3vw, 1.28rem);
  --fs-s: clamp(.86rem, .8rem + .2vw, 1rem);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-font-smoothing: antialiased; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
img, video, canvas { display: block; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--fs-l); font-weight: 700; line-height: 1.04; letter-spacing: -.02em; }
h2 { font-size: var(--fs-m); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.muted { color: var(--muted); }
.kicker { font-size: var(--fs-s); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Knöpfe */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 58px; padding: 0 1.4em; border-radius: 999px;
  background: var(--card2); color: var(--text); font-weight: 500; font-size: var(--fs-b); border: 1px solid var(--line2); transition: transform .15s var(--ease), background .2s;
  text-align: center; line-height: 1.15; padding-block: .5em; position: relative; overflow: hidden; isolation: isolate; }
.btn:active { transform: scale(.96); }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
.btn--yellow { background: var(--yellow); color: #000; border-color: var(--yellow); font-weight: 700; }
.btn--ghost { background: transparent; }
.btn--sm { min-height: 46px; padding: 0 1.1em; font-size: var(--fs-s); }
.btn--on { background: var(--text); color: #000; border-color: var(--text); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Start */
.boot { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 28px; background: var(--bg); z-index: 100; transition: opacity .6s; }
.boot img { width: min(46vw, 360px); }
.boot__bar { width: 200px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 40%; background: var(--yellow); animation: boot 1.2s ease-in-out infinite; }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.boot.is-out { opacity: 0; pointer-events: none; }

/* ------------------------------------------------------------------ Dauerschleife */
.attract { position: fixed; inset: 0; z-index: 40; background: #000; overflow: hidden; }
.attract__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease; }
.attract__media video.is-on { opacity: 1; }
.attract__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 58%, rgba(0,0,0,.78) 100%); pointer-events: none; }
.attract__top { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) + var(--safe-t)); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.attract__logo { width: clamp(150px, 16vw, 260px); }
.attract__event { text-align: right; font-size: var(--fs-b); font-weight: 500; line-height: 1.3; }
.attract__event b { display: block; color: var(--yellow); font-size: var(--fs-m); font-weight: 700; }
.attract__now { position: absolute; left: var(--pad); top: calc(var(--pad) + var(--safe-t) + clamp(60px, 8vw, 96px)); font-size: var(--fs-b); color: rgba(255,255,255,.86); transition: opacity .6s; }
.attract__now b { color: #fff; }
.attract__cta { position: absolute; left: 0; right: 0; bottom: calc(var(--pad) + var(--safe-b)); display: grid; justify-items: center; gap: 18px; }
.attract__touch { display: inline-flex; align-items: center; gap: 16px; padding: 18px 34px 18px 22px; border-radius: 999px; background: var(--yellow); color: #000; font-size: var(--fs-m); font-weight: 700; box-shadow: 0 20px 60px -10px rgba(240, 230, 0, .45); animation: pulse 2.6s ease-in-out infinite; }
.attract__touch i { width: 22px; height: 22px; border-radius: 50%; background: #000; position: relative; }
.attract__touch i::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid #000; animation: ring 2.6s ease-out infinite; }
.attract__touch b { min-width: 12ch; text-align: left; transition: opacity .35s; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes ring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.attract__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: min(92vw, 1100px); }
.attract__langs button { min-height: 46px; padding: 0 18px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.22); font-size: var(--fs-s); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.attract__live { position: absolute; right: var(--pad); bottom: calc(var(--pad) + var(--safe-b) + 150px); max-width: 32vw; display: grid; gap: 6px; justify-items: end; }
.attract__live span { padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.5); font-size: var(--fs-s); border: 1px solid rgba(255,255,255,.18); }
.attract__live span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 10px var(--green); }

/* Untertitel */
.caption { position: absolute; left: 50%; transform: translateX(-50%); max-width: min(86vw, 1200px); text-align: center; font-weight: 500; line-height: 1.3; text-wrap: balance;
  padding: .35em .8em; border-radius: 10px; background: rgba(0, 0, 0, .62); color: #fff; opacity: 0; transition: opacity .25s; pointer-events: none; }
.caption.is-on { opacity: 1; }
.caption--attract { bottom: calc(var(--pad) + var(--safe-b) + clamp(150px, 19vh, 200px)); font-size: clamp(1.25rem, .9rem + 1.3vw, 2.2rem); }
.caption--player { bottom: clamp(96px, 13vh, 140px); font-size: clamp(1.2rem, .9rem + 1.2vw, 2rem); z-index: 2; }

/* ------------------------------------------------------------------ Kopfzeile */
.app { position: fixed; inset: 0; display: grid; grid-template-rows: calc(var(--bar-h) + var(--safe-t)) 1fr; }
.bar { display: flex; align-items: center; gap: 12px; padding: var(--safe-t) var(--pad) 0; border-bottom: 1px solid var(--line); background: rgba(11,12,13,.92); position: relative; z-index: 5; }
.bar__logo img { height: clamp(26px, 3.2vh, 34px); width: auto; }
.bar__logo { padding: 10px 6px 10px 0; }
.bar__back { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 18px 0 10px; border-radius: 999px; background: var(--card2); font-weight: 500; font-size: var(--fs-b); margin-left: 8px; }
.bar__back svg { width: 24px; height: 24px; }
.bar__title { flex: 1; min-width: 0; font-weight: 500; font-size: var(--fs-b); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 6px; }
.bar__tools { display: flex; gap: 10px; }
.bar__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: 999px; background: var(--card2); font-weight: 500; font-size: var(--fs-s); border: 1px solid var(--line); }
.bar__btn svg { width: 22px; height: 22px; }
.bar__saved b { min-width: 26px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--card); color: var(--muted); font-size: .9em; }
.bar__saved.has b { background: var(--yellow); color: #000; }
.bar__saved.bump b { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }

/* Ansichten */
.views { position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; overscroll-behavior: contain; }
.view.is-on { opacity: 1; visibility: visible; }
.wrap { padding: var(--pad); padding-bottom: calc(var(--pad) + var(--safe-b)); }

/* ------------------------------------------------------------------ Startseite */
.home { min-height: 100%; display: grid; grid-template-rows: auto auto 1fr; gap: clamp(14px, 2.2vh, 28px); padding: clamp(16px, 2.6vh, 34px) 0 calc(clamp(14px, 2vh, 28px) + var(--safe-b)); }
.home__top { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap); align-items: end; padding: 0 var(--pad); }
.home__intro h1 { font-size: clamp(2.2rem, .9rem + 3.4vw, 4.6rem); margin: 8px 0 12px; }
.home__intro p.lead { font-size: clamp(1.05rem, .9rem + .5vw, 1.45rem); color: var(--muted); font-weight: 400; line-height: 1.35; max-width: 34ch; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left; min-height: clamp(70px, 9.4vh, 100px); padding: 12px 14px 12px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .15s var(--ease), border-color .3s; }
.action__txt { min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.action__go { width: 20px; display: grid; place-items: center; opacity: .55; transition: transform .3s var(--ease); }
.action__go svg { width: 20px; height: 20px; }
.action:active .action__go { transform: translateX(4px); }
.action--yellow .action__go { opacity: .8; }
.action:active { transform: scale(.97); }
.action__ic { width: clamp(46px, 5vw, 58px); height: clamp(46px, 5vw, 58px); border-radius: 16px; display: grid; place-items: center; background: var(--card2); color: var(--yellow); }
.action__ic svg { width: 58%; height: 58%; }
.action b { display: block; font-size: var(--fs-b); font-weight: 700; line-height: 1.15; }
.action small { display: block; color: var(--muted); font-size: var(--fs-s); margin-top: 3px; line-height: 1.25; }
.action--yellow { background: var(--yellow); color: #000; border-color: var(--yellow); }
.action--yellow .action__ic { background: #000; color: var(--yellow); }
.action--yellow small { color: rgba(0,0,0,.66); }

.steps { position: relative; display: flex; gap: 8px; padding: 0 var(--pad); overflow-x: auto; scrollbar-width: none; }
.steps__pill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--card2); border: 1px solid var(--line2); z-index: 0; pointer-events: none;
  transition: transform .55s var(--ease), width .55s var(--ease); }
.steps__pill::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--yellow); }
.steps__pill:not(.is-ready) { transition: none; }
.steps::-webkit-scrollbar { display: none; }
.steps button { position: relative; z-index: 1; overflow: hidden; flex: 1 0 auto; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; font-size: var(--fs-s); font-weight: 500; color: var(--muted); transition: background .25s, color .25s; }
.steps button em { font-style: normal; font-weight: 700; color: var(--yellow); }
.steps button.is-on { color: var(--text); border-color: transparent; }

.rail { display: flex; gap: var(--gap); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 6px var(--pad) 14px; scroll-padding: 0 var(--pad); scrollbar-width: none; align-items: stretch; }
.rail::-webkit-scrollbar { display: none; }
.dcard { position: relative; flex: 0 0 clamp(230px, 22vw, 330px); min-height: clamp(270px, 40vh, 640px); scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 50% 34%, #30353b 0%, #17191c 72%); border: 1px solid var(--line); text-align: left; transition: transform .2s var(--ease);
  scale: calc(1 - var(--rk, 0) * .07); }
.dcard > * { opacity: calc(1 - var(--rk, 0) * .6); }
.dcard::after { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.dcard:active::after { transform: scaleX(1); }
.dcard:active { transform: scale(.97); }
.dcard__step { position: absolute; left: 16px; top: 14px; font-size: var(--fs-s); color: var(--muted); font-weight: 500; z-index: 1; }
.dcard__step em { font-style: normal; color: var(--yellow); font-weight: 700; margin-right: 4px; }
.dcard__img { position: relative; display: block; flex: 1 1 auto; min-height: 130px; }
.dcard__img img { position: absolute; left: 16px; top: 46px; width: calc(100% - 32px); height: calc(100% - 50px); object-fit: contain; object-position: 50% 100%; transform: translate3d(var(--px, 0), 0, 0); filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 72%, transparent 100%); mask-composite: intersect; }
.dcard__img img.photo { border-radius: 14px; object-fit: cover; -webkit-mask-image: none; mask-image: none; transform: none; }
.dcard__txt { display: block; padding: 14px 18px 4px; }
.dcard__txt b { display: block; font-size: var(--fs-m); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.dcard__txt span { display: block; color: var(--muted); font-size: var(--fs-s); line-height: 1.3; margin-top: 6px; }
.dcard__tags { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 18px 16px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px; font-size: .82rem; font-weight: 500; background: rgba(255,255,255,.08); color: var(--text); }
.tag svg { width: 14px; height: 14px; }
.tag--live { background: rgba(60, 207, 122, .16); color: #8ff0b6; }
.tag--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.tag--saved { background: var(--yellow); color: #000; }

/* ------------------------------------------------------------------ Gerät */
.dev { height: 100%; display: grid; grid-template-columns: 1.25fr 1fr; }
.dev__stage { position: relative; background: radial-gradient(90% 75% at 50% 42%, #343a40 0%, #1a1d20 55%, #0d0e10 100%); overflow: hidden; }
.dev__stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; touch-action: none; opacity: 0; transition: opacity .7s ease .15s; }
.dev__stage.is-ready canvas { opacity: 1; }
.dev__photo { position: absolute; inset: 0; display: grid; place-items: center; padding: 8% 10% 16%; }
.dev__photo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.dev__photo img.photo { object-fit: cover; border-radius: var(--r); width: 100%; height: 100%; }
.dev__modes { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid var(--line); z-index: 2; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dev__modes button { min-height: 46px; padding: 0 18px; border-radius: 999px; font-weight: 500; font-size: var(--fs-s); color: var(--muted); display: inline-flex; align-items: center; gap: 8px; }
.dev__modes button svg { width: 18px; height: 18px; }
.dev__modes button.is-on { background: var(--text); color: #000; }
.dev__variants { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid var(--line); z-index: 2; }
.dev__variants button { min-height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.dev__variants button.is-on { background: var(--yellow); color: #000; }
.dev__hint { position: absolute; left: 50%; bottom: 86px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: var(--fs-s); pointer-events: none; transition: opacity .6s; white-space: nowrap; }
.dev__hint svg { width: 26px; height: 26px; }
.dev__hint.is-gone { opacity: 0; }
.dev__loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .4s; }
.dev__loader i { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--yellow); animation: spin .9s linear infinite; }
.dev__loader.is-done { opacity: 0; }
@keyframes spin { to { transform: rotate(360deg); } }
.dev__film { position: absolute; inset: 0; display: grid; place-items: center; }
.dev__film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dev__film::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.dev__film button { position: relative; z-index: 1; width: 108px; height: 108px; border-radius: 50%; background: var(--yellow); color: #000; display: grid; place-items: center; box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); }
.dev__film button svg { width: 44px; height: 44px; fill: currentColor; stroke: none; margin-left: 6px; }
.dev__info { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.dev__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--pad); padding-bottom: calc(var(--pad) + 10px); display: flex; flex-direction: column; gap: 18px; }
.meter { position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 3; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 1px, transparent 1px 10px); }
.meter.is-on { opacity: 1; }
.meter i { display: block; height: 100%; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(0); }
.dev__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.dev__info h1 { font-size: var(--fs-xl); }
.dev__claim { font-size: var(--fs-m); font-weight: 500; color: var(--yellow); line-height: 1.2; }
.dev__role { font-size: var(--fs-b); color: var(--muted); line-height: 1.4; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.spec { position: relative; overflow: hidden; padding: 14px 16px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); }
.spec::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; animation: line 1.1s var(--ease) .45s forwards; }
@keyframes line { to { transform: scaleX(1); } }
.spec b { display: block; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.spec b small { font-size: .5em; font-weight: 500; margin-left: 3px; color: var(--muted); letter-spacing: 0; }
.spec span { display: block; color: var(--muted); font-size: var(--fs-s); margin-top: 6px; line-height: 1.25; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { padding: 14px 16px 14px 44px; position: relative; border-radius: var(--r-sm); background: var(--card); font-size: var(--fs-b); line-height: 1.38; }
.facts li::before { content: ""; position: absolute; left: 18px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); }
.facts li small { display: block; color: var(--dim); font-size: .78em; margin-top: 5px; }
.dev__cta { flex: none; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; padding: 14px var(--pad) calc(14px + var(--safe-b)); background: var(--bg); border-top: 1px solid var(--line); }
.dev__cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 30px; background: linear-gradient(180deg, rgba(11,12,13,0), var(--bg)); pointer-events: none; }
.dev__cta .btn { flex: 1 1 calc(50% - 5px); min-width: 0; padding-inline: 1em; }
.dev__nav { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.dev__nav button { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; color: var(--muted); font-size: var(--fs-s); font-weight: 500; text-align: left; }
.dev__nav button:last-child { text-align: right; }
.dev__nav svg { width: 22px; height: 22px; flex: none; }
.dev__nav b { display: block; color: var(--text); font-size: var(--fs-b); }

/* ------------------------------------------------------------------ Filme */
.films { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(280px, 30vw, 440px), 1fr)); gap: var(--gap); }
.fcard { position: relative; display: block; aspect-ratio: 16 / 10; text-align: left; border-radius: var(--r); overflow: hidden; isolation: isolate; background: #000; border: 1px solid var(--line); transition: transform .2s var(--ease); }
.fcard:active { transform: scale(.97); }
.fcard__img { position: absolute; inset: 0; display: block; overflow: hidden; }
.fcard__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--ease) var(--d, 0ms); }
.fcard.is-in .fcard__img img { transform: scale(1); }
.fcard__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.9) 100%); }
.fcard__play { position: absolute; right: 18px; bottom: 18px; z-index: 2; width: 60px; height: 60px; border-radius: 50%; background: var(--yellow); color: #000; display: grid; place-items: center; box-shadow: 0 10px 30px -6px rgba(240,230,0,.45); }
.fcard__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); opacity: 0; animation: play-ring 2.8s ease-out infinite; }
@keyframes play-ring { from { transform: scale(1); opacity: .8; } 60%, to { transform: scale(1.6); opacity: 0; } }
.fcard__play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-left: 3px; }
.fcard__dur { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: var(--fs-s); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.fcard__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; padding: 20px 96px 20px 22px; }
.fcard__txt b { display: block; font-size: var(--fs-m); line-height: 1.12; text-shadow: 0 2px 16px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.fcard__txt > span:not(.btn) { display: block; color: rgba(255,255,255,.72); font-size: var(--fs-s); margin-top: 6px; line-height: 1.3; }
.fcard--story { grid-column: 1 / -1; aspect-ratio: auto; display: grid; grid-template-columns: 1.55fr 1fr; background: var(--card); }
.fcard--story .fcard__img { position: relative; aspect-ratio: 16 / 9; }
.fcard--story .fcard__img::after { background: linear-gradient(90deg, rgba(26,28,31,0) 62%, var(--card) 100%); }
.fcard--story .fcard__txt { position: static; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: clamp(20px, 3vw, 46px); }
.fcard--story .fcard__txt b { font-size: var(--fs-l); text-shadow: none; }
.fcard--story .fcard__txt > span:not(.btn) { color: var(--muted); font-size: var(--fs-b); margin-top: 8px; }
.fcard--story .fcard__dur { display: none; }
.fcard__watch { align-self: flex-start; margin-top: 18px; pointer-events: none; }
.fcard__seen { position: absolute; top: 14px; left: 14px; z-index: 2; }
.fcard--story .fcard__seen { left: auto; right: 14px; }
.head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(18px, 3vh, 32px); flex-wrap: wrap; }
.head p { color: var(--muted); font-size: var(--fs-b); margin-top: 10px; max-width: 60ch; line-height: 1.35; }

/* Filmspieler */
.player { position: fixed; inset: 0; z-index: 60; background: #000; }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.player__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; transition: opacity .4s; z-index: 3; pointer-events: none; }
.player__ui > * { pointer-events: auto; }
.player__ui.is-hidden { opacity: 0; }
.player__ui.is-hidden * { pointer-events: none; }
.player__top, .player__bottom { display: flex; align-items: center; gap: 14px; padding: calc(var(--pad) * .7 + var(--safe-t)) var(--pad) calc(var(--pad) * .7); }
.player__top { background: linear-gradient(180deg, rgba(0,0,0,.7), transparent); }
.player__bottom { background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); padding-bottom: calc(var(--pad) * .7 + var(--safe-b)); }
.player__title { flex: 1; font-size: var(--fs-m); font-weight: 700; }
.player__title small { display: block; font-size: .62em; font-weight: 400; color: var(--muted); margin-top: 4px; }
.pbtn { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); flex: none; }
.pbtn svg { width: 26px; height: 26px; }
.pbtn.is-on { background: var(--text); color: #000; }
.pbtn--play { background: var(--yellow); color: #000; border-color: var(--yellow); width: 68px; height: 68px; }
.pbtn--play svg { fill: currentColor; stroke: none; }
.player .i-pause { display: none; }
.player.is-playing .i-pause { display: block; }
.player.is-playing .i-play { display: none; }
.player__time { font-variant-numeric: tabular-nums; font-size: var(--fs-s); min-width: 3.2em; text-align: center; }
.player__track { position: relative; flex: 1; height: 44px; display: flex; align-items: center; touch-action: none; }
.player__track::before { content: ""; position: absolute; left: 0; right: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.22); }
.player__track i { position: absolute; left: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); }
.player__track b { position: absolute; left: 0; height: 6px; border-radius: 3px; background: var(--yellow); }
.player__track b::after { content: ""; position: absolute; right: -11px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); }
.player__end { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; align-content: center; gap: 22px; background: rgba(0,0,0,.72); text-align: center; padding: var(--pad); }
.player__end h2 { font-size: var(--fs-l); }
.player__end .row { justify-content: center; }

/* ------------------------------------------------------------------ Rechner */
.calc { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gap); align-items: start; }
.calc__in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: start; }
.field { padding: 16px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: grid; gap: 12px; }
.field > span { font-size: var(--fs-b); font-weight: 500; }
.field > span small { display: block; color: var(--muted); font-weight: 400; font-size: var(--fs-s); margin-top: 3px; }
.stepper { display: grid; grid-template-columns: 58px 1fr 58px; align-items: center; gap: 8px; }
.stepper button { height: 58px; border-radius: 18px; background: var(--card2); border: 1px solid var(--line2); display: grid; place-items: center; }
.stepper button svg { width: 28px; height: 28px; }
.stepper button:active { background: var(--text); color: #000; }
.stepper output { text-align: center; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stepper output small { font-size: .45em; color: var(--muted); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 5px; border-radius: 18px; background: var(--bg2); border: 1px solid var(--line); }
.seg button { min-height: 56px; border-radius: 14px; font-weight: 700; font-size: var(--fs-b); color: var(--muted); }
.seg button.is-on { background: var(--yellow); color: #000; }
.calc__out { position: sticky; top: 0; border-radius: var(--r); padding: clamp(20px, 2.6vw, 36px); background: linear-gradient(160deg, #23262a, #15171a); border: 1px solid var(--line2); display: grid; gap: 18px; }
.big { font-size: clamp(2.6rem, 1.4rem + 4vw, 5.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; color: var(--yellow); font-variant-numeric: tabular-nums; }
.big small { display: block; font-size: .3em; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-bottom: 8px; }
.calc__rows { display: grid; gap: 10px; }
.calc__row { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 14px 16px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); }
.calc__row b { font-size: var(--fs-m); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__row span { color: var(--muted); font-size: var(--fs-s); line-height: 1.3; }
.src { color: var(--dim); font-size: .82rem; line-height: 1.4; }
.calc__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ------------------------------------------------------------------ Planer */
.view--planer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #eef0f2; }

/* ------------------------------------------------------------------ Kontakt */
.contact { display: grid; grid-template-columns: minmax(300px, .8fr) 1.2fr; gap: var(--gap); align-items: start; }
.card { border-radius: var(--r); background: var(--card); border: 1px solid var(--line); padding: clamp(18px, 2.2vw, 30px); display: grid; gap: 16px; }
.card--qr { background: var(--text); color: #000; text-align: center; justify-items: center; }
.card--qr p { color: #3b3f43; font-size: var(--fs-b); line-height: 1.35; }
.card--qr small { color: #6b7075; }
.qr { width: min(100%, 340px); aspect-ratio: 1; }
.qr svg { width: 100%; height: 100%; }
.saved { display: flex; flex-wrap: wrap; gap: 8px; }
.saved button { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px 0 16px; border-radius: 999px; background: var(--card2); border: 1px solid var(--line2); font-weight: 500; }
.saved button svg { width: 20px; height: 20px; color: var(--muted); }
.saved__empty { color: var(--muted); font-size: var(--fs-b); line-height: 1.4; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .full { grid-column: 1 / -1; }
.inp { display: grid; gap: 6px; }
.inp span { font-size: var(--fs-s); color: var(--muted); font-weight: 500; }
.inp input, .inp select, .inp textarea { width: 100%; min-height: 58px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: inherit; font-size: 1.08rem; -webkit-appearance: none; appearance: none; }
.inp textarea { padding: 14px 16px; min-height: 100px; resize: none; }
.inp input:focus, .inp select:focus, .inp textarea:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(240, 230, 0, .2); }
.inp.is-bad input { border-color: var(--red); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--bg2); font-size: var(--fs-s); font-weight: 500; }
.chips button.is-on { background: var(--yellow); border-color: var(--yellow); color: #000; }
.consent { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line2); text-align: left; font-size: var(--fs-s); line-height: 1.45; color: var(--muted); }
.consent i { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line2); display: grid; place-items: center; }
.consent i svg { width: 22px; height: 22px; opacity: 0; color: #000; stroke-width: 3; }
.consent.is-on i { background: var(--yellow); border-color: var(--yellow); }
.consent.is-on i svg { opacity: 1; }
.consent.is-bad { border-color: var(--red); }
.attach { display: grid; gap: 8px; }
.attach div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card2); font-size: var(--fs-s); }
.attach svg { width: 22px; height: 22px; color: var(--yellow); flex: none; }

/* Danke */
.thanks { min-height: 100%; display: grid; place-items: center; align-content: center; text-align: center; gap: 22px; padding: var(--pad); }
.thanks__ok { position: relative; width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); color: #000; display: grid; place-items: center; animation: pop .8s var(--ease) both; }
.thanks__ok svg { width: 60px; height: 60px; stroke-width: 3; }
.thanks__ok path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .55s .4s var(--ease) forwards; }
.thanks__ok i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--yellow); animation: burst 1.8s .35s ease-out both; }
.thanks__ok i + i { animation-delay: .75s; }
@keyframes pop { from { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes burst { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.thanks h1 { font-size: var(--fs-xl); }
.thanks p { font-size: var(--fs-m); color: var(--muted); max-width: 34ch; line-height: 1.35; }

/* ------------------------------------------------------------------ Dialoge */
.sheet { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: var(--pad); animation: fade .25s; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet__panel { width: min(100%, 760px); max-height: calc(100% - 20px); overflow-y: auto; border-radius: 28px; background: var(--bg2); border: 1px solid var(--line2); padding: clamp(22px, 3vw, 40px); display: grid; gap: 20px; animation: rise .35s var(--ease); }
.sheet__panel--wide { width: min(100%, 1040px); }
.sheet__head { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.sheet__x { width: 56px; height: 56px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; flex: none; }
.sheet__x svg { width: 26px; height: 26px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.langs button { min-height: 64px; padding: 0 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-align: left; font-size: var(--fs-b); font-weight: 500; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.langs button small { color: var(--dim); font-size: .75em; text-transform: uppercase; letter-spacing: .08em; }
.langs button.is-on { background: var(--yellow); color: #000; border-color: var(--yellow); }
.langs button.is-on small { color: rgba(0,0,0,.55); }
.qrsheet { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.qrsheet .qr { width: clamp(220px, 30vw, 340px); background: #fff; border-radius: 18px; padding: 10px; }
.qrsheet p { color: var(--muted); font-size: var(--fs-b); line-height: 1.4; }
.qrsheet code { display: block; margin-top: 14px; color: var(--dim); font-size: .78rem; word-break: break-all; font-family: inherit; }

.idle { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fade .3s; }
.idle__panel { position: relative; display: grid; justify-items: center; gap: 16px; text-align: center; padding: 40px; max-width: 560px; }
.idle__ring { width: 140px; height: 140px; transform: rotate(-90deg); }
.idle__ring circle { stroke: var(--line2); stroke-width: 6; fill: none; }
.idle__ring circle + circle { stroke: var(--yellow); stroke-dasharray: 326.7; transition: stroke-dashoffset 1s linear; }
.idle__n { position: absolute; top: 40px; width: 140px; height: 140px; display: grid; place-items: center; font-size: 3rem; font-weight: 700; }
.idle h2 { font-size: var(--fs-l); }
.idle p { color: var(--muted); font-size: var(--fs-b); }
.idle .row { justify-content: center; margin-top: 8px; }

.toast { position: fixed; left: 50%; bottom: calc(28px + var(--safe-b)); transform: translateX(-50%); z-index: 95; padding: 16px 26px; border-radius: 999px; background: var(--text); color: #000; font-weight: 500; font-size: var(--fs-b); box-shadow: 0 20px 50px -10px rgba(0,0,0,.6); animation: rise .3s var(--ease); max-width: 90vw; text-align: center; }

/* ------------------------------------------------------------------ Personalbereich (hell, damit klar ist: nicht für Besucher) */
.staff { position: fixed; inset: 0; z-index: 80; background: #f3f4f5; color: #0b0c0d; display: grid; grid-template-rows: auto 1fr; color-scheme: light; }
.staff .btn { background: #fff; color: #0b0c0d; border-color: #d5d8db; }
.staff .btn--yellow { background: var(--yellow); border-color: var(--yellow); }
.staff .btn--dark { background: #0b0c0d; color: #fff; border-color: #0b0c0d; }
.staff__bar { display: flex; align-items: center; gap: 14px; padding: calc(14px + var(--safe-t)) var(--pad) 14px; background: #fff; border-bottom: 1px solid #e3e5e7; flex-wrap: wrap; }
.staff__bar img { height: 30px; }
.staff__bar h2 { font-size: var(--fs-b); flex: 1; }
.staff__tabs { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #eceef0; }
.staff__tabs button { min-height: 46px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: var(--fs-s); color: #4a4e52; }
.staff__tabs button.is-on { background: #0b0c0d; color: #fff; }
.staff__body { overflow-y: auto; padding: var(--pad); padding-bottom: calc(var(--pad) + var(--safe-b)); }
.staff__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.scard { background: #fff; border-radius: 20px; border: 1px solid #e3e5e7; padding: 22px; display: grid; gap: 14px; }
.scard h3 { margin: 0; font-size: var(--fs-b); }
.scard p, .scard li { color: #4a4e52; font-size: var(--fs-s); line-height: 1.5; }
.scard ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: #fff; border-radius: 18px; border: 1px solid #e3e5e7; padding: 18px; }
.kpi b { display: block; font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.kpi span { color: #666b70; font-size: var(--fs-s); }
.bars { display: grid; gap: 8px; }
.bars div { display: grid; grid-template-columns: minmax(110px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-s); }
.bars i { height: 12px; border-radius: 6px; background: #0b0c0d; min-width: 2px; }
.bars em { font-style: normal; font-variant-numeric: tabular-nums; color: #4a4e52; }
.staff .inp input, .staff .inp select, .staff .inp textarea { background: #fff; color: #0b0c0d; border-color: #d5d8db; min-height: 52px; }
.staff .inp span { color: #4a4e52; }
.staff .chips button { background: #fff; border-color: #d5d8db; }
.staff .chips button.is-on { background: #0b0c0d; color: #fff; border-color: #0b0c0d; }
.staff .seg { background: #eceef0; border-color: #e3e5e7; }
.staff .seg button { color: #4a4e52; }
.staff .seg button.is-on { background: #0b0c0d; color: #fff; }
.sleads { display: grid; gap: 10px; }
.slead { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; background: #fff; border-radius: 16px; border: 1px solid #e3e5e7; padding: 16px 18px; text-align: left; }
.slead b { font-size: var(--fs-b); }
.slead span { color: #666b70; font-size: var(--fs-s); }
.slead em { font-style: normal; font-size: var(--fs-s); padding: 4px 10px; border-radius: 999px; background: #eceef0; align-self: start; }
.slead em.hot { background: #ffe3df; color: #a1271b; } .slead em.warm { background: #fff6c2; color: #6b6300; } .slead em.cold { background: #e3eef8; color: #1c5180; }
.slead em.sync { background: #dff5e8; color: #157a40; }
.progress { height: 14px; border-radius: 7px; background: #e3e5e7; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: #0b0c0d; transition: width .3s; }
.ok { color: #157a40; font-weight: 500; } .warn { color: #a1271b; font-weight: 500; }
.files { display: grid; gap: 4px; font-size: .86rem; color: #4a4e52; max-height: 240px; overflow-y: auto; }
.files div { display: flex; justify-content: space-between; gap: 10px; }

/* PIN */
.pin { position: fixed; inset: 0; z-index: 85; background: rgba(11,12,13,.94); display: grid; place-items: center; animation: fade .2s; }
.pin__panel { display: grid; justify-items: center; gap: 22px; padding: 30px; }
.pin__panel h2 { text-align: center; }
.pin__dots { display: flex; gap: 16px; height: 22px; }
.pin__dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); }
.pin__dots i.is-on { background: var(--yellow); border-color: var(--yellow); }
.pin__dots.is-bad { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.pin__pad { display: grid; grid-template-columns: repeat(3, 84px); gap: 14px; }
.pin__pad button { height: 84px; border-radius: 50%; background: var(--card2); font-size: 1.9rem; font-weight: 500; }
.pin__pad button:active { background: var(--text); color: #000; }
.pin__pad button.ghost { background: none; font-size: var(--fs-s); color: var(--muted); }

/* ------------------------------------------------------------------ Bewegung (motion.js) */
/* Seitenwechsel: vor = von rechts, zurück = von links; die alte Seite tritt leicht zurück */
.view.v-in { z-index: 1; animation: v-in .66s var(--ease) both; }
.view.v-in.v-back { animation-name: v-in-back; }
.view.v-out { z-index: 0; visibility: visible; pointer-events: none; animation: v-out .4s cubic-bezier(.4, 0, .2, 1) both; }
.view.v-out.v-back { animation-name: v-out-back; }
@keyframes v-in { from { opacity: 0; transform: translate3d(6%, 0, 0) scale(.985); } }
@keyframes v-in-back { from { opacity: 0; transform: translate3d(-6%, 0, 0) scale(.985); } }
@keyframes v-out { to { opacity: 0; transform: translate3d(-3%, 0, 0) scale(.965); } }
@keyframes v-out-back { to { opacity: 0; transform: translate3d(3%, 0, 0) scale(.965); } }

/* gestaffeltes Auftauchen beim Seitenaufbau (nur »backwards«, damit :active-Effekte danach wieder greifen) */
[data-rv].rv-go { animation: rv-up .75s var(--ease) backwards; animation-delay: calc(90ms + var(--i, 0) * 55ms); }
@keyframes rv-up { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
/* Auftauchen beim Scrollen */
.rv { transition: opacity .7s var(--ease) var(--d, 0ms), transform .85s var(--ease) var(--d, 0ms); }
.rv:not(.is-in) { opacity: 0; transform: translate3d(0, 34px, 0); }

/* Kopfzeile bekommt beim Scrollen Tiefe */
.bar { transition: box-shadow .35s, background .35s; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.bar.is-scrolled { box-shadow: 0 14px 34px -14px rgba(0,0,0,.85); background: rgba(11,12,13,.82); }
.head { will-change: transform, opacity; }

/* Tipp-Welle */
.bar__btn, .bar__back, .langs button, .chips button, .seg button, .attract__langs button, .dev__modes button, .dev__variants button { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); pointer-events: none; animation: ripple .7s cubic-bezier(.2, .8, .2, 1) forwards; }
.btn--yellow .ripple, .action--yellow .ripple { background: #fff; opacity: .4; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Bild-Flug Karte → Seite */
.flyer { position: fixed; margin: 0; pointer-events: none; will-change: left, top, width, height; }

/* Schleife ↔ Sitzung, Filmspieler */
.attract { animation: fade 1s ease; }
.attract.is-leaving { pointer-events: none; animation: a-out .72s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes a-out { to { opacity: 0; transform: scale(1.07); } }
.player { animation: fade .5s ease .12s both; }

/* ------------------------------------------------------------------ Hochformat + kleinere Breiten */
@media (max-aspect-ratio: 1/1) {
  .home__top { grid-template-columns: 1fr; }
  .home__intro p.lead { max-width: none; }
  .dev { grid-template-columns: 1fr; grid-template-rows: 50% 1fr; }
  .dev__cta .btn { flex: 1 1 150px; }
  .dev__info { border-left: 0; border-top: 1px solid var(--line); }
  .calc, .contact { grid-template-columns: 1fr; }
  .calc__out { position: static; }
  .dcard { flex-basis: clamp(230px, 40vw, 330px); }
  .qrsheet { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .attract__live { display: none; }
}
@media (max-width: 1100px) {
  .action { gap: 12px; padding-inline: 12px; }
  .action__ic { width: 42px; height: 42px; border-radius: 13px; }
  .action__go { display: none; }
  .bar__btn span { display: none; }
  .bar__lang span { display: inline; }
}
@media (max-width: 700px) {
  .actions { grid-template-columns: 1fr; }
  .calc__in { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .calc__cta { grid-template-columns: 1fr; }
  .fcard--story { grid-template-columns: 1fr; }
  .fcard--story .fcard__img::after { background: linear-gradient(180deg, rgba(26,28,31,0) 60%, var(--card) 100%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}