:root{
  --bg:#f1f0ec;--paper:#faf9f6;--ink:#161817;--muted:#626762;--line:#d8d9d3;
  --soft:#e8e9e4;--dark:#171a19;--dark2:#202422;--gold:#b89745;--gold2:#d4bd78;
  --green:#267557;--green-soft:#e0eee7;--yellow:#9d7b21;--yellow-soft:#f3ecd5;
  --red:#a54b42;--red-soft:#f3e1de;--radius:28px;--shadow:0 24px 70px rgba(25,30,27,.10);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}a{color:inherit}.shell{width:min(1240px,calc(100% - 48px));margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;width:min(1320px,calc(100% - 32px));margin:16px auto 0;padding:12px 14px 12px 18px;border:1px solid rgba(22,24,23,.08);border-radius:22px;background:rgba(250,249,246,.88);backdrop-filter:blur(18px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;box-shadow:0 8px 30px rgba(25,30,27,.06)}.brand{display:flex;gap:10px;align-items:center;text-decoration:none}.brand-mark{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);font-weight:900;font-family:Georgia,serif}.brand strong{display:block;letter-spacing:.15em;font-size:.82rem}.brand small{display:block;color:var(--muted);font-size:.63rem;letter-spacing:.12em;margin-top:1px}.main-nav{display:flex;justify-content:center;gap:8px}.main-nav a{padding:9px 12px;border-radius:999px;text-decoration:none;color:#4d524e;font-size:.88rem}.main-nav a:hover{background:#ebeae5;color:var(--ink)}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;font-weight:750;transition:.18s ease;border:1px solid transparent}.button:hover{transform:translateY(-1px)}.button-small{padding:10px 16px;font-size:.84rem}.button-dark{background:var(--ink);color:#fff}.button-primary{background:var(--ink);color:#fff;padding:14px 21px;box-shadow:0 8px 18px rgba(22,24,23,.15)}.button-primary:hover{background:#292d2b}.text-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;border-bottom:1px solid #9b9e98;padding-bottom:2px}.text-link span{font-weight:400}.hero{min-height:760px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr);align-items:center;gap:58px;padding:92px 0 70px}.eyebrow{margin:0 0 16px;font-size:.72rem;font-weight:850;letter-spacing:.16em;color:#666b66}.hero h1,.section-intro h2,.split-head h2,.guided-copy h2,.hardware-copy h2,.story-copy h2,.final-cta h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.035em;line-height:.98}.hero h1{font-size:clamp(3.8rem,6vw,6.8rem);margin:0;max-width:780px}.hero-lead{font-size:1.16rem;line-height:1.7;color:#4f5550;max-width:680px;margin:28px 0 0}.hero-actions{display:flex;gap:24px;align-items:center;margin-top:34px}.hero-proof{display:flex;align-items:center;gap:9px;margin-top:42px;font-size:.76rem;color:#707570}.hero-proof i{width:26px;height:1px;background:#b8bbb5}.hero-product{position:relative}.hero-product:before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(184,151,69,.18),rgba(184,151,69,0) 67%);top:50%;left:50%;transform:translate(-50%,-50%)}.twin-window{position:relative;z-index:1;background:#171b19;color:#f7f8f5;border-radius:30px;overflow:hidden;box-shadow:0 36px 90px rgba(20,24,21,.26);border:1px solid #343a36}.window-top{height:46px;border-bottom:1px solid #343a36;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;font-size:.66rem;letter-spacing:.12em;color:#aeb7b1}.window-dots{display:flex;gap:5px}.window-dots span{display:block;width:7px;height:7px;border-radius:50%;background:#59615c}.live-indicator{justify-self:end;display:flex;align-items:center;gap:6px}.live-indicator i{width:6px;height:6px;border-radius:50%;background:#48bd83;box-shadow:0 0 0 5px rgba(72,189,131,.08)}.twin-head{display:flex;justify-content:space-between;gap:20px;padding:28px 28px 18px}.micro{font-size:.64rem;letter-spacing:.14em;color:#8d9991}.twin-head h2{font-size:1.3rem;margin:7px 0 2px}.twin-head p{margin:0;color:#9aa59e;font-size:.82rem}.state-badge{height:max-content;border-radius:999px;padding:8px 11px;font-size:.66rem;font-weight:850;letter-spacing:.08em}.state-badge.is-ok{background:rgba(72,189,131,.12);color:#72d39e}.state-badge.is-watch{background:rgba(212,189,120,.14);color:#e4cc86}.state-badge.is-bad{background:rgba(195,89,76,.16);color:#e7968c}.twin-stage{margin:0 28px 20px;border:1px solid #303733;border-radius:22px;min-height:310px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;overflow:hidden;background:radial-gradient(circle at 25% 40%,#27352e 0,#1b211e 37%,#151917 72%)}.fridge{height:230px;width:132px;margin:auto;position:relative;perspective:700px}.fridge:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#f1f2ef,#aeb5b0);border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.3)}.fridge-light{position:absolute;z-index:2;top:12px;left:12px;right:12px;height:38px;background:linear-gradient(90deg,#12241c,#17452e,#12241c);border-radius:5px;box-shadow:0 0 18px rgba(71,201,130,.28)}.fridge-door{position:absolute;z-index:3;inset:58px 9px 8px 9px;background:linear-gradient(150deg,#daddd8,#a8aeaa);border:1px solid rgba(0,0,0,.25);border-radius:4px;transform-origin:left center;transition:.45s cubic-bezier(.2,.8,.2,1)}.fridge.is-open .fridge-door{transform:rotateY(-58deg)}.fridge-handle{position:absolute;right:10px;top:18px;width:4px;height:76px;border-radius:4px;background:#59605c}.fridge-label{position:absolute;left:16px;bottom:16px;color:#373c39;font-weight:900;font-size:1.1rem}.twin-reading{padding:20px 26px}.twin-reading strong{display:block;font-size:2rem;margin:7px 0 6px;color:#77d7a2}.twin-reading .reading-sub{font-size:.8rem;color:#a5b0a9}.twin-window.is-watch .twin-reading strong{color:#e0c36d}.twin-window.is-bad .twin-reading strong{color:#ea8f83}.twin-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 28px}.twin-facts>div{background:#202623;border:1px solid #303733;border-radius:14px;padding:12px 13px}.twin-facts span{display:block;color:#8e9992;font-size:.66rem;margin-bottom:4px}.twin-facts strong{font-size:.8rem}.online-dot{display:inline-block;width:6px;height:6px;background:#50bc82;border-radius:50%;margin-right:6px}.rule-line{margin:10px 28px 0;padding:11px 13px;border-radius:14px;border:1px solid #303733;display:flex;gap:12px;font-size:.72rem;color:#aab3ad}.rule-line span{color:#747f78}.demo-controls{display:flex;gap:8px;padding:14px 28px 26px}.demo-controls button{appearance:none;border:1px solid #38403b;background:#242a27;color:#eef2ef;border-radius:999px;padding:9px 12px;font-weight:750;font-size:.7rem;cursor:pointer}.demo-controls button:hover{background:#2c332f}.demo-controls button.ghost{margin-left:auto;color:#aeb7b1;background:transparent}.quiet-proof{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #cbcdc7;border-bottom:1px solid #cbcdc7}.quiet-proof div{padding:22px 18px;border-right:1px solid #cbcdc7}.quiet-proof div:last-child{border:0}.quiet-proof strong{display:block;font-family:Georgia,serif;font-size:1.15rem;font-weight:500}.quiet-proof span{display:block;color:#737873;font-size:.78rem;margin-top:3px}.section{padding:118px 0}.section-intro{max-width:760px}.section-intro h2,.split-head h2,.guided-copy h2,.hardware-copy h2,.story-copy h2,.final-cta h2{font-size:clamp(2.8rem,4.7vw,5.2rem);margin:0}.section-intro>p:last-child,.split-head>p,.guided-copy>p,.hardware-copy>p,.story-copy>p,.final-cta>p{font-size:1.03rem;line-height:1.75;color:#5f655f}.signal-journey{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #d1d3cd;border-radius:28px;overflow:hidden;background:#f8f7f3}.signal-journey article{position:relative;padding:30px 26px 32px;border-right:1px solid #d1d3cd;min-height:270px}.signal-journey article:last-child{border:0}.signal-journey article.accent{background:#1a1d1b;color:#fff}.step-no{font-size:.66rem;color:#8e938e;letter-spacing:.1em}.signal-icon{height:78px;display:flex;align-items:center;margin:18px 0}.signal-icon i{display:block}.door-icon i{width:34px;height:54px;border:2px solid currentColor;position:relative}.door-icon i:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;right:5px;top:24px}.sensor-icon i{width:54px;height:22px;border:2px solid currentColor;border-radius:18px;position:relative}.sensor-icon i:after{content:"";position:absolute;width:7px;height:7px;background:var(--gold);border-radius:50%;right:7px;top:5px}.hjarta-icon i{width:44px;height:58px;border:2px solid currentColor;border-radius:8px;box-shadow:inset 0 14px 0 rgba(184,151,69,.25)}.twin-icon i{width:58px;height:40px;border:2px solid currentColor;border-radius:8px;position:relative}.twin-icon i:before,.twin-icon i:after{content:"";position:absolute;left:9px;right:9px;height:2px;background:currentColor}.twin-icon i:before{top:12px}.twin-icon i:after{top:24px}.signal-journey h3{font-size:1.18rem;margin:0 0 9px}.signal-journey p{margin:0;color:#6a706a;font-size:.87rem;line-height:1.6}.signal-journey .accent p{color:#b4bdb7}.section-soft{background:#dedfd9;border-top:1px solid #d0d2cc;border-bottom:1px solid #d0d2cc}.split-head{display:grid;grid-template-columns:1fr .7fr;align-items:end;gap:80px}.split-head>p{margin:0}.usecase-grid{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:14px;margin-top:58px}.usecase-card{background:var(--paper);border:1px solid #cfd1cb;border-radius:26px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;min-height:280px}.usecase-card.large{grid-row:1/3;grid-template-columns:1fr;grid-template-rows:1.05fr .95fr;min-height:575px}.usecase-visual,.temp-visual,.logistics-visual{position:relative;background:#1b1f1c;display:grid;place-items:center;overflow:hidden}.door-visual{background:radial-gradient(circle at 50% 45%,#33423a,#1a1e1c 65%)}.mini-door{width:120px;height:180px;border:5px solid #bac0bb;padding:7px}.mini-door span{display:block;width:100%;height:100%;background:linear-gradient(150deg,#e0e2df,#929b95);position:relative}.mini-door span:after{content:"";position:absolute;right:10px;top:76px;width:4px;height:24px;background:#424844}.floating-pill{position:absolute;bottom:24px;left:24px;border-radius:999px;padding:9px 12px;font-size:.75rem;font-weight:800}.floating-pill.ok{background:#dff0e7;color:#235e47}.temp-visual{display:flex;flex-direction:column;gap:16px;color:#fff}.temp-visual strong{font-family:Georgia,serif;font-size:4rem;font-weight:500}.temp-visual div{height:5px;width:68%;background:linear-gradient(90deg,#68a879 0 50%,#d6b857 70%,#b34e45 100%);border-radius:10px;position:relative}.temp-visual div span{position:absolute;top:-5px;height:15px;width:2px;background:#fff;left:34%}.temp-visual small{color:#aab4ae}.logistics-visual{min-height:190px;background:#202421}.beam{position:absolute;width:74%;height:2px;background:#c4a954;box-shadow:0 0 12px rgba(196,169,84,.6)}.box{position:absolute;width:76px;height:54px;background:#8c918d;border-radius:5px;transform:translateX(32px);box-shadow:0 18px 30px rgba(0,0,0,.25)}.usecase-copy{padding:28px}.usecase-copy>span{font-size:.66rem;letter-spacing:.14em;color:#7f847f;text-transform:uppercase}.usecase-copy h3{font-family:Georgia,serif;font-weight:500;font-size:1.7rem;line-height:1.1;margin:8px 0 12px}.usecase-copy p{color:#666b66;font-size:.9rem;line-height:1.65;margin:0}.guided{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center}.guided-copy blockquote{font-family:Georgia,serif;font-size:1.5rem;line-height:1.35;margin:30px 0 0;padding-left:22px;border-left:3px solid var(--gold)}.onboarding-mock{background:#faf9f6;border:1px solid #ced0ca;border-radius:26px;padding:26px;box-shadow:var(--shadow)}.mock-top{display:flex;justify-content:space-between;color:#858a85;font-size:.67rem;letter-spacing:.1em}.onboarding-mock h3{font-family:Georgia,serif;font-size:2rem;font-weight:500;margin:28px 0 24px}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.choice-grid button{appearance:none;text-align:left;border:1px solid #d2d4ce;background:#f2f1ed;border-radius:18px;padding:18px 16px;min-height:155px;color:var(--ink)}.choice-grid button.selected{background:#1b1e1c;color:#fff;border-color:#1b1e1c}.choice-grid button>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(184,151,69,.15);color:#c5a65a;margin-bottom:24px}.choice-grid strong{display:block;font-size:.9rem;line-height:1.25}.choice-grid small{display:block;margin-top:6px;color:#7a7f7a}.selected small{color:#aeb7b1}.mock-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:20px;border-top:1px solid #d7d9d3;padding-top:18px;font-size:.76rem;color:#777d77}.mock-foot b{background:#1b1e1c;color:#fff;border-radius:999px;padding:9px 13px;white-space:nowrap}.hardware-section{background:#171a19;color:#fff}.hardware-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.hardware-art{height:560px;position:relative;display:flex;align-items:center;justify-content:center}.device-shadow{position:absolute;width:430px;height:130px;background:rgba(0,0,0,.45);filter:blur(30px);border-radius:50%;bottom:50px}.device-box{position:relative;width:260px;height:410px;background:linear-gradient(145deg,#e6e7e3,#9ca39e);border-radius:12px;box-shadow:0 50px 80px rgba(0,0,0,.45);padding:22px;transform:perspective(900px) rotateY(-8deg)}.device-glow{position:absolute;left:16px;right:16px;top:16px;height:95px;background:radial-gradient(circle,#27905f 0,#143b28 36%,#101713 74%);border-radius:8px;box-shadow:0 0 28px rgba(54,195,120,.23)}.device-screen{position:relative;z-index:2;margin-top:14px;height:70px;background:#111713;border:1px solid #38483f;border-radius:5px;padding:9px;color:#86dba9;display:flex;flex-direction:column}.device-screen span{font-size:.58rem;letter-spacing:.12em}.device-screen strong{font-size:.8rem;margin-top:4px}.device-screen small{color:#8d9c93;margin-top:auto}.device-name{position:absolute;bottom:28px;left:28px;font-weight:900;font-size:1.2rem;color:#171a19}.sensor-box{position:absolute;right:40px;bottom:66px;width:150px;height:90px;border-radius:12px;background:#1e211f;border:1px solid #444b46;box-shadow:0 30px 50px rgba(0,0,0,.45);padding:14px;font-size:.57rem;letter-spacing:.1em;color:#cbcfc9}.sensor-box i{position:absolute;bottom:-18px;width:34px;height:22px;border:5px solid #1d201e;border-radius:7px}.sensor-box i:nth-of-type(1){left:26px}.sensor-box i:nth-of-type(2){right:26px}.hardware-copy .eyebrow{color:#9fa8a2}.hardware-copy h2{color:#f4f3ef}.hardware-copy>p{color:#b5beb8}.hardware-copy ul{list-style:none;padding:0;margin:28px 0;display:grid;gap:12px}.hardware-copy li{padding-left:24px;position:relative;color:#d2d7d3}.hardware-copy li:before{content:"✓";position:absolute;left:0;color:#72c296}.hardware-copy .text-link{color:#fff;border-color:#666d68}.report-section{display:grid;grid-template-columns:.68fr 1.32fr;gap:70px;align-items:center}.report-copy{position:sticky;top:120px;align-self:start}.report-window{background:#f9f8f4;border:1px solid #cbcdc7;border-radius:25px;overflow:hidden;box-shadow:var(--shadow)}.window-top.light{border-bottom:1px solid #d8dad4;color:#777c77;background:#efeee9}.report-head{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dedfd9}.report-head strong{display:block;margin-top:4px}.report-kpis{display:flex;gap:9px}.report-kpis span{display:grid;place-items:center;min-width:72px;background:#ecece7;border-radius:13px;padding:8px 10px;font-size:.62rem;color:#747974}.report-kpis b{font-size:1rem;color:#252825}.report-kpis .attention{background:var(--yellow-soft)}.report-table{padding:10px 18px 18px}.report-row{display:grid;grid-template-columns:1.3fr 1fr .8fr .9fr .8fr;gap:10px;align-items:center;min-height:58px;border-bottom:1px solid #e1e2dd;font-size:.73rem}.report-row:last-child{border:0}.report-row.head{min-height:38px;color:#8a8f8a;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em}.report-row em{font-style:normal;border-radius:999px;padding:5px 8px;font-weight:750;width:max-content}.report-row em.ok{background:var(--green-soft);color:var(--green)}.report-row em.watch{background:var(--yellow-soft);color:var(--yellow)}.report-row em.bad{background:var(--red-soft);color:var(--red)}.story-section{background:#d7d7d1}.story-grid{display:grid;grid-template-columns:.55fr 1fr;gap:90px;align-items:center}.story-image{display:grid;gap:10px}.portrait-placeholder{aspect-ratio:4/5;border-radius:24px;background:linear-gradient(150deg,#272b28,#747a75);display:grid;place-items:center;color:#fff;font-family:Georgia,serif;font-size:5rem;box-shadow:var(--shadow)}.story-image small{color:#686d68}.story-lead{font-family:Georgia,serif!important;font-size:1.5rem!important;color:#2c302d!important;line-height:1.45!important}.final-cta{text-align:center;padding:130px 0 120px}.final-cta h2{max-width:920px;margin-inline:auto}.final-cta>p:not(.eyebrow){max-width:720px;margin:25px auto 0}.final-actions{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:34px}.site-footer{border-top:1px solid #cbcdc7;padding:36px 0 50px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;font-size:.73rem;color:#6f746f}.site-footer>div strong,.site-footer>div span{display:block}.site-footer>div strong{letter-spacing:.13em;color:var(--ink)}.site-footer nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.site-footer a{text-decoration:none}.site-footer a:hover{text-decoration:underline}
@media(max-width:1000px){.site-header{grid-template-columns:1fr auto}.main-nav{display:none}.hero{grid-template-columns:1fr;padding-top:70px}.hero-product{max-width:720px}.quiet-proof{grid-template-columns:1fr 1fr}.quiet-proof div:nth-child(2){border-right:0}.quiet-proof div:nth-child(-n+2){border-bottom:1px solid #cbcdc7}.signal-journey{grid-template-columns:1fr 1fr}.signal-journey article:nth-child(2){border-right:0}.signal-journey article:nth-child(-n+2){border-bottom:1px solid #d1d3cd}.usecase-grid{grid-template-columns:1fr;grid-template-rows:auto}.usecase-card.large{grid-row:auto;min-height:520px}.guided,.hardware-grid,.report-section,.story-grid{grid-template-columns:1fr;gap:50px}.report-copy{position:static}.hardware-art{max-width:650px;margin:auto;width:100%}.site-footer{grid-template-columns:1fr;text-align:center}.site-footer nav{order:2}.site-footer small{order:3}}
@media(max-width:680px){.shell{width:min(100% - 28px,1240px)}.site-header{width:calc(100% - 20px);margin-top:10px}.brand small{display:none}.hero{min-height:auto;padding:62px 0}.hero h1{font-size:3.5rem}.hero-lead{font-size:1rem}.hero-actions{align-items:flex-start;flex-direction:column;gap:16px}.hero-proof{flex-wrap:wrap}.twin-head{padding:22px 18px 14px}.twin-stage{margin:0 18px 16px;grid-template-columns:1fr;min-height:430px}.fridge{height:190px;width:110px;margin-top:24px}.twin-reading{text-align:center;padding-top:0}.twin-facts{grid-template-columns:1fr;padding:0 18px}.rule-line{margin:10px 18px 0}.demo-controls{padding:14px 18px 20px;flex-wrap:wrap}.demo-controls button.ghost{margin-left:0}.quiet-proof{grid-template-columns:1fr}.quiet-proof div{border-right:0!important;border-bottom:1px solid #cbcdc7!important}.quiet-proof div:last-child{border-bottom:0!important}.section{padding:84px 0}.section-intro h2,.split-head h2,.guided-copy h2,.hardware-copy h2,.story-copy h2,.final-cta h2{font-size:2.8rem}.signal-journey{grid-template-columns:1fr}.signal-journey article{border-right:0;border-bottom:1px solid #d1d3cd!important;min-height:220px}.signal-journey article:last-child{border-bottom:0!important}.split-head{grid-template-columns:1fr;gap:20px}.usecase-card,.usecase-card.large{grid-template-columns:1fr;grid-template-rows:auto}.usecase-visual,.temp-visual,.logistics-visual{min-height:260px}.choice-grid{grid-template-columns:1fr}.choice-grid button{min-height:120px}.mock-foot{align-items:flex-start;flex-direction:column}.hardware-art{height:460px;transform:scale(.86)}.sensor-box{right:0}.report-table{overflow-x:auto}.report-row{min-width:650px}.report-head{align-items:flex-start;flex-direction:column;gap:16px}.report-kpis{width:100%;overflow:auto}.story-grid{grid-template-columns:1fr}.final-actions{flex-direction:column}.site-footer nav{gap:12px}.window-top{grid-template-columns:auto 1fr auto}.window-top>div:nth-child(2){text-align:center}}


/* ==========================================================
   SVARTLIND NEXTGEN · REAL ASSETS · 2026-09-17
   ========================================================== */

.brand {
  gap: 12px;
}

.brand-logo {
  display: block;
  width: 96px;
  height: auto;
  filter: brightness(0) saturate(100%);
}

.brand-product-line {
  padding-left: 11px;
  border-left: 1px solid rgba(22,24,23,.16);
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .13em;
  white-space: nowrap;
}


/* HJÄRTA */

.hardware-art {
  position: relative;
  height: 610px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hardware-product-image {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 620px);
  max-height: 590px;
  object-fit: contain;

  border-radius: 26px;

  -webkit-mask-image:
    radial-gradient(
      ellipse 82% 78% at center,
      #000 58%,
      rgba(0,0,0,.96) 72%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 82% 78% at center,
      #000 58%,
      rgba(0,0,0,.96) 72%,
      transparent 100%
    );
}

.device-shadow,
.device-box,
.sensor-box {
  display: none !important;
}


/* STORY */

.story-image {
  align-self: end;
}

.story-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;

  border-radius: 26px;

  background:
    linear-gradient(
      155deg,
      #e6e5df 0%,
      #cccdc7 58%,
      #b7bab4 100%
    );
}

.story-portrait img {
  position: absolute;
  left: 50%;
  bottom: -1%;

  width: 108%;
  height: auto;

  transform: translateX(-50%);
  display: block;
}

.portrait-placeholder {
  display: none !important;
}


@media (max-width: 1000px) {
  .hardware-art {
    height: 520px;
  }

  .hardware-product-image {
    max-height: 500px;
  }

  .story-image {
    max-width: 500px;
  }
}


@media (max-width: 680px) {
  .brand-logo {
    width: 80px;
  }

  .brand-product-line {
    display: none;
  }

  .hardware-art {
    height: 390px;
  }

  .hardware-product-image {
    width: 112%;
    max-width: none;
    max-height: 400px;
  }
}



/* ==========================================================
   SVARTLIND NEXTGEN · HJÄRTA SOFT BLEND · 2026-09-17
   ========================================================== */

.hardware-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hardware-product-image {
  position: relative;
  z-index: 1;

  /*
   * Bild bleibt vollständig sichtbar,
   * aber seine Außenkanten verschwinden weich
   * in der dunklen HJÄRTA-Fläche.
   */
  -webkit-mask-image:
    radial-gradient(
      ellipse 86% 82% at 50% 54%,
      #000 0%,
      #000 56%,
      rgba(0,0,0,.98) 68%,
      rgba(0,0,0,.76) 81%,
      rgba(0,0,0,.20) 94%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 86% 82% at 50% 54%,
      #000 0%,
      #000 56%,
      rgba(0,0,0,.98) 68%,
      rgba(0,0,0,.76) 81%,
      rgba(0,0,0,.20) 94%,
      transparent 100%
    );

  /*
   * Ganz leichte Anpassung an die Section.
   * Keine Verfärbung des Produkts.
   */
  filter:
    saturate(.96)
    contrast(1.025);
}

.hardware-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;

  pointer-events: none;

  /*
   * Zweite, sehr subtile Vignette.
   * Sie nimmt dem rechteckigen Studiofoto
   * die letzten sichtbaren Außenkanten.
   */
  background:
    radial-gradient(
      ellipse 78% 72% at 48% 54%,
      transparent 0%,
      transparent 60%,
      rgba(20,24,22,.10) 76%,
      rgba(20,24,22,.46) 92%,
      rgba(20,24,22,.88) 100%
    );
}

@media (max-width: 680px) {
  .hardware-product-image {
    -webkit-mask-image:
      radial-gradient(
        ellipse 92% 86% at 50% 52%,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.72) 84%,
        transparent 100%
      );

    mask-image:
      radial-gradient(
        ellipse 92% 86% at 50% 52%,
        #000 0%,
        #000 62%,
        rgba(0,0,0,.72) 84%,
        transparent 100%
      );
  }
}



/* ==========================================================
   SVARTLIND NEXTGEN · HJÄRTA VISION MATCH · 2026-09-17
   ========================================================== */


/*
 * Ziel:
 * Das Produktfoto ist keine Karte innerhalb der Section.
 * Es wird Teil der dunklen Fläche.
 */

.hardware-section {
  padding-top: 132px;
  padding-bottom: 132px;
}


.hardware-grid {
  gap: 74px;
}


/* Bühne größer und dramatischer */

.hardware-art {
  position: relative;

  height: 735px;

  overflow: hidden;
  isolation: isolate;

  display: flex;
  align-items: center;
  justify-content: center;
}


/*
 * Echtes Produktbild deutlich größer als zuvor.
 * Es darf bewusst über seine Grid-Spalte hinaus wirken.
 */

.hardware-product-image {
  position: relative;
  z-index: 1;

  width: 119%;
  max-width: none;
  max-height: none;

  height: auto;

  object-fit: contain;

  transform: translateX(-3%);

  border-radius: 0;

  /*
   * Alte Maskierung deaktivieren.
   * Die Einbettung übernehmen wir kontrolliert
   * über die schwarze Vignette darüber.
   */
  -webkit-mask-image: none !important;
  mask-image: none !important;

  filter:
    saturate(.94)
    contrast(1.035)
    brightness(.985);
}


/*
 * Harte Foto-Außenkanten werden von der echten
 * Section-Farbe überblendet.
 *
 * Anders als vorher ist der Rand jetzt praktisch
 * vollständig schwarz und öffnet sich erst weit
 * innerhalb des Fotos.
 */

.hardware-art::after {
  content: "";

  position: absolute;
  z-index: 2;

  inset: -2px;

  pointer-events: none;

  background:

    /* links + rechts */
    linear-gradient(
      90deg,
      #171a19 0%,
      rgba(23,26,25,.99) 4%,
      rgba(23,26,25,.90) 9%,
      rgba(23,26,25,.47) 17%,
      rgba(23,26,25,0) 27%,

      rgba(23,26,25,0) 73%,
      rgba(23,26,25,.47) 83%,
      rgba(23,26,25,.90) 91%,
      rgba(23,26,25,.99) 96%,
      #171a19 100%
    ),

    /* oben + unten */
    linear-gradient(
      180deg,
      #171a19 0%,
      rgba(23,26,25,.96) 4%,
      rgba(23,26,25,.66) 10%,
      rgba(23,26,25,.18) 18%,
      rgba(23,26,25,0) 27%,

      rgba(23,26,25,0) 76%,
      rgba(23,26,25,.20) 84%,
      rgba(23,26,25,.68) 92%,
      rgba(23,26,25,.97) 98%,
      #171a19 100%
    );
}


/*
 * Sehr leiser grüner HJÄRTA-Halo hinter dem Gerät.
 * Nicht Dekoration – nur Verbindung mit dem realen
 * Romulan-Green-Licht im Gerät.
 */

.hardware-art::before {
  content: "";

  position: absolute;
  z-index: 0;

  left: 45%;
  top: 45%;

  width: 72%;
  height: 58%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(56,190,112,.12) 0%,
      rgba(33,102,70,.06) 34%,
      rgba(23,26,25,0) 72%
    );

  filter: blur(32px);

  pointer-events: none;
}


/* Desktop etwas Luft für die große Bildwirkung */

@media (min-width: 1180px) {

  .hardware-grid {
    grid-template-columns:
      minmax(0, 1.04fr)
      minmax(0, .96fr);
  }

}


/* Tablet */

@media (max-width: 1000px) {

  .hardware-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .hardware-art {
    height: 650px;
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .hardware-product-image {
    width: 115%;
    transform: translateX(-2%);
  }

}


/* Mobile */

@media (max-width: 680px) {

  .hardware-section {
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .hardware-art {
    height: 470px;
  }

  .hardware-product-image {
    width: 118%;
    transform: translateX(-2%);
  }

  .hardware-art::after {
    background:
      linear-gradient(
        90deg,
        #171a19 0%,
        rgba(23,26,25,.90) 7%,
        transparent 25%,
        transparent 75%,
        rgba(23,26,25,.90) 93%,
        #171a19 100%
      ),

      linear-gradient(
        180deg,
        #171a19 0%,
        rgba(23,26,25,.82) 7%,
        transparent 22%,
        transparent 80%,
        rgba(23,26,25,.88) 95%,
        #171a19 100%
      );
  }

}



/* ============================================================
   2026-09-17 · HJÄRTA FREISTELLER STAGE
   Transparenter Produkt-Freisteller statt eingestztes Foto.
   Bühne und Licht kommen aus CSS, nicht aus einem kaschierten Rand.
   ============================================================ */

.hardware-section {
  background:
    radial-gradient(circle at 22% 42%, rgba(88, 118, 210, 0.16) 0%, rgba(88, 118, 210, 0) 24%),
    linear-gradient(180deg, #101615 0%, #111716 100%);
}

.hardware-grid {
  align-items: center;
  gap: clamp(40px, 5vw, 88px);
}

.hardware-art.is-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(460px, 48vw, 760px);
  isolation: isolate;
}

.hardware-art.is-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 44%, rgba(150, 180, 255, 0.34) 0%, rgba(150, 180, 255, 0.18) 13%, rgba(150, 180, 255, 0) 38%),
    radial-gradient(circle at 28% 72%, rgba(34, 58, 96, 0.22) 0%, rgba(34, 58, 96, 0) 28%);
  filter: blur(10px);
}

.hardware-photo {
  margin: 0;
  width: min(100%, 760px);
  position: relative;
  z-index: 1;
}

.hardware-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.34));
}

