@charset "UTF-8";
:root{color-scheme:dark;--night:#080c16;--panel:#101522;--raised:#171d2d;--ink:#f5f2e9;--muted:#adb3c2;--gold:#d8c49a;--line:#ffffff16;font-family:"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--night);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}img{max-width:100%;height:auto;display:block}::selection{background:#d8c49a44;color:white}[hidden]{display:none!important}h1,h2,h3,p{margin:0}em{font-style:normal;color:var(--gold)}
.wrap{width:min(1240px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-80px;left:20px;z-index:20;background:var(--gold);color:var(--night);padding:14px 20px;border-radius:10px}.skip:focus{top:15px}
/* L6: one public header on every eFunkeys page — wordmark · Entdecken · Einblicke · Öffnen (server/directory-render.ts has the same). */
.site-header{position:absolute;top:0;left:0;right:0;z-index:5;height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 48px}
.brand{min-height:44px;display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.19em;color:var(--gold);white-space:nowrap}.brand img{border-radius:8px;flex:none}
.site-header nav{display:flex;align-items:center;gap:2px}
.site-header nav>a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-size:15px;font-weight:500;color:#d6d9e2;white-space:nowrap}.site-header nav>a:hover{color:#fff}
.site-header nav>.nav-open{margin-left:8px;padding:0 20px;background:rgba(255,255,255,.08);color:var(--text,#f5f2e9);font-weight:600}.site-header nav>.nav-open:hover{background:rgba(255,255,255,.14);color:var(--text,#f5f2e9)}
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(720px,min(900px,100svh));overflow:hidden;background:var(--night)}.hero-art{position:absolute;inset:0;z-index:-3}.hero-art>img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080c16dc 0%,#080c16a8 25%,#080c1620 62%,transparent),linear-gradient(0deg,var(--night),transparent 25%,transparent 85%,#080c1655)}
.hero-copy{position:relative;z-index:1;padding-block:120px 96px}
h1{font-size:clamp(56px,6vw,92px);font-weight:600;letter-spacing:-.055em;line-height:1.03;margin:0 0 24px;max-width:760px}
.hero-copy>p{font-size:19px;line-height:1.7;color:#c7ccda}.hero-actions{display:flex;margin-top:36px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:0;border-radius:10px;font-size:15px;font-weight:600;transition:background .16s ease-out}.button.primary{background:var(--gold);color:#151820}.button.primary:hover{background:#edddbb}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px}.text-link:hover{color:var(--gold)}
.starfield{position:absolute;inset:0;pointer-events:none}.star{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fbf2d9;box-shadow:0 0 6px #eddfb677;opacity:.24}.star.bright:after,.star.bright:before{content:"";position:absolute;inset:-3px 0;background:#e8dcba;border-radius:50%;transform:scaleX(.22);opacity:.7}.star.bright:before{transform:rotate(90deg) scaleX(.22)}.motion-on .star{animation:twinkle var(--duration) ease-in-out var(--delay) infinite alternate}.motion-on .hero-art>img{animation:sky-drift 35s ease-in-out infinite alternate}.shooting-star{position:absolute;top:19%;left:64%;width:140px;height:1px;background:linear-gradient(90deg,transparent,#eee2bb);opacity:0;transform:rotate(-30deg);pointer-events:none}.motion-on .shooting-star{animation:shooting 19s 7s ease-in-out infinite}.motion-paused .star,.motion-paused .hero-art>img,.motion-paused .shooting-star{animation-play-state:paused!important}@keyframes twinkle{0%,20%{opacity:.12;transform:scale(.75)}80%,100%{opacity:.85;transform:scale(1.12)}}@keyframes sky-drift{from{transform:scale(1)}to{transform:scale(1.025)}}@keyframes shooting{0%,91%,100%{opacity:0;transform:translate(0,0) rotate(-30deg)}92%{opacity:.7}96%{opacity:0;transform:translate(-230px,132px) rotate(-30deg)}}
.section{padding-block:112px}h2{font-size:clamp(36px,4vw,56px);font-weight:600;letter-spacing:-.045em;line-height:1.12}
.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:32px 88px}.intro-copy{font-size:17px;line-height:1.8;color:var(--muted);padding-top:12px;max-width:490px}
.feature-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:40px}.feature svg{display:block;width:32px;height:32px;margin:0 0 20px;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.feature h3{font-size:22px;font-weight:600;line-height:1.3;letter-spacing:-.03em}.feature p{font-size:15px;color:var(--muted);line-height:1.75;margin-top:12px;max-width:320px}
/* Tour: tabs as one segment, the screenshot as the stage; title and sentence sit inside the picture (KARTEN type C). */
.product-tour{padding-top:40px}.tour-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-bottom:32px}.tour-heading>p{font-size:17px;line-height:1.8;color:var(--muted);max-width:380px}
.tour-tabs{display:inline-flex;gap:2px;margin-bottom:20px;background:var(--panel);border-radius:999px}.tour-tabs button{min-height:44px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:15px;font-weight:500}.tour-tabs button:hover{color:var(--ink)}.tour-tabs button[aria-selected=true]{background:var(--raised);color:var(--ink)}
.tour-panel{position:relative;margin:0;border-radius:14px;overflow:hidden;background:var(--panel)}.tour-image{display:block}.tour-image img{width:100%}.tour-image:focus-visible{outline-offset:-4px}
.tour-panel figcaption{padding:20px 24px}.tour-panel h3{font-size:19px;font-weight:600;letter-spacing:-.02em}.tour-panel p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:6px}
@media(min-width:761px){.tour-panel figcaption{position:absolute;left:0;right:0;bottom:0;padding:96px 32px 28px;background:linear-gradient(to top,rgb(0 0 0/.82) 0%,rgb(0 0 0/.5) 45%,transparent);pointer-events:none}.tour-panel h3{font-size:22px;color:#fff;text-shadow:0 1px 2px rgb(0 0 0/.4)}.tour-panel p{color:rgb(255 255 255/.82);max-width:640px}}
.community{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:88px}.community-copy>p,.planning p,.download-intro p{font-size:17px;line-height:1.8;color:var(--muted);margin-top:24px;max-width:470px}
.scene-card,.planning figure{margin:0;border-radius:14px;overflow:hidden;background:#18191d}.scene-card img{width:100%}
.planning{display:grid;grid-template-columns:1.05fr 1fr;gap:88px;align-items:center;padding-top:0}
.download{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center}.download-intro h2{font-size:clamp(48px,5.5vw,80px)}
.download-card{padding:32px;border-radius:14px;background:var(--panel)}.download-card-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}.download-card-head img{border-radius:10px;flex:none}.download-card-head h3{font-size:22px;font-weight:600;letter-spacing:-.02em}.download-card-head small{display:block;margin-top:2px;font-size:13px;color:var(--muted)}
.download-card>p{font-size:15px;line-height:1.7;color:var(--muted)}.download-card ul{padding:0;margin:20px 0 24px;list-style:none;font-size:15px;color:#d0d4df;line-height:2}.download-card li:before{content:"✓";color:var(--gold);margin-right:12px}
.download-file{width:100%}.download-file[aria-disabled=true]{opacity:.5;cursor:default}.download-card>.download-meta{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}.download-retry{display:flex;background:transparent;border:0;padding:0;color:var(--gold);margin:4px auto 0}
.setup{margin-top:12px}.setup summary{display:flex;align-items:center;justify-content:center;min-height:44px;font-size:13px;color:var(--muted);cursor:pointer}.setup p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:8px}.checksum{margin-top:12px}.checksum code{display:block;overflow-wrap:anywhere;font-size:12px;line-height:1.7;color:var(--gold);user-select:all}
.faq{display:grid;grid-template-columns:1fr 1.25fr;gap:88px;padding-top:40px}.faq h2{font-size:36px}.faq details{border-bottom:1px solid var(--line)}.faq details:first-child{border-top:1px solid var(--line)}.faq summary{display:flex;align-items:center;min-height:64px;padding:12px 16px 12px 0;font-size:17px;line-height:1.5;cursor:pointer}.faq details p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 20px}.faq details .text-link{margin:-8px 0 16px;color:var(--gold)}
.site-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-block:32px;border-top:1px solid var(--line)}.site-footer>.brand{font-size:12px}.site-footer nav{display:flex;flex-wrap:wrap}.site-footer nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:13px;color:#aab1c2}.site-footer nav a:hover{color:var(--ink)}
/* Editorial text may be longer than the bundled copy. Keep it readable at every width. */
.hero-copy,.intro-copy,.community-copy,.planning,.download,.feature-grid,.faq-items{overflow-wrap:anywhere}
@media(min-width:1700px){.hero-art>img{object-position:center 60%}}
@media(min-width:651px) and (max-width:1200px){.hero-art>img{object-fit:contain;object-position:center bottom}}
/* Tablet portrait: "contain" left the picture above a 35 % night fade, which read as an empty band under the hero. */
@media(min-width:651px) and (max-width:1200px) and (orientation:portrait){.hero-art>img{object-fit:cover;object-position:74% bottom}.hero-shade{background:linear-gradient(90deg,#080c16f2,#080c16c4 50%,#080c1640 78%,#080c1610),linear-gradient(0deg,var(--night),transparent 16%)}}
@media(max-width:1000px){.wrap{width:calc(100% - 64px)}.site-header{padding-inline:32px}.hero-art>img{object-position:58% center}.hero-shade{background:linear-gradient(90deg,#080c16e8,#080c1690 45%,#080c1620),linear-gradient(0deg,var(--night),transparent 35%)}h1{font-size:68px}.intro{gap:28px}.feature-grid{gap:28px}.community,.planning{gap:40px}.download{gap:48px}.faq{gap:40px}}
/* Phones: the three header links stay, "Einblicke" steps back (it is a jump on this page); the picture sits under the text. */
@media(max-width:650px){.wrap{width:calc(100% - 32px)}.site-header{height:64px;padding-inline:16px}.brand{font-size:12px;gap:8px}.brand img{width:28px;height:28px}.site-header nav>a{padding:0 10px;font-size:14px}.site-header nav>.nav-wide{display:none}.site-header nav>.nav-open{margin-left:4px;padding:0 16px}
 .hero{align-items:flex-start;min-height:860px}.hero-copy{padding-block:112px 0}.hero-art{top:400px;bottom:20px}.hero-art>img{object-position:90% center;object-fit:cover}.hero-shade{background:linear-gradient(180deg,var(--night) 18%,#080c16e8 29%,#080c1690 45%,transparent 64%,var(--night) 99%)}
 h1{font-size:clamp(46px,11.5vw,68px);line-height:1.05;letter-spacing:-.05em;margin-bottom:20px}.hero-copy>p{font-size:17px}.hero-actions .button{flex:1 1 100%}
 .section{padding-block:72px}.intro,.community,.planning,.download,.faq{grid-template-columns:1fr;gap:28px}.intro-copy{padding-top:0;font-size:16px}.feature-grid{grid-template-columns:1fr;gap:32px;margin-top:8px}.feature{position:relative;padding-left:48px}.feature svg{position:absolute;top:2px;left:0;width:28px;height:28px;margin:0}.feature h3{font-size:20px}.feature p{max-width:none}
 .community-copy>p,.planning p,.download-intro p{font-size:16px}.planning figure{order:2}.download-card{padding:24px}.download-intro h2{font-size:52px}.faq{padding-top:8px}.faq h2{font-size:32px}.faq summary{font-size:16px}
 .tour-heading{display:block;margin-bottom:24px}.tour-heading>p{font-size:16px;margin-top:16px}.tour-tabs{display:flex}.tour-tabs button{flex:1;min-width:0;padding:0 6px;font-size:13px}.tour-panel figcaption{padding:16px}.tour-panel h3{font-size:18px}.site-footer{padding-block:24px}}
@media(max-width:350px){.brand span{display:none}.site-header .brand{min-width:44px;justify-content:center}}
@media(orientation:landscape) and (max-height:500px){.hero{min-height:0}.hero-copy{padding-top:96px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* L6 · Phase C (visual first): on phones every picture comes before its text. */
@media(max-width:650px){.community .scene-card,.planning figure{order:-1}}