/* Float Website. Sieht aus wie die App: schwarze Bühne, Gold nur dort, wo
   Geld ist, Space Grotesk für Zahlen und Headlines. Abschnitte wechseln
   zwischen dunkel und hell, die Geräte darin zeigen den passenden Modus. */

:root {
  --gold: #e5ba4e;
  --gold-deep: #b98a1c;
  --ink: #0a0a0b;
  --paper: #f4f2ec;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --max: 1180px;
  --radius: 28px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

.dark  { --bg: #0a0a0b; --surface: #151517; --line: #26262a; --text: #f4f4f2; --muted: #a3a3a8; --faint: #6c6c72; --accent: var(--gold); }
.light { --bg: #f4f2ec; --surface: #ffffff; --line: #e2ded4; --text: #0d0d0e; --muted: #5b5a57; --faint: #8f8c85; --accent: var(--gold-deep); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: #f4f4f2; font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
section { background: var(--bg); color: var(--text); position: relative; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(50px, 7.6vw, 108px); line-height: .95; letter-spacing: -.04em; }
h2 { font-size: clamp(38px, 5vw, 70px); line-height: .98; }
.g { color: var(--accent); }
.eyebrow { font-family: var(--display); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.lead { margin-top: 22px; font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 34ch; }
.sub { color: var(--muted); font-size: 18px; max-width: 46ch; margin-top: 18px; }

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); background: rgba(10, 10, 11, .66); border-bottom: 1px solid rgba(255, 255, 255, .07); color: #f4f4f2; }
.nav .wrap { display: flex; align-items: center; gap: 26px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 20px; cursor: pointer; background: none; border: 0; color: inherit; }
.brand img { width: 30px; height: 30px; border-radius: 8px; transition: transform .5s var(--ease); }
.brand:hover img { transform: rotate(-14deg) scale(1.08); }
.brand:active img { transform: rotate(200deg) scale(.9); }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 15px; color: #a3a3a8; }
.nav-links a { position: relative; transition: color .2s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.lang { font-size: 13px; color: #8a8a90; border: 1px solid #2c2c31; border-radius: 99px; padding: 4px 10px; transition: color .2s, border-color .2s; }
.lang:hover { color: #fff; border-color: #6c6c72; }

/* ---------- App-Store-Knopf ---------- */
.store { display: inline-flex; align-items: center; gap: 10px; background: #f4f4f2; color: #000; padding: 11px 20px 11px 16px; border-radius: 14px; font-weight: 600; line-height: 1.1; transition: transform .25s var(--ease), box-shadow .25s; will-change: transform; }
.light .store { background: #0d0d0e; color: #fff; }
.store:hover { box-shadow: 0 10px 30px rgba(229, 186, 78, .28); }
.store svg { width: 22px; height: 26px; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .7; }
.store span { font-size: 18px; }
.store.small { padding: 7px 14px 7px 12px; border-radius: 11px; }
.store.small span { font-size: 14px; }
.store.small svg { width: 16px; height: 19px; }
.cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.note { font-size: 14px; color: var(--faint); }

/* ---------- Gerät ---------- */
/* Echter iPhone-Rahmen (bezel.webp, 1960x4000) über dem Bildschirm. Die
   Maße des Bildschirms sind die Aussparung im Rahmen. */
.device { position: relative; aspect-ratio: 1960 / 4000; width: 100%; filter: drop-shadow(0 50px 50px rgba(0, 0, 0, .45)); }
.light .device { filter: drop-shadow(0 40px 40px rgba(60, 50, 30, .22)); }
.device .screen { position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%; border-radius: 14.09% / 6.49%; overflow: hidden; background: #000; }
.device .screen > img, .device .screen > video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.device::after { content: ""; position: absolute; inset: 0; background: url(assets/bezel.webp) center / 100% 100% no-repeat; pointer-events: none; }
.device .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 32%); }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: auto -20% -30% -20%; height: 90%; background: radial-gradient(55% 55% at 62% 40%, rgba(229, 186, 78, .17), transparent 70%); pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
.hero .stage { position: relative; justify-self: center; width: min(360px, 82%); perspective: 1400px; }
.hero .device { transform: rotateY(-10deg) rotateX(4deg); transition: transform .6s var(--ease); transform-style: preserve-3d; }
.coin { position: absolute; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); animation: bob 6s ease-in-out infinite; z-index: 2; }
.coin.c1 { width: 104px; left: -64px; top: 30%; }
.coin.c2 { width: 70px; right: -40px; top: 12%; animation-delay: -2s; }
.coin.c3 { width: 54px; right: -18px; bottom: 10%; animation-delay: -4s; }
@keyframes bob { 50% { translate: 0 -14px; rotate: 6deg; } }

/* ---------- Fächer aus drei Geräten ---------- */
.fan-sec { padding: 120px 0 70px; overflow: hidden; border-radius: 40px 40px 0 0; }
.fan-head { text-align: center; }
.fan-head .sub { margin-inline: auto; }
.fan { position: relative; height: clamp(440px, 54vw, 680px); margin-top: 60px; perspective: 1800px; }
.fan .device { position: absolute; top: 0; left: 50%; width: clamp(190px, 22vw, 300px); transition: transform 1s var(--ease); }
.fan .d1 { transform: translateX(-150%) translateY(60px) rotateY(28deg) rotateZ(-4deg); }
.fan .d2 { transform: translateX(-50%) translateZ(80px); z-index: 2; }
.fan .d3 { transform: translateX(50%) translateY(60px) rotateY(-28deg) rotateZ(4deg); }
.fan.in .d1 { transform: translateX(-138%) translateY(40px) rotateY(22deg) rotateZ(-3deg); }
.fan.in .d3 { transform: translateX(38%) translateY(40px) rotateY(-22deg) rotateZ(3deg); }

/* ---------- Funktionen ---------- */
.features { padding: 40px 0 110px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 70px 0; border-top: 1px solid var(--line); }
.feature:nth-child(even) .shot { order: -1; }
.feature .shot { justify-self: center; width: min(300px, 74%); perspective: 1400px; }
.feature .shot .device { transition: transform .8s var(--ease); }
.feature:nth-child(odd) .shot .device { transform: rotateY(-14deg) rotateX(3deg); }
.feature:nth-child(even) .shot .device { transform: rotateY(14deg) rotateX(3deg); }
.feature .shot:hover .device { transform: rotateY(0) rotateX(0) translateY(-6px); }
.feature p { margin-top: 18px; color: var(--muted); max-width: 40ch; font-size: 18px; }
.tag { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--accent); border: 1px solid currentColor; border-radius: 99px; padding: 3px 11px; }

/* ---------- Alle Screens als Band ---------- */
.marquee-sec { padding: 90px 0 110px; overflow: hidden; }
.marquee-sec h2 { text-align: center; }
.marquee { margin-top: 56px; display: flex; gap: 28px; width: max-content; animation: slide 60s linear infinite; }
.marquee:hover { animation-play-state: paused; }
.marquee .device { width: 220px; flex: none; transition: transform .4s var(--ease); }
.marquee .device:hover { transform: translateY(-14px) scale(1.03); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Zukunft zum Ausprobieren ---------- */
.try-sec { padding: 120px 0; overflow: hidden; }
.try-sec .wrap { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.try-sec .stage { justify-self: center; width: min(380px, 100%); }
.try .screen { background: #0b0b0c; color: #f4f4f2; overflow-y: auto; scrollbar-width: none; }
.try .screen::-webkit-scrollbar { display: none; }
.app { padding: 15% 6% 10%; font-family: var(--body); }
.app .k { text-align: center; color: #a3a3a8; font-size: 12px; }
.app .date { text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.1; margin-top: 2px; }
.app .in { text-align: center; color: #a3a3a8; font-size: 12px; margin-top: 4px; }
.app svg { width: 100%; height: auto; margin: 14px 0 6px; overflow: visible; }
.card { background: #1a1a1c; border-radius: 18px; padding: 14px; margin-top: 10px; }
.row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: #cfcfd2; }
.row b { font-family: var(--display); color: var(--gold); font-size: 16px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin-top: 6px; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 30%), #3a3a3e var(--p, 30%)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gold) var(--p, 30%), #3a3a3e var(--p, 30%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 22px; border-radius: 11px; background: #fff; margin-top: -8px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
input[type=range]::-moz-range-thumb { width: 30px; height: 22px; border-radius: 11px; background: #fff; border: 0; }
.events-h { font-size: 13px; color: #f4f4f2; font-weight: 600; margin-bottom: 8px; }
.ev { display: flex; flex-wrap: wrap; gap: 6px; }
.ev button { font: inherit; font-size: 12px; color: #d6d6d8; background: #26262a; border: 1px solid transparent; border-radius: 99px; padding: 5px 10px; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.ev button:hover { transform: translateY(-1px); }
.ev button[aria-pressed=true] { background: rgba(229, 186, 78, .16); border-color: var(--gold); color: #fff; }
.ev button em { font-style: normal; color: #a3a3a8; margin-left: 4px; }
.try-copy ul { list-style: none; margin-top: 26px; display: grid; gap: 12px; color: var(--muted); }
.try-copy li::before { content: "→ "; color: var(--accent); }

/* ---------- Beleg ---------- */
.receipt-sec { padding: 120px 0; }
.receipt-sec .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.printer { position: relative; width: min(380px, 100%); justify-self: center; padding-top: 40px; }
.printer .slot { position: absolute; top: 0; left: -6%; right: -6%; height: 54px; border-radius: 18px; background: linear-gradient(#2b2b2e, #111113); box-shadow: 0 18px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .12); z-index: 2; }
.printer .slot::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 14px; height: 6px; border-radius: 3px; background: #000; }
.printer .slot i { position: absolute; left: 18px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.paper-clip { overflow: hidden; position: relative; z-index: 1; }
.paper { background: #fbfaf6; color: #1a1a1a; font-family: var(--mono); font-size: 13px; padding: 30px 26px 40px; transform: translateY(-101%); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 96% 100%, 92% calc(100% - 10px), 88% 100%, 84% calc(100% - 10px), 80% 100%, 76% calc(100% - 10px), 72% 100%, 68% calc(100% - 10px), 64% 100%, 60% calc(100% - 10px), 56% 100%, 52% calc(100% - 10px), 48% 100%, 44% calc(100% - 10px), 40% 100%, 36% calc(100% - 10px), 32% 100%, 28% calc(100% - 10px), 24% 100%, 20% calc(100% - 10px), 16% 100%, 12% calc(100% - 10px), 8% 100%, 4% calc(100% - 10px), 0 100%); box-shadow: 0 30px 40px rgba(60, 50, 30, .18); }
.printer.printing .paper { animation: print 3.2s cubic-bezier(.33,.0,.2,1) forwards; }
.printer.printing .slot i { animation: blink .25s steps(2) 12; }
@keyframes print { 0% { transform: translateY(-101%); } 8% { transform: translateY(-96%); } 12% { transform: translateY(-95%); } 100% { transform: none; } }
@keyframes blink { 50% { opacity: .2; } }
.paper h4 { font-family: var(--display); font-size: 30px; letter-spacing: .2em; text-align: center; }
.paper .t { text-align: center; letter-spacing: .14em; font-size: 12px; margin-top: 4px; }
.paper hr { border: 0; border-top: 1px dashed #bbb; margin: 14px 0; }
.paper .l { display: flex; justify-content: space-between; gap: 10px; }
.paper .big { font-size: 18px; font-weight: 700; margin-top: 4px; }
.paper .foot { text-align: center; color: #777; font-size: 11px; margin-top: 12px; }

/* ---------- Pro ---------- */
.pro { padding: 120px 0; }
.pro-card { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 44px; background: var(--surface); }
.pro-card > div { padding: 40px; }
.pro-card .paid { background: #0d0d0e; color: #f4f4f2; }
.pro-card h3 { font-size: 30px; }
.pro-card .price { margin-top: 6px; color: var(--muted); font-size: 15px; }
.pro-card .paid .price { color: #a3a3a8; }
.pro-card ul { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.pro-card li { position: relative; padding-left: 28px; }
.pro-card li::before { content: ""; position: absolute; left: 0; top: .5em; width: 13px; height: 7px; border-left: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); }
.pro-card .paid li::before { border-color: var(--gold); }
.trial { margin-top: 28px; display: inline-flex; background: var(--gold); color: #111; font-weight: 600; border-radius: 99px; padding: 8px 16px; font-size: 15px; animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(229, 186, 78, .15); } }

/* ---------- FAQ ---------- */
.faq-sec { padding: 40px 0 120px; }
.faq-sec .wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: start; }
.faq-sec .photo img { aspect-ratio: 3 / 4; }
details { border-top: 1px solid var(--line); padding: 22px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; font-family: var(--display); font-size: 21px; font-weight: 500; display: flex; justify-content: space-between; gap: 20px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font-size: 26px; line-height: 1; transition: transform .3s var(--ease); }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 12px; color: var(--muted); max-width: 60ch; }

/* ---------- Abschluss ---------- */
.final { text-align: center; padding: 130px 0; overflow: hidden; }
.final::before { content: ""; position: absolute; inset: 15% -10% -40%; background: radial-gradient(50% 50% at 50% 50%, rgba(229, 186, 78, .18), transparent 70%); pointer-events: none; }
.final .icon-big { width: 104px; height: 104px; border-radius: 26px; margin: 0 auto 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); cursor: pointer; transition: transform .4s var(--ease); }
.final .icon-big:hover { transform: rotate(-8deg) scale(1.06); }
.final .cta { justify-content: center; }
footer { background: var(--ink); border-top: 1px solid #222226; padding: 32px 0 48px; color: #77777d; font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }
footer a:hover { color: #fff; }

/* ---------- Effekte ---------- */
.reveal { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease), translate .9s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; }
.coin-drop { position: fixed; top: -80px; z-index: 100; pointer-events: none; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .coin, .marquee, .trial { animation: none; }
  .paper, .printer.printing .paper { animation: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Schmal ---------- */
@media (max-width: 900px) {
  .hero .wrap, .feature, .try-sec .wrap, .receipt-sec .wrap, .widgets .wrap, .pro-card, .faq-sec .wrap { grid-template-columns: 1fr; }
  .feature:nth-child(even) .shot { order: 0; }
  .hero { padding-top: 34px; }
  .hero .stage { width: min(300px, 74%); margin-top: 20px; }
  .photo-row { grid-template-columns: 1fr 1fr; }
  .photo-row .photo:first-child { grid-column: 1 / -1; }
  .photo:nth-child(2) { margin-bottom: 0; }
  .nav-links { display: none; }
  .lang { margin-left: auto; }
  .fan { height: 92vw; }
  .fan .device { width: 40vw; }
  .feature { gap: 30px; padding: 50px 0; }
  .pro-card .paid { border-top: 1px solid var(--line); }
  .faq-sec .photo { display: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .wide { grid-column: span 2; }
  .usps { gap: 10px 18px; }

}
/* Auf dem Handy ist der Zukunft-Tab kein Bild eines Handys, sondern die App
   selbst: ohne Rahmen, volle Breite. */
@media (max-width: 700px) {
  .try-sec .stage { width: 100%; }
  .try.device { aspect-ratio: auto; filter: none; }
  .try.device::after { display: none; }
  .try .screen { position: static; width: 100%; height: auto; border-radius: 28px; }
  .try .screen::after { display: none; }
  .app { padding: 26px 18px 22px; }
  .marquee .device { width: 170px; }
  .trio { flex-wrap: wrap; gap: 20px; }
  .trio .t-ipad { width: 100%; transform: none; }
  .trio .t-phone, .trio .t-duo { width: 42%; transform: none; }
  .store.small small { display: none; }
  .coin.c1 { left: -30px; width: 76px; }
}

/* ---------- Hero: Versprechen als ruhige Zeile, keine Knöpfe ---------- */
.usps { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 520px; }
.usps span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.usps svg { width: 16px; height: 16px; color: var(--faint); flex: none; }

/* ---------- Fotogalerie, horizontal ---------- */
.gallery { padding: 30px 0 110px; }
.gallery-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.gallery-nav { display: flex; gap: 10px; }
.gallery-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 20px; cursor: pointer; transition: background .2s, transform .2s; }
.gallery-nav button:hover { background: var(--surface); transform: scale(1.06); }
.rail { margin-top: 36px; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(20px, calc((100vw - var(--max)) / 2)) 10px; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.drag { cursor: grabbing; scroll-snap-type: none; }
.rail .photo { flex: 0 0 clamp(260px, 28vw, 380px); scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; }
.rail .photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.2s var(--ease); pointer-events: none; user-select: none; }
.rail .photo:hover img { transform: scale(1.05); }
.photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.photo figcaption span { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; color: #ddd; margin-top: 8px; letter-spacing: 0; }
.faq-sec .photo { border-radius: var(--radius); overflow: hidden; }
.faq-sec .photo img { width: 100%; object-fit: cover; }

/* ---------- Bento: alle Funktionen ---------- */
.bento-sec { padding: 110px 0 120px; }
.bento { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento > div { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: 24px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; transition: transform .4s var(--ease), box-shadow .4s; }
.bento > div:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgba(60, 50, 30, .10); }
.bento .wide { grid-column: span 2; }
.bento .tall { grid-row: span 2; }
.bento h3 { font-size: 22px; letter-spacing: -.02em; }
.bento p { color: var(--muted); font-size: 15px; margin-top: 6px; line-height: 1.45; }
.bento .ill { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 110px; margin-bottom: 14px; }
.bento .ink { background: #0d0d0e; color: #f4f4f2; border-color: #0d0d0e; }
.bento .ink p { color: #a3a3a8; }
.big-num { font-family: var(--display); font-weight: 700; font-size: clamp(64px, 7vw, 96px); letter-spacing: -.04em; line-height: 1; }
.big-num small { font-size: .45em; color: #77777d; margin-left: 6px; }
.ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(185, 138, 28, .12); color: var(--gold-deep); }
.ink .ico { background: rgba(229, 186, 78, .14); color: var(--gold); }
.ico svg { width: 26px; height: 26px; }
.tiles-ill { position: relative; width: 210px; height: 120px; }
.tiles-ill img { position: absolute; width: 96px; border-radius: 18px; box-shadow: 0 10px 22px rgba(0, 0, 0, .14); transition: transform .5s var(--ease); }
.tiles-ill img:nth-child(1) { left: 0; top: 14px; transform: rotate(-10deg); }
.tiles-ill img:nth-child(2) { left: 56px; top: 0; z-index: 2; }
.tiles-ill img:nth-child(3) { left: 112px; top: 14px; transform: rotate(10deg); }
.bento > div:hover .tiles-ill img:nth-child(1) { transform: rotate(-16deg) translateX(-10px); }
.bento > div:hover .tiles-ill img:nth-child(3) { transform: rotate(16deg) translateX(10px); }
.rings { display: flex; gap: 14px; }
.rings svg { width: 64px; height: 64px; transform: rotate(-90deg); }
.rings circle { fill: none; stroke-width: 6; }
.rings .bg { stroke: var(--line); }
.rings .fg { stroke: var(--gold-deep); stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 176; transition: stroke-dashoffset 1.6s var(--ease); }
.in .rings .fg { stroke-dashoffset: var(--off); }
.curve path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 2s var(--ease); }
.in .curve path { stroke-dashoffset: 0; }
.checks { list-style: none; display: grid; gap: 8px; width: 100%; max-width: 230px; font-size: 14px; }
.checks li { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg); }
.checks li b { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); display: inline-block; transition: background .3s, border-color .3s; }
.in .checks li b { background: var(--gold-deep); border-color: var(--gold-deep); }
.checks li:nth-child(2) b { transition-delay: .5s; } .checks li:nth-child(3) b { transition-delay: 1s; }
.calc-ill { font-family: var(--display); font-weight: 700; font-size: 26px; display: flex; align-items: center; gap: 10px; }
.calc-ill span { color: var(--faint); font-size: 22px; }
.chips-ill { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 240px; }
.chips-ill i { font-style: normal; font-size: 13px; border-radius: 99px; padding: 5px 10px; background: var(--bg); border: 1px solid var(--line); }
.chips-ill i.on { border-color: var(--gold-deep); background: rgba(185, 138, 28, .1); }
.mini-widget { width: 150px; border-radius: 26px; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }

/* ---------- Widgets, schwebend ---------- */
.widgets { padding: 110px 0 140px; overflow: hidden; }
.widgets .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.widget-stage { position: relative; height: clamp(520px, 52vw, 680px); }
.widget-stage .device { position: absolute; left: 50%; top: 0; width: min(290px, 52%); transform: translateX(-50%) rotate(4deg); }
.float-w { position: absolute; border-radius: 28px; box-shadow: 0 30px 50px rgba(40, 30, 10, .28); will-change: transform; z-index: 3; animation: drift 7s ease-in-out infinite; }
.float-w.w1 { width: min(330px, 56%); left: 0; top: 16%; }
.float-w.w2 { width: min(300px, 50%); right: -2%; top: 52%; animation-delay: -2.5s; }
.float-w.w3 { width: min(150px, 26%); left: 8%; bottom: 4%; animation-delay: -4.5s; }
@keyframes drift { 50% { translate: 0 -12px; } }

/* ---------- Geräte-Komposition ---------- */
.devices { padding: 130px 0 90px; }
.cluster { position: relative; margin: 70px auto 0; width: min(1080px, 100%); height: clamp(420px, 64vw, 760px); perspective: 2400px; }
.cluster::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -24px; height: 70px; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .9), transparent 70%); z-index: 0; }
.cluster::before { content: ""; position: absolute; inset: 10% 15% 0; background: radial-gradient(50% 50% at 50% 60%, rgba(229, 186, 78, .16), transparent 70%); filter: blur(30px); z-index: 0; }
.tablet, .duo { position: absolute; padding: 2.2%; background: linear-gradient(145deg, #4a4a50, #1b1b1e 30%, #0d0d0f 70%, #3a3a40); border-radius: 6% / 4.6%; box-shadow: 0 70px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.tablet::before, .duo::before { content: ""; position: absolute; inset: 1.1%; border-radius: inherit; background: #050506; }
.tablet img, .duo img { position: relative; width: 100%; border-radius: 3.4% / 2.6%; display: block; }
.tablet { width: 50%; left: 25%; top: 0; transform: rotateX(8deg) rotateY(-6deg); z-index: 1; }
.duo { width: 25%; right: 9%; bottom: 0; border-radius: 9% / 6.5%; transform: rotateY(-22deg) rotateZ(1.5deg); z-index: 2; }
.duo img { border-radius: 7% / 5%; }
.cluster .device { position: absolute; width: 20.5%; left: 13%; bottom: -3%; transform: rotateY(20deg) rotateZ(-2deg); z-index: 3; }
.cluster > * { transition: transform 1.4s var(--ease), translate 1.4s var(--ease), opacity 1.2s; }
.cluster:not(.in) > * { opacity: 0; }
.cluster:not(.in) .tablet { translate: 0 80px; }
.cluster:not(.in) .duo { translate: 120px 60px; }
.cluster:not(.in) .device { translate: -120px 60px; }
.cluster:hover .tablet { transform: rotateX(4deg) rotateY(0); }
.cluster:hover .duo { transform: rotateY(-12deg) rotateZ(0); }
.cluster:hover .device { transform: rotateY(10deg) rotateZ(0); }
.dev-labels { display: flex; justify-content: center; gap: 34px; margin-top: 44px; color: var(--faint); font-size: 14px; }

/* ---------- Rechtliches ---------- */
.legal { padding: 70px 0 110px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 30px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p { color: var(--muted); margin-top: 10px; }
.legal p b { color: var(--text); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.rtl { unicode-bidi: bidi-override; direction: rtl; display: inline-block; }

@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .bento .wide { grid-column: auto; }
  .widget-stage { height: 120vw; }
  .widget-stage .device { width: 58%; }
  .cluster { height: 92vw; }
  .gallery-nav { display: none; }
}

/* Späte Regeln oben überschreiben den ersten Schmal-Block, deshalb hier noch einmal. */
@media (max-width: 900px) {
  .widgets .wrap { grid-template-columns: 1fr; }
  .widget-stage { height: 130vw; max-height: 640px; }
  .widget-stage .device { width: 56%; }
  .float-w.w1 { width: 64%; left: -2%; top: 20%; }
  .float-w.w2 { width: 58%; right: -3%; top: 56%; }
  .float-w.w3 { width: 30%; left: 2%; bottom: 2%; }
}