@font-face{font-family:Jan Sans;src:url(assets/fonts/sans.woff) format('woff');font-weight:400;font-display:swap}@font-face{font-family:Jan Sans;src:url(assets/fonts/sans-bold.woff) format('woff');font-weight:600 900;font-display:swap}@font-face{font-family:Jan Editorial;src:url(assets/fonts/editorial.woff) format('woff');font-style:italic;font-display:swap}
:root{--paper:#f8faf7;--green:#075b48;--ink:#102922;--muted:#5c6e65;--line:#dce5dd;--mint:#edf3ed;--lime:#d7efa9;--night:#092c24}body{font-family:Jan Sans,Arial,sans-serif}h1,h2,h3{font-weight:700}h2 em,h1 em{font-family:Jan Editorial,Georgia,serif;font-weight:400}h2 em{color:#37755a}h2{font-size:clamp(38px,4.4vw,68px);line-height:1.03;letter-spacing:-2.8px}p{text-wrap:pretty}header{background:#f8faf7ed;border-bottom:1px solid #173b2512}.nav{height:88px}.brand{font-size:31px;letter-spacing:-1.6px}.brand span{color:#609648}nav a{font-size:15px}.btn{border-radius:100px;padding:16px 27px;min-height:55px;font-weight:600;font-size:15px;transition:transform .3s,background .3s,box-shadow .3s;position:relative;isolation:isolate;overflow:hidden}.btn:after{content:'';position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,#ffffff22,transparent);pointer-events:none;transition:transform .7s}.btn:hover:after{transform:translateX(120%) skewX(-20deg)}.btn:hover{box-shadow:0 10px 25px #0a422a24;transform:translateY(-3px)}.nav-cta{min-height:45px;padding:11px 20px;font-size:14px}.hero{background:radial-gradient(ellipse at 80% 40%,#24664b44,transparent 58%),linear-gradient(120deg,#082a22,#0c372b 60%,#092e23);color:#fff;position:relative;isolation:isolate}.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#d8e8ce04 1px,transparent 1px),linear-gradient(90deg,#d8e8ce04 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}.hero-grid{grid-template-columns:1.05fr 1fr;min-height:730px;gap:20px}.hero-copy{padding:75px 0 82px}.hero-copy .eyebrow{color:#c6ddbc;font-size:11px;letter-spacing:2.4px;margin-bottom:35px}.hero-copy .eyebrow>span{background:#bddf96;width:27px}h1{font-size:clamp(46px,4.7vw,75px);letter-spacing:-3px;line-height:1.02;margin-bottom:30px}h1>span{display:block}h1 em{display:block;color:var(--lime);font-size:1.15em;line-height:1.12;letter-spacing:-3.5px;margin-top:5px}.hero .lead{color:#c1d1c6;font-size:19px;line-height:1.65;max-width:510px;margin-bottom:32px}.hero .btn:not(.secondary){background:var(--lime);color:#122e20;box-shadow:0 6px 25px #bbd9970c}.hero .btn:not(.secondary):hover{background:#e6f7c8}.hero .btn.secondary{background:transparent;color:#edf3ed;border-color:#ffffff35}.hero .btn.secondary:hover{background:#ffffff0c}.hero .fine{color:#9bb3a4;font-size:13px;margin-top:24px}.hero-art.nfc-demo{perspective:1200px;padding-top:8px}.demo-stage{transform-style:preserve-3d;transform:rotateX(var(--scene-rx,0deg)) rotateY(var(--scene-ry,0deg));transition:transform .65s cubic-bezier(.2,.65,.3,1);overflow:visible;isolation:isolate}.demo-backdrop{background:radial-gradient(circle at 30% 30%,#699a603b,transparent 65%),linear-gradient(135deg,#2e715644,#295a4344);box-shadow:inset 0 0 0 1px #b9e3a324,0 0 80px #5fa64d10;inset:9% 0 16% 1%;border-radius:50%;transform:rotate(-20deg)}.demo-ground{background:#010f0980;filter:blur(18px);bottom:10%}.scene-orbit{position:absolute;border:1px solid #c3e3a41c;border-radius:50%;inset:3% -3% 10% 0;transform:rotate(-25deg);z-index:-1;pointer-events:none}.orbit-two{inset:12% -10% 23% -5%;transform:rotate(24deg)}.demo-caption{color:#d5e7cc;font-size:2.25cqw;font-weight:400;bottom:1%}.demo-controls{margin-top:16px}.demo-controls button{background:#ffffff0b;border:1px solid #ffffff18;color:#c7dbbc;min-height:36px}.demo-controls button:hover{background:#ffffff16}.demo-phone{filter:drop-shadow(10px 22px 17px #0006)}.demo-card{filter:drop-shadow(3px 18px 14px #00190b88)}.trust{background:#0a3026;border-top:1px solid #bfd7bd20;border-bottom:0}.trust-grid{padding:25px 0}.trust-grid>div{color:#c0d5c6;font-size:14px;border-color:#ffffff18;gap:13px}.trust .icon{color:#cde5b6;background:#dcefd509;width:34px;height:34px;font-size:22px}.section{padding-block:110px}.section-heading{align-items:end;margin-bottom:48px}.section-heading .lead{max-width:700px}.eyebrow{font-size:11px;letter-spacing:2.2px;margin-bottom:21px}.handwriting{font-family:Jan Editorial,Georgia,serif;font-size:26px;transform:rotate(-7deg);opacity:.8;line-height:1.1}.cards{gap:25px;perspective:1400px}.product{border-radius:24px;padding:12px;background:white;box-shadow:0 8px 28px #203b2106;border-color:#e0e8df;transform-style:preserve-3d;position:relative;isolation:isolate;transition:box-shadow .4s,transform .4s}.product>img,.product-image{border-radius:16px;aspect-ratio:1.22;object-fit:cover;transition:filter .5s}.product-body{padding:25px 17px 17px}.product-body h3{font-size:26px;letter-spacing:-.8px}.product p{font-size:17px;line-height:1.55;min-height:80px}.checks{margin-bottom:24px}.checks li{font-size:15px;margin:13px 0}.checks li:before{font-size:12px;width:20px;height:20px}.price{font-size:31px;padding:17px 0 14px}.product .btn{border-radius:12px;min-height:51px;font-size:15px}.product.featured{background:linear-gradient(140deg,#125a44,#0c3b2d);border:1px solid #285e43;box-shadow:0 16px 32px #0c372518}.product.featured .badge{background:#def0bd;box-shadow:0 2px 20px #08261325;color:#153928;top:14px;left:14px;font-size:10px;letter-spacing:1px;padding:9px 14px}.product.featured .btn{background:#dbedbd;color:#113d2b}.bundle{margin-top:33px;font-size:14px;padding:17px 20px;border-block:1px solid var(--line);border-radius:0;gap:15px}.bundle>span{width:27px;height:27px;font-size:15px;background:#e6eddc;color:#3e5f38}.bundle b{font-size:13px}.solutions{background:#edf2eb;border:0}.center-heading{text-align:left;margin-bottom:48px;display:grid;grid-template-columns:1.5fr 1fr;column-gap:60px}.center-heading .eyebrow{grid-column:1/-1;justify-content:start}.center-heading h2{margin:0}.center-heading>.lead{align-self:end;max-width:400px;font-size:17px;color:#5d7262}.solution{border:1px solid #d9e4d8;border-radius:23px;background:#f8faf7;position:relative;transition:box-shadow .4s,transform .4s}.solution-copy{padding:29px 26px 0}.number{font-family:Jan Editorial,Georgia,serif;color:#53735d;font-size:22px;margin:0 0 18px}.solution .square-icon{position:absolute;right:25px;top:25px;width:43px;height:43px;background:transparent;border:1px solid #355d3820;border-radius:50%}.solution h3{font-size:33px;letter-spacing:-1px}.solution p{font-size:17px;line-height:1.5;min-height:100px}.solution .tags{gap:5px;margin-top:23px;min-height:32px}.tags span{border:1px solid #cedbcb;background:transparent;font-size:11px;letter-spacing:.1px;padding:5px 8px;border-radius:5px}.solution .text-link{font-size:15px;margin-block:8px 18px}.solution>img{aspect-ratio:1.34;margin-top:0}.solution.featured{background:linear-gradient(145deg,#153d2e,#2e5940);border-color:#275537}.solution .badge.gold{position:relative;display:none}.solution.featured .number{color:#d4e8bd}.solution.featured .square-icon{border-color:#b7d3aa40}.featured .tags span{background:transparent;border-color:#ffffff25}.consult-banner{margin-top:30px;border-radius:20px;background:#dbe8ce;color:#1d3d29;padding:30px 35px;box-shadow:none}.consult-banner h3{font-size:24px}.consult-banner .banner-icon{background:#f3f7ec;color:#305e3b;width:50px;height:50px}.consult-banner .btn{background:#184e38;color:white;font-size:14px}.consult-banner p{color:#53664e;font-size:15px}.project{border:0;background:transparent;gap:50px;margin-top:45px;overflow:visible;grid-template-columns:1.25fr 1fr;align-items:center;border-radius:0}.project-img{border-radius:22px;overflow:hidden;perspective:1000px;box-shadow:0 25px 40px -25px #0a352d50}.project-img img{min-height:350px;aspect-ratio:1.6;transform:scale(1.04) translateY(var(--image-shift,0px));transition:transform .2s linear}.project-copy{padding:20px 0}.project h3{font-size:39px;line-height:1.07}.project p{font-size:18px;line-height:1.65}.pill{background:transparent;border:1px solid #d6e0d2;border-radius:5px;font-size:10px;letter-spacing:1.5px;padding:7px 10px}.project-number{font-family:Jan Editorial,Georgia,serif;font-weight:400;font-size:21px;background:#fafcf0dd;width:40px;height:40px;top:20px;left:20px}.project.reverse{grid-template-columns:1fr 1.25fr;margin-top:80px}.benefits{font-size:13px;gap:15px;margin:23px 0 28px}.project .text-link{font-size:16px;border-bottom:1px solid #90ab94;padding-bottom:4px}.faq-section{background:#eff4ed;border:0}.faq-grid{gap:90px;grid-template-columns:1fr 1.5fr}.faq-list details{padding:25px 0;border-color:#cfdccb}.faq-list summary{font-size:19px;letter-spacing:-.3px}.faq-list summary:after{width:32px;height:32px;line-height:30px;text-align:center;border:1px solid #b6cbb3;border-radius:50%;font-size:21px;flex-shrink:0}.faq-list details[open] summary:after{background:#184b33;color:#fff;border-color:#184b33}.faq-list p{font-size:17px;line-height:1.7}.contact-section{position:relative;background:radial-gradient(ellipse at 50% 120%,#436d333a,transparent 65%),#0c3024;color:white;border-radius:30px;margin-block:75px;padding:90px 35px;overflow:hidden}.contact-section:before{content:'';position:absolute;inset:25px;border:1px solid #b6d09e15;border-radius:18px;pointer-events:none}.contact-section .eyebrow{color:#b8d59c}.contact-section h2{font-size:clamp(42px,5vw,77px);line-height:1.08;letter-spacing:-2.5px}.contact-section h2 em{color:#daedb8}.contact-section .lead{color:#aec4b1;max-width:560px;margin:auto}.contact-section .btn{background:#d7edb7;color:#173d26;margin-top:32px}.contact-section .btn:hover{background:#e6f7c9}footer{padding-block:35px;border-top:0}footer .brand{font-size:28px}dialog{border-radius:23px;box-shadow:0 35px 130px #03231680}dialog::backdrop{background:#041a12ab;backdrop-filter:blur(12px)}dialog h2{font-size:39px}dialog .btn{border-radius:10px}.progress-line{background:#7eaa59;height:2px}header.scrolled{box-shadow:0 8px 26px #193a200c}.text-link{transition:gap .3s,color .3s}.text-link:hover{gap:20px}.product:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(500px circle at var(--shine-x,50%) var(--shine-y,0%),#fff3,transparent 55%);opacity:0;transition:opacity .4s}.product:hover:after{opacity:1}.product.visible:hover{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-7px);box-shadow:0 25px 50px -18px #173b2b33}.premium-image-wrap{overflow:hidden;border-radius:16px;aspect-ratio:1.22}.premium-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.65,.3,1)}.product:hover .premium-image-wrap img{transform:scale(1.045)}
@media(min-width:1600px){.hero-grid{min-height:780px}h1{font-size:78px}}
@media(max-width:1150px){.hero-grid{min-height:650px;gap:5px}h1{font-size:clamp(44px,4.8vw,60px);letter-spacing:-2.7px}.hero-copy .eyebrow{font-size:10px;letter-spacing:1.8px}.hero .lead{font-size:17px}.hero .actions{gap:12px}.hero .btn{padding:15px 19px;font-size:14px}.product-body{padding:23px 10px 12px}.product-body h3{font-size:23px}.product p{min-height:105px;font-size:16px}.solution-copy{padding:25px 20px 0}.solution p{font-size:16px;min-height:125px}.solution .tags{min-height:56px;align-content:start}.project{gap:35px}.project h3{font-size:32px}.project-img img{min-height:300px}.project p{font-size:17px}.section{padding-block:85px}.contact-section{padding:75px 30px}}
@media(max-width:850px){.hero-grid{min-height:590px;grid-template-columns:1.05fr 1fr}.hero-copy{padding:50px 0}h1{font-size:40px;letter-spacing:-1.8px}h1 em{letter-spacing:-2px}.hero .lead{font-size:16px}.hero .actions{flex-direction:column;align-items:start}.hero .btn{min-height:48px}.hero .fine{font-size:11px}.hero-art.nfc-demo{width:100%;margin:0}.center-heading{display:block}.center-heading h2{margin:0 0 25px;max-width:100%}.center-heading .lead{max-width:600px}.solution{display:grid}.solution p{min-height:0}.solution .tags{min-height:0}.solution>img{height:100%;aspect-ratio:auto}.solution .text-link{margin-bottom:25px}.solution h3{margin-top:25px}.solution .square-icon{top:20px;right:20px}.solution-copy{padding:26px}.consult-banner .btn{margin-left:68px}.project,.project.reverse{grid-template-columns:1fr 1fr;gap:28px}.faq-grid{gap:40px}.contact-section h2{font-size:54px}.nav{height:73px}nav{top:72px}}
@media(max-width:600px){.hero-grid{display:flex;gap:0}.hero-copy{padding:43px 0 12px}.hero-copy .eyebrow{font-size:9px;letter-spacing:1.6px;margin-bottom:26px}h1{font-size:clamp(38px,10.6vw,61px);letter-spacing:-2.5px;line-height:1.07}h1 em{font-size:1.12em;letter-spacing:-2.5px}.hero .lead{font-size:17px;max-width:370px;line-height:1.6}.hero .actions{flex-direction:row;align-items:stretch;gap:9px}.hero .btn{font-size:13px;padding:13px 16px;gap:10px;min-height:50px}.hero .btn.secondary{padding-inline:15px}.hero .fine{text-align:left;margin-top:19px;font-size:11px}.hero-art.nfc-demo{width:95%;margin:-3px auto 0;padding-top:0}.demo-stage{aspect-ratio:1/1.04}.demo-caption{font-size:2.8cqw}.demo-controls{margin-top:15px;margin-bottom:25px}.trust-grid{gap:17px 8px}.trust-grid>div{font-size:12px;gap:9px}.trust .icon{width:26px;height:26px;font-size:18px}.section{padding-block:65px}h2{font-size:42px;letter-spacing:-1.8px}.section-heading{margin-bottom:31px}.section-heading .lead{margin-top:21px;font-size:16px}.eyebrow{font-size:10px;letter-spacing:1.8px}.product{padding:11px;border-radius:22px}.product-body{padding:23px 15px 15px}.product-body h3{font-size:26px}.product p{font-size:17px;min-height:0}.checks li{font-size:15px}.product>img,.product-image,.premium-image-wrap{aspect-ratio:1.3}.price{font-size:29px}.bundle{font-size:13px;padding:19px 7px}.solution{display:flex}.solution-copy{padding:27px 25px 0}.solution>img{height:auto;aspect-ratio:1.45}.solution h3{font-size:34px;margin-top:0}.solution p{font-size:17px}.solution .tags{margin-top:18px}.solution .tags span{font-size:11px}.center-heading{margin-bottom:31px}.center-heading>.lead{font-size:16px}.consult-banner{padding:27px}.consult-banner .btn{margin:23px 0 0;font-size:14px}.consult-banner h3{font-size:24px}.consult-banner p{font-size:16px}.project,.project.reverse{display:flex;gap:0;margin-top:35px}.project.reverse{margin-top:50px}.project-copy{padding:25px 3px 0}.project-img{width:100%;border-radius:17px}.project-img img{min-height:0;aspect-ratio:1.4}.project h3{font-size:32px}.project p{font-size:17px;line-height:1.6}.project .benefits{font-size:12px}.project .pill{margin-bottom:17px}.faq-list{margin-top:38px}.faq-list summary{font-size:17px}.faq-list details{padding:23px 0}.faq-list p{font-size:16px}.contact-section{border-radius:23px;margin-block:28px;padding:66px 22px}.contact-section:before{inset:12px}.contact-section h2{font-size:42px;letter-spacing:-1.7px}.contact-section .eyebrow{font-size:8px;letter-spacing:1.5px}.contact-section .lead{font-size:16px}.contact-section .btn{font-size:15px}footer{padding-block:25px}.nav{height:66px}nav{top:65px}.nav .brand{font-size:28px}dialog h2{font-size:33px}.hero-art .demo-stage{transform:none!important}}
@media(prefers-reduced-motion:reduce){.demo-stage,.project-img img,.product.visible:hover,.solution.visible:hover{transform:none!important}.product.featured:hover .product-image img,.solution:hover>img{transform:none!important}.btn:after{display:none}.premium-image-wrap img{transform:none!important}}

/* Alle Karten reagieren gleich auf die Maus: kippen, anheben, Lichtstreifen. */
.product.featured .product-image img{transition:transform .7s cubic-bezier(.2,.65,.3,1)}.product.featured:hover .product-image img{transform:scale(1.045)}.solution{transform-style:preserve-3d;will-change:transform}.solution.visible:hover{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-6px);box-shadow:0 22px 44px -20px #173b2b33}.solution:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(520px circle at var(--shine-x,50%) var(--shine-y,0%),#ffffff3d,transparent 55%);opacity:0;transition:opacity .4s}.solution:hover:after{opacity:1}

/* Pflanzen im Hintergrund. Eine Ebene ueber die ganze Seitenhoehe, hinter allem.
   Sichtbar nur dort, wo ein Abschnitt keinen eigenen Hintergrund hat (cremefarbene Bereiche).
   overflow:hidden verhindert seitliches Scrollen, wenn ein Blatt ueber den Rand ragt. */
body{position:relative}.deko-lage{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}header,main,footer{position:relative;z-index:1}.deko{position:absolute;display:block;height:auto;opacity:.42;filter:saturate(.85)}.d1{width:min(26vw,340px);left:-5vw;top:13%;transform:rotate(-6deg)}.d2{width:min(24vw,320px);right:-4vw;top:24%;transform:rotate(14deg) scaleX(-1)}.d3{width:min(20vw,260px);left:-5vw;top:33%;transform:rotate(-24deg) scaleY(-1);opacity:.3}.d4{width:min(23vw,300px);right:-3vw;top:70.5%;transform:rotate(-10deg) scaleX(-1)}.d5{width:min(22vw,290px);left:-6vw;top:79%;transform:rotate(8deg);opacity:.34}@media(max-width:850px){.deko{opacity:.3}.d1,.d3,.d5{left:-14vw}.d2,.d4{right:-14vw}}@media(max-width:600px){.d3,.d5{display:none}.deko{opacity:.26}}

/* ============================================================
   Handy: gleicher Aufbau wie am Rechner, alles kleiner formatiert.
   Steht bewusst am Dateiende - damit gewinnt es gegen die alten
   Stapel-Regeln in style.css und weiter oben in dieser Datei.
   Ausnahme: das Burgermenue bleibt. Fuenf Navigationslinks plus Knopf
   brauchen mehr Platz als ein Handy hat; sie waeren bei 7 Pixel unlesbar.
   ============================================================ */
@media(max-width:600px){
/* --- Kopfzeile --- */
.nav{height:48px;gap:10px}
.brand{font-size:17px;letter-spacing:-.9px}

/* --- Hero: Text und Buehne nebeneinander wie am Rechner --- */
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:8px;min-height:0}
.hero-copy{padding:22px 0 20px}
.hero-copy .eyebrow{font-size:7px;letter-spacing:1px;margin-bottom:11px}
.hero-copy .eyebrow>span{width:13px}
h1{font-size:clamp(17px,5.1vw,25px);letter-spacing:-.85px;line-height:1.06;margin-bottom:11px}
h1 em{font-size:1.13em;letter-spacing:-.9px;margin-top:2px}
.hero .lead{font-size:11px;line-height:1.45;max-width:none;margin-bottom:13px}
.hero .actions{flex-direction:row;align-items:stretch;gap:6px}
.hero .btn{font-size:10px;padding:8px 9px;min-height:33px;gap:5px}
.hero .btn.secondary{padding-inline:9px}
.hero .fine{font-size:8px;margin-top:11px}
.hero-art.nfc-demo{width:100%;margin:0;padding-top:0}
.demo-stage{aspect-ratio:1/1.05}
.demo-caption{font-size:2.5cqw;bottom:2%}
.demo-controls{margin:5px 0 9px;gap:7px}
.demo-controls button{min-height:26px;padding:4px 8px;font-size:12px}
.demo-replay span{font-size:9px;margin-left:3px}

/* --- Vertrauensleiste: wieder vier nebeneinander --- */
.trust-grid{grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 0}
.trust-grid>div{font-size:7.5px;gap:4px;flex-direction:column;text-align:center}
.trust .icon{width:18px;height:18px;font-size:12px}

/* --- Abschnitte und Ueberschriften --- */
.section{padding-block:38px}
h2{font-size:23px;letter-spacing:-.9px;line-height:1.06}
.eyebrow{font-size:7px;letter-spacing:1.1px;margin-bottom:9px}
.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}
.section-heading .lead{margin-top:8px;font-size:11px}
.handwriting{font-size:12px}
.center-heading{display:grid;grid-template-columns:1.5fr 1fr;column-gap:14px;margin-bottom:18px}
.center-heading h2{margin:0}
.center-heading>.lead{font-size:11px;max-width:none}