.hardware-copy {
  position: relative;
  z-index: 2;
}

@media (max-width: 1100px) {
  .hardware-art.is-photo {
    min-height: clamp(360px, 62vw, 560px);
    justify-content: center;
  }

  .hardware-photo {
    width: min(100%, 620px);
  }
}

@media (max-width: 760px) {
  .hardware-section {
    background:
      radial-gradient(circle at 50% 18%, rgba(88, 118, 210, 0.16) 0%, rgba(88, 118, 210, 0) 28%),
      linear-gradient(180deg, #101615 0%, #111716 100%);
  }

  .hardware-art.is-photo {
    min-height: auto;
  }

  .hardware-photo {
    width: 100%;
  }
}


/* ============================================================
   2026-09-17 · HJÄRTA TRANSPARENT OVERRIDE
   Freigestelltes PNG direkt auf die Sektion setzen.
   Keine zusätzliche Innen-Bühne, kein dunkles Bildrechteck.
   ============================================================ */

.hardware-section {
  background:
    linear-gradient(180deg, #101615 0%, #111716 100%) !important;
}

.hardware-grid {
  align-items: center;
}

.hardware-art.is-photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(460px, 46vw, 720px);
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: auto !important;
}

.hardware-art.is-photo::before,
.hardware-art.is-photo::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

.hardware-photo {
  margin: 0 !important;
  padding: 0 !important;
  width: min(100%, 760px);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
}

.hardware-photo::before,
.hardware-photo::after {
  content: none !important;
  display: none !important;
}

.hardware-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: transparent !important;
  mix-blend-mode: normal;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,0.20));
}

