@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument";src:url(fonts/instrument.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument";src:url(fonts/instrument-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --bg:#F4F4F2; --surface:#FFFFFF; --ink:#17212B; --mute:#5D6772; --line:#D8DBDE;
  --fin:#1F4FD8; --fin-soft:#E2E9FB; --fin-ink:#14307F;
  --tag:#84B5A0; --tag-bg:#1D2226; --tag-text:#E8ECEA; --tag-ink:#CFE5DA; --tag-mute:#9BA6A8;
  --radius-icon:22.5%;
  --max:1160px; --gutter:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#111518; --surface:#1A1F23; --ink:#E9ECEE; --mute:#9AA3AB; --line:#2A3036;
    --fin:#5B82F0; --fin-soft:#151E36; --fin-ink:#BCCBF8;
    --tag-bg:#181D20;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 "Instrument",system-ui,sans-serif;font-variation-settings:"wdth" 100}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--fin);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;background:var(--surface);padding:8px 12px;z-index:9}

/* Kopf */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.25rem/1 "Bricolage";letter-spacing:-.02em}
.mark i{display:flex;gap:3px}
.mark b{width:9px;height:9px;border-radius:3px;display:block}
.mark b:nth-child(1){background:var(--fin)}.mark b:nth-child(2){background:var(--tag)}
.nav{display:flex;gap:clamp(12px,2.5vw,28px);font-size:.95rem}
.nav a{text-decoration:none;color:var(--mute)}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .lang{border:1px solid var(--line);border-radius:99px;padding:1px 9px}

/* Start */
.hero{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding-block:clamp(40px,8vw,110px) clamp(48px,8vw,100px)}
.hero h1{text-wrap:balance;font:650 clamp(2.6rem,6.4vw,5.4rem)/.98 "Bricolage";letter-spacing:-.035em;margin:0 0 28px;font-variation-settings:"opsz" 96}
.hero p{max-width:34ch;font-size:1.2rem;color:var(--mute);margin:0}
.shelf{position:relative;aspect-ratio:1/.92;max-width:440px;justify-self:end;width:100%}
.shelf a{position:absolute;width:58%;filter:drop-shadow(0 18px 28px rgb(15 32 56/.18));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shelf a:nth-child(1){left:0;top:30%;transform:rotate(-8deg)}
.shelf a:nth-child(2){left:40%;top:8%;transform:rotate(7deg);z-index:2}
.shelf a:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:5}
@media (prefers-reduced-motion:no-preference){
  .shelf a{animation:drop .9s cubic-bezier(.2,.9,.25,1.15) both}
  .shelf a:nth-child(2){animation-delay:.14s}
  @keyframes drop{from{opacity:0;translate:0 -40px;rotate:-14deg}}
}
.icon{border-radius:var(--radius-icon);overflow:hidden;aspect-ratio:1;height:auto}

/* Übersicht */
.index{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line)}
.index a{display:flex;gap:14px;align-items:center;padding:20px 0;text-decoration:none}
.index a + a{padding-left:24px;border-left:1px solid var(--line)}
.index .icon{width:48px;flex:none}
.index strong{display:block;font:600 1.1rem/1.2 "Bricolage"}
.index span{font-size:.9rem;color:var(--mute)}

