@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:local('Inter'),url(../fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:local('Inter Medium'),url(../fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:local('Inter SemiBold'),url(../fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:700;font-style:normal;font-display:swap;src:local('Inter Bold'),url(../fonts/Inter-700.woff2) format('woff2')}

/* Theme "Allmende" (CI final): Navy führt, Ultramarin bedient. Radien: Flächen 0, Bedienelemente 2 px. */
:root{--navy:#0b1033;--navy-2:#131a47;--navy-line:#2b3470;--on-navy:#c9cdf0;--ultra-d:#7582e0;--ultra-t:#9aa6f0;
--brand:#2a3fcf;--accent:#2a3fcf;--accent-hover:#2335ae;--on-accent:#fff;--accent-soft:#eaecfa;--accent-line:#b4bcee;--accent-text:#2a3fcf;
--bg:#f9f9fb;--surface:#fff;--surface-2:#f0f1f4;--line:#e2e3e9;--line-strong:#c5c7d3;--control:#8689a4;--text:#2c2e3a;--heading:#0b1033;--muted:#636783;--focus:#2a3fcf;
--ok:#17703f;--ok-bg:#e3f4ea;--warn:#8a5200;--warn-bg:#fdf0d5;--err:#b02318;--err-bg:#fde8e6;--info:#1d5a9e;--info-bg:#e4eefa;--neu:#4a525b;--neu-bg:#eceff2;
--r:2px;--r-lg:0px;--shadow:0 8px 28px rgba(11,16,51,.18);--font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:var(--font)}
@media (prefers-color-scheme:dark){:root{--bg:#0b1033;--surface:#131a47;--surface-2:#1b2358;--line:#2b3470;--line-strong:#4a5497;--control:#6e7ab5;--text:#eceefb;--heading:#fff;--muted:#a9aed0;--accent-text:#9aa6f0;--accent-soft:#1f2870;--accent-line:#4a5497;--focus:#fff;
--ok:#6fd49b;--ok-bg:#16372a;--warn:#f0bf6a;--warn-bg:#3d2f10;--err:#ff9a8f;--err-bg:#431d1a;--info:#8fbef2;--info-bg:#15304f;--neu:#b6bec8;--neu-bg:#2a313a;--shadow:0 8px 28px rgba(0,0,0,.5)}}

*{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.car-track{scroll-behavior:auto}*{transition:none!important}.cta .link:hover .arw{transform:none}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--font);font-variant-numeric:normal;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,dl,dd{margin:0}ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{color:var(--heading)}
a{color:var(--accent-text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:99;border:1px solid var(--line-strong)}.skip:focus{left:8px}
.ic{flex:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}

/* shared app components (from v3) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r);font:600 13px var(--font);cursor:pointer;border:1px solid transparent;white-space:nowrap;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.primary:hover{background:var(--accent-hover)}
.btn.secondary{background:var(--surface);color:var(--heading);border-color:var(--heading)}.btn.secondary:hover{background:var(--accent-soft)}
.btn.lg{height:44px;padding:0 20px;font-size:15px}.btn.sm{height:26px;padding:0 8px;font-size:12px}
.chip{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:var(--r);font-size:12px;font-weight:600;white-space:nowrap;background:var(--neu-bg);color:var(--neu)}
.chip::before{content:"";width:6px;height:6px;border-radius:0;background:currentColor;flex:none}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.err{background:var(--err-bg);color:var(--err)}.chip.info{background:var(--info-bg);color:var(--info)}.chip.acc{background:var(--accent-soft);color:var(--accent-text)}
.num{white-space:nowrap;font-variant-numeric:tabular-nums;font-family:var(--font)}.r{text-align:right}.muted{color:var(--muted)}
.tw{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font:600 12px var(--font);color:var(--heading);background:var(--surface-2);padding:7px 10px;border-bottom:2px solid var(--heading);white-space:nowrap}
.tbl td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}.tbl .r{text-align:right}.tbl tr.sel{background:var(--accent-soft)}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;display:flex;flex-direction:column;gap:2px}.kpi b{font:700 22px var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}.kpi small{color:var(--muted);font-size:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}.card-h{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line)}.card-h h4{font-size:14px;font-weight:600}.card-b{padding:14px}
.fld{display:flex;flex-direction:column;gap:4px}.fld .l{font-weight:600;font-size:12.5px}
.inp{display:flex;align-items:center;height:32px;padding:0 10px;border:1px solid var(--control);border-radius:var(--r);background:var(--surface);color:var(--text);font:400 13px var(--font)}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:13px}.box{width:16px;height:16px;margin-top:2px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex:none}
.progress{height:8px;background:var(--surface-2);border-radius:0;overflow:hidden;border:1px solid var(--line)}.progress i{display:block;height:100%;background:var(--accent)}
.steps{display:flex}.steps li{flex:1;display:flex;gap:8px;align-items:center;font-size:13px;position:relative;min-width:0}
.steps li:not(:last-child)::after{content:"";flex:1;height:2px;background:var(--line-strong);margin:0 8px}.steps li.done:not(:last-child)::after{background:var(--accent)}
.steps .n{width:24px;height:24px;border-radius:0;display:grid;place-items:center;font:600 12px var(--font);border:2px solid var(--line-strong);background:var(--surface);color:var(--muted);flex:none}
.steps .done .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.steps .cur .n{border-color:var(--accent);color:var(--accent-text);box-shadow:0 0 0 3px var(--accent-soft)}
.steps .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.steps .todo .t{color:var(--muted)}
.av{width:28px;height:28px;border-radius:0;background:var(--accent-soft);color:var(--accent-text);display:inline-grid;place-items:center;font:600 11px var(--font);flex:none;border:1px solid var(--accent-line)}
.logo{width:32px;height:32px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);display:inline-grid;place-items:center;font-weight:600;flex:none}

/* app shell */
.frame{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden}
.chromebar{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:0;background:var(--line-strong)}
.url{flex:1;max-width:420px;margin:0 auto;height:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font:400 12px/20px var(--font);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden}
.app{display:flex;font-size:13px;min-height:400px;text-align:left}
.rail{width:56px;flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:8px}
.rtop{display:flex;align-items:center;height:40px;margin-bottom:6px}
.ri{position:relative;display:flex;align-items:center;justify-content:center;height:40px;border-radius:var(--r);color:var(--muted)}
.ri.on{background:var(--accent-soft);color:var(--accent-text)}.ri.on::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0}

.side{width:200px;flex:none;background:var(--surface);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:1px}
.side-h{font-weight:600;font-size:14px;padding:4px 8px 10px}
.si{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r);color:var(--text)}.si.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.sb{margin-left:auto;font:600 11px var(--font);background:var(--accent);color:var(--on-accent);border-radius:var(--r);padding:0 6px}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.top{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.crumb{flex:1;color:var(--muted)}.crumb b{color:var(--text);font-weight:500}.crumb span{margin:0 4px}
.pill{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--control);border-radius:var(--r);background:var(--surface);color:var(--muted);font-size:12px}
kbd{display:inline-block;padding:0 5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:var(--r);font:500 11px var(--font);color:var(--muted);background:var(--surface)}
.content{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:12px}.ph h3{font-size:20px;font-weight:600;line-height:1.3}.acts{display:flex;gap:8px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* demo shell */
.frame{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden}
.chromebar{display:flex;align-items:center;gap:12px;min-height:36px;padding:4px 12px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:0;background:var(--line-strong)}
.url{flex:1;max-width:380px;margin:0 auto;height:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);font:400 12px/20px var(--font);color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.demo-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r);background:var(--warn-bg);color:var(--warn);font-size:12px;font-weight:600;white-space:nowrap}
.app{display:flex;font-size:13px;min-height:560px;text-align:left;position:relative;overflow:hidden}
.app button{font-family:inherit}
.rail{width:56px;flex:none;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:8px}
.rtop{display:flex;align-items:center;height:40px;margin-bottom:6px}
.ri{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:40px;border-radius:var(--r);color:var(--muted);background:none;border:0;cursor:pointer;padding:0}
.ri:hover,.si:hover{background:var(--surface-2)}
.ri[aria-current=page]{background:var(--accent-soft);color:var(--accent-text)}.ri[aria-current=page]::before{content:"";position:absolute;left:-8px;top:0;bottom:0;width:3px;background:var(--accent);border-radius:0}
.ri-b{margin-top:auto}.rail,.side{--ac:var(--accent-text)}.si .si-ic{margin-right:8px;flex:none}
.side{overflow-y:auto;width:196px;flex:none;background:var(--surface);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;gap:1px}
.side-h{font-weight:600;font-size:14px;padding:4px 8px 10px}
.si{display:flex;align-items:center;width:100%;height:32px;padding:0 10px;border-radius:var(--r);color:var(--text);background:none;border:0;cursor:pointer;font-size:13px;text-align:left}
.si[aria-current=page]{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.sb{margin-left:auto;font:600 11px var(--font);background:var(--accent);color:var(--on-accent);border-radius:var(--r);padding:0 6px}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.top{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:var(--navy);border-bottom:1px solid var(--navy-line)}
.crumb{flex:1;color:var(--on-navy)}.crumb b{color:#fff;font-weight:600}.crumb span{margin:0 4px}
.top .av{background:var(--accent);color:#fff;border-color:var(--ultra-d)}
.content{padding:16px 20px 20px;display:flex;flex-direction:column;gap:14px;flex:1}
.ph{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.ph h3{font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.3}.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
button.kpi{text-align:left;cursor:pointer;font:inherit;color:inherit}button.kpi:hover{border-color:var(--accent-line);background:var(--accent-soft)}
.kpi b{font-size:21px}
.tabs{display:none;gap:4px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.tabs select{max-width:100%}.tabs button{flex:none;height:32px;padding:0 12px;border-radius:var(--r);border:1px solid transparent;background:none;color:var(--text);font:500 13px var(--font);cursor:pointer;white-space:nowrap}
.tabs button[aria-current=page]{background:var(--accent-soft);color:var(--accent-text);font-weight:600;border-color:var(--accent-line)}
.fchip{height:28px;padding:0 10px;border:1px solid var(--control);border-radius:var(--r);background:var(--surface);color:var(--text);font:500 12.5px var(--font);cursor:pointer}
.fchip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text);font-weight:600}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search{flex:1;min-width:160px;max-width:280px;width:100%}
.rowbtn{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent-text);cursor:pointer;text-align:left}
.tbl tr.clickable{cursor:pointer}.tbl tr.clickable:hover td{background:var(--surface-2)}
.tbl td.t-wrap{white-space:normal;min-width:140px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.danger{background:var(--surface);color:var(--err);border-color:var(--control)}.btn.danger:hover{background:var(--err-bg)}
select.inp,input.inp{width:100%}
.panel{position:absolute;top:0;right:0;bottom:0;width:340px;max-width:100%;background:var(--surface);border-left:1px solid var(--line-strong);box-shadow:var(--shadow);z-index:5;display:flex;flex-direction:column}
.panel[hidden]{display:none}
.panel-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}.panel-h h4{flex:1;font-size:15px;font-weight:600}
.panel-b{padding:16px;display:flex;flex-direction:column;gap:14px;overflow:auto;flex:1}
.panel-f{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.iconbtn{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);border:1px solid transparent;background:none;color:var(--muted);cursor:pointer}.iconbtn:hover{background:var(--surface-2)}
.pk{display:grid;grid-template-columns:110px 1fr;font-size:13px;margin:0}.pk dt,.pk dd{padding:8px 0;border-bottom:1px solid var(--line)}.pk dt{color:var(--muted)}.pk dd{margin:0}
.who{display:flex;align-items:center;gap:12px}.who .av{width:40px;height:40px;font-size:14px}
.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--text);color:var(--surface);padding:8px 14px;border-radius:var(--r);font-size:13px;font-weight:500;z-index:6;max-width:calc(100% - 32px);box-shadow:var(--shadow)}
.toast:empty{display:none}
.demo-hint{display:flex;gap:12px 20px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--muted)}
.demo-hint p{max-width:70ch}
.evrow{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.evrow:last-child{border-bottom:0}.evrow:hover{background:var(--surface-2)}.evrow[aria-pressed=true]{background:var(--accent-soft)}
.evrow .nm{flex:1;min-width:0}.evrow b{font-weight:600}.evrow small,.ev small{color:var(--muted);font-size:12px;display:block}
.cap{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}.cap .progress{flex:1;min-width:80px}.cap.full .progress i{background:var(--warn)}
.empty{padding:28px 16px;text-align:center;color:var(--muted)}


/* Modul-Karussell: mehrere Karten sichtbar, Ein- und Ausblenden. Ohne JS oder bei reduzierter Bewegung eine scrollbare Reihe. */
.car{margin-top:40px;--gap:16px;--vis:3;--cw:calc((100% - 2*var(--gap))/3)}
.car-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.car-bar[hidden]{display:none}
.car-dots{display:flex;flex-wrap:wrap;gap:0}
.car-dot{width:26px;height:32px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.car-dot i{display:block;width:12px;height:12px;background:var(--line-strong)}.car-dot:hover i{background:var(--muted)}.car-dot[aria-current=true] i{background:var(--accent);height:16px}
.car-nav{display:flex;gap:8px}
.car-nav button{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--control);border-radius:var(--r);background:var(--surface);color:var(--heading);cursor:pointer}
.car-nav button:hover{background:var(--accent-soft);color:var(--accent-text)}
.car-view{display:flex;gap:var(--gap);margin:0;padding:0 0 12px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.car-view::-webkit-scrollbar{display:none}
.car-card{flex:0 0 var(--cw);scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);padding:24px;display:flex;flex-direction:column}
.car-ic{display:block;width:56px;height:56px;color:var(--heading);--ac:var(--accent-text);margin-bottom:16px}.car-ic svg{display:block}
.car-card h3 .chip{vertical-align:middle;margin-left:4px;font-size:12px;letter-spacing:0}
.car-card h3{font-size:21px;line-height:1.2;font-weight:700;letter-spacing:-.025em}
.car-card>p{color:var(--muted);margin-top:8px;font-size:15px}
.car-list{margin-top:14px;display:grid;gap:7px;font-size:14.5px}.car-list li{display:flex;gap:10px}.car-list .ic{color:var(--ok);--ac:currentColor;margin-top:4px;flex:none}
/* animierter Modus (JS, keine reduzierte Bewegung) */
.car.anim .car-view{display:grid;overflow:hidden;overflow:clip;padding:0;touch-action:pan-y}
.car.anim .car-card{grid-area:1/1;width:var(--cw);flex:none;opacity:0;transform:translateX(calc(var(--p,0)*(100% + var(--gap))));transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}
.car.anim .car-card.on{opacity:1}.car.anim .car-card.peek{opacity:.45}
.car:not(.anim) .car-nav #car-pause{display:none}
.bank{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--line);background:var(--surface)}
.bk{padding:24px;display:flex;flex-direction:column;gap:10px}.bk+.bk{border-left:1px solid var(--line)}
.bk-ic{display:block;width:40px;height:40px;color:var(--heading);--ac:var(--accent-text)}.bk-ic svg{display:block}
.bk h3{font-size:17px;font-weight:700;letter-spacing:-.01em;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.bk p{color:var(--muted);font-size:14.5px}
.bank-note{margin-top:16px;font-size:14px;color:var(--muted)}

/* header */
.site-h{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.site-h .wrap{display:flex;align-items:center;gap:24px;height:60px}
.mark{display:inline-flex;align-items:center;flex:none;line-height:0}.mark svg{display:block;height:22px;width:161px}
.mark .lg-n{display:none}
@media (prefers-color-scheme:dark){.mark .lg-p{display:none}.mark .lg-n{display:block}}
.site-h nav{display:flex;gap:2px;flex:1}
.site-h nav a{padding:6px 10px;border-radius:var(--r);color:var(--text);text-decoration:none;font-size:14px;font-weight:500}
.site-h nav a:hover{background:var(--accent-soft);color:var(--accent-text)}
.hact{display:flex;gap:8px}

/* hero: Text links, klickbare Demo rechts */
.hero{padding:64px 0 72px;background:var(--brand);color:#fff}
.hero .wrap,.site-h .wrap{max-width:1360px}
.hero-grid{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:48px;align-items:center}
.hero .hero-h{overflow-wrap:break-word;font-size:clamp(28px,2.3vw,33px);line-height:1.1;font-weight:700;letter-spacing:-.035em;color:#fff}
.hero .lead{font-size:18px;line-height:1.55;color:#e4e8fb;margin-top:20px;max-width:46ch}
.cta{display:flex;align-items:center;gap:12px 20px;margin-top:28px;flex-wrap:wrap}
.cta .link{display:inline-flex;align-items:center;gap:6px}.arw{transition:transform .15s}.cta .link:hover .arw{transform:translateX(2px)}
.hero .cta .link{font-weight:500;font-size:15px;color:#fff}
.facts{margin-top:20px;font-size:14px;color:#e4e8fb}
.hero-text .btn.primary{background:#fff;color:#2a3fcf;border-color:#fff}.hero-text .btn.primary:hover{background:#eaecfa}
.hero .demo-hint .btn.secondary{background:transparent;color:#fff;border-color:#fff}.hero .demo-hint .btn.secondary:hover{background:#2335ae}
.hero :focus-visible{outline-color:#fff}.hero .frame :focus-visible{outline-color:var(--focus)}
.hero .demo-hint,.hero .demo-hint p{color:#e4e8fb}
.hero-demo{min-width:0}
.hero-demo .frame{color:var(--text);border-color:#1d2c99;box-shadow:0 18px 48px rgba(11,16,51,.35)}
#demo-frame{container-type:inline-size}

/* sections */
section{scroll-margin-top:60px}
.sec{padding:88px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--surface)}
.sec.band-navy{background:var(--navy);color:var(--on-navy);border-bottom:0}
.sec.band-navy h2{color:#fff}.sec.band-navy h2::before{background:var(--ultra-d)}.sec.band-navy .intro{color:var(--on-navy)}
.sec.band-navy .sec-list{background:var(--navy-2);border-color:var(--navy-line)}.sec.band-navy .sec-list li{border-bottom-color:var(--navy-line)}
.sec.band-navy .sec-list b{color:#fff}.sec.band-navy .sec-list span{color:var(--on-navy)}.sec.band-navy .sec-list .ic{color:#6fd49b}
.sec.band-navy :focus-visible{outline-color:#fff}
.sec h2{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.03em;max-width:24ch;text-wrap:balance;}
.sec h2::before{content:"";display:block;width:56px;height:4px;background:var(--accent);margin-bottom:16px}
.sec .intro{color:var(--muted);font-size:17px;max-width:58ch;margin-top:12px}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:48px}
.mod{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.mod .ic{color:var(--accent-text);margin-top:2px}
.mod h3{font-size:16px;font-weight:600;line-height:1.35}.mod p{color:var(--muted);font-size:15px;margin-top:4px;max-width:46ch}

.feat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feat:first-of-type{margin-top:48px}
.feat.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.feat.flip .ft{order:2}
.feat h3{font-size:24px;line-height:1.25;letter-spacing:-.025em;font-weight:700;max-width:28ch}
.feat p{color:var(--muted);margin-top:12px;max-width:44ch}
.feat ul{margin-top:16px;display:grid;gap:8px;font-size:15px}.feat li{display:flex;gap:10px}.feat li .ic{color:var(--ok);margin-top:3px}
.snip{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;font-size:13px;min-width:0}
.snip .stack{display:flex;flex-direction:column;gap:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ev{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line)}.ev:last-child{border-bottom:0}.ev .nm{flex:1;min-width:0;font-weight:500}

.svc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 64px;margin-top:40px}
.sub{margin-top:72px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start;padding-top:48px;border-top:1px solid var(--line)}
.sub h3{font-size:24px;line-height:1.25;letter-spacing:-.025em;font-weight:700;max-width:24ch}
.sub .pts{margin-top:20px}
.pts{display:grid;gap:18px}.pts h4{font-size:16px;font-weight:600}.pts p{color:var(--muted);font-size:15px;margin-top:2px;max-width:46ch}
.kv{display:grid;grid-template-columns:150px 1fr;margin:0;font-size:14px}
.kv dt,.kv dd{padding:11px 14px;border-bottom:1px solid var(--line);margin:0}.kv dt{color:var(--muted)}.kv dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere}
.kv dt:nth-last-child(2),.kv dd:last-child{border-bottom:0}
.sw{width:18px;height:18px;border-radius:var(--r);border:1px solid var(--line-strong);display:inline-block}

.sec-list{margin-top:40px;max-width:760px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.sec-list li{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line)}.sec-list li:last-child{border-bottom:0}
.sec-list .ic{color:var(--ok);margin-top:2px}.sec-list b{font-weight:600;display:block}.sec-list span{color:var(--muted);font-size:15px}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.plan{padding:24px;display:flex;flex-direction:column;gap:12px}.plan+.plan{border-left:1px solid var(--line)}
.plan.hl{background:var(--accent-soft);box-shadow:inset 0 4px 0 var(--accent)}
.plan h3{font-size:18px;font-weight:600}
.price{font:700 30px var(--font);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--heading)}.price small{font:400 14px var(--font);color:var(--muted)}
.plan p{color:var(--muted);font-size:15px}.plan .psub{font-size:13px;margin-top:-8px}.plan .btn{margin-top:auto;align-self:stretch}
.price-notes{margin-top:20px;display:grid;gap:6px;font-size:14px;color:var(--muted)}.price-notes li{padding-left:14px;position:relative}.price-notes li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--accent)}
.plan ul{display:grid;gap:8px;font-size:14.5px;flex:1}.plan li{display:flex;gap:10px}.plan li .ic{color:var(--ok);margin-top:3px}
.ph-note{margin-top:16px;font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.faq{margin-top:40px;max-width:800px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 32px 18px 0;font-weight:600;font-size:16px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:13px;font:400 24px var(--font);color:var(--accent-text)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding:0 32px 18px 0;max-width:68ch}

.self{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.self h2{font-size:26px}
.self .intro{font-size:16px}
.self .note{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);background:var(--surface);padding:16px 18px;font-size:15px}

.sec.contact{background:var(--brand);color:#fff;border-bottom:0}
.sec.contact h2,.sec.contact .intro{color:#fff}.sec.contact h2::before{background:#fff}
.sec.contact .btn.primary{background:#fff;color:#2a3fcf;border-color:#fff}.sec.contact .btn.primary:hover{background:#eaecfa}
.sec.contact .btn.secondary{background:transparent;color:#fff;border-color:#fff}.sec.contact .btn.secondary:hover{background:#2335ae}
.sec.contact :focus-visible{outline-color:#fff}
.contact .mail{margin-top:28px;display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap}
.foot{background:var(--navy);color:var(--on-navy);border-top:1px solid var(--navy-line);padding:36px 0 44px;font-size:14px}
.foot .wrap{display:flex;gap:24px 40px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}.foot a{color:#fff}.foot .muted{color:#a9aed0}.foot :focus-visible{outline-color:#fff}.foot svg{display:block;height:20px;width:146px}
.foot .lg-p{display:none}.foot .lg-n{display:block}

@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1100px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hero .hero-h{max-width:22ch;font-size:clamp(32px,5vw,44px)}.hero .lead{max-width:56ch}}
@media (max-width:1023px){.car{--cw:calc((100% - var(--gap))/2);--vis:2}}
@media (max-width:960px){
 .bank{grid-template-columns:repeat(2,minmax(0,1fr))}.bk:nth-child(3){border-left:0}.bk:nth-child(n+3){border-top:1px solid var(--line)}
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}.hero .hero-h{max-width:20ch}
 .feat,.feat.flip,.sub,.self{grid-template-columns:minmax(0,1fr);gap:28px}.feat.flip .ft{order:0}.feat{padding:40px 0}
 .mods,.svc{grid-template-columns:1fr;gap:0}.mods>.mod:last-child{border-bottom:0}
 .plans{grid-template-columns:1fr}.plan+.plan{border-left:0;border-top:1px solid var(--line)}
 .site-h .wrap{gap:12px}.site-h nav{min-width:0;overflow-x:auto}.site-h nav a{padding:6px 8px;white-space:nowrap}
}
@media (max-width:720px){
 .bank{grid-template-columns:1fr}.bk+.bk{border-left:0;border-top:1px solid var(--line)}.bk:nth-child(n+3){border-top:1px solid var(--line)}.car{--vis:1;--cw:84%}
 .wrap{padding:0 16px}
 .site-h .wrap{flex-wrap:wrap;height:auto;gap:6px 10px;padding-top:10px;padding-bottom:0}
 .site-h nav{order:3;flex:none;width:100%;overflow-x:auto;margin:0 -8px;padding:0 8px 6px;gap:0}.site-h nav a{white-space:nowrap}
 .mark{flex:1}.mark svg{height:18px;width:132px}.hact{gap:6px}.hact .btn{padding:0 8px;font-size:12.5px}
 .hero{padding:36px 0 44px}.hero .lead{font-size:17px}
 .sec{padding:56px 0}.sec h2{font-size:26px}.sub{margin-top:48px;padding-top:32px}
 .kv{grid-template-columns:1fr}.kv dt{border-bottom:0;padding-bottom:0}.kv dd{padding-top:2px}
 .row2{grid-template-columns:1fr}
 .hero .br{display:none}
}
@container (max-width:820px){.kpis{grid-template-columns:repeat(2,1fr)}}
@container (max-width:679px){.rail,.side{display:none}.tabs{display:flex}.app{min-height:520px}.kpis{grid-template-columns:repeat(2,1fr)}}
@container (max-width:560px){.content{padding:14px 12px 16px}.hide-s{display:none}.url{display:none}.chromebar{justify-content:space-between}.dots{display:none}.kpi b{font-size:19px}.panel{width:100%;border-left:0}}
/* v4-nav: App-Navigation: Rail navy, Unternavigation navy-2, Kopfleiste hell */
:root{--nav-hover:#1b2358;--nav-active:#1f2870;--nav-muted:#a9aed0}
.rail{background:var(--navy);border-right:1px solid var(--navy-line);--ac:var(--ultra-d)}
.side{background:var(--navy-2);border-right:1px solid var(--navy-line);--ac:var(--ultra-d)}
.rail .logo{border:1px solid var(--ultra-d)}
.ri{color:var(--on-navy)}.ri:hover{background:var(--nav-hover);color:#fff}
.ri[aria-current=page]{background:var(--nav-active);color:#fff}.ri[aria-current=page]::before{background:var(--ultra-d)}
.side-h{color:#fff}
.si{color:var(--on-navy)}.si:hover{background:var(--nav-hover);color:#fff}
.si[aria-current=page]{background:var(--nav-active);color:#fff;box-shadow:inset 3px 0 0 var(--ultra-d)}
.sb{border:1px solid var(--ultra-d)}
.top{background:var(--surface);border-bottom:1px solid var(--line)}
.crumb{color:var(--muted)}.crumb b{color:var(--heading)}
.top .av{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent-line)}
/* v4-hero: wechselnder Text je Modul, feste Hoehe ueber den Sizer */
.hero .claim{font-size:15px;line-height:1.3;font-weight:600;color:#e4e8fb;margin:0 0 14px;letter-spacing:0}
.hero-copy{display:grid}.hc-sizer,.hc-live{grid-area:1/1;min-width:0}
.hc-sizer{display:grid;visibility:hidden;pointer-events:none}.hc-sizer .hc-set{grid-area:1/1;min-width:0}
.hc-live{transition:opacity .1s linear}.hc-live.out{opacity:0}
.hero-points{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.hero-points li{position:relative;padding-left:20px;font-size:15px;line-height:1.45;color:#fff}
.hero-points li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:#fff}
.site-h{--ac:var(--accent-text)}
.site-h nav a{display:inline-flex;align-items:center;gap:6px}.site-h nav .ic{flex:none}
/* v4-head-mid */
.seals{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 4px}
.seal{display:inline-flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border:1px solid var(--navy-line);background:var(--navy-2);color:#fff;border-radius:var(--r-lg)}
.seal .ic{color:var(--ultra-t)}.seal b{display:block;font-size:14px;font-weight:600;line-height:1.2}.seal small{display:block;font-size:12px;color:var(--on-navy);line-height:1.3}
.foot .seals{margin:0;gap:8px;flex:none}.foot .seal .ic{width:18px;height:18px}.foot .seal{padding:6px 10px 6px 8px}.foot .seal b{font-size:12.5px}.foot .seal small{display:none}
/* Vertiefungsabschnitte: Mitgliederportal, Controlling */
.sub.first{margin-top:40px;padding-top:0;border-top:0}.sub.first .pts{margin-top:0}
.sub .pts h4{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mock-h{display:flex;align-items:center;gap:10px;margin-bottom:12px}.mock-h b{font-size:15px;font-weight:600;flex:1;min-width:0}
.snip .kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.snip .kpi b{font-size:19px}
.bal{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.bal b{font:700 24px var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--heading)}
.bal small{display:block;color:var(--muted);font-size:12.5px}
.mock-note{margin-top:10px;font-size:12.5px;color:var(--muted)}
@media (max-width:720px){.snip .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Bewegung: nur transform und opacity. Alles Weitere steht im Reduced-Motion-Block unten. */
@keyframes bar-in{from{transform:scaleY(0)}}
@keyframes fade-in{from{opacity:0}}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:3px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;pointer-events:none}
.prog i{display:block;background:var(--accent-text);transform:scaleX(0);transform-origin:left}
.hero{position:relative}
.hero>.wrap{position:relative;z-index:1}
.hero-bars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
@media (hover:hover){
 .car-card{position:relative}
 .car-card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
 .car-card:hover::after,.car-card:focus-within::after{transform:none}
 .car-ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
 .car-card:hover .car-ic{transform:translateY(-3px)}
 .bk .bk-ic,.mod>.ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
 .bk:hover .bk-ic,.mod:hover>.ic{transform:translateY(-2px)}
}
@media print{.prog{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.prog{display:none}}

/* Beispielmodule: je Modulfamilie ein dezent getöntes Band (Mitglieder Ultramarin, Finanzen Grün, Veranstaltungen Bernstein, Eigene Abläufe Schiefer) */
.mband{--tint:var(--accent-text);background:color-mix(in srgb,var(--tint) 6%,var(--bg));border-top:4px solid var(--tint);border-bottom:1px solid color-mix(in srgb,var(--tint) 24%,var(--line))}
.mband.t-fin{--tint:var(--ok)}.mband.t-ev{--tint:var(--warn)}.mband.t-pro{--tint:var(--neu)}
@media (prefers-color-scheme:dark){.mband{background:color-mix(in srgb,var(--tint) 9%,var(--bg))}}
.mband h2::before{background:var(--tint)}
.mband .snip{background:var(--surface)}.mband .snip .snip{background:var(--bg)}
.mtag{display:inline-flex;align-items:center;gap:8px;margin:0 8px 18px 0;padding:3px 10px 3px 8px;border:1px solid color-mix(in srgb,var(--tint,var(--accent)) 45%,var(--line));border-radius:var(--r);background:var(--surface);color:var(--heading);font:600 13px/1.4 var(--font)}
.mtag i{display:block;width:8px;height:8px;background:var(--tint,var(--accent))}
.mtag+.chip{vertical-align:top;margin:3px 0 0}
.lead-in{padding:64px 0 40px}
.mlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.mlinks a{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);color:var(--heading);font:500 14px var(--font);text-decoration:none}
.mlinks a:hover{background:var(--accent-soft);color:var(--accent-text)}
.mlinks a i{display:block;width:8px;height:8px;background:var(--accent-text)}.mlinks a.t-fin i{background:var(--ok)}.mlinks a.t-ev i{background:var(--warn)}.mlinks a.t-pro i{background:var(--neu)}
.sub.wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.snip.cq,.mframe-d{container-type:inline-size}
/* Diagramme */
.chart{display:block;width:100%;height:auto}
.chart text{font:400 11px var(--font);fill:var(--muted)}.chart .gl{stroke:var(--line);stroke-width:1}.chart .ax{stroke:var(--line-strong);stroke-width:1}
.chart .b-in{fill:var(--accent-text)}.chart .b-out{fill:var(--muted)}
.chart .fc{fill:none;stroke:var(--accent-text);stroke-width:2;stroke-dasharray:6 4}.chart .m{fill:var(--accent-text)}.chart .m-low{fill:var(--err)}
.chart .thr{stroke:var(--err);stroke-width:1.5}.chart text.thr-t{fill:var(--err);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px;font-size:12.5px;color:var(--muted)}.legend span{display:inline-flex;align-items:center;gap:6px}.legend i{display:block;width:10px;height:10px}
.legend .l-in{background:var(--accent-text)}.legend .l-out{background:var(--muted)}.legend .l-fc{width:18px;height:0;border-top:2px dashed var(--accent-text)}.legend .l-thr{width:18px;height:0;border-top:2px solid var(--err)}
.stack-gap{display:grid;gap:14px}
/* Rechnungseditor */
.inv{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:start}
.inv .stack{gap:10px}
.inv .tbl td,.inv .tbl th{padding:6px 8px}
.paper{background:#fff;color:#2c2e3a;border:1px solid var(--line-strong);aspect-ratio:210/297;padding:6% 7%;font-size:10.5px;line-height:1.45;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.paper b{color:#0b1033}.paper .ph-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.paper .lh{display:flex;align-items:center;gap:6px;font-weight:700;color:#0b1033}.paper .lh span{display:grid;place-items:center;width:18px;height:18px;background:#2a3fcf;color:#fff;font-size:10px}
.paper table{width:100%;border-collapse:collapse;font-size:10px}.paper th{text-align:left;border-bottom:1.5px solid #0b1033;padding:2px 3px}.paper td{padding:2px 3px;border-bottom:1px solid #e2e3e9}.paper .r{text-align:right}
.paper .tot{display:flex;justify-content:space-between;font-weight:700;border-top:1.5px solid #0b1033;padding-top:3px;font-size:11px}
.paper .gc{margin-top:auto;display:flex;gap:8px;align-items:flex-end;font-size:9.5px;color:#4a525b}
.paper .wm{position:absolute;right:7%;top:6%;font-weight:700;font-size:10px;color:#8a5200;border:1.5px solid #8a5200;padding:0 4px}
@container (max-width:560px){.inv{grid-template-columns:minmax(0,1fr)}.inv .paper{max-width:340px}}
/* Veranstaltungen */
.ev-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px 0}
.ev-tabs span{display:inline-flex;height:26px;align-items:center;padding:0 9px;border:1px solid var(--control);border-radius:var(--r);background:var(--surface);font:500 12px var(--font)}
.ev-tabs span[aria-current]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text);font-weight:600}
.ev-bn{display:flex;justify-content:space-between;align-items:center;gap:8px 12px;flex-wrap:wrap;margin:10px 14px 0;padding:8px 10px;background:var(--info-bg);color:var(--info);font-size:12.5px;font-weight:500}
.ev-2{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:12px}
@container (max-width:560px){.ev-2{grid-template-columns:minmax(0,1fr)}}
.qr{width:88px;height:88px;flex:none;background:#fff;border:1px solid var(--line-strong);padding:4px}.qr svg{display:block;width:100%;height:100%}
.tk{display:flex;gap:12px;align-items:center;padding:12px 14px}
.scan-ok{display:flex;gap:10px;align-items:center;padding:8px 14px;border-top:1px solid var(--line);font-size:12.5px}
/* Eigener Ablauf (JPA) */
.pflow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;counter-reset:pf}
.pflow li{position:relative;padding:44px 10px 12px 0;font-size:12.5px;color:var(--muted)}
.pflow li::before{content:counter(pf);counter-increment:pf;position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;background:var(--tint,var(--neu));color:var(--surface);font:700 12px var(--font);z-index:1}
.pflow li::after{content:"";position:absolute;left:26px;right:0;top:12px;height:2px;background:var(--line-strong)}
.pflow li:last-child::after{display:none}
.pflow b{display:block;color:var(--heading);font-size:13.5px;margin-bottom:2px}.pflow .who{display:block;margin-bottom:6px;font-weight:600;color:var(--text)}
.pflow li{border:0;overflow-wrap:anywhere;hyphens:auto}
.loop{display:flex;gap:8px;align-items:center;margin:4px 0 0;padding:8px 10px;border:1px dashed var(--line-strong);font-size:12.5px;color:var(--muted)}
@media (max-width:720px){.pflow{grid-template-columns:minmax(0,1fr)}.pflow li{padding:2px 0 16px 40px;min-height:44px}.pflow li::after{left:12px;right:auto;top:26px;bottom:0;width:2px;height:auto}}
.ext{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.ext div{border:1px solid var(--line);background:var(--bg);padding:8px 10px;font-size:12.5px;color:var(--muted)}.ext b{display:block;color:var(--heading);font-size:13px}
@container (max-width:560px){.ext{grid-template-columns:minmax(0,1fr)}}
/* Portal im Browserfenster und als Telefon */
.pt-head{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line);border-top:4px solid var(--accent)}
.pt-head b{flex:1;font-size:15px;min-width:0}.pt-logo{display:grid;place-items:center;width:30px;height:30px;background:var(--accent);color:var(--on-accent);font:700 12px var(--font);flex:none}
.pt-nav{display:flex;gap:2px;padding:0 12px;background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden}
.pt-nav span{padding:9px 10px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}.pt-nav span[aria-current]{color:var(--accent-text);font-weight:600;box-shadow:inset 0 -3px 0 var(--accent)}
.pt-body{padding:16px;display:grid;gap:12px;background:var(--bg);text-align:left;font-size:13px}.pt-body>h4{font-size:20px;letter-spacing:-.025em}
.pt-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@container (max-width:620px){.pt-3{grid-template-columns:minmax(0,1fr)}}
.pt-body .card-b{display:grid;gap:6px;font-size:13px}.pt-body .card-b small{color:var(--muted);font-size:12px}
.pt-link{color:var(--accent-text);font-weight:600;font-size:13px}
.mframe-p{display:none}
.phone{width:min(290px,100%);margin:0 auto;border:8px solid var(--heading);background:var(--bg);font-size:13px;text-align:left}
.phone .pt-head{padding:8px 12px}.phone .pt-body{padding:12px;gap:10px}.phone .pt-body>h4{font-size:18px}
.ptab{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);background:var(--surface)}.ptab span{padding:9px 2px;text-align:center;font-size:11px;color:var(--muted)}.ptab span[aria-current]{color:var(--accent-text);font-weight:600;box-shadow:inset 0 3px 0 var(--accent)}
@media (max-width:720px){.mframe-d{display:none}.mframe-p{display:block}}
@media (max-width:1023px){.sub.wide{grid-template-columns:minmax(0,1fr)}}

/* Kopfzeile: oben weiß, nach dem Scrollen navy (Sentinel per IntersectionObserver, nur Farben, Rand und Schatten) */
.site-h{transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease}
.site-h nav a{transition:background-color .22s ease,color .22s ease}
.mark{position:relative}
.mark .lg-p{transition:opacity .22s ease}
.mark .lg-n{display:block;position:absolute;left:0;top:0;opacity:0;transition:opacity .22s ease}
@media (prefers-color-scheme:dark){.mark .lg-p{display:none}.mark .lg-n{position:static;opacity:1}}
.site-h .hact .btn{transition:background-color .22s ease,color .22s ease,border-color .22s ease}
#hs{position:absolute;top:24px;left:0;width:1px;height:1px;pointer-events:none}
.site-h.scrolled{background:var(--navy);border-bottom-color:var(--navy-line);box-shadow:0 6px 20px rgba(11,16,51,.28);--ac:var(--ultra-t)}
.site-h.scrolled .mark .lg-p{opacity:0}.site-h.scrolled .mark .lg-n{opacity:1}
.site-h.scrolled nav a{color:var(--on-navy)}.site-h.scrolled nav a:hover{background:var(--nav-hover);color:#fff}
.site-h.scrolled .btn.secondary{background:transparent;color:#fff;border-color:#fff}.site-h.scrolled .btn.secondary:hover{background:rgba(255,255,255,.14)}
.site-h.scrolled .btn.primary{border-color:var(--ultra-d)}
.site-h.scrolled .prog i{background:var(--ultra-t)}
.site-h.scrolled :focus-visible{outline-color:#fff}
@media (prefers-color-scheme:dark){.site-h.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.5)}}
@media print{.site-h{position:static}}

.pcard-wrap{min-width:0;perspective:900px;container-type:inline-size}
.pcard{max-width:460px;margin:0 auto;aspect-ratio:85.6/54;background:#0b1033;color:#fff;padding:5% 6%;display:flex;flex-direction:column;gap:3%;border-top:6px solid #2a3fcf;box-shadow:0 18px 40px rgba(11,16,51,.3);position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pcard::after{content:"";position:absolute;right:-8%;bottom:-30%;width:40%;height:90%;background:rgba(255,255,255,.06);transform:skewX(-10deg)}
@media (hover:hover){.pcard:hover{transform:rotateY(-6deg) rotateX(3deg)}}
.pc-top{display:flex;align-items:center;gap:8px;font-weight:600;font-size:clamp(11px,2.6cqw,14px)}.pc-org{flex:1}.pc-yr{color:#9aa6f0;font-weight:700}
.pc-logo{display:grid;place-items:center;width:1.9em;height:1.9em;background:#2a3fcf;color:#fff;font-weight:700;font-size:.85em}
.pc-title{font-weight:700;letter-spacing:-.02em;font-size:clamp(17px,4.6cqw,24px);line-height:1.1}
.pc-main{display:flex;gap:5%;align-items:flex-start;flex:1}
.pc-ph{display:block;width:26%;aspect-ratio:35/45;flex:none;background:#c9cdf0;overflow:hidden}.pc-ph svg{display:block;width:100%;height:100%}.pc-ph.sm{width:44px}
.pc-dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:clamp(10.5px,2.6cqw,14px);align-content:start}.pc-dl dt{color:#c9cdf0}.pc-dl dd{margin:0;font-weight:600}
.pc-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c9cdf0;position:relative;z-index:1}
.pc-bars{display:flex;gap:3px}.pc-bars i{display:block;width:8px;height:14px;background:#9aa6f0}.pc-bars i:nth-child(2){margin-top:5px}
.pmocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:32px 0 0;align-items:start}
.pm{margin:0;min-width:0}.pm figcaption{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:var(--heading);margin-bottom:10px}
.pn{display:grid;place-items:center;width:24px;height:24px;background:var(--tint);color:var(--surface);font:700 12px var(--font);flex:none}
.pm .tbl th,.pm .tbl td{padding:6px 8px;font-size:12.5px}.mail-m{display:grid;gap:10px}.pm .tbl td:first-child{white-space:nowrap}
@media (max-width:1023px){.pmocks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.pmocks{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pcard{transition:none}.pcard:hover{transform:none}}

/* ===================== Fassung 2.5 (CI-Stufe 2.5, 2026-10-24) =====================
   Navy trägt die Flächen (Bühne, Ausprobieren, Fußzeile), Ultramarin nur als kleiner Akzent
   (eine gefüllte Aktion je Ansicht, Links, Fokus, aktive Marker). Überschriften Plus Jakarta Sans 300/400,
   Text Inter. Linien 1 px, Bedienelemente 4 px, Flächen 0 px. Keine Einblend-Animation: alles ist im Ruhezustand sichtbar. */
@font-face{font-family:'Plus Jakarta Sans';font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/PlusJakartaSans-300.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/PlusJakartaSans-400.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/PlusJakartaSans-500.woff2) format('woff2')}
:root{--bg:#f8f8f7;--surface:#fff;--surface-2:#f1f1f0;--line:#e6e6e9;--line-strong:#c5c7d3;--control:#8689a4;--text:#2a2b33;--heading:#0b1033;--muted:#62646f;--tone:#6f7184;--tone-dark:#8f95bd;
--r:4px;--r-lg:0px;--display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;--nav-hover:#1b2358}
@media (prefers-color-scheme:dark){:root{--bg:#0b1033;--surface:#131a47;--surface-2:#1b2358;--line:#2b3470;--line-strong:#4a5497;--text:#eceefb;--heading:#fff;--muted:#a9aed0;--tone:#8f95bd}}
body{background:var(--bg);color:var(--text)}
.wrap{max-width:1280px;padding:0 32px}
.tn{color:var(--tone)}
.on-dark .tn{color:var(--tone-dark)}
.kick{display:block;font:500 13px/1.3 var(--font);color:var(--muted);margin-bottom:16px}
.on-dark .kick{color:#a9aed0}

/* Buttons: Outline ist Standard, gefüllt nur die eine Hauptaktion */
.btn{border-radius:4px;font-weight:500}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.secondary{background:transparent;color:var(--heading);border-color:var(--heading)}.btn.secondary:hover{background:var(--surface-2)}
.on-dark .btn.secondary{color:#fff;border-color:#fff}.on-dark .btn.secondary:hover{background:rgba(255,255,255,.1)}
.on-dark .btn.primary{border-color:#7582e0}
.on-dark :focus-visible{outline-color:#fff}

/* Lockup: Signet unverändert, Wortmarke Inter 500 (nur Landingpage, offener Punkt laut CI-Stufen) */
.lockup{display:inline-flex;align-items:center;gap:.32em;font:500 26px/1 var(--font);letter-spacing:-.02em;color:var(--heading);text-decoration:none;white-space:nowrap}
.lockup svg{width:.74em;height:.74em;flex:none;display:block}
.lockup .sg{fill:var(--accent)}
.on-dark .lockup,.site-h .lockup,.foot .lockup{color:#fff}.on-dark .lockup .sg,.site-h .lockup .sg,.foot .lockup .sg{fill:#9aa6f0}

/* Kopfzeile: liegt auf der Navy-Bühne */
.site-h{background:var(--navy);border-bottom:1px solid var(--navy-line);--ac:#9aa6f0}
.site-h.scrolled{box-shadow:0 6px 20px rgba(11,16,51,.28)}
.site-h .wrap{max-width:1280px;height:68px;gap:28px}
.site-h nav{gap:4px;flex:1;justify-content:center}
.site-h nav a{color:#c9cdf0;font-size:14.5px;font-weight:400;padding:8px 10px;border-radius:4px}
.site-h nav a:hover{background:var(--nav-hover);color:#fff}
.hact{gap:16px;align-items:center}
.hact .lnk{color:#fff;text-decoration:none;font-size:14.5px;padding:10px 4px}.hact .lnk:hover{text-decoration:underline;text-underline-offset:4px}
.navbtn{display:none;align-items:center;gap:8px;height:44px;padding:0 12px;border:1px solid #c9cdf0;border-radius:4px;background:transparent;color:#fff;font:500 14px var(--font);cursor:pointer}
.navbtn svg{display:block}
.prog i{background:#9aa6f0}

/* Bühne */
.hero{background:var(--navy);color:#c9cdf0;padding:0;position:relative;overflow:hidden}
.hero .wrap{max-width:1280px;position:relative}
.hero-orn{position:absolute;right:-6%;top:-4%;width:min(56vw,720px);height:auto;pointer-events:none}
.hero-orn g{fill:none;stroke:#2b3470;stroke-width:.8}
.hero-in{padding:clamp(72px,12vw,176px) 0 clamp(40px,6vw,80px);display:grid;gap:26px;position:relative}
.hero h1{font:300 clamp(44px,8.2vw,108px)/1.0 var(--display);letter-spacing:-.03em;color:#fff;max-width:13ch;text-wrap:balance;margin:0}
.hero h1 .tn{color:#8f95bd}
.hero .lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:#c9cdf0;max-width:48ch;margin:0}
.hero .cta{margin-top:4px;gap:12px}
.hero .facts{margin:0;font-size:14px;color:#a9aed0}
.forms{display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;border-top:1px solid var(--navy-line);padding:18px 0 22px;font:400 14.5px var(--display);color:#a9aed0;position:relative}
.forms b{font-weight:500;color:#fff;margin-right:18px}
.forms span{padding:0 16px;border-left:1px solid var(--navy-line)}
.forms span:first-of-type{border-left:0;padding-left:0}

/* Abschnitte */
section{scroll-margin-top:72px}
.sec{padding:clamp(72px,10vw,150px) 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--surface)}
.sec h2{font:300 clamp(32px,4.6vw,56px)/1.06 var(--display);letter-spacing:-.025em;max-width:22ch;color:var(--heading)}
.sec h2::before{display:none}
.sec .intro{font-size:18px;line-height:1.6;color:var(--muted);max-width:60ch;margin-top:18px}
.sec h3,.feat h3,.sub h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em}

/* Module (Karussell) */
.car{margin-top:56px}
.car-card{background:transparent;border:0;border-top:1px solid var(--heading);padding:22px 4px 0 0}
.car-card h3{font:400 23px/1.2 var(--display);letter-spacing:-.015em}
.car-ic{width:40px;height:40px;margin-bottom:14px;--ac:var(--heading)}.car-ic svg{width:40px;height:40px}
.car-list .ic{color:var(--heading)}
.car-dot i{background:var(--line-strong);width:10px;height:10px}.car-dot[aria-current=true] i{background:var(--heading);height:10px;width:22px}
.car-nav button{border-radius:4px;border-color:var(--heading);background:transparent}
.car-card::after{background:var(--heading)!important;height:1px!important}

/* Abläufe */
.feat{border-top:1px solid var(--line);gap:72px}
.feat h3{font-size:clamp(22px,2.4vw,30px);line-height:1.2;color:var(--heading)}
.feat li .ic,.sub .pts .ic,.plan li .ic,.sec-list .ic{color:var(--heading)}
.snip{background:var(--surface);border:1px solid var(--line);border-radius:0}

/* Status als Punkt plus Wort, in allen App-Ausschnitten und in der Demo */
.app .chip,.snip .chip,.mframe .chip{background:none;height:auto;padding:0;gap:7px;font-weight:500;color:var(--text)}
.app .chip::before,.snip .chip::before,.mframe .chip::before{width:7px;height:7px;border-radius:50%;background:var(--neu)}
.app .chip.ok::before,.snip .chip.ok::before,.mframe .chip.ok::before{background:var(--ok)}
.app .chip.warn::before,.snip .chip.warn::before,.mframe .chip.warn::before{background:var(--warn)}
.app .chip.err::before,.snip .chip.err::before,.mframe .chip.err::before{background:var(--err)}
.app .chip.info::before,.snip .chip.info::before,.mframe .chip.info::before{background:var(--info)}
.app .chip.acc::before,.snip .chip.acc::before,.mframe .chip.acc::before{background:var(--accent-text)}
.chip{border-radius:4px}

/* Tabellen und Kennzahlen im 2.5-Stil */
.tw{border:0;background:transparent;border-radius:0}
.tbl th{background:transparent;color:var(--muted);font-weight:500;border-bottom:1px solid var(--heading)}
.tbl td{padding:9px 10px}
.tbl td small{display:block;color:var(--muted);font-size:12px;margin-top:1px}
.kpi{border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;padding:4px 16px}
.kpi b{font:300 26px/1.1 var(--display);letter-spacing:-.015em}
.kpis{gap:0;border-top:1px solid var(--heading);padding-top:12px}
.kpis>.kpi:first-child{border-left:0;padding-left:0}
.card{border-color:var(--line)}
.card-h h4{font-family:var(--display);font-weight:400;font-size:15px}
.steps .done .n{background:var(--heading);border-color:var(--heading)}
.steps li.done:not(:last-child)::after{background:var(--heading)}

/* Ausprobieren: Demo auf der Navy-Bühne */
.sec.try{background:var(--navy);color:#c9cdf0;border-bottom:0}
.sec.try h2{color:#fff}
.sec.try .intro{color:#c9cdf0}
.try-frame{margin-top:clamp(32px,4vw,56px)}
.try .frame{border-color:var(--navy-line);box-shadow:none}
.try .demo-hint,.try .demo-hint p{color:#c9cdf0}
.try .demo-hint{margin-top:18px}
.try .tries{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none;font-size:15px}
.try .tries li{display:flex;gap:8px;align-items:center}.try .tries .ic{color:#9aa6f0}
#demo-frame{container-type:inline-size}

/* Demo-App in den 2.5-App-Tokens: Navy-Leiste mit 2-px-Marker, Titel in Display-Schrift, Punkt-Status, Schublade */
.app{background:var(--bg)}
.rail{background:var(--navy);border-right:1px solid #1b2358}
.side{background:var(--navy);border-right:1px solid #1b2358}
.ri[aria-current=page]{background:transparent;color:#fff}.ri[aria-current=page]::before{width:2px;background:#7582e0;left:-8px}
.si{border-radius:0;color:#b9bedf}
.si[aria-current=page]{background:transparent;color:#fff;font-weight:500;box-shadow:inset 2px 0 0 #7582e0}
.side-h{font:300 18px/1.2 var(--display);color:#fff;letter-spacing:-.01em;padding:4px 10px 14px}
.sb{background:transparent;border:0;color:#8f95bd;font-weight:500}
.rail .logo{background:transparent;border:0;color:#9aa6f0}
.top{background:var(--bg);border-bottom:1px solid var(--line)}
.top .av{background:var(--surface-2);color:var(--heading);border:0}
.content{background:var(--bg);padding:20px 24px 24px;gap:18px}
.ph{border-bottom:1px solid var(--line);padding-bottom:12px}
.ph h3{font:300 26px/1.15 var(--display);letter-spacing:-.02em}
.fchip{border-radius:4px;border-color:var(--line);background:var(--surface)}
.fchip[aria-pressed=true]{background:var(--surface);border-color:var(--heading);color:var(--heading);font-weight:500}
.panel{box-shadow:none;border-left:1px solid var(--line);background:var(--surface)}
.panel-h{padding:16px 18px}
.panel-h h4{font:300 22px/1.15 var(--display);letter-spacing:-.015em}
.panel-b{padding:16px 18px}
.toast{border-radius:4px}
.evrow[aria-pressed=true]{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.progress{border:0;height:4px;background:var(--line)}.progress i{background:var(--heading)}

/* Beispielmodule: Tönung nur noch als Punkt in der Marke, Flächen ruhig */
.lead-in{padding:clamp(72px,10vw,150px) 0 48px}
.mlinks a{border-radius:4px;border-color:var(--line-strong);background:transparent;min-height:40px}
.mband{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mband:nth-of-type(even){background:var(--bg)}
@media (prefers-color-scheme:dark){.mband{background:var(--surface)}.mband:nth-of-type(even){background:var(--bg)}}
.mtag{border-radius:4px;border-color:var(--line-strong);background:transparent}
.mtag i{border-radius:50%}
.mband .snip{background:var(--surface)}

/* Bank, Service */
.bank{border:0;background:transparent;gap:32px}
.bk{padding:20px 0 0;border-top:1px solid var(--heading)}.bk+.bk{border-left:0}
.bk h3{font:400 19px/1.25 var(--display)}
.bk-ic{--ac:var(--heading)}
.mod{border-top:1px solid var(--line)}.mod .ic{color:var(--heading)}
.mod h3{font:400 18px/1.3 var(--display)}

/* Sicherheit: helles Band mit prüfbaren Fakten */
.sec.trust{background:var(--surface)}
.facts-rows{margin-top:clamp(32px,4vw,56px);border-top:1px solid var(--heading)}
.facts-rows div{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:baseline;padding:clamp(14px,2vw,24px) 0;border-bottom:1px solid var(--line)}
.facts-rows dt{font-size:16px;color:var(--text);margin:0}
.facts-rows dd{margin:0;font:300 clamp(32px,4.8vw,60px)/1 var(--display);letter-spacing:-.02em;color:var(--heading);font-variant-numeric:tabular-nums}
.sec-list{max-width:none;border:0;background:transparent;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px}
.sec-list li{padding:16px 0;border-bottom:1px solid var(--line)}
.sec-list li:last-child{border-bottom:1px solid var(--line)}

/* Preise */
.plans{border:0;background:transparent;gap:32px;overflow:visible}
.plan{padding:20px 0 0;border-top:1px solid var(--heading)}.plan+.plan{border-left:0}
.plan.hl{background:transparent;box-shadow:none;border-top:1px solid var(--heading)}
.plan h3{font:400 20px/1.2 var(--display);display:flex;gap:10px;align-items:center}
.plan .chip.acc{background:transparent;border:1px solid var(--line-strong);color:var(--heading);font-weight:500}.plan .chip.acc::before{display:none}
.price{font:300 clamp(40px,4vw,52px)/1 var(--display);letter-spacing:-.02em}
.price small{font:400 14px var(--font);letter-spacing:0}
.plan ul{border-top:1px solid var(--line);padding-top:12px}
.price-notes li::before{background:var(--heading);border-radius:50%}

/* FAQ */
.faq{max-width:none;display:grid}
.faq summary{font:400 clamp(17px,1.6vw,20px)/1.35 var(--display);padding:20px 40px 20px 0;color:var(--heading)}
.faq summary::after{color:var(--heading);top:16px}

/* Selbst betreiben */
.self .note{border:0;border-top:1px solid var(--heading);border-radius:0;background:transparent;padding:16px 0 0}
.self h2{font-size:clamp(28px,3.4vw,40px)}

/* Kontakt: hell, eine gefüllte Aktion */
.sec.contact{background:var(--bg);color:var(--text);border-bottom:0}
.sec.contact h2{color:var(--heading)}.sec.contact .intro{color:var(--muted)}
.sec.contact .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.sec.contact .btn.primary:hover{background:var(--accent-hover)}
.sec.contact .btn.secondary{background:transparent;color:var(--heading);border-color:var(--heading)}
.sec.contact :focus-visible{outline-color:var(--focus)}

/* Fußzeile */
.foot{padding:56px 0 40px;border-top:0}
.foot .wrap{display:grid;grid-template-columns:2fr 1fr;gap:32px 48px;align-items:start}
.foot .fcol{display:grid;gap:12px;align-content:start}
.foot nav{justify-content:flex-end}
.foot .ffacts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;border-top:1px solid var(--navy-line);padding-top:16px;color:#a9aed0}
.foot .ffacts span+span{padding-left:18px;border-left:1px solid var(--navy-line)}
.foot .lockup{font-size:22px}

/* Bewegung: nur Hover, Fokus und Akkordeon; keine Einblendungen. */
.btn,.site-h nav a,.mlinks a,.fchip{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Breiten */
@media (max-width:1180px){.site-h nav a{padding:8px 7px;font-size:14px}}
@media (max-width:1023px){
 .navbtn{display:inline-flex}
 .site-h .wrap{flex-wrap:wrap;height:auto;min-height:64px;gap:8px 16px;padding-top:10px;padding-bottom:10px}
 .site-h .lockup{flex:1}
 .site-h nav{order:3;width:100%;flex:none;display:grid;gap:0;justify-content:stretch;overflow:visible;padding:4px 0 8px;margin:0;border-top:1px solid var(--navy-line)}
 .site-h nav a{display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:16px;border-bottom:1px solid #1b2358;border-radius:0}
 .site-h.js-nav:not(.open) nav{display:none}
 .hact .lnk{display:none}
 .sec-list{grid-template-columns:1fr}
}
@media (max-width:960px){.plans{grid-template-columns:1fr;gap:40px}.foot .wrap{grid-template-columns:1fr}.foot nav{justify-content:flex-start}}
@media (max-width:720px){
 .wrap{padding:0 16px}
 .facts-rows div{grid-template-columns:1fr;gap:6px}
 .forms span{padding:0 10px}
 .hero .cta .btn,.contact .mail .btn{min-height:48px}
 .car-dot{width:44px;height:44px}
 .mlinks a{min-height:44px}
 .car-nav button{width:44px;height:44px}
 .hact .btn{height:44px;padding:0 14px;font-size:14px}
 .foot nav a,.foot .ffacts span{min-height:44px;display:inline-flex;align-items:center}
 .faq summary{min-height:44px}
 .app .btn,.app .fchip,.app .inp,.app select.inp{min-height:44px}
 .app .btn.sm{min-height:40px}
 .si{min-height:44px}
}
.site-h .btn.secondary{color:#fff;border-color:#c9cdf0;background:transparent}.site-h .btn.secondary:hover{background:rgba(255,255,255,.1)}
.site-h :focus-visible{outline-color:#fff}
.hero .cta .link{color:#fff}
@media (max-width:480px){.hact .btn{display:none}.site-h .lockup{font-size:22px}}
@media (max-width:720px){.btn,.app .btn.sm{min-height:44px}.lockup{padding:11px 0}.skip{min-height:44px;display:inline-flex;align-items:center}}
/* Demo-Fenster auf der Bühne: eigene helle App-Farben, nichts von der Bühne erben */
.try .frame{color:var(--text)}
.try .frame .btn.secondary{color:var(--heading);border-color:var(--heading);background:transparent}
.try .frame .btn.primary{border-color:var(--accent)}
.try .frame :focus-visible{outline-color:var(--focus)}
.app .kpis{border-top:0;padding-top:0}
.dsteps{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}.dsteps li{display:flex;gap:8px;align-items:center;color:var(--muted)}.dsteps li::before{content:"";width:12px;height:12px;border-radius:50%;border:1px solid var(--control);flex:none}.dsteps li.done{color:var(--text)}.dsteps li.done::before{background:var(--ok);border-color:var(--ok)}.dsteps li.cur{color:var(--heading);font-weight:500}.dsteps li.cur::before{border:3px solid var(--accent)}
/* ===================== Fassung 2.5b: Kopfzeile mit Mega-Menü (2026-10-24) =====================
   Größer und ruhiger: 84 px Höhe, Navigation 16 px, wenige Punkte, "Module" und "Funktionen" öffnen ein Panel
   auf Navy mit Haarlinien und leichten Gruppentiteln. Hauptaktion in der Kopfzeile: weiß gefüllt (keine zweite
   Ultramarin-Fläche neben der Bühne). Ohne JS: Panels bleiben zu, die Hauptpunkte sind normale Links. */
section{scroll-margin-top:92px}
.site-h{position:sticky;top:0;z-index:30}
.site-h .wrap{height:84px;gap:40px}
.site-h .lockup{font-size:28px}
.site-h nav{flex:1;display:flex;justify-content:center;gap:0}
.nv{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nv>li{display:flex}
.site-h .nv-a,.site-h .nv-b{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;border:0;border-radius:4px;background:transparent;color:#e3e6fa;font:400 16px/1 var(--font);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap}
.site-h .nv-a:hover,.site-h .nv-b:hover{background:var(--nav-hover);color:#fff}
.site-h .nv-a[hidden],.site-h .nv-b[hidden]{display:none}
.nv-chev{flex:none;transition:transform .15s ease;opacity:.8}
.nv-b[aria-expanded=true]{color:#fff;background:var(--nav-hover)}
.nv-b[aria-expanded=true] .nv-chev{transform:rotate(180deg)}
.nv-foot{display:none}
.hact{display:flex;align-items:center;gap:20px}
.site-h .hact .lnk{font-size:16px;color:#fff;padding:12px 4px}
.site-h .btn.hbtn{height:48px;padding:0 22px;font:500 15px var(--font);background:#fff;color:var(--navy);border:1px solid #fff;border-radius:4px}
.site-h .btn.hbtn:hover{background:#e3e6fa;border-color:#e3e6fa}
.navbtn{height:48px;padding:0 16px;font-size:15px}

/* Panel */
.mm{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy);border-top:1px solid var(--navy-line);border-bottom:1px solid var(--navy-line);box-shadow:0 28px 48px -12px rgba(5,8,28,.55);max-height:calc(100vh - 84px);overflow-y:auto;color:#c9cdf0}
.mm.is-open{display:block}
.mm-in{max-width:1280px;margin:0 auto;padding:48px 32px 52px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr);gap:56px;align-items:start}
.mm-k{margin:0 0 14px;font:500 13px var(--font);color:#a9aed0}
.mm-h{margin:0;font:300 30px/1.12 var(--display);letter-spacing:-.02em;color:#fff;text-wrap:balance}
.mm-h span{color:#8f95bd}
.mm-lead p.mm-p{margin:16px 0 0;font-size:15px;line-height:1.55;color:#a9aed0}
.site-h nav .mm-all{padding:0;border:0;border-radius:0;background:none;display:flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;color:#fff;font:500 15px var(--font);text-decoration:underline;text-decoration-color:#4a5497;text-underline-offset:5px}
.site-h nav .mm-all+.mm-all{margin-top:0}
.site-h nav .mm-all:hover{text-decoration-color:#fff}
.site-h nav .mm-all svg{color:var(--ultra-t);flex:none}
.mm-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:0 36px}
.mm-gt{margin:0 0 10px;font:300 21px/1.2 var(--display);letter-spacing:-.01em;color:#8f95bd}
.mm-g ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--navy-line)}
.mm-g li{border-bottom:1px solid #1b2358}
.site-h nav .mm-a{display:block;padding:13px 0 14px;text-decoration:none;min-height:44px;border:0;border-radius:0;background:none;color:inherit;font-size:inherit}
.site-h nav .mm-a:hover{background:none}
.mm-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;color:#fff;font:500 15.5px/1.3 var(--font)}
.mm-d{display:block;margin-top:4px;color:#a9aed0;font-size:14px;line-height:1.45}
.site-h nav .mm-a:hover .mm-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:#8f95bd}
.site-h nav .mm-a[aria-current=page] .mm-t{box-shadow:inset 2px 0 0 var(--ultra-t);padding-left:10px}
.mm-pre{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--font);color:#a9aed0;white-space:nowrap}
.mm-pre::before{content:"";width:6px;height:6px;border-radius:50%;background:#8f95bd}
.mm-feat .mm-fb{border-top:1px solid var(--navy-line);padding-top:14px}
.mm-feat .mm-fb p{margin:0;font-size:14px;line-height:1.5;color:#a9aed0}
.site-h nav .mm-feat .btn{margin-top:18px;height:44px;padding:0 18px;color:#fff;border-color:#fff;background:transparent}
.site-h nav .mm-feat .btn:hover{background:rgba(255,255,255,.1)}
.site-h.mm-open{box-shadow:none}

/* Breiten */
@media (max-width:1240px){.site-h .wrap{gap:24px}.site-h .nv-a,.site-h .nv-b{padding:0 12px;font-size:15.5px}.mm-in{grid-template-columns:minmax(0,1fr);gap:32px}}
@media (min-width:1024px){.site-h.js-nav nav{display:flex!important}}
@media (max-width:1023px){
 .site-h .wrap{height:auto;min-height:72px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:8px 16px}
 .site-h nav{order:3;width:100%;flex:none;display:block;max-height:calc(100vh - 72px);overflow-y:auto;padding:4px 0 20px;margin:0;border-top:1px solid var(--navy-line)}
 .nv{display:block}
 .nv>li{display:block;border-bottom:1px solid var(--navy-line)}
 .site-h .nv-a,.site-h .nv-b{display:flex;width:100%;justify-content:space-between;height:auto;min-height:60px;padding:0 2px;border-radius:0;font:400 22px/1.2 var(--display);letter-spacing:-.01em;color:#fff}
 .site-h .nv-a:hover,.site-h .nv-b:hover,.nv-b[aria-expanded=true]{background:transparent}
 .nv-chev{width:16px;height:16px}
 .mm{position:static;box-shadow:none;border:0;max-height:none;overflow:visible;background:transparent}
 .mm-in{display:block;padding:0 0 20px;max-width:none}
 .mm-lead{display:none}
 .mm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
 .mm-gt{font-size:17px;margin:4px 0 6px}
 .site-h nav .mm-a{padding:11px 0}
 .mm-d{font-size:13.5px}
 .nv-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:20px 0 4px}
 .site-h nav .nv-foot .btn{height:48px;padding:0 20px;font:500 15px var(--font)}
 .site-h nav .nv-foot .lnk{color:#fff;font-size:16px;min-height:44px;display:inline-flex;align-items:center}
 .site-h .hact .lnk{display:none}
}
@media (max-width:640px){.mm-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.site-h .hact .btn.hbtn{display:none}.site-h .lockup{font-size:24px}}
@media (prefers-reduced-motion:reduce){.nv-chev{transition:none}}
/* Ohne JS: Navigation als offene Liste, Kopfzeile unter 1024 px nicht klebend, Menü-Taste ausgeblendet */
@media (max-width:1023px){.site-h:not(.js-nav){position:relative}.site-h:not(.js-nav) .navbtn{display:none}.site-h:not(.js-nav) nav{max-height:none}}
@media (min-width:1024px) and (max-width:1240px){.mm-in{padding-top:32px;padding-bottom:36px}.mm-lead{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}.mm-lead .mm-k,.mm-lead .mm-p{display:none}.mm-h{font-size:24px;margin-right:12px}.site-h nav .mm-all{margin-top:0}}
/* ===================== Fassung 2.5b: Modul-Karussell (2026-10-24) =====================
   Alle elf Module als große, leichte Folien auf Haarlinien. Ohne JS eine seitlich scrollbare Reihe mit Scroll-Snap;
   mit JS kommen Zähler, Folienwahl und Pfeile dazu. Kein automatisches Wechseln. */
.car{margin-top:clamp(48px,6vw,88px);--sw:min(880px,74%);--gap:clamp(24px,3.4vw,56px);position:relative}
.car-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:28px}
.car-bar[hidden]{display:none}
.car-count{margin:0;display:flex;align-items:baseline;gap:12px;min-width:0}
.car-count b{font:300 clamp(44px,5vw,72px)/.9 var(--display);letter-spacing:-.04em;color:var(--heading);font-variant-numeric:tabular-nums}
.car-count span{font:400 15px var(--font);color:var(--muted);white-space:nowrap}
.car-ctl{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap}
.car-dots{display:flex;flex-wrap:wrap}
.car-dot{width:30px;height:44px;border:0;background:none;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:0}
.car-dot i{display:block;width:22px;height:1px;background:var(--line-strong);transition:background-color .15s ease,height .15s ease}
.car-dot:hover i{background:var(--muted)}
.car-dot[aria-current=true] i{height:3px;background:var(--heading)}
.car-nav{display:flex;gap:8px}
.car-nav button{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--heading);border-radius:4px;background:transparent;color:var(--heading);cursor:pointer;transition:background-color .15s ease}
.car-nav button:hover{background:var(--surface-2)}
.car-view{display:flex;gap:var(--gap);margin:0;padding:0 0 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.car-view::after{content:"";flex:0 0 calc(100% - var(--sw) - var(--gap))}
.car.js .car-view{scrollbar-width:none;padding-bottom:4px}
.car.js .car-view::-webkit-scrollbar{display:none}
.car-view:focus-visible{outline:2px solid var(--focus,var(--accent));outline-offset:6px}
.car-card{flex:0 0 var(--sw);scroll-snap-align:start;scroll-margin-top:120px;background:transparent;border:0;border-top:1px solid var(--heading);padding:24px 0 8px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0 clamp(28px,4vw,56px);align-content:start}
.car-card::after{display:none!important}
.car-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 28px;font:500 13px/1.4 var(--font);color:var(--muted)}
.car-no{color:var(--heading);font-variant-numeric:tabular-nums}
.car-pre{display:inline-flex;align-items:center;gap:7px;color:var(--text)}
.car-pre::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--info,#3d5a99)}
.car-main{min-width:0}
.car-card .car-ic{display:block;width:44px;height:44px;margin:0 0 22px;color:var(--heading);--ac:var(--accent-text)}
.car-card .car-ic svg{display:block;width:44px;height:44px}
.car-card h3{font:300 clamp(30px,3.3vw,46px)/1.05 var(--display);letter-spacing:-.03em;color:var(--heading);text-wrap:balance;margin:0}
.car-card .car-main>p{font-size:17px;line-height:1.55;color:var(--muted);margin:16px 0 0;max-width:40ch}
.car-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:14px}
.car-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--heading);font:500 15px var(--font);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.car-links a:hover{text-decoration-color:var(--heading)}
.car-links svg{flex:none;color:var(--accent-text)}
.car-card .car-list{margin:68px 0 0;padding:0;list-style:none;display:block;border-top:1px solid var(--line);font-size:15px}
.car-card .car-list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text)}
.car-card .car-list .ic{flex:none;margin-top:4px;color:var(--heading);--ac:var(--heading)}
@media (max-width:1023px){.car{--sw:86%}}
@media (max-width:820px){.car-card{grid-template-columns:minmax(0,1fr)}.car-card .car-list{margin-top:24px}}
@media (max-width:720px){.car{--sw:88%;--gap:20px}.car-meta{margin-bottom:20px}.car-card .car-ic{width:36px;height:36px;margin-bottom:16px}.car-card .car-ic svg{width:36px;height:36px}.car-dot{width:26px}.car-dot i{width:18px}.car-bar{align-items:center}}
@media (max-width:480px){.car-dots{display:none}}
@media (prefers-reduced-motion:reduce){.car-dot i,.car-nav button{transition:none}}

/* ===================== Fassung 2.5b: Beispielmodule in Richtung CI 3.0 =====================
   Papier und Tinte: alle Modulbänder auf demselben Grund, getrennt durch Haarlinien. Titel Plus Jakarta Sans 300
   groß, Zweiton. Ansichten als ruhige gerahmte Bildschirme (weiß, 1 px Linie, flacher Schatten, Fensterleiste mit
   drei Punkten). In den Ansichten: Tinte statt Ultramarin für Reiter und Aktionen, Status als Punkt plus Wort,
   Kennzahlen mit Sparkline. Ultramarin bleibt kleiner Akzent (Signet-Punkte, Prognoselinie, Logo der Organisation). */
.lead-in{padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.mlinks{display:flex;flex-wrap:wrap;gap:0;margin-top:40px;border-top:1px solid var(--heading)}
.mlinks a{display:inline-flex;align-items:center;gap:10px;min-height:56px;height:auto;padding:0 28px 0 0;margin-right:28px;border:0;border-radius:0;background:transparent;color:var(--heading);font:400 18px var(--display);text-decoration:none}
.mlinks a:hover{background:transparent;text-decoration:underline;text-underline-offset:5px}
.mlinks a i{width:6px;height:6px;border-radius:50%;background:var(--heading)}
.mlinks a .chip{font-size:12px}
.mband,.mband:nth-of-type(even){background:var(--bg);border-top:0;border-bottom:1px solid var(--line)}
@media (prefers-color-scheme:dark){.mband,.mband:nth-of-type(even){background:var(--bg)}}
.mband{padding:clamp(80px,10vw,150px) 0}
.mband h2{font:300 clamp(36px,5.2vw,68px)/1.03 var(--display);letter-spacing:-.035em;max-width:19ch;color:var(--heading)}
.mband h2::before{display:none}
.mband .intro{font-size:clamp(17px,1.4vw,19px);max-width:58ch;margin-top:24px}
.mtag{display:inline-flex;align-items:center;gap:10px;margin:0 16px 22px 0;padding:0;border:0;border-radius:0;background:transparent;color:var(--muted);font:500 13px/1.4 var(--font)}
.mtag i{width:7px;height:7px;border-radius:50%;background:var(--accent-text)}
.mtag+.chip{margin:0 0 22px;vertical-align:baseline}
/* "In Vorbereitung" und andere Marken außerhalb der Ansichten: Punkt plus Wort */
.mband .pts .chip,.mtag+.chip,.mlinks .chip,.mcard .chip{background:none;height:auto;padding:0;gap:7px;font:500 12.5px var(--font);color:var(--text);display:inline-flex;align-items:center}
.mband .pts .chip::before,.mtag+.chip::before,.mlinks .chip::before,.mcard .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--info)}
.mband .sub{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);margin-top:clamp(56px,7vw,104px);padding-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.mband .sub.first{margin-top:clamp(48px,6vw,88px);padding-top:0;border-top:0}
.mband .sub.wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.mband .pts{gap:0;border-top:1px solid var(--heading)}
.mband .pts>div{padding:18px 0 20px;border-bottom:1px solid var(--line)}
.mband .pts h4{font:500 16px/1.35 var(--font);color:var(--heading);gap:6px 12px}
.mband .pts p{font-size:15px;line-height:1.55;margin-top:6px}

/* Gerahmte Bildschirme */
.mband .snip,.mband .mframe,.pm .card,.pflow-wrap{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 0 rgba(14,16,34,.03),0 40px 64px -40px rgba(14,16,34,.22);overflow:hidden}
.mband .snip{padding:52px 28px 26px;font-size:13px}
.mband .snip::before,.pm .card::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 18px 15px,var(--line-strong) 3px,transparent 3.6px),radial-gradient(circle at 32px 15px,var(--line-strong) 3px,transparent 3.6px),radial-gradient(circle at 46px 15px,var(--line-strong) 3px,transparent 3.6px)}
.mband .snip .mock-note{margin:18px 0 0}
.mband .mframe-d+.mframe-p+.mock-note,.mband .mframe+.mock-note{margin-top:14px}
.mband .mock-note{font-size:13px}
.mband .snip .snip{background:var(--bg);box-shadow:none}
.mock-h{gap:12px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.mock-h b{font:300 22px/1.2 var(--display);letter-spacing:-.015em;color:var(--heading)}
/* Bedienelemente in den Ansichten: Tinte statt Ultramarin */
.mband .btn,.pm .btn{height:30px;font-weight:500;border-radius:4px}
.mband .btn.primary,.pm .btn.primary{background:var(--heading);border-color:var(--heading);color:var(--bg)}
.mband .btn.secondary,.pm .btn.secondary{background:transparent;color:var(--heading);border-color:var(--line-strong)}
.mband .card,.pm .card{background:transparent;border:0;border-radius:0}
.mband .card-h{padding:12px 0;border-bottom:1px solid var(--line)}
.mband .card-h h4{font:500 13.5px var(--font);color:var(--heading)}
.mband .card-b{padding:12px 0}
.mband .stack-gap{gap:28px}
.mband .tbl th{font:500 12px var(--font);color:var(--muted);background:transparent;border-bottom:1px solid var(--line-strong);padding:8px 10px 8px 0}
.mband .tbl td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line)}
.mband .tbl .r{padding-right:0;padding-left:10px}
.mband .tw{border:0;background:transparent}
.mband .kpis,.snip .kpis{gap:0;border-top:0;padding-top:0;margin-bottom:6px}
.mband .kpi{padding:2px 16px 4px;border:0;border-left:1px solid var(--line);background:transparent}
.mband .kpis>.kpi:first-child{border-left:0;padding-left:0}
.mband .kpi small{font-size:12px;color:var(--muted)}
.mband .kpi b{font:300 28px/1.1 var(--display);letter-spacing:-.02em;color:var(--heading)}
.spk{display:block;width:100%;max-width:104px;height:22px;margin-top:8px;overflow:visible}
.spk polyline{fill:none;stroke:var(--heading);stroke-width:1.25;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.spk circle{fill:var(--accent-text)}
.mband .inp{border-color:var(--line-strong);border-radius:4px;height:34px}
.mband .fld .l{font-weight:500;color:var(--muted)}
.mband .box{background:var(--heading);color:var(--bg);border-radius:3px}
.mband .bal b{font:300 30px/1.1 var(--display);letter-spacing:-.02em}
.mband .progress{height:3px;border:0;background:var(--line)}.mband .progress i{background:var(--heading)}
.chart .b-in{fill:var(--heading)}.chart .b-out{fill:var(--line-strong)}
.chart .m{fill:var(--heading)}
.legend .l-in{background:var(--heading)}.legend .l-out{background:var(--line-strong)}
.legend i{border-radius:50%;width:8px;height:8px}.legend .l-fc,.legend .l-thr{border-radius:0}

/* Mitgliederportal: Bildschirm und Telefon */
.mband .mframe .chromebar{background:var(--surface);border-bottom:1px solid var(--line);min-height:30px;padding:0 12px}
.mband .mframe .dots i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.mband .mframe .url{border:0;background:var(--surface-2);border-radius:4px;font-size:11.5px}
.mband .demo-chip{background:transparent;color:var(--muted);font-weight:500;padding:0}
.mband .demo-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}
.pt-head{border-top:0;padding:16px 22px;gap:12px}
.pt-head b{font:400 16px var(--display);letter-spacing:-.01em;color:var(--heading)}
.pt-logo{width:30px;height:30px;border-radius:4px}
.pt-head .av,.phone .av{background:var(--surface-2);color:var(--heading);border:0;border-radius:50%}
.pt-nav{padding:0 22px;gap:22px}
.pt-nav span{padding:12px 0;font-weight:400}
.pt-nav span[aria-current]{color:var(--heading);font-weight:500;box-shadow:inset 0 -1px 0 var(--heading)}
.pt-body{padding:24px 22px 26px;gap:20px;background:var(--bg)}
.pt-body>h4{font:300 28px/1.1 var(--display);letter-spacing:-.025em;color:var(--heading)}
.pt-body .card{border-top:1px solid var(--heading)}
.pt-body .card-h{border-bottom:0;padding:10px 0 4px}
.pt-body .card-b{padding:6px 0 0}
.pt-3{gap:24px}
.pt-link{color:var(--heading);font-weight:500;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.mband .mframe-p{border:0;background:transparent;box-shadow:none;overflow:visible}
.phone{border:1px solid var(--line-strong);border-radius:28px;overflow:hidden;padding-top:14px;background:var(--surface);box-shadow:0 40px 64px -40px rgba(14,16,34,.3)}
.phone .pt-body{background:var(--bg)}
.ptab span{font-size:11.5px;padding:12px 2px 14px}
.ptab span[aria-current]{color:var(--heading);font-weight:500;box-shadow:inset 0 1px 0 var(--heading)}

/* Rechnungen */
.paper{box-shadow:0 30px 48px -32px rgba(14,16,34,.35);border-color:var(--line)}
.inv{gap:24px}

/* Veranstaltungen */
.ev-tabs{gap:18px;padding:4px 0 0;border-bottom:1px solid var(--line)}
.ev-tabs span{height:auto;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--muted);font:400 12.5px var(--font)}
.ev-tabs span[aria-current]{background:transparent;color:var(--heading);font-weight:500;box-shadow:inset 0 -1px 0 var(--heading)}
.mband .ev-tabs+div{padding:14px 0 0!important}
.ev-bn{margin:14px 0 0;padding:10px 0;background:transparent;color:var(--text);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ev-bn>span:first-child{display:inline-flex;align-items:center;gap:8px}
.ev-bn>span:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--info);flex:none}
.ev-2{gap:28px}
.tk{padding:12px 0}
.scan-ok{padding:10px 0}
.mband .cap{font-size:12.5px}

/* Presseausweis */
.pcard{border-top:0;border-radius:10px;box-shadow:0 40px 64px -36px rgba(11,16,51,.55)}
.pcard::after{display:none}
@media (hover:hover){.pcard:hover{transform:none}}
.pc-title{font:300 clamp(18px,4.8cqw,26px)/1.1 var(--display);letter-spacing:-.02em}
.pc-logo{border-radius:3px}
.pflow-wrap{padding:52px 28px 28px}
.pflow-wrap::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 18px 15px,var(--line-strong) 3px,transparent 3.6px),radial-gradient(circle at 32px 15px,var(--line-strong) 3px,transparent 3.6px),radial-gradient(circle at 46px 15px,var(--line-strong) 3px,transparent 3.6px)}
.pflow-wrap>.card-h{padding:0 0 14px;border-bottom:1px solid var(--line)}
.pflow-wrap>.card-h h4{font:300 22px/1.2 var(--display);letter-spacing:-.015em}
.pflow-wrap>.card-b{padding:20px 0 0}
.pflow li{padding:48px 16px 12px 0}
.pflow li::before{width:auto;height:auto;background:none;color:var(--heading);font:300 30px/1 var(--display);letter-spacing:-.02em;display:block}
.pflow li::after{left:34px;top:15px;height:1px;background:var(--line-strong)}
.pflow .who{font-weight:500;color:var(--muted)}
.loop{border:0;border-top:1px solid var(--line);padding:12px 0 0;margin-top:8px}
.ext{gap:0 24px;margin-top:16px}
.ext div{border:0;border-top:1px solid var(--heading);background:transparent;padding:10px 0 0}
.pmocks{gap:32px;margin-top:40px}
.pm figcaption{font:400 15px/1.35 var(--display);gap:12px;margin-bottom:14px}
.pn{width:auto;height:auto;background:none;color:var(--heading);font:300 26px/1 var(--display)}
.pm .card{padding-top:30px}
.pm .card-h{padding:12px 16px;border-bottom:1px solid var(--line)}
.pm .card-b{padding:16px}
.pm .card-h h4{font:500 13.5px var(--font)}
@media (max-width:720px){
 .pflow li{padding:0 0 18px 48px}.pflow li::before{position:absolute;top:0;left:0}.pflow li::after{left:14px;top:36px;width:1px}
 .mband .snip,.pflow-wrap{padding:46px 16px 18px}
 .mband .kpi{padding:2px 12px 10px}.mband .kpis>.kpi:nth-child(3){border-left:0;padding-left:0}
 .mlinks a{min-height:52px;margin-right:0;width:100%;border-bottom:1px solid var(--line)}
}
@media (max-width:1023px){.mband .sub,.mband .sub.wide{grid-template-columns:minmax(0,1fr)}}
/* Nachträge: Rahmen vor dem Karten-Reset, Status als Punkt auch in Abbildungen, Kennzahlen ohne Umbruch */
.mband .pflow-wrap,.mband .pm>.card{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.mband .pm .chip,.mband .pflow-wrap .chip{background:none;height:auto;padding:0;gap:7px;font-weight:500;color:var(--text)}
.mband .pm .chip::before,.mband .pflow-wrap .chip::before{width:7px;height:7px;border-radius:50%;background:var(--neu)}
.mband .pm .chip.ok::before{background:var(--ok)}.mband .pm .chip.warn::before{background:var(--warn)}.mband .pm .chip.err::before{background:var(--err)}
.mband .pm .chip.info::before{background:var(--info)}.mband .pm .chip.acc::before{background:var(--accent-text)}
.mband .pm .tbl th:first-child,.mband .pm .tbl td:first-child{padding-left:16px}
.mband .pm .tbl th:last-child,.mband .pm .tbl td:last-child{padding-right:16px}
.mband .kpi b{white-space:nowrap;font-size:clamp(20px,1.9vw,27px)}
.mband .kv dt,.mband .kv dd{padding-left:0}
.feat{scroll-margin-top:100px}

/* Mehrseitige Fassung: Modulkarten auf der Startseite, Brotkrumen und Blättern auf den Modulseiten */
/* Fassung 2.5b (in Richtung CI 3.0): Haarlinien statt Kästen, große leichte Titel, Tinte statt Ultramarin */
.mcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:48px 40px;margin-top:56px;list-style:none;padding:0}
.mcard a{display:flex;flex-direction:column;height:100%;padding:18px 0 0;background:none;border:0;border-top:1px solid var(--heading);color:var(--text);text-decoration:none}
.mcard .mtag{align-self:flex-start;margin:0 0 6px}.mcard .chip{align-self:flex-start;margin:0 0 6px}
.mcard h3{font:300 clamp(24px,2.4vw,30px)/1.12 var(--display,var(--font));letter-spacing:-.025em;color:var(--heading);margin-top:14px;text-wrap:balance}
.mcard p{color:var(--muted);font-size:15px;line-height:1.55;margin-top:12px;flex:1}
.mcard .mgo{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-weight:500;font-size:15px;color:var(--heading);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:5px}
.mcard a:hover .mgo{text-decoration-color:var(--heading)}
.mcard a:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.mpage{padding-top:24px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-bottom:clamp(32px,5vw,64px);font-size:14px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--heading);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.mpager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.mpager .btn{height:48px;padding:0 20px;font-size:15px}
#weitere-module{background:var(--surface)}

/* Hinweistext unter Aufzählungen */
.sn-small{font-size:14px;line-height:1.5}

/* Modulseiten: Ausschnitte (Konto, Spalten, Panel, Status mit Wort) */
.sn-acct{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px;border:1px solid var(--line);margin-bottom:12px}
.sn-acct div{display:flex;flex-direction:column;gap:2px}
.sn-split{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.sn-split .tbl th:last-child,.sn-split .tbl td:last-child{padding-left:16px}
.sn-panel{border:1px solid var(--line);padding:12px;margin-top:12px}.sn-split .sn-panel{margin-top:0}
.sn-panel .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0}.sn-panel .kv dd{margin:0}
.sn-ph{margin:0 0 8px;font-weight:600;color:var(--heading)}
.sn-line{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:8px 0}
.sn-file{display:flex;align-items:center;gap:6px;margin:8px 0;color:var(--muted)}
.sn-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.sn-st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sn-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.sn-ok{background:var(--ok)}.sn-info{background:var(--accent)}.sn-warn{background:var(--warn)}.sn-neu{background:var(--line-strong)}
.sn-check{list-style:none;margin:12px 0;padding:0}.sn-check li{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.sn-check li.done svg{color:var(--ok)}
.sn-agenda{margin:12px 0;padding:0;list-style:none}.sn-agenda li{padding:8px 0;border-top:1px solid var(--line)}.sn-agenda b{display:inline-block;min-width:1.5em;color:var(--accent-text)}
.sn-code{display:block;overflow-x:auto;white-space:pre;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--heading)}
.sn-keys{margin-top:12px}
.snip .tw{overflow-x:auto}

/* "Neu in Allmende" */
.news{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.news .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.news-stamp{margin:8px 0 0;font-size:14px;color:var(--muted)}
.news-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.news-grid li{border-top:1px solid var(--heading);padding-top:16px}
.news-grid h3{margin:0 0 8px;font:500 17px/1.3 var(--font);color:var(--heading)}
.news-grid p{margin:0;font-size:15px;line-height:1.55;color:var(--text)}
.news-more{margin:24px 0 0;font-size:15px;color:var(--muted)}
@media (max-width:1000px){.news-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px}}
@media (max-width:600px){.news-grid{grid-template-columns:minmax(0,1fr)}}
/* Grundausstattung */
.base-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px}
.base-tile{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column}
.base-tic{color:var(--accent-text);margin-bottom:14px}
.base-tile h3{margin:0 0 8px;font:500 17px/1.3 var(--font);color:var(--heading)}
.base-tile p{margin:0;font-size:15px;line-height:1.55}
.base-tl{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;color:var(--accent-text);font-weight:500}
@media (max-width:1000px){.base-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.base-grid{grid-template-columns:minmax(0,1fr);gap:8px}.base-tic{display:none}}

/* Anmelden: im Markup vorhanden, bis zur Freigabe versteckt (hidden entfernen) */
a[data-login][hidden]{display:none!important}
@media (max-width:520px){.mpager .btn{white-space:normal;height:auto;min-height:48px;padding:8px 16px;text-align:center;width:100%}}
.mm-grid[style*="--cols:5"] .mm-gt{font-size:19px}