@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--blue:#006aff;--ink:#101010;--grey:#606060;--line:#d5d5d5;--serif:"meno-text",Georgia,serif;--sans:"Archivo","Helvetica Neue",Arial,sans-serif;--ease:cubic-bezier(.16,1,.3,1);--page-pad:clamp(24px,3.85vw,80px);--nav-height:72px;color:var(--ink);background:#fff;font-family:var(--sans);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:90px}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button{color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button{border:0;background:none}button:disabled{cursor:default;opacity:.3}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2{font-family:var(--serif);font-weight:400}h2{font-size:clamp(36px,3.05vw,54px);line-height:1.12;letter-spacing:-.020em;text-wrap:balance}h3{font-weight:500}p{font-size:16px;line-height:1.55}a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #006aff;outline-offset:6px}::selection{background:#006aff;color:white}[hidden]{display:none!important}.skip-link{position:fixed;z-index:100;left:20px;top:-80px;background:#fff;padding:14px;border:2px solid var(--blue)}.skip-link:focus{top:12px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:12px 21px;border:1px solid transparent;border-radius:50px;font-size:16px;font-weight:500;line-height:1.2;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .4s var(--ease)}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(0)}.button-blue{background:var(--blue);color:#fff}.button-blue:hover{background:#0056cf}.button-white{background:#fff;color:var(--blue)}.button-white:hover{background:#e9f2ff}.button-outline{color:var(--blue);border-color:var(--blue);background:transparent}.button-outline:hover{background:#edf4ff}.text-link{display:inline-block;font-weight:500;font-size:16px;line-height:1.6;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;transition:color .2s,text-underline-offset .3s var(--ease)}.text-link:hover{color:var(--blue);text-underline-offset:9px}.eyebrow{font-family:var(--sans);font-size:14px;line-height:1.35;font-weight:500;letter-spacing:.085em;text-transform:uppercase;color:var(--grey);margin-bottom:22px}.section-pad{padding:90px var(--page-pad)}.section-intro{max-width:850px}.section-description{margin-top:22px;max-width:620px}.section-intro-center{margin:0 auto;text-align:center}.section-intro-center .section-description{margin:24px auto 0}
.site-header{height:var(--nav-height);position:absolute;top:0;left:0;width:100%;z-index:50;display:flex;align-items:center;padding:0 30px;gap:24px;color:#fff;transition:background .3s var(--ease),color .2s,transform .4s var(--ease);background:linear-gradient(#0008,transparent)}.site-header>.wordmark{flex-shrink:0;display:flex;align-items:center}.wordmark svg{width:142px;height:auto;display:block}.site-header .wordmark svg{transition:width .4s var(--ease)}.desktop-nav{display:flex;align-items:center;gap:22px;font-size:18px;font-weight:500;white-space:nowrap}.desktop-nav a,.nav-trigger{padding:23px 0;position:relative;font-size:inherit;line-height:26px}.desktop-nav a:after,.nav-trigger:after{position:absolute;content:"";bottom:18px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}.desktop-nav a:hover:after,.nav-trigger:hover:after,.nav-trigger[aria-expanded=true]:after{transform:scaleX(1)}.header-actions{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:18px;font-weight:500;white-space:nowrap}.phone-link{width:24px;height:24px}.phone-link svg{width:100%;height:100%}.header-cta{font-size:14px;min-height:42px;padding:11px 19px}.mobile-toggle{display:none}.site-header.is-compact{position:fixed;background:#fff;color:var(--ink);box-shadow:0 2px 5px #00000017;animation:header-in .35s var(--ease)}.site-header.is-compact .wordmark svg{width:122px}.site-header.is-compact .desktop-nav,.site-header.is-compact .login-link,.site-header.is-compact .phone-link{display:none}.site-header.is-compact .header-actions{gap:10px}.site-header.is-away{transform:translateY(-110%);pointer-events:none}.site-header.menu-is-open{background:#fff;color:var(--ink)}.mega-menu{position:absolute;top:72px;left:0;width:100%;display:grid;grid-template-columns:1fr 1.15fr .95fr;gap:6vw;padding:50px var(--page-pad) 60px;background:#fff;color:#111;box-shadow:0 14px 20px #0000000b;animation:menu-in .4s var(--ease);transform-origin:top}.mega-menu h2{font-size:40px;margin-bottom:24px}.mega-menu .eyebrow{font-size:12px}.mega-links{display:flex;flex-direction:column;gap:30px}.mega-links a{font-size:24px;font-weight:500;line-height:1.15}.mega-links a span{display:block;font-size:16px;font-weight:400;color:var(--grey);margin-top:9px}.mega-links a:hover{color:var(--blue)}.menu-feature img{width:100%;height:195px;object-fit:cover;border-radius:8px}.menu-feature>span{display:flex;justify-content:space-between;gap:16px;font-size:16px;line-height:1.4;margin-top:15px}.menu-feature b{font-size:24px;font-weight:400}.menu-backdrop{position:fixed;inset:72px 0 0;background:#0006;z-index:40;backdrop-filter:blur(3px);animation:fade-in .2s}.mobile-nav{position:absolute;top:72px;left:0;width:100%;padding:24px;background:#fff;color:var(--ink);box-shadow:0 14px 20px #0002;max-height:calc(100svh - 72px);overflow:auto}.mobile-nav>a{display:block;font-size:27px;padding:15px 0}.mobile-nav>.button{font-size:16px;padding:16px;margin-top:15px}
.hero{height:160svh;position:relative}.hero-sticky{height:100svh;position:sticky;top:0;overflow:hidden;background:#fff;isolation:isolate}.hero-visual{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:2;will-change:width,height,transform,border-radius;background:#171a1c;transform:translate3d(0,0,0)}.hero-image{width:100%;height:100%;object-fit:cover;object-position:center 53%;animation:hero-photo-in 1.8s var(--ease) both}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.57) 34%,rgba(0,0,0,.57) 78%,rgba(0,0,0,.50) 100%)}.hero-copy{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 28px 135px;text-align:center;color:#fff;pointer-events:none;will-change:transform,opacity}.hero-copy h1{font-size:clamp(46px,5.3vw,88px);line-height:1.03;letter-spacing:-.038em;max-width:1700px;width:100%;text-shadow:0 2px 35px #0003}.hero-line{display:block;overflow:hidden;padding:0 .06em .15em;margin-bottom:-.15em}.hero-line>span{display:block;animation:hero-text-in 1.25s var(--ease) .12s both}.hero-line:nth-child(2)>span{animation-delay:.24s}.hero-line:nth-child(3)>span{animation-delay:.36s}.hero-actions{display:flex;gap:20px;margin-top:40px;pointer-events:auto;animation:hero-text-in 1.2s var(--ease) .4s both}.hero-actions .button{min-height:45px}.client-marquee{position:absolute;left:0;right:0;bottom:54px;z-index:3;color:#fff;overflow:hidden;pointer-events:none;will-change:opacity}.marquee-track{display:flex;align-items:center;gap:90px;width:max-content;animation:marquee 36s linear infinite,fade-in 1.2s .6s both}.client-logo{white-space:nowrap;opacity:.83;font-weight:700;font-size:26px;line-height:1.4;min-width:180px;text-align:center}.logo-loesch{font-size:30px;letter-spacing:-.055em}.logo-rollo{font-size:24px;letter-spacing:-.04em}.logo-fugen{font-size:23px;letter-spacing:.03em}.logo-boviq{font-size:31px;font-family:var(--serif);font-weight:400;letter-spacing:-.05em}.collage{position:absolute;inset:20px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));column-gap:20px;row-gap:46px;align-items:center;justify-items:center;z-index:1}.tile,.tile-anchor{grid-column:var(--col);grid-row:var(--row);width:100%;max-width:min(9.5vw,13.8svh);aspect-ratio:1;border-radius:20px;overflow:hidden}.js .tile{transform:scale(.35);opacity:0;will-change:transform,opacity}.tile img{width:100%;height:100%;object-fit:cover}.tile-anchor{visibility:hidden}.collage-heading{position:absolute;z-index:1;top:50%;left:20px;right:20px;text-align:center;will-change:transform,opacity}.js .collage-heading{transform:translateY(calc(-50% + 70px));opacity:0}.collage-heading h2{font-size:clamp(28px,3.05vw,52px);line-height:1.125;letter-spacing:-.020em}.mobile-break{display:none}.desktop-break{display:inline}
.projects{overflow:hidden;padding-top:85px;padding-bottom:110px}.carousel-toolbar{display:flex;align-items:center;justify-content:space-between;margin:36px 0 65px}.carousel-controls{display:flex;gap:14px}.arrow-button{display:grid;place-items:center;width:34px;height:40px;transition:transform .3s var(--ease)}.arrow-button:hover:not(:disabled){transform:scale(1.15)}.arrow-button svg{width:28px;height:28px}.project-carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 20px;margin:0 calc(-1 * var(--page-pad));scroll-padding-left:20px}.project-carousel::-webkit-scrollbar{display:none}.project-card{flex:0 0 calc(33.333vw - 20px);min-width:320px;min-height:540px;scroll-snap-align:start;position:relative;background:#f6f6f5;display:flex;flex-direction:column;overflow:hidden}.project-media{flex:1;min-height:350px;display:flex;align-items:center;overflow:hidden;padding:44px 20px 18px}.project-media img{width:100%;height:auto;max-height:370px;object-fit:cover;object-position:top;border-radius:5px;box-shadow:0 10px 35px #0002;transform:perspective(1100px) rotateY(-5deg) rotateX(2deg);transition:transform .75s var(--ease),box-shadow .75s var(--ease)}.project-media-blue{background:#eef3f7}.project-media-grey{background:#f0f0ed}.project-media-sand{background:#f3f1eb}.project-media-green{background:#e8eeeb}.project-card:hover .project-media img{transform:perspective(1100px) rotateY(0) rotateX(0) scale(1.04);box-shadow:0 15px 40px #0003}.project-card-copy{padding:22px 20px 25px;background:inherit}.project-card-copy h3{display:flex;justify-content:space-between;align-items:center;font-size:18px;line-height:1.4;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}.project-card-copy h3>span{font-size:24px;text-decoration:none;transition:transform .4s var(--ease)}.project-card:hover h3>span{transform:translate(3px,-3px)}.project-card-copy p{margin-top:16px;font-size:16px;line-height:1.45}.project-category{display:block;color:var(--grey);font-size:14px;margin-top:12px}
.services{display:grid;grid-template-columns:45% 55%;min-height:calc(100svh - var(--nav-height));scroll-margin-top:72px}.services-copy{padding:80px clamp(32px,5.2vw,100px) 80px var(--page-pad)}.services-copy h2{max-width:660px;margin-bottom:54px}.service-accordion{width:100%;max-width:660px}.service-item{border-bottom:1px solid var(--line)}.service-item:last-child{border-bottom:0}.service-item h3 button{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;text-align:left;padding:22px 0;font-size:16px;font-weight:500;line-height:1.3}.plus{width:15px;height:15px;position:relative;display:block;flex-shrink:0}.plus:before,.plus:after{content:"";position:absolute;top:6px;left:0;width:15px;height:2px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}.plus:after{transform:rotate(90deg)}[aria-expanded=true]>.plus:after,details[open] .plus:after{transform:rotate(0);opacity:0}.service-item.is-active .plus{color:#8b8b8b}.service-body{display:grid;transition:grid-template-rows .5s var(--ease),opacity .35s}.js .service-body{grid-template-rows:0fr;opacity:0}.service-body>div{overflow:hidden;min-height:0}.service-body p{margin:10px 0 18px}.service-body .text-link{margin-bottom:28px}.service-item.is-active .service-body{grid-template-rows:1fr;opacity:1}.service-visuals{position:relative;min-height:calc(100svh - var(--nav-height));overflow:hidden;background:#d8e0d9}.service-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7%;overflow:hidden;opacity:0;visibility:hidden;transform:scale(1.035);transition:opacity .65s var(--ease),transform .8s var(--ease),visibility .65s}.service-visual.is-active{opacity:1;visibility:visible;transform:scale(1);z-index:1}.visual-bg{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:blur(8px) brightness(.78);transform:scale(1.08)}.visual-bg-clear{inset:0;width:100%;height:100%;filter:brightness(.8);transform:none}.screen-frame{position:relative;z-index:1;width:100%;max-width:720px;border:8px solid #fff;border-radius:14px;background:#fff;box-shadow:0 15px 50px #0002;overflow:hidden}.screen-frame>img{width:100%;aspect-ratio:1.4;object-fit:cover;object-position:top}.screen-top{height:27px;background:#fff;display:flex;gap:5px;align-items:center;position:relative;padding:0 6px 6px}.screen-top>span{width:6px;height:6px;border-radius:50%;background:#d7d7d7}.screen-top small{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;color:#777}.visual-caption{position:absolute;bottom:26px;left:32px;right:32px;color:#fff;z-index:1;font-size:14px;line-height:1.4}/* Klammer-Nachsatz in einer reveal-title-Ueberschrift: kleiner und grau.
   Bei voller Groesse brauchte "(Und darueber hinaus)" mehr als die Spaltenbreite und
   riss "hinaus)" als Waise auf eine eigene Zeile. */
.titel-klammer{font-size:.62em;color:var(--grey)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.benefit-visual{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6% 7%;opacity:0;visibility:hidden;z-index:0;transition:opacity .6s var(--ease),visibility .6s}.benefit-diagram[data-active="zeit"] [data-visual="zeit"],.benefit-diagram[data-active="fehler"] [data-visual="fehler"],.benefit-diagram[data-active="einheit"] [data-visual="einheit"],.benefit-diagram[data-active="erreichbar"] [data-visual="erreichbar"],.benefit-diagram[data-active="anfragen"] [data-visual="anfragen"]{opacity:1;visibility:visible;z-index:1}[data-visual="zeit"]{background:#5b4632}[data-visual="fehler"]{background:#3d4c58}[data-visual="einheit"]{background:#4c6350}[data-visual="erreichbar"]{background:#12181f}[data-visual="anfragen"]{background:#565f63}.bv-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bv-scrim{position:absolute;inset:0}[data-visual="zeit"] .bv-scrim{background:linear-gradient(180deg,#0000 0%,#00000059 100%)}[data-visual="fehler"] .bv-scrim{background:linear-gradient(180deg,#0000 0%,#00000059 100%)}[data-visual="einheit"] .bv-scrim{background:#0000001a}[data-visual="erreichbar"] .bv-scrim{background:#00000026}[data-visual="anfragen"] .bv-scrim{background:linear-gradient(180deg,#0000 0%,#0000005c 100%)}.bv-card{position:relative;z-index:1;width:100%;max-width:430px;margin:0 auto;background:#fff;border-radius:16px;padding:26px 26px 22px;box-shadow:0 20px 50px #00000026}.bv-card--phone{max-width:300px}.bv-card--diagramm{max-width:400px;padding:20px 18px 16px;border:1px solid #ffffffb3;box-shadow:0 22px 55px #0000003d}.bv-card--diagramm .bd-svg{max-width:100%}.bv-card-title{font-size:15px;font-weight:500;color:var(--grey);margin-bottom:16px}.bv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.bv-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;background:#f4f4f2;border-radius:9px;font-size:15px}.bv-list--check li{justify-content:flex-start}.bv-chip{flex-shrink:0;font-size:12px;font-weight:500;color:var(--grey);background:#fff;border-radius:20px;padding:5px 11px;white-space:nowrap}.bv-check{flex-shrink:0;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:var(--blue);color:#fff;font-size:12px}.bv-status{margin-top:16px;font-size:14px;font-weight:500;color:var(--ink)}.bv-field{padding:13px 15px;border:1px solid var(--line);border-radius:9px;font-size:14px;color:var(--grey);margin-bottom:10px}.bv-btn{display:block;text-align:center;background:var(--blue);color:#fff;font-size:14px;font-weight:500;border-radius:50px;padding:12px;margin-top:4px}.bv-note{margin-top:14px;font-size:13px;color:var(--grey);line-height:1.4}.bv-footer{margin-top:16px;font-size:13px;color:var(--grey)}.bd-svg{width:100%;max-width:560px;height:auto;max-height:100%}.bd-svg text{font-family:var(--sans);font-size:18px;font-weight:500;fill:var(--ink)}.bd-chaos rect{fill:#fff;stroke:#b2bfb4;stroke-width:1.5}.bd-chaos text{font-size:17px;font-weight:400;fill:#5c6a5e}.bd-flow path{fill:none;stroke:#9aa89c;stroke-width:1.5;stroke-dasharray:5 4}.bd-order rect{fill:var(--blue);stroke:var(--blue);stroke-width:3}.bd-fokus{fill:none;stroke:var(--blue);stroke-width:2;opacity:0}.bd-order text{fill:#fff;font-size:19px}.bd-pfeil,.bd-traeger path,.bd-traeger-ki{fill:none;stroke:var(--ink);stroke-opacity:.32;stroke-width:2}.bd-basis rect{fill:var(--ink);stroke:var(--ink);stroke-width:3}.bd-basis text{fill:#fff;font-size:19px}.bd-block rect{fill:#fff;stroke:var(--ink);stroke-opacity:.22;stroke-width:1.5}.bd-block text{font-size:17px}.bd-ki rect{fill:#fff;stroke:var(--blue);stroke-opacity:1;stroke-width:2;stroke-dasharray:7 5}.bd-ki text{fill:var(--blue);font-size:20px}.benefit-diagram .visual-caption{position:static;left:auto;right:auto;bottom:auto;color:var(--ink);font-size:15px;font-weight:500;text-align:center;max-width:36ch;margin:14px auto 0}.bd-svg rect{transition:stroke .35s var(--ease),stroke-width .35s var(--ease),opacity .35s var(--ease)}.bd-flow path{transition:stroke .35s var(--ease),stroke-opacity .35s var(--ease),stroke-width .35s var(--ease),stroke-dasharray .35s var(--ease)}.bd-svg text{transition:fill .35s var(--ease)}.benefit-diagram[data-active="zeit"] .d-auto rect,.benefit-diagram[data-active="einheit"] .d-base rect,.benefit-diagram[data-active="erreichbar"] .d-web rect,.benefit-diagram[data-active="anfragen"] .d-crm rect{stroke:var(--blue);stroke-opacity:1;stroke-width:3.5}.benefit-diagram[data-active="fehler"] .bd-flow path{stroke:var(--blue);stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none}.benefit-diagram[data-active="fehler"] .bd-fokus{opacity:.5}.benefit-diagram[data-active="zeit"] .d-auto text,.benefit-diagram[data-active="erreichbar"] .d-web text,.benefit-diagram[data-active="anfragen"] .d-crm text{fill:var(--blue)}.visual-brand{background:#e9e8dc}.brand-board{width:100%;max-height:85%;object-fit:contain;box-shadow:0 12px 45px #0001}.visual-config{background:#efeee9}.visual-crm{background:#e0edfb}.visual-brand .visual-caption,.visual-config .visual-caption,.visual-crm .visual-caption{color:#484848}
.industries{padding-top:110px;padding-bottom:110px}.industries .section-intro{margin-bottom:72px}.industry-panels{display:flex;gap:20px;margin:0 calc(20px - var(--page-pad));height:62svh;min-height:530px;max-height:760px}.industry-panel{flex:1;position:relative;overflow:hidden;min-width:0;transition:flex .55s var(--ease);isolation:isolate;background:#222}.industry-panel.is-active{flex:2}.industry-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .6s;filter:brightness(.65)}.industry-panel.is-active>img{transform:scale(1.035);filter:brightness(.85)}.industry-panel:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 20%,#0001 48%,#0009 100%);pointer-events:none}.industry-toggle{position:absolute;inset:0;z-index:2;width:100%;text-align:left;color:#fff;padding:30px;display:flex;align-items:center;font-family:var(--serif);font-size:clamp(26px,2.7vw,42px);letter-spacing:0;line-height:1.12}.industry-toggle>span:first-child{transition:opacity .25s,transform .5s var(--ease)}.industry-panel.is-active .industry-toggle>span:first-child{opacity:0;transform:translateY(-15px)}.industry-open{position:absolute;right:23px;top:23px;font-family:var(--sans);font-weight:400;font-size:27px;line-height:1;transition:transform .4s var(--ease)}.industry-panel.is-active .industry-open{transform:rotate(45deg)}.industry-detail{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:30px;color:#fff;opacity:0;transform:translateY(25px);pointer-events:none;transition:transform .5s var(--ease),opacity .25s;min-width:min(460px,100%)}.industry-detail:before{content:"";position:absolute;left:0;right:0;top:-80px;bottom:0;backdrop-filter:blur(10px);mask-image:linear-gradient(transparent,#000 50%);z-index:-1}.industry-detail h3{font-family:var(--serif);font-size:clamp(30px,3vw,46px);font-weight:400;line-height:1.06;letter-spacing:-.035em;padding-top:24px;border-top:1px solid #fff9}.industry-detail p{margin-top:16px;max-width:420px;font-size:16px}.industry-detail .text-link{margin-top:20px}.industry-panel.is-active .industry-detail{opacity:1;transform:translateY(0);pointer-events:auto;transition-delay:.2s}.industry-detail .text-link:hover{color:#fff}
.partnership{position:relative;isolation:isolate;display:block;background:#000;color:#fff}.partnership-bild{position:absolute;inset:0;z-index:0;overflow:hidden}.partnership-bild img{width:100%;height:100%;object-fit:cover;object-position:94% center;display:block}.partnership-bild:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#00000059 68%,#0000008c 86%,#000 100%),linear-gradient(90deg,#000000bf 0%,#000000a3 30%,#00000054 55%,#00000012 76%,#0000 88%)}.partnership-copy{position:relative;z-index:1;max-width:min(52%,760px);padding:66px var(--page-pad) 78px var(--page-pad)}.partnership .eyebrow{color:#cfcfcf}.partnership-copy p:not(.eyebrow){color:#bcbcbc}.partnership .titel-klammer{color:#bcbcbc}.partnership .text-link:hover{color:#fff}.partnership-copy h2{font-size:clamp(40px,3.6vw,64px);margin-bottom:27px;max-width:8em}.partnership-copy p:not(.eyebrow){max-width:34em}.partnership-copy p:not(.eyebrow){margin-bottom:20px}.partnership-copy .text-link{margin-top:14px}
.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}.process-card{display:flex;flex-direction:column;align-items:flex-start;}.process-card h3{font-size:24px;line-height:1.2;letter-spacing:-.025em;}.process-card .text-link,.process-note{font-size:14px;line-height:1.5}
.faq{display:grid;grid-template-columns:1fr 1.55fr;gap:80px;}.faq>h2{padding-top:20px}.faq-list details{border-bottom:1px solid var(--line)}.faq-list details:first-child{border-top:1px solid var(--line)}.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:18px;font-weight:500;line-height:1.4;padding:27px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list p{padding:0 45px 28px 0;max-width:730px}.faq-list details[open] p{animation:faq-in .45s var(--ease)}
.closing{text-align:center;padding:105px 24px 115px;overflow:hidden}.closing h2{line-height:.98;letter-spacing:-.040em}.closing .eyebrow{margin-bottom:30px}.closing>p:not(.eyebrow){font-size:18px;margin-top:28px}.closing-actions{display:flex;gap:16px;justify-content:center;margin:30px 0 25px}.closing-mail{font-size:14px;text-decoration:underline;text-underline-offset:4px}.footer{padding:70px var(--page-pad) 28px;}.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:55px;padding-bottom:70px}.footer-brand .wordmark svg{width:170px;height:auto;display:block}.footer-brand p{margin-top:26px;font-size:16px;line-height:1.4}.footer-brand p.address{margin-top:27px;font-size:14px;}.footer-main h3{font-size:16px;font-weight:500;margin-bottom:22px}.footer-main>div>a:not(.wordmark){display:table;font-size:14px;line-height:1.5;margin-bottom:14px}.footer-main a:hover{color:var(--blue)}.footer-main .text-link{margin-top:23px}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:24px;border-top:1px solid #ddd;font-size:12px;line-height:1.5}.footer-bottom>div{display:flex;gap:24px}
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform 1s var(--ease)}.js .reveal.is-visible{opacity:1;transform:none}.reveal-title .word-wrap{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.15em;margin-bottom:-.15em}.reveal-title .word{display:inline-block;transition:transform .95s var(--ease),opacity .7s;transition-delay:calc(var(--word-i,0)*35ms)}.js .reveal-title .word{transform:translateY(120%);opacity:.2}.reveal-title.is-visible .word{transform:translateY(0);opacity:1}.js .reveal-media{clip-path:inset(10%);transition:clip-path 1.2s var(--ease)}.js .reveal-media>img{transform:scale(1.1);transition:transform 1.6s var(--ease)}.js .reveal-media.is-visible{clip-path:inset(0)}.js .reveal-media.is-visible>img{transform:scale(1)}.process-card:nth-child(2){transition-delay:80ms}.process-card:nth-child(3){transition-delay:160ms}
.process{background:#000;color:#fff;padding-top:130px;padding-bottom:80px}.process .eyebrow{color:#969696}.process .section-intro-center{text-align:left;margin:0;max-width:none}.process .section-description{margin-left:0;max-width:750px}.process-grid{margin-top:95px;gap:0}.process-card{border-left:1px solid #adadad;background:transparent;border-radius:0;padding:0 30px;min-height:380px}.process-card h3{order:0;margin:0 0 16px}.process-card p{order:1;padding-bottom:28px;border-bottom:1px solid #777;width:100%;margin-bottom:35px;max-width:none;color:#a6a6a6;min-height:110px}.step-number{order:2;font-family:var(--serif);font-size:64px;line-height:1;color:#fff;letter-spacing:0;margin-bottom:30px}.process-card .text-link,.process-note{order:3;margin-top:auto;color:#fff}.process-note{color:#a6a6a6}.process-card .text-link:hover{color:#fff}.faq{background:#000;color:#fff;padding-top:80px;padding-bottom:70px}.faq-list details,.faq-list details:first-child{border-color:#3b3b3b}.faq-list p{color:#b0b0b0}.closing{background:#000;color:#fff;padding-top:120px;padding-bottom:140px}.closing .eyebrow{color:#a6a6a6}.closing h2{font-size:clamp(70px,6vw,100px)}.closing-actions>.button-blue{background:#fff;color:var(--blue)}.closing-actions>.button-blue:hover{background:#eaf2ff}.closing-actions>.button-outline{background:var(--blue);color:#fff}.closing-actions>.button-outline:hover{background:#0056cf}.closing-mail{color:#adadad}.footer{background:#000;color:#fff;border-top:1px solid #262626}.footer-brand p.address{color:#a6a6a6}.footer-main>div>a:not(.wordmark){color:#adadad}.footer-main>div>a:hover{color:#fff}.footer-bottom{border-color:#383838;color:#adadad}
@keyframes hero-text-in{from{transform:translateY(115%);opacity:.2}to{transform:translateY(0);opacity:1}}@keyframes hero-photo-in{from{transform:scale(1.08);filter:brightness(.65)}to{transform:scale(1);filter:brightness(1)}}@keyframes marquee{to{transform:translateX(-33.333333%)}}@keyframes fade-in{from{opacity:0}to{opacity:1}}@keyframes header-in{from{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes menu-in{from{opacity:0;transform:translateY(-15px);clip-path:inset(0 0 100%)}to{opacity:1;transform:none;clip-path:inset(0)}}@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1800px){.collage{max-width:1800px;margin:auto}.site-header{padding-left:45px;padding-right:45px}.project-card{flex-basis:31vw;max-width:650px}.project-media{min-height:430px}.services-copy{padding-top:100px}.services-copy h2{max-width:660px}.service-accordion{max-width:660px}}
@media(max-width:1200px){.site-header{padding:0 24px;gap:20px}.wordmark svg{width:124px}.desktop-nav{font-size:16px;gap:18px}.header-actions{gap:18px;font-size:16px}.header-actions .phone-link{display:none}.services{grid-template-columns:43% 57%}.services-copy{padding-right:38px}.service-visuals,.project-card{flex-basis:39vw}.project-media{min-height:320px}.footer-main{gap:30px}}
@media(max-width:1000px){.desktop-nav,.login-link{display:none}.mobile-toggle{display:flex;width:28px;height:28px;flex-direction:column;justify-content:center;gap:6px;padding:2px}.mobile-toggle span{height:2px;width:24px;background:currentColor;transition:transform .3s var(--ease)}.mobile-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.mobile-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.hero-copy h1{font-size:clamp(38px,5.3vw,64px)}.hero-copy{padding-bottom:110px}.hero-actions{margin-top:36px}.collage{width:145%;left:50%;right:auto;transform:translateX(-50%);column-gap:22px;row-gap:32px}.tile,.tile-anchor{max-width:min(14vw,13.5svh)}.collage-heading{left:8%;right:8%}.collage-heading h2{font-size:36px}.mobile-break{display:inline}.desktop-break{display:none}.section-pad{padding-top:75px;padding-bottom:75px}.services-copy{padding:55px 30px}.services-copy h2{font-size:34px;margin-bottom:28px}.service-visuals,.service-item h3 button{padding:20px 0}.industry-panels{min-height:520px;gap:14px}.industry-toggle{padding:20px;font-size:30px}.industry-detail{padding:24px}.industry-detail h3{font-size:34px}.industry-detail p{font-size:15px}.partnership-copy{max-width:min(60%,700px)}.partnership-copy{padding:56px var(--page-pad) 66px var(--page-pad)}.partnership-copy h2{font-size:39px}.process-card{padding:28px 22px}.process-card h3{font-size:22px}.faq{gap:35px;grid-template-columns:.75fr 1.25fr}.faq-list summary{font-size:16px}.footer-main{grid-template-columns:1.3fr 1fr 1fr}.footer-main>div:last-child{grid-column:2/4}.footer-bottom>span:nth-child(2){display:none}}
@media(max-width:700px){:root{--page-pad:24px;scroll-padding-top:85px}.site-header{padding:0 20px;height:68px;gap:16px}.site-header .wordmark svg{width:120px}.header-actions{gap:19px}.header-cta{min-height:39px;font-size:13px;padding:11px 16px}.site-header.is-compact .wordmark svg{width:111px}.mobile-nav{top:68px;max-height:calc(100svh - 68px)}.menu-backdrop{top:68px}.hero{height:165svh}.hero-sticky{height:100svh;min-height:620px}.hero-image{object-position:56% center}.hero-copy{padding:110px 21px 145px;justify-content:center}.hero-copy h1{font-size:clamp(29px,7.4vw,44px);line-height:1.06;letter-spacing:-.030em}.hero-line:first-child{max-width:none}.hero-line:nth-child(2){max-width:none}.hero-actions{margin-top:31px;flex-direction:column;align-items:center;gap:12px}.hero-actions .button{font-size:14px;min-height:44px;padding-left:21px;padding-right:21px}.client-marquee{bottom:43px}.marquee-track{gap:45px;animation-duration:28s,1.2s}.client-logo{font-size:23px;min-width:150px}.logo-boviq{font-size:28px}.collage{width:216%;inset:24px auto;left:50%;column-gap:20px;row-gap:30px}.tile,.tile-anchor{max-width:min(21vw,13.5svh);border-radius:13px}.collage-heading{left:20px;right:20px}.collage-heading h2{font-size:clamp(29px,7.3vw,37px);line-height:1.08}.section-pad{padding:60px 24px}.eyebrow{font-size:12px;margin-bottom:18px}h2{font-size:36px;line-height:1.1}.section-description{font-size:16px;margin-top:22px}.section-description br{display:none}.carousel-toolbar{margin:30px 0 32px}.projects{padding-bottom:70px}.project-carousel{padding:0 20px;gap:14px;scroll-padding-left:20px}.project-card{flex-basis:82vw;min-width:0;min-height:465px}.project-media{min-height:280px;padding:30px 18px 18px}.project-media img{max-height:330px}.project-card-copy{padding:20px}.project-card-copy h3{font-size:18px}.project-card-copy p{font-size:15px}.project-category{font-size:13px}.services{display:flex;flex-direction:column;min-height:0}.services-copy{padding:50px 24px}.services-copy h2{font-size:36px;max-width:450px;margin-bottom:35px}.service-accordion{max-width:none}.service-item h3 button{font-size:16px;padding:21px 0}.service-body p{margin-top:4px}.service-visuals{min-height:520px;aspect-ratio:auto;max-height:none}.bv-card{max-width:88vw;padding:20px 18px 18px;border-radius:13px}.bv-card--phone{max-width:78vw}.bv-card--diagramm{max-width:90vw;padding:16px 14px 14px}.bv-card-title{font-size:14px;margin-bottom:12px}.bv-list li{padding:9px 12px;font-size:14px}.benefit-diagram .visual-caption{font-size:13px;margin-top:10px}.bd-chaos text{font-size:19px}.bd-order text,.bd-basis text{font-size:21px}.bd-block text{font-size:19px}.bd-ki text{font-size:22px}.service-visual{padding:8%}.visual-caption{left:24px;bottom:21px;font-size:13px}.screen-frame{border-width:6px;border-radius:9px}.screen-frame>img{aspect-ratio:1.25}.industries .section-intro{margin-bottom:40px}.industry-panels{height:auto;max-height:none;min-height:0;display:flex;flex-direction:column;margin:0 -4px;gap:12px}.industry-panel{flex:none;height:110px;transition:height .55s var(--ease)}.industry-panel.is-active{flex:none;height:510px}.industry-toggle{font-size:30px;align-items:center;padding:24px}.industry-toggle br{display:none}.industry-toggle>span:first-child{max-width:75%}.industry-panel>img{object-position:center 45%}.industry-detail{padding:24px}.industry-detail h3{font-size:35px}.industry-detail p{font-size:16px;max-width:420px}.industry-open{top:25px;right:25px}.partnership-copy h2{font-size:42px}.process{padding-top:45px}.section-intro-center{text-align:left}.section-intro-center .section-description{margin-left:0}.process-grid{grid-template-columns:1fr;gap:16px;margin-top:36px}.process-card{padding:27px;min-height:270px}.process-card h3{margin:24px 0 16px;font-size:25px}.process-card p{max-width:none;margin-bottom:26px}.process-card .text-link,.process-note{font-size:14px}.faq{display:block;padding-top:30px;padding-bottom:65px}.faq>h2{margin-bottom:35px}.faq-list summary{font-size:16px;padding:23px 0;gap:25px}.faq-list p{padding-right:16px;font-size:16px}.closing{padding:80px 24px 90px}.closing h2{font-size:clamp(62px,14vw,86px)}.closing .eyebrow{font-size:12px}.closing>p:not(.eyebrow){font-size:16px}.closing-actions{flex-direction:column;align-items:center;gap:12px}.closing-actions .button{font-size:15px}.footer{padding:55px 24px 24px}.footer-main{grid-template-columns:1fr 1fr;gap:36px 20px;padding-bottom:40px}.footer-brand{grid-column:1/-1;margin-bottom:12px}.footer-brand p{margin-top:20px}.footer-brand p.address{margin-top:18px}.footer-main>div:last-child{grid-column:1/-1}.footer-main h3{font-size:16px;margin-bottom:18px}.footer-main>div>a:not(.wordmark){font-size:14px;margin-bottom:13px}.footer-bottom{align-items:flex-start;font-size:12px;gap:14px}.footer-bottom>div{gap:17px}.js .reveal-media{clip-path:inset(5%)}.js .reveal-media.is-visible{clip-path:inset(0)}}
@media(max-width:365px){.header-cta{display:none}.hero-copy h1{font-size:27px}.site-header .wordmark svg{width:117px}.hero-copy{padding-left:16px;padding-right:16px}.hero-sticky{min-height:610px}.collage-heading h2{font-size:28px}.industry-panel.is-active{height:540px}.footer-bottom{flex-direction:column}}
/* Bis 1300px liegt die Grafik NICHT hinter dem Text, sondern als eigenstaendiges Band
   oben im Originalverhaeltnis 1600:573. Ein cover-Zuschnitt in ein hochformatiges
   Feld wuerde bis zu ~73% der Bildbreite wegschneiden und den Zielpunkt hinter den Text
   schieben — Lesbarkeit geht vor. Darunter laeuft das Band weich in die Textflaeche. */
@media(max-width:1300px){.partnership{display:block;margin:0}.partnership-bild{position:relative;inset:auto;aspect-ratio:1600/573}.partnership-bild img{object-position:center}.partnership-bild:after{background:linear-gradient(180deg,#0000 42%,#00000080 76%,#000 100%)}.partnership-copy{max-width:none;padding:30px var(--page-pad) 66px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero{height:auto}.hero-sticky{position:relative;min-height:760px}.hero-visual{inset:0!important;transform:none!important;width:100%!important;height:100%!important;border-radius:0!important}.hero-copy,.client-marquee{opacity:1!important;transform:none!important}.hero-shade{opacity:1!important}.collage,.collage-heading{display:none}.js .reveal{opacity:1;transform:none}.js .reveal-title .word{transform:none;opacity:1}.js .reveal-media{clip-path:none}.js .reveal-media>img{transform:none}.hero-line>span,.hero-actions{opacity:1;transform:none}.marquee-track{transform:translateX(-100px)}.project-media img{transform:none}.service-visual{transform:none}}

/* ===========================================================================
   LEISTUNGSSEITEN — 15.09.2026

   Die Startseite beginnt mit einem bildschirmfuellenden Hero, dessen
   Scroll-Animation an .hero/.hero-sticky/.tile-anchor haengt. Unterseiten
   haben das nicht und brauchen einen ruhigen Seitenkopf. Das sind die
   einzigen Bausteine, die hier dazukommen — alles Weitere (eyebrow,
   section-pad, section-intro, faq-list, process, closing, button) ist das
   bestehende System der Startseite, unveraendert.

   home.js traegt dafuer einen Riegel: ohne .hero bleibt der Kopf durchgehend
   kompakt, und die reveal-Logik laeuft trotzdem.
   =========================================================================== */

.page-head {
  padding: calc(var(--nav-height) + 86px) var(--page-pad) 72px;
  background: var(--surface, #f7f6f5);
  border-bottom: 1px solid var(--line);
}
.page-head .eyebrow { margin-bottom: 26px; }
.page-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 1.04;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.page-head .page-head-intro {
  max-width: 54ch;
  margin-top: 26px;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--grey);
}
.page-head .page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* Dreierraster fuer Leistungsbausteine. Bewusst ohne Bild: die Karten
   tragen Text, nicht Dekoration — Bilder waeren hier Platzhalter. */
.leistung-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 54px;
}
.leistung-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 30px 34px;
  background: #fff;
}
.leistung-card h3 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 14px;
}
.leistung-card p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey);
  margin: 0;
}
.leistung-note {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
  max-width: 78ch;
}

@media (max-width: 1000px) {
  .leistung-grid { grid-template-columns: 1fr; gap: 18px; }
  .page-head { padding-top: calc(var(--nav-height) + 54px); padding-bottom: 54px; }
}

/* Outline-Knopf im Seitenkopf: das Markenblau #006aff erreicht auf der
   hellgrauen Flaeche nur 4,32:1 (gemessen 15.09.2026 auf /werbetechnik),
   noetig sind 4,5. Hier das dunklere Blau, das home.css ohnehin als
   Hover-Farbe fuehrt — die Marke bleibt, der Text wird lesbar. */
.page-head .button-outline { color: #0056cf; border-color: #0056cf; }

/* ---------------------------------------------------------------------------
   Navigation bleibt im kompakten Kopf sichtbar — 15.09.2026

   Bis hierher blendete `.site-header.is-compact .desktop-nav {display:none}`
   die Navigation aus, sobald der Kopf kompakt wird, und zeigte stattdessen
   `.compact-cta` ("Vorteile ansehen"). Das stammt aus der Zeit, als dedista.de
   eine einzige Seite war: weiter unten gab es nichts mehr zu navigieren.

   Seit es Unterseiten gibt, ist das falsch — Artur, 15.09.2026: das Menü muss
   auch weiter unten erreichbar bleiben. Auf den Leistungsseiten ist der Kopf
   sogar DURCHGEHEND kompakt, dort fehlte die Navigation also immer.

   Die Navigation kehrt zurueck, `.compact-cta` entfaellt dafuer: sie war nur
   ihr Platzhalter, und beides nebeneinander macht den schmalen Kopf voll.
   Unter 1000px bleibt es beim Mobilmenue — diese Regel fasst das nicht an.

   Nachtrag 16.09.2026: `.compact-cta` ist jetzt auch aus partials/header.html
   raus. Die beiden Regeln, die sie nur noch versteckten, sind damit
   gegenstandslos und entfernt.
   --------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  .site-header.is-compact .desktop-nav { display: flex; }
}

/* Wortmarke: SVG beschneidet standardmaessig an der viewBox (overflow:hidden).
   Der Zeicheninhalt endet bei 124,49, die viewBox bei 124,45 — 0,04 Einheiten
   Ueberstand. Bei 19 % Skalierung sind das 0,008 px, die beim Runden auf ganze
   Pixel die unterste Reihe kosten koennen: das Logo wirkt unten angeschnitten
   (Befund Artur, 15.09.2026). Die viewBox im Baustein hat jetzt eine Einheit
   Luft; dieser Riegel faengt den Rest ab. */
.wordmark svg { overflow: visible; }

/* ---------------------------------------------------------------------------
   Projektkarten: Bild vollflaechig, ohne Bewegung — 15.09.2026

   Artur: die Karten sollen vollflaechig in der Maske sitzen, ohne Bewegung.
   Bis hierher schwebte das Bild mit 44px Innenabstand auf einer Farbflaeche,
   war um 5 Grad gekippt (perspective/rotateY) und fuhr beim Ueberfahren
   heran (scale 1.04). Das passte zu Screenshots, nicht zu fertigen
   Fallstudien-Boards, die selbst schon ein Bildmotiv mitbringen.

   Maske ist 1,30:1, die Boards sind 1,50:1 — beim Fuellen fallen also rund
   14 % seitlich weg, je 7 % links und rechts. Die Boards tragen ihren Titel
   oben links mit Rand, der bleibt damit stehen.
   --------------------------------------------------------------------------- */
.project-media { padding: 0; }

.project-media img,
.project-card:hover .project-media img,
.project-card:focus-within .project-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  /* Links ausgerichtet, NICHT zentriert: die Boards tragen ihren Titel oben
     links ("Löschbot", "TOTAL FUGEN"). Bei zentriertem Ausschnitt fielen die
     ersten Buchstaben weg — auf dem Bildschirm nachgeprueft. Die 14 %, die
     das Format kostet, gehen jetzt rechts ab, wo nur das Kontextfoto steht. */
  object-position: left center;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
  scale: 1;
}

/* ---------------------------------------------------------------------------
   Projektkarten nach dem Square-Vorbild — 15.09.2026

   Leitreferenz von Artur: der Hardware-Abschnitt auf squareup.com. Dort sitzt
   das Bild randlos oben, darunter steht der Text auf weissem Grund und
   FLUCHTET mit dem Bildrand — keine graue Kartenflaeche, keine Einrueckung.

   Gemessen am Vorbild und hier umgesetzt:
   - Kartenflaeche ohne eigenen Hintergrund (war rgb(246,246,245))
   - Textblock ohne seitliches Padding: Titel beginnt exakt am linken Bildrand
   - Titel unterstrichen wie bei Square, Beschreibung darunter in Grau
   --------------------------------------------------------------------------- */
.project-card { background: transparent; }

.project-card-copy {
  padding: 20px 0 0;
}
.project-card-copy h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.project-card-copy p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--grey);
}
.project-card-copy .project-category {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .01em;
  color: var(--grey);
}

/* Die Farbflaechen hinter dem Bild sind ohne Innenabstand nicht mehr sichtbar
   und wuerden bei einem Bild mit Transparenz nur stoeren. */
.project-media-blue,
.project-media-grey,
.project-media-sand,
.project-media-green { background: none; }

/* ===========================================================================
   RECHTSTEXTE (impressum, datenschutz) — 16.09.2026

   Lange Fliesstexte brauchen eine schmalere Spalte als die Marketingseiten:
   66 Zeichen, weil laengere Zeilen beim Zurueckspringen Zeilen verlieren.
   Der Seitenkopf ist derselbe .page-head wie auf den Leistungsseiten, damit
   Rechtstexte nicht wie ein Fremdkoerper wirken — sie sind Teil der Seite.
   =========================================================================== */

.legal-body { padding-left: var(--page-pad); padding-right: var(--page-pad); }
.legal-prose { max-width: 66ch; }
.legal-prose h2 {
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.2;
  margin: 56px 0 16px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 34px 0 12px;
}
.legal-prose p,
.legal-prose ul,
.legal-prose address {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal-prose address { font-style: normal; }
.legal-prose ul { padding-left: 22px; }
.legal-prose li { margin-bottom: 6px; }
.legal-prose a { color: #0056cf; text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { text-decoration-thickness: 2px; }
.legal-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: #f2f2f0;
  padding: 1px 5px;
  border-radius: 4px;
}
/* Abgesetzter Kasten fuer den Hinweis, dass ein Abschnitt erst spaeter gilt.
   #595959 auf #f7f6f5 misst 6,4:1 — der graue Fliesstext waere hier zu leise
   fuer eine Aussage, die den halben Abschnitt relativiert. */
.legal-hinweis {
  background: #f7f6f5;
  border-left: 3px solid var(--blue);
  padding: 16px 18px;
  margin: 24px 0 28px !important;
  color: #3a3a3a !important;
}
.legal-aktion { margin: 20px 0 28px !important; }
.legal-stand { margin-top: 44px !important; color: var(--grey) !important; }

@media (max-width: 700px) {
  .legal-prose h2 { margin-top: 44px; }
}

/* ===========================================================================
   KONTAKT — Formulare, Meldungen, Ansprechpartner — 16.09.2026

   Beide Formulare senden an die PHP-Endpunkte unter /api/. Mit JavaScript als
   JSON, ohne JavaScript als normaler Form-POST; der Server antwortet dann mit
   einer 303 auf /danke bzw. /kontakt#fehler-… (api/_lib.php). Deshalb sind die
   Meldungskaesten unten :target-gesteuert und brauchen kein Skript.
   =========================================================================== */

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}
.kontakt-formulare { display: grid; gap: 56px; max-width: 620px; }

.formular { display: block; }
.formular h2 { font-size: clamp(28px, 2.4vw, 38px); margin: 0 0 14px; }
.formular-intro {
  max-width: 52ch;
  margin: 0 0 30px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey);
}
.feld { margin: 0 0 20px; }
.feld label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 7px;
}
.feld-optional { font-weight: 400; color: var(--grey); }
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;            /* unter 16px zoomt iOS beim Fokus in das Feld */
  line-height: 1.4;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.feld textarea { resize: vertical; min-height: 96px; }
