/* Urlaubsplan · Landingpage
   Tokens mirror the Figma variables (collections "Urlaubsplan" and "Landing") and the LP/ text styles.
   Breakpoints follow the three Figma frames: phone 393, iPad Pro portrait 1024, desktop 1440. */

@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/bricolage-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;src:url("fonts/bricolage-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/figtree-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/figtree-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plexmono-500-latin.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/caveat-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/caveat-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F3EEE4;--paper-strong:#E6DFD0;--surface:#FFFFFF;--line:#D5DDDA;
  --ink:#16211F;--ink-2:#4A5A56;--ink-3:#5D6965;--accent:#0F5C63;--accent-ink:#FFFFFF;
  --ok:#1D7456;--ok-soft:#D4EDE2;--wish:#E3A23B;--wish-soft:#F7E3BF;--tight:#895B17;--bad:#B13528;--bad-soft:#F6D9D5;
  --sticky:#F9DC7A;--sticky-ink:#2A2A2A;--chat:#DCF3D6;--note:#FDF6EA;
  --hair:rgba(22,33,31,.12);--hair-soft:rgba(22,33,31,.08);
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --pad:20px;--nav-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-card:0 14px 36px -6px rgba(22,33,31,.18);
  --shadow-float:0 20px 50px -8px rgba(22,33,31,.22);
  /* fluid type: linear from 393px (phone) to 1440px (desktop) */
  --t-display:clamp(48px,6.11vw + 24px,112px);
  --t-cta:clamp(56px,6.11vw + 32px,120px);
  --t-stat:clamp(64px,4.39vw + 46.7px,110px);
  --t-h2:clamp(36px,1.91vw + 28.5px,56px);
  --t-h3:clamp(30px,.96vw + 26.2px,40px);
  --t-h4:clamp(20px,.38vw + 18.5px,24px);
  --t-time:clamp(28px,1.53vw + 22px,44px);
  --t-lead:clamp(16px,.38vw + 14.5px,20px);
  --t-intro:clamp(16px,.19vw + 15.2px,18px);
  --t-cell:clamp(24px,.96vw + 20.2px,34px);
}
@media (min-width:600px){:root{--pad:40px;--nav-h:72px}}
@media (min-width:900px){:root{--pad:64px;--nav-h:80px}}
@media (min-width:1280px){:root{--nav-h:88px}}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
button{font:inherit;color:inherit}
.pre{white-space:pre-line}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px;text-decoration:none;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto}
:focus-visible{outline:3px solid rgba(15,92,99,.45);outline-offset:3px;border-radius:6px}

.wrap{width:min(1200px,100% - 2*var(--pad));margin-inline:auto}
.wrap-wide{width:min(1260px,100% - 2*min(var(--pad),40px));margin-inline:auto}

