:root {
  --bg:#0a0d16; --panel:#121620; --text:#f3f1ec; --muted:#a9acb8; --line:rgba(255,255,255,.12);
  --accent:#6d5df6; --accent-hover:#8174ff; --soft:#a99dff; --blue:#5b9dff; --amber:#ffb44a;
  --pink:#ffa6a6; --cyan:#b3f5ff; --ink:#0a0d16; --grad:linear-gradient(90deg,#ffa6a6,#b3f5ff); --max:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }
:focus-visible { outline:2px solid var(--soft); outline-offset:3px; }
.skip { position:absolute; left:12px; top:-60px; background:var(--soft); color:var(--ink); padding:10px 16px; border-radius:999px; font-weight:700; z-index:10; }
.skip:focus { top:12px; }
.wrap { width:min(var(--max),calc(100% - 40px)); margin:0 auto; }

header { position:sticky; top:0; z-index:5; backdrop-filter:blur(14px); background:rgba(10,13,22,.84); border-bottom:1px solid var(--line); }
.nav { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; align-items:center; gap:12px; font-weight:850; letter-spacing:.09em; }
.logo img { width:42px; height:42px; border-radius:10px; display:block; }
nav { display:flex; gap:28px; color:var(--muted); font-size:.95rem; }
nav a:hover, nav a[aria-current] { color:var(--soft); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-weight:750; background:var(--accent); color:#fff; border:0; cursor:pointer; font-family:inherit; font-size:1rem; transition:background .2s, transform .2s; }
.button:hover { background:var(--accent-hover); transform:translateY(-1px); }
.button:disabled { opacity:.6; cursor:wait; }
.button.secondary { background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.3); }
.button.secondary:hover { border-color:var(--soft); color:var(--soft); }
svg.i { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Hero */
.hero { position:relative; overflow:hidden; padding:112px 0 96px; min-height:640px; display:flex; align-items:flex-end; }
.beams { position:absolute; inset:0; pointer-events:none; }
.beam { position:absolute; top:-6%; height:118%; width:300px; transform-origin:50% 0; mix-blend-mode:screen; opacity:0;
  background:linear-gradient(to bottom,rgba(var(--c),.5),rgba(var(--c),.10) 55%,transparent 88%);
  clip-path:polygon(47% 0,53% 0,100% 100%,0 100%);
  animation:lightup 1.8s ease-out forwards, sway 9s ease-in-out calc(var(--d) + 1.9s) infinite alternate; }
.b1 { --c:255,166,166; left:6%;  --r:-22deg; --d:.1s;  --s:1; }
.b2 { --c:139,123,255; left:30%; --r:-8deg;  --d:.35s; --s:-1; width:260px; }
.b3 { --c:91,157,255;  left:54%; --r:9deg;   --d:.6s;  --s:1; width:340px; }
.b4 { --c:179,245,255; left:76%; --r:24deg;  --d:.85s; --s:-1; width:280px; }
@keyframes lightup { from { opacity:0; transform:rotate(calc(var(--r) - 14deg)); } to { opacity:.8; transform:rotate(var(--r)); } }
@keyframes sway { from { opacity:.8; transform:rotate(var(--r)); } to { opacity:.8; transform:rotate(calc(var(--r) + var(--s) * 5deg)); } }
.haze { position:absolute; inset:auto 0 0 0; height:55%; background:radial-gradient(ellipse at 28% 100%,rgba(139,123,255,.22),transparent 60%),radial-gradient(ellipse at 76% 100%,rgba(255,166,166,.12),transparent 60%),linear-gradient(to top,var(--bg),transparent); }
.hero .wrap { position:relative; }
h1 { font-size:clamp(2.8rem,7vw,5.6rem); line-height:1.02; letter-spacing:-.05em; margin:0 0 22px; max-width:880px; }
.lead { color:#d6d6dd; font-size:clamp(1.05rem,2vw,1.2rem); max-width:600px; margin:0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-logo { position:absolute; top:-40px; right:0; width:210px; height:210px; border-radius:22px; transform:rotate(4deg); box-shadow:0 30px 80px -20px rgba(255,166,166,.35), 0 0 0 1px rgba(255,255,255,.12); animation:pop .8s .5s ease-out both; }
@keyframes pop { from { opacity:0; transform:rotate(-6deg) scale(.9); } to { opacity:1; transform:rotate(4deg) scale(1); } }

/* Laufband (Logo-Verlauf) */
.band-wrap { overflow:hidden; padding:20px 0; }
.band { transform:rotate(-1.2deg); margin:0 -3%; background:var(--grad); color:var(--ink); overflow:hidden; white-space:nowrap; padding:13px 0; }
.track { display:inline-flex; animation:run 32s linear infinite; }
.track span { padding-right:2.4em; font-weight:750; letter-spacing:.3em; text-transform:uppercase; font-size:.9rem; }
@keyframes run { to { transform:translateX(-50%); } }

section { padding:84px 0; }
h2 { margin:0; font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.04em; }
h2::after { content:""; display:block; width:56px; height:4px; border-radius:4px; background:var(--accent); margin-top:16px; }
.intro { color:var(--muted); max-width:560px; margin:14px 0 0; }

/* Das bringen wir mit */
.cards { margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card { position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:28px 24px 26px; }
.card::before { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 15% 0,rgba(var(--c),.2),transparent 60%); }
.card > * { position:relative; }
.icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:rgba(var(--c),.16); color:rgb(var(--c)); font-size:1.6rem; }
.tag { position:absolute; top:24px; right:20px; font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:999px; border:1px solid rgba(var(--c),.55); color:rgb(var(--c)); }
.card h3 { margin:18px 0 8px; font-size:1.5rem; letter-spacing:-.02em; }
.card p { color:var(--muted); margin:0 0 16px; }
.card ul { list-style:none; margin:0; padding:16px 0 0; border-top:1px solid var(--line); display:grid; gap:9px; font-size:.95rem; color:#dcdce2; }
.card li::before { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:rgb(var(--c)); margin-right:10px; vertical-align:middle; }
.c1 { --c:139,123,255; } .c2 { --c:91,157,255; } .c3 { --c:255,180,74; }
.steps-title { margin:60px 0 18px; font-size:1.3rem; letter-spacing:-.02em; }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:s; }
.steps li { padding:18px 16px 16px; border:1px dashed rgba(255,255,255,.22); border-radius:12px; counter-increment:s; }
.steps li::before { content:counter(s); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; margin-bottom:10px; }
.steps b { display:block; } .steps span { color:var(--muted); font-size:.92rem; }

/* Fotos */
.gallery { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:36px 30px; align-items:start; }
.photo { margin:0; transition:transform .3s ease; }
.gallery .photo:nth-child(1) { transform:rotate(-1.2deg); }
.gallery .photo:nth-child(2) { transform:rotate(.9deg); margin-top:56px; }
.gallery .photo:nth-child(3) { transform:rotate(-.6deg); margin-top:12px; }
.photo:hover, .gallery .photo:hover { transform:rotate(0) translateY(-4px); }
.frame { position:relative; aspect-ratio:3/4; background:#0d1017; border-radius:10px; overflow:hidden; box-shadow:0 30px 60px -28px rgba(0,0,0,.9); }
.frame::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,transparent 60%,rgba(0,0,0,.4)),linear-gradient(to top,rgba(10,13,22,.45),transparent 30%); }
.frame::after { content:""; position:absolute; inset:10px; z-index:3; pointer-events:none; border:1px solid rgba(255,255,255,.2); border-radius:6px; }
.frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.photo figcaption { margin-top:12px; font-size:.92rem; color:var(--muted); }
.more { margin-top:44px; }
.page-top { padding:72px 0 8px; }
.photo-grid { margin-top:40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:32px 24px; }
.thumb { display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit; font:inherit; text-align:left; }
dialog { border:0; background:transparent; padding:0; width:min(92vw,720px); color:var(--text); overflow:visible; }
dialog::backdrop { background:rgba(5,7,12,.9); }
dialog img { display:block; max-width:100%; max-height:80vh; margin:0 auto; border-radius:12px; }
dialog p { text-align:center; color:var(--muted); margin:12px 0 0; }
dialog .close { position:absolute; top:-46px; right:0; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.4); color:#fff; font-size:1.3rem; cursor:pointer; }

/* Paket */
.rental { margin-top:40px; display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:start; }
.rider { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:32px 30px 30px; }
.rider::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--grad); }
.rider-top { display:flex; justify-content:space-between; align-items:baseline; gap:20px; flex-wrap:wrap; padding-bottom:18px; border-bottom:1px solid var(--line); }
.rider-top h3 { margin:0; font-size:1.4rem; }
.price { font-size:2.6rem; font-weight:850; letter-spacing:-.05em; line-height:1; }
.price small { font-size:.95rem; font-weight:500; color:var(--muted); letter-spacing:0; }
.rider p { color:var(--muted); margin:16px 0 8px; }
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0 22px; }
.fact { position:relative; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:12px; padding:16px 14px 13px; }
.fact::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.fact small { display:block; color:var(--soft); font-size:.82rem; font-weight:650; margin-bottom:3px; }
.fact b { display:block; font-size:1.3rem; line-height:1.2; letter-spacing:-.02em; }
.fact span { display:block; color:var(--muted); font-size:.88rem; margin-top:4px; line-height:1.4; }
table { width:100%; border-collapse:collapse; }
td { padding:12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
td:first-child { width:64px; color:var(--soft); font-weight:750; }
td:nth-child(2) { color:#e0e0e6; padding-right:12px; }
td.price-cell { text-align:right; font-weight:750; white-space:nowrap; }
td.price-cell em { font-style:normal; font-weight:500; color:var(--muted); }
tr.sum td { border-bottom:0; border-top:2px solid var(--soft); font-size:1.15rem; font-weight:800; padding-top:14px; }
tr.sum td:first-child { color:var(--text); }
.extra { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; padding:14px 16px; border:1px dashed rgba(255,180,74,.65); border-radius:10px; }
.extra b { color:var(--amber); font-size:1.15rem; white-space:nowrap; }
.extra span { color:#e0e0e6; }
.rider .button { margin-top:24px; }
.rental .photo { transform:rotate(1.2deg); }

/* Anfrage */
.booking { margin-top:40px; padding:clamp(24px,4vw,42px); background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.booking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; }
.booking label { display:block; margin-bottom:6px; color:#e8e6e1; font-weight:650; }
.booking input, .booking select, .booking textarea { width:100%; padding:12px 14px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:var(--bg); color:var(--text); font:inherit; }
.booking input:focus, .booking select:focus, .booking textarea:focus { outline:2px solid var(--soft); outline-offset:2px; }
.booking textarea { min-height:120px; resize:vertical; }
.booking .full { grid-column:1 / -1; }
.booking .checks { display:flex; flex-wrap:wrap; gap:12px 22px; }
.booking .checks label { display:flex; align-items:center; gap:8px; margin:0; font-weight:500; }
.booking .checks input { width:auto; accent-color:var(--accent); }
.booking .hint { color:var(--muted); font-size:.9rem; margin:8px 0 0; }
.booking .consent { display:flex; align-items:flex-start; gap:10px; color:var(--muted); font-size:.9rem; font-weight:400; }
.booking .consent input { width:auto; margin-top:6px; accent-color:var(--accent); }
.booking-note { color:var(--muted); font-size:.9rem; margin:16px 0 0; }
.form-msg { margin-top:18px; padding:14px 16px; border-radius:10px; border:1px solid var(--line); display:none; }
.form-msg.ok { display:block; border-color:rgba(169,157,255,.7); background:rgba(109,93,246,.12); }
.hp { position:absolute; left:-9999px; }

/* Kontakt */
.contact-cards { margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ccard { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:26px 24px; border-radius:16px; background:var(--panel); border:1px solid var(--line); transition:transform .2s, border-color .2s; }
.ccard:hover { transform:translateY(-3px); border-color:rgba(var(--c),.75); }
.ccard h3 { margin:14px 0 2px; font-size:1.3rem; }
.ccard p { margin:0 0 14px; color:var(--muted); }
.ccard .go { margin-top:auto; font-weight:700; color:rgb(var(--c)); }
.k1 { --c:74,222,128; } .k2 { --c:244,114,182; } .k3 { --c:169,157,255; }

footer { border-top:1px solid var(--line); padding:30px 0; color:var(--muted); font-size:.9rem; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-brand { display:flex; align-items:center; gap:14px; }
.footer-brand img { width:64px; height:64px; border-radius:12px; display:block; }
.footer-links { display:flex; gap:18px; flex-wrap:wrap; }
.footer-links a:hover { color:var(--soft); }

.js .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }

@media (max-width:1100px) { .hero-logo { display:none; } }
@media (max-width:900px) {
  .cards, .contact-cards { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  nav { display:none; }
  .hero { padding:80px 0 64px; min-height:560px; }
  .beam { width:200px; } .b4 { display:none; }
  .gallery { grid-template-columns:1fr 1fr; gap:26px 18px; }
  .gallery .photo:nth-child(n) { margin-top:0; }
  .gallery .photo:nth-child(3) { grid-column:1 / -1; max-width:340px; }
  .rental { grid-template-columns:1fr; }
  .facts { grid-template-columns:1fr; }
  .rental .photo { max-width:360px; }
  .booking-grid { grid-template-columns:1fr; } .booking .full { grid-column:auto; }
  .photo-grid { grid-template-columns:1fr 1fr; gap:24px 16px; }
}
@media (max-width:520px) { .steps { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) {
  .beam { animation:none; opacity:.8; transform:rotate(var(--r)); }
  .hero-logo, .track { animation:none; }
  .js .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; } .photo, .button, .ccard { transition:none; }
}