/* App-Abschnitte */
.app{padding-block:clamp(64px,10vw,130px)}
.app.fin{background:var(--fin-soft);--c:var(--fin);--ci:var(--fin-ink)}
.app.tag{background:var(--tag-bg);color:var(--tag-text);--c:var(--tag);--ci:var(--tag-ink);--mute:var(--tag-mute)}
.app.tag .btn{color:#14201B}
.app.tag :focus-visible{outline-color:var(--tag)}
.app .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.app.flip .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.app.flip .art{order:2}
.art{position:sticky;top:32px;display:flex;justify-content:center}
.phone{position:relative;width:min(100%,300px)}
.phone .screen{border-radius:44px;border:7px solid #0E1114;box-shadow:0 30px 60px -20px rgb(10 20 30/.45);width:100%;height:auto;background:#0E1114}
.phone .icon{position:absolute;width:30%;left:-12%;bottom:9%;box-shadow:0 14px 30px -8px rgb(10 20 30/.45)}
.app.flip .phone .icon{left:auto;right:-12%}
.solo .icon{width:min(100%,300px);box-shadow:0 30px 60px -24px rgb(20 48 127/.45)}
.app h2{font:650 clamp(2.4rem,5vw,4rem)/1 "Bricolage";letter-spacing:-.03em;margin:0 0 14px;color:var(--ci)}
.app .lead{font:500 1.35rem/1.35 "Instrument";margin:0 0 22px;max-width:30ch}
.app .body{max-width:58ch;margin:0 0 32px}
.feats{list-style:none;padding:0;margin:0 0 36px;display:grid;gap:14px}
.feats li{display:grid;grid-template-columns:22px 1fr;gap:12px;max-width:56ch}
.feats li::before{content:"";width:12px;height:12px;margin-top:.45em;border-radius:4px;background:var(--c)}
.feats b{font-weight:600}
.facts{display:flex;flex-wrap:wrap;gap:14px 40px;margin:0 0 32px;padding:20px 0;border-block:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.facts dt{font-size:.85rem;color:var(--mute)}
.facts dd{margin:0;font-weight:600}
.facts dd span{display:inline-flex;align-items:center;gap:7px}
.facts dd span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.actions{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--c);color:#fff;text-decoration:none;font-weight:600;padding:13px 22px;border-radius:14px}
.btn:hover{filter:brightness(1.08)}
.btn svg{width:18px;height:18px}
.actions .quiet{font-size:.95rem;color:var(--ci)}

/* Daten */
.privacy{padding-block:clamp(72px,10vw,130px)}
.privacy h2{text-wrap:balance;font:650 clamp(2rem,4.4vw,3.4rem)/1.02 "Bricolage";letter-spacing:-.03em;margin:0 0 18px;max-width:18ch}
.privacy > .wrap > p{max-width:52ch;color:var(--mute);font-size:1.15rem;margin:0 0 48px}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.points svg{width:40px;height:40px;margin-bottom:16px;color:var(--ink)}
.points h3{font:600 1.2rem/1.25 "Bricolage";margin:0 0 6px}
.points p{margin:0;color:var(--mute)}

/* Unterseiten */
.page{padding-block:clamp(40px,7vw,90px) 100px}
.page .wrap{max-width:820px}
.page h1{font:650 clamp(2.4rem,5.4vw,4rem)/1 "Bricolage";letter-spacing:-.03em;margin:0 0 18px}
.page .intro{font-size:1.2rem;color:var(--mute);margin:0 0 48px;max-width:50ch}
.page h2{font:600 1.6rem/1.2 "Bricolage";margin:56px 0 12px;letter-spacing:-.015em;display:flex;align-items:center;gap:14px;scroll-margin-top:24px}
.page h2 .icon{width:40px}
.page h3{font:600 1.1rem/1.3 "Instrument";margin:28px 0 6px}
.page p,.page li{max-width:66ch}
.page .updated{font-size:.9rem;color:var(--mute)}
.mailbox{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px 28px;margin:0 0 24px}
.mailbox strong{font:600 1.3rem/1.2 "Bricolage"}
.mailbox .btn{--c:var(--ink);background:var(--ink);color:var(--bg)}
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
details summary::after{content:"+";font:400 1.4rem/1 "Bricolage";color:var(--mute);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:10px 0 0;color:var(--mute)}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px;padding:0;list-style:none}
.toc a{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:99px;text-decoration:none;font-size:.95rem}

/* Fuß */
.foot{border-top:1px solid var(--line);padding-block:36px 48px;font-size:.92rem;color:var(--mute)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.foot nav{display:flex;flex-wrap:wrap;gap:22px}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:8px}
  .shelf{justify-self:center;max-width:300px;order:-1;margin-bottom:36px}
  .index{grid-template-columns:1fr}
  .index a + a{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .app .wrap{grid-template-columns:1fr}
  .app.flip .art{order:0}
  .app.flip .wrap{grid-template-columns:1fr}
  .art{position:static}
  .art{justify-content:flex-start}
  .phone{width:min(62%,250px);margin-left:14%}
  .app.flip .phone{margin-left:0;margin-right:auto}
  .solo .icon{width:140px}
  .points{grid-template-columns:1fr}
  .nav .hide-s{display:none}
}