/* ---------- Type ---------- */
.display{font:800 var(--t-display)/.96 var(--f-display);letter-spacing:-.03em}
.h2{font:800 var(--t-h2)/1.02 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.h3{font:700 var(--t-h3)/1.05 var(--f-display);letter-spacing:-.015em}
.eyebrow{font:500 13px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.eyebrow-wish{color:var(--tight)}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-2)}
.intro{font-size:var(--t-intro);line-height:1.55;color:var(--ink-2)}
.hand{font:700 clamp(26px,.76vw + 23px,34px)/1.05 var(--f-hand);color:var(--bad)}
.hand-tight{color:var(--tight)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:12px;border:1px solid transparent;font:600 17px/1 var(--f-body);cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--wish);color:var(--ink)}
.btn-primary:hover{box-shadow:0 10px 24px -10px rgba(137,91,23,.6)}
.btn-secondary{background:transparent;border-color:var(--ink)}
.btn-secondary:hover{background:rgba(22,33,31,.04)}
.btn-dark{background:var(--ink);color:#fff}
.btn-m{height:44px;padding:0 20px;border-radius:10px;font-size:15px}
.actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
@media (max-width:599px){.actions{flex-direction:column;align-items:stretch}.actions .btn{height:52px;width:100%}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(243,238,228,.86);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .3s var(--ease)}
.nav.is-scrolled{box-shadow:0 1px 0 var(--hair),0 10px 30px -20px rgba(22,33,31,.35)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 clamp(18px,.29vw + 16.9px,21px)/1 var(--f-display)}
.logo{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--accent);color:#fff}
.logo svg{width:18px;height:18px}
.nav-links{display:none}
.nav-links a{text-decoration:none;font:500 15px/1 var(--f-body);color:var(--ink-2);transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--paper-strong)}
.lang button{border:0;background:transparent;height:30px;min-width:40px;padding:0 10px;border-radius:7px;font:500 13px/1 var(--f-body);color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.lang button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(22,33,31,.14)}
.nav-cta{display:none}
.menu-toggle{display:grid;place-items:center;width:40px;height:40px;border:0;background:transparent;border-radius:10px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:22px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-7px}.bars::after{top:7px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{transform:translateY(-7px) rotate(-45deg)}
.nav.is-open .nav-links{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:var(--nav-h);padding:8px var(--pad) 20px;background:var(--paper);box-shadow:0 18px 30px -20px rgba(22,33,31,.4);animation:drop .25s var(--ease)}
.nav.is-open .nav-links a{padding:14px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--hair)}
@media (min-width:600px){.nav-cta{display:inline-flex}.menu-toggle{display:none}.nav.is-open .nav-links{display:none}}
@media (min-width:1100px){.nav-links{display:flex;gap:40px}.nav-actions{gap:16px}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:clamp(28px,2vw + 20px,40px)}
.hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
.status-key{display:flex;flex-wrap:wrap;justify-content:center;gap:10px clamp(14px,1.7vw,32px);font:500 clamp(13px,.19vw + 12.2px,15px)/1 var(--f-body);color:var(--ink-2)}
.status-key li{display:flex;align-items:center;gap:clamp(6px,.4vw + 4.5px,10px)}
.cell{display:grid;place-items:center;font:500 var(--t-cell)/1 var(--f-mono);border-radius:12px}
.cell-key{width:clamp(24px,.76vw + 21px,32px);height:clamp(24px,.76vw + 21px,32px);border-radius:6px;font-size:clamp(13px,.38vw + 11.5px,17px)}
.met{background:var(--ok-soft);color:var(--ok)}
.tight{background:var(--wish-soft);color:var(--tight)}
.below{background:var(--bad);color:#fff}
.solid.met{background:var(--ok);color:#fff}
.solid.tight{background:var(--wish);color:var(--ink)}
#hero-title{margin-top:clamp(20px,1.9vw + 12px,36px);max-width:12.5em}
.hero .lead{max-width:800px;margin-top:clamp(16px,.8vw + 13px,24px)}
.hero .actions{margin-top:clamp(24px,1.1vw + 20px,36px)}
@media (max-width:599px){.hero .actions{align-self:stretch}}

.hero-stage{position:relative;margin-top:clamp(120px,3vw + 108px,140px);padding-bottom:clamp(24px,4vw,56px)}
.shot{position:relative;z-index:1;border-radius:clamp(12px,.4vw + 10px,16px);background:var(--surface);box-shadow:0 30px 80px -24px rgba(22,33,31,.28),0 0 0 1px var(--hair-soft);overflow:hidden}
.browser{display:flex;align-items:center;gap:8px;height:clamp(30px,1.7vw + 23px,48px);padding:0 clamp(10px,1vw,16px);background:#ECEFEE;border-bottom:1px solid var(--hair-soft)}
.browser i{width:clamp(8px,.4vw + 6.5px,12px);aspect-ratio:1;border-radius:50%;background:#E25A4F}
.browser i:nth-child(2){background:#E9B13E}.browser i:nth-child(3){background:#5DBB57}
.url{margin-left:auto;margin-right:auto;width:min(44%,640px);height:clamp(18px,1vw + 14px,30px);display:flex;align-items:center;justify-content:center;border-radius:8px;background:#fff;font:400 clamp(9px,.3vw + 8px,13px)/1 var(--f-body);color:var(--ink-3);white-space:nowrap;overflow:hidden}
.shot-view{position:relative;height:clamp(330px,26vw + 230px,620px);overflow:hidden}
.shot-view::after{content:"";position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(rgba(243,238,228,0),var(--paper));pointer-events:none}
.shot-img{position:relative;width:max(100%,640px)}
.marker{position:absolute;left:9.2%;top:35%;width:19.1%;height:5.2%;overflow:visible;transform:rotate(-2deg)}
.marker path{fill:none;stroke:var(--bad);stroke-width:6;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}

.chat{position:absolute;z-index:2;left:-34px;top:-112px;width:390px;padding:20px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-card);transform-origin:top left;transform:rotate(-5deg) scale(var(--s,1))}
.chat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.chat-head strong{display:block;font:600 16px/1.25 var(--f-body)}
.chat-head small{font-size:14px;color:var(--ink-3)}
.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font:500 12px/1 var(--f-mono)}
.chat-msg{padding:10px 14px;border-radius:14px;background:var(--chat);font-size:15px;line-height:1.45}
.sticky{position:absolute;z-index:2;right:-50px;top:-170px;width:210px;height:200px;padding:22px 20px;background:var(--sticky);color:var(--sticky-ink);font:700 28px/1.05 var(--f-hand);box-shadow:0 14px 36px -6px rgba(22,33,31,.25);transform-origin:top right;transform:rotate(8deg) scale(var(--s,1))}
.hand-system{position:absolute;z-index:2;right:200px;top:-56px;transform:rotate(-3deg);font-size:28px}
.callout{position:absolute;z-index:3;right:-70px;top:280px;display:flex;gap:12px;width:320px;padding:16px 20px 18px 18px;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-card),0 0 0 1px var(--hair-soft)}
.callout strong{font:600 16px/1.3 var(--f-body)}
.callout p{font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:4px}
.dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%}
.dot.met{background:var(--ok)}.dot.tight{background:var(--wish)}.dot.below{background:var(--bad)}
.note{position:absolute;z-index:3;left:-50px;top:470px;padding:12px 18px;border-radius:4px;background:var(--note);box-shadow:0 10px 24px -4px rgba(22,33,31,.2);font:700 26px/1.05 var(--f-hand);color:var(--bad);transform:rotate(-3deg)}
.note-arrow{position:absolute;left:150px;top:-74px;width:44px;height:64px;overflow:visible}
.note-arrow path{fill:none;stroke:var(--bad);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}

@media (max-width:1379px){
  .chat{--s:.85;left:-16px;top:-90px}
  .sticky{--s:.72;right:-16px;top:-128px}
  .hand-system{right:150px;top:-44px;font-size:26px}
  .callout{right:-16px;top:250px}
  .note{left:-16px;top:330px;font-size:23px}
}
@media (max-width:899px){
  .hero-stage{margin-top:120px}
  .hand-system{display:none}
  .callout{position:relative;right:auto;top:auto;width:auto;margin-top:16px}
  .note{position:relative;left:auto;top:auto;display:inline-block;margin:20px 0 0 4px;padding:0;background:none;box-shadow:none;font-size:clamp(24px,1vw + 20px,28px)}
  .note-arrow{display:none}
}
@media (max-width:599px){
  .hero-stage{margin-top:110px}
  .chat{--s:.62;left:-12px;top:-82px}
  .sticky{--s:.46;right:-12px;top:-96px}
  .shot{border-radius:14px}
}

/* ---------- Sections ---------- */
.section{padding-block:clamp(56px,3vw + 44px,96px)}
.section-tight{padding-block:clamp(24px,2vw,40px)}
.band{background:var(--surface);padding-block:clamp(56px,2.7vw + 45px,88px)}

/* Problem / timeline */
.timeline{position:relative;display:grid;gap:28px;margin-top:clamp(36px,1.5vw + 30px,52px)}
.timeline li{position:relative;padding-left:28px}
.timeline::before{content:"";position:absolute;left:5px;top:18px;bottom:60px;width:2px;background:var(--line)}
.t-dot{position:absolute;left:0;top:12px;width:12px;height:12px;border-radius:50%;background:var(--wish)}
.timeline time{display:block;font:500 var(--t-time)/1.2 var(--f-mono)}
.timeline h3{margin-top:6px;font:600 18px/1.3 var(--f-display)}
.timeline p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.timeline .alert .t-dot{background:var(--bad)}
.timeline .alert time{color:var(--bad)}
.band .hand{margin-top:clamp(28px,1.4vw + 22px,44px)}
@media (min-width:700px){
  .timeline{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,50px)}
  .timeline::before{left:0;right:0;top:6px;bottom:auto;width:auto;height:1px}
  .timeline li{padding:36px 0 0}
  .t-dot{top:0;width:13px;height:13px}
  .timeline h3{margin-top:10px;font:600 clamp(18px,.2vw + 16px,20px)/1.3 var(--f-body)}
  .timeline p{font-size:clamp(15px,.2vw + 13px,17px)}
}

/* Drei Farben */
.split-head{display:grid;gap:20px}
@media (min-width:1100px){.split-head{grid-template-columns:1fr 460px;align-items:start;gap:60px}.split-head .intro{padding-top:44px}}
.hd-wrap{position:relative;margin-top:clamp(28px,2vw + 20px,48px)}
.hd{position:relative;z-index:1;border-radius:20px;background:var(--surface);padding:16px 14px 18px}
.hd-grid{--n:5;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.hd-title{grid-column:1/-1;font:600 13px/1.3 var(--f-body);color:var(--ink-2);padding:0 0 10px;white-space:nowrap}
.hd-day{font:500 11px/1 var(--f-mono);color:var(--ink-3);text-align:center;padding:8px 0}
.hd-day.today{color:var(--bad)}
.hd-label{grid-column:1/-1;display:flex;align-items:center;gap:8px;font:500 13px/1 var(--f-body);color:var(--ink-2);padding:10px 0 6px}
.hd-label .sym{color:var(--wish)}
.hd .cell{height:clamp(56px,1.9vw + 49px,76px);border-radius:10px}
.hd-grid .hd-extra{display:none}
@media (min-width:700px){
  .hd{padding:0 24px 24px 0}
  .hd-grid{grid-template-columns:clamp(130px,8vw + 50px,200px) repeat(var(--n),minmax(0,1fr));gap:14px 8px}
  .hd-title{grid-column:1;padding:16px 8px 16px 24px;border-bottom:1px solid var(--line);font-size:14px;white-space:normal;align-self:stretch;display:flex;align-items:center}
  .hd-day{padding:22px 0;border-bottom:1px solid var(--line);font-size:13px;align-self:stretch;display:flex;align-items:center;justify-content:center}
  .hd-label{grid-column:1;padding:0 0 0 24px;font-size:16px}
  .hd .cell{border-radius:12px}
}
@media (min-width:1200px){.hd-grid{--n:10}.hd-grid .hd-extra{display:grid}.hd-grid .hd-day.hd-extra{display:flex}}
.hd-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;display:none}
.hd-lines path{fill:none;stroke-width:2;stroke-dasharray:1 1;stroke-dashoffset:0}
.legend{display:grid;gap:18px;margin-top:24px}
.legend li{display:flex;gap:10px}
.legend .dot{width:12px;height:12px;margin-top:8px}
.legend h3{font:700 var(--t-h4)/1.25 var(--f-display);letter-spacing:-.005em}
.legend p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (min-width:700px){
  .hd-lines{display:block}
  .legend{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
  .legend p{font-size:clamp(15px,.15vw + 13.5px,16px)}
}

/* Live-Vorschau */
.preview{display:grid;gap:clamp(32px,3vw,60px);align-items:center}
.preview .intro{margin-top:20px;max-width:640px}
.bullets{display:flex;flex-direction:column;gap:12px;margin-top:24px;font:500 clamp(15px,.19vw + 14.2px,17px)/1.3 var(--f-body)}
.bullets li{display:flex;align-items:center;gap:10px}
.bullets li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--ok);flex:none}
.preview-shot img{width:100%;border-radius:16px;box-shadow:0 24px 60px -6px rgba(22,33,31,.22)}
@media (max-width:699px){.preview-shot{background:var(--surface);border-radius:18px;padding:16px;box-shadow:0 16px 40px -6px rgba(22,33,31,.14)}.preview-shot img{border-radius:10px;box-shadow:none}}
@media (min-width:700px) and (max-width:1099px){.bullets{flex-direction:row;flex-wrap:wrap;gap:12px 32px}}
@media (min-width:1100px){.preview{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:56px}}