/* --- Kartenraster: zwei Spalten statt drei --- */
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.product{padding:6px;border-radius:13px}
.product>img,.product-image,.premium-image-wrap{aspect-ratio:1.22}
.product-body{padding:11px 7px 6px}
.product-body h3{font-size:13px;letter-spacing:-.3px;line-height:1.15}
.product p{font-size:11px;line-height:1.4;min-height:0;margin-top:5px}
.checks{margin-bottom:10px}
.checks li{font-size:10px;margin:6px 0;gap:6px}
.checks li:before{width:13px;height:13px;font-size:8px}
.price{font-size:17px;padding:8px 0 6px}
.product .btn{min-height:33px;font-size:10px;border-radius:9px;padding:8px 5px}
.product.featured .badge{font-size:7px;letter-spacing:.4px;padding:4px 6px;top:8px;left:8px}
.bundle{margin-top:14px;font-size:9px;padding:10px 5px;gap:7px}
.bundle>span{width:16px;height:16px;font-size:9px}
.bundle b{font-size:9px}

/* --- Loesungskarten: senkrechte Karte im Raster, wie am Rechner --- */
.solution{display:flex;flex-direction:column;border-radius:13px}
.solution-copy{padding:12px 10px 0}
.solution .number{font-size:11px;margin:0 0 8px}
.solution h3{font-size:15px;letter-spacing:-.4px;margin-top:0}
.solution p{font-size:11px;line-height:1.4;min-height:0}
.solution .tags{gap:3px;margin-top:8px;min-height:0}
.tags span{font-size:7px;padding:2px 4px;border-radius:3px}
.solution .text-link{font-size:11px;margin-block:6px 10px}
.solution .square-icon{width:23px;height:23px;top:9px;right:9px}
.solution>img{aspect-ratio:1.34;height:auto;margin-top:0}
.consult-banner{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;padding:13px;border-radius:12px;margin-top:14px}
.consult-banner .banner-icon{display:grid;width:28px;height:28px;flex:0 0 auto}
.consult-banner h3{font-size:12px}
.consult-banner p{font-size:9.5px}
.consult-banner .btn{margin:0;font-size:10px;min-height:34px;padding:8px 11px;flex:0 0 auto;width:auto;white-space:normal;text-align:center;line-height:1.2;gap:6px;max-width:46%}
.consult-banner>div{min-width:0}