@media (max-width: 1100px) {
  .hardware-art.is-photo {
    justify-content: center;
    min-height: auto;
  }

  .hardware-photo {
    width: min(100%, 620px);
  }
}

@media (max-width: 760px) {
  .hardware-photo {
    width: 100%;
  }

  .hardware-photo img {
    filter: drop-shadow(0 16px 28px rgba(0,0,0,0.18));
  }
}


/* ============================================================
   NEXTGEN · VAKTEN DEMO RENDERER ADAPTER · 2026-09-17

   Echte VAKTEN-Renderer-DNA innerhalb der NEXTGEN-Demobühne.
   Kein App-Layout aus VAKTEN wird übernommen.
   ============================================================ */

.twin-stage .vakten-demo-renderer {
  position: relative;

  width: 100%;
  height: 310px;
  min-height: 310px;

  margin: 0;

  overflow: hidden;

  display: block;

  --door-angle: 0deg;
}


/*
 * NEXTGEN-Bühne ist der Master.
 * Die originale VAKTEN-Kühlschrankgeometrie bleibt erhalten,
 * wird hier nur an unsere kleinere öffentliche Bühne gebunden.
 */

.twin-stage
.vakten-demo-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-scene {
  position: absolute;

  top: 5%;
  bottom: 5%;

  left: 50%;

  width: auto;
  height: auto;

  max-width: 74%;
  max-height: none;

  aspect-ratio: .72 / 1;

  margin: 0;

  transform:
    translateX(-50%);

  contain: layout;
}


