/* ==========================================================================
   TIKABI — Stylesheet (Basis: tikabi-designsystem.md, verbindlich)
   1 Schriften · 2 Tokens · 3 Basis · 4 Welt · 5 Header/Navigation
   6 Reiseroute & Weltkarte · 7 Bausteine · 8 Sektionen · 9 Footer
   10 Motion / Übergänge · 11 Reduced Motion
   ========================================================================== */

/* 1 · Schriften (selbst gehostet, kein Google-Server nötig) ---------------- */
@font-face{font-family:"Inter";src:url(fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-var.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/playfair-italic-var.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

/* 2 · Tokens ---------------------------------------------------------------- */
:root{
  color-scheme:dark;
  --color-pink:#FF0098; --color-purple:#2D1B69; --color-navy:#1A1233;
  --bg-page:#1A1233; --bg-deep:#100B20; --bg-surface:#231938; --bg-elevated:#2C2044;
  --text-primary:#FFFFFF; --text-secondary:#D8D0E5; --text-muted:#B8ACC9; --text-accent:#FF0098; --text-accent-soft:#FF8BD0;
  --action-primary:#FF0098; --action-primary-hover:#D90082; --action-primary-active:#C20074; --focus-ring:#FFB8E2;
  --border-subtle:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.22); --border-accent:rgba(255,0,152,.35);
  --glass-start:rgba(255,255,255,.075); --glass-end:rgba(255,255,255,.025); --glass-blur:16px;
  --font-heading:"Playfair Display",Georgia,serif; --font-body:"Inter",Arial,sans-serif;
  --heading-hero:clamp(2.625rem,5.2vw,5rem); --heading-section:clamp(2rem,3.8vw,3.5rem); --heading-card:clamp(1.5rem,2.2vw,2rem);
  --page-gutter:120px; --content-max:1440px; --section-space:clamp(72px,8vw,128px);
  --radius-small:10px; --radius-button:12px; --radius-card:22px; --radius-large:32px; --radius-pill:999px;
  --shadow-card:0 16px 48px rgba(0,0,0,.18);
  --shadow-glass:inset 0 1px 0 rgba(255,255,255,.07),0 16px 48px rgba(0,0,0,.18);
  --shadow-pink:0 8px 28px rgba(255,0,152,.18);
  --duration-fast:160ms; --duration-base:280ms; --duration-slow:600ms; --ease-standard:cubic-bezier(.22,1,.36,1);
  --header-h:76px;
}
@media(max-width:1100px){:root{--page-gutter:48px}}
@media(max-width:850px){:root{--page-gutter:24px;--header-h:68px}}

/* 3 · Basis ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{margin:0;background:var(--bg-page);color:var(--text-secondary);font:400 17px/1.75 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100vh}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{text-wrap:balance;font-family:var(--font-heading);font-weight:600;color:var(--text-primary);letter-spacing:-.025em;line-height:1.12;text-shadow:0 0 3px var(--bg-page),0 0 3px var(--bg-page),0 2px 22px rgba(16,11,32,.85)}
h1{font-size:var(--heading-hero);line-height:1.06}
h2{font-size:var(--heading-section)}
h3{font-size:var(--heading-card);line-height:1.18}
em,.em{font-style:italic;color:var(--text-accent)}
p{max-width:64ch}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px;border-radius:6px}
::selection{background:rgba(255,0,152,.45);color:#fff}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--action-primary);color:#fff;font-weight:700;padding:12px 20px;border-radius:var(--radius-button);transition:top var(--duration-base)}
.skip:focus{top:16px}
.wrap{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--page-gutter)}
.section{position:relative;padding-block:var(--section-space)}

/* 4 · Die Welt (Signature §10) ---------------------------------------------- */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg-page)}
.world canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.aurora{position:absolute;inset:-10%;
  background:
    radial-gradient(48% 42% at 24% 18%,rgba(255,0,152,.10),transparent 70%),
    radial-gradient(55% 48% at 84% 32%,rgba(45,27,105,.55),transparent 72%),
    radial-gradient(64% 56% at 50% 112%,rgba(45,27,105,.45),transparent 72%)}
.orb{position:absolute;border-radius:50%;will-change:transform}
.orb i{position:absolute;inset:0;border-radius:50%;animation:orb-drift 26s ease-in-out infinite alternate}
.orb--1{width:64vmax;height:64vmax;left:-22vmax;top:-18vmax}
.orb--1 i{background:radial-gradient(circle,rgba(255,0,152,.20),rgba(255,0,152,.05) 45%,transparent 68%)}
.orb--2{width:56vmax;height:56vmax;right:-20vmax;top:24vh}
.orb--2 i{background:radial-gradient(circle,rgba(74,44,160,.42),rgba(45,27,105,.18) 46%,transparent 68%);animation-duration:34s;animation-delay:-9s}
.orb--3{width:44vmax;height:44vmax;left:18vw;bottom:-26vmax}
.orb--3 i{background:radial-gradient(circle,rgba(255,0,152,.13),transparent 66%);animation-duration:30s;animation-delay:-17s}
@keyframes orb-drift{from{transform:translate3d(-2.5%,-2%,0) scale(1)}to{transform:translate3d(3%,2.5%,0) scale(1.06)}}
#stage{position:relative;z-index:2}
body[data-world="calm"] .orb i{animation-duration:48s}