/* --- Projektzeilen: Bild und Text nebeneinander --- */
.project{display:grid;grid-template-columns:1.25fr 1fr;gap:12px;align-items:center;margin-top:20px}
.project.reverse{display:grid;grid-template-columns:1fr 1.25fr;margin-top:26px}
.project.reverse .project-img{order:2}.project.reverse .project-copy{order:1}
.project-img{border-radius:12px;width:auto}
.project-img img{min-height:0;aspect-ratio:1.5}
.project-copy{padding:0}
.project .pill{font-size:7px;letter-spacing:.8px;padding:4px 6px;margin-bottom:8px}
.project h3{font-size:15px;line-height:1.1}
.project p{font-size:11px;line-height:1.45}
.project .benefits{font-size:8px;gap:5px 9px;margin:9px 0 11px}
.project .text-link{font-size:11px;padding-bottom:2px}
.project-number{width:22px;height:22px;font-size:11px;top:8px;left:8px}

/* --- Fragen: zwei Spalten wie am Rechner --- */
.faq-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:16px}
.faq-list{margin-top:0}
.faq-list details{padding:10px 0}
.faq-list summary{font-size:11px;letter-spacing:-.1px;gap:8px}
.faq-list summary:after{width:19px;height:19px;line-height:17px;font-size:13px}
.faq-list p{font-size:10px;line-height:1.5}