.twin-stage
.vakten-demo-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
.live-fridge-body {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}


/*
 * Die Bühne selbst besitzt schon Atmosphäre.
 * Kein zweiter Karten-/Renderer-Hintergrund.
 */

.twin-stage .vakten-demo-renderer {
  background:
    transparent;
}


/*
 * Temperatur wird in NEXTGEN rechts als Wahrnehmung gezeigt.
 * Keine künstliche Temperaturzahl auf dem Renderer selbst.
 */

.twin-stage
.vakten-demo-renderer
.live-fridge-scene {
  pointer-events:
    none;
}


@media (max-width: 680px) {

  .twin-stage .vakten-demo-renderer {
    height:
      250px;

    min-height:
      250px;
  }


  .twin-stage
  .vakten-demo-renderer[data-renderer-key="REFRIGERATOR_STANDARD"]
  .live-fridge-scene {
    top:
      4%;

    bottom:
      4%;

    max-width:
      68%;
  }

}



/* ============================================================
   NEXTGEN · DEMO EXPLAINER + TOOLTIPS · 2026-09-17
   ============================================================ */


/* DEMO statt vermeintlichem Live-System */

.live-indicator.is-demo i {
  background: #d4bd78;

  box-shadow:
    0 0 0 5px rgba(212,189,120,.08);
}


/* Probieren Sie es aus */

.demo-intro {
  display: grid;

  grid-template-columns:
    auto
    minmax(0,1fr);

  gap: 9px;

  align-items: baseline;

  margin:
    -2px
    28px
    16px;

  padding:
    0
    2px;

  color:
    #9da8a1;

  font-size:
    .69rem;

  line-height:
    1.45;
}


.demo-intro strong {
  color:
    #dce3de;

  font-size:
    .70rem;

  white-space:
    nowrap;
}


/* Label + Info */

.demo-label-row {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;

  margin-bottom:
    4px;
}


.twin-facts
.demo-label-row
> span:first-child,

.rule-line
.demo-label-row
> span:first-child {
  display:
    block;

  margin:
    0;

  color:
    #8e9992;

  font-size:
    .66rem;

  line-height:
    1.2;
}


.rule-line
.demo-label-row {
  flex:
    0 0 auto;

  margin:
    0;
}


.rule-line
.demo-label-row
> span:first-child {
  color:
    #747f78;
}


/* Info-Button */

