/* ============================================================================
   BRIT GMBH / INDIVIDUELLE DETAILSEITEN 2026
   Original corporate system: assets/css/site.css

   01 Hero compositions
   02 Editorial story layouts
   03 Feature collections
   04 Topic-specific interactive-looking SVG/CSS diagrams
   05 Practice / editorial photography / FAQ
   06 Scroll animation and accessible responsiveness

   Every detail page is assembled by tools/build_individual_pages.py.
   Keep color tokens here and reuse site.css variables; brand lime is #84B413.
   No icon font, no emoji: all icons are inline SVG with <use>.
   ============================================================================ */

/* 01 / PAGE BASE --------------------------------------------------------- */
.id-lime{color:var(--lime)}
.individual-section{position:relative;isolation:isolate;padding:clamp(76px,9vw,132px) 0;overflow:hidden}
.individual-section p{max-width:760px;line-height:1.86}
.individual-section h2{font-size:clamp(2.55rem,4.5vw,5rem);line-height:1.09;letter-spacing:-.055em}
.id-eyebrow{color:#6c902e;font-size:.78rem;font-weight:800;letter-spacing:.16em}
.id-hero{overflow:hidden;position:relative;isolation:isolate;background:#f1f4ea}
.id-hero:before{content:'';position:absolute;inset:0 auto 0 0;width:40vw;background:radial-gradient(circle at 15% 90%,rgba(132,180,19,.09),transparent 65%);pointer-events:none}
.id-hero-inner{min-height:660px;padding:88px 0 106px;display:grid;grid-template-columns:minmax(0,1.01fr) minmax(0,.99fr);gap:6%;align-items:center;position:relative;z-index:1}
.id-hero-copy{position:relative;z-index:2}
.id-hero-breadcrumb{display:flex;gap:13px;align-items:center;flex-wrap:wrap;margin-bottom:40px;color:#6d8270;font-size:.8rem;font-weight:680;letter-spacing:.015em}
.id-hero-breadcrumb a:hover{color:#4d7900}
.id-hero-copy>.eyebrow{font-size:.67rem;letter-spacing:.13em}
.id-hero h1{font-size:clamp(3.05rem,5.05vw,6.15rem);margin:19px 0 25px;max-width:790px;letter-spacing:-.067em;line-height:1.04;overflow-wrap:break-word}
.id-hero .lead{font-size:clamp(1.04rem,1.3vw,1.27rem);line-height:1.68;color:#51635a;max-width:665px}
.id-hero .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:29px}
.id-hero .btn{min-height:55px}
.id-hero .btn-outline{border-color:#c2cec0;color:#1c3829}
.id-hero-proof{display:flex;align-items:center;gap:8px;color:#5c765a;font-size:.79rem;margin-top:35px;font-weight:650}
.id-hero-proof .icon{color:#77aa12;width:19px}
.id-hero-art{min-width:0;position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center}
.id-hero-img{width:100%;height:510px;min-height:400px;border-radius:28px 108px 26px 26px;overflow:hidden;position:relative;box-shadow:0 30px 70px #09180e18;background:#1f3430}
.id-hero-img:after{content:'';position:absolute;inset:0;background:linear-gradient(170deg,transparent 45%,rgba(7,30,18,.24));pointer-events:none}
.id-hero-img img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.6,.2,1);}
.id-hero-art:hover .id-hero-img img{transform:scale(1.045)}
.id-hero-media-label{position:absolute;bottom:18px;left:24px;z-index:1;color:#fff;text-shadow:0 2px 9px #0006;font-size:.68rem;letter-spacing:.16em;font-weight:800}
.id-hero-overlay{position:absolute;right:-15px;bottom:26px;width:min(310px,76%);padding:26px 28px;background:#fff;box-shadow:0 18px 70px #0b311932;border-left:5px solid var(--lime);z-index:3;display:flex;flex-direction:column;gap:12px;border-radius:4px 12px 12px 4px}
.id-hero-overlay>span{font-weight:800;color:#719f13;font-size:.63rem;letter-spacing:.17em}
.id-hero-overlay strong{font-size:1.35rem;line-height:1.25;letter-spacing:-.03em}
.id-hero-overlay small{color:#5f6f64;line-height:1.5}
/* Six deliberately different hero treatments; the navigation stays uniform. */
.id-hero--cinema{background:#14251d;color:white}
.id-hero--cinema:before{background:linear-gradient(100deg,#11231b,#183628)}
.id-hero--cinema .id-hero-inner{min-height:670px;grid-template-columns:1.04fr .96fr;padding:70px 0}
.id-hero--cinema .eyebrow,.id-hero--cinema .id-hero-breadcrumb,.id-hero--cinema .lead,.id-hero--cinema .id-hero-proof{color:#c4d7be}
.id-hero--cinema .id-hero-img{height:600px;border-radius:190px 12px 12px 12px;box-shadow:18px 15px 0 #84b41325}
.id-hero--cinema .id-hero-proof .icon{color:#a1ca48}
.id-hero--cinema .btn-outline{color:white;border-color:#708b70}
.id-hero--cinema .btn-outline:hover{background:#ffffff16}
.id-hero--panel{background:#f5f6ef}
.id-hero--panel .id-hero-inner{grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr)}
.id-hero--panel .id-hero-img{height:540px;border-radius:15px 160px 15px 15px}
.id-hero--panel .id-hero-overlay{bottom:0;left:-25px;right:auto}
.id-hero--split{background:#fff}
.id-hero--split .id-hero-inner{grid-template-columns:1.06fr .94fr}
.id-hero--split .id-hero-img{height:590px;border-radius:170px 10px 170px 10px}
.id-hero--split .id-hero-art:before{content:'';position:absolute;width:58%;height:73%;left:-25px;bottom:5px;border:2px solid #cce4a9;border-radius:160px 8px 160px 8px;z-index:-1}
.id-hero--canvas{background:#ecf2e6}
.id-hero--canvas .id-hero-inner{grid-template-columns:1.02fr .98fr}
.id-hero--canvas .id-hero-img{height:520px;border-radius:26px 26px 160px 26px;transform:rotate(1.5deg);border:10px solid white}
.id-hero--canvas .id-hero-overlay{right:-12px;bottom:0;transform:rotate(-1.5deg)}
.id-hero--offset{background:#f8faf5}
.id-hero--offset .id-hero-inner{grid-template-columns:.96fr 1.04fr;padding:115px 0 125px}
.id-hero--offset .id-hero-img{height:570px;border-radius:12px 12px 180px 12px}
.id-hero--offset .id-hero-overlay{right:-30px;top:52px;bottom:auto}
.id-hero--frame{background:#e9efe3}
.id-hero--frame .id-hero-inner{grid-template-columns:1.07fr .93fr}
.id-hero--frame .id-hero-img{height:520px;border-radius:125px 24px 24px 24px;border:13px solid #fff;box-shadow:0 0 0 1px #dce8d1}
.id-hero--frame .id-hero-img:before{content:'';position:absolute;top:-10px;left:-10px;width:50%;height:4px;background:var(--lime);z-index:2}

/* 02 / EDITORIAL NARRATIVE ---------------------------------------------- */
.id-story{background:#fff}
.id-story-layout{display:grid;grid-template-columns:.83fr 1.17fr;gap:9%;align-items:start}
.id-story h2{max-width:640px}
.id-story-copy{border-left:2px solid #84b413;padding:0 0 0 36px}
.id-story p{font-size:clamp(1.05rem,1.32vw,1.27rem);line-height:1.8;margin:0 0 21px;color:#4e6054}
.id-story .text-link{margin-top:13px}
.id-story--stripe{background:#eaf0e5}
.id-story--stripe h2{font-size:clamp(2.6rem,4vw,4.6rem)}
.id-story--stripe .id-story-copy{border:0;padding:24px 0 0;border-top:4px solid var(--lime)}
.id-story--quote{background:#142a22;color:#fff}
.id-story--quote .id-story-layout{grid-template-columns:.42fr 1.58fr}
.id-story--quote .id-story-layout>div:last-child{max-width:1000px}
.id-story--quote h2{max-width:950px}
.id-story--quote .id-intro-large{font-size:clamp(1.35rem,2.2vw,2.35rem);line-height:1.48;color:#e9f2e4}
.id-story--quote p{color:#b3c7b7}
.id-story--quote .id-eyebrow{color:var(--lime-light)}

/* 03 / FEATURE COMPOSITIONS ---------------------------------------------- */
.id-features{background:#f5f7f1}
.id-section-heading{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:43px}
.id-section-heading h2{max-width:780px;margin:18px 0 0}
.id-section-heading>p{max-width:350px;margin-bottom:7px}
.id-feature-list{display:grid;gap:14px}
.id-feature-item{position:relative;min-width:0;transition:transform .3s,border-color .3s,background .3s}
.id-feature-item h3{font-size:clamp(1.3rem,1.55vw,1.75rem);line-height:1.18;letter-spacing:-.045em;margin:0 0 13px}
.id-feature-item p{font-size:.95rem;line-height:1.7;margin:0}
.id-features--grid .id-feature-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.id-features--grid .id-feature-item{padding:32px;background:#fff;border-radius:12px;border:1px solid #e0e9d9;min-height:250px}
.id-features--grid .id-feature-item:hover{transform:translateY(-5px);border-color:#9ebd76}
.id-feature-mark{display:flex;width:39px;height:39px;border-radius:10px;background:#ebf5d6;color:#69940e;align-items:center;justify-content:center;margin-bottom:23px}
.id-feature-mark .icon{width:19px}
.id-features--rail .id-feature-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:1px solid #cdd9c4}
.id-features--rail .id-feature-item{grid-column:span 2;padding:32px 28px 36px;border-right:1px solid #d8e3d0;border-bottom:1px solid #d8e3d0}
.id-features--rail .id-feature-item:nth-child(3n){border-right:0}
.id-features--rail .id-feature-num{color:#769b25;font-size:.75rem;font-weight:850;letter-spacing:.17em;margin-bottom:28px}
.id-features--rail .id-feature-item:hover{background:#edf3e4}
.id-features--rows{background:#fff}
.id-features--rows .id-feature-list{border-top:1px solid #dce5d6;gap:0}
.id-features--rows .id-feature-item{display:grid;grid-template-columns:65px minmax(150px,.7fr) minmax(230px,1.1fr) 30px;gap:25px;align-items:center;padding:28px 15px;border-bottom:1px solid #dce5d6}
.id-features--rows .id-feature-item>span{font-weight:850;color:#799e30}
.id-features--rows .id-feature-item h3{margin:0}
.id-features--rows .id-feature-item p{font-size:.92rem}
.id-features--rows .id-feature-item>.icon{width:20px;color:#66930e}
.id-features--rows .id-feature-item:hover{background:#f4f7ef}
.id-features--mosaic .id-feature-list{grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.id-features--mosaic .id-feature-item{grid-column:span 4;background:#fff;padding:34px;border-radius:12px;min-height:260px;border:1px solid #e1e8d8}
.id-features--mosaic .id-feature-item:nth-child(1){grid-column:span 7;background:#203d2f;color:#fff}
.id-features--mosaic .id-feature-item:nth-child(2){grid-column:span 5;background:#e1efcb}
.id-features--mosaic .id-feature-item:nth-child(6){grid-column:span 4;background:#dae9c2}
.id-features--mosaic .id-feature-item span{display:block;color:#7eaa27;letter-spacing:.13em;font-weight:850;font-size:.7rem;margin-bottom:40px}
.id-features--mosaic .id-feature-item:nth-child(1) p{color:#bdd1c0}
.id-features--mosaic .id-feature-item:nth-child(1) span{color:#c5e68b}
.id-features--mosaic .id-feature-item:hover{transform:translateY(-5px)}

/* 04 / SIGNATURE VISUALS ------------------------------------------------- */
.id-showcase{background:#162a22;color:#fff}
.id-showcase:before{content:'';position:absolute;width:60vw;height:60vw;border:1px solid #84b41328;border-radius:50%;right:-20vw;top:10%;z-index:-1}
.id-showcase .eyebrow{color:#b6d974}
.id-showcase-header{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:45px}
.id-showcase-header h2{margin:20px 0 0;max-width:850px;font-size:clamp(2.7rem,4vw,4.7rem)}
.id-showcase-header>p{color:#b6c9b7;max-width:300px;align-self:end;margin-bottom:8px}
.id-showcase-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;font-size:.67rem;letter-spacing:.16em;color:#a4baa9}
.id-showcase-foot .text-link{color:#b7d67d;font-size:.9rem;letter-spacing:0}
.id-visual{position:relative;min-height:340px;border:1px solid #ffffff25;border-radius:21px;background:radial-gradient(circle at 75% 10%,#34523e 0%,#1a3529 50%,#13281f 100%);overflow:hidden;display:flex;gap:15px;padding:42px;align-items:center;justify-content:center}
.id-visual .icon{stroke-width:1.7}
.id-visual--matrix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.id-matrix-cell{display:flex;flex-direction:column;gap:18px;padding:28px 22px;background:#ffffff0c;border:1px solid #ffffff1d;border-radius:13px;min-height:220px;transition:background .25s,transform .25s}
.id-matrix-cell:hover{background:#8cb82426;transform:translateY(-3px)}
.id-matrix-cell .icon{width:34px;height:34px;color:#a5cf59}
.id-matrix-cell span{font-size:1.35rem;font-weight:780;letter-spacing:-.035em}
.id-matrix-cell small{color:#9caf9b;font-size:.68rem;letter-spacing:.15em;margin-top:auto}
.id-visual--layers{flex-direction:column;gap:9px;padding:48px 14%}
.id-layer{display:grid;grid-template-columns:75px 1fr 25px;align-items:center;gap:20px;width:100%;background:linear-gradient(90deg,rgba(132,180,19,.17),rgba(132,180,19,.04));border-left:3px solid var(--lime);border-radius:6px;padding:19px 27px}
.id-layer:nth-child(2){width:92%}.id-layer:nth-child(3){width:84%}.id-layer:nth-child(4){width:76%}.id-layer:nth-child(5){width:68%}
.id-layer span{font-size:.75rem;color:#bdd998;font-weight:850}.id-layer strong{font-size:1.15rem}.id-layer .icon{color:#c3e17b}
.id-visual--network{min-height:400px;justify-content:space-around;gap:12px}
.id-visual-circuit{position:absolute;left:8%;right:8%;top:49%;height:2px;background:linear-gradient(90deg,transparent,#95c342,transparent)}
.id-node{position:relative;min-width:0;width:160px;height:165px;display:flex;align-items:center;justify-content:center;gap:18px;flex-direction:column;padding:22px;background:#203e30;border:1px solid #a5ca705b;border-radius:18px;z-index:1;text-align:center;box-shadow:0 12px 40px #08160c30}
.id-node .icon{width:34px;height:34px;color:#b9e377}.id-node strong{font-size:.92rem;line-height:1.25}
.id-node:nth-of-type(odd){transform:translateY(-17px)}.id-node:nth-of-type(even){transform:translateY(17px)}
.id-visual--timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.id-track-step{align-self:stretch;display:flex;flex-direction:column;gap:23px;padding:33px 20px;position:relative;border-radius:10px;background:#ffffff0c}
.id-track-step b{font-size:2.3rem;color:#a9d462;line-height:1;font-weight:650}
.id-track-step strong{font-size:1.12rem;line-height:1.28}
.id-track-line{margin-top:auto;width:100%;height:3px;border-radius:5px;background:#7fad2a}
.id-track-step:nth-child(2n){background:#ffffff16}
.id-visual--pipeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:7px;padding:33px}
.id-pipeline-step{min-height:230px;padding:30px 22px 24px;border-radius:12px;background:#254533;display:flex;flex-direction:column;align-items:flex-start;gap:25px;position:relative}
.id-pipeline-step:first-child{background:#2d5435}.id-pipeline-step:last-child{background:#84b413;color:#18261e}
.id-pipe-counter{font-size:.7rem;letter-spacing:.15em;color:#bed89a}
.id-pipeline-step:last-child .id-pipe-counter{color:#30450d}
.id-pipeline-step strong{font-size:1.32rem;line-height:1.22;letter-spacing:-.035em;overflow-wrap:anywhere}
.id-pipeline-step .icon{margin-top:auto;width:20px;height:20px;color:#a9ca77;align-self:end}
.id-pipeline-step:last-child .icon{color:#273a10}
.id-visual--compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.id-compare-col{min-height:250px;background:#234031;border:1px solid #ffffff24;border-radius:13px;padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.id-compare-col:nth-child(2){background:#a2c84c;color:#142419}
.id-compare-col>span{font-weight:850;letter-spacing:.15em;font-size:.72rem}
.id-compare-col h3{font-size:2rem;line-height:1.12;margin:0}
.id-compare-meter{display:flex;gap:5px}.id-compare-meter i{width:25%;height:7px;border-radius:4px;background:#ffffff45}.id-compare-meter i:nth-child(-n+2){background:var(--lime)}
.id-compare-col:nth-child(2) .id-compare-meter i{background:#172c252d}
.id-visual--terminal{display:block;padding:0;min-height:340px;max-width:1030px;margin:0 auto;background:#0d1917;border:1px solid #78aa4060;border-radius:13px}
.id-terminal-top{display:flex;gap:7px;align-items:center;padding:18px 23px;background:#244034}
.id-terminal-top i{width:9px;height:9px;border-radius:50%;background:#97c756}.id-terminal-top i:nth-child(2){opacity:.6}.id-terminal-top i:nth-child(3){opacity:.35}
.id-terminal-top span{margin-left:14px;font-family:monospace;font-size:.79rem;letter-spacing:.05em}
.id-terminal-code{padding:25px 6% 34px;font-family:Consolas,monospace;font-size:clamp(.75rem,1.2vw,1.08rem)}
.id-terminal-code p{color:#c9d9c8;margin:0 0 14px;max-width:none;line-height:1.6}
.id-terminal-code p span{color:#598364;margin-right:20px}.id-terminal-code p b{color:#b4e775;font-weight:600}.id-terminal-code p em{color:#d2e3cb;font-size:.9em}
.id-visual--document{background:radial-gradient(circle at 70% 50%,#33543e,#152a21 72%)}
.id-document-sheet{background:#fdfef9;color:#12231a;position:relative;border-radius:8px;padding:25px;width:min(560px,100%);transform:rotate(-2deg);box-shadow:25px 25px 0 #83b31925,0 20px 70px #0005}
.id-doc-sheet-head{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;letter-spacing:.08em;font-weight:750;color:#5b8251;padding-bottom:15px;border-bottom:1px solid #d4dfce}
.id-doc-sheet-title{height:13px;background:#314a39;width:51%;margin-top:22px;border-radius:3px}
.id-doc-sheet-line{height:6px;background:#d5dfd0;width:90%;margin-top:12px;border-radius:3px}.id-doc-sheet-line.short{width:63%;margin-bottom:25px}
.id-doc-sheet-divider{height:1px;background:#e3e8df;margin-bottom:11px}
.id-doc-row{display:flex;gap:12px;align-items:center;font-weight:740;padding:12px 8px;border-bottom:1px solid #e4e9df;font-size:.91rem}
.id-doc-row .icon{width:19px;height:19px;color:#6c9916}.id-doc-row .icon:last-child{margin-left:auto}
.id-doc-orbit{position:absolute;right:13%;top:19%;width:125px;height:125px;background:#9bc748;border-radius:29px;display:grid;place-items:center;transform:rotate(11deg);box-shadow:0 20px 50px #0b171c44}
.id-doc-orbit .icon{width:65px;height:65px;color:#10251b}
.id-visual--gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.id-gallery-tile{height:245px;border-radius:12px;overflow:hidden;background:#2b4a37;border:1px solid #ffffff20;display:flex;flex-direction:column}
.id-gallery-pattern{height:78%;display:grid;place-items:center;background:linear-gradient(125deg,#44644d,#19382a 65%);position:relative}
.id-gallery-pattern:before,.id-gallery-pattern:after{content:'';position:absolute;border:1px solid #91bc55;width:85px;height:85px;border-radius:15px;transform:rotate(23deg)}
.id-gallery-pattern:after{transform:rotate(45deg);opacity:.5}
.id-gallery-pattern .icon{width:38px;height:38px;color:#c4e48b}
.id-gallery-tile strong{padding:14px;font-size:.88rem;line-height:1.2}
.id-visual--kanban{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.id-kanban-col{background:#eff4e9;color:#1b3222;min-height:270px;border-radius:10px;padding:16px}
.id-kanban-col header{display:flex;align-items:center;gap:9px;font-size:.88rem;margin-bottom:25px;line-height:1.3}
.id-dot{width:9px;height:9px;background:#84b413;border-radius:50%;flex:0 0 auto}
.id-kanban-col:nth-child(2) .id-dot{background:#39785c}.id-kanban-col:nth-child(3) .id-dot{background:#7c9db4}.id-kanban-col:nth-child(4) .id-dot{background:#263c2a}
.id-kanban-card{background:white;border:1px solid #dce8d4;box-shadow:0 6px 12px #1d331119;padding:17px;border-radius:9px;display:flex;flex-direction:column;gap:14px;min-height:148px}
.id-kanban-card>span:first-child{font-size:.6rem;letter-spacing:.13em;color:#6c9b1a;font-weight:760}
.id-kanban-card b{font-size:.92rem;line-height:1.3}
.id-kanban-progress{height:6px;width:75%;background:linear-gradient(90deg,#84b413 67%,#e1e9dc 67%);border-radius:6px;margin-top:auto}

/* 05 / PHOTOGRAPHY, CASE STUDY & FAQ ------------------------------------ */
.id-photosection{background:#fff}
.id-photo-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:8%;align-items:center}
.id-photo-frame{position:relative;min-height:490px;max-height:550px;height:39vw;overflow:hidden;border-radius:12px 130px 12px 12px;background:#173626}
.id-photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.id-photo-frame:hover img{transform:scale(1.04)}
.id-img-stamp{position:absolute;bottom:0;left:0;color:white;background:#193627d6;padding:12px 17px;font-size:.62rem;letter-spacing:.17em;font-weight:750}
.id-photo-copy h2{margin:24px 0;max-width:620px}
.id-photo-copy p{font-size:1.08rem;line-height:1.8;color:#506357}
.id-photo-copy .text-link{margin-top:25px}
.id-photosection--rows .id-photo-layout,.id-photosection--grid .id-photo-layout{grid-template-columns:.9fr 1.1fr}
.id-photosection--rows .id-photo-frame,.id-photosection--grid .id-photo-frame{order:2;border-radius:140px 10px 10px 10px}
.id-photosection--mosaic{background:#eaf1e3}
.id-photosection--mosaic .id-photo-frame{border-radius:12px 12px 12px 160px}
.id-case{background:#e8f0de}
.id-case h2{margin:22px 0;max-width:760px}
.id-case>div>p,.id-case-layout p{font-size:1.04rem;line-height:1.8}
.id-case-title{display:grid;grid-template-columns:1fr .9fr;gap:7%;align-items:start;margin-bottom:48px}
.id-case-title p{padding-top:22px;font-size:1.06rem}
.id-case-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.id-case-step{min-height:140px;padding:26px 25px;background:#fff;border-top:3px solid var(--lime);border-radius:0 0 9px 9px;display:flex;flex-direction:column;gap:17px}
.id-case-step span{color:#759e20;font-size:.74rem;font-weight:800;letter-spacing:.1em}
.id-case-step strong{font-size:1.12rem;letter-spacing:-.018em;line-height:1.4}
.id-case--story{background:#162d23;color:#fff}
.id-case--story .id-case-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:11%}
.id-case--story p{color:#bed2c1}
.id-case--story .id-case-steps{grid-template-columns:1fr;gap:10px}
.id-case--story .id-case-step{display:grid;grid-template-columns:55px 1fr;align-items:center;background:#ffffff0c;border:1px solid #ffffff25;border-left:3px solid var(--lime);min-height:85px;color:white}
.id-case--story .id-case-step span{color:#b6dd78}
.id-faq{background:#f8faf5}
.id-faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:11%}
.id-faq h2{margin:20px 0;max-width:590px}
.id-faq-list{border-top:1px solid #d5dfd0}
.id-faq-list details{border-bottom:1px solid #d5dfd0}
.id-faq-list summary{font-size:1.08rem;font-weight:770;line-height:1.5;list-style:none;cursor:pointer;padding:25px 0;display:flex;align-items:center;justify-content:space-between;gap:18px}
.id-faq-list summary::-webkit-details-marker{display:none}
.id-faq-list summary .icon{height:17px;width:17px;color:#679915;transition:transform .25s}
.id-faq-list details[open] summary .icon{transform:rotate(180deg)}
.id-faq-list details p{color:#526256;margin:-4px 20px 25px 0;line-height:1.8}

/* 06 / ANIMATIONS AND REDUCED MOTION ------------------------------------ */
/* No hidden content without JS. JS adds .br-motion to the root ONLY when
   IntersectionObserver is available and the user allows motion. */
@media (prefers-reduced-motion:no-preference){
 .br-motion [data-reveal]{opacity:0;transform:translateY(25px);transition:opacity .65s ease,transform .65s cubic-bezier(.18,.7,.21,1)}
 .br-motion [data-reveal].is-visible{opacity:1;transform:translateY(0)}
 .id-visual--network .id-node-dot{width:7px;height:7px;background:var(--lime);position:absolute;border-radius:50%;bottom:-4px;box-shadow:0 0 18px 4px #a8c5536a;animation:br-soft-pulse 3.7s ease-in-out infinite}
 .id-visual--network .id-node:nth-child(2n) .id-node-dot{animation-delay:1.2s}
 @keyframes br-soft-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.25)}}
}
@media(prefers-reduced-motion:reduce){.id-hero-img img,.id-photo-frame img,.id-feature-item,.id-faq-list .icon{animation:none!important;transition:none!important}}

/* 07 / BREAKPOINTS ------------------------------------------------------- */
@media(max-width:1150px){
 .id-hero-inner{min-height:0;gap:4%}.id-hero h1{font-size:clamp(2.9rem,5vw,5rem)}
 .id-hero-img{height:450px;min-height:0}.id-hero--cinema .id-hero-img,.id-hero--split .id-hero-img{height:490px}
 .id-feature-list{gap:12px}.id-features--mosaic .id-feature-item{padding:27px}
 .id-visual{padding:23px}.id-visual--matrix{grid-template-columns:repeat(2,minmax(0,1fr))}
 .id-visual--pipeline{grid-template-columns:repeat(4,minmax(0,1fr))}.id-pipeline-step{min-height:200px}
 .id-visual--network{flex-wrap:wrap;padding:55px 20px}.id-node{width:145px}
 .id-document-sheet{transform:none}
}
@media(max-width:850px){
 .id-hero-inner,.id-hero--cinema .id-hero-inner,.id-hero--panel .id-hero-inner,.id-hero--split .id-hero-inner,.id-hero--canvas .id-hero-inner,.id-hero--offset .id-hero-inner,.id-hero--frame .id-hero-inner{grid-template-columns:1fr;padding:60px 0 75px;gap:37px}
 .id-hero h1{font-size:clamp(3.1rem,7vw,5.3rem);max-width:800px}
 .id-hero-art{max-width:740px;width:100%;margin-inline:auto}
 .id-hero-img,.id-hero--cinema .id-hero-img,.id-hero--split .id-hero-img,.id-hero--offset .id-hero-img,.id-hero--panel .id-hero-img,.id-hero--frame .id-hero-img{height:410px}
 .id-hero-overlay{right:8px}
 .id-story-layout,.id-story--quote .id-story-layout{grid-template-columns:1fr;gap:25px}
 .id-section-heading,.id-showcase-header{flex-direction:column;align-items:start;gap:15px}
 .id-features--rail .id-feature-item{grid-column:span 3}.id-features--rail .id-feature-item:nth-child(3n){border-right:1px solid #d8e3d0}.id-features--rail .id-feature-item:nth-child(2n){border-right:0}
 .id-features--grid .id-feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .id-features--mosaic .id-feature-item,.id-features--mosaic .id-feature-item:nth-child(1),.id-features--mosaic .id-feature-item:nth-child(2),.id-features--mosaic .id-feature-item:nth-child(6){grid-column:span 6}
 .id-features--rows .id-feature-item{grid-template-columns:38px 1fr 25px;gap:15px}
 .id-features--rows .id-feature-item p{grid-column:2/3}
 .id-features--rows .id-feature-item>.icon{grid-column:3;grid-row:1}
 .id-photo-layout,.id-photosection--rows .id-photo-layout,.id-photosection--grid .id-photo-layout{grid-template-columns:1fr;gap:33px}
 .id-photosection--rows .id-photo-frame,.id-photosection--grid .id-photo-frame{order:0}
 .id-photo-frame{height:410px;min-height:0}
 .id-case-title,.id-case--story .id-case-layout,.id-faq-layout{grid-template-columns:1fr;gap:20px}
 .id-case-steps{gap:9px}.id-case-step{padding:20px}
 .id-doc-orbit{right:7%}
 .id-visual--kanban{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
 .individual-section{padding:74px 0}
 .id-hero-breadcrumb{margin-bottom:27px}
 .id-hero h1{font-size:clamp(2.9rem,10vw,4.1rem);overflow-wrap:anywhere}
 .id-hero .lead{font-size:1.03rem}
 .id-hero-proof{font-size:.75rem}
 .id-hero-img,.id-hero--cinema .id-hero-img,.id-hero--split .id-hero-img,.id-hero--offset .id-hero-img,.id-hero--panel .id-hero-img,.id-hero--frame .id-hero-img{height:310px;border-radius:12px 80px 12px 12px}
 .id-hero--canvas .id-hero-img{height:310px;transform:none}
 .id-hero-overlay{position:relative;width:auto;max-width:100%;margin:-30px 16px 0 16px;right:auto!important;left:auto!important;bottom:auto!important;top:auto!important;padding:18px;transform:none!important}
 .id-hero-art{display:block}
 .id-story-copy{padding-left:20px}
 .id-story p{font-size:1.04rem}
 .id-feature-list,.id-features--grid .id-feature-list{grid-template-columns:1fr;gap:12px}
 .id-features--rail .id-feature-list{grid-template-columns:1fr}
 .id-features--rail .id-feature-item{grid-column:span 1!important;border-right:0!important;padding:25px 5px}
 .id-features--mosaic .id-feature-list{grid-template-columns:1fr}
 .id-features--mosaic .id-feature-item,.id-features--mosaic .id-feature-item:nth-child(1),.id-features--mosaic .id-feature-item:nth-child(2),.id-features--mosaic .id-feature-item:nth-child(6){grid-column:span 1;min-height:0}
 .id-visual{min-height:280px;padding:17px;border-radius:14px}
 .id-visual--matrix{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .id-matrix-cell{padding:15px;min-height:145px;gap:12px}.id-matrix-cell span{font-size:1rem}.id-matrix-cell .icon{width:25px;height:25px}
 .id-visual--network{justify-content:center;gap:12px}.id-node{width:calc(50% - 10px);height:118px;padding:10px;gap:11px}.id-node strong{font-size:.75rem}.id-node .icon{width:24px;height:24px}.id-node:nth-of-type(odd),.id-node:nth-of-type(even){transform:none}
 .id-layer{grid-template-columns:28px 1fr 20px;padding:15px;width:100%!important;gap:12px;font-size:.9rem}
 .id-visual--timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.id-track-step{padding:20px;gap:15px}.id-track-step b{font-size:1.6rem}.id-track-step strong{font-size:.95rem}
 .id-visual--pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.id-pipeline-step{min-height:140px;padding:17px;gap:13px}.id-pipeline-step strong{font-size:1rem}
 .id-visual--compare{grid-template-columns:1fr}.id-compare-col{min-height:160px;padding:20px}.id-compare-col h3{font-size:1.45rem}
 .id-visual--gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.id-gallery-tile{height:180px}.id-gallery-tile strong{font-size:.75rem}
 .id-visual--document{min-height:400px}.id-document-sheet{padding:15px}.id-doc-row{padding:10px 0;font-size:.78rem}
 .id-doc-orbit{width:64px;height:64px;border-radius:16px;top:7%;right:4%}.id-doc-orbit .icon{width:34px;height:34px}
 .id-visual--kanban{gap:8px}.id-kanban-col{padding:10px;min-height:180px}.id-kanban-col header{font-size:.69rem}.id-kanban-card{padding:10px;min-height:95px;font-size:.72rem}.id-kanban-card b{font-size:.72rem}
 .id-visual--terminal{min-height:260px}.id-terminal-code{padding:18px 12px}.id-terminal-code p span{margin-right:8px}
 .id-photo-frame{height:280px;border-radius:10px 75px 10px 10px!important}
 .id-case-steps{grid-template-columns:1fr}.id-case-step{min-height:90px}
 .id-case h2{font-size:clamp(2.4rem,9vw,3.6rem)}
 .id-showcase-foot{flex-direction:column;align-items:start}
}


/* 07 / PAGE-SPECIFIC: IT-SICHERHEIT ------------------------------------- */
.id-page--it-sicherheit .id-section-heading--compact{align-items:start}
.id-security-overview{background:#fff}
.id-security-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.id-security-card{background:#f5f7f1;border:1px solid #dde7d7;border-radius:14px;padding:28px 24px;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease}
.id-security-card:hover{transform:translateY(-4px);border-color:#a9c87b;box-shadow:0 18px 40px #10221610}
.id-security-card h3{margin:0 0 12px;font-size:1.25rem;line-height:1.25;letter-spacing:-.035em}
.id-security-card p{margin:0;color:#4f6055;max-width:none;font-size:.96rem;line-height:1.75}
.id-security-card .id-feature-mark{margin-bottom:18px}
.id-partnerspotlight{background:#162c23;color:#fff}
.id-partnerspotlight .id-story-layout{margin-bottom:34px}
.id-story-layout--tight{grid-template-columns:.75fr 1.25fr;gap:8%}
.id-partnerspotlight .id-story-copy{border-left-color:#84B413}
.id-partnerspotlight .id-story-copy p{color:#bed2c2}
.id-partnerspotlight .eyebrow{color:#badf6d}
.id-partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.id-partner-card{background:#ffffff0b;border:1px solid #ffffff16;border-radius:18px;padding:26px;box-shadow:0 18px 40px #07120d20;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.id-partner-card:hover{transform:translateY(-4px);border-color:#89b835;background:#ffffff10}
.id-partner-logo{display:flex;align-items:center;justify-content:flex-start;min-height:82px;margin-bottom:16px}
/* IT-Sicherheit: original supplied partner logos served as local static files. */
.id-partner-logo--official{background:#fff;border:1px solid #ecf0ed;border-radius:12px;min-height:120px;padding:18px 24px;margin:0 0 24px;justify-content:center;overflow:hidden}
.id-partner-logo--official img{display:block;width:100%;max-width:310px;max-height:84px;height:auto;object-fit:contain;object-position:center}
.id-partner-logo--dark{background:#0d2119;border-color:#365443}
.id-partner-logo--dark img{max-width:420px;max-height:80px}
.id-partner-card h3{font-size:1.55rem;line-height:1.18;margin:0 0 12px;letter-spacing:-.04em}
.id-partner-card p{margin:0 0 16px;color:#c5d5c8;max-width:none;font-size:.98rem;line-height:1.78}
.brand-logo{width:min(100%,320px);height:auto;display:block}
.id-mini-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.id-mini-list li{position:relative;padding-left:22px;color:#eff4eb;line-height:1.55}
.id-mini-list li:before{content:'';position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#84B413}
.id-features--itsec{background:#f4f7ef}
.id-case--security{background:linear-gradient(180deg,#102218,#183126)}
.id-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:26px}
.id-check-grid div{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:#ffffff88;border-radius:12px;border:1px solid #dce5d5}
.id-check-grid .icon{width:18px;height:18px;color:#76a818;flex:0 0 auto;margin-top:2px}
.id-check-grid span{font-size:.96rem;line-height:1.55;color:#21392a}
@media (max-width:1100px){
 .id-security-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .id-partner-grid{grid-template-columns:1fr}
 .id-story-layout--tight{grid-template-columns:1fr;gap:24px}
}
@media (max-width:767px){
 .id-security-grid,.id-check-grid{grid-template-columns:1fr}
 .id-partner-card{padding:22px}
 .id-partner-logo{min-height:68px}
}