/* --- Kontakt und Fuss --- */
.contact-section{padding:38px 15px;margin-block:20px;border-radius:15px}
.contact-section:before{inset:8px;border-radius:9px}
.contact-section h2{font-size:21px;letter-spacing:-.8px}
.contact-section .eyebrow{font-size:7px}
.contact-section .lead{font-size:11px}
.contact-section .btn{font-size:11px;min-height:34px;margin-top:14px}
footer{padding-block:16px}
footer .brand{font-size:17px}

/* --- Pflanzen: auf dem Handy wieder alle fuenf, nur blasser --- */
.d3,.d5{display:block}
.deko{opacity:.24}
}

/* Abschnitt "Dein Laden": Tageslicht-Lokal als weicher Hintergrund.
   Das Foto liegt hinter dem Inhalt, darueber ein heller Schleier in der
   Abschnittsfarbe - so bleibt die vorhandene dunkle Schrift lesbar und
   es musste keine Textfarbe geaendert werden. */
.solutions{position:relative;isolation:isolate;overflow:hidden;background:#edf2eb}
.solutions:before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
background:url(assets/lokal-hell.webp) center/cover no-repeat;opacity:1}
.solutions:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,#eef3ecdb 0%,#eef3ec66 28%,#eef3ec4a 70%,#eef3ecc2 100%)}
.solutions .center-heading>.lead{color:#2f4438}.solutions .center-heading .eyebrow{color:#1d5340}.solutions .center-heading h2 em{color:#215040}

/* Karten laufen beim Hineinscrollen einzeln von unten ein.
   Der Versatz je Karte kommt aus --reveal-delay, gesetzt in app.js.
   Die .visible-Regel steht bewusst danach, sonst bliebe die Karte unten haengen. */
.product.reveal,.solution.reveal{transform:translateY(70px);transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.16,.84,.30,1);transition-delay:var(--reveal-delay,0ms)}.product.reveal.visible,.solution.reveal.visible{transform:translateY(0)}