.twin-facts
.demo-info-wrap,

.rule-line
.demo-info-wrap {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  flex:
    0 0 auto;

  margin:
    0;

  color:
    inherit;

  font-size:
    inherit;
}


.demo-info {
  appearance:
    none;

  display:
    inline-grid;

  place-items:
    center;

  width:
    15px;

  height:
    15px;

  margin:
    0;

  padding:
    0;

  border:
    1px solid rgba(142,153,146,.34);

  border-radius:
    999px;

  background:
    transparent;

  color:
    rgba(174,187,179,.78);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  cursor:
    help;
}


.demo-info:hover,

.demo-info:focus-visible,

.demo-info-wrap.is-open
.demo-info {
  color:
    #f1f5f2;

  border-color:
    rgba(114,211,158,.50);

  background:
    rgba(114,211,158,.08);

  outline:
    none;
}


/* Tooltip */

.twin-facts
.demo-tooltip,

.rule-line
.demo-tooltip {
  position:
    absolute;

  z-index:
    50;

  left:
    50%;

  bottom:
    calc(100% + 9px);

  display:
    block;

  width:
    255px;

  margin:
    0;

  padding:
    10px 11px;

  border:
    1px solid rgba(148,163,184,.17);

  border-radius:
    10px;

  background:
    rgba(8,13,11,.985);

  color:
    rgba(224,231,226,.92);

  box-shadow:
    0 14px 34px rgba(0,0,0,.38);

  font-size:
    .68rem;

  font-weight:
    450;

  line-height:
    1.45;

  letter-spacing:
    normal;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translate(-50%,4px);

  transition:
    opacity .13s ease,
    transform .13s ease,
    visibility .13s ease;
}


.demo-tooltip::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    100%;

  width:
    8px;

  height:
    8px;

  background:
    rgba(8,13,11,.985);

  border-right:
    1px solid rgba(148,163,184,.17);

  border-bottom:
    1px solid rgba(148,163,184,.17);

  transform:
    translate(-50%,-4px)
    rotate(45deg);
}


.demo-info-wrap:hover
.demo-tooltip,

.demo-info-wrap:focus-within
.demo-tooltip,

.demo-info-wrap.is-open
.demo-tooltip {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translate(-50%,0);
}


/* HJÄRTA ganz rechts */

.demo-info-align-right
.demo-tooltip {
  left:
    auto;

  right:
    -6px;

  transform:
    translateY(4px);
}


.demo-info-align-right
.demo-tooltip::after {
  left:
    auto;

  right:
    8px;

  transform:
    translateY(-4px)
    rotate(45deg);
}


.demo-info-align-right:hover
.demo-tooltip,

.demo-info-align-right:focus-within
.demo-tooltip,

.demo-info-align-right.is-open
.demo-tooltip {
  transform:
    translateY(0);
}


/* Regelzeile */

.rule-line {
  align-items:
    center;
}


.rule-line > strong {
  min-width:
    0;
}


/* Mobile */

@media (max-width:680px) {

  .demo-intro {
    grid-template-columns:
      1fr;

    gap:
      2px;

    margin:
      0
      18px
      15px;
  }


  .demo-intro strong {
    white-space:
      normal;
  }


  .twin-facts
  .demo-tooltip,

  .rule-line
  .demo-tooltip {
    width:
      min(
        245px,
        calc(100vw - 82px)
      );
  }


  .rule-line {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      5px;
  }

}



/* ============================================================
   NEXTGEN · LANGUAGE SWITCH · 2026-09-17
   Verhalten aus VAKTEN, Gestaltung aus NEXTGEN.
   ============================================================ */

.site-header-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    9px;
}


/* Wrapper */

.nextgen-language-switch {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;
}


/* Button */

.nextgen-language-toggle {
  appearance:
    none;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  height:
    38px;

  min-width:
    58px;

  padding:
    0
    11px;

  border:
    1px solid rgba(22,24,23,.11);

  border-radius:
    999px;

  background:
    rgba(250,249,246,.68);

  color:
    #555b56;

  font:
    inherit;

  font-size:
    .72rem;

  font-weight:
    750;

  letter-spacing:
    .07em;

  cursor:
    pointer;

  transition:
    color .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}


.nextgen-language-toggle:hover,

.nextgen-language-toggle:focus-visible,

.nextgen-language-switch.is-open
.nextgen-language-toggle {
  color:
    var(--ink);

  border-color:
    rgba(22,24,23,.22);

  background:
    #fff;

  box-shadow:
    0 7px 20px rgba(25,30,27,.07);

  outline:
    none;
}


.nextgen-language-code {
  line-height:
    1;
}


.nextgen-language-chevron {
  color:
    #878c87;

  font-size:
    .62rem;

  line-height:
    1;

  transform:
    translateY(-1px);

  transition:
    transform .15s ease;
}


.nextgen-language-switch.is-open
.nextgen-language-chevron {
  transform:
    translateY(-1px)
    rotate(180deg);
}


/* Popover */

.nextgen-language-menu {
  position:
    absolute;

  z-index:
    100;

  top:
    calc(100% + 9px);

  right:
    0;

  width:
    174px;

  padding:
    6px;

  border:
    1px solid rgba(22,24,23,.10);

  border-radius:
    16px;

  background:
    rgba(250,249,246,.98);

  box-shadow:
    0 18px 48px rgba(25,30,27,.14);

  backdrop-filter:
    blur(18px);
}


.nextgen-language-menu[hidden] {
  display:
    none;
}


.nextgen-language-menu a {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  min-height:
    38px;

  padding:
    8px
    11px;

  border-radius:
    11px;

  color:
    #555b56;

  font-size:
    .76rem;

  font-weight:
    650;

  text-decoration:
    none;

  transition:
    color .12s ease,
    background .12s ease;
}


.nextgen-language-menu a:hover,

.nextgen-language-menu a:focus-visible {
  color:
    var(--ink);

  background:
    #ecece7;

  outline:
    none;
}


.nextgen-language-menu a.is-current {
  color:
    var(--ink);

  background:
    #e8e9e4;

  font-weight:
    800;
}


.nextgen-language-menu a.is-current::after {
  content:
    "✓";

  margin-left:
    auto;

  color:
    var(--green);

  font-size:
    .72rem;
}


/* Mobile */

@media (max-width:680px) {

  .site-header-actions {
    gap:
      6px;
  }


  .nextgen-language-toggle {
    min-width:
      44px;

    height:
      36px;

    padding:
      0
      9px;
  }


  .nextgen-language-chevron {
    display:
      none;
  }


  .nextgen-language-menu {
    right:
      -4px;
  }

}



/* ============================================================
   NEXTGEN · TOOLTIP EDGE FIT · 2026-09-17

   Tooltips bleiben vollständig innerhalb des VAKTEN-Fensters.
   Keine Änderung am Clipping / border-radius der Bühne.
   ============================================================ */


/*
 * Temperatur · linke Kachel:
 * nicht mehr am Info-Punkt zentrieren,
 * sondern nach rechts in die Karte hinein öffnen.
 */

.twin-facts
> div:first-child
.demo-tooltip {
  left: -8px;
  right: auto;

  transform:
    translateY(4px);
}


.twin-facts
> div:first-child
.demo-tooltip::after {
  left: 18px;
  right: auto;

  transform:
    translateY(-4px)
    rotate(45deg);
}


.twin-facts
> div:first-child
.demo-info-wrap:hover
.demo-tooltip,

.twin-facts
> div:first-child
.demo-info-wrap:focus-within
.demo-tooltip,

.twin-facts
> div:first-child
.demo-info-wrap.is-open
.demo-tooltip {
  transform:
    translateY(0);
}


/*
 * Regel:
 * Der Info-Punkt sitzt ebenfalls weit links.
 * Tooltip deshalb ebenfalls nach innen öffnen.
 */

.rule-line
.demo-tooltip {
  left: -8px;
  right: auto;

  transform:
    translateY(4px);
}


.rule-line
.demo-tooltip::after {
  left: 18px;
  right: auto;

  transform:
    translateY(-4px)
    rotate(45deg);
}


.rule-line
.demo-info-wrap:hover
.demo-tooltip,

.rule-line
.demo-info-wrap:focus-within
.demo-tooltip,

.rule-line
.demo-info-wrap.is-open
.demo-tooltip {
  transform:
    translateY(0);
}


/*
 * Mittlere Tür-Kachel darf weiterhin zentriert öffnen.
 * HJÄRTA bleibt über den bestehenden
 * demo-info-align-right-Mechanismus rechtsgebunden.
 */


/* Mobile: konsequent innerhalb der Bühne bleiben */

@media (max-width:680px) {

  .twin-facts
  > div:first-child
  .demo-tooltip,

  .rule-line
  .demo-tooltip {
    left: 0;

    width:
      min(
        235px,
        calc(100vw - 96px)
      );
  }

}



/* ============================================================
   NEXTGEN · UNIT SWITCHER + DOOR · 2026-09-17
   ============================================================ */

.demo-unit-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.demo-unit-switcher h2 {
  min-width: 0;
  margin-right: auto;
}

.demo-unit-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.demo-unit-nav button {
  appearance: none;
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: #c7cfca;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color .14s ease,
    background .14s ease,
    color .14s ease;
}