/* 5 · Header & Navigation --------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h);display:flex;align-items:center;border-bottom:1px solid transparent;transition:background var(--duration-base),border-color var(--duration-base)}
.site-header.is-scrolled{background:rgba(16,11,32,.78);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--border-subtle)}
@supports not (backdrop-filter:blur(1px)){.site-header.is-scrolled{background:var(--bg-deep)}}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-family:var(--font-heading);font-weight:600;font-size:1.65rem;letter-spacing:.16em;color:#fff;line-height:1;padding:8px 0}
.brand::after{content:"";display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:var(--color-pink);box-shadow:0 0 14px var(--color-pink)}
.main-nav{display:flex;align-items:center;gap:4px}
.main-nav a{white-space:nowrap;position:relative;padding:10px 15px;border-radius:var(--radius-pill);font:500 15.5px/1.2 var(--font-body);color:var(--text-secondary);transition:color var(--duration-fast),background var(--duration-fast)}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.06)}
.main-nav a[aria-current="page"]{color:#fff}
.main-nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--color-pink)}
.main-nav .nav-cta{margin-left:8px;border:1px solid var(--border-accent);background:rgba(255,0,152,.12);color:#fff;font-weight:600}
.main-nav .nav-cta:hover{background:rgba(255,0,152,.26);box-shadow:var(--shadow-pink)}
.main-nav .nav-cta[aria-current="page"]::after{display:none}
.header-tools{display:flex;align-items:center;gap:8px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border:1px solid var(--border-strong);border-radius:var(--radius-pill);background:rgba(16,11,32,.55);color:#fff;font:600 14px/1 var(--font-body);cursor:pointer;transition:border-color var(--duration-fast),background var(--duration-fast)}
.icon-btn:hover{border-color:var(--border-accent);background:rgba(255,0,152,.14)}
.icon-btn svg{width:20px;height:20px;flex:none}
@media(max-width:1180px){.main-nav{display:none}}

.progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:90;transform-origin:0 50%;transform:scaleX(var(--scroll-progress,0));background:linear-gradient(90deg,var(--color-purple),var(--color-pink));box-shadow:0 0 12px rgba(255,0,152,.6);pointer-events:none}

/* 6 · Reiseroute (Rail), Route-Komponente, Weltkarte ------------------------- */
.rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:40;display:none}
@media(min-width:1320px){.rail.has-stops{display:block}}
.rail ol{position:relative;display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:rgba(16,11,32,.6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;width:22px;height:22px}
.rail a::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.28);transition:transform var(--duration-base) var(--ease-standard),background var(--duration-base),box-shadow var(--duration-base)}
.rail a:hover::before{background:#fff}
.rail a.is-active::before{background:var(--color-pink);transform:scale(1.55);box-shadow:0 0 14px var(--color-pink)}
.rail .tip{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);padding:6px 12px;border-radius:var(--radius-pill);background:var(--bg-elevated);border:1px solid var(--border-strong);color:#fff;font:600 13px/1.2 var(--font-body);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--duration-fast),transform var(--duration-fast)}
.rail a:hover .tip,.rail a:focus-visible .tip{opacity:1;transform:translate(0,-50%)}

/* Route: wandernde pinke Linie (der „rote Faden“) */
.route{--track-x:28px;position:relative;counter-reset:stop}
.route::before{content:"";position:absolute;left:calc(var(--track-x) - 1px);top:28px;height:var(--track-h,calc(100% - 56px));width:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 6px,transparent 6px 14px);border-radius:2px}
.route-fill{position:absolute;left:calc(var(--track-x) - 1.5px);top:28px;width:3px;height:calc(var(--track-h,calc(100% - 56px)) * var(--rp,0));background:linear-gradient(180deg,rgba(255,0,152,.25),var(--color-pink));border-radius:3px;box-shadow:0 0 14px rgba(255,0,152,.55)}
.route-fill::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,0,152,.35),0 0 22px 4px var(--color-pink);opacity:var(--rp-dot,0)}
.route-list{position:relative;display:flex;flex-direction:column;gap:28px}
.stop{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:24px;align-items:start}
.stop-node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-strong);font:600 17px/1 var(--font-heading);color:var(--text-muted);transition:border-color var(--duration-slow) var(--ease-standard),color var(--duration-slow),box-shadow var(--duration-slow),background var(--duration-slow)}
.stop.is-lit .stop-node{border-color:var(--color-pink);color:#fff;background:linear-gradient(140deg,#4a1a72,var(--bg-surface));box-shadow:0 0 0 5px rgba(255,0,152,.14),0 0 26px rgba(255,0,152,.4)}
.stop-body{padding:22px 26px 24px}
.stop-body h3{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:8px}
.stop-body p{font-size:16.5px;color:var(--text-secondary)}
.stop-body .eyebrow{margin-bottom:8px}
a.stop-body{display:block;transition:transform var(--duration-base) var(--ease-standard),border-color var(--duration-base),background var(--duration-base)}
a.stop-body:hover{transform:translateX(6px);border-color:var(--border-accent)}
a.stop-body .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:600;color:var(--text-accent)}
a.stop-body .go span{transition:transform var(--duration-base) var(--ease-standard)}
a.stop-body:hover .go span{transform:translateX(5px)}
/* Zickzack-Variante */
@media(min-width:900px){
  .route--zigzag{--track-x:50%}
  .route--zigzag .stop{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);gap:0 36px}
  .route--zigzag .stop-node{grid-column:2;grid-row:1}
  .route--zigzag .stop-body{grid-row:1}
  .route--zigzag .stop:nth-child(odd) .stop-body{grid-column:1;text-align:right}
  .route--zigzag .stop:nth-child(odd) .stop-body p{margin-left:auto}
  .route--zigzag .stop:nth-child(even) .stop-body{grid-column:3}
  .route--zigzag .route-list{gap:36px}
  .route--zigzag::before{left:calc(50% - 1px)}
  .route--zigzag .route-fill{left:calc(50% - 1.5px)}
}

