:root{--bg:#07111f;--bg-2:#0c1b2c;--ink:#0a1725;--muted:#667487;--line:#dfe6ec;--white:#fff;--teal:#16c7a3;--teal-2:#0aa4b5;--gold:#f5b51b;--magenta:#c20e66;--radius:28px;--shadow:0 24px 70px rgba(7,17,31,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f7f9fb;overflow-x:hidden}button,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;width:100%}.shell{width:min(1180px,calc(100% - 48px));margin-inline:auto}.section{padding:120px 0}.cursor-glow{position:fixed;left:0;top:0;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(22,199,163,.1),transparent 68%);transform:translate(-50%,-50%);pointer-events:none;z-index:30;mix-blend-mode:screen;opacity:0;transition:opacity .3s}
.site-header{position:fixed;inset:0 0 auto;z-index:100;padding:18px 0;transition:.35s}.site-header.scrolled{background:rgba(7,17,31,.84);backdrop-filter:blur(18px);box-shadow:0 8px 40px rgba(0,0,0,.15);padding:11px 0}.nav{display:flex;align-items:center;gap:38px}.brand{display:inline-flex;align-items:center;gap:12px;color:#fff}.brand-mark{width:35px;height:35px;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:3px;transform:skew(-8deg)}.brand-mark i{display:block;background:linear-gradient(180deg,var(--teal),var(--teal-2));border-radius:3px}.brand-mark i:nth-child(1){height:50%}.brand-mark i:nth-child(2){height:78%}.brand-mark i:nth-child(3){height:100%;background:linear-gradient(180deg,var(--gold),#e98d0f)}.brand-name{font-weight:800;letter-spacing:.075em;font-size:21px}.brand-name span{color:var(--teal)}.nav-links{display:flex;gap:30px;margin-left:auto}.nav-links a{color:rgba(255,255,255,.74);font-size:14px;font-weight:600;transition:.2s}.nav-links a:hover{color:#fff}.button{min-height:54px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:0 26px;border:1px solid transparent;font-weight:750;transition:.25s;white-space:nowrap}.button:hover{transform:translateY(-2px)}.button-primary{color:#07111f;background:linear-gradient(135deg,#2ee2bb,var(--teal));box-shadow:0 14px 35px rgba(22,199,163,.24)}.button-primary:hover{box-shadow:0 18px 42px rgba(22,199,163,.34)}.button-ghost{color:#fff;border-color:rgba(255,255,255,.27);background:rgba(255,255,255,.07);backdrop-filter:blur(10px)}.button-ghost:hover{background:rgba(255,255,255,.13)}.button-small{min-height:43px;padding:0 19px;font-size:13px}.play{font-size:10px}.nav-toggle{display:none;background:none;border:0;padding:5px}.nav-toggle span{display:block;width:25px;height:2px;background:#fff;margin:5px;border-radius:2px}
.hero{position:relative;color:#fff;overflow:hidden;background:var(--bg)}.hero-media,.hero-slide,.hero-overlay{position:absolute;inset:0}.hero-slide{background-image:var(--hero-image);background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1s ease,transform 7s ease}.hero-slide.is-active{opacity:1;transform:scale(1)}.hero-overlay{background:linear-gradient(90deg,rgba(7,17,31,.96) 0%,rgba(7,17,31,.88) 32%,rgba(7,17,31,.38) 61%,rgba(7,17,31,.16) 100%),linear-gradient(0deg,rgba(7,17,31,.72),transparent 46%)}.hero-content{position:relative;z-index:3;padding-top:190px}.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--teal);margin:0 0 24px}.eyebrow:before{content:"";width:28px;height:2px;background:currentColor}.eyebrow.dark{color:#0c9d91}.hero h1{font-size:clamp(58px,6vw,94px);line-height:.98;letter-spacing:-.055em;margin:0 0 30px;max-width:850px}.hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.72)}.hero-copy{max-width:690px;font-size:20px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 35px}.hero-actions{display:flex;gap:14px}.hero-trust{display:flex;gap:0;margin-top:56px;border-top:1px solid rgba(255,255,255,.16);width:max-content}.hero-trust span{padding:clamp(12px,2.3vh,22px) 35px 0 0;margin-right:35px;color:rgba(255,255,255,.64);font-size:13px;border-right:1px solid rgba(255,255,255,.16)}.hero-trust span:last-child{border:0}.hero-trust b{display:block;color:#fff;font-size:22px;margin-bottom:3px}.hero-controls{position:absolute;z-index:5;bottom:38px;right:0;left:0;display:flex;justify-content:flex-end;gap:10px}.hero-dot{color:rgba(255,255,255,.45);background:transparent;border:0;display:flex;align-items:center;gap:8px;padding:8px 0 8px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.hero-dot:before{content:"";width:26px;height:2px;background:currentColor;transition:.3s}.hero-dot.is-active{color:#fff}.hero-dot.is-active:before{width:48px;background:var(--teal)}.scroll-hint{position:absolute;z-index:5;bottom:28px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:rgba(255,255,255,.55);display:flex;flex-direction:column;align-items:center;gap:8px}.scroll-hint span{display:block;width:1px;height:30px;background:linear-gradient(#fff,transparent);animation:scroll 1.8s infinite}@keyframes scroll{50%{transform:scaleY(.55);transform-origin:bottom}}
.intro{background:#fff}.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:end}.section-heading h2{font-size:clamp(42px,5vw,70px);letter-spacing:-.055em;line-height:1.05;margin:0}.section-heading h2 span{color:var(--teal-2)}.section-heading>p:last-child{color:var(--muted);font-size:18px;line-height:1.65;max-width:660px;margin:22px auto 0}.section-heading.centered{text-align:center}.section-heading.centered .eyebrow{justify-content:center}.intro-copy>p{font-size:19px;line-height:1.75;color:var(--muted);margin:0}.mini-points{display:grid;gap:13px;margin-top:25px}.mini-points span{font-weight:650}.mini-points i{font-style:normal;color:var(--teal);margin-right:9px}.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:78px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stat{padding:35px 22px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat strong{font-size:48px;letter-spacing:-.05em}.stat strong:after{content:"+";color:var(--teal);font-size:25px}.stat:nth-child(2) strong:after{content:""}.stat:nth-child(3) strong:after{content:"/7"}.stat:nth-child(4) strong:after{content:"°"}.stat span{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.showcase{background:#eef3f6}.filter-bar{display:flex;justify-content:center;gap:7px;margin:44px auto 38px;flex-wrap:wrap}.filter{border:1px solid #d8e2e8;background:#fff;color:#566678;border-radius:999px;padding:12px 19px;font-size:13px;font-weight:700;transition:.2s}.filter:hover,.filter.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.module-card{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 10px 40px rgba(22,43,61,.07);transition:transform .35s,box-shadow .35s;position:relative}.module-card:hover{transform:translateY(-8px);box-shadow:var(--shadow)}.module-card.hidden{display:none}.module-card img{height:230px;object-fit:cover;transform:scale(var(--bild-zoom,1));transition:transform .6s}.module-card:hover img{transform:scale(calc(var(--bild-zoom,1) * 1.035))}.module-card-wide{grid-column:span 2}.module-card-wide img{height:330px}.card-content{padding:24px}.card-content>span{color:#0c9d91;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.card-content h3{margin:8px 0 9px;font-size:25px;letter-spacing:-.025em}.card-content p{color:var(--muted);line-height:1.55;margin:0;min-height:49px}.card-content button{background:none;border:0;padding:18px 0 0;font-weight:800;color:var(--ink)}.card-content button i{font-style:normal;color:var(--teal);margin-left:4px}.module-card:after{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--teal),var(--teal-2));transform:scaleX(0);transform-origin:left;transition:.35s}.module-card:hover:after{transform:scaleX(1)}
.experience{background:var(--bg);color:#fff;position:relative;overflow:hidden}.experience:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-260px;background:radial-gradient(circle,rgba(22,199,163,.16),transparent 65%)}.experience-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.experience-copy h2{font-size:clamp(48px,5vw,74px);letter-spacing:-.055em;line-height:1.05;margin:0 0 24px}.experience-copy>p:not(.eyebrow){color:rgba(255,255,255,.66);font-size:17px;line-height:1.7}.feature-list{display:grid;margin-top:34px}.feature-item{display:flex;gap:18px;text-align:left;padding:20px 0;color:rgba(255,255,255,.48);background:none;border:0;border-top:1px solid rgba(255,255,255,.12);transition:.25s}.feature-item:last-child{border-bottom:1px solid rgba(255,255,255,.12)}.feature-item i{font-style:normal;font-size:12px;color:var(--teal)}.feature-item b,.feature-item small{display:block}.feature-item b{font-size:17px;margin-bottom:5px}.feature-item small{font-size:13px;line-height:1.5}.feature-item.is-active{color:#fff;padding-left:12px}.portal-demo{background:#dfe7ec;border-radius:24px;padding:7px;box-shadow:0 35px 90px rgba(0,0,0,.35);transform:perspective(1200px) rotateY(-3deg)}.browser-bar{height:34px;background:#f4f6f8;border-radius:18px 18px 0 0;display:flex;align-items:center;gap:6px;padding:0 12px}.browser-bar span{width:8px;height:8px;border-radius:50%;background:#c9d0d5}.browser-bar b{font-size:9px;color:#8d9aa4;margin-left:auto;margin-right:auto;font-weight:600}.portal-shell{height:510px;background:#f5f8fa;display:grid;grid-template-columns:56px 1fr;border-radius:0 0 18px 18px;overflow:hidden}.portal-sidebar{background:#0c1b2c;display:flex;flex-direction:column;align-items:center;padding:15px 0;gap:8px}.mini-logo{width:28px;height:28px;border-radius:8px;background:var(--teal);color:#07111f;font-weight:900;display:grid;place-items:center;margin-bottom:18px}.portal-sidebar button{width:34px;height:34px;border-radius:9px;border:0;background:transparent;color:#7f91a0}.portal-sidebar button.active,.portal-sidebar button:hover{background:rgba(22,199,163,.16);color:var(--teal)}.portal-main{padding:20px;color:var(--ink);overflow:hidden}.portal-top{display:flex;justify-content:space-between;font-size:12px;font-weight:800;margin-bottom:18px}.portal-top div{display:flex;gap:6px}.portal-top i{display:block;width:25px;height:25px;border-radius:50%;background:#e1e7eb}.portal-panel{display:none}.portal-panel.is-active{display:block;animation:fade .35s}.portal-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.portal-kpis>div{background:#fff;border:1px solid #e7edf0;border-radius:12px;padding:12px}.portal-kpis small,.portal-kpis b,.portal-kpis em{display:block}.portal-kpis small{font-size:8px;color:#84919c}.portal-kpis b{font-size:20px;margin:5px 0}.portal-kpis em{font-size:7px;color:#0c9d91;font-style:normal}.portal-chart,.portal-activity{background:#fff;border:1px solid #e7edf0;border-radius:12px;margin-top:10px;padding:14px}.chart-title{display:flex;justify-content:space-between;font-size:9px}.chart-title span{color:#91a0aa}.portal-chart svg{width:100%;height:150px;margin-top:5px}.portal-activity{display:grid;gap:9px;font-size:9px}.portal-activity>span{display:flex;align-items:center;gap:7px;border-top:1px solid #edf1f3;padding-top:8px}.portal-activity i{width:6px;height:6px;border-radius:50%;background:var(--teal)}.portal-activity small{margin-left:auto;color:#87949f}.workflow-board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.workflow-board>div{background:#eef2f5;border-radius:12px;padding:12px;min-height:390px;font-size:9px}.workflow-board b{display:block;margin-bottom:12px}.workflow-board span{display:block;padding:11px 9px;background:#fff;border-radius:8px;margin-bottom:8px;box-shadow:0 4px 12px rgba(0,0,0,.04)}.branch-list{background:#fff;border-radius:15px;padding:20px;display:grid;gap:0}.branch-list>b{font-size:15px;margin-bottom:15px}.branch-list span{display:flex;align-items:center;padding:18px 0;border-top:1px solid #e8eef1;font-size:11px;font-weight:700}.branch-list i{width:7px;height:7px;border-radius:50%;margin-right:9px}.branch-list i.online{background:var(--teal);box-shadow:0 0 0 4px rgba(22,199,163,.12)}.branch-list em{margin-left:auto;font-style:normal;color:#0c9d91;font-size:9px}
.benefits{background:#fff}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:65px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.benefit{padding:36px 27px 50px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:.3s}.benefit:hover{background:#f5faf9}.benefit>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e4f8f3;color:#0a9d86;font-size:11px;font-weight:900}.benefit h3{font-size:22px;margin:42px 0 14px}.benefit p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.cta{position:relative;background:#0c1b2c;color:#fff;overflow:hidden}.cta-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,17,31,.98),rgba(7,17,31,.72),rgba(7,17,31,.48)),url('assets/kommunikation.webp') center/cover;opacity:.8}.cta-content{position:relative;z-index:2}.cta h2{font-size:clamp(48px,6vw,78px);line-height:1.03;letter-spacing:-.055em;margin:0;max-width:820px}.cta p:not(.eyebrow){color:rgba(255,255,255,.72);font-size:18px;line-height:1.6;max-width:660px;margin:26px 0 35px}.cta-actions{display:flex;align-items:center;gap:30px}.text-link{font-weight:750}.text-link span{color:var(--teal);margin-left:5px}.footer{background:#050d17;color:#fff;padding:70px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:60px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:11px}.footer-brand{margin-bottom:8px}.footer-grid p,.footer-grid a,.footer-grid span{color:rgba(255,255,255,.5);font-size:13px;line-height:1.6}.footer-grid a:hover{color:#fff}
/* "Demo" in der Fusszeile ist ein Knopf, kein Verweis -- er oeffnet das Anfrageformular,
   statt zu einem Anker zu springen. Damit man das nicht sieht, traegt er das Aussehen der
   Nachbarn: gleiche Farbe, gleiche Groesse, kein Rahmen, linksbuendig wie sie. */
.kontakt-bruecke{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}
.kontakt-vorschau{background:none;border:0;padding:0;font:inherit;font-weight:750;
  color:var(--teal-2);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kontakt-vorschau:hover{color:var(--teal)}
.fusslink{background:none;border:0;padding:0;font:inherit;color:rgba(255,255,255,.5);
  font-size:13px;line-height:1.6;text-align:left;cursor:pointer}
.fusslink:hover{color:#fff}.footer-grid b{font-size:12px;text-transform:uppercase;letter-spacing:.11em;margin-bottom:9px}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:55px;padding-top:20px;color:rgba(255,255,255,.38);font-size:11px}
.module-modal,.demo-modal{border:0;padding:0;border-radius:28px;box-shadow:0 40px 120px rgba(0,0,0,.35);max-width:min(1060px,calc(100% - 32px));width:100%;overflow:visible}.module-modal::backdrop,.demo-modal::backdrop{background:rgba(3,10,18,.82);backdrop-filter:blur(8px)}.module-modal[open]{display:grid;grid-template-columns:1fr 1fr;animation:modalIn .35s}.modal-image{min-height:520px;background:#dce3e7;border-radius:28px 0 0 28px;overflow:hidden}.modal-image img{height:100%;object-fit:cover}.modal-copy{padding:55px 46px}.modal-copy h2{font-size:44px;line-height:1.05;letter-spacing:-.04em;margin:0 0 20px}.modal-copy>p:not(.eyebrow){font-size:17px;line-height:1.7;color:var(--muted)}.modal-copy ul{padding:0;list-style:none;display:grid;gap:11px;margin:28px 0}.modal-copy li:before{content:"✓";color:var(--teal);margin-right:10px;font-weight:900}.modal-close{position:absolute;right:-12px;top:-12px;width:42px;height:42px;border-radius:50%;background:#fff;border:0;font-size:26px;line-height:1;z-index:5;box-shadow:0 5px 20px rgba(0,0,0,.2)}.demo-modal{max-width:min(1120px,calc(100% - 32px))}.demo-modal-inner{padding:38px}.demo-modal-inner>h2{font-size:44px;letter-spacing:-.04em;margin:0}.demo-modal-inner>p:not(.eyebrow){color:var(--muted)}.demo-app{display:grid;grid-template-columns:190px 1fr;min-height:500px;background:#f5f7f8;border:1px solid #e3eaee;border-radius:20px;overflow:hidden;margin-top:25px}.demo-app>aside{background:#0b1928;padding:22px 12px;display:flex;flex-direction:column;gap:7px}.demo-logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--teal);font-weight:900;margin:0 8px 25px}.demo-app>aside button{border:0;background:transparent;color:#8295a6;text-align:left;border-radius:10px;padding:12px 14px;font-size:13px;font-weight:700}.demo-app>aside button.active{background:rgba(22,199,163,.15);color:#fff}.demo-app>section{padding:25px}.demo-app header{display:flex;justify-content:space-between;align-items:center;margin-bottom:27px}.demo-app header small,.demo-app header b{display:block}.demo-app header small{font-size:9px;color:#84919c;letter-spacing:.1em}.demo-app header b{font-size:19px;margin-top:4px}.demo-status{font-size:10px;color:#0c9d91}.demo-view{display:none}.demo-view.active{display:block;animation:fade .3s}.demo-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.demo-kpis>div{background:#fff;border:1px solid #e4ebef;border-radius:14px;padding:18px}.demo-kpis span,.demo-kpis b,.demo-kpis em{display:block}.demo-kpis span{color:#7d8b96;font-size:10px}.demo-kpis b{font-size:26px;margin:8px 0}.demo-kpis em{font-size:9px;color:#0c9d91;font-style:normal}.demo-chart-bars{height:235px;background:#fff;border:1px solid #e4ebef;border-radius:14px;margin-top:12px;padding:35px 30px 20px;display:flex;align-items:end;gap:18px}.demo-chart-bars i{display:block;flex:1;height:var(--h);background:linear-gradient(180deg,var(--teal),rgba(22,199,163,.24));border-radius:6px 6px 2px 2px;animation:bar 1s}.task-list{display:grid;background:#fff;border-radius:14px;border:1px solid #e4ebef}.task-list span{padding:20px;border-bottom:1px solid #edf1f3;font-size:13px}.task-list input{margin-right:12px;accent-color:var(--teal)}.task-list b{float:right;font-size:10px;color:#0c9d91}.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.team-grid>span{background:#fff;border:1px solid #e4ebef;border-radius:14px;padding:20px;display:grid;grid-template-columns:44px 1fr;column-gap:13px}.team-grid i{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:#dff7f1;color:#0c9d91;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900}.team-grid b{font-size:13px;align-self:end}.team-grid small{font-size:9px;color:#7d8b96}.report-list{display:grid;gap:10px}.report-list span{background:#fff;border:1px solid #e4ebef;border-radius:14px;padding:17px;display:grid;grid-template-columns:38px 1fr}.report-list i{grid-row:span 2;width:30px;height:30px;border-radius:8px;background:#e6f8f4;color:#0c9d91;display:grid;place-items:center;font-style:normal}.report-list b{font-size:13px}.report-list small{font-size:9px;color:#84919c;margin-top:3px}@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.97)}}@keyframes fade{from{opacity:0;transform:translateY(5px)}}@keyframes bar{from{height:0}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1000px){.nav-links{position:fixed;inset:72px 18px auto;background:#0c1b2c;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:20px;display:none;flex-direction:column}.nav-links.open{display:flex}.nav-toggle{display:block;margin-left:auto}.nav-cta{display:none}.hero-content{padding-top:165px}.hero-controls{justify-content:center}.scroll-hint{display:none}.intro-grid,.experience-grid{grid-template-columns:1fr;gap:45px}.stats,.benefit-grid{grid-template-columns:repeat(2,1fr)}.module-grid{grid-template-columns:repeat(2,1fr)}.portal-demo{transform:none}.footer-grid{grid-template-columns:2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2}.module-modal[open]{grid-template-columns:1fr}.modal-image{height:340px;min-height:0;border-radius:28px 28px 0 0}.demo-app{grid-template-columns:145px 1fr}}
@media(max-width:680px){.shell{width:min(100% - 28px,1180px)}.section{padding:82px 0}.site-header{padding:12px 0}.brand-name{font-size:18px}.hero-overlay{background:linear-gradient(90deg,rgba(7,17,31,.96),rgba(7,17,31,.72)),linear-gradient(0deg,rgba(7,17,31,.75),transparent)}.hero-content{padding-top:145px}.hero h1{font-size:51px}.hero-copy{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}.hero-actions .button{width:100%}.hero-trust{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-top:32px}.hero-trust span{padding:15px 15px 0 0;margin-right:15px}.hero-trust span:last-child{display:none}.hero-controls{bottom:13px}.hero-dot span{display:none}.section-heading h2,.experience-copy h2{font-size:42px}.intro-grid{gap:28px}.intro-copy>p{font-size:16px}.stats{grid-template-columns:1fr 1fr;margin-top:48px}.stat{padding:25px 14px}.stat strong{font-size:38px}.module-grid{grid-template-columns:1fr}.module-card-wide{grid-column:auto}.module-card img,.module-card-wide img{height:220px}.filter-bar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}.filter{flex:0 0 auto}.portal-shell{height:440px}.portal-main{padding:13px}.portal-kpis{grid-template-columns:1fr 1fr}.portal-kpis>div:last-child{display:none}.portal-chart svg{height:125px}.workflow-board{grid-template-columns:1fr}.workflow-board>div{min-height:auto}.workflow-board>div:not(:first-child){display:none}.benefit-grid{grid-template-columns:1fr}.cta-actions{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}.footer-grid>div:first-child{grid-column:span 2}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:8px}.module-modal,.demo-modal{max-width:calc(100% - 18px)}.modal-copy{padding:34px 25px}.modal-copy h2,.demo-modal-inner>h2{font-size:34px}.demo-modal-inner{padding:28px 18px}.demo-app{grid-template-columns:1fr;min-height:520px}.demo-app>aside{flex-direction:row;overflow:auto;padding:10px}.demo-logo{display:none}.demo-app>aside button{white-space:nowrap}.demo-app>section{padding:15px}.demo-kpis{grid-template-columns:1fr 1fr}.demo-kpis>div:last-child{display:none}.demo-chart-bars{gap:8px;padding-inline:16px}.team-grid{grid-template-columns:1fr}.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* INTRAMOS custom logo integration */
.brand{display:inline-flex;align-items:center;gap:12px}
.brand-logo{display:block;width:auto;height:auto;max-width:100%}
.brand-logo-header{height:40px}
.brand-logo-footer{height:42px}
.mini-logo,.demo-logo{background:rgba(22,199,163,.16);overflow:hidden}
.mini-logo img{width:18px;height:18px;object-fit:contain}
.demo-logo{padding:0;display:grid;place-items:center}
.demo-logo img{width:22px;height:22px;object-fit:contain}
@media(max-width:680px){
  .brand-logo-header{height:34px}
  .brand-logo-footer{height:36px}
}

/* Editable module banners */
.module-card img,
.module-card-wide img{
  width:100%;
  object-position:var(--banner-x,50%) var(--banner-y,50%);
  transform:scale(var(--banner-scale,1));
  transform-origin:center center;
  will-change:transform,object-position;
}
.module-card:hover img,
.module-card-wide:hover img{
  transform:scale(calc(var(--banner-scale,1) * 1.035));
}

.admin-toolbar{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:120;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(7,17,31,.92);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  backdrop-filter:blur(14px);
}
.admin-badge{
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.banner-edit-button{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  border:0;
  border-radius:999px;
  background:rgba(7,17,31,.8);
  color:#fff;
  padding:9px 12px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  opacity:0;
  pointer-events:none;
  transition:.22s;
}
html.admin-mode .module-card:hover .banner-edit-button,
html.admin-mode .module-card:focus-within .banner-edit-button{
  opacity:1;
  pointer-events:auto;
}

.banner-editor-modal{
  border:0;
  padding:0;
  width:min(1180px, calc(100% - 24px));
  max-width:1180px;
  border-radius:28px;
  overflow:visible;
  box-shadow:0 40px 120px rgba(0,0,0,.35);
}
.banner-editor-modal::backdrop{
  background:rgba(3,10,18,.82);
  backdrop-filter:blur(8px);
}
.banner-editor-shell{
  display:grid;
  grid-template-columns:320px 1fr;
  min-height:720px;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
}
.banner-editor-sidebar{
  padding:38px 26px;
  background:#f6f9fb;
  border-right:1px solid #e5edf1;
}
.banner-editor-sidebar h2{
  font-size:38px;
  letter-spacing:-.04em;
  margin:10px 0 12px;
}
.banner-editor-sidebar>p:not(.eyebrow){
  color:var(--muted);
  line-height:1.65;
}
.banner-editor-list{
  display:grid;
  gap:10px;
  margin-top:22px;
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}
.banner-editor-item{
  display:grid;
  grid-template-columns:84px 1fr;
  align-items:center;
  gap:12px;
  text-align:left;
  border:1px solid #dbe5ea;
  border-radius:16px;
  background:#fff;
  padding:8px;
  transition:.2s;
}
.banner-editor-item:hover,
.banner-editor-item.is-active{
  border-color:#16c7a3;
  box-shadow:0 12px 24px rgba(22,199,163,.12);
}
.banner-editor-item img{
  width:84px;
  height:58px;
  border-radius:10px;
  object-fit:cover;
}
.banner-editor-item span{
  font-size:13px;
  font-weight:800;
  color:var(--ink);
}
.banner-editor-main{
  padding:34px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:24px;
  background:#fff;
}
.banner-editor-preview-wrap{
  display:grid;
  align-content:start;
  gap:14px;
}
.banner-editor-preview{
  position:relative;
  width:100%;
  min-height:420px;
  border-radius:24px;
  background:linear-gradient(180deg,#edf3f6,#dce7ed);
  overflow:hidden;
  cursor:grab;
  border:1px solid #e2ebef;
}
.banner-editor-preview.is-dragging{cursor:grabbing}
.banner-editor-preview::before{
  content:"";
  position:absolute;
  inset:24px;
  border:2px dashed rgba(7,17,31,.14);
  border-radius:18px;
  z-index:2;
  pointer-events:none;
}
.banner-editor-preview::after{
  content:"Sichtbarer Kartenausschnitt";
  position:absolute;
  left:38px;
  top:38px;
  z-index:2;
  background:rgba(7,17,31,.74);
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  padding:7px 11px;
  pointer-events:none;
}
.banner-editor-preview img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  transform-origin:center center;
  user-select:none;
  -webkit-user-drag:none;
}
.banner-editor-hint{
  margin:0;
  color:#647381;
  font-size:13px;
}
.banner-editor-controls{
  display:grid;
  gap:16px;
  border-top:1px solid #e6edf1;
  padding-top:24px;
}
.banner-editor-controls label{
  display:grid;
  gap:8px;
  font-size:13px;
  font-weight:800;
  color:var(--ink);
}
.banner-editor-controls input[type="range"]{
  width:100%;
}
.banner-editor-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.banner-editor-note{
  color:#71818f;
  font-size:12px;
  line-height:1.6;
}
.button.is-saved{
  background:linear-gradient(135deg,#45e9c7,#16c7a3);
}

@media(max-width:1000px){
  .banner-editor-shell{grid-template-columns:1fr;min-height:auto}
  .banner-editor-sidebar{border-right:0;border-bottom:1px solid #e5edf1}
  .banner-editor-list{grid-template-columns:repeat(2,1fr);max-height:none}
}

@media(max-width:680px){
  .admin-toolbar{left:14px;right:14px;bottom:14px;justify-content:space-between}
  .admin-badge{font-size:11px}
  .banner-edit-button{opacity:1;pointer-events:auto;padding:8px 10px;font-size:10px}
  .banner-editor-modal{width:calc(100% - 12px)}
  .banner-editor-main{padding:18px}
  .banner-editor-sidebar{padding:24px 18px}
  .banner-editor-sidebar h2{font-size:30px}
  .banner-editor-preview{min-height:260px}
  .banner-editor-preview img{min-height:260px}
  .banner-editor-preview::before{inset:12px}
  .banner-editor-preview::after{left:18px;top:18px}
  .banner-editor-list{grid-template-columns:1fr}
  .banner-editor-actions .button{width:100%}
}

/* Module text editor fields */
.module-text-editor{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:18px;
  border:1px solid #e3ebef;
  border-radius:18px;
  background:#f8fafb;
}
.module-text-editor-wide{grid-column:1/-1}
.module-text-editor input,
.module-text-editor textarea{
  width:100%;
  border:1px solid #d5e0e6;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:600;
  padding:12px 13px;
  outline:none;
  resize:vertical;
  transition:border-color .2s,box-shadow .2s;
}
.module-text-editor input:focus,
.module-text-editor textarea:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 4px rgba(22,199,163,.12);
}
.banner-position-controls{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media(max-width:680px){
  .module-text-editor{grid-template-columns:1fr;padding:14px}
  .module-text-editor-wide{grid-column:auto}
  .banner-position-controls{grid-template-columns:1fr}
}

/* Header actions: Demo + gold Login */
.nav-actions{display:flex;align-items:center;gap:10px}
.button-gold{
  color:#07111f;
  background:linear-gradient(135deg,#ffd76a,var(--gold));
  box-shadow:0 14px 35px rgba(245,181,27,.24);
}
.button-gold:hover{
  box-shadow:0 18px 42px rgba(245,181,27,.38);
}
.mobile-nav-actions{display:none}
@media(max-width:1000px){
  .nav-actions{display:none}
  .mobile-nav-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
  .mobile-nav-actions .button{width:100%;color:#07111f}
}
@media(max-width:480px){
  .mobile-nav-actions{grid-template-columns:1fr}
}

/* Banner copy inside module previews */
.module-card .card-banner-copy{
  position:absolute;
  left:22px;
  top:20px;
  z-index:2;
  width:min(54%, 360px);
  color:#fff;
  pointer-events:none;
}
.module-card.module-card-wide .card-banner-copy{
  width:min(44%, 400px);
  top:24px;
  left:24px;
}
.card-banner-copy span{
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.92;
}
.card-banner-copy h4{
  margin:0 0 10px;
  font-size:clamp(24px,2vw,34px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.module-card:not(.module-card-wide) .card-banner-copy h4{
  font-size:clamp(19px,1.5vw,26px);
}
.card-banner-copy p{
  margin:0;
  font-size:14px;
  line-height:1.45;
  color:rgba(255,255,255,.9);
  max-width:32ch;
}
.module-card:not(.module-card-wide) .card-banner-copy p{
  font-size:12.5px;
  line-height:1.38;
  max-width:26ch;
}
.module-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:230px;
  background:linear-gradient(180deg, rgba(7,17,31,.08) 0%, rgba(7,17,31,0) 100%);
  pointer-events:none;
  z-index:1;
}
.module-card.module-card-wide::before{height:330px}

@media(max-width:1000px){
  .module-card .card-banner-copy{width:min(58%, 300px)}
  .module-card.module-card-wide .card-banner-copy{width:min(48%, 320px)}
}

@media(max-width:680px){
  .module-card .card-banner-copy,
  .module-card.module-card-wide .card-banner-copy{
    top:16px;
    left:16px;
    width:min(62%, 250px);
  }
  .card-banner-copy span{font-size:9px;margin-bottom:7px;letter-spacing:.14em}
  .module-card .card-banner-copy h4,
  .module-card:not(.module-card-wide) .card-banner-copy h4{font-size:19px;margin-bottom:7px}
  .module-card .card-banner-copy p,
  .module-card:not(.module-card-wide) .card-banner-copy p{font-size:11.5px;line-height:1.34;max-width:22ch}
  .module-card::before,.module-card.module-card-wide::before{height:220px}
}

/* =========================================================
   UX refinement v2: full module hero, clean cards and editor
   ========================================================= */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:3px solid rgba(46,226,187,.72);
  outline-offset:3px;
}
.skip-link{
  position:fixed;
  left:18px;
  top:-80px;
  z-index:1000;
  padding:12px 16px;
  border-radius:12px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
  box-shadow:var(--shadow);
  transition:top .2s;
}
.skip-link:focus{top:18px}

/* Hero: all eleven modules without overcrowding */
.hero{
  /* MIN-Hoehe statt FESTER Hoehe (Befund Erguen 23.08. mit Bildschirmfoto: „auf seite 1
     und 7 wird der untere teil ueberlappt"). Die feste Hoehe konnte der Inhalt nicht
     aufschieben — auf niedrigen Fenstern (die Meet-Teilen-Leiste nimmt oben ~50 px weg)
     lag die absolut am Boden klebende Steuerleiste auf 7 von 12 Seiten ueber den
     Kennzahlen, gemessen bis 88 px. Jetzt waechst der Bereich mit dem Inhalt; das
     padding-bottom des Inhalts reserviert den Platz der Steuerleiste.
     ZWEITER BEFUND ERGUEN 23.08. („die leiste fuer die slideshow ist jetzt zu weit
     unten … auf seite 1 und seite 7 an der grenze"): das Mitwachsen schob die am
     HERO-Boden klebende Leiste unter die SICHTkante — GEMESSEN ragte sie auf Seite 1
     bei 1920x911 um 14 px, bei 1600x830 um 88 px, bei 1366er-Laptops um 226 px
     hinaus. Ursache wie beim Shop-Fenster der Haendlerseite (1.676.0): alle
     senkrechten Masse hingen nur an der BREITE (vw) bzw. waren fest. Deshalb tragen
     die senkrechten Fresser des Startbereichs jetzt vh-Schranken (clamp mit
     min(vw,vh)): auf hohen Fenstern aendert sich nichts, auf flachen schrumpfen
     Schrift und Polster, bis Inhalt UND Leiste in 100svh stehen. Erst wenn selbst
     die Untergrenzen nicht passen (sehr flache Fenster), waechst der Bereich weiter
     nach unten — Kennzahlen bleiben immer frei, das war der Sinn des Umbaus.
     Das 780er-Minimum ist dafuer auf 660 gesenkt: es zwang den Hero auf
     1366x768-Geraeten (Sichthoehe ~645) auf 780 und damit die Leiste IMMER aus dem
     Bild, egal wie kompakt der Inhalt ist. */
  min-height:max(660px,100svh);
  isolation:isolate;
}
.hero:focus{outline:0}
.hero-slide{
  background-position:var(--hero-x,50%) var(--hero-y,50%);
  transform:scale(calc(var(--hero-scale,1) * 1.045));
  transition:opacity .8s ease,transform 7s cubic-bezier(.2,.7,.2,1);
}
.hero-slide.is-active{transform:scale(var(--hero-scale,1))}
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(5,15,27,.97) 0%,rgba(5,15,27,.92) 29%,rgba(5,15,27,.62) 49%,rgba(5,15,27,.16) 74%,rgba(5,15,27,.08) 100%),
    linear-gradient(0deg,rgba(5,15,27,.88) 0%,rgba(5,15,27,.22) 35%,transparent 62%);
}
.hero-content{
  position:relative;
  z-index:3;
  /* Nicht 100%: eine Prozent-Hoehe braucht eine feste Elternhoehe (1.396.0-Falle), und
     die ist eben gefallen — dieselbe Staffel wie am .hero haelt die Mitte-Lage. */
  min-height:max(660px,100svh);
  display:flex;
  align-items:center;
  /* Obergrenzen = die bisherigen festen Werte (auf hohen Fenstern aendert sich nichts);
     die Untergrenze oben muss den festen Seitenkopf freihalten. */
  padding-top:clamp(90px,11.5vh,118px);
  /* Die Reserve folgt der Leiste: sie schrumpft auf flachen Fenstern mit denselben
     vh-Schranken (Pfeile, Kartenpolster, Abstaende) — eine feste 152er-Reserve waere
     dort Luft, die den Inhalt aus dem Fenster schiebt. */
  padding-bottom:clamp(112px,15.5vh,152px);
}
.hero-copy-panel{width:min(760px,66vw)}
.hero h1{
  max-width:820px;
  margin:0 0 clamp(14px,2.6vh,26px);
  /* Die vh-Schranke ist der Leisten-Fix (siehe .hero): vier Zeilen Headline sind der
     groesste Posten der Seite — bei 8.4vh tragen sie auf einem 830er-Fenster noch
     rund 276 px statt 325. Die Breiten-Schranke bleibt daneben bestehen. */
  font-size:clamp(46px,min(5.15vw,8.4vh),84px);
  line-height:.99;
  letter-spacing:-.055em;
  text-wrap:balance;
}
.hero h1 .hero-title-line{
  display:block;
  color:#fff;
  -webkit-text-stroke:0;
}
.hero h1 .hero-title-accent{
  color:transparent;
  -webkit-text-stroke:1.25px rgba(255,255,255,.72);
}
.hero-copy-panel.is-long-copy h1{font-size:clamp(40px,min(4.5vw,6.9vh),72px);line-height:1.015}
.hero-copy{max-width:650px;font-size:clamp(15px,2vh,18px);line-height:1.65;margin-bottom:clamp(16px,3.1vh,30px)}
.hero-actions{flex-wrap:wrap}
.hero-trust{margin-top:clamp(16px,4.4vh,42px)}
/* Nur im Startbereich enger: .eyebrow gilt seitenweit, die 24 px unten sind dort richtig. */
.hero .eyebrow{margin-bottom:clamp(12px,2.5vh,24px)}
.hero-navigation{
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  bottom:clamp(12px,2.5vh,24px);
}
.hero-progress{
  width:100%;
  height:2px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
  margin-bottom:clamp(8px,1.5vh,14px);
}
.hero-progress span{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,var(--teal),#62f0d2);
  transform-origin:left;
}
@keyframes heroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero-navigation-row{
  display:grid;
  grid-template-columns:46px minmax(120px,170px) minmax(0,1fr) 46px auto;
  align-items:center;
  gap:12px;
}
.hero-arrow,
.hero-pause,
.hero-module-link{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(7,17,31,.48);
  color:#fff;
  backdrop-filter:blur(14px);
}
.hero-arrow{
  width:clamp(38px,4.9vh,46px);
  height:clamp(38px,4.9vh,46px);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  line-height:1;
  transition:.2s;
}
.hero-arrow:hover{background:rgba(22,199,163,.2);border-color:rgba(46,226,187,.5)}
.hero-module-state{display:grid;gap:2px;color:#fff}
.hero-module-state small{font-size:10px;letter-spacing:.12em;color:rgba(255,255,255,.52)}
.hero-module-state strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-module-window{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:0;
}
.hero-module-link{
  min-width:0;
  border-radius:14px;
  padding:clamp(6px,1.1vh,10px) 13px;
  text-align:left;
  transition:.2s;
}
.hero-module-link small,
.hero-module-link span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-module-link small{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.42);margin-bottom:3px}
.hero-module-link span{font-size:12px;font-weight:750;color:rgba(255,255,255,.68)}
.hero-module-link:hover,.hero-module-link.is-active{background:rgba(22,199,163,.14);border-color:rgba(46,226,187,.4)}
.hero-module-link.is-active span{color:#fff}
.hero-pause{
  width:clamp(38px,4.9vh,46px);
  height:clamp(38px,4.9vh,46px);
  padding:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:.2s;
}
.hero-pause:hover{background:rgba(22,199,163,.2);border-color:rgba(46,226,187,.5)}
.hero-pause-icon{font-size:12px;line-height:1;color:var(--teal)}
.hero.is-user-paused .hero-progress span{opacity:.35}
.scroll-hint{display:none}

/* Images remain clean; card copy lives below the image */
.card-banner-copy{display:none!important}
.module-card::before{display:none}
.module-card img,.module-card-wide img{transform-origin:center center}
.module-card{cursor:pointer}
.module-card .card-content{position:relative;z-index:2;background:#fff}

/* CTA uses a text-free image; readability comes from CSS only */
.cta-bg{
  background:
    linear-gradient(90deg,rgba(7,17,31,.98) 0%,rgba(7,17,31,.88) 42%,rgba(7,17,31,.5) 72%,rgba(7,17,31,.28) 100%),
    url('assets/mos-aktuell.webp') 58% center/cover;
  opacity:.9;
}

/* Module detail navigation */
.modal-image img{transform-origin:center center;transition:transform .3s ease,object-position .3s ease}
.modal-module-meta{display:flex;align-items:center;justify-content:space-between;gap:20px}
.modal-module-meta .eyebrow{margin-bottom:20px}
.modal-module-meta>span{font-size:11px;font-weight:800;letter-spacing:.1em;color:#84919c;white-space:nowrap}
.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px}
.modal-module-navigation{display:flex;gap:8px}
.modal-module-navigation button{
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid #dce5ea;
  background:#fff;
  color:var(--ink);
  font-size:25px;
  line-height:1;
  transition:.2s;
}
.modal-module-navigation button:hover{border-color:var(--teal);background:#eafaf6}

/* Admin editor: context-specific crops and separated copy */
.banner-editor-modal{max-height:94dvh;overflow:hidden}
.banner-editor-shell{height:min(820px,94dvh);min-height:0}
.banner-editor-sidebar,.banner-editor-main{min-height:0}
.banner-editor-main{overflow:auto}
.module-editor-sections{display:grid;gap:10px}
.module-editor-sections details{
  border:1px solid #e3ebef;
  border-radius:16px;
  background:#f8fafb;
  overflow:hidden;
}
.module-editor-sections summary{
  cursor:pointer;
  padding:14px 16px;
  color:var(--ink);
  font-size:13px;
  font-weight:850;
  list-style:none;
}
.module-editor-sections summary::-webkit-details-marker{display:none}
.module-editor-sections summary::after{content:"+";float:right;color:var(--teal);font-size:18px;line-height:1}
.module-editor-sections details[open] summary::after{content:"−"}
.module-editor-sections .module-text-editor{border:0;border-top:1px solid #e3ebef;border-radius:0;background:#fff}
.module-text-editor label>small{display:block;margin-top:6px;color:#7d8b96;font-weight:500;line-height:1.45}
.module-text-editor input[type="number"]{min-height:46px}
.banner-context-editor{
  display:grid;
  gap:16px;
  padding:18px;
  border:1px solid #e3ebef;
  border-radius:18px;
  background:#f8fafb;
}
.banner-context-editor>label{display:grid;gap:8px;font-size:13px;font-weight:800}
.banner-context-editor select{
  width:100%;
  border:1px solid #d5e0e6;
  border-radius:12px;
  padding:12px 13px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  font-weight:700;
}
.banner-editor-preview{
  min-height:0;
  aspect-ratio:16/9;
  transition:max-width .25s ease,aspect-ratio .25s ease;
}
.banner-editor-preview img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
.banner-editor-preview.is-hero-preview{aspect-ratio:16/7}
.banner-editor-preview.is-card-preview{aspect-ratio:16/9}
.banner-editor-preview.is-modal-preview{aspect-ratio:1/1.08;max-width:520px;margin-inline:auto}
.banner-editor-preview.is-mobile-preview{aspect-ratio:9/16;max-width:280px;margin-inline:auto}
.banner-editor-preview::after{content:"Vorschau: " attr(data-context-label)}
.banner-editor-modal .button-ghost{color:var(--ink);border-color:#d4dfe5;background:#fff;backdrop-filter:none}

@media(max-width:1180px){
  .hero-copy-panel{width:min(690px,72vw)}
  .hero-navigation-row{grid-template-columns:44px minmax(110px,145px) minmax(0,1fr) 44px auto}
  .hero-module-link{padding:9px 10px}
}

@media(max-width:1000px){
  .hero{min-height:max(800px,100svh)}
  .hero-content{min-height:max(800px,100svh);align-items:flex-start;padding-top:142px;padding-bottom:170px}
  .hero-copy-panel{width:min(680px,86vw)}
  .hero h1{font-size:clamp(48px,7vw,70px)}
  .hero-copy-panel.is-long-copy h1{font-size:clamp(42px,6.3vw,62px)}
  .hero-navigation-row{grid-template-columns:44px minmax(110px,150px) minmax(0,1fr) 44px auto}
  .hero-module-window{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-module-link:first-child{display:none}
  .banner-editor-shell{height:94dvh;overflow:auto}
  .banner-editor-main{overflow:visible}
}

@media(max-width:680px){
  .hero{
    min-height:max(760px,100svh);
  }
  .hero-slide{
    background-position:var(--hero-mobile-x,58%) var(--hero-mobile-y,50%);
    transform:scale(calc(var(--hero-mobile-scale,1.08) * 1.035));
  }
  .hero-slide.is-active{transform:scale(var(--hero-mobile-scale,1.08))}
  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(5,15,27,.74) 0%,rgba(5,15,27,.32) 23%,rgba(5,15,27,.62) 53%,rgba(5,15,27,.98) 100%),
      linear-gradient(90deg,rgba(5,15,27,.78),rgba(5,15,27,.18));
  }
  .hero-content{align-items:flex-start;padding-top:112px;padding-bottom:132px}
  .hero-copy-panel{width:100%}
  .hero .eyebrow{font-size:10px;margin-bottom:16px}
  .hero h1,.hero-copy-panel.is-long-copy h1{font-size:clamp(39px,11.3vw,50px);line-height:1.02;margin-bottom:18px}
  .hero-copy{font-size:14.5px;line-height:1.55;margin-bottom:20px;max-width:38ch}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:9px;width:min(100%,360px)}
  .hero-actions .button{min-height:48px;width:100%;padding-inline:18px}
  .hero-trust{display:none}
  .hero-navigation{bottom:12px}
  .hero-navigation-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px}
  .hero-arrow{width:40px;height:40px;font-size:24px}
  .hero-module-state{min-width:0}
  .hero-module-state strong{font-size:13px}
  .hero-module-window{display:none}
  /* Unter 680 px laeuft gar keine Wechselschau (shouldHeroAutoplay) — ein Pause-Knopf
     haette dort nichts anzuhalten. Kein Bedienelement ohne Wirkung. */
  .hero-pause{display:none}
  .hero-progress{margin-bottom:9px}
  .module-modal[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 12px);overflow:auto}
  .module-modal{max-width:calc(100% - 12px);border-radius:20px}
  .modal-image{height:245px;min-height:245px;border-radius:20px 20px 0 0}
  .modal-copy{padding:28px 22px 24px}
  .modal-copy h2{font-size:31px}
  .modal-copy>p:not(.eyebrow){font-size:15px}
  .modal-actions{align-items:stretch;flex-direction:column}
  .modal-module-navigation{justify-content:flex-end}
  .modal-actions .button{width:100%}
  .banner-editor-shell{height:auto;max-height:94dvh}
  .banner-editor-sidebar{max-height:250px;overflow:auto}
  .banner-editor-main{overflow:auto}
}
[hidden]{display:none!important}
@media(max-width:680px){
  .hero-slide{
    background-position:var(--hero-mobile-x,25%) var(--hero-mobile-y,50%);
    transform:scale(calc(var(--hero-mobile-scale,1.05) * 1.035));
  }
  .hero-slide.is-active{transform:scale(var(--hero-mobile-scale,1.05))}
}
@media(max-width:680px){
  .hero-slide{
    background-position:var(--hero-mobile-x,58%) var(--hero-mobile-y,50%);
  }
  .hero-copy-panel{position:relative;isolation:isolate}
  .hero-copy-panel::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-18px -10px -14px -18px;
    border-radius:20px;
    background:linear-gradient(90deg,rgba(5,15,27,.82) 0%,rgba(5,15,27,.68) 76%,rgba(5,15,27,.14) 100%);
    backdrop-filter:blur(2px);
    pointer-events:none;
  }
}
/* Die Bildkarte existiert nur auf dem Handy -- Desktop unveraendert. */
.hero-karte{display:none}
/* ---- Mobil-Start nach Vorschlag B (Erguen 27.07.): Diashow bleibt, wird aber ruhig ----
   Kein Foto mehr hinter dem Text (Markenverlauf statt Abdunklung), das Folienbild klein
   und ungedunkelt als Karte unter dem Text, feste Hoehen fuer Titel und Beschreibung,
   damit Karte und Knoepfe beim Folienwechsel nie mehr springen. Steht als LETZTER
   680px-Block in der Datei und ueberstimmt so die aelteren Regeln oben. */
@media(max-width:680px){
  .hero{background:
    radial-gradient(120% 55% at 88% 0%,rgba(22,199,163,.16),transparent 62%),
    linear-gradient(168deg,#0d2033 0%,#07111f 52%,#0a1c2e 100%)}
  .hero-media,.hero-overlay{display:none}
  .hero-copy-panel::before{display:none}
  /* Der ganze Startbereich entfaellt auf dem Handy (Vorgabe Erguen 28.07.): kein Bild,
     kein Text, keine Schaltflaechen -- die Seite beginnt mit "MOS PLATTFORM / Ihr
     gesamter Shopbetrieb an einem Ort." Der Abschnitt bleibt im Markup stehen, damit
     dieselbe Datei am Desktop unveraendert arbeitet; die Zeitgeber der Wechselschau sind
     zusaetzlich im Skript gesperrt und laufen hier nicht im Verborgenen weiter. */
  .hero{display:none}
  /* Ohne den Startbereich stoesst der erste Abschnitt an die feststehende Kopfzeile --
     deshalb hier ausdruecklich Luft darunter. */
  .intro.section{padding-top:104px}
  /* Die Kopfzeile war durchsichtig und bekam ihren Hintergrund erst beim Scrollen. Das
     passte zum dunklen Startbereich darunter; ohne ihn stuende die weisse Wortmarke auf
     hellem Grund und waere unsichtbar. Auf dem Handy traegt sie deshalb von Anfang an
     ihren Hintergrund. */
  .site-header{background:rgba(7,17,31,.94);backdrop-filter:blur(18px);
    box-shadow:0 8px 30px rgba(0,0,0,.18)}
  .hero-navigation{display:none}
  /* Volle Bildschirmhoehe: die Spalte streckt sich, die Bildkarte nimmt den Rest ein. */
  .hero-content{padding-top:96px;padding-bottom:34px;align-items:stretch}
  .hero-copy-panel{display:flex;flex-direction:column;min-height:100%}
  /* Feste Zeilenzahl fuer die Ueberschrift wie in der Diashow -- die Hoehe ist IMMER
     reserviert, egal wie kurz der Titel ist, damit darunter nichts springt. */
  .hero .eyebrow{margin-bottom:12px;height:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .hero h1,.hero-copy-panel.is-long-copy h1{
    font-size:clamp(31px,8.8vw,38px);line-height:1.08;margin-bottom:14px;
    overflow:hidden;height:calc(4 * 1.08em);
    /* Enger Satz ist eine Desktop-Einstellung: bei rund 34px beruehren sich die Konturen
       der Akzentzeile fast und die Innenflaechen von e/a/g laufen zu. */
    letter-spacing:-.03em}
  /* Die Kontur der Akzentzeile muss mit der Schrift mitschrumpfen. 1,25px sind am Desktop
     (rund 74px Schrift) etwa 1,7 Prozent der Buchstabenhoehe und wirken fein; bei 34px
     waeren dieselben 1,25px mehr als das Doppelte davon -- die Zeile wirkte verwaschen
     statt filigran. 0,7px halten das Verhaeltnis. */
  .hero h1 .hero-title-accent{-webkit-text-stroke-width:.7px}
  /* Beschreibung entfaellt auf dem Handy: ihr Inhalt steht bereits als sauberer
     Bildtext auf der Karte (banner-title/-subtitle) -- nichts doppelt schreiben. */
  .hero-copy{display:none}
  .hero-karte{
    display:block;position:relative;width:100%;flex:1 1 auto;min-height:230px;
    border-radius:16px;overflow:hidden;margin:0 0 16px;
    border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 44px rgba(0,0,0,.42);
    background:#0d1b2b}
  /* Bild und Bildtext sind Kopien aus der Modulkachel weiter unten (siehe
     heroKarteAufbauen): dadurch gelten hier dieselben Schriftgroessen, Farben und
     Abstaende wie dort. Nur die Hoehe unterscheidet sich -- die Karte im Startbereich
     fuellt den Rest des Bildschirms --, deshalb wird der Textblock hier ueber die volle
     Hoehe gespannt und darin mittig gesetzt statt auf feste 192 Pixel geklemmt. */
  .hero-karte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform:scale(var(--bild-zoom,1))}
  .hero-karte .module-card-banner-copy{
    left:18px;top:0;bottom:0;height:auto;width:min(52%,215px)}
  /* Dieselbe Titelgroesse wie auf den einspaltigen Kacheln unten. Ohne diese Zeile
     griffe die allgemeinere Regel (5,3vw) -- die Ueberschrift waere groesser als dort. */
  .hero-karte .module-card-banner-copy strong{font-size:clamp(18px,1.25vw,23px)}
  /* Knoepfe kompakter (waren zu wuchtig). */
  .hero-actions{gap:8px;width:min(100%,340px)}
  .hero-actions .button{min-height:41px;font-size:14px;padding-inline:15px}
  /* Modulfilter (Alle / Organisation / Vertrieb & Kunden ...) entfaellt auf dem Handy:
     eine seitlich wegscrollende Knopfreihe, die auf dem kleinen Schirm nur Platz kostet.
     Weil die Filterknoepfe damit unerreichbar sind, muss JEDE Karte sichtbar bleiben --
     sonst bliebe eine auf dem Desktop gesetzte Auswahl auf dem Handy haengen. */
  .filter-bar{display:none}
  .module-card.hidden{display:block}
  /* Knopf ueber dem Portalbild mittig statt linksbuendig. */
  .portal-preview-cta{display:flex;justify-content:center;width:min(100%,340px);margin-inline:auto}
  /* Menue: schmale Karte am rechten Rand statt Block ueber die ganze Breite. Sie haengt
     unter dem Menueknopf, wo der Daumen sie geoeffnet hat, und laesst die Seite dahinter
     sichtbar -- das wirkt leichter als eine randlose Flaeche. */
  .nav-links{
    left:auto;right:16px;top:62px;width:min(72vw,252px);
    padding:12px;border-radius:16px;gap:0;
    background:rgba(9,20,34,.95);backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:0 26px 64px rgba(0,0,0,.55)}
  .nav-links a{padding:11px 12px;border-radius:10px;font-size:14.5px;color:rgba(255,255,255,.84)}
  .nav-links a+a{border-top:1px solid rgba(255,255,255,.07)}
  .nav-links a:active{background:rgba(255,255,255,.07)}
  .mobile-nav-actions{gap:8px;margin-top:10px;padding-top:12px}
  .mobile-nav-actions .button{min-height:40px;font-size:13.5px;padding-inline:16px}
  .nav-toggle span{width:21px;margin:4px 5px}
}
/* Der Bildtext im Detailfenster ist eine Handy-Zugabe -- am Desktop steht das Bild dort
   als hohe Spalte neben dem Text und braucht ihn nicht. */
.modal-image .module-card-banner-copy{display:none}
/* Der Wischhinweis gehoert zum Handy; am Desktop stehen dort die Pfeile. */
.modal-wisch{display:none;margin:0;font-size:12.5px;color:var(--muted);
  align-items:center;gap:7px}
.modal-wisch:before{content:"‹";font-size:16px;color:var(--teal)}
.modal-wisch:after{content:"›";font-size:16px;color:var(--teal)}
@media(max-width:680px){
  .modal-image{position:relative}
  .modal-image .module-card-banner-copy{
    display:flex;left:18px;top:0;bottom:0;height:auto;width:min(56%,215px)}
  .modal-image .module-card-banner-copy strong{font-size:clamp(18px,5.6vw,24px)}
  /* Schliessen war oben rechts an der Fensterecke -- auf einem grossen Telefon der am
     schwersten erreichbare Punkt, und beim Blaettern im Fenster scrollte der Knopf mit
     nach oben weg. Jetzt haengt er fest am unteren Bildschirmrand im Daumenbereich und
     bleibt beim Scrollen stehen (position:fixed wirkt im Dialog gegenueber dem
     Sichtfenster). Der Textblock bekommt unten Platz, damit der Knopf nichts verdeckt. */
  .module-modal .modal-close{
    position:fixed;top:auto;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:54px;height:54px;font-size:30px;color:#07111f;
    box-shadow:0 14px 36px rgba(0,0,0,.5)}
  .module-modal .modal-copy{padding-bottom:86px}
  /* Der schwebende Knopf haelt sich rechts unten -- die Aufforderung weicht ihm aus. */
  .module-modal .modal-actions{padding-right:62px}
  /* Blaettern per Wischen statt per Pfeil: die kleinen Pfeilknoepfe waren auf dem Handy
     schwer zu treffen und standen dem Schliessen im Weg. */
  .modal-module-navigation{display:none}
  .modal-wisch{display:flex}
}

/* Hinweis statt Live-Vorschau auf kleinen Geraeten. Liegt ueber allem, verschwindet
   von selbst oder auf Antippen. */
.geraet-hinweis{
  position:fixed;left:14px;right:14px;bottom:18px;z-index:60;
  display:grid;gap:6px;padding:16px 18px;border-radius:16px;
  background:rgba(10,22,38,.96);border:1px solid rgba(255,255,255,.18);color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.5);cursor:pointer;
  opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s;pointer-events:none}
.geraet-hinweis.is-da{opacity:1;transform:none;pointer-events:auto}
.geraet-hinweis strong{font-size:15px}
.geraet-hinweis span{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.8)}
@media(min-width:681px){.geraet-hinweis{left:auto;right:24px;max-width:380px}}
/* Prevent editor preview from overlapping the text controls */
.banner-editor-main{
  display:flex;
  flex-direction:column;
  gap:24px;
  overflow:auto;
}
.banner-editor-preview-wrap,.banner-editor-controls{flex:0 0 auto}


/* Der Block „ohne sichtbaren Play/Pause-Knopf" stand hier und nahm der Steuerzeile die
   fuenfte Spalte wieder weg — die spaetere Regel gewinnt bei gleicher Spezifitaet, und der
   1.673.0-Knopf fiel dadurch in eine zweite Rasterzeile mitten in die Kennzahlen (Befund
   Erguen 23.08. mit Bildschirmfoto). Seit der Knopf zurueck ist (Zuruf 23.08.), gelten
   wieder die urspruenglichen Spaltenregeln weiter oben; der Block ist ersatzlos ausgebaut. */

/* Short, editable copy inside the intentionally empty banner area */
.module-card-banner-copy{
  position:absolute;z-index:2;left:22px;top:18px;width:min(44%,230px);height:194px;
  display:flex;flex-direction:column;justify-content:center;gap:7px;color:#fff;pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.28)
}
.module-card-wide .module-card-banner-copy{left:28px;top:26px;width:min(43%,390px);height:278px}
.module-card-banner-copy strong{display:block;font-size:clamp(19px,1.65vw,30px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance}
.module-card:not(.module-card-wide) .module-card-banner-copy strong{font-size:clamp(18px,1.25vw,23px)}
.module-card-banner-copy span{display:block;max-width:30ch;font-size:clamp(11px,.8vw,14px);line-height:1.42;color:rgba(255,255,255,.9);text-wrap:balance}
@media(max-width:1000px){
  .module-card-wide .module-card-banner-copy,.module-card-banner-copy{left:20px;top:16px;width:min(46%,230px);height:198px}
  .module-card-banner-copy strong{font-size:clamp(18px,2.35vw,23px)}
  .module-card-banner-copy span{font-size:12px}
}
@media(max-width:680px){
  .module-card-wide .module-card-banner-copy,.module-card-banner-copy{left:18px;top:14px;width:min(45%,180px);height:192px;gap:5px}
  .module-card-banner-copy strong{font-size:clamp(18px,5.3vw,22px)}
  .module-card-banner-copy span{font-size:11.5px;line-height:1.35}
}
/* ===== Portalvorschau: sieben Ansichten nach dem realen MOS-Portal =================
 * Aufbau und Farbwelt folgen den Referenzen in docs/website/references/portal-real-ui/:
 * helle Arbeitsflaeche, ruhige Karten, Gold nur fuer die eine fuehrende Aktion, Status
 * als farbige Plaketten. Bewusst vereinfacht -- es ist eine Marketing-Vorschau, keine
 * Nachbildung jedes Details. */
.demo-view-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.demo-view-head small{display:block;font-size:10.5px;letter-spacing:.14em;font-weight:800;color:#7b8ba3}
.demo-view-head b{display:block;font-size:clamp(16px,1.5vw,21px);line-height:1.2;margin-top:3px}
.demo-view-head p{margin:5px 0 0;font-size:12.5px;color:#6b7a90;max-width:56ch}
.demo-branch{flex:0 0 auto;font-size:11.5px;font-weight:700;color:#4d5c72;background:#eef2f7;border:1px solid #dde4ee;border-radius:999px;padding:6px 12px}
.demo-action-gold{flex:0 0 auto;font-size:11.5px;font-weight:800;color:#3a2a06;background:#ffb52e;border-radius:9px;padding:8px 13px}
.demo-kpis-4 b{font-size:clamp(15px,1.5vw,20px)}

/* Aufklappbare Zeilen des Dashboards */
.demo-accordion{display:flex;flex-direction:column;gap:8px}
.demo-acc{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid #e2e8f1;border-radius:12px;background:#fff}
.demo-acc.is-open{border-color:rgba(255,181,46,.55);background:rgba(255,181,46,.07)}
.demo-acc>div{flex:1;min-width:0}
.demo-acc b{display:block;font-size:13px}
.demo-acc small{display:block;font-size:11.5px;color:#6b7a90;margin-top:2px}
.demo-acc-icon{flex:0 0 auto;width:26px;height:26px;border-radius:8px;background:#eef2f7}
.demo-acc-crit{background:rgba(224,85,85,.16)}
.demo-acc-warn{background:rgba(255,181,46,.2)}
.demo-pill{flex:0 0 auto;font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;background:#eef2f7;color:#5b6b82;font-style:normal}
.demo-pill-crit{background:rgba(224,85,85,.16);color:#c0392b}
.demo-pill-warn{background:rgba(255,181,46,.2);color:#8a6413}

/* Aktionsspalte */
.demo-side-actions{margin-top:14px;border:1px solid #e2e8f1;border-radius:12px;background:#fff;padding:12px 13px}
.demo-side-actions b{display:block;font-size:10.5px;letter-spacing:.14em;color:#7b8ba3;margin-bottom:9px}
.demo-side-actions button{display:block;width:100%;text-align:left;margin-bottom:6px;padding:9px 11px;border:1px solid #e2e8f1;border-radius:9px;background:#fff;font:inherit;font-size:12.5px;color:#28374b;cursor:default}
.demo-side-actions button.is-primary{background:#ffb52e;border-color:#ffb52e;color:#3a2a06;font-weight:700}

/* Filterreiter */
.demo-chips{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.demo-chips span{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid #dde4ee;background:#fff;color:#5b6b82}
.demo-chips span.is-active{background:#ffb52e;border-color:#ffb52e;color:#3a2a06;font-weight:800}

/* Tabellen */
.demo-table-wrap{overflow-x:auto;border:1px solid #e2e8f1;border-radius:12px;background:#fff}
.demo-table{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.demo-table th{text-align:left;font-size:10.5px;letter-spacing:.08em;color:#7b8ba3;padding:10px 12px;border-bottom:1px solid #e9eef5;white-space:nowrap}
.demo-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;color:#33445c;white-space:nowrap}
.demo-table tr:last-child td{border-bottom:0}
.demo-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid #dde4ee;color:#5b6b82}
.demo-tag-green{border-color:rgba(22,163,74,.4);color:#15803d;background:rgba(22,163,74,.09)}
.demo-tag-red{border-color:rgba(224,85,85,.45);color:#c0392b;background:rgba(224,85,85,.09)}
.demo-tag-amber{border-color:rgba(255,181,46,.55);color:#8a6413;background:rgba(255,181,46,.13)}

/* Marketing-Kacheln */
.demo-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.demo-tiles article{border:1px solid #e2e8f1;border-radius:12px;background:#fff;padding:10px;overflow:hidden}
.demo-tiles b{display:block;font-size:12.5px;margin-top:9px}
.demo-tiles small{display:block;font-size:11px;color:#6b7a90;margin-top:2px}
.demo-thumb{display:block;height:74px;border-radius:9px}
.demo-thumb-a{background:linear-gradient(135deg,#0d6c7d,#16c7a3)}
.demo-thumb-b{background:linear-gradient(135deg,#243b55,#4b6584)}
.demo-thumb-c{background:linear-gradient(135deg,#b8860b,#ffb52e)}
.demo-thumb-d{background:linear-gradient(135deg,#5b2c6f,#a569bd)}

/* Fortschritt */
.demo-progress-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.demo-progress-list>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,180px) auto;align-items:center;gap:11px;font-size:12.5px;color:#33445c}
.demo-progress-list i{display:block;height:7px;border-radius:999px;background:#e9eef5;position:relative}
.demo-progress-list i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:999px;background:#16c7a3}
.demo-progress-list em{font-style:normal;font-weight:700;font-size:12px;color:#28374b}

@media(max-width:680px){
  .demo-progress-list>div{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b"}
  .demo-progress-list span{grid-area:n}
  .demo-progress-list em{grid-area:v}
  .demo-progress-list i{grid-area:b}
  .demo-view-head{flex-direction:column}
  .demo-table{min-width:440px}
}

/* ===== Rechtliche Seiten ==========================================================
 * Bewusst schlicht und ohne erfundene Angaben: was der Betreiber liefern muss, ist als
 * "offen" ausgezeichnet und faellt optisch auf. Eine falsche Pflichtangabe waere
 * schlechter als eine fehlende. */
.legal-page{background:#f5f7fa;color:#22303f}
.legal-main{max-width:820px;padding:120px 22px 70px}
.legal-main h1{font-size:clamp(28px,4vw,42px);line-height:1.1;margin:6px 0 22px;letter-spacing:-.02em}
.legal-todo{border:1px solid rgba(255,181,46,.5);background:rgba(255,181,46,.1);border-radius:14px;padding:15px 17px;margin-bottom:30px}
.legal-todo b{display:block;font-size:14px;margin-bottom:5px}
.legal-todo p{margin:0;font-size:13.5px;line-height:1.6;color:#4d5c72}
.legal-section{margin-bottom:30px}
.legal-section h2{font-size:19px;margin:0 0 10px;letter-spacing:-.01em}
.legal-section p{margin:0 0 10px;font-size:14px;line-height:1.7;color:#3c4c60}
.legal-list{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:8px 18px;margin:0;font-size:14px}
.legal-list dt{font-weight:700;color:#22303f}
.legal-list dd{margin:0;color:#3c4c60}
.legal-list dd.offen,p.offen{color:#8a6413;background:rgba(255,181,46,.14);border-radius:7px;padding:2px 9px;display:inline-block}
.legal-main a{color:#0d6c7d;text-decoration:underline}
.legal-page .footer{background:#07111f}
@media(max-width:680px){
  .legal-main{padding:100px 18px 50px}
  .legal-list{grid-template-columns:minmax(0,1fr);gap:3px 0}
  .legal-list dd{margin-bottom:9px}
}

/* ===== Portalvorschau: die fehlenden Bausteine =====================================
 * Das HTML der Vorschau verweist auf 17 Klassen, zu denen nie eine Regel geschrieben
 * wurde -- deshalb standen dort rohe Aufzaehlungen und blanker Text. Aufbau und Farbwelt
 * folgen den echten Ansichten in docs/website/references/portal-real-ui/: helle
 * Arbeitsflaeche, ruhige weisse Karten, Gold nur fuer die eine fuehrende Aktion,
 * Kennzahlen als Kartenreihe, Status als farbige Plaketten.
 *
 * Die Vorschau ist bewusst REIN ANZEIGEND: keine Eingabefelder, keine Formulare, nichts
 * wird gespeichert. Die Schaltflaechen darin sind Attrappen und zeigen deshalb auch keinen
 * Zeigefinger -- sie versprechen keine Wirkung, die es nicht gibt. Einzig die linke
 * Navigation schaltet die Ansicht um. */
.demo-modal-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}

.demo-app-real>section{background:#f2f5f9}
.demo-app-real button{cursor:default}
.demo-app-real aside button{cursor:pointer}

/* Kopfzeile jeder Ansicht */
.demo-real-welcome,.demo-workspace-header,.demo-cockpit-header,.demo-report-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#fff;border:1px solid #e2e8f1;border-radius:14px;padding:15px 17px;margin-bottom:13px}
.demo-real-welcome small,.demo-workspace-header small,.demo-cockpit-header small,.demo-report-header small{
  display:block;font-size:10.5px;letter-spacing:.14em;font-weight:800;color:#7b8ba3}
.demo-real-welcome b,.demo-workspace-header b,.demo-cockpit-header b,.demo-report-header b{
  display:block;font-size:17px;line-height:1.2;margin-top:3px;color:#16283d}
.demo-real-welcome p,.demo-workspace-header p{margin:5px 0 0;font-size:12.5px;color:#6b7a90}
.demo-real-welcome>span{flex:0 0 auto;text-align:center;background:#0b1928;color:#fff;border-radius:12px;
  padding:9px 15px;font-size:22px;font-weight:800;line-height:1.05}
.demo-real-welcome>span small{color:rgba(255,255,255,.6);letter-spacing:.1em;font-size:9.5px;margin-top:2px}
.demo-workspace-header>button,.demo-cockpit-header>span,.demo-report-header>span{
  flex:0 0 auto;font-size:11.5px;font-weight:700;border-radius:9px;padding:7px 13px;border:1px solid #dde4ee;
  background:#fff;color:#4d5c72}
.demo-workspace-header>button{background:#ffb52e;border-color:#ffb52e;color:#3a2a06}

/* Kennzahlen als Kartenreihe */
.demo-real-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}
.demo-real-kpis>div{background:#fff;border:1px solid #e2e8f1;border-radius:13px;padding:12px 13px}
.demo-real-kpis small{display:block;font-size:11px;color:#7b8ba3;font-weight:600}
.demo-real-kpis b{display:block;font-size:24px;line-height:1.1;margin:5px 0 3px;color:#16283d;letter-spacing:-.02em}
.demo-real-kpis em{font-style:normal;font-size:11px;color:#6b7a90}

/* Karten mit Kopfzeile */
.demo-real-dashboard,.demo-workspace-layout,.demo-cockpit-grid,.demo-report-grid{display:grid;gap:11px}
.demo-real-dashboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.demo-workspace-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.demo-cockpit-grid,.demo-report-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.demo-workspace-wide{grid-column:1/-1}
.demo-app-real section>div>section,.demo-app-real .demo-real-dashboard>section,
.demo-app-real .demo-workspace-layout>section,.demo-app-real .demo-cockpit-grid>section,
.demo-app-real .demo-report-grid>section{
  background:#fff;border:1px solid #e2e8f1;border-radius:14px;padding:13px 15px;min-width:0}
.demo-app-real section header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.demo-app-real section header b{font-size:13px;color:#16283d}
.demo-app-real section header span{font-size:11px;color:#7b8ba3;font-weight:600}

/* Listen ohne Aufzaehlungspunkte */
.demo-app-real section ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.demo-app-real section li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#33445c;
  padding:8px 10px;border:1px solid #eef2f7;border-radius:10px;background:#fbfcfe}
.demo-app-real section li>i{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#16c7a3}
.demo-app-real section li span{display:flex;flex-direction:column;min-width:0}
.demo-app-real section li small{font-size:11px;color:#7b8ba3;margin-top:2px}
.demo-app-real section li b{margin-left:auto;font-size:12.5px}

/* Schnellzugriff und Ablaeufe */
.demo-real-shortcuts,.demo-routines{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.demo-real-shortcuts button,.demo-routines button{padding:9px 10px;border:1px solid #e2e8f1;border-radius:10px;
  background:#fbfcfe;font:inherit;font-size:11.5px;font-weight:600;color:#33445c;text-align:left}

/* Zuletzt verwendet */
.demo-workspace-wide>div{display:flex;flex-wrap:wrap;gap:7px}
.demo-workspace-wide>div>span{font-size:11.5px;color:#4d5c72;background:#f2f5f9;border:1px solid #e6ecf4;
  border-radius:9px;padding:7px 11px}

/* Balken der Monatsuebersicht */
.demo-report-bars{display:flex;align-items:flex-end;gap:9px;height:120px;padding-top:6px}
.demo-report-bars i{flex:1;height:var(--h,50%);border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,#16c7a3,rgba(22,199,163,.35))}

@media(max-width:900px){
  .demo-real-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-real-dashboard,.demo-workspace-layout,.demo-cockpit-grid,.demo-report-grid{grid-template-columns:minmax(0,1fr)}
  .demo-workspace-wide{grid-column:auto}
}

/* ===== Eingebettete Vorschau: echte Aufnahmen aus dem Portal ======================
 * Vorher stand hier eine handgebaute Nachbildung (rund 190 Zeilen). Sie war gut, aber sie
 * war ein Nachbau: sobald sich am Portal etwas aendert, veraltet sie still und niemand
 * merkt es. Jetzt liegen dort drei echte Aufnahmen. Veralten koennen die auch -- aber sie
 * zu ersetzen ist ein Dateitausch statt Markup nachzubauen.
 * Rahmen und Wechsel bleiben, die Punkteliste links steuert weiterhin. */
.portal-schuss{position:relative;border-radius:16px;overflow:hidden;background:#0d1b2b;
  border:1px solid rgba(255,255,255,.08);aspect-ratio:1532/856}
.portal-schuss .portal-panel{position:absolute;inset:0;display:block;opacity:0;
  transition:opacity .5s ease;pointer-events:none}
.portal-schuss .portal-panel.is-active{opacity:1;pointer-events:auto}
.portal-schuss img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(var(--bild-zoom,1));display:block}
.portal-browser{border-radius:18px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14)}
.portal-browser-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:#111b28;border-bottom:1px solid rgba(255,255,255,.08)}
.pb-dots{display:flex;gap:6px}
.pb-dots i{width:11px;height:11px;border-radius:50%;background:#e0574f}
.pb-dots i:nth-child(2){background:#f0b429}
.pb-dots i:nth-child(3){background:#2fbf71}
.pb-addr{flex:1;max-width:340px;margin:0 auto;text-align:center;font-size:12px;
  color:rgba(255,255,255,.65);background:rgba(255,255,255,.08);border-radius:8px;
  padding:5px 14px;letter-spacing:.02em}
/* Innerhalb des Rahmens traegt der Rahmen die Rundung -- doppelte Ecken sähen gestueckelt aus. */
.portal-browser .portal-schuss{border-radius:0;box-shadow:none;border:0}
/* Einladung auf dem Banner: kleine Puls-Kapsel unten mittig, KEINE Abdunklung des Bildes.
   Nur Zierde -- den Klick nimmt der umschliessende .portal-demo-Knopf entgegen. */
.schuss-hinweis{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  display:inline-flex;align-items:center;gap:14px;padding:12px 28px 12px 12px;border-radius:999px;
  background:rgba(10,22,38,.84);border:1px solid rgba(255,255,255,.24);color:#fff;
  font-size:19px;font-weight:700;white-space:nowrap;box-shadow:0 18px 48px rgba(0,0,0,.45);
  transition:transform .2s,box-shadow .2s;pointer-events:none}
.portal-demo:hover .schuss-hinweis,.portal-demo:focus-visible .schuss-hinweis{
  transform:translate(-50%,-50%) scale(1.05);box-shadow:0 24px 60px rgba(0,0,0,.55)}
.schuss-hinweis .ph-puls{width:46px;height:46px;animation-duration:2.6s}
.schuss-hinweis .ph-puls svg{width:21px;height:21px}
@media(max-width:680px){.schuss-hinweis{font-size:14px;padding:7px 16px 7px 7px;gap:10px}
  .schuss-hinweis .ph-puls{width:30px;height:30px}
  .schuss-hinweis .ph-puls svg{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.portal-schuss .portal-panel{transition:none}}


/* ===== Kachelbild ohne eingebrannten Farbverlauf ==================================
 * Der Verlauf gehoert nicht ins Bild: er wird herausgeschnitten (Zoom nach rechts, siehe
 * cardCropPresets in script.js), und die Lesbarkeit des Kacheltextes uebernimmt ein
 * Schleier aus CSS. Genau die Trennung, die der Auftrag verlangt -- Bild ist Motiv,
 * Abdunklung ist Gestaltung.
 *
 * transform-origin:right, damit der Zoom NUR links hinausschiebt. Bei mittiger Herkunft
 * wuerde er beidseitig beschneiden und rechts Personen und Bildschirme anschneiden. */
.module-card img,.module-card-wide img{transform-origin:right center}
.module-card-wide img{transform:scale(var(--banner-scale-wide,var(--banner-scale,1)))}
.module-card-wide:hover img{transform:scale(calc(var(--banner-scale-wide,var(--banner-scale,1)) * 1.035))}

/* Der Schleier liegt UNTER dem Text und ueber dem Bild. Er faellt nach rechts aus, damit
   das Motiv frei bleibt, und deckt genau die Breite, die der Text braucht. */
.module-card>img{position:relative}
.module-card::before{
  content:"";position:absolute;left:0;top:0;width:min(72%,430px);z-index:1;pointer-events:none;
  height:230px;
  background:linear-gradient(100deg,rgba(6,16,28,.92) 0%,rgba(6,16,28,.78) 42%,rgba(6,16,28,.35) 74%,rgba(6,16,28,0) 100%)
}
.module-card-wide::before{height:330px;width:min(58%,520px)}
@media(max-width:680px){
  .module-card::before,.module-card-wide::before{height:220px;width:min(84%,340px)}
}

/* Der Knopf unter der Bereichsliste braucht Luft: er stand direkt an der letzten Trennlinie
   und wirkte wie Teil der Aufzählung statt wie die Aufforderung, die er ist. */
.portal-preview-cta{margin-top:26px}
/* Der laufende Wechsel darf nicht springen -- die Punkte blenden weich um. */
.feature-item{transition:opacity .35s,color .35s}

/* ------------------------------------------------------------------
   Hero nutzt die volle Seitenbreite
   ------------------------------------------------------------------
   Der Hero hing im schmalen 1180px-Raster und liess auf grossen Bildschirmen
   links und rechts je ~340px leer stehen. Er bekommt jetzt einen eigenen,
   breiten Seitenrahmen. Der Kopf laeuft mit: er liegt durchsichtig UEBER dem
   Hero, und ohne dieselbe Breite staende das Logo nicht mehr ueber der
   Ueberschrift. Die Deckelung greift erst auf sehr breiten Monitoren. */
.site-header>.shell,
.hero-content,
.hero-navigation{width:min(calc(100% - 96px),1800px)}
/* Damit die langen Modultitel ("Berichte automatisch erstellen.") auf der
   gewonnenen Breite auf einer Zeile bleiben statt zu brechen. */
.hero-copy-panel{width:min(880px,58vw)}
.hero h1{max-width:min(1040px,56vw)}
@media(max-width:1280px){
  .site-header>.shell,
  .hero-content,
  .hero-navigation{width:calc(100% - 64px)}
  .hero-copy-panel{width:min(760px,70vw)}
  .hero h1{max-width:none}
}
@media(max-width:680px){
  .site-header>.shell,
  .hero-content,
  .hero-navigation{width:calc(100% - 28px)}
  .hero-copy-panel{width:100%}
}

/* ------------------------------------------------------------------
   Logo im Kopf und im Fuss
   ------------------------------------------------------------------
   Eine Bilddatei traegt beides: den Schriftzug MOS (Quellzeilen 0-147) und
   darunter den Zusatz "INTRAMOS GmbH" (Quellzeilen 176-198). Im Kopf war der
   Zusatz bei 40px Gesamthoehe nur noch 4-5px hoch und damit unlesbarer Matsch.
   Deshalb wird er dort weggeschnitten: das Seitenverhaeltnis 608/160 zeigt genau
   den Schriftzug, object-position haelt den Ausschnitt oben. Nebeneffekt und
   Absicht zugleich: MOS wird dadurch groesser, obwohl der Kopf gleich hoch bleibt. */
/* Seit die Webseite die echten Vektorlogos benutzt, ist kein Zuschnitt per object-fit
   mehr noetig: mos-wordmark.svg IST schon nur der Schriftzug. Das alte PNG hatte harte
   Alphakanten ohne jede Zwischenstufe -- daher die ausgefransten Buchstaben. */
/* Die Marke bleibt beim Scrollen GLEICH gross -- und zwar von Anfang an in der kleineren
   Groesse, die vorher erst beim Scrollen entstand. Das Schrumpfen war ein modisches Detail
   und im Betrieb unruhig; die Leiste selbst wird ohnehin schon flacher (padding). */
.brand-logo-header{height:34px;width:auto}
/* Im Fuss ist Platz, dort soll "INTRAMOS GmbH" wirklich lesbar sein --
   bei 84px Gesamthoehe ist der Zusatz rund 10px hoch statt 5px. */
.brand-logo-footer{height:84px}
@media(max-width:680px){
  .brand-logo-header{height:30px}
  .brand-logo-footer{height:66px}
}

/* ------------------------------------------------------------------
   Kontaktfenster "Demo anfragen"
   ------------------------------------------------------------------
   Das Fenster stand ohne eine einzige eigene Regel da und sah deshalb aus wie
   ein Browserformular von 2003: Felder in einer Reihe, native Rahmen, waage-
   rechter Rollbalken. Es bekommt jetzt dieselbe Sprache wie die uebrigen
   Fenster -- runde Ecken, weicher Schatten, derselbe verschwommene Hintergrund. */
.kontakt-modal{
  border:0;padding:0;
  border-radius:28px;
  box-shadow:0 40px 120px rgba(0,0,0,.35);
  width:100%;
  max-width:min(720px,calc(100% - 32px));
  overflow:visible;              /* der Schliessknopf sitzt bewusst ausserhalb */
  background:#fff;
  color:var(--ink);
}
.kontakt-modal[open]{animation:modalIn .35s}
.kontakt-modal::backdrop{background:rgba(3,10,18,.82);backdrop-filter:blur(8px)}
.kontakt-form{padding:46px 44px 38px}
.kontakt-form h2{font-size:36px;line-height:1.06;letter-spacing:-.035em;margin:0 0 14px}
.kontakt-lead{margin:0 0 26px;color:#5d6c78;line-height:1.6}

/* Zwei Spalten fuer die kurzen Angaben, volle Breite fuer Auswahl und Nachricht. */
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.kontakt-weit{grid-column:1/-1}
.kontakt-grid label{
  display:grid;gap:7px;
  font-size:13px;font-weight:800;color:var(--ink);
}
.kontakt-grid input,
.kontakt-grid select,
.kontakt-grid textarea{
  width:100%;
  font:inherit;font-weight:600;
  color:var(--ink);background:#fff;
  border:1px solid #d5e0e6;border-radius:12px;
  padding:12px 14px;min-height:48px;
  transition:border-color .2s,box-shadow .2s;
}
.kontakt-grid textarea{min-height:112px;resize:vertical;line-height:1.55}
.kontakt-grid input::placeholder,
.kontakt-grid textarea::placeholder{color:#9aa8b3;font-weight:500}
.kontakt-grid input:focus,
.kontakt-grid select:focus,
.kontakt-grid textarea:focus{
  outline:0;border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(22,199,163,.18);
}

/* Der Fehlerhinweis darf nicht als grauer Fliesstext untergehen. */
.kontakt-fehler{
  margin:18px 0 0;padding:11px 15px;
  border:1px solid rgba(203,50,50,.3);border-radius:12px;
  background:rgba(203,50,50,.07);
  color:#b3261e;font-size:13.5px;font-weight:700;
}
.kontakt-fehler[hidden]{display:none}

.kontakt-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.kontakt-actions .button-ghost{color:var(--ink);border-color:#d5e0e6;background:#fff}
.kontakt-actions .button-ghost:hover{background:#f2f6f8}
.kontakt-modal .modal-close{color:var(--ink)}

@media(max-width:680px){
  .kontakt-modal{max-width:calc(100% - 18px);border-radius:22px}
  .kontakt-form{padding:30px 20px 26px}
  .kontakt-form h2{font-size:27px}
  .kontakt-grid{grid-template-columns:1fr}
  .kontakt-actions .button{width:100%}
}
/* Auf niedrigen Fenstern ist das Formular hoeher als der Bildschirm. Der Browser
   deckelt <dialog> von sich aus, und mit overflow:visible (das der Schliessknopf
   braucht) laufen die Knoepfe dann unsichtbar unten heraus. Deshalb rollt das
   Formular selbst, nicht das Fenster. */
.kontakt-form{max-height:calc(100dvh - 34px);overflow-y:auto;border-radius:inherit;overscroll-behavior:contain}
@media(max-width:680px){
  /* Auf dem Handy ist links und rechts kein Platz fuer einen Knopf ausserhalb. */
  .kontakt-modal .modal-close{right:8px;top:8px;width:38px;height:38px;font-size:23px}
  .kontakt-form{max-height:calc(100dvh - 24px)}
  .kontakt-form h2{padding-right:40px}
}
/* Dieselbe Zeile traegt jetzt Fehler UND Erfolg -- zwei getrennte Kaesten waeren an einer
   Stelle, an der immer nur einer von beiden erscheint, nur Ballast. */
.kontakt-fehler.is-ok{
  border-color:rgba(22,199,163,.4);
  background:rgba(22,199,163,.09);
  color:#0d7a66;
}
/* Nach dem Absenden sind die Felder leer und der Knopf gesperrt -- das Formular soll dann
   nicht mehr zum Ausfuellen einladen. */
.kontakt-form.is-gesendet .kontakt-grid{opacity:.45;pointer-events:none}
.kontakt-actions .button[disabled]{opacity:.6;pointer-events:none}

/* ------------------------------------------------------------------
   Echtes Portal im Vorschaufenster
   ------------------------------------------------------------------
   Der Rahmen zeigt die laufende Anwendung unter /portal/. Gleiche Domain, deshalb greift
   das Sitzungscookie (SameSite=Strict) und es braucht kein gelockertes Cookie.
   Die Hoehe ist bewusst grosszuegig: das Portal ist eine Schreibtisch-Oberflaeche mit
   Seiten- und Taskleiste und wird in einem flachen Rahmen unleserlich. */
.portal-live{position:relative;margin-top:25px;border-radius:18px;overflow:hidden;background:#0d1b2b;
  height:min(72vh,640px);min-height:420px;border:1px solid rgba(255,255,255,.08)}
.portal-live-frame{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .5s}
.portal-live.is-da .portal-live-frame{opacity:1}
.portal-live-laden{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:11px;
  color:rgba(255,255,255,.7);font-size:13.5px;font-weight:600;transition:opacity .4s}
.portal-live.is-da .portal-live-laden{opacity:0;pointer-events:none}
.portal-live-laden span{width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);border-top-color:var(--teal);animation:portalDreht .8s linear infinite}
@keyframes portalDreht{to{transform:rotate(360deg)}}
/* Einladung zum Ausprobieren: liegt ueber dem geladenen Portal, ein Klick irgendwo
   blendet sie aus. Abdunklung bewusst zart, damit das Portal dahinter sichtbar lockt. */
.portal-hinweis{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:rgba(7,17,31,.42);backdrop-filter:blur(2px);cursor:pointer;
  opacity:0;transition:opacity .45s;padding:18px;box-sizing:border-box}
.portal-hinweis.is-da{opacity:1}
.portal-hinweis.weg{opacity:0;pointer-events:none}
.portal-hinweis-karte{max-width:400px;text-align:center;background:rgba(10,22,38,.94);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:26px 28px 24px;color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translateY(14px) scale(.96);transition:transform .45s cubic-bezier(.2,.9,.3,1.2)}
.portal-hinweis.is-da .portal-hinweis-karte{transform:none}
.portal-hinweis-karte b{display:block;font-size:19px;margin-top:14px}
.portal-hinweis-karte p{margin:8px 0 16px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.78)}
.ph-puls{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;color:var(--teal,#39d3c3);
  background:rgba(57,211,195,.14);animation:phWippt 2.6s ease-in-out infinite}
.ph-puls::before,.ph-puls::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(57,211,195,.55);animation:phPuls 2.6s ease-out infinite}
.ph-puls::after{animation-delay:1.3s}
@keyframes phPuls{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
@keyframes phWippt{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.portal-live-laden span{animation:none}
  .ph-puls,.ph-puls::before,.ph-puls::after{animation:none}
  .portal-hinweis,.portal-hinweis-karte{transition:none}}
@media(max-width:680px){
  .portal-live{height:min(66vh,520px);min-height:340px;border-radius:14px}
}

/* Das Portal ist eine Schreibtisch-Oberflaeche mit Seiten- und Taskleiste. In einem
   1120-Pixel-Fenster steht sie zwar da, wirkt aber wie ein Screenshot. Auf Browserbreite
   arbeitet man darin -- und genau das soll der Besucher erleben.
   Die Breite gilt NUR, wenn das echte Portal geladen wurde (is-live wird im Skript
   gesetzt); die Nachbildung als Rueckfall behaelt ihre bisherige Groesse. */
/* Die Live-Ansicht fuellt den BILDSCHIRM, und der Portalrahmen bekommt den Rest der Hoehe.
   Vorher bekam der Rahmen eine feste Hoehe (92vh) -- zusammen mit Kopfzeile und Raendern
   war das Fenster damit HOEHER als der Bildschirm, der Dialog bekam einen Rollbalken, und
   ausgerechnet die MOS-Taskleiste lag unterhalb der Faltkante. Eine feste Zahl kann das
   nie fuer jede Bildschirmhoehe treffen; der Rest-Platz trifft es immer. */
.demo-modal.is-live{max-width:min(1800px,calc(100% - 24px));height:calc(100dvh - 20px);max-height:none}
.demo-modal.is-live .demo-modal-inner{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
.demo-modal.is-live .demo-modal-inner{padding:22px 24px 24px}
/* Der Kopftext wird schmaler gesetzt statt kleiner: er soll lesbar bleiben, aber dem
   Portal nicht die Hoehe wegnehmen. */
.demo-modal.is-live .demo-modal-inner>.demo-modal-heading{margin-bottom:4px}
.demo-modal.is-live .demo-modal-heading h2{font-size:26px}
/* Der Erklaertext faellt in der Live-Ansicht weg -- er kostet zwei Zeilen Hoehe und sagt
   nichts, was nicht ohnehin dasteht: das Band im Portal selbst sagt dasselbe kuerzer.
   Im Rueckfall auf die Nachbildung bleibt er. */
.demo-modal.is-live .demo-modal-heading p:not(.eyebrow){display:none}
.demo-modal.is-live .portal-live{margin-top:14px;flex:1 1 auto;height:auto;min-height:320px}
@media(max-width:900px){
  .demo-modal.is-live{max-width:calc(100% - 16px)}
  .demo-modal.is-live .demo-modal-inner{padding:18px 14px 16px}
  .demo-modal.is-live .demo-modal-heading h2{font-size:20px}
  /* Auch schmal gilt: der Rahmen nimmt den Rest der Fensterhoehe, keine feste Zahl. */
}

/* Wechselnde Kurzpunkte
   Die drei Haken standen still untereinander und wurden ueberlesen. Jetzt laeuft immer nur
   einer, dafuer wechselt er. Alle Punkte bleiben im DOM stehen -- fuer Vorleseprogramme und
   fuer Besucher ohne JavaScript, die sonst gar nichts saehen.
   Die Hoehe wird vom hoechsten Punkt gehalten (Raster mit einer Zelle), damit beim Wechsel
   nichts springt. */
.mini-points.is-rotierend{display:grid;margin-top:25px;min-height:1.6em}
.mini-points.is-rotierend>span{
  grid-area:1/1;font-weight:650;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;
  pointer-events:none;
}
.mini-points.is-rotierend>span.is-an{opacity:1;transform:none;pointer-events:auto}
/* Ohne JavaScript bleibt die Liste, wie sie war: alle Punkte untereinander und sichtbar. */
.no-js .mini-points.is-rotierend{gap:13px}
.no-js .mini-points.is-rotierend>span{grid-area:auto;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .mini-points.is-rotierend>span{transition:opacity .2s}
  .mini-points.is-rotierend>span.is-an{transform:none}
}

/* Wegweiser auf der Fehlerseite. Wer hier landet, hatte ein Ziel -- er soll es finden,
   nicht nur erfahren, dass es hier nicht liegt. */
.fehler-wege{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:52ch}
.fehler-wege li{padding:13px 16px;border:1px solid #e3ebef;border-radius:14px;background:#fff;font-size:14.5px;color:var(--muted)}
.fehler-wege a{font-weight:750;color:var(--ink)}
.fehler-wege a:hover{color:var(--teal)}

/* Kopf auf den hellen Seiten (Impressum, Datenschutz, Fehlerseite).
   Der Kopf ist durchsichtig gebaut, weil er auf der Startseite ueber dem dunklen Hero
   liegt. Auf den hellen Seiten stand damit das weisse Logo auf hellem Grund -- praktisch
   unsichtbar. Sie bekommen den dunklen Balken, den der Kopf sonst erst beim Scrollen
   annimmt; ein zweites Logo in dunkler Fassung braucht es dafuer nicht. */
.legal-page .site-header{background:#07111f;box-shadow:0 6px 30px rgba(0,0,0,.12)}
.legal-page .legal-main,.legal-page .fehler-wege{position:relative}
/* Der Inhalt beginnt sonst unter dem festen Kopf. */
.legal-page main{padding-top:118px}
.legal-page .footer{color:rgba(255,255,255,.72);padding:26px 0}
.legal-page .footer a{color:#fff;font-weight:700}
@media(max-width:680px){.legal-page main{padding-top:96px}}

/* Das Vorschaufenster ist jetzt ein Knopf: ein Klick irgendwo darauf oeffnet das echte
   Portal. Als <button> gebaut, damit Tastatur und Vorleseprogramme es als Bedienelement
   erkennen -- ein div mit Klickbehandlung waere fuer beide unsichtbar.
   Die Knopf-Standardgestaltung muss dafuer zurueckgenommen werden. */
.portal-demo{
  display:block;width:100%;text-align:left;
  border:0;padding:7px;font:inherit;color:inherit;cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.portal-demo:hover{transform:perspective(1200px) rotateY(-3deg) translateY(-4px)}
.portal-demo:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
@media(max-width:1000px){.portal-demo:hover{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.portal-demo,.portal-demo:hover{transition:none;transform:none}}

/* Die Aufnahmen blenden weich um, mehr Bewegung braucht es hier nicht -- das Fenster ist
   ein Verweis auf das echte Portal, keine Vorfuehrung. */

/* ------------------------------------------------------------------
   Portalvorschau gross genug zum Lesen
   ------------------------------------------------------------------
   Gemessen: das Portal wurde bei 1866 Pixeln aufgenommen und stand in einem 588 Pixel
   breiten Fenster -- Massstab 0,32, eine 12-Pixel-Schrift wurde 3,8 Pixel gross. Unlesbar,
   und damit war der Zweck verfehlt.
   Zwei Hebel, beide noetig:
   1. Die Aufnahmen zeigen nur noch den Arbeitsbereich. Seitenleiste, Fensterrahmen und
      Taskleiste kosteten ein Viertel der Breite und erzaehlten nichts.
   2. Der Abschnitt nutzt die volle Seitenbreite statt des 1180er-Rasters, und das Bild
      bekommt den groesseren Anteil. Im Web ist Platz -- den vorher zu verschenken war
      der eigentliche Fehler. */
.experience .shell{width:min(calc(100% - 96px),1800px)}
.experience-grid{grid-template-columns:minmax(320px,.62fr) minmax(0,1.38fr);gap:64px}
@media(max-width:1280px){
  .experience .shell{width:calc(100% - 64px)}
  .experience-grid{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);gap:44px}
}
@media(max-width:1000px){
  .experience .shell{width:calc(100% - 48px)}
  .experience-grid{grid-template-columns:minmax(0,1fr);gap:38px}
}
@media(max-width:680px){.experience .shell{width:calc(100% - 28px)}}

/* Die Punkte steuern den Bildwechsel -- das sah man ihnen nicht an. */
.feature-item{cursor:pointer;border-radius:12px;padding-inline:10px;margin-inline:-10px;
  transition:background .25s,opacity .35s,color .35s}
.feature-item:hover{background:rgba(22,199,163,.07)}
.feature-item:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.feature-item.is-active{background:rgba(22,199,163,.09)}

/* =====================================================================================
   Bearbeitungsmodus der Bilder.

   Steht komplett am Ende und beginnt jede Regel mit .bearb- oder body.bearb-modus:
   ohne den Modus faellt keine dieser Regeln auf irgendetwas. Ein Besucher laedt zwar die
   Datei mit, sieht davon aber nichts -- die Leiste kommt gar nicht erst ins DOM.
   ===================================================================================== */
.bearb-leiste{position:fixed;z-index:4000;inset:auto 18px 18px auto;margin:0;
  width:min(380px,calc(100vw - 36px));
  background:#0d1b2b;color:#eaf1f8;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 22px 60px rgba(4,12,22,.5);font-size:13px;overflow:hidden}
.bearb-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.bearb-kopf strong{font-size:13px;letter-spacing:.02em}
.bearb-meldung{flex:1;font-size:11.5px;color:#9fd8c6;min-height:14px}
.bearb-meldung[data-art="warn"]{color:#ffb9a8}
.bearb-ende{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer}
.bearb-ende:hover{background:rgba(255,255,255,.1)}

.bearb-plaetze{max-height:190px;overflow-y:auto;padding:10px 14px}
.bearb-gruppe{margin-bottom:10px}
.bearb-gruppe>span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(234,241,248,.5);margin-bottom:6px}
.bearb-platz{display:inline-block;margin:0 6px 6px 0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:inherit;border-radius:8px;padding:5px 10px;
  font:inherit;font-size:12px;cursor:pointer}
.bearb-platz:hover{background:rgba(12,157,145,.28);border-color:rgba(12,157,145,.6)}

.bearb-panel{border-top:1px solid rgba(255,255,255,.12);padding:12px 14px 14px}
.bearb-panel-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.bearb-panel-kopf small{display:block;font-size:10.5px;color:rgba(234,241,248,.45)}
.bearb-herkunft{font-size:11px;color:rgba(234,241,248,.62);text-align:right;flex:0 0 auto}
.bearb-ablage{display:block;text-align:center;padding:14px 10px;border-radius:10px;cursor:pointer;
  border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.bearb-ablage:hover,.bearb-ablage.ist-ziel{border-color:var(--teal);background:rgba(12,157,145,.14)}
.bearb-ablage span{display:block;font-size:12.5px}
.bearb-ablage small{display:block;margin-top:3px;font-size:10.5px;color:rgba(234,241,248,.5)}

.bearb-ziel{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bearb-ziel button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:inherit;border-radius:8px;padding:7px 6px;font:inherit;font-size:12px;cursor:pointer}
.bearb-ziel button.is-active{background:rgba(12,157,145,.3);border-color:rgba(12,157,145,.65)}
.bearb-gleich{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.bearb-gleich:disabled{opacity:.4;cursor:default}
.bearb-gleich:not(:disabled):hover{background:rgba(255,255,255,.1)}
.bearb-regler{margin-top:12px;display:grid;gap:9px}
.bearb-regler label{display:grid;gap:4px;font-size:11.5px;color:rgba(234,241,248,.72)}
.bearb-regler input[type=range]{width:100%;accent-color:#0c9d91}
.bearb-hinweis{margin:10px 0 0;font-size:11px;line-height:1.5;color:rgba(234,241,248,.5)}
.bearb-knoepfe{margin-top:11px;display:flex;gap:8px}
.bearb-zuruck{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.bearb-zuruck:disabled{opacity:.4;cursor:default}
.bearb-zuruck:not(:disabled):hover{background:rgba(255,255,255,.1)}

/* Bearbeitbare Plaetze sichtbar machen -- nur im Modus. */
body.bearb-modus .module-card,
body.bearb-modus .portal-panel{cursor:pointer}
body.bearb-modus .module-card:hover,
body.bearb-modus .portal-panel:hover{outline:2px dashed rgba(12,157,145,.75);outline-offset:3px}
body.bearb-modus .bearb-aktiv{outline:2px solid var(--teal);outline-offset:3px}

/* =====================================================================================
   Bearbeitungsmodus der Bilder.

   Steht komplett am Ende und beginnt jede Regel mit .bearb- oder body.bearb-modus:
   ohne den Modus faellt keine dieser Regeln auf irgendetwas. Ein Besucher laedt zwar die
   Datei mit, sieht davon aber nichts -- die Leiste kommt gar nicht erst ins DOM.
   ===================================================================================== */
.bearb-leiste{position:fixed;z-index:4000;inset:auto 18px 18px auto;margin:0;
  width:min(380px,calc(100vw - 36px));
  background:#0d1b2b;color:#eaf1f8;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 22px 60px rgba(4,12,22,.5);font-size:13px;overflow:hidden}
.bearb-kopf{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.bearb-kopf strong{font-size:13px;letter-spacing:.02em}
.bearb-meldung{flex:1;font-size:11.5px;color:#9fd8c6;min-height:14px}
.bearb-meldung[data-art="warn"]{color:#ffb9a8}
.bearb-ende{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:5px 11px;font:inherit;font-size:12px;cursor:pointer}
.bearb-ende:hover{background:rgba(255,255,255,.1)}

.bearb-plaetze{max-height:190px;overflow-y:auto;padding:10px 14px}
.bearb-gruppe{margin-bottom:10px}
.bearb-gruppe>span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(234,241,248,.5);margin-bottom:6px}
.bearb-platz{display:inline-block;margin:0 6px 6px 0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);color:inherit;border-radius:8px;padding:5px 10px;
  font:inherit;font-size:12px;cursor:pointer}
.bearb-platz:hover{background:rgba(12,157,145,.28);border-color:rgba(12,157,145,.6)}

.bearb-panel{border-top:1px solid rgba(255,255,255,.12);padding:12px 14px 14px}
.bearb-panel-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.bearb-panel-kopf small{display:block;font-size:10.5px;color:rgba(234,241,248,.45)}
.bearb-herkunft{font-size:11px;color:rgba(234,241,248,.62);text-align:right;flex:0 0 auto}
.bearb-ablage{display:block;text-align:center;padding:14px 10px;border-radius:10px;cursor:pointer;
  border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.bearb-ablage:hover,.bearb-ablage.ist-ziel{border-color:var(--teal);background:rgba(12,157,145,.14)}
.bearb-ablage span{display:block;font-size:12.5px}
.bearb-ablage small{display:block;margin-top:3px;font-size:10.5px;color:rgba(234,241,248,.5)}

.bearb-ziel{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bearb-ziel button{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:inherit;border-radius:8px;padding:7px 6px;font:inherit;font-size:12px;cursor:pointer}
.bearb-ziel button.is-active{background:rgba(12,157,145,.3);border-color:rgba(12,157,145,.65)}
.bearb-gleich{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.bearb-gleich:disabled{opacity:.4;cursor:default}
.bearb-gleich:not(:disabled):hover{background:rgba(255,255,255,.1)}
.bearb-regler{margin-top:12px;display:grid;gap:9px}
.bearb-regler label{display:grid;gap:4px;font-size:11.5px;color:rgba(234,241,248,.72)}
.bearb-regler input[type=range]{width:100%;accent-color:#0c9d91}
.bearb-hinweis{margin:10px 0 0;font-size:11px;line-height:1.5;color:rgba(234,241,248,.5)}
.bearb-knoepfe{margin-top:11px;display:flex;gap:8px}
.bearb-zuruck{background:transparent;border:1px solid rgba(255,255,255,.24);color:inherit;
  border-radius:8px;padding:6px 12px;font:inherit;font-size:12px;cursor:pointer}
.bearb-zuruck:disabled{opacity:.4;cursor:default}
.bearb-zuruck:not(:disabled):hover{background:rgba(255,255,255,.1)}

/* Bearbeitbare Plaetze sichtbar machen -- nur im Modus. */
body.bearb-modus .module-card,
body.bearb-modus .portal-panel{cursor:pointer}
body.bearb-modus .module-card:hover,
body.bearb-modus .portal-panel:hover{outline:2px dashed rgba(12,157,145,.75);outline-offset:3px}
body.bearb-modus .bearb-aktiv{outline:2px solid var(--teal);outline-offset:3px}