.demo-unit-nav button:hover,
.demo-unit-nav button:focus-visible {
  border-color: rgba(114,211,158,.45);
  background: rgba(114,211,158,.08);
  color: #fff;
  outline: none;
}

.demo-unit-nav span {
  min-width: 34px;
  color: #7f8b84;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
}

.vakten-demo-renderer[hidden],
.demo-controls button[hidden] {
  display: none !important;
}


/* Die NEXTGEN-Bühne bleibt geometrische Autorität. */

.twin-stage .vakten-demo-renderer-door {
  position: relative;
  display: block;
  width: 100%;
  height: 310px;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  background: transparent;
  --door-angle: 0deg;
}

.twin-stage
.vakten-demo-renderer-door
.live-door-scene {
  position: absolute;
  top: 4%;
  left: 50%;
  width: auto;
  height: 92%;
  max-width: 78%;
  margin: 0;
  transform: translateX(-50%);
  aspect-ratio: 1 / 1.08;
}


@media (max-width:680px) {

  .demo-unit-switcher {
    gap: 7px;
  }

  .demo-unit-nav {
    gap: 3px;
  }

  .demo-unit-nav button {
    width: 23px;
    height: 23px;
  }

  .twin-stage .vakten-demo-renderer-door {
    height: 250px;
    min-height: 250px;
  }

  .twin-stage
  .vakten-demo-renderer-door
  .live-door-scene {
    height: 90%;
    max-width: 82%;
  }

}



/* ============================================================
   NEXTGEN · UNIT 2 · VISUAL FINETUNING · 2026-09-17
   ============================================================ */


/* ------------------------------------------------------------
   2FLG_TOR
   Auf der Website etwas weniger hoch / etwas breiter.

   Nur NEXTGEN.
   Der produktive VAKTEN-Renderer bleibt unverändert.
   ------------------------------------------------------------ */

.twin-stage
.vakten-demo-renderer-door
.live-door-scene {
  top: 8%;

  height: 84%;

  max-width: 82%;

  aspect-ratio:
    1.04 / 1;
}


/* ------------------------------------------------------------
   HJÄRTA-Kachel
   data-demo-hjarta liegt innerhalb eines generisch als
   block dargestellten .twin-facts span.
   Hier wieder bewusst Inline-Darstellung herstellen.
   ------------------------------------------------------------ */

.twin-facts
[data-demo-hjarta] {
  display:
    inline
    !important;

  margin:
    0
    !important;

  color:
    inherit
    !important;

  font-size:
    inherit
    !important;

  line-height:
    inherit
    !important;
}


.twin-facts
> div:last-child
> strong {
  white-space:
    nowrap;
}


@media (max-width:680px) {

  .twin-stage
  .vakten-demo-renderer-door
  .live-door-scene {
    top:
      9%;

    height:
      82%;

    max-width:
      86%;

    aspect-ratio:
      1.02 / 1;
  }

}



/* ============================================================
   NEXTGEN · DOOR TIME RULE STORY · 2026-09-17
   ============================================================ */

.demo-notification-note {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin-top:
    9px;

  padding:
    11px
    13px;

  border:
    1px solid rgba(224,96,86,.22);

  border-radius:
    13px;

  background:
    rgba(126,43,38,.10);

  color:
    #d7d8d4;

  font-size:
    .72rem;

  line-height:
    1.45;
}


.demo-notification-note[hidden] {
  display:
    none
    !important;
}


.demo-notification-dot {
  flex:
    0 0 auto;

  width:
    7px;

  height:
    7px;

  margin-top:
    .32em;

  border-radius:
    50%;

  background:
    #df6b61;

  box-shadow:
    0 0 0 5px rgba(223,107,97,.09);
}



/* ============================================================
   NEXTGEN · NOTIFICATION STAGE OVERLAY · 2026-09-17

   Regelhinweis liegt innerhalb der Wahrnehmungsbühne und
   verändert dadurch niemals die Seitenhöhe.
   ============================================================ */


.twin-stage {
  position:
    relative;
}


/*
 * Desktop:
 * bewusst über dem linken Rendererbereich / der Tür.
 */

.twin-stage
> .demo-notification-note {
  position:
    absolute;

  z-index:
    30;

  left:
    18px;

  bottom:
    18px;

  width:
    min(
      355px,
      calc(48% - 24px)
    );

  margin:
    0;

  padding:
    12px
    14px;

  border:
    1px solid rgba(224,96,86,.34);

  border-radius:
    13px;

  background:
    rgba(49,25,23,.94);

  color:
    #e1dedb;

  box-shadow:
    0 14px 34px rgba(0,0,0,.28);

  backdrop-filter:
    blur(8px);

  font-size:
    .70rem;

  line-height:
    1.48;
}


/*
 * Keine Layoutwirkung, solange unsichtbar.
 */

.twin-stage
> .demo-notification-note[hidden] {
  display:
    none
    !important;
}


/*
 * Etwas kompaktere Signalmarkierung.
 */

.twin-stage
> .demo-notification-note
.demo-notification-dot {
  margin-top:
    .38em;
}


/* ------------------------------------------------------------
   MOBILE / SCHMALE DEMO
   Innerhalb der Bühne bleiben, aber nicht aus dem Viewport
   herauslaufen.
   ------------------------------------------------------------ */

@media (max-width:680px) {

  .twin-stage
  > .demo-notification-note {
    left:
      12px;

    right:
      12px;

    bottom:
      12px;

    width:
      auto;

    max-width:
      none;

    padding:
      10px
      12px;

    font-size:
      .67rem;
  }

}



/* ============================================================
   NEXTGEN · UNIT 3 · FAA · 2026-09-17
   ============================================================ */

.twin-stage
.vakten-demo-renderer-faa {
  position: relative;
  display: grid;
  place-items: center;

  width: 100%;
  height: 310px;
  min-height: 310px;

  overflow: hidden;
  background: transparent;
}


.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene {
  width: min(100%, 430px);
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}


.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-crate {
  will-change:
    bottom,
    transform;
}


@media (max-width:680px) {

  .twin-stage
  .vakten-demo-renderer-faa {
    height: 250px;
    min-height: 250px;
  }

  .twin-stage
  .vakten-demo-renderer-faa
  .live-sliding-gate-scene {
    width: min(100%, 350px);
  }

}



/* ============================================================
   NEXTGEN · FAA FINAL POLISH · 2026-09-17

   1. Unit-Pager bleibt positionsstabil.
   2. Lichtschranke sitzt räumlich im Schließbereich.
   3. Freifahren -> Abschluss schließt.
   ============================================================ */


/* ------------------------------------------------------------
   UNIT SWITCHER · FESTER SLOT
   ------------------------------------------------------------ */

.twin-head
> div:first-child {
  flex:
    1 1 0;

  min-width:
    0;
}


.demo-unit-switcher {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    132px;

  align-items:
    center;

  column-gap:
    12px;

  width:
    min(100%, 540px);
}


.demo-unit-switcher h2 {
  min-width:
    0;

  margin:
    0;
}


.demo-unit-nav {
  justify-self:
    end;

  justify-content:
    center;

  width:
    132px;

  margin:
    0;
}


/* ------------------------------------------------------------
   FAA · LICHTSCHRANKE

   Etwas tiefer in den Schließbereich.
   Leicht eingerückt, damit der Strahl nicht mehr
   über der Zarge liegt.

   Die Kiste liegt im DOM über dem Laser und verdeckt ihn
   dadurch räumlich korrekt.
   ------------------------------------------------------------ */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-laser {
  top:
    46.5%
    !important;

  bottom:
    auto
    !important;

  left:
    18%
    !important;

  right:
    11%
    !important;

  width:
    auto
    !important;
}


/* ------------------------------------------------------------
   INTERAKTION
   ------------------------------------------------------------ */

.demo-controls
button:disabled {
  opacity:
    .52;

  cursor:
    default;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width:680px) {

  .demo-unit-switcher {
    grid-template-columns:
      minmax(0, 1fr)
      112px;

    column-gap:
      6px;

    width:
      100%;
  }


  .demo-unit-nav {
    width:
      112px;
  }


  .twin-stage
  .vakten-demo-renderer-faa
  .live-sliding-gate-laser {
    left:
      19%
      !important;

    right:
      10%
      !important;

    top:
      46%
      !important;
  }

}



/* ============================================================
   NEXTGEN · FAA FINAL STORY · 2026-09-17
   ============================================================ */


/* ------------------------------------------------------------
   LASER · Saschas Pixelkorrektur

   gegenüber aktuellem Stand:
   Start +7 px nach rechts
   Ende +4 px nach rechts
   gesamte Linie +7 px tiefer
   ------------------------------------------------------------ */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-laser {
  left:
    calc(18% + 3px)
    !important;

  right:
    calc(11%)
    !important;

  top:
    calc(46.5% + 7px)
    !important;

  bottom:
    auto
    !important;

  width:
    auto
    !important;

  background:
    linear-gradient(
      90deg,
      rgba(114, 255, 170, .18) 0%,
      rgba(75, 255, 155, .95) 50%,
      rgba(114, 255, 170, .18) 100%
    )
    !important;

  box-shadow:
    0 0 10px rgba(75, 255, 155, .45),
    0 0 18px rgba(75, 255, 155, .18)
    !important;
}