/* Weltkarte (Overlay) */
.map{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(10,7,22,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity var(--duration-base),visibility var(--duration-base)}
.map.is-open{opacity:1;visibility:visible}
.map-panel{position:relative;width:min(1120px,100%);max-height:calc(100svh - 40px);overflow:auto;padding:clamp(22px,3vw,40px);transform:translateY(24px) scale(.98);transition:transform var(--duration-slow) var(--ease-standard)}
.map.is-open .map-panel{transform:none}
.map-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:8px}
.map-head h2{font-size:clamp(1.8rem,3vw,2.6rem)}
.map-close{flex:none}
.map-stage{position:relative;aspect-ratio:1000/520;margin-top:8px}
.map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-svg--tall{display:none}
.map-route{fill:none;stroke:var(--color-pink);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 12;opacity:.9}
.map-land{fill:rgba(45,27,105,.32);stroke:rgba(255,255,255,.14);stroke-width:1.2;stroke-dasharray:3 7}
.map-contour{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1}
.map-compass{fill:none;stroke:rgba(255,255,255,.28);stroke-width:1.2}
.map-compass text{fill:var(--text-muted);font:600 12px var(--font-body);letter-spacing:.1em}
.map-traveler{fill:#fff;filter:drop-shadow(0 0 8px var(--color-pink)) drop-shadow(0 0 16px var(--color-pink))}
.map-nodes{position:absolute;inset:0}
.map-node{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);transform:translate(-50%,-50%);display:block;width:58px;height:58px;color:#fff}
.map-node .pin{display:grid;place-items:center;width:58px;height:58px;flex:none;border-radius:50%;background:linear-gradient(140deg,#3a1a6a,var(--bg-surface));border:1px solid var(--border-strong);box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform var(--duration-base) var(--ease-standard),border-color var(--duration-base),box-shadow var(--duration-base)}
.map-node .pin svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Der rote Faden: durchgehende Route über die ganze Startseite, im Stil der
   Weltkarte (gleiche gepunktete pinke Linie), läuft hinter dem Inhalt entlang
   und füllt sich beim Scrollen wie der Strahl in den Ablauf-Listen. Technisch
   in viele kleine Abschnitte (.trail-seg) aufgeteilt statt einer einzigen
   riesigen SVG — günstiger fürs Neuzeichnen beim Scrollen. */
#main{position:relative}
#trail{position:relative}
.trail-seg{position:absolute;left:0;width:100%;pointer-events:none}
.trail-svg{width:100%;height:100%;display:block;overflow:visible}
.trail-track{fill:none;stroke:rgba(255,255,255,.12);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 13}
.trail-fill{fill:none;stroke:var(--color-pink);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9}
.trail-pin{fill:var(--bg-surface);stroke:var(--border-strong);stroke-width:1;opacity:.55;transition:opacity var(--duration-slow) var(--ease-standard)}
.trail-pin.is-lit{fill:#3a1a6a;stroke:var(--color-pink);opacity:1}
.trail-pin-start{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg-surface);border:1px solid var(--border-strong);pointer-events:none}
@media(max-width:760px){.trail-track,.trail-fill{stroke-width:2.5}}
.map-node .name{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:150px;text-align:center;padding:5px 12px;border-radius:var(--radius-pill);background:rgba(16,11,32,.82);border:1px solid var(--border-subtle);font:600 14px/1.25 var(--font-body)}
.map-node:hover .pin,.map-node:focus-visible .pin{transform:scale(1.1);border-color:var(--color-pink);box-shadow:0 0 0 6px rgba(255,0,152,.16),0 0 32px rgba(255,0,152,.45)}
.map-node[aria-current="page"] .pin{border-color:var(--color-pink);box-shadow:0 0 0 6px rgba(255,0,152,.18),0 0 32px rgba(255,0,152,.5)}
.map-node .here{position:absolute;z-index:2;top:-30px;left:50%;transform:translateX(-50%);padding:3px 10px;border-radius:var(--radius-pill);background:var(--color-pink);color:#fff;font:700 12px/1.3 var(--font-body);white-space:nowrap;display:none}
.map-node[aria-current="page"] .here{display:block}
.map-node[aria-current="page"] .pin::after{content:"";position:absolute;width:58px;height:58px;border-radius:50%;border:2px solid var(--color-pink);animation:ping 2.4s var(--ease-standard) infinite}
.map-node .pin{position:relative}
@keyframes ping{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
@media(max-width:760px){
  .map-stage{aspect-ratio:400/640;max-width:420px;margin:36px auto 0}
  .map-svg--wide{display:none}.map-svg--tall{display:block}
  .map-node{left:calc(var(--tx) * 1%);top:calc(var(--ty) * 1%);width:52px;height:52px}
  .map-node .pin{width:52px;height:52px}
  .map-node[aria-current="page"] .pin::after{width:52px;height:52px}
  .map-node .name{top:50%;left:calc(100% + 10px);transform:translateY(-50%);text-align:left;white-space:nowrap}
  .map-node[style*="--tx:74"] .name{left:auto;right:calc(100% + 10px);text-align:right}
  .map-node .here{top:-28px;left:50%}
}

/* 7 · Bausteine ----------------------------------------------------------- */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent-soft)}
.eyebrow::before{content:"";flex:none;width:28px;height:1px;background:var(--color-pink)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:var(--text-secondary)}
.muted{color:var(--text-muted)}
.glass{background:linear-gradient(125deg,var(--glass-start),var(--glass-end)),rgba(26,18,51,.6);border:1px solid var(--border-subtle);border-radius:var(--radius-card);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));box-shadow:var(--shadow-glass)}
@supports not (backdrop-filter:blur(1px)){.glass{background:var(--bg-surface)}}
.pad{padding:clamp(24px,3vw,40px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 28px;border-radius:var(--radius-button);border:1px solid transparent;font:700 19px/1.2 var(--font-body);text-align:center;cursor:pointer;transition:background var(--duration-base),transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base),border-color var(--duration-base)}
.btn span[aria-hidden]{transition:transform var(--duration-base) var(--ease-standard)}
.btn:hover span[aria-hidden]{transform:translateX(4px)}
.btn-primary{background:var(--action-primary);color:#fff}
.btn-primary:hover{background:var(--action-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-pink)}
.btn-primary:active{background:var(--action-primary-active);transform:none}
.btn-secondary{background:rgba(16,11,32,.55);border-color:var(--border-strong);color:#fff;font-weight:600;font-size:18px}
.btn-secondary:hover{border-color:var(--border-accent);background:rgba(255,0,152,.12);transform:translateY(-2px)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.text-link{color:var(--text-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-weight:600}
.text-link:hover{color:#fff}
.note{position:absolute;padding:12px 18px;border-radius:var(--radius-pill);font:600 15.5px/1.35 var(--font-body);color:#fff;max-width:290px;text-align:center}
.feather{-webkit-mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 68% 70% at 50% 50%,#000 52%,transparent 100%)}
.feather-soft{-webkit-mask-image:radial-gradient(closest-side,#000 66%,transparent 100%);mask-image:radial-gradient(closest-side,#000 66%,transparent 100%)}
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.center{text-align:center}.center p{margin-inline:auto}.center .eyebrow{justify-content:center}
.stack>*+*{margin-top:20px}
.lead-panel{display:inline-block;padding:18px 26px;border-radius:16px}
.route-narrow{max-width:940px;margin-inline:auto}
.ornament{color:var(--text-accent)}

/* 8 · Sektionen ---------------------------------------------------------- */
/* Hero: Eintauchen. Der Bereich ist höher als der Bildschirm; die Bühne bleibt stehen,
   --dp (0…1, aus der Scrollposition) zoomt die Szene hinein und blendet den Text aus. */
.hero{position:relative;overflow-x:clip}
.js .hero--dive{height:230vh}
.dive-sticky{position:sticky;top:0;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--header-h) + 12px) 0 20px;overflow:hidden}
.hero-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,56px);align-items:center}
.hero-copy .eyebrow{margin-bottom:22px}
.hero-copy h1{text-shadow:0 2px 24px rgba(16,11,32,.85)}
.hero-copy h1 .line{display:block}
.hero-copy .lead{margin-top:24px;max-width:46ch}
.hero-hint{margin-top:24px;font-size:15.5px;color:var(--text-secondary);text-shadow:0 1px 16px rgba(16,11,32,.9)}
.dv-copy{opacity:calc(1 - var(--dp,0) * var(--df,3.4));transform:translate3d(calc(var(--dp,0) * -80px),calc(var(--dp,0) * -30px),0)}
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;margin-right:calc(var(--page-gutter) * -.55)}
.hero-scene{position:relative;width:100%;aspect-ratio:3/2}
.dv{position:absolute;will-change:transform,opacity;
  translate:calc(var(--mx,0) * var(--d,.3) * -30px) calc(var(--my,0) * var(--d,.3) * -20px)}
.dv-figure{--d:.4;inset:0;transform-origin:44% 60%;transform:scale(calc(1 + var(--dp,0) * var(--dz,1.8)));opacity:calc(1 - (var(--dp,0) - .66) * 3.2)}
.dv-figure img{width:100%;height:100%;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 50% 52%,#000 46%,transparent 100%);mask-image:radial-gradient(ellipse 58% 62% at 50% 52%,#000 46%,transparent 100%)}
.dv-glow{--d:.15;inset:2% -4% -8% -4%;border-radius:50%;background:radial-gradient(circle,rgba(255,0,152,.24),rgba(255,0,152,.06) 50%,transparent 70%);transform:scale(calc(1 + var(--dp,0) * 2.4));opacity:calc(1 - (var(--dp,0) - .55) * 2.2)}
.dv-ring{--d:.2;left:50%;top:52%;width:66%;aspect-ratio:1;margin:-33% 0 0 -33%;border-radius:50%;border:1px dashed rgba(255,0,152,.55);
  transform:scale(calc(var(--s0,.7) + var(--dp,0) * var(--k,5) * var(--zr,1)));opacity:calc(.55 - var(--dp,0) * .7)}
.dv-spark{--d:1.2;font-size:clamp(16px,1.7vw,28px);line-height:1;color:var(--text-accent);text-shadow:0 0 14px rgba(255,0,152,.9);
  transform:translate3d(calc(var(--dp,0) * var(--tx,300px)),calc(var(--dp,0) * var(--ty,-200px)),0) scale(calc(1 + var(--dp,0) * 4));opacity:calc(1 - var(--dp,0) * 1.4)}
.dv-spark i{display:block;font-style:normal}
.dv-note{--d:.7;position:relative;opacity:calc(1 - var(--dp,0) * var(--df,3.4))}
.dv-note .note{position:relative;padding:12px 22px;max-width:none;white-space:nowrap}
.float{animation:floaty 7s ease-in-out infinite alternate}
.dv-figure .float{animation-duration:9s}
@keyframes floaty{from{translate:0 0}to{translate:0 -12px}}
.js .dv,.js .dv-note,.js .dv-copy{animation:layer-in 1100ms var(--ease-standard) backwards}
@keyframes layer-in{from{opacity:0}}
.scroll-hint{position:absolute;left:50%;bottom:22px;z-index:4;transform:translateX(-50%);display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:10px 20px 12px;border-radius:var(--radius-pill);font:600 12px/1.3 var(--font-body);letter-spacing:.16em;color:var(--text-accent-soft);opacity:calc(1 - var(--dp,0) * 12)}
.scroll-hint i{display:block;width:1px;height:22px;background:linear-gradient(180deg,var(--color-pink),transparent);animation:hint 2.2s ease-in-out infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(.2);opacity:.4}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.2);opacity:.4}}
@media(max-width:900px){
  .js .hero--dive{height:auto}
  .dive-sticky{position:relative;height:auto;min-height:0;overflow:visible;justify-content:flex-start;padding:calc(var(--header-h) + 4px) 0 84px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .hero-visual{order:-1;margin-right:0;gap:14px}
  .hero-scene{width:min(112%,560px);margin-inline:-6%}
  .dv-spark:nth-of-type(n+3){display:none}
  .scroll-hint{bottom:24px}
}

/* Laufband */
.marquee{position:relative;z-index:3;overflow:hidden;padding:20px 0;background:rgba(16,11,32,.9);border-block:1px solid var(--border-subtle)}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee-group{display:flex;flex:none;align-items:center;gap:36px;padding-right:36px;font:600 15px/1 var(--font-body);letter-spacing:.22em;color:var(--text-primary);white-space:nowrap}
.marquee-group .ornament{font-size:14px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Split-Layouts */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.split--55-45{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
.split--45-55{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.split-visual img{width:100%}
@media(max-width:900px){.split,.split--55-45,.split--45-55{grid-template-columns:minmax(0,1fr)}.split-visual{order:-1}}

/* Wegweiser (Sektion 2) */
.weg-head{margin-bottom:clamp(40px,5vw,72px)}
.weg-head h2{margin:16px 0 26px}
.weg-head .glass{max-width:560px}

/* Guides */
.section-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{margin:16px 0 18px}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px);align-items:start}
.guide{display:flex;flex-direction:column;padding:16px 16px 26px;transition:transform var(--duration-slow) var(--ease-standard),border-color var(--duration-base)}
.guide:hover{transform:translateY(-6px);border-color:var(--border-accent)}
@media(min-width:1000px){.guide:nth-child(2){margin-top:56px}.guide:nth-child(3){margin-top:112px}}
.guide-cover{position:relative;aspect-ratio:1;overflow:hidden;border-radius:16px;background:var(--bg-deep)}
.guide-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-standard)}
.guide:hover .guide-cover img{transform:scale(1.05) rotate(-.6deg)}
.guide-body{padding:22px 10px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.guide-body h3{font-size:clamp(1.45rem,1.9vw,1.8rem)}
.guide-buy{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:20px}
.price{font:600 2rem/1 var(--font-heading);color:#fff;letter-spacing:-.02em}
.hint{margin-top:clamp(56px,6vw,96px);padding:20px 26px;max-width:820px;color:var(--text-muted);font-size:15.5px;border-left:3px solid var(--color-pink);border-radius:0 var(--radius-small) var(--radius-small) 0;background:rgba(16,11,32,.6)}
@media(max-width:999px){.guides{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}.hint{margin-top:40px}}

/* Ablauf (sticky Intro + Route) */
.flow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.flow-intro{position:sticky;top:calc(var(--header-h) + 40px)}
.flow-intro h2{margin:16px 0 22px}
@media(max-width:900px){.flow{grid-template-columns:minmax(0,1fr)}.flow-intro{position:static}}

/* Bildkompositionen */
.figure-glow{position:relative}
.figure-glow::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(circle,rgba(255,0,152,.22),transparent 68%);z-index:-1}
.about-photo{position:relative;max-width:520px;margin-inline:auto}
.about-photo .note{left:50%;bottom:2%;transform:translateX(-50%);width:max-content;max-width:92%}
.ring{position:absolute;inset:3%;border-radius:50%;border:1px dashed rgba(255,0,152,.45);animation:spin 60s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.web-visual{position:relative;margin-right:-4vw}
.web-visual .web-a{width:100%}
.web-visual .web-b{position:absolute;right:-4%;bottom:-8%;width:52%;filter:drop-shadow(0 20px 36px rgba(255,0,152,.25))}
@media(max-width:900px){.web-visual .web-b{display:none}}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 40px)}
.faq-intro h2{margin:16px 0 0}
.faq-list{padding:8px clamp(20px,3vw,36px)}
.faq-list details{border-bottom:1px solid var(--border-subtle)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1.4vw,1.2rem)/1.4 var(--font-body);color:#fff}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:none;width:12px;height:12px;border-right:2px solid var(--text-accent);border-bottom:2px solid var(--text-accent);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--duration-base) var(--ease-standard)}
.faq-list details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-list summary:hover{color:var(--text-accent)}
.faq-list .answer{padding:0 0 24px;color:var(--text-secondary);max-width:60ch}
@media(max-width:900px){.faq{grid-template-columns:minmax(0,1fr)}.faq-intro{position:static}}

/* Selbstcheck & Newsletter */
.signup{position:relative;overflow:hidden;border-color:var(--border-accent);background:linear-gradient(125deg,rgba(255,0,152,.14),rgba(45,27,105,.35) 60%,rgba(255,255,255,.03)),rgba(26,18,51,.7);border-radius:var(--radius-large)}
.signup::before{content:"";position:absolute;right:-12%;top:-40%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,0,152,.25),transparent 65%);pointer-events:none}
.signup-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4.5vw,64px)}
.signup h2{margin:16px 0 22px}
.signup-form{padding:clamp(24px,2.6vw,36px);background:rgba(16,11,32,.66);border:1px solid var(--border-strong);border-radius:var(--radius-card)}
.signup-form h3{font-size:clamp(1.5rem,2vw,1.85rem);margin-bottom:12px}
.signup-form .btn{margin-top:24px;width:100%}
.signup-form .fine{margin-top:16px;font-size:14.5px;color:var(--text-muted)}
@media(max-width:900px){.signup-grid{grid-template-columns:minmax(0,1fr)}}