.feld input:hover,
.feld select:hover,
.feld textarea:hover { border-color: #a8a8a8; }
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #006aff33;
}
/* :user-invalid statt :invalid — ein leeres Pflichtfeld ist technisch sofort
   "invalid", und die Felder standen dadurch rot da, bevor jemand sie ueberhaupt
   angesehen hatte. :user-invalid faerbt erst, nachdem der Besucher das Feld
   verlassen oder abgeschickt hat. Aeltere Browser kennen den Selektor nicht und
   ignorieren die Regel — dann fehlt nur die Einfaerbung, nichts Funktionales. */
.feld input:user-invalid,
.feld textarea:user-invalid { border-color: #c0392b; }
.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.formular .button { margin-top: 6px; }
.formular-recht {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--grey);
  max-width: 52ch;
}
.formular-recht a { color: #0056cf; text-decoration: underline; text-underline-offset: 2px; }

/* Honigtopf: aus dem Sichtfeld, nicht display:none — siehe Kommentar im HTML. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Meldungen: verborgen, bis die Adresszeile auf sie zeigt. */
.form-meldung { display: none; }
.form-meldung:target {
  display: block;
  margin-bottom: 34px;
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.55;
}
.form-meldung--fehler:target {
  background: #fdf0ee;
  border-left: 3px solid #c0392b;
  color: #5c1b13;            /* auf #fdf0ee gemessen deutlich ueber 4,5:1 */
}
.form-meldung a { color: #93261a; text-decoration: underline; text-underline-offset: 2px; }

.kontakt-person {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  background: #f7f6f5;
}
.kontakt-person img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin-bottom: 20px;
}
.kontakt-person-name { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 0 0 6px; }
.kontakt-person-rolle { font-size: 15px; line-height: 1.5; color: var(--grey); margin: 0 0 18px; }
.kontakt-person-daten { font-size: 16px; line-height: 1.7; margin: 0 0 18px; }
.kontakt-person-daten a { color: #0056cf; text-decoration: underline; text-underline-offset: 2px; }
.kontakt-person-adresse { font-size: 14px; line-height: 1.6; color: var(--grey); margin: 0; }

/* Schmaler Kopf fuer Seiten, die nur bestaetigen (danke, 404). */
.page-head--schmal { padding-bottom: 56px; }

@media (max-width: 1000px) {
  .kontakt-raster { grid-template-columns: 1fr; gap: 48px; }
  .kontakt-person { position: static; max-width: 420px; }
}
@media (max-width: 700px) {
  .feld-paar { grid-template-columns: 1fr; }
  .kontakt-formulare { gap: 48px; }
}

/* ===========================================================================
   NACHTRAEGE — 16.09.2026
   =========================================================================== */

/* Telefon im Kopf: auf dem Handy sichtbar lassen.
   Vorher war .phone-link unter 1200 px generell und im kompakten Kopf zusaetzlich
   ausgeblendet — genau dort, wo ein Anruf ein Fingertipp ist. Zwischen 1000 und
   1200 px bleibt es aus, weil dort die volle Navigation um denselben Platz
   konkurriert. */
@media (max-width: 1000px) {
  .header-actions .phone-link,
  .site-header.is-compact .phone-link { display: block; }
}

/* Druck und PDF: alles sichtbar.
   Die Einblend-Animationen setzen .reveal-Elemente auf opacity:0, bis der
   IntersectionObserver sie erreicht. Wer die Seite druckt oder als PDF
   speichert, scrollt nicht — die halbe Seite blieb leer. Diese Regeln nehmen
   die Startzustaende im Druck zurueck; home.js macht zusaetzlich beim
   beforeprint-Ereignis alles sichtbar, damit auch die Wort-Animation steht. */
@media print {
  .js .reveal,
  .js .reveal-title .word,
  .js .reveal-media,
  .js .reveal-media > img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .site-header, .mobile-nav, .menu-backdrop, .mega-menu { display: none !important; }
  .hero-sticky, .tile { opacity: 1 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* Karussell-Leiste ohne Textlink: "Alle Projekte ansehen" zeigte auf /projekte,
   und diese Seite gibt es seit dem 15.09.2026 nicht mehr (kommt in Welle 2
   zurueck, dann kehrt auch der Link zurueck). Uebrig bleiben die Pfeile —
   space-between wuerde sie nach links an den Rand schieben. */
.carousel-toolbar:not(:has(.text-link)) { justify-content: flex-end; }

/* ===========================================================================
   BAUSTEINE FÜR DIE UNTERSEITEN — 16.09.2026

   Herkunft: Codex' Layoutpaket vom 15.09.2026
   (Web/docs/codex-subpage-layouts-2026-09-15/). Dort lagen sie in einer
   eigenen Datei mit eigenem Namensraum (.dd-*, --dd-*). Übernommen ist die
   Struktur, NICHT das zweite System: die Farben, Schriften und Knöpfe waren
   ohnehin wertgleich, nur anders benannt. Ein zweites Stylesheet mit einer
   zweiten Token-Familie wäre genau die Lage gewesen, die der Rückbau am
   15.09.2026 beseitigt hat.

   Zwei Abweichungen habe ich bewusst NICHT übernommen, Entscheidung für
   Einheitlichkeit (Artur, 16.09.2026: „damit maximale Konsistenz erreicht
   wird"):
     · zweispaltiger Seitenkopf → .page-head bleibt einspaltig wie live
     · Seitenrand bis 112px    → --page-pad bleibt bei 80px
   =========================================================================== */

/* --- Farbrolle am Abschnitt ------------------------------------------------
   Nach dem Square-Muster (REFERENZ-SQUARE-2026-08-23.md): nicht die Seite ist
   hell oder dunkel, sondern der einzelne Abschnitt. Deshalb sitzen die beiden
   Klassen auf <section> und faerben, was darin liegt. */
.ist-dunkel { background: var(--ink); color: #fff; }
.ist-dunkel .eyebrow,
.ist-dunkel p { color: #b5b5b5; }
.ist-dunkel h2,
.ist-dunkel h3 { color: #fff; }
.ist-dunkel .leistung-card { border-color: #4c4c4c; }
.ist-hell { background: #f5f6f7; }

/* --- Sprungleiste innerhalb einer Seite ------------------------------------
   Klebt unter dem Kopf und zeigt, wo man auf dieser Seite ist. Der Versatz
   entspricht --nav-height, damit sie nicht unter dem Kopf verschwindet. */
.seitennav {
  position: sticky;
  top: var(--nav-height);
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding: 18px var(--page-pad);
  background: #fffffff2;
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--line);
}
.seitennav strong { font-size: 16px; font-weight: 500; }
.seitennav nav { display: flex; gap: 28px; font-size: 14px; }
.seitennav nav a { color: var(--grey); }
.seitennav nav a:hover { color: var(--ink); }

/* --- Hub-Liste: ein Bereich je Zeile ---------------------------------------
   Traegt den Leistungshub. Die Nummer links, der Name daneben, der Nutzen
   rechts — die dritte Spalte ist die, aus der die Wirkung kommt (Square). */
.hub-liste { border-top: 1px solid var(--line); }
.hub-zeile {
  display: grid;
  grid-template-columns: 65px 1fr 1fr 40px;
  align-items: start;
  gap: 25px;
  padding: 35px 0;
  border-bottom: 1px solid var(--line);
  transition: background .25s var(--ease);
}
.hub-zeile:hover { background: #fafafa; }
.hub-zeile > span { color: var(--grey); font-size: 14px; padding-top: 6px; }
.hub-zeile h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; margin: 0; }
.hub-zeile p { color: var(--grey); font-size: 16px; line-height: 1.55; margin: 0; }
.hub-zeile > b { font-weight: 400; font-size: 22px; text-align: right; transition: transform .25s var(--ease); }
.hub-zeile:hover > b { transform: translate(3px, -3px); }

/* --- Bildstreifen ----------------------------------------------------------
   Drei Bilder nebeneinander, ungleich breit. Zeigt Arbeit statt Dekoration. */
.bildstreifen {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  gap: 20px;
  padding: 0 var(--page-pad);
}
/* Zwei Bilder statt drei: sonst bliebe die dritte Spalte leer und der Streifen
   haenge schief. Gemessen am 16.09.2026 auf /projekte/rolloversand — mit dem
   Dreierraster stand rechts eine Luecke von einem Drittel der Breite.
   Die Regel steht in einer Medienabfrage, obwohl sie fuer den grossen
   Bildschirm gilt: ohne sie schlaegt ihre hoehere Spezifizitaet (:has) die
   Abfragen weiter unten, und auf dem Handy blieben zwei Spalten stehen, von
   denen eine leer ist — genau so gemessen, bevor die Abfrage darum kam. */
@media (min-width: 1001px) {
  .bildstreifen:has(figure:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
}
.bildstreifen figure { min-width: 0; margin: 0; position: relative; overflow: hidden; border-radius: 9px; background: #f0f1f2; aspect-ratio: 1.05; }
.bildstreifen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Unterschrift steht auf dem Bild — also muss der Verlauf den Kontrast
   allein tragen, unabhaengig davon, wie hell das Foto darunter ist.
   Gerechnet fuer den unguenstigsten Fall, ein reinweisses Bild:
     rgba(0,0,0,.55) → Untergrund rgb(115) → weisse Schrift 4,74:1
     rgba(0,0,0,.72) → Untergrund rgb(71)  → weisse Schrift 9,29:1
   Der alte Wert lag damit knapp ueber der Schwelle — aber nur an seinem
   dunkelsten Punkt ganz unten. Die Schrift sitzt darueber, wo der Verlauf
   schwaecher ist. Deshalb beides: kraeftiger UND den Vollton bei 62% statt
   erst am Rand. */
.bildstreifen figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 18px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(transparent, #000000b8 62%);
}

/* Bildschirmfoto statt Foto: heller Rahmen, damit die Aufnahme nicht wie ein
   angeschnittenes Bild wirkt. */
.bildstreifen .ist-bildschirm,
.wechsel .ist-bildschirm { background: #e7eef5; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); }
.bildstreifen .ist-bildschirm img,
.wechsel .ist-bildschirm img { height: auto; object-fit: contain; border: 8px solid #fff; border-radius: 9px; box-shadow: 0 16px 30px #0002; }

/* --- Wechsel aus Text und Bild --------------------------------------------- */
.wechsel { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; }
.wechsel > figure { margin: 0; overflow: hidden; border-radius: 8px; aspect-ratio: 1.05; background: #edf1f4; }
.wechsel > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wechsel--gedreht > figure { order: -1; }
.wechsel-text p { color: var(--grey); font-size: 17px; line-height: 1.6; margin-top: 20px; max-width: 46ch; }

/* --- Katalog: viele Verweise, wenig Platz ---------------------------------- */
.katalog { columns: 3; column-gap: 45px; }
/* Eintraege ohne Linkziel kommen als <span> — sie brauchen dieselbe Zeile,
   sonst faellt eine reine Aufzaehlung ohne Abstand und Trennlinie auseinander. */
.katalog a,
.katalog span { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); break-inside: avoid; font-size: 16px; }
.katalog a:hover { color: var(--blue); }
.katalog small { display: block; color: var(--grey); font-size: 13px; margin-top: 3px; }

/* --- Fließtext ohne Rechtstext-Anmutung ------------------------------------ */
.fliesstext { max-width: 62ch; }
.fliesstext p { font-size: 17px; line-height: 1.65; margin-top: 22px; }

@media (max-width: 1000px) {
  .hub-zeile { grid-template-columns: 44px 1fr 32px; gap: 16px; }
  .hub-zeile p { grid-column: 2 / -1; }
  .bildstreifen { grid-template-columns: 1fr 1fr; }
  .bildstreifen figure:last-child { display: none; }
  .wechsel { grid-template-columns: 1fr; gap: 34px; }
  .wechsel--gedreht > figure { order: 0; }
  .katalog { columns: 2; }
  .seitennav { gap: 18px; }
  .seitennav nav { gap: 18px; overflow-x: auto; }
  /* Ohne nowrap bricht jeder Eintrag in zwei Zeilen, statt seitlich zu
     scrollen — auf 375px gemessen. Der Seitentitel links wiederholt nur, was
     die Ueberschrift darueber schon sagt, und weicht dem Platz. */
  .seitennav nav a { white-space: nowrap; }
  /* Die Leiste laesst sich wischen, zeigte es aber nicht: am rechten Rand brach
     der letzte Eintrag mitten im Wort ab und sah nach Fehler aus statt nach
     "hier geht es weiter". Die Maske blendet die letzten Pixel weich aus, das
     Polster sorgt dafuer, dass der letzte Eintrag am Ende trotzdem ganz
     sichtbar wird. Rein in CSS, damit es auch ohne JavaScript greift.
     Gemessen auf 375 px an /marke: 501 px Inhalt in 327 px Leiste. */
  .seitennav nav {
    padding-right: 26px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .seitennav strong { display: none; }
  .seitennav { justify-content: flex-start; }
}
/* Zweierstreifen auf dem Tablet: die Regel oben blendet das letzte Bild aus,
   damit aus drei zwei werden. Hat der Streifen aber nur zwei, bliebe eines
   uebrig und daneben eine Luecke. Der Bereich ist bewusst nach unten begrenzt
   — unter 700px gilt weiter "ein Bild", sonst schlaegt die Spezifizitaet von
   :has die Handy-Abfrage (auf 375px gemessen: zwei Bilder untereinander). */
@media (min-width: 701px) and (max-width: 1000px) {
  .bildstreifen:has(figure:nth-child(2):last-child) figure:last-child { display: block; }
}
@media (max-width: 700px) {
  .bildstreifen { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
  /* Auf dem Handy bleibt EIN Bild: zwei untereinander waeren zwei Bildschirmhoehen
     Dekoration vor dem naechsten Satz. */
  .bildstreifen figure:nth-child(n+2) { display: none; }
  .katalog { columns: 1; }
  .hub-zeile h3 { font-size: 24px; }
}

/* Einleitungssatz unter einer Abschnittsueberschrift. .section-description gab
   es bisher nur in der zentrierten Variante — hier steht der Abstand, der auch
   linksbuendig gebraucht wird. */
.section-intro .section-description {
  margin-top: 22px;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grey);
}

/* Hero-Video — liegt ueber dem Standbild und wird erst sichtbar, wenn es
   wirklich laeuft. Bis dahin (und wenn die Wiedergabe scheitert) sieht man das
   Standbild darunter, das denselben Bildausschnitt zeigt. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  opacity: 0;
  transition: opacity .6s var(--ease);
  z-index: 1;
}
.hero-video.ist-sichtbar { opacity: 1; }
@media (max-width: 1000px) { .hero-video { object-position: 56% center; } }

/* ===========================================================================
   PROJEKTRASTER — 16.09.2026

   Ruhezustand: Bild und Name. Bei Hover UND bei Tastaturfokus kommt der Text
   dazu. Beides gleichwertig — wer mit der Tastatur navigiert, bekommt
   denselben Stand wie mit der Maus (Codex' Uebergabe, und schlicht richtig).

   Auf Geraeten ohne Hover (Handy, Tablet) steht der Text dauerhaft: dort gibt
   es keinen Zwischenzustand, in dem man ihn hervorholen koennte.
   =========================================================================== */

.projekt-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.projekt {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  background: #101010;
  aspect-ratio: 3 / 2;
}
.projekt-bild { display: block; width: 100%; height: 100%; }
.projekt-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.projekt-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: block;
  padding: 44px 20px 18px;
  color: #fff;
  /* Der Verlauf traegt den Kontrast allein — gerechnet fuer den unguenstigsten
     Fall, ein reinweisses Bild darunter: rgba(0,0,0,.78) ergibt sRGB 56 und
     damit 11,6:1 gegen weisse Schrift. */
  background: linear-gradient(transparent, #000000c7 55%);
}
.projekt-kopf { display: flex; align-items: baseline; gap: 12px; }
.projekt-kopf b { font-size: 19px; font-weight: 600; }
.projekt-dauer { font-size: 13px; color: #c9c9c9; }
.projekt-was {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  line-height: 1.5;
  color: #dcdcdc;
  max-width: 42ch;
}

/* Nur dort, wo es einen Hover-Zustand ueberhaupt gibt, wird der Text
   zurueckgehalten. Sonst stuende er auf dem Handy nie. */
@media (hover: hover) and (pointer: fine) {
  .projekt-was {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .projekt:hover .projekt-was,
  .projekt:focus-visible .projekt-was { opacity: 1; transform: none; }
  .projekt:hover .projekt-bild img,
  .projekt:focus-visible .projekt-bild img { transform: scale(1.04); }
}
.projekt:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .projekt-bild img { transition: none; }
  .projekt:hover .projekt-bild img,
  .projekt:focus-visible .projekt-bild img { transform: none; }
  .projekt-was { transition: none; }
}
@media (max-width: 1000px) { .projekt-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .projekt-raster { grid-template-columns: 1fr; gap: 16px; } }

/* Die FAQ-Farben stammen vom Startseiten-Abschnitt `.faq`, der schwarz ist:
   dort misst #b0b0b0 gegen Schwarz 9,7:1. Als Baustein steht dieselbe Liste
   jetzt auch auf hellem Grund — und dort ergibt dieselbe Farbe 2,17:1, also
   unlesbar. Gemessen auf /digitalisierungs-check vor dem Deploy.

   Deshalb haengen die Farben jetzt an der Farbrolle des Abschnitts statt an
   der Annahme, es sei immer schwarz. `.faq` selbst bleibt unveraendert. */
/* `.faq` ist der schwarze FAQ-Abschnitt der Startseite und traegt BEIDE
   Klassen: `faq section-pad`. Ohne diesen Ausschluss faerbt die Regel unten
   ihn mit und drueckt ihn von 9,7:1 auf 3,3:1 — beim Messen aufgefallen,
   nachdem ich mit derselben Regel gerade einen anderen Fehler behoben hatte. */
.section-pad:not(.ist-dunkel):not(.faq) .faq-list p { color: var(--grey); }
.section-pad:not(.ist-dunkel):not(.faq) .faq-list details,
.section-pad:not(.ist-dunkel):not(.faq) .faq-list details:first-child { border-color: var(--line); }
.section-pad:not(.ist-dunkel):not(.faq) .faq-list summary { color: var(--ink); }
.ist-dunkel .faq-list p { color: #b0b0b0; }
.ist-dunkel .faq-list details,
.ist-dunkel .faq-list details:first-child { border-color: #3b3b3b; }

/* Der zweite Kopf-Knopf (Digitalisierungs-Check) weicht, sobald es eng wird:
   unter 1200px traegt der Kopf schon Wortmarke, Navigation, Telefon und den
   Haupt-CTA. Im Mobilmenue steht er weiterhin. */
.header-check { font-size: 14px; min-height: 42px; padding: 11px 17px; }
@media (max-width: 1200px) { .header-check { display: none; } }

/* --- Preisrechner auf /preise ---------------------------------------------
   Die Auswahl ist ein echtes <fieldset> mit echten Radios und Checkboxen: so
   liest ein Screenreader die Gruppe samt Legende vor, und die Tastatur laeuft
   von selbst. Das Eingabefeld sieht aus wie in .feld — ein Muster, nicht zwei.
   Die Preise stehen sichtbar an jeder Auswahl; ohne JavaScript ist das die
   ganze Information, mit JavaScript die Begruendung der Summe. */
.rechner { display: grid; gap: 34px; max-width: 900px; margin-top: 54px; }
/* 54px sind kein Geschmackswert: genau so gross ist der Abstand zwischen
   Abschnitts-Einleitung und Inhalt bei den Karten (gemessen auf derselben
   Seite). Ohne die Zeile klebte die erste Legende an der Einleitung — der
   Abstand kommt sonst aus den Innenabstaenden der Karten, und ein
   <fieldset> hat keine. */
.rechner-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.rechner-gruppe legend {
  padding: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.2;
  margin-bottom: 18px;
}
.rechner-wahl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rechner-option {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rechner-option:hover { border-color: #a8a8a8; }
/* Die Umrandung sitzt am Label, nicht am Eingabefeld: getroffen wird die
   ganze Karte, und der Fokusrahmen soll dasselbe zeigen wie der Mausklick. */
.rechner-option:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 4px; }
.rechner-option:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.rechner-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.rechner-option-text { display: block; }
.rechner-option-text b { display: block; font-size: 18px; font-weight: 500; line-height: 1.3; }
.rechner-option-text small {
  display: block;
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey);
}
.rechner-option-text em {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
}
.rechner-zeile { max-width: 260px; margin: 0; }
.rechner-zeile label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 7px; }
.rechner-zeile input {
  width: 100%;
  font: inherit;
  font-size: 16px;            /* unter 16px zoomt iOS beim Fokus in das Feld */
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
}
.rechner-zeile input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px #006aff33;
}
.rechner-hinweis { margin-top: 12px; font-size: 15px; color: var(--grey); }
.rechner-ergebnis {
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.rechner-ergebnis-ohne-js { color: var(--grey); max-width: 52ch; }
.rechner-summe { display: grid; gap: 10px; margin-bottom: 18px; }
.rechner-summe-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.rechner-summe-zeile span { font-size: 15px; color: var(--grey); }
.rechner-summe-zeile b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}
.rechner-fussnote { font-size: 14px; line-height: 1.6; color: var(--grey); max-width: 68ch; }
.rechner-ergebnis .page-head-actions { margin-top: 22px; }

@media (max-width: 700px) {
  .rechner-wahl { grid-template-columns: 1fr; }
  .rechner-option { padding: 18px; }
}


/* Mobil: Kopfzeile nur mit Logo und Hamburger (Artur 23.10.2026); Erstgespräch steht im aufgeklappten Menü, die Telefonnummer im Fuß und auf /kontakt. */
@media (max-width: 700px) { .site-header .header-actions .header-cta, .site-header .header-actions .phone-link { display: none; } }

/* Hero 23.10.2026: Unterzeile unter der Überschrift (Wunsch Artur). */
.hero-lead{max-width:36em;margin:26px auto 0;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:#ffffffe6;text-shadow:0 2px 24px #0006;animation:hero-text-in 1.2s var(--ease) .3s both}
@media (max-width: 700px) { .hero-lead{margin-top:20px;font-size:16px;max-width:24em} }

/* Startseite 23.10.2026: Hero ohne Mosaik. Eine Bildschirmhöhe, kein Scroll-Übergang; direkt darunter folgen die Leistungen. */
.hero.hero-solo{height:100svh;min-height:620px}
.hero-solo .hero-sticky{position:relative;height:100%}