/* Nur bei belegtem Schließbereich rot */
.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-occupancy="OCCUPIED"]
.live-sliding-gate-laser {
  background:
    linear-gradient(
      90deg,
      rgba(255, 120, 120, .18) 0%,
      rgba(255, 76, 76, .98) 50%,
      rgba(255, 120, 120, .18) 100%
    )
    !important;

  box-shadow:
    0 0 10px rgba(255, 76, 76, .55),
    0 0 18px rgba(255, 76, 76, .22)
    !important;
}


/* ------------------------------------------------------------
   FÖRDERGUT · bewusst langsamer

   Die Demo soll den Ablauf sichtbar machen,
   nicht eine Kiste teleportieren.
   ------------------------------------------------------------ */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-crate {
  transition-duration:
    2.4s
    !important;
}


/* Abschlussbewegung bleibt deutlich schneller als das
   Freifahren, damit Ursache -> Freigabe -> Schließen lesbar ist. */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-leaf {
  transition-duration:
    .8s
    !important;
}


/* Bewegungsphase: keine Doppelaktion. */

.demo-controls
button:disabled {
  opacity:
    .52;

  cursor:
    default;
}


@media (max-width:680px) {

  .twin-stage
  .vakten-demo-renderer-faa
  .live-sliding-gate-laser {
    left:
      calc(19% + 3px)
      !important;

    right:
      calc(10%)
      !important;

    top:
      calc(46% + 7px)
      !important;
  }

}



/* ============================================================
   NEXTGEN · FAA GEOMETRY + LASER TIMING · 2026-09-17
   ============================================================ */


/* ------------------------------------------------------------
   FAA · KOMPAKTERE WAHRNEHMUNGSBÜHNE

   Der FAA-Erklärtext ist bewusst ausführlicher.
   Dafür entfernen wir ausschließlich beim FAA den großen
   ungenutzten Leerraum ober- und unterhalb des Renderers.

   Die anderen Units bleiben unverändert.
   ------------------------------------------------------------ */

@media (min-width:681px) {

  [data-twin-demo][data-demo-unit="faa"]
  .twin-stage {
    box-sizing:
      border-box;

    height:
      320px
      !important;

    min-height:
      320px
      !important;

    max-height:
      320px
      !important;

    align-items:
      center;
  }


  [data-twin-demo][data-demo-unit="faa"]
  .vakten-demo-renderer-faa {
    height:
      292px
      !important;

    min-height:
      292px
      !important;

    max-height:
      292px
      !important;
  }

}


/* ------------------------------------------------------------
   FAA · LASER

   occupancy steuert Fördergut.
   laserState steuert ausschließlich Lichtschranke.

   Wichtig:
   Diese Selektoren stehen nach allen bisherigen
   occupancy-Regeln und überschreiben sie bewusst.
   ------------------------------------------------------------ */


/* FREI / Kiste noch unterwegs */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="CLEAR"]
.live-sliding-gate-laser {
  background:
    linear-gradient(
      90deg,
      rgba(114,255,170,.18) 0%,
      rgba(75,255,155,.98) 50%,
      rgba(114,255,170,.18) 100%
    )
    !important;

  box-shadow:
    0 0 10px rgba(75,255,155,.48),
    0 0 18px rgba(75,255,155,.20)
    !important;
}


/* Punkt der Lichtschranke ebenfalls grün halten */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="CLEAR"]
.live-sliding-gate-laser::before,

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="CLEAR"]
.live-sliding-gate-laser::after {
  background-color:
    rgb(75,255,155)
    !important;

  box-shadow:
    0 0 10px rgba(75,255,155,.75),
    0 0 18px rgba(75,255,155,.35)
    !important;
}


/* BELEGT / Fördergut wirklich im überwachten Bereich */

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="BLOCKED"]
.live-sliding-gate-laser {
  background:
    linear-gradient(
      90deg,
      rgba(255,120,120,.18) 0%,
      rgba(255,76,76,.98) 50%,
      rgba(255,120,120,.18) 100%
    )
    !important;

  box-shadow:
    0 0 10px rgba(255,76,76,.58),
    0 0 18px rgba(255,76,76,.25)
    !important;
}


.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="BLOCKED"]
.live-sliding-gate-laser::before,

.twin-stage
.vakten-demo-renderer-faa
.live-sliding-gate-scene[data-laser-state="BLOCKED"]
.live-sliding-gate-laser::after {
  background-color:
    rgb(255,76,76)
    !important;

  box-shadow:
    0 0 10px rgba(255,76,76,.82),
    0 0 18px rgba(255,76,76,.38)
    !important;
}



/* ============================================================
   NEXTGEN · JOURNEY + REAL PROOF MODALS · 2026-09-17
   ============================================================ */

.section-intro-note {
  margin-top: 1.25rem;
  font-weight: 650;
  color: var(--ink);
}


.journey-step-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 2.4rem;
}


.journey-step-meta .step-no {
  margin: 0;
}


.journey-role {
  font-size: .72rem;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}


.journey-role::before {
  content: "·";
  margin-right: .45rem;
}


.signal-journey .accent .journey-role {
  color: rgba(255,255,255,.58);
}


.journey-proof {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(20,22,20,.35);
  margin-top: 1rem;
  padding: 0 0 .25rem;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}


.journey-proof:hover {
  border-bottom-color: currentColor;
}


.journey-proof-light {
  color: #f3f1ea;
  border-bottom-color: rgba(255,255,255,.36);
}


.nextgen-real-modal {
  width: min(1120px, calc(100vw - 48px));
  max-width: 1120px;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 26px;
  background: #f4f2ed;
  color: #171916;
  box-shadow: 0 32px 90px rgba(0,0,0,.28);
  overflow: auto;
}


.nextgen-real-modal::backdrop {
  background: rgba(9,12,10,.68);
  backdrop-filter: blur(8px);
}


.nextgen-real-modal-shell {
  position: relative;
  padding: clamp(28px,4vw,58px);
}


.nextgen-real-modal-close {
  position: sticky;
  z-index: 5;
  top: 0;
  float: right;

  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  margin: 0 0 18px 22px;
  padding: 0;

  border: 1px solid rgba(23,25,22,.16);
  border-radius: 999px;

  background: rgba(244,242,237,.92);
  color: #171916;

  font-size: 1.55rem;
  line-height: 1;

  cursor: pointer;
  backdrop-filter: blur(10px);
}


.nextgen-real-modal-head {
  max-width: 780px;
  margin-bottom: 2rem;
}


.nextgen-real-modal-head h2 {
  max-width: 780px;
  margin: .35rem 0 1rem;

  font-family: var(--serif);
  font-size: clamp(2.2rem,5vw,4.9rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
}


.nextgen-real-modal-head p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  line-height: 1.7;
}


.nextgen-real-modal-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}


.nextgen-real-modal figure {
  margin: 0;
}


.nextgen-real-modal figure img {
  display: block;
  width: 100%;
  height: auto;

  border-radius: 18px;
  background: #111714;
}


.nextgen-real-modal figcaption {
  padding: .75rem .15rem 0;
  color: var(--muted);
  font-size: .78rem;
}


.nextgen-vakten-proof img {
  border: 1px solid rgba(23,25,22,.12);
  box-shadow: 0 18px 46px rgba(0,0,0,.12);
}


@media (max-width:760px) {

  .journey-step-meta {
    margin-bottom: 1.7rem;
  }


  .nextgen-real-modal {
    width: calc(100vw - 22px);
    max-height: calc(100dvh - 22px);
    border-radius: 20px;
  }


  .nextgen-real-modal-shell {
    padding: 22px;
  }


  .nextgen-real-modal-gallery {
    grid-template-columns: 1fr;
  }

}



/* ============================================================
   NEXTGEN · HJÄRTA MODAL · DESKTOP COMPACT · 2026-09-17
   ============================================================ */

@media (min-width:1081px) {

  .nextgen-real-modal[data-nextgen-modal="hjarta"] {
    width:
      min(820px, calc(100vw - 96px));

    max-width:
      820px;
  }


  .nextgen-real-modal[data-nextgen-modal="hjarta"]
  .nextgen-real-modal-shell {
    padding:
      34px 38px 38px;
  }


  .nextgen-real-modal[data-nextgen-modal="hjarta"]
  .nextgen-real-modal-head h2 {
    font-size:
      clamp(2.4rem, 3.3vw, 3.7rem);
  }


  .nextgen-real-modal[data-nextgen-modal="hjarta"]
  .nextgen-real-modal-gallery {
    gap:
      14px;
  }

}



/* ============================================================
   NEXTGEN · APPLICATIONS · REAL DOOR · 2026-09-17
   ============================================================ */

.usecase-visual.door-visual
.applications-real-door {
  display: block;

  width: min(58%, 330px);
  height: auto;

  margin: auto;

  object-fit: contain;

  filter:
    drop-shadow(0 18px 22px rgba(0,0,0,.22));
}


@media (max-width:760px) {

  .usecase-visual.door-visual
  .applications-real-door {
    width: min(64%, 280px);
  }

}



/* ============================================================
   NEXTGEN · GUIDANCE WIZARD · 2026-09-17
   ============================================================ */

.onboarding-mock[data-guidance-wizard] {
  min-height: 492px;
}