/* Seiten-Kopf (Unterseiten) */
.page-hero{position:relative;padding:calc(var(--header-h) + clamp(40px,7vw,96px)) 0 clamp(24px,4vw,48px)}
.page-hero h1{margin:18px 0 22px;font-size:clamp(2.4rem,5vw,4.4rem)}
.page-hero .lead{max-width:52ch}
.page-hero .glass{max-width:640px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.tabs a{padding:10px 20px;border-radius:var(--radius-pill);border:1px solid var(--border-strong);background:rgba(16,11,32,.55);font:600 15.5px/1.2 var(--font-body);color:var(--text-secondary);transition:border-color var(--duration-fast),background var(--duration-fast),color var(--duration-fast)}
.tabs a:hover{border-color:var(--border-accent);color:#fff}
.tabs a[aria-current="page"]{background:rgba(255,0,152,.16);border-color:var(--border-accent);color:#fff}

/* Große Guide-Zeilen (Shop) */
.shop-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(20px,2.4vw,32px)}
.shop-row+.shop-row{margin-top:clamp(28px,3.4vw,48px)}
.shop-row:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.shop-row:nth-child(even) .shop-cover{order:2}
.shop-cover{border-radius:18px;overflow:hidden;background:var(--bg-deep)}
.shop-cover img{width:100%;aspect-ratio:1;object-fit:cover}
.shop-info h2{font-size:clamp(1.9rem,3vw,2.7rem);margin:14px 0 14px}
.shop-info .buy{display:flex;align-items:center;flex-wrap:wrap;gap:20px 28px;margin-top:26px}
.shop-info .price{font-size:2.6rem}
@media(max-width:860px){.shop-row,.shop-row:nth-child(even){grid-template-columns:minmax(0,1fr)}.shop-row:nth-child(even) .shop-cover{order:0}}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:28px;transition:transform var(--duration-base) var(--ease-standard),border-color var(--duration-base)}
.contact-card:hover{transform:translateY(-4px);border-color:var(--border-accent)}
.contact-card h3{font-size:1.5rem}
.contact-card .go{margin-top:auto;padding-top:12px;font-weight:600;color:var(--text-accent);overflow-wrap:anywhere}
@media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr)}}

