und würde eine Drehung dort überschreiben. 🔑 Nach dem Store-Start den
auf beiden Startseiten entfernen. */
/* Oben Luft: Durch die Schräge steigt die rechte Ecke an, ohne Abstand stieße sie an die Navigation.
🔑 17.10.2026 (Thomas: „sitzt alles ein bisschen eng“): Die Schräge senkt die LINKE untere Ecke um ~20 px unter den
Kasten, den das Layout rechnet. Darum 40 px bis zum Link und unten deutlich Luft bis zur Augenbraue. */
.soon-stamp{display:flex;flex-direction:column;align-items:flex-start;gap:40px;margin:34px 0 46px}
.soon-stamp-rahmen{display:inline-flex;flex-direction:column;align-items:center;gap:6px;padding:12px 24px 11px;border:3px solid var(--gold);border-radius:14px;outline:1.5px solid rgba(232,201,133,.45);outline-offset:4px;background:rgba(5,8,26,.6);box-shadow:0 12px 34px rgba(0,0,0,.4);transform:rotate(-5deg)}
.soon-stamp-titel{font-size:clamp(28px,3.2vw,40px);font-weight:800;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.soon-stamp-zeile{font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
/* Link unter dem Stempel: führt zur Erinnerung (#zum-start); gerade gesetzt, damit er gut lesbar bleibt. */
/* Link als ruhiger Knopf statt Unterstreichung: eigene Fläche, klarer Abstand, liest sich nicht mehr als Teil des Stempels. */
.soon-stamp-link{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:8px;margin-left:4px;padding:9px 18px;border:1px solid rgba(232,201,133,.6);border-radius:999px;background:rgba(232,201,133,.08);font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--gold);text-decoration:none;transition:background .2s,border-color .2s,color .2s;animation:ruf-puls 4.8s ease-out 1.6s infinite}
.soon-stamp-link:hover{color:var(--ink);border-color:var(--gold);background:rgba(232,201,133,.16)}
/* 17.10.2026 (Thomas: „etwas auffälliger animieren“): alle 4,8 s ein Lichtstreif über den Knopf, ein Ring, der nach
außen ausläuft, und ein Pfeil, der zweimal anstupst — im selben Takt, damit es EIN Signal ist und kein Gewimmel.
Erst nach 1,6 s, wenn der Stempel eingeblendet ist. „Bewegung reduzieren“ stellt core.css ab (auch ?ruhig). */
.soon-stamp-link::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,236,190,.5) 50%,transparent 70%);transform:translateX(-120%);animation:ruf-schimmer 4.8s ease-in-out 1.6s infinite}
.soon-stamp-pfeil{display:inline-block;animation:ruf-pfeil 4.8s ease-in-out 1.6s infinite}
.soon-stamp-link:hover .soon-stamp-pfeil,.soon-stamp-link:focus-visible .soon-stamp-pfeil{transform:translateX(4px);animation:none}
@keyframes ruf-schimmer{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}
@keyframes ruf-puls{0%{box-shadow:0 0 0 0 rgba(232,201,133,.55)}30%{box-shadow:0 0 0 12px rgba(232,201,133,0)}100%{box-shadow:0 0 0 0 rgba(232,201,133,0)}}
@keyframes ruf-pfeil{0%,30%,100%{transform:none}8%,22%{transform:translateX(5px)}15%{transform:translateX(1px)}}
.soon-stamp-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* 🔑 Ladezeit C1 (24.10.2026): Der Hero ist ab dem ersten Bild sichtbar (keine Deckkraft 0, kein Warten auf GSAP) –
sonst zählt der größte Absatz erst nach Intro + Einblendung als LCP. Der Auftritt (40 px hoch, Unschärfe weg, wie
data-reveal) läuft als CSS-Animation, gestartet, wenn sich der Intro-Vorhang öffnet (0,45 s), gestaffelt wie vorher.
Ohne JS, bei reduzierter Bewegung und mit ?ruhig: sofort der Endzustand. */
html.js [data-auftritt]{animation:auftritt 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.45s + var(--auftritt-d,0s))}
[data-auftritt="150"]{--auftritt-d:.15s}
[data-auftritt="400"]{--auftritt-d:.4s}
[data-auftritt="600"]{--auftritt-d:.6s}
[data-auftritt="700"]{--auftritt-d:.7s}
[data-auftritt="850"]{--auftritt-d:.85s}
[data-auftritt="1000"]{--auftritt-d:1s}
[data-auftritt="1100"]{--auftritt-d:1.1s}
@keyframes auftritt{from{translate:0 40px;filter:blur(10px)}to{translate:none;filter:none}}
html.ruhig [data-auftritt]{animation:none}
@media (prefers-reduced-motion:reduce){[data-auftritt]{animation:none!important}}
.hero .display{font-size:clamp(54px,7.6vw,110px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.trust-line{margin-top:18px;font-size:13px;color:var(--ink-mute)}
/* Link auf die Erklärseite zum Video „Das ist TravelMaster Go“ (SEO B3, 24.10.2026) */
.hero-video{margin-top:10px;font-size:14px}
.hero-video a{color:var(--gold);font-weight:600;text-decoration:none}
.hero-video a:hover{text-decoration:underline;text-underline-offset:4px}
.store-badges{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.store-badge{display:inline-flex;flex-direction:column;gap:2px;padding:9px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.store-badge-name{font-size:13px;font-weight:600;color:var(--ink-dim)}
.store-badge-tag{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mint)}
.hero-route{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.route-base{fill:none;stroke:rgba(232,201,133,.28);stroke-width:1.4;stroke-dasharray:5 11}
.route-draw{fill:none;stroke:#E8C985;stroke-width:1.8;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(240,217,162,.7))}
/* 🔑 Vor dem Start unsichtbar (sonst sitzt der Punkt links oben) und die Route noch ungezeichnet. Ohne JS bleibt die Route komplett stehen. */
.hero-plane{opacity:0}
html.ruhig .hero-plane{opacity:1}
html.js:not(.no-motion):not(.ruhig) .route-draw{stroke-dasharray:4000;stroke-dashoffset:4000}
.hero-plane .halo{fill:rgba(255,220,150,.22)}
.hero-plane .kern{fill:#fff6dc}
.hero-stage{position:relative;z-index:1;height:min(78vh,720px)}
.hero-phone{position:absolute;left:6%;top:4%;width:min(270px,40%);transform:rotate(-6deg)}
.coco-hero{position:absolute;right:-1%;bottom:-4%;width:min(400px,64%)}
.coco-hero .coco-bubble{left:6%;top:2%}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:44px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px;transform:translateX(-50%)}
.scroll-cue i{position:absolute;left:50%;top:8px;width:3px;height:8px;border-radius:2px;background:var(--gold);transform:translateX(-50%);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}}
/* ---------- Szene 2: Planung ---------- */
.teaser{margin-top:30px;padding:22px;border-radius:var(--radius);background:rgba(232,201,133,.07);border:1px solid var(--line)}
.teaser .eyebrow{margin-bottom:10px;font-size:11px}
.teaser h3{font-family:'Cormorant Garamond',serif;font-size:28px;font-style:italic;font-weight:600;color:var(--gold)}
.teaser p{margin:8px 0 18px;color:var(--ink-dim);font-size:14.5px;line-height:1.6}
.plan-stage{height:620px}
.mail{position:absolute;left:0;top:8%;z-index:3;width:230px;padding:18px 18px 16px;border-radius:14px;background:#fffaf0;color:#1b1030;box-shadow:0 24px 50px rgba(0,0,0,.35);transform:rotate(-8deg)}
.mail::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;border-radius:14px 14px 0 0;background:linear-gradient(to bottom right,transparent 49.5%,rgba(27,16,48,.07) 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49.5%,rgba(27,16,48,.07) 50%) right/50% 100% no-repeat}
.mail small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#7a5c1f}
.mail strong{display:block;margin-top:6px;font-size:16px}
.mail span{display:block;margin-top:4px;font-size:13px;color:#5a4a6c}
.plan-phone{position:absolute;right:4%;top:0;width:270px}
.ui{aspect-ratio:9/19.5;padding:18px 16px;background:linear-gradient(180deg,#14286e,#0a1440);display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--ink)}
.ui-bar{display:flex;justify-content:space-between;font-size:11px;font-weight:600;opacity:.8}
.ui-title{font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:600}
.ui-inbox{font-size:12px;color:var(--ink-mute)}
.ui-booking{display:grid;gap:4px;padding:14px;border-radius:16px;background:linear-gradient(135deg,rgba(232,201,133,.22),rgba(232,201,133,.06));border:1px solid var(--line-strong)}
.ui-tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.ui-booking strong{font-size:24px;letter-spacing:.02em}
.ui-sub{margin-top:6px;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.ui-check{list-style:none;display:grid;gap:7px}
.ui-check li{display:flex;gap:8px;align-items:center;font-size:13px}
.ui-check li::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--gold-grad);color:#1B1406;font-size:11px;font-weight:800}
.plan-col{position:relative}
/* 🔑 Die Szene ist höher als das Fenster (Textkarte + Teaser). Ein Pin würde unten abschneiden → nur die Bühne klebt. */
@media (min-width:900px) and (min-height:800px){.scene-plan .plan-col{align-self:start;position:sticky;top:120px}}
.coco-plan{position:absolute;left:4%;bottom:-8%;z-index:4;width:min(250px,44%)}
/* 🔑 Blase rechtsbündig zu Coco, wächst nach links: bleibt so auch auf 320 px im Bild. */
.coco-plan .coco-bubble{left:auto;right:0;transform-origin:100% 100%}
/* ---------- Szene 3: Globus ---------- */
.scene-globe .scene-grid{grid-template-columns:.9fr 1.1fr}
.globe-col{display:grid;justify-items:center;padding-top:calc(var(--globe-w) * .31)}
.scene-globe{--globe-w:min(46vw,640px,58vh)}
.globe-stage{position:relative;width:min(100%,var(--globe-w));aspect-ratio:1}
.globe-stage canvas{width:100%;height:100%;cursor:grab;border-radius:50%}
.globe-stage canvas.is-dragging{cursor:grabbing}
.coco-globe{position:absolute;left:50%;bottom:90%;width:27%;translate:-50% 0;z-index:2}
/* Neben dem Kopf statt darüber: Die Blase ragt nicht unter die Navigation. */
.coco-globe .coco-bubble{left:100%;top:40%}
.push{position:absolute;right:-2%;top:22%;z-index:3;width:250px;padding:14px 16px;border-radius:18px;background:rgba(255,250,240,.97);color:#1b1030;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.push small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#b3261e}
.push strong{display:block;margin-top:4px;font-size:16px}
.push span{display:block;margin-top:2px;font-size:13px;color:#4a3a5c}
.counter{position:absolute;left:0;bottom:6%;z-index:3;padding:14px 18px;border-radius:18px;font-size:13.5px;color:var(--ink-dim)}
.counter strong{display:block;font-family:'Cormorant Garamond',serif;font-size:44px;line-height:1;color:var(--gold);font-variant-numeric:lining-nums tabular-nums}
.globe-hint{margin-top:14px;padding:6px 14px;border-radius:999px;background:var(--glass-strong);font-size:12px;color:var(--ink-dim);text-align:center}
/* ---------- Einspaltig unter 900 px ---------- */
@media (max-width:899px){
.hero,.scene-grid,.scene-globe .scene-grid{grid-template-columns:1fr}
.hero{min-height:auto;padding-top:120px}
.hero-stage{height:480px}
.hero-phone{width:190px;left:2%}
.coco-hero{width:min(280px,62%);right:0}
.scroll-cue{display:none}
/* ⚠️ Einspaltig darf der Schein nicht über den Seitenrand ragen (sonst waagerechtes Scrollen). */
.hero-copy::before{inset:-4% -14px}
.plan-stage{height:520px}
.plan-phone{width:220px;right:0}
.mail{width:190px}
.coco-plan{position:relative;left:auto;bottom:auto;width:160px;margin:-110px 0 0 auto}
.scene-globe{--globe-w:min(100vw - 32px,520px)}
.coco-hero .coco-bubble{left:auto;right:0;transform-origin:100% 100%}
.coco-globe .coco-bubble{left:-90px;top:0}
.push{right:0;top:auto;bottom:-6%;width:220px}
.counter{bottom:auto;top:0}
}
@media (max-width:480px){
.scene-copy{padding:24px 20px}
.hero-actions .cta,.hero-actions .cta-ghost{width:100%;justify-content:center}
}
/* ---------- Planung: Endzustand ohne Bewegung ---------- */
/* 🔑 Ohne Animation (reduziert, kein JS, Module gescheitert) steht die fertige Buchung: keine Erkennungszeile, Mail ist schon im Handy. */
html.no-js .ui-inbox,html.no-js .mail,
html.no-motion .ui-inbox,html.no-motion .mail,
html.ruhig .ui-inbox,html.ruhig .mail{opacity:0;visibility:hidden}
/* =================================================================
Teil 2: Szene 4 Reisekasse, Szene 5 Fotobuch, Szene 6 Freizeit-Kompass
================================================================= */
/* ---------- Szene 4: Reisekasse ---------- */
.kasse-col{position:relative}
.kasse{position:relative;padding:28px;overflow:visible}
.kasse-head{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.kasse-total{margin-top:8px;font-family:'Cormorant Garamond',serif;font-size:clamp(52px,6.4vw,84px);font-weight:600;line-height:1;font-variant-numeric:lining-nums tabular-nums;background:var(--gold-shine);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
.kasse-sub{margin-top:8px;font-size:13px;color:var(--ink-dim)}
.kasse-people{display:grid;gap:12px;margin-top:22px}
.person{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--glass-line);font-size:14.5px}
.avatar{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;font-weight:800;color:#1b1030;background:var(--gold-grad)}
.person:nth-child(2) .avatar{background:linear-gradient(135deg,#7dd3fc,#38bdf8)}
.person:nth-child(3) .avatar{background:linear-gradient(135deg,#f9a8d4,#f472b6)}
.betrag{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.betrag.plus{color:var(--mint)}
.betrag.minus{color:#ffcdb8}
.coin{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff2c9,#d8b26a 55%,#a57b33);box-shadow:0 0 14px rgba(240,217,162,.75);pointer-events:none;opacity:0;z-index:5}
.coco-share{position:absolute;right:-15%;top:-32%;width:min(210px,38%);z-index:4}
/* 🔑 Blase rechtsbündig zu Coco, wächst nach links: bleibt im Bild und fällt nicht auf die Textkarte. */
.coco-share .coco-bubble{left:auto;right:0;border-radius:18px 18px 4px 18px;transform-origin:100% 100%}
/* ---------- Szene 5: Fotobuch ---------- */
/* Höhe folgt dem Fenster, damit die gepinnte Szene (Textkarte + Bühne) ins Bild passt. */
.memories{height:clamp(440px,64vh,560px);perspective:1200px}
/* 🔑 --pw: Breite. left wird begrenzt, damit auch gedrehte Fotos (beim Hereinfallen bis ±40°) nicht über den Bühnenrand ins Seitenscrollen ragen. */
.polaroid{--pw:170px;position:absolute;left:min(var(--x),calc(100% - var(--pw) - 40px));top:var(--y);z-index:2;width:var(--pw);padding:10px 10px 36px;border-radius:4px;background:#fbf7ef;box-shadow:0 16px 36px rgba(0,0,0,.35);transform:rotate(var(--r))}
.polaroid .foto{display:grid;place-items:center;aspect-ratio:1;border-radius:2px;font-size:46px}
.f1{background:linear-gradient(160deg,#f6c177,#e0704a)}
.f2{background:linear-gradient(160deg,#fcd34d,#f59e0b)}
.f3{background:linear-gradient(160deg,#fde68a,#d6a354)}
.f4{background:linear-gradient(160deg,#a7f3d0,#3b82a0)}
.f5{background:linear-gradient(160deg,#93c5fd,#1e40af)}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:#3b2a4a}
/* 🔑 Zentrierung über die Einzeleigenschaft translate: GSAP schreibt nur transform und liest so keine festen Pixelwerte aus der Mitte-Verschiebung. */
.book{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-content:center;gap:6px;width:300px;height:390px;max-height:92%;padding:30px;text-align:center;border-radius:6px 18px 18px 6px;background:linear-gradient(135deg,#1f2a5e,#0c1230);border:1px solid var(--line-strong);box-shadow:inset 10px 0 0 rgba(0,0,0,.25),0 40px 80px rgba(0,0,0,.45),0 0 60px rgba(232,201,133,.18);translate:-50% -50%;transform-style:preserve-3d}
.book-kicker{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.book strong{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:54px;font-weight:600;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.book-year{font-size:14px;letter-spacing:.3em;color:var(--ink-dim)}
.coco-memory{position:absolute;right:-6%;bottom:-8%;width:min(220px,40%);z-index:3}
/* 🔑 Endzustand ohne Bewegung (reduziert, kein JS, Module gescheitert): Die Fotos sind schon im Buch, es steht leicht gedreht da. */
html.no-js .polaroid,html.no-motion .polaroid,html.ruhig .polaroid{opacity:0;visibility:hidden}
html.no-js .book,html.no-motion .book,html.ruhig .book{transform:perspective(1200px) rotateY(-10deg)}
/* ---------- Szene 6: Freizeit-Kompass ---------- */
/* 🔑 Die Szene läuft über die ganze Breite (Innenabstand statt Zentrierung). So füllt das Bokeh das Fenster, ohne 100vw: das rechnete die Scrollleiste mit und erzeugte waagerechtes Scrollen. */
.scene-evening{width:auto;margin:0;padding-bottom:120px;padding-inline:max(16px,calc((100% - var(--container)) / 2))}
.bokeh{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* 🔑 Weiche Ober- und Unterkante: Ohne sie schneidet das overflow:hidden die Lichter an einer harten Linie ab (sichtbar am Übergang zum Vergleich). */
.bokeh{-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent)}
.bokeh span{position:absolute;border-radius:50%;background:var(--c);opacity:var(--o);filter:blur(var(--b))}
/* 🔑 Die Endlosbewegung läuft nur, solange die Szene sichtbar ist (.is-live), und nie im ruhigen Modus. */
.bokeh.is-live span{animation:drift var(--d) ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(var(--dx),var(--dy))}}
/* 🔑 Coco bekommt eine eigene Spalte neben der Karte (--cw), statt Chips und Termine zu verdecken. */
.kompass-col{--cw:clamp(120px,32%,190px);position:relative}
.freizeit-card{margin-right:calc(var(--cw) - 12px);padding:26px 24px}
.fp-card-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:600}
.fp-loc{font-weight:500;color:var(--ink-mute);font-size:12.5px}
.fp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fp-chip{padding:8px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink-dim);font-size:13px;font-weight:600;transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--ease-out)}
.fp-chip:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.fp-chip[aria-pressed="true"]{background:var(--gold-grad);color:#1B1406;border-color:transparent}
.fp-events{display:flex;flex-direction:column;margin-top:18px;min-height:118px}
.fp-event{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px}
.fp-time{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.fp-what{flex:1;min-width:150px;font-weight:500}
.fp-meta{font-size:12.5px;color:var(--ink-mute)}
.coco-kompass{position:absolute;right:0;bottom:-16px;width:var(--cw);z-index:3}
/* 🔑 Blase nie breiter als Coco selbst (100 % ihrer Box): So ragt sie nicht über die Karte und deckt weder Chips noch Termine ab. */
.coco-kompass .coco-bubble{left:auto;right:0;max-width:100%;border-radius:18px 18px 4px 18px;transform-origin:100% 100%}
/* 🔑 Ohne JS sind die Chips reine Beschriftungen (keine Hover-/Zeiger-Anmutung). */
html.no-js .fp-chip{pointer-events:none;cursor:default}
html.no-js .fp-chip:hover{transform:none;border-color:rgba(255,255,255,.14)}
.freizeit-closer{margin-top:110px;text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(34px,5vw,64px);background:var(--gold-shine);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@media (min-width:900px) and (max-width:1240px){
/* Schmale Ränder: Coco ragt nur wenig über die Spalte hinaus. */
.coco-memory{right:-12px}
}
/* 🔑 Bei schmalen Karten brechen Termine auf bis zu 146 px um: Mindesthöhe so hoch, dass die Karte beim Chip-Wechsel nicht springt. */
@media (max-width:480px),(min-width:900px) and (max-width:1240px){
.fp-events{min-height:150px}
}
/* Genau an der Schwelle (900–919 px) bricht der Kultur-Eintrag auf 167 px um. */
@media (min-width:900px) and (max-width:919px){
.fp-events{min-height:170px}
}
@media (max-width:899px){
/* Coco steht über der Karte (im Fluss, rechts), damit sie weder Betrag noch Kopfzeile verdeckt. */
.kasse-col{display:flex;flex-direction:column}
.coco-share{order:-1;position:relative;right:auto;top:auto;align-self:flex-end;width:140px;margin-bottom:-18px}
.memories{height:520px}
.polaroid{--pw:130px}
.book{width:240px;height:320px}
.coco-memory{width:150px;right:0}
.freizeit-card{margin-right:0}
.coco-kompass{position:relative;right:auto;bottom:auto;width:160px;margin:-24px 0 0 auto}
/* 🔑 Blase neben Cocos Kopf (links, unterhalb der Karte) statt darüber: Sie deckt so keine Terminzeile ab und bleibt im Bild (Breite folgt dem Platz links von Coco). */
.coco-kompass .coco-bubble{top:62%;right:calc(100% - 14px);max-width:min(250px,calc(100vw - 180px))}
.freizeit-closer{margin-top:60px}
}
/* =================================================================
Vergleich & Preise: übernommen aus dem alten Gesamt-Stylesheet (Stand a3f25b8, Datei entfernt),
Selektoren unverändert. Anpassungen folgen darunter.
================================================================= */
/* =================================================================
Ported: konzept_vergleichssektion.html — Selektoren unverändert
================================================================= */
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:88px 24px 120px}
/* ---------- Signature: Reise-Lebenslinie ---------- */
.lifeline{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:36px 32px 30px;backdrop-filter:blur(8px);
}
.phases{
display:grid;grid-template-columns:1fr 1fr 1fr .8fr;gap:0;
margin-bottom:6px;
}
.phase{
text-align:center;padding-bottom:16px;position:relative;
}
.phase .ico{font-size:20px;display:block;margin-bottom:6px}
.phase .name{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;letter-spacing:.02em}
.phase .sub{font-size:12px;color:var(--ink-mute);margin-top:2px}
.phase.home .name{color:var(--sky)}
.phase::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,transparent,rgba(232,201,133,.5),transparent);
}
.phase.home::after{background:linear-gradient(90deg,transparent,rgba(56,189,248,.5),transparent)}
.track{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:center;margin-top:18px}
.track .who{font-size:14px;color:var(--ink-dim);font-weight:500;text-align:right;padding-right:6px;white-space:nowrap}
.track .lane{
position:relative;height:14px;border-radius:99px;
background:rgba(255,255,255,.05);
display:grid;grid-template-columns:1fr 1fr 1fr .8fr;overflow:hidden;
}
.lane i{display:block;height:100%}
.lane i.on{background:rgba(255,255,255,.16)}
.track.tm .who{color:var(--gold);font-weight:700;font-size:15px}
.track.tm .lane{height:20px;box-shadow:0 0 24px rgba(232,201,133,.22)}
.track.tm .lane i.on{background:var(--gold-grad)}
.track.tm .lane i.home{background:linear-gradient(135deg,#2BA4E0,#7DD6FF)}
.lane-note{grid-column:2;font-size:11.5px;color:var(--ink-mute);margin-top:-6px;padding-left:2px}
.lifeline .foot{margin-top:26px;font-size:13px;color:var(--ink-mute);line-height:1.6;border-top:1px solid rgba(255,255,255,.06);padding-top:16px}
.lifeline .foot b{color:var(--ink-dim);font-weight:600}
/* ---------- Vergleichstabelle ---------- */
.table-shell{
border:1px solid var(--line);border-radius:var(--radius);
background:var(--card);backdrop-filter:blur(8px);overflow:hidden;
}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:880px}
thead th{
font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
color:var(--ink-mute);padding:18px 14px 14px;text-align:center;
border-bottom:1px solid rgba(255,255,255,.08);vertical-align:bottom;line-height:1.45;
}
thead th:first-child{text-align:left;padding-left:24px}
thead th.tm{
color:#1B1406;background:var(--gold-grad);
font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:600;
letter-spacing:.02em;text-transform:none;border-radius:14px 14px 0 0;
}
tbody td{
padding:15px 14px;text-align:center;font-size:15px;
border-bottom:1px solid rgba(255,255,255,.05);color:var(--ink-dim);
}
tbody tr:last-child td{border-bottom:none}
tbody td:first-child{
text-align:left;padding-left:24px;color:var(--ink);font-weight:500;font-size:14.5px;
max-width:280px;
}
tbody td:first-child .why{display:block;font-weight:400;font-size:12px;color:var(--ink-mute);margin-top:3px}
td.tm{
background:rgba(232,201,133,.08);
border-left:1px solid var(--line);border-right:1px solid var(--line);
}
tbody tr:last-child td.tm{border-radius:0 0 14px 14px;border-bottom:1px solid var(--line)}
.m-ok{color:var(--ok);font-size:17px;font-weight:700}
.m-half{color:var(--half);font-size:16px}
.m-no{color:var(--none)}
.m-build{
display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;
color:var(--sky);border:1px solid rgba(56,189,248,.4);border-radius:99px;padding:3px 10px;
}
.legend{display:flex;flex-wrap:wrap;gap:22px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.07);font-size:12.5px;color:var(--ink-mute)}
.legend b{font-weight:600}
.legend .m-ok,.legend .m-half{font-size:14px}
/* ---------- Ehrlichkeit ---------- */
.honest{
display:grid;grid-template-columns:1.2fr 1fr;gap:18px;
}
.honest .box{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:30px 28px;backdrop-filter:blur(8px);
}
.honest h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;margin-bottom:14px}
.honest h3 em{font-style:italic;color:var(--gold)}
.honest p{font-size:14.5px;line-height:1.7;color:var(--ink-dim)}
.honest ul{list-style:none;margin-top:14px}
.honest li{font-size:14.5px;color:var(--ink-dim);padding:9px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:10px}
.honest li b{color:var(--ink);font-weight:600}
.honest .privacy{border-color:rgba(56,189,248,.35)}
.honest .privacy h3 em{color:var(--sky)}
.shield{font-size:26px;margin-bottom:10px;display:block}
.disclaimer{margin-top:56px;font-size:11.5px;line-height:1.7;color:var(--ink-mute);max-width:720px}
/* ---------- Responsive (aus dem Konzept) ---------- */
@media(max-width:860px){
.honest{grid-template-columns:1fr}
.track{grid-template-columns:120px 1fr}
.track .who{font-size:12px;white-space:normal}
.phase .name{font-size:16px}
.phase .sub{display:none}
.wrap{padding-top:64px}
}
/* =================================================================
Ported: konzept_preissektion.html — Selektoren unverändert.
Bereits vorhandene Bausteine (.eyebrow / .display / .lede / .wrap /
.disclaimer / .stars) werden wiederverwendet und hier NICHT erneut
definiert (siehe Kollisionscheck, Phase 1 im Buildticket).
================================================================= */
/* ---------- Karten ---------- */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px;align-items:stretch}
.plan{
position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:30px 26px 26px;backdrop-filter:blur(8px);display:flex;flex-direction:column;
transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.4);border-color:var(--line-strong)}
.plan .name{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;letter-spacing:.01em}
.plan .for{font-size:13px;color:var(--ink-mute);margin-top:4px;min-height:36px}
.price{margin-top:18px}
.price .big{font-size:38px;font-weight:700;letter-spacing:-.01em}
.price .big small{white-space:nowrap;font-size:15px;font-weight:500;color:var(--ink-dim)}
.price .alt{font-size:13px;color:var(--ink-dim);margin-top:6px;line-height:1.5}
.price .alt b{color:var(--gold);font-weight:600}
.plan ul{list-style:none;margin-top:22px;flex:1}
.plan li{font-size:13.5px;line-height:1.55;color:var(--ink-dim);padding:8px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:9px}
.plan li::before{content:"✓";color:var(--gold);font-weight:700;flex:none}
.plan li.plus::before{content:"✦";color:var(--sky)}
.plan li.head{border-top:none;padding-top:2px}
.plan li.head::before{content:none}
.plan li.head b{color:var(--ink);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.plan .btn{
margin-top:22px;display:block;text-align:center;text-decoration:none;
padding:14px 18px;border-radius:99px;font-weight:600;font-size:15px;
border:1px solid var(--line-strong);color:var(--ink);
transition:transform .2s ease, box-shadow .2s ease;
}
.plan .btn:hover{transform:translateY(-2px)}
.badge{
position:absolute;top:-13px;left:50%;transform:translateX(-50%);
font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
padding:6px 16px;border-radius:99px;white-space:nowrap;
}
/* Premium+ = beliebt */
.plan.popular{border-color:var(--line-strong);box-shadow:0 0 34px rgba(232,201,133,.14)}
.plan.popular .badge{background:var(--gold-grad);color:#1B1406}
.plan.popular .btn{background:var(--gold-grad);color:#1B1406;border:none;box-shadow:0 8px 30px rgba(216,178,106,.3)}
/* Lifetime = Signature-Karte */
.plan.lifetime{
border:1px solid rgba(232,201,133,.75);
background:
radial-gradient(400px 260px at 85% -20%, rgba(232,201,133,.16) 0%, transparent 60%),
linear-gradient(180deg, rgba(38,32,14,.5), rgba(17,26,62,.6));
box-shadow:0 0 44px rgba(232,201,133,.2);
}
.plan.lifetime .badge{background:#0F1A44;border:1px solid var(--line-strong);color:var(--gold)}
.plan.lifetime .name{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.plan.lifetime .btn{background:var(--gold-grad);color:#1B1406;border:none;box-shadow:0 8px 30px rgba(216,178,106,.35)}
.rise{
margin-top:14px;display:flex;align-items:flex-start;gap:9px;
background:rgba(232,201,133,.08);border:1px solid var(--line);
border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:var(--ink-dim);
}
.rise .ico{flex:none;font-size:14px;line-height:1.4}
.rise b{color:var(--gold);font-weight:600}
/* ---------- Vertrauenszeile ---------- */
.trust{
display:flex;justify-content:center;gap:34px;flex-wrap:wrap;
margin-top:56px;font-size:13.5px;color:var(--ink-dim);
}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust .d{color:var(--gold)}
/* ---------- Integration: „Bald verfügbar" an den CTAs
(echte Store-Links folgen später via leerem data-store-link-Attribut) ---------- */
.plan .btn-soon{
display:block;text-align:center;margin-top:10px;
font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);
}
/* ---------- Scroll-Reveal der vier Karten (nutzt das Seiten-System), dezent gestaffelt ---------- */
@media (prefers-reduced-motion:reduce){
.js .plans .plan{transition:none !important;transition-delay:0ms !important}
}
/* ---------- Responsive (aus dem Konzept) ---------- */
@media(max-width:1020px){.plans{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
.plans{grid-template-columns:1fr}
.plan.lifetime{order:-1} /* Mobile: Lifetime zuerst — stärkstes Argument nach oben */
}
/* ---------- Vergleich & Preise: Nachtflug-Anpassungen ---------- */
/* 🔑 Kontrast: der Strich „nicht vorhanden“ (--none, 3,2:1) auf Glas über dem Abendhimmel auf mindestens 4,5:1 angehoben. */
.m-no{color:#8b94b6}
.scene-night .wrap{padding-top:120px;padding-bottom:40px}
.scene-night section{margin-top:96px}
.scene-night .sec-label{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:28px}
.lifeline,.table-shell,.honest .box,.plan{background:var(--glass);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
/* 🔑 Die Lifetime-Karte behält ihren eigenen Hintergrund: .plan.lifetime ist spezifischer als .plan. */
.lane i.on{transform-origin:left center}
/* 🔑 Preiskarten: GSAP schreibt beim Einblenden ein transform. Bis es beim Fertigwerden entfernt ist (.ist-da), darf CSS das transform nicht mit animieren. */
.plan{transition:box-shadow .25s ease,border-color .25s ease}
.plan.ist-da[data-tilt]{transition:transform .5s var(--ease-out),box-shadow .4s,border-color .4s}
.plan[data-tilt]:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
/* 🔑 Umlaufender Goldrand: pausiert, solange die Karten nicht im Bild sind (.is-live setzt home.js). */
@property --rand{syntax:'