/* Zahlen */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 20px;padding-block:28px;border-block:1px solid var(--hair)}
.stats dt{font:800 var(--t-stat)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stats dd{margin-top:8px;font:500 clamp(14px,.29vw + 12.9px,17px)/1.35 var(--f-body);color:var(--ink-2);max-width:14em}
.stats .accent dt{color:var(--wish)}
@media (min-width:700px){.stats{grid-template-columns:repeat(4,1fr);padding-block:clamp(40px,2vw + 20px,64px)}}

/* Rollen */
.roles{display:grid;gap:clamp(16px,2vw,24px)}
.role{display:grid;gap:24px;align-content:start;padding:clamp(20px,2vw + 12px,40px);border-radius:24px;background:var(--surface);box-shadow:0 0 0 1px var(--hair-soft)}
.role .eyebrow{font-size:12px;letter-spacing:.14em;margin-bottom:12px}
.role-copy p:last-child{margin-top:14px;font-size:clamp(15px,.19vw + 14.2px,17px);line-height:1.5;color:var(--ink-2)}
.role-ui{display:flex;flex-direction:column;gap:12px}
.role-ui img{width:100%;max-width:394px;border-radius:12px}
.role-ui img[src*="overview"]{max-width:100%;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.role-ui img.narrow{max-width:331px}
@media (min-width:900px) and (max-width:1099px){.role{grid-template-columns:minmax(0,1fr) minmax(0,396px);align-items:center;gap:40px}}
@media (min-width:1100px){.roles{grid-template-columns:1fr 1fr}.role-copy{min-height:200px}}

/* Preise */
.pricing-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.pricing-head .intro{max-width:700px;margin-top:clamp(14px,.6vw + 12px,20px)}
.eyebrow-muted{color:var(--ink-3);font-size:12px;letter-spacing:.1em;margin-bottom:0}
.narrow-only{display:none}
.compare{position:relative;margin-top:clamp(28px,1.5vw + 22px,44px);padding:clamp(20px,1.5vw + 14px,36px) clamp(20px,1.6vw + 14px,40px);border-radius:clamp(18px,.6vw + 15px,24px);background:var(--surface);display:grid;gap:clamp(18px,1.4vw,28px)}
.cmp-row{display:grid;grid-template-columns:clamp(150px,10vw + 80px,220px) minmax(0,1fr) clamp(170px,6vw + 110px,240px);align-items:center;gap:20px}
.cmp-label{font:500 16px/1.3 var(--f-body);color:var(--ink-2)}
.cmp-us .cmp-label{font-weight:600;color:var(--ink)}
.cmp-track{position:relative;height:28px;border-radius:8px;background:var(--paper)}
.cmp-bar{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:8px}
.cmp-range{background:rgba(22,33,31,.14)}
.cmp-low{background:rgba(22,33,31,.24)}
.cmp-ours{background:var(--ok)}
.cmp-value{font:500 17px/1.3 var(--f-body);white-space:nowrap}
.cmp-us .cmp-value{color:var(--ok)}
.cmp-note{position:absolute;z-index:2;left:calc(19.3% + 18px);top:14px;padding:10px 16px;border-radius:4px;background:var(--note);box-shadow:0 10px 24px -4px rgba(22,33,31,.2);font:700 clamp(22px,.4vw + 20px,26px)/1.05 var(--f-hand);color:var(--bad);transform:rotate(-3deg);white-space:nowrap}

.plans-wrap{position:relative;margin-top:clamp(36px,2vw + 28px,48px)}
.plans{border-radius:clamp(20px,.4vw + 18px,24px);background:var(--surface);overflow:hidden}
.plans-head,.plan{display:grid;grid-template-columns:minmax(180px,1.15fr) minmax(90px,1fr) minmax(170px,1fr) minmax(140px,1fr) 160px;align-items:center;gap:16px;padding-inline:clamp(28px,1vw + 18px,40px)}
.plans-head{padding-block:26px 14px;font:500 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.plan{min-height:88px;padding-block:14px;border-top:1px solid var(--hair-soft)}
.plan-hi{background:rgba(247,227,191,.55)}
.plan-name{display:flex;align-items:center;gap:12px;font:700 var(--t-h4)/1.2 var(--f-display);letter-spacing:-.005em}
.badge{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;background:var(--wish);font:500 13px/1 var(--f-body);font-style:normal;color:var(--ink);white-space:nowrap}
.plan-loc{font:500 17px/1.3 var(--f-body);color:var(--ink-2)}
.plan-price{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
.plan-price strong{font:800 clamp(36px,1.9vw + 28.5px,56px)/1 var(--f-display);letter-spacing:-.03em;white-space:nowrap}
.plan-price small{font:500 15px/1 var(--f-body);color:var(--ink-2)}
.plan-year{font:500 17px/1.3 var(--f-body);color:var(--ink-2);white-space:nowrap}
.plan-cta .btn{min-width:150px}
.plan-more{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:26px clamp(28px,1vw + 18px,40px);border-top:1px solid var(--hair-soft)}
.plan-more strong{font:600 16px/1.3 var(--f-body)}
.plan-more a{font:500 16px/1.3 var(--f-body);color:var(--accent);text-decoration:none}
.plan-more a:hover{text-decoration:underline}
.plans-sticky{position:absolute;z-index:2;right:-56px;top:-120px;width:210px;height:200px;--s:.78;transform:rotate(7deg) scale(var(--s));font-size:28px}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.chips li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;border-radius:18px;background:var(--surface);font:500 15px/1 var(--f-body)}
.chips li::before{content:"";width:16px;height:16px;background:var(--ok);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.fineprint{max-width:1000px;margin:20px auto 0;text-align:center;font-size:14px;line-height:1.5;color:var(--ink-3)}

@media (min-width:700px){.loc-w{display:none}}
.loc-w{white-space:pre}
@media (max-width:1099px){
  .plans-head,.plan{grid-template-columns:1.3fr .8fr 1.2fr 1.1fr 144px;gap:12px}
  .plan-cta .btn{min-width:0;width:100%}
  .plans-sticky{--s:.62;right:-28px;top:-62px}
  .cmp-label .wide-only{display:none}.cmp-label .narrow-only{display:inline}
  .chips{max-width:640px;margin-inline:auto}
}
@media (max-width:899px){
  .plans{background:none;border-radius:0;overflow:visible;display:grid;gap:12px}
  .plans-head{display:none}
  .plan{grid-template-columns:1fr auto;grid-template-areas:"name price" "loc year" "cta cta";gap:2px 12px;padding:20px;min-height:0;border:0;border-radius:18px;background:var(--surface)}
  .plan-hi{background:var(--wish-soft);box-shadow:inset 0 0 0 1.5px var(--wish)}
  .plan-name{grid-area:name;font-size:20px}
  .plan-loc{grid-area:loc;font-size:15px}
  .plan-price{grid-area:price;justify-self:end}
  .plan-price{white-space:nowrap}
  .plan-price strong{font-size:34px}
  .plan-year{grid-area:year;justify-self:end;font-size:14px;color:var(--ink-3)}
  .plan-cta{grid-area:cta;margin-top:16px}
  .plan-cta .btn{width:100%;height:52px;font-size:17px;border-radius:12px}
  .plan-more{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 0 0;border:0}
  .plans-sticky{top:auto;bottom:-30px;right:-6px;--s:.52;transform-origin:bottom right}
  .loc-w{display:inline}
}
@media (max-width:699px){
  .wide-only{display:none}.narrow-only{display:inline}
  .compare{gap:0}
  .cmp-row{grid-template-columns:1fr auto;gap:10px 12px;margin-top:16px}
  .cmp-track{grid-column:1/-1;grid-row:2;height:20px;border-radius:6px}
  .cmp-bar{border-radius:6px}
  .cmp-label,.cmp-value{font-size:15px}
  .cmp-us .cmp-value{font-weight:600}
  .cmp-note{top:10px;font-size:20px;padding:8px 12px}
  .chips{gap:8px}
  .chips li{font-size:13px;height:34px;padding:0 14px 0 10px}
  .fineprint{font-size:13px}
}
@media (min-width:700px) and (max-width:899px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plan{grid-template-columns:1fr;grid-template-areas:"name" "loc" "price" "year" "cta";align-content:start;gap:4px}
  .plan-price,.plan-year{justify-self:start}
  .plan-price{margin-top:14px}
  .plan-more{grid-column:1/-1}
  .plans-sticky{bottom:auto;top:-58px;right:-20px;--s:.52;transform-origin:top right}
}
.js .cmp-bar{width:0;transition:width 1s var(--ease) .25s}
.js .compare.is-visible .cmp-bar{width:var(--w)}
.js .compare.is-visible .cmp-ours{transition-delay:.55s}

/* CTA + footer */
.cta{text-align:center;padding-block:clamp(56px,4vw + 40px,104px) clamp(48px,4vw + 30px,96px)}
.cta-title{font:800 var(--t-cta)/.96 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.cta .lead{max-width:720px;margin:clamp(16px,1vw + 12px,28px) auto 0}
.cta .actions{margin-top:clamp(24px,1vw + 20px,36px)}
@media (max-width:599px){.cta .actions{align-items:stretch}}
.footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;padding:28px 0 40px;border-top:1px solid var(--hair)}
.footer-brand{font:700 16px/1 var(--f-display)}
.footer-links{display:flex;gap:12px;font-size:14px;color:var(--ink-2)}
.footer-links a{text-decoration:none}
.footer-links a:hover{color:var(--ink);text-decoration:underline}
@media (max-width:599px){.footer{flex-direction:column;align-items:flex-start}}

/* ---------- Motion (very subtle) ---------- */
.js .reveal{opacity:0;translate:0 14px;transition:opacity .7s var(--ease),translate .7s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.is-visible{opacity:1;translate:none}
.js .shot .marker path{stroke-dashoffset:1;transition:stroke-dashoffset .9s var(--ease) .7s}
.js .shot.is-visible .marker path{stroke-dashoffset:0}
.js .note-arrow path{stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .5s}
.js .note.is-visible .note-arrow path{stroke-dashoffset:0}
.js .hd-lines path{stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--ease) .4s}
.js .hd-wrap.lines-on .hd-lines path{stroke-dashoffset:0}
.js .hd .cell{opacity:0;scale:.92;transition:opacity .45s var(--ease),scale .45s var(--ease);transition-delay:calc(var(--i,0)*28ms + 150ms)}
.js .hd.is-visible .cell{opacity:1;scale:1}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .hd .cell{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  .js .shot .marker path,.js .note-arrow path,.js .hd-lines path{stroke-dashoffset:0!important;transition:none!important}
  .js .cmp-bar{width:var(--w)!important;transition:none!important}
  .btn,.btn:hover{transition:none;transform:none}
}