/* Rechtliches */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.4rem,2vw,1.8rem);margin:2.2em 0 .6em}
.legal h3{font:600 1.1rem/1.4 var(--font-body);color:#fff;margin:1.6em 0 .4em;letter-spacing:0}
.legal p,.legal li{max-width:none}
.legal ul{list-style:disc;padding-left:1.3em;margin:.6em 0}
.legal a{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.todo-box{margin-bottom:28px;padding:18px 22px;border:1px dashed var(--border-accent);border-radius:var(--radius-small);background:rgba(255,0,152,.08);color:var(--text-primary);font-size:15.5px}

/* 9 · Footer ------------------------------------------------------------- */
.site-footer{position:relative;z-index:3;margin-top:var(--section-space);background:var(--bg-deep);border-top:1px solid var(--border-subtle)}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--color-pink),transparent);opacity:.6}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);padding-block:clamp(48px,6vw,80px) 40px}
.footer-brand .brand{display:inline-block;font-size:2rem}
.footer-brand p{margin-top:16px;color:var(--text-secondary);font-size:16px;max-width:34ch}
.footer-brand .tag{margin-top:12px;font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:var(--text-accent)}
.footer-col h4{margin-bottom:16px;font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent-soft)}
.footer-col li+li{margin-top:8px}
.footer-col a{display:inline-block;padding:3px 0;font-size:16px;color:var(--text-secondary);transition:color var(--duration-fast)}
.footer-col a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--color-pink);text-underline-offset:4px}
.footer-legal{padding:24px 0;border-top:1px solid var(--border-subtle)}
.footer-legal h4{margin-bottom:12px;font:600 12px/1.4 var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--text-accent-soft)}
.footer-legal ul{display:flex;flex-wrap:wrap;gap:6px 26px}
.footer-legal a{display:inline-block;padding:4px 0;font-size:15px;color:var(--text-muted)}
.footer-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.footer-end{padding:20px 0 32px;border-top:1px solid var(--border-subtle);font-size:14.5px;color:var(--text-muted)}
@media(max-width:900px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

/* 10 · Motion / Übergänge ------------------------------------------------ */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 640ms var(--ease-standard) var(--rd,0ms),transform 640ms var(--ease-standard) var(--rd,0ms)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal="left"]{transform:translate3d(-28px,0,0)}
.js [data-reveal="right"]{transform:translate3d(28px,0,0)}
.js [data-reveal].is-in{opacity:1;transform:none}
#stage{transition:opacity 420ms var(--ease-standard),transform 420ms var(--ease-standard),filter 420ms var(--ease-standard)}
html.is-leaving #stage{opacity:0;transform:scale(1.035);filter:blur(4px);pointer-events:none}
html.is-arriving #stage{animation:arrive 760ms var(--ease-standard) backwards}
@keyframes arrive{from{opacity:0;transform:scale(.975) translateY(28px)}}