.guidance-step {
  min-height: 302px;
}


.guidance-step[hidden] {
  display: none !important;
}


.guidance-step.is-active {
  animation: guidanceStepIn .22s ease both;
}


@keyframes guidanceStepIn {

  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


.guidance-step-lead {
  max-width: 660px;
  margin: -8px 0 24px;

  color: #6f756f;

  font-size: .86rem;
  line-height: 1.6;
}


.choice-grid button {
  cursor: pointer;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}


.choice-grid button:hover {
  transform: translateY(-2px);
}


.choice-grid button:focus-visible,
.mock-button:focus-visible {
  outline: 3px solid rgba(184,151,69,.35);
  outline-offset: 3px;
}


.guidance-prepare-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
}


.guidance-prepare-grid article {
  min-height: 126px;

  padding: 18px;

  border: 1px solid #d2d4ce;
  border-radius: 18px;

  background: #f2f1ed;
}


.guidance-prepare-grid article span,
.guidance-rule-list article span {
  display: block;

  margin-bottom: 12px;

  color: #818681;

  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}


.guidance-prepare-grid article strong {
  display: block;

  color: #1b1e1c;

  font-size: .94rem;
  line-height: 1.35;
}


.guidance-rule-list {
  display: grid;
  gap: 10px;
}


.guidance-rule-list article {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 18px;

  min-height: 74px;

  padding: 15px 18px;

  border: 1px solid #d2d4ce;
  border-radius: 16px;

  background: #f2f1ed;
}


.guidance-rule-list article span {
  margin: 0;
}


.guidance-rule-list article strong {
  font-size: .95rem;
}


.guidance-complete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}


.guidance-complete-icon {
  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;

  margin-bottom: 18px;

  border-radius: 50%;

  background: #dff0e7;
  color: #235e47;

  font-size: 1.2rem;
  font-weight: 900;
}


.guidance-complete h3 {
  margin: 0 0 14px;
}


.guidance-complete-profile {
  margin: 0 0 10px;

  color: #202421;

  font-size: .96rem;
  font-weight: 750;
}


.guidance-complete p:not(.guidance-complete-profile) {
  max-width: 620px;

  margin: 0 0 12px;

  color: #656b65;

  font-size: .86rem;
  line-height: 1.6;
}


.guidance-complete small {
  color: #878c87;
}


.mock-foot {
  min-height: 59px;
}


.mock-foot > span {
  max-width: 54%;
}


.mock-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;

  margin-left: auto;
}


.mock-button {
  appearance: none;

  border: 1px solid #d0d3cd;
  border-radius: 999px;

  padding: 9px 13px;

  background: transparent;
  color: #565c57;

  font: inherit;
  font-size: .76rem;
  font-weight: 750;

  white-space: nowrap;
  cursor: pointer;
}


.mock-button:hover {
  background: #ecebe7;
}


.mock-button-next,
.mock-button-restart {
  border-color: #1b1e1c;
  background: #1b1e1c;
  color: #fff;
}


.mock-button-next:hover,
.mock-button-restart:hover {
  background: #2b302d;
}


@media (max-width:680px) {

  .onboarding-mock[data-guidance-wizard] {
    min-height: 0;
  }


  .guidance-step {
    min-height: 0;
  }


  .guidance-prepare-grid {
    grid-template-columns: 1fr;
  }


  .guidance-prepare-grid article {
    min-height: 0;
  }


  .guidance-rule-list article {
    grid-template-columns: 1fr;
    gap: 5px;
  }


  .mock-foot > span {
    max-width: none;
  }


  .mock-actions {
    width: 100%;
    margin-left: 0;
  }

}



/* ============================================================
   NEXTGEN · MOBILE DEMO GROUPS + OVERFLOW · 2026-09-17
   ============================================================ */


/*
 * Dekorative / transformierte Elemente dürfen die gesamte
 * Website nicht horizontal verschiebbar machen.
 *
 * Lokale Scroller wie REPORT behalten ihr eigenes overflow-x.
 */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}


/*
 * Neue mobile Gruppenauswahl.
 * Desktop verwendet weiterhin den vorhandenen Unit-Pager.
 */
.demo-mobile-groups {
  display: none;
}


@media (max-width: 680px) {

  /*
   * Hauptverdächtiger:
   * Der Desktop-Halo war fest 520 px breit.
   */
  .hero-product {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-product::before {
    width: min(
      520px,
      calc(100vw - 28px)
    );

    height: min(
      520px,
      calc(100vw - 28px)
    );
  }


  /*
   * Grid-/Flex-Kinder dürfen tatsächlich schrumpfen.
   */
  .site-header,
  .site-header > *,
  .hero,
  .hero > *,
  .twin-window,
  .twin-head,
  .demo-unit-switcher {
    min-width: 0;
  }


  /*
   * Unit-Kopf mobil klar strukturieren.
   */
  .twin-head {
    align-items: flex-start;
  }

  .demo-unit-switcher {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 10px !important;

    width: 100%;

    padding-right: 0 !important;
  }

  .demo-unit-switcher h2 {
    width: 100%;
    max-width: 100%;

    margin-right: 0 !important;
    padding-right: 0 !important;

    overflow-wrap: anywhere;
  }


  /*
   * Der kleine Desktop-Pager kollidiert mobil mit dem Titel.
   */
  .demo-unit-nav {
    display: none !important;
  }


  /*
   * Stattdessen: verständliche Anwendungsgruppen.
   * Die Zeile darf bei sehr schmalen Geräten lokal wischen,
   * nicht jedoch die ganze Website.
   */
  .demo-mobile-groups {
    display: flex;

    width: 100%;
    max-width: 100%;

    gap: 6px;

    overflow-x: auto;
    overflow-y: hidden;

    overscroll-behavior-x: contain;

    padding: 1px 0 3px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .demo-mobile-groups::-webkit-scrollbar {
    display: none;
  }

  .demo-mobile-groups button {
    appearance: none;

    flex: 0 0 auto;

    border: 1px solid #3a423d;

    border-radius: 999px;

    background: transparent;
    color: #9fa9a2;

    padding: 7px 10px;

    font: inherit;

    font-size: .63rem;
    font-weight: 750;

    line-height: 1;

    cursor: pointer;

    white-space: nowrap;
  }

  .demo-mobile-groups button.is-active {
    border-color: rgba(114,211,158,.34);

    background: rgba(72,189,131,.12);

    color: #72d39e;
  }


  /*
   * Zusätzliche Sicherheitsbegrenzung für die eigentliche
   * Demo-Bühne.
   */
  .twin-window,
  .twin-stage {
    width: auto;
    max-width: 100%;
  }

}



/* ============================================================
   NEXTGEN · HOME KNOWLEDGE ENTRY · 2026-09-20
   Ruhiger Einstieg in SVARTLIND Wissen unter den Kernaussagen.
   ============================================================ */

.quiet-proof-knowledge {
  display: flex;

  justify-content: center;

  padding-top: 24px;
}


.quiet-proof-knowledge a {
  color: #555b56;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;

  text-align: center;

  text-decoration-line: underline;
  text-decoration-thickness: 1px;

  text-decoration-color:
    rgba(52,58,53,.28);

  text-underline-offset: .2em;

  transition:
    color .15s ease,
    text-decoration-color .15s ease;
}


.quiet-proof-knowledge a:hover,
.quiet-proof-knowledge a:focus-visible {
  color: #202421;

  text-decoration-color:
    currentColor;

  outline: none;
}


/*
 * Helper_Wissen innerhalb der ruhigen Proof-Leiste.
 *
 * Keine Icons, keine zusätzliche Dekoration.
 * Nur der Begriff selbst signalisiert bei Interaktion,
 * dass eine Erklärung verfügbar ist.
 */

.quiet-proof .nxk-helper-trigger {
  text-decoration-color:
    rgba(52,58,53,.22);
}


.quiet-proof .nxk-helper-trigger:hover,
.quiet-proof .nxk-helper-trigger:focus-visible {
  text-decoration-color:
    currentColor;
}


@media (max-width:680px) {

  .quiet-proof-knowledge {
    padding-top: 20px;
  }


  .quiet-proof-knowledge a {
    max-width: 29rem;

    font-size: .95rem;
  }

}


/* ============================================================
   NEXTGEN · QUIET PROOF · HELPER TYPOGRAPHY MATCH · 2026-09-20
   Helper verhalten sich wie Sensorik:
   volle Originaltypografie, nur dezente Wissens-Markierung.
   ============================================================ */

.quiet-proof strong .nxk-helper,
.quiet-proof strong .nxk-helper-trigger {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    1.15rem;

  font-weight:
    500;

  line-height:
    inherit;
}


.quiet-proof strong .nxk-helper {
  display:
    inline;
}


.quiet-proof strong .nxk-helper-trigger {
  display:
    inline;

  vertical-align:
    baseline;
}


/* ============================================================
   NEXTGEN · QUIET PROOF HELPER COLOR FIX · 2026-09-20
   Helper-Titel behalten exakt die Farbe der normalen Titel.
   ============================================================ */

.quiet-proof strong .nxk-helper {
  color: inherit;
  margin-top: 0;
}


.quiet-proof strong .nxk-helper-trigger {
  color: inherit;
}