/* ===========================================================================
   BRIT GmbH | DynamicSIGN – individuell gestaltete Produktseite
   Modulaufbau:
   01 Hero · 02 Nutzen · 03 Prozessdemo · 04 Einsatzfälle · 05 Integration
   06 Signaturniveaus · 07 FAQ · 08 Kontakt · 09 Responsive & Motion
   Grundfarben und globale Navigation bleiben im site.css definiert.
   =========================================================================== */

/* 00 / Site-scoped foundations ------------------------------------------- */
.ds-page main{overflow:clip}
.ds-page main *, .ds-page main *::before,.ds-page main *::after{box-sizing:border-box}
.ds-page main p{line-height:1.75}
.ds-page main h2{font-size:clamp(2.15rem,3.8vw,4.1rem);line-height:1.08;letter-spacing:-.055em}
.ds-page main h3{letter-spacing:-.045em}
.ds-page main .eyebrow{color:#6d9813}
.ds-page main em{font-style:normal;color:#84b413}
.ds-page main .section{padding:clamp(76px,8vw,118px) 0}
.ds-page main .wrap>*{min-width:0}
.ds-page a:focus-visible,.ds-page button:focus-visible,.ds-page summary:focus-visible{outline:3px solid #84b413;outline-offset:4px}

/* 01 / Hero --------------------------------------------------------------- */
.ds-hero{position:relative;padding:70px 0 80px;background:#f4f7ef;overflow:clip}
.ds-hero::before{position:absolute;content:"";width:690px;height:690px;right:-260px;top:-270px;border:1px solid #b4c89e;box-shadow:0 0 0 65px #84b41308,0 0 0 130px #84b41306;border-radius:50%;pointer-events:none}
.ds-hero-grid{display:grid;grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);align-items:center;gap:clamp(34px,5.5vw,92px);position:relative}
.ds-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;color:#718070;font-size:.76rem;margin-bottom:39px;align-items:center}
.ds-breadcrumb a:hover{color:#5e840d}
.ds-product-label{display:flex;align-items:center;gap:10px;letter-spacing:.17em;text-transform:uppercase;font-size:.71rem;font-weight:850;color:#527508;margin-bottom:20px}
.ds-product-dot{width:9px;height:9px;background:#84b413;border-radius:50%;box-shadow:0 0 0 5px #84b41321}
.ds-hero h1{font-size:clamp(3.15rem,5.2vw,6.8rem);line-height:1.04;letter-spacing:-.075em;margin:0 0 29px;max-width:11ch;color:#12261f}
.ds-hero h1 em{color:#729e14}
.ds-hero .ds-lead{color:#465a4b;font-size:clamp(1.03rem,1.25vw,1.19rem);line-height:1.82;max-width:650px;margin:0}
.ds-hero .hero-actions{align-items:center;margin-top:35px;gap:18px}
.ds-ghost-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #91a88d;color:#1a3128;font-weight:800;font-size:.9rem}
.ds-ghost-btn .icon{width:17px;height:17px}
.ds-ghost-btn:hover{color:#658b10}
.ds-hero-proof{display:flex;align-items:center;gap:10px;color:#648455;font-size:.82rem;font-weight:750;margin-top:28px}
.ds-hero-proof .icon{width:18px;height:18px;color:#709d18}
.ds-hero-visual{position:relative;min-width:0;padding-bottom:34px}
.ds-hero-photo{border-radius:160px 20px 20px 20px;height:clamp(360px,37vw,600px);overflow:hidden;position:relative;box-shadow:0 30px 70px #1e3f251f}
.ds-hero-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#10251b5e 0%,transparent 42%);pointer-events:none}
.ds-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:63% center}
.ds-photo-tag{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:9px;left:24px;bottom:25px;color:#fff;background:#10261fba;backdrop-filter:blur(10px);border:1px solid #ffffff38;border-radius:9px;padding:11px 15px;font-size:.79rem;font-weight:750}
.ds-photo-tag .icon{width:18px;height:18px;color:#b4e55a}
.ds-hero-note{position:absolute;bottom:0;right:-22px;width:min(325px,74%);border-radius:12px;background:#172f24;padding:21px 25px;box-shadow:0 19px 40px #08181240;color:#fff}
.ds-note-kicker{display:block;color:#b8e578;font-weight:850;letter-spacing:.12em;text-transform:uppercase;font-size:.64rem;margin-bottom:7px}
.ds-hero-note strong{font-size:1.23rem;line-height:1.25;display:block;letter-spacing:-.03em;margin-bottom:6px}
.ds-hero-note small{display:block;color:#bcd1c0;font-size:.81rem;line-height:1.5}

/* 02 / Benefits ----------------------------------------------------------- */
.ds-benefit{background:#fff}
.ds-benefit-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(45px,7vw,115px);align-items:start}
.ds-benefit-heading{position:sticky;top:150px}
.ds-benefit-heading h2{margin:17px 0 21px}
.ds-benefit-heading p{font-size:1.02rem;max-width:440px}
.ds-benefit-stack{display:grid;gap:13px}
.ds-benefit-card{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:20px;align-items:start;padding:29px;background:#f4f7f0;border:1px solid #dfe8d5;border-radius:15px;transition:transform .25s ease,border-color .25s ease}
.ds-benefit-card:hover{transform:translateX(5px);border-color:#9fbd8d}
.ds-benefit-card .ds-number{font-size:.85rem;color:#7ba51c;font-weight:900;white-space:nowrap}
.ds-benefit-card h3{font-size:1.4rem;margin:0 0 10px}
.ds-benefit-card p{font-size:.93rem;margin:0}
.ds-benefit-card>.icon{width:28px;height:28px;color:#779f20}

/* 03 / Interactive document workstation ---------------------------------- */
.ds-workflow{background:#12291f;color:#fff;position:relative;overflow:clip}
.ds-workflow::after{position:absolute;content:"";width:650px;height:650px;border:1px solid #ffffff0c;border-radius:50%;top:15%;left:-400px;pointer-events:none}
.ds-workflow .eyebrow,.ds-integration .eyebrow,.ds-cta .eyebrow{color:#bbec76}
.ds-section-intro{display:flex;justify-content:space-between;align-items:end;gap:55px;margin-bottom:36px}
.ds-section-intro h2{max-width:670px;margin:16px 0 0}
.ds-section-intro>p{max-width:450px;margin:0;font-size:1rem;color:#bcd0c2}
.ds-workbench{position:relative;display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1fr);gap:17px;align-items:stretch}
.ds-workbench-controls{display:flex;flex-direction:column;gap:10px;min-width:0}
.ds-step{width:100%;appearance:none;background:#ffffff09;border:1px solid #ffffff18;border-radius:12px;color:#e6f1e8;text-align:left;display:grid;grid-template-columns:37px 1fr 23px;grid-template-rows:auto auto;gap:3px 14px;align-items:center;padding:23px;min-width:0;transition:background .25s ease,transform .25s ease,border-color .25s ease}
.ds-step>span{grid-row:span 2;color:#bde67a;font-size:.85rem;font-weight:900}
.ds-step strong{font-size:1.08rem;letter-spacing:-.035em;line-height:1.2;min-width:0}
.ds-step small{font-size:.81rem;color:#aabeac;line-height:1.5;min-width:0}
.ds-step>.icon{grid-column:3;grid-row:1/span 2;color:#b7e16a;width:20px;height:20px}
.ds-step:hover{background:#ffffff15;transform:translateX(3px)}
.ds-step.is-active{background:#84b413;border-color:#a8cf51;color:#10251c}
.ds-step.is-active span,.ds-step.is-active .icon{color:#17311d}
.ds-step.is-active small{color:#345326}
.ds-example-disclaimer{margin-top:auto;padding:13px 3px 0;color:#9db2a3;font-size:.73rem}
.ds-demo-view{border-radius:16px;background:#e8eee7;border:1px solid #ffffff38;padding:0 0 17px;overflow:hidden;box-shadow:0 25px 55px #05151058;min-width:0}
.ds-demo-top{background:#eff2ee;color:#4c6255;border-bottom:1px solid #d3ddd0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 21px;font-size:.76rem;font-weight:700}
.ds-demo-top .icon{width:17px;height:17px;color:#7da515}
.ds-window-dots{display:flex;gap:5px}
.ds-window-dots i{width:7px;height:7px;border-radius:50%;background:#bfccc0}
.ds-demo-document{width:min(84%,500px);margin:22px auto 16px;background:#fff;border-radius:5px;padding:clamp(16px,3vw,31px);box-shadow:0 15px 40px #142b2527;color:#17251d;position:relative;min-width:0}
.ds-doc-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:15px;border-bottom:1px solid #e3eae4}
.ds-doc-topline>span{font-size:.55rem;color:#7b8f7d;letter-spacing:.12em;font-weight:850}
.ds-doc-logo{font-size:1.25rem;font-weight:950;color:#162c22;letter-spacing:-.08em}
.ds-doc-logo span{font-size:.61rem;letter-spacing:0;color:#7b941c;margin-left:5px;text-transform:uppercase}
.ds-demo-document h3{font-size:clamp(1.4rem,2.1vw,2rem);margin:22px 0 3px}
.ds-demo-document .ds-doc-sub{font-size:.76rem;color:#88978a;margin:0 0 19px}
.ds-doc-field{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #eef1ed;font-size:.76rem}
.ds-doc-field span{color:#738875}
.ds-doc-field strong{text-align:right;word-break:break-word}
.ds-doc-lines{display:grid;gap:6px;margin:20px 0 22px}
.ds-doc-lines i{height:6px;border-radius:4px;background:#eff3ed;display:block}
.ds-doc-lines i:nth-child(2){width:83%}.ds-doc-lines i:nth-child(3){width:92%}.ds-doc-lines i:nth-child(4){width:64%}
.ds-signarea{position:relative;background:#f7faf5;border:1px dashed #adc1aa;border-radius:7px;padding:14px 17px 10px;margin-bottom:16px}
.ds-signarea>span{display:block;font-size:.64rem;font-weight:800;color:#617d64}
.ds-signarea small{font-size:.62rem;color:#8d9c8e}
.ds-signature{height:57px;opacity:0;transform:translateY(8px);transition:.35s ease}
.ds-signature svg{max-width:220px;width:95%;height:59px;display:block}
.ds-sign-baseline{height:1px;background:#aec0ac;width:88%;margin-top:-1px;margin-bottom:3px}
.ds-doc-complete{position:absolute;inset:auto 15px 15px auto;background:#eaf5dc;color:#416a12;border:1px solid #aecf88;display:none;align-items:center;gap:7px;border-radius:8px;padding:8px 11px;font-weight:800;font-size:.7rem;box-shadow:0 8px 18px #1f3c1914}
.ds-doc-complete .icon{width:16px;height:16px}
.ds-workbench[data-active="unterzeichnen"] .ds-signature,.ds-workbench[data-active="ablegen"] .ds-signature{opacity:1;transform:none}
.ds-workbench[data-active="ablegen"] .ds-doc-complete{display:flex}
.ds-demo-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 24px;color:#546657;font-size:.78rem}
.ds-demo-state{display:flex;align-items:center;gap:9px}
.ds-demo-state strong{font-size:.82rem}
.ds-status-dot{width:8px;height:8px;background:#84b413;border-radius:50%;box-shadow:0 0 0 5px #84b41323}
.ds-workflow-panels{grid-column:1/-1;border-top:1px solid #ffffff25;margin-top:7px;padding-top:25px;min-height:120px}
.ds-workflow-copy{display:grid;grid-template-columns:110px minmax(180px,.5fr) minmax(0,1fr);align-items:start;gap:22px}
.ds-workflow-copy>span{color:#b0d874;font-size:.74rem;font-weight:850;text-transform:uppercase;letter-spacing:.09em}
.ds-workflow-copy strong{font-size:1.3rem;letter-spacing:-.035em}
.ds-workflow-copy p{margin:0;color:#bed0c3;font-size:.95rem}
.ds-workflow-copy[hidden]{display:none!important}

/* 04 / Use case cards ----------------------------------------------------- */
.ds-usecases{background:#f4f7f1}
.ds-usecases .ds-section-intro>p{color:#52655a}
.ds-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ds-case-card{background:#fff;border:1px solid #dde7d8;border-radius:15px;padding:33px 30px;min-height:313px;position:relative;transition:transform .28s ease,box-shadow .28s ease}
.ds-case-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px #16342216}
.ds-case-icon{width:54px;height:54px;background:#ecf5e1;color:#729a17;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.ds-case-icon .icon{width:27px;height:27px}
.ds-case-card>span{display:block;font-size:.71rem;font-weight:850;color:#7b9c4c;letter-spacing:.08em;text-transform:uppercase}
.ds-case-card h3{font-size:1.52rem;margin:11px 0 13px}
.ds-case-card p{font-size:.93rem;margin:0}

/* 05 / Integrations ------------------------------------------------------- */
.ds-integration{background:#10271e;color:#fff;position:relative;overflow:hidden}
.ds-integration::after{content:"";position:absolute;right:-240px;bottom:-350px;width:750px;height:750px;border-radius:50%;border:1px solid #ffffff09;box-shadow:0 0 0 80px #ffffff04,0 0 0 160px #ffffff03;pointer-events:none}
.ds-integration-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(50px,8vw,126px);align-items:center;position:relative;z-index:1}
.ds-integration-copy h2{margin:19px 0 24px}
.ds-integration-copy p{color:#bcd1c2;font-size:1.02rem;max-width:595px}
.ds-integration-copy .text-link{color:#d6f6b8;border-color:#617c5f;margin-top:20px;font-size:.85rem;white-space:normal}
.ds-integration-card{background:#ffffff08;border:1px solid #ffffff1e;border-radius:18px;padding:clamp(20px,3vw,35px);box-shadow:0 28px 56px #07171038}
.ds-connection-row{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:11px;align-items:center}
.ds-connection-row>div,.ds-connection-bottom>div{min-width:0;border:1px solid #ffffff20;background:#ffffff0a;border-radius:13px;padding:22px 12px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:11px}
.ds-connection-row .icon,.ds-connection-bottom .icon{width:30px;height:30px;color:#b4e76c}
.ds-connection-row>div span{font-weight:850;font-size:.91rem;overflow-wrap:anywhere}
.ds-connection-row .ds-connection-feature{background:#84b413;color:#13271c;border-color:#84b413}
.ds-connection-row .ds-connection-feature .icon{color:#13271c}
.ds-flow-arrow{display:flex;align-items:center;justify-content:center;color:#b9e673}
.ds-flow-arrow .icon{width:20px;height:20px}
.ds-connection-drop{display:flex;justify-content:flex-end;padding:15px 20% 17px;color:#c4e892}
.ds-connection-drop .icon{transform:rotate(90deg);width:24px;height:24px}
.ds-connection-bottom{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ds-connection-bottom strong{font-size:.91rem;line-height:1.4}
.ds-connection-bottom span{font-size:.76rem;color:#bbd1c2}
.ds-integration-card>p{text-align:center;font-size:.73rem;color:#94a99b;margin:17px 0 0}

/* 06 / Legal clarity ------------------------------------------------------ */
.ds-legal{background:#e9f0e5}
.ds-legal-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(42px,8vw,135px);align-items:center}
.ds-legal-grid h2{margin:17px 0 20px}
.ds-legal-grid>div>p{max-width:610px}
.ds-legal-card{background:#fff;border:1px solid #d5e1d3;border-radius:15px;padding:34px 36px;box-shadow:0 15px 42px #1b3c1e13}
.ds-legal-head{display:flex;align-items:center;gap:12px;margin-bottom:15px}
.ds-legal-head .icon{color:#76a30b;width:26px;height:26px}
.ds-legal-head strong{font-size:1.13rem}
.ds-legal-card p{font-size:.94rem;line-height:1.76}
.ds-legal-card a{display:inline-flex;align-items:center;gap:10px;font-size:.83rem;color:#557d0a;font-weight:850;line-height:1.5;flex-wrap:wrap}
.ds-legal-card a .icon{width:16px;height:16px}

/* 07 / FAQ ---------------------------------------------------------------- */
.ds-faq{background:#fff}
.ds-faq-grid{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:clamp(35px,8vw,120px);align-items:start}
.ds-faq-grid h2{margin:15px 0 15px}
.ds-faq-items{border-top:1px solid #dce5d8}
.ds-faq-items details{border-bottom:1px solid #dce5d8}
.ds-faq-items summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:23px 5px 23px 0;font-weight:850;cursor:pointer;font-size:1rem;line-height:1.5}
.ds-faq-items summary::-webkit-details-marker{display:none}
.ds-faq-items summary .icon{width:19px;height:19px;color:#68920b;transition:transform .2s ease}
.ds-faq-items details[open] summary .icon{transform:rotate(180deg)}
.ds-faq-items details>p{margin:-2px 26px 24px 0;font-size:.95rem;color:#4b6053}

/* 08 / CTA ---------------------------------------------------------------- */
.ds-cta{background:#152e23;color:#fff;padding:66px 0;border-top:1px solid #ffffff1a}
.ds-cta-grid{display:flex;align-items:center;justify-content:space-between;gap:35px}
.ds-cta-grid h2{margin:12px 0 14px;max-width:850px}
.ds-cta-grid p{color:#bfd2c4;margin:0}
.ds-cta-grid>.btn{flex:none}

/* 09 / Responsive --------------------------------------------------------- */
@media(max-width:1150px){
 .ds-hero-grid{gap:35px}
 .ds-hero h1{font-size:clamp(3rem,5.2vw,5.3rem)}
 .ds-hero-note{right:0}
 .ds-integration-grid{gap:45px}
 .ds-benefit-card{gap:13px}
}
@media(max-width:990px){
 .ds-hero-grid,.ds-benefit-grid,.ds-integration-grid,.ds-legal-grid,.ds-faq-grid{grid-template-columns:minmax(0,1fr)}
 .ds-hero{padding-top:40px}
 .ds-hero h1{max-width:12ch;font-size:clamp(3rem,7vw,5.7rem)}
 .ds-hero-visual{max-width:820px;width:100%;margin-inline:auto}
 .ds-hero-photo{height:clamp(300px,55vw,550px)}
 .ds-benefit-heading{position:static}
 .ds-benefit-stack{grid-template-columns:repeat(3,minmax(0,1fr))}
 .ds-benefit-card{grid-template-columns:1fr;gap:14px}
 .ds-benefit-card>.icon{grid-row:1}
 .ds-benefit-card .ds-number{display:none}
 .ds-benefit-card:hover{transform:translateY(-3px)}
 .ds-integration-card{max-width:760px;width:100%;margin-inline:auto}
 .ds-faq-grid{gap:20px}
}
@media(max-width:760px){
 .ds-page main .section{padding:70px 0}
 .ds-workbench{grid-template-columns:minmax(0,1fr)}
 .ds-workbench-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .ds-step{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:7px;padding:16px 11px;min-height:133px}
 .ds-step .icon{display:none}
 .ds-step strong{font-size:.86rem;line-height:1.3}
 .ds-step small{font-size:.7rem}
 .ds-step>span{font-size:.76rem}
 .ds-example-disclaimer{grid-column:1/-1}
 .ds-workflow-panels{grid-column:1}
 .ds-workflow-copy{grid-template-columns:1fr;gap:7px}
 .ds-section-intro{display:block}
 .ds-section-intro>p{max-width:650px;margin-top:20px}
 .ds-benefit-stack,.ds-case-grid{grid-template-columns:1fr}
 .ds-benefit-card{display:grid;grid-template-columns:35px 1fr;gap:16px}
 .ds-benefit-card>.icon{grid-row:auto}
 .ds-cta-grid{align-items:flex-start;flex-direction:column}
 .ds-hero-note{right:0}
}
@media(max-width:480px){
 .ds-hero{padding:28px 0 56px}
 .ds-hero h1{font-size:clamp(2.75rem,12vw,4.4rem);overflow-wrap:normal}
 .ds-breadcrumb{margin-bottom:27px}
 .ds-hero .hero-actions{flex-direction:column;align-items:stretch;gap:12px}
 .ds-hero .hero-actions>.btn{width:100%}
 .ds-ghost-btn{justify-content:center}
 .ds-hero-photo{height:270px;border-radius:78px 16px 16px 16px}
 .ds-hero-note{position:relative;bottom:auto;right:auto;width:100%;margin-top:-8px;border-radius:0 0 12px 12px}
 .ds-photo-tag{bottom:16px;left:15px;font-size:.73rem;padding:8px}
 .ds-page main .section{padding:62px 0}
 .ds-page main h2{font-size:clamp(2rem,9vw,3rem)}
 .ds-demo-document{width:calc(100% - 22px);padding:15px;margin:11px auto}
 .ds-demo-top{padding:11px 13px}
 .ds-demo-footer{padding:0 14px;gap:9px;flex-wrap:wrap}
 .ds-doc-field{display:block}
 .ds-doc-field span{display:block;font-size:.67rem}
 .ds-doc-field strong{display:block;text-align:left;font-size:.74rem}
 .ds-doc-complete{position:relative;inset:auto;padding:6px;font-size:.63rem;margin-top:8px}
 .ds-step{min-height:125px;padding:13px 9px}
 .ds-step strong{font-size:.73rem;overflow-wrap:anywhere}
 .ds-step small{font-size:.64rem;overflow-wrap:anywhere}
 .ds-workflow-panels{min-height:125px}
 .ds-connection-row>div,.ds-connection-bottom>div{padding:13px 7px}
 .ds-connection-row>div span,.ds-connection-bottom strong{font-size:.73rem}
 .ds-connection-bottom span{font-size:.66rem}
 .ds-legal-card{padding:22px}
 .ds-cta-grid>.btn{width:100%;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
 .ds-step,.ds-case-card,.ds-benefit-card,.ds-signature,.ds-faq-items summary .icon{transition:none!important}
}

/* 10 / Narrow-screen safety: allow cards to shrink without sideways overflow */
@media(max-width:760px){
  .ds-case-grid{grid-template-columns:minmax(0,1fr)}
  .ds-case-card{min-width:0;overflow-wrap:anywhere}
}