/* 11 · Reduced Motion ---------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  [data-parallax]{transform:none!important}
  .dv,.dv-copy,.dv-note{transform:none!important;translate:none!important;opacity:1!important}
  .dv-glow,.dv-ring{opacity:.5!important}
  .js .hero--dive{height:auto}
  .dive-sticky{position:relative;height:auto;overflow:visible;padding-bottom:84px}
  .marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-group[aria-hidden]{display:none}
  .map-traveler{display:none}
  .route-fill{height:var(--track-h,calc(100% - 56px))}
  .stop .stop-node{border-color:var(--color-pink);color:#fff}
  .ring{animation:none}
}

/* 12 · Unterseiten-Ergänzungen ------------------------------------------ */
.hero-split{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:clamp(28px,5vw,80px);align-items:center}
.hero-split .visual{position:relative}
@media(max-width:900px){.hero-split{grid-template-columns:minmax(0,1fr)}.hero-split .visual{order:-1}}
.cover-fan{position:relative;aspect-ratio:1.2;max-width:620px;margin-inline:auto}
.cover-fan .fan-item{position:absolute;width:50%}
.cover-fan img{width:100%;border-radius:18px;filter:drop-shadow(0 22px 40px rgba(255,0,152,.25)) drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.cover-fan .c1{left:0;top:16%}.cover-fan .c1 img{transform:rotate(-9deg)}
.cover-fan .c2{left:25%;top:0;width:54%;z-index:2}.cover-fan .c2 img{transform:rotate(2deg)}
.cover-fan .c3{right:0;top:20%}.cover-fan .c3 img{transform:rotate(9deg)}
.closing{position:relative;text-align:center;padding:clamp(36px,5vw,72px) clamp(22px,4vw,64px);border-radius:var(--radius-large);border-color:var(--border-accent);background:linear-gradient(125deg,rgba(255,0,152,.14),rgba(45,27,105,.35) 60%,rgba(255,255,255,.03)),rgba(26,18,51,.7)}
.closing h2{margin:14px auto 20px;max-width:18ch}
.closing p{margin-inline:auto}
.closing .btn-row{justify-content:center}
.audience{color:var(--text-muted);font-size:15.5px}

/* 13 · Pakete (Webdesign) & Checklisten ---------------------------------- */
.pack{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(20px,3vw,44px);padding:clamp(20px,2.4vw,32px);align-items:start}
.pack+.pack{margin-top:clamp(24px,3vw,36px)}
.pack--main{grid-template-columns:minmax(0,340px) minmax(0,1fr);border-color:var(--border-accent)}
.pack-media{border-radius:16px;overflow:hidden;background:var(--bg-deep)}
.pack-media img{width:100%;aspect-ratio:1;object-fit:cover}
.pack-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 28px;margin:10px 0 14px}
.pack-head h3{font-size:clamp(1.4rem,2vw,1.85rem);max-width:30ch}
.pack .price{font-size:clamp(1.7rem,2.4vw,2.2rem);white-space:nowrap}
.pack .stack p{max-width:60ch}
.more{margin-top:20px;border-top:1px solid var(--border-subtle)}
.more summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;font:600 16.5px/1.4 var(--font-body);color:var(--text-accent)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";flex:none;width:11px;height:11px;border-right:2px solid var(--text-accent);border-bottom:2px solid var(--text-accent);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--duration-base) var(--ease-standard)}
.more[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.more summary:hover{color:#fff}
.more .more-body{padding-bottom:6px}
.more .more-body>*+*{margin-top:14px}
.more h4{font:600 13px/1.4 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-primary)}
.checklist{display:grid;gap:10px}
.checklist li{position:relative;padding-left:30px;font-size:16.5px;line-height:1.55;color:var(--text-secondary)}
.checklist li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--color-pink);border-bottom:2px solid var(--color-pink);transform:rotate(-45deg) translateY(-2px)}
.pack-note{font-size:15.5px;color:var(--text-muted);max-width:60ch}
.pack-buy{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
@media(max-width:860px){.pack,.pack--main{grid-template-columns:minmax(0,1fr)}.pack-media{max-width:380px}}

/* 14 · Fließtext ohne Box (nur leichter Schatten für Lesbarkeit auf der Welt) */
.plain{max-width:62ch}
.plain,.lead,.section-head p,.weg-head p{text-shadow:0 1px 16px rgba(16,11,32,.9),0 0 4px rgba(16,11,32,.55)}
.plain p{color:var(--text-secondary);font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.75}
.plain h3{text-shadow:none}
.hero-split .plain,.split .plain{max-width:56ch}
.center .plain,.center .lead{margin-inline:auto}

/* Echtes Foto als Karte (ohne weiche Maske, z. B. Querformat) */
.photo-card{margin:0 0 18px;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-subtle);box-shadow:var(--shadow-card)}
.photo-card img{width:100%;height:auto;display:block}