/* ============================================================
   Hero mit Hintergrundvideo statt der NFC-Animation.
   Das Video liegt ganz hinten, darueber ein Schleier fuer die Lesbarkeit,
   darueber der Text. Langsame Kamerafahrt macht es filmisch.
   ============================================================ */
.hero{position:relative;isolation:isolate;background:#0b1310}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
z-index:-2;pointer-events:none;transform:scale(1.06);
animation:hero-fahrt 26s ease-in-out infinite alternate;will-change:transform}
@keyframes hero-fahrt{from{transform:scale(1.06) translate3d(0,0,0)}
to{transform:scale(1.16) translate3d(-1.5%,-1%,0)}}
/* Schleier: links dicht fuer den Text, nach rechts offen, dazu Tiefe oben und unten */
.hero-schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
background:linear-gradient(90deg,#0c1411d4 0%,#0c1411b8 34%,#0c14117d 58%,#0c14112e 80%,#0c141140 100%),
linear-gradient(180deg,#0c14116b 0%,transparent 24%,transparent 66%,#0c1411a3 100%),
radial-gradient(125% 82% at 50% 50%,transparent 50%,#08121066 100%)}
/* Der Text steht jetzt allein - Spalte begrenzen, damit die Zeilen nicht zu lang werden */
.hero-grid{grid-template-columns:minmax(0,1fr);min-height:640px;align-items:center}
.hero-copy{padding:96px 0 104px;max-width:840px}
.hero .lead{max-width:520px}
.hero:before{opacity:.35}
@media(max-width:1150px){.hero-grid{min-height:560px}.hero-copy{padding:74px 0 80px}}
@media(max-width:850px){.hero-grid{min-height:500px}}
@media(max-width:600px){
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);min-height:420px}
.hero-copy{padding:54px 0 58px;max-width:none}
.hero .lead{max-width:none;font-size:14px}
h1{font-size:clamp(30px,8.4vw,44px);letter-spacing:-1.6px}
.hero .actions{flex-direction:row;gap:8px}
.hero .btn{font-size:12px;padding:11px 14px;min-height:42px}
.hero .fine{font-size:10px}
.hero-schleier{background:linear-gradient(180deg,#0c1411bf 0%,#0c141194 45%,#0c1411cc 100%),
radial-gradient(120% 80% at 50% 50%,transparent 45%,#08121078 100%)}
}
@media(prefers-reduced-motion:reduce){.hero-video{animation:none;transform:none}}

/* ============================================================
   Handy: Produktkacheln und Hintergrund nachgebessert.
   Steht am Dateiende, damit es die frueheren Handy-Regeln ueberschreibt.
   ============================================================ */
@media(max-width:600px){
/* Hintergrund: eigener Hochformat-Ausschnitt. Das breite Bild traf im
   schmalen Abschnitt nur das ausgebrannte Fenster - das Lokal war unsichtbar. */
.solutions:before{background-image:url(assets/lokal-hell-hoch.webp);background-position:center 40%}
.solutions:after{background:linear-gradient(180deg,#eef3ece8 0%,#eef3ecc9 38%,#eef3ecbe 72%,#eef3ecdd 100%)}

/* Die dritte Karte stand allein in der zweiten Zeile und riss ein Loch.
   Sie nimmt jetzt die volle Breite und legt sich quer: Bild links, Text rechts. */
.cards>:last-child:nth-child(2n+1){grid-column:1/-1}
.product:last-child:nth-child(2n+1){flex-direction:row;gap:11px;align-items:stretch}
.product:last-child:nth-child(2n+1) .premium-image-wrap{flex:0 0 45%;aspect-ratio:1.18;align-self:center}
.product:last-child:nth-child(2n+1) .product-body{flex:1 1 auto;padding:8px 9px 8px 0}
.product:last-child:nth-child(2n+1) p{min-height:0}
.solution:last-child:nth-child(2n+1){flex-direction:row;align-items:stretch}
.solution:last-child:nth-child(2n+1) .solution-copy{flex:1 1 auto;padding-bottom:12px}
.solution:last-child:nth-child(2n+1){gap:10px}.solution:last-child:nth-child(2n+1) .solution-copy{min-width:0;position:relative}.solution:last-child:nth-child(2n+1) .square-icon{top:8px;right:8px}.solution:last-child:nth-child(2n+1)>img{flex:0 0 42%;width:auto;min-width:0;aspect-ratio:1.2;height:auto;object-fit:cover;align-self:center;border-radius:10px;margin-right:10px}

/* Kacheln insgesamt etwas ruhiger: mehr Luft, klarere Titel, groessere Knopfflaeche */
.cards{gap:11px}
.product{padding:7px;border-radius:14px}
.product-body h3{font-size:13.5px;letter-spacing:-.35px;line-height:1.2}
.product p{font-size:11.5px;line-height:1.45;margin-top:6px}
.checks li{font-size:10.5px;margin:7px 0}
.price{font-size:18px;padding:9px 0 7px}
.product .btn{min-height:38px;font-size:10.5px}
.solution h3{font-size:15.5px}
.solution p{font-size:11.5px;line-height:1.45}
}

/* ============================================================
   PIN-Gate fuer die Vertriebsfassung. Keine echte Sicherheit,
   nur eine Huerde gegen Besucher, die den Link zufaellig finden
   (gleiche Haltung wie in nfc spiel/personal.html).
   Der eigentliche Seiteninhalt bleibt im HTML unveraendert, er
   wird nur ausgeblendet, solange am body keine .entsperrt-Klasse haengt.
   ============================================================ */
body:not(.entsperrt)>*:not(#pin-tor){display:none}
.pin-tor{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
background:radial-gradient(ellipse at 78% 45%,#e9f1e7 0,transparent 60%),#0c3024;padding:24px}
body.entsperrt .pin-tor{display:none}
.pin-karte{width:100%;max-width:360px;background:#fff;border-radius:23px;padding:34px 28px;text-align:center;
box-shadow:0 35px 90px #03231680}
.pin-kicker{font-size:11px;letter-spacing:2px;color:#37755a;font-weight:700;margin:0 0 10px}
.pin-titel{font-size:26px;margin:0 0 8px;letter-spacing:-.6px}
.pin-hinweis{font-size:14px;color:var(--muted,#5c6e65);margin:0 0 22px;line-height:1.5}
.pin-feld{width:100%;box-sizing:border-box;min-height:52px;padding:12px 16px;font-size:22px;text-align:center;
letter-spacing:.3em;border:1px solid var(--line,#dce5dd);border-radius:12px;margin-bottom:14px;font-family:inherit}
.pin-feld:focus{outline:none;border-color:#37755a}
.pin-fehler{min-height:18px;color:#c0392b;font-size:13px;font-weight:600;margin:12px 0 0}
.pin-tor .btn{width:100%;justify-content:center}

/* Die "AB 6 LÄDEN"-Auszeichnung im Partnerbereich sitzt (anders als bei den
   Produktkarten) nicht ueber einem Bild, sondern direkt ueber dem Titel.
   .badge ist absolut positioniert und wuerde die Ueberschrift ueberlappen -
   hier stattdessen als kleine Zeile vor dem Titel, mit eigenem Abstand. */
#partner .product .badge{position:static;display:inline-block;margin-bottom:10px}
#partner .product-body h3{margin-top:0}