/* Ratgeber-Artikel */
.article{max-width:74ch;margin-inline:auto}
.article .lead{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--text-primary);line-height:1.7}
.article h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin:2em 0 .6em}
.article h3{font:600 1.15rem/1.4 var(--font-body);color:#fff;margin:1.6em 0 .4em}
.article p,.article li{color:var(--text-secondary);font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.8;max-width:none}
.article p+p{margin-top:1em}
.article ul{list-style:none;padding:0;margin:1em 0;display:grid;gap:.55em}
.article ul li{position:relative;padding-left:1.6em}
.article ul li::before{content:"";position:absolute;left:.2em;top:.75em;width:8px;height:8px;border-radius:50%;background:var(--color-pink)}
.article a:not(.btn){color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}
.article strong{color:#fff}
.article .example{margin:1.2em 0;padding:18px 22px;border-left:3px solid var(--color-pink);border-radius:0 var(--radius-small) var(--radius-small) 0;background:rgba(255,0,152,.08);font-family:var(--font-heading);font-style:italic;font-size:1.2rem;color:#fff}
.article .meta{font-size:14px;color:var(--text-muted);margin-top:10px}
.article-cta{margin:2.4em 0 0;padding:clamp(22px,3vw,34px);border-radius:var(--radius-card);border:1px solid var(--border-accent);background:linear-gradient(125deg,rgba(255,0,152,.14),rgba(45,27,105,.35) 60%,rgba(255,255,255,.03)),rgba(26,18,51,.7)}
.article-cta h3{margin-top:0;font-family:var(--font-heading);font-weight:500;font-size:1.5rem}
.article-cta .btn-row{margin-top:18px}
.article-list{display:grid;gap:18px;max-width:900px}
.article-card{display:block;padding:clamp(22px,3vw,32px);transition:transform var(--duration-base) var(--ease-standard),border-color var(--duration-base)}
.article-card:hover{transform:translateY(-3px);border-color:var(--border-accent)}
.article-card h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin:10px 0 10px}
.article-card p{color:var(--text-secondary)}
.article-card .go{display:inline-flex;gap:8px;margin-top:14px;font-weight:600;color:var(--text-accent)}

/* Ratgeber v2: Kopf mit Motiv, Inhaltsverzeichnis, nummerierte Schritte */
.article-hero .hero-split{align-items:center}
.article-hero h1{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.article-hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.article-hero .chip{font-size:14px;color:var(--text-secondary);padding:7px 14px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:rgba(255,255,255,.04)}
.article-hero .visual img{max-width:620px;margin-inline:auto}
.article-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;max-width:1160px;margin-inline:auto}
.toc{position:sticky;top:calc(var(--header-h) + 24px);padding:22px 22px 24px}
.toc .eyebrow{margin-bottom:6px}
.toc ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:4px}
.toc a{display:flex;gap:10px;padding:6px 8px;border-radius:10px;color:var(--text-secondary);font-size:14.5px;line-height:1.35;text-decoration:none;transition:background var(--duration-fast),color var(--duration-fast)}
.toc a span{color:var(--text-accent);font-family:var(--font-heading);font-style:italic;min-width:1.7em}
.toc a:hover{color:#fff;background:rgba(255,255,255,.06)}
.toc-mobile{display:none}
@media(max-width:960px){
  .article-layout{grid-template-columns:1fr}
  .toc{display:none}
  .toc-mobile{display:block;margin-bottom:22px}
  .toc-mobile summary{cursor:pointer;padding:16px 20px;font-weight:600;color:#fff;list-style:none}
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile ol{padding:0 20px 18px}
}
.article.article--v2{max-width:none;margin:0}
.article .step{position:relative;margin-top:2.6em;padding-top:2.2em;border-top:1px solid var(--border-subtle);scroll-margin-top:calc(var(--header-h) + 24px)}
.article .step:first-of-type{margin-top:2em}
.article .step-num{display:block;font-family:var(--font-heading);font-style:italic;font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;color:var(--text-accent);margin-bottom:.2em}
.article .step h2{margin-top:0}
.article [id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.article figure{margin:1.8em 0}
.article figure img{width:100%;max-width:560px;margin-inline:auto;display:block;-webkit-mask-image:radial-gradient(ellipse 66% 68% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 66% 68% at 50% 52%,#000 55%,transparent 100%)}
.article ul.dont li::before{content:"✕";width:auto;height:auto;background:none;border-radius:0;top:0;left:0;color:var(--text-accent);font-weight:700}
.article ol.route-chips{list-style:none;padding:0;margin:1.2em 0;display:flex;flex-wrap:wrap;gap:10px;counter-reset:rc}
.article ol.route-chips li{counter-increment:rc;padding:9px 16px 9px 12px;border-radius:var(--radius-pill);border:1px solid var(--border-accent);background:rgba(255,0,152,.08);color:#fff;font-size:15px;display:flex;align-items:center;gap:8px}
.article ol.route-chips li::before{content:counter(rc);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--color-pink);color:#fff;font-size:12px;font-weight:700}
.article .todo-box{margin:1.2em 0;padding:16px 20px;border-radius:var(--radius-small);background:rgba(255,255,255,.04);border:1px solid var(--border-subtle)}
.article .todo-box p{margin:0}
.article-list.v2{max-width:1100px;gap:26px}
.article-card.v2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);align-items:center;padding:clamp(16px,2.4vw,28px)}
.article-card.v2 img{width:100%;-webkit-mask-image:radial-gradient(ellipse 66% 68% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 66% 68% at 50% 52%,#000 55%,transparent 100%)}
@media(max-width:760px){.article-card.v2{grid-template-columns:1fr}}
/* Link-Seite für Instagram: kompakte Karten mit kleinem Bild, auch am Handy nebeneinander */
.link-list.article-list.v2{max-width:760px;gap:16px}
.link-list .article-card.v2{grid-template-columns:120px minmax(0,1fr);gap:20px;padding:16px 20px}
.link-list .article-card.v2 img{aspect-ratio:1;object-fit:cover;border-radius:16px;-webkit-mask-image:none;mask-image:none}
.link-list .article-card.v2 h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:.15em 0 .25em}
.link-list .article-card.v2 p:not(.eyebrow){font-size:.95rem;margin:0 0 .4em}
@media(max-width:520px){.link-list .article-card.v2{grid-template-columns:84px minmax(0,1fr);gap:14px;padding:14px}.link-list .article-card.v2 p:not(.eyebrow){display:none}}
/* Referenz auf der Webdesign-Seite: Computer-Screenshot mit Handy davor */
.ref{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.ref-visual{position:relative;padding:0 8% 10% 0}
.ref--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.ref--flip .ref-visual{order:2}
@media(max-width:900px){.ref--flip .ref-visual{order:0}}
.ref-desktop{margin:0}
.ref-mobile{position:absolute;right:0;bottom:0;width:30%;margin:0;border-radius:22px;overflow:hidden;border:6px solid #0d0a1a;box-shadow:var(--shadow-card)}
.ref-mobile img{width:100%;height:auto;display:block}
.ref-quote{margin:1.4em 0;padding:22px 26px;border-radius:var(--radius-card)}
.ref-quote p{font-family:"Playfair Display",serif;font-style:italic;font-size:clamp(1.3rem,2.2vw,1.6rem);color:#fff;margin:0}
.ref-quote footer{margin-top:.5em;font-size:.95rem;color:var(--pink-soft,#FF8BD0)}
@media(max-width:900px){.ref{grid-template-columns:1fr}}