:root{--black:#101210;--paper:#f3f1ec;--gold:#3688c8;--gray:#858582}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:#101210;background:var(--paper)}a{text-decoration:none;color:inherit}header{height:82px;padding:0 5vw;display:flex;gap:36px;align-items:center;background:#0d0f0d;color:white;position:sticky;top:0;z-index:5;border-bottom:1px solid #333}header nav{display:flex;gap:30px}header a{font-size:11px;letter-spacing:1.4px}.logo{font-size:25px}.tel{margin-left:auto}.hero{min-height:720px;display:grid;grid-template-columns:46% 54%;background:#0d0f0d;color:white}.heroText{padding:11vw 6vw 7vw}.heroImg{position:relative;overflow:hidden;background:url(assets/hero.jpg) center/cover}.heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.hero h1,h2{font:normal clamp(48px,5.2vw,80px)/.98 Georgia,serif;letter-spacing:-3px;margin:28px 0 0}.hero em,h2 em{display:block;font:italic clamp(43px,4.3vw,68px)/.98 Georgia,serif;color:var(--gold)}.hero p,p{font-size:17px;line-height:1.65}.btn{display:inline-block;margin-top:28px;padding:19px 22px;font-size:11px;letter-spacing:1.1px}.gold{background:var(--gold);color:#111}.black{background:#111;color:white}.outline{border:1px solid #777}.light,.dark{padding:8vw 5.5vw}.dark{background:#101210;color:white}.dark h2 em{color:#aaa}.intro{display:grid;grid-template-columns:62% 38%;gap:60px;align-items:center}.intro p{max-width:520px}.cards{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #444;margin-top:60px}.cards article{padding:35px 25px;border-right:1px solid #444;min-height:210px}.cards b{font:25px Georgia,serif}.cards p{font-size:14px;color:#bbb}.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.layers div{padding:22px;margin:10px 0;background:#333;color:white}.layers div:first-child{background:#3688c8;color:#111}.layers span{display:block;font-size:11px;margin-top:6px}.note{font-size:12px!important;color:#666}.visual{display:grid;grid-template-columns:54% 46%;background:#dedbd3}.visual img{width:100%;height:720px;object-fit:cover}.visual div{padding:11vw 7vw}.visual p{max-width:500px}.two aside{background:var(--gold);padding:40px}.two aside strong{display:block;font:56px Georgia,serif;margin:60px 0 8px}.two aside span{display:block;font-size:12px;margin-top:25px}.notice{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:25px 0;margin-top:30px}.person{display:grid;grid-template-columns:38% 62%;gap:8vw;align-items:center}.person img{width:100%;max-width:430px}.person h3{font:26px Georgia,serif}.press .cards{grid-template-columns:1fr 1fr}.press .cards b{font-size:44px}.map{background:#e2dfd7;padding:40px;text-align:center}.map svg{width:220px;display:block;margin:auto}.map path{fill:#171916}.map b,.map span{display:block}.map b{font:22px Georgia,serif}.map span{font-size:12px;color:#777;margin-top:7px}.faq details{border-top:1px solid #ccc;padding:22px 0}.faq summary{font:24px Georgia,serif;cursor:pointer}.contact{background:var(--gold);padding:7vw 5.5vw;display:grid;grid-template-columns:55% 45%;gap:7vw}.contact .big{font:22px Georgia,serif}form{background:white;padding:38px}label{display:block;text-transform:uppercase;font-size:10px;letter-spacing:1.1px;margin-bottom:18px}input,select,textarea{width:100%;border:0;border-bottom:1px solid #aaa;padding:12px 0;font:16px Arial;background:white}textarea{min-height:80px}.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.check{text-transform:none;letter-spacing:0}.check input{width:auto}button{width:100%;border:0;background:#111;color:white;padding:18px;letter-spacing:1px}footer{padding:6vw 5vw;background:#101210;color:#bbb;display:grid;grid-template-columns:1fr 2fr;gap:30px}small{letter-spacing:2px}@media(max-width:800px){header nav,.tel{display:none}header>a:last-child{margin-left:auto}.hero,.intro,.two,.person,.contact,.visual{grid-template-columns:1fr}.heroImg{min-height:420px;grid-row:1}.heroText{grid-row:2}.cards{grid-template-columns:1fr 1fr}.visual img{height:520px}.light,.dark{padding:80px 7vw}}@media(max-width:520px){.cards{grid-template-columns:1fr}.row{grid-template-columns:1fr}.hero h1,h2{letter-spacing:-2px}header{padding:0 20px}.contact{padding:60px 20px}}.logo{display:flex;align-items:center;flex:0 0 auto}.logo img{display:block;width:150px;height:auto;filter:invert(1)}header .logo{margin-right:10px}.footerLogo img{width:190px}.mapGraphic{position:relative;width:220px;height:auto;margin:0 auto 28px}.mapGraphic>img{display:block;width:100%;height:auto}.networkLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.networkLines path{fill:none;stroke:#327bb2;stroke-width:2;opacity:.75}.networkLines circle{fill:#3688c8;stroke:#fff;stroke-width:3}.map>svg{display:none}@media(max-width:520px){.logo img{width:118px}.footerLogo img{width:160px}}

/* Mobile hero aligned to the Work reference */
@media(max-width:800px){
  header{position:absolute;top:0;left:0;right:0;height:74px;background:transparent;border-bottom:1px solid rgba(255,255,255,.25);z-index:20;padding:0 24px}
  header .logo img{width:100px;filter:none;background:#fff;border-radius:20px}
  header>a:last-child{font-size:0;margin-left:22px;margin-right:auto}
  header>a:last-child::after{content:'EINFAHRTEN  —';font-size:11px;letter-spacing:2px;color:#fff}
  .hero{position:relative;display:block;min-height:940px;background:#0b0d0b;overflow:hidden}
  .heroImg{position:absolute;inset:0;min-height:0;z-index:0;background:#111}
  .heroImg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.25) 0%,rgba(0,0,0,.16) 26%,rgba(0,0,0,.40) 48%,rgba(0,0,0,.82) 78%,rgba(0,0,0,.94) 100%);z-index:1}
  .heroVideo{object-position:center center}
  .heroText{position:relative;z-index:2;padding:298px 24px 24px;min-height:940px;display:flex;flex-direction:column;align-items:flex-start}
  .heroText small{font-size:12px;font-weight:700;letter-spacing:2px}
  .hero h1{font-size:47px;line-height:.98;letter-spacing:-2.5px;margin:25px 0 3px}
  .hero em{font-size:43px;line-height:.98;letter-spacing:-1.5px;margin:0 0 28px}
  .hero p{font-size:16px;line-height:1.65;font-weight:600;margin:0 0 0;max-width:470px}
  .hero .btn.gold{width:100%;max-width:362px;margin-top:34px;padding:20px 22px;font-size:11px;letter-spacing:1.25px}
  .hero .btn.gold::after{content:''}
  .heroText::after{content:'SYSTEM KENNENLERNEN     ↓';display:block;margin-top:28px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.65);font-size:11px;font-weight:700;letter-spacing:1.35px;width:200px}
  .hero::after{content:'Fugenlos                         Ruhige, moderne Flächenwirkung\A\A Wasserdurchlässig          Regenwasser versickert im Aufbau\A\A Befahrbar                         Für die Nutzung passend aufgebaut';white-space:pre;position:absolute;z-index:3;left:24px;right:24px;bottom:20px;border-top:1px solid rgba(255,255,255,.35);padding-top:13px;color:#fff;font:13px/1.55 Arial,sans-serif}
}
@media(max-width:520px){
  .hero{min-height:940px}
  .heroText{min-height:940px;padding-top:298px}
  .hero h1{font-size:46px}
  .hero em{font-size:42px}
}

/* V2.2 collected mobile corrections */
.logo img, header .logo img, .footerLogo img{filter:none !important;background:#fff;border-radius:999px}
.person img{object-fit:cover;object-position:center top}
@media(max-width:800px){
  .hero em{font-size:clamp(34px,8.8vw,40px);line-height:1.02;letter-spacing:-1.3px;white-space:nowrap}
  .person img{width:100%;max-width:none;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top}
  .press .cards{grid-template-columns:1fr;width:100%;overflow:hidden}
  .press .cards article{min-width:0;width:100%;border-right:0;border-bottom:1px solid #444;padding-left:0;padding-right:0}
  .press .cards article:last-child{border-bottom:0}
  .press .cards b{display:block;max-width:100%;font-size:clamp(34px,9vw,44px);overflow-wrap:anywhere}
  footer{grid-template-columns:1fr;gap:20px;padding:48px 24px 38px}
  footer .footerLogo img{width:118px}
  footer p{margin:0;max-width:340px;font-size:14px;line-height:1.55}
  footer p:last-of-type{font-size:13px;line-height:1.7}
}
@media(max-width:380px){.hero em{font-size:32px}}

/* V2.3 – Work reference refinements */
@media(min-width:801px){
  .hero{grid-template-columns:46% 54%}
  .heroText{padding-left:5.3vw;padding-right:4vw}
  .hero h1{font-size:clamp(58px,4.65vw,72px);line-height:.98}
  .hero em{font-size:clamp(52px,4.05vw,64px)}
}
.heroImg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.12);z-index:1;pointer-events:none}
.heroVideo{z-index:0}
.mapImage{padding:0;background:transparent;overflow:hidden}
.mapImage>img{display:block;width:100%;height:auto}
.contact{grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);gap:7vw;align-items:start}
.contactIntro h2{font-size:clamp(52px,4.7vw,72px)}
.contactIntro>p{max-width:560px}
.personalContact{border-top:1px solid rgba(16,18,16,.3);margin-top:36px;padding-top:25px;max-width:560px}
.personalContact small{font-size:10px;letter-spacing:1.5px}
.personalContact .big{margin-top:10px;line-height:1.35}
form{padding:38px 38px 36px}
form label{margin-bottom:18px}
form input,form select,form textarea{border-radius:0}
form textarea::placeholder{color:#777;opacity:1}
.upload{border:1px dashed #bbb;padding:16px;margin-top:4px}
.upload input{border:0;padding:12px 0 4px;font-size:14px;text-transform:none;letter-spacing:0}
.upload span{display:block;color:#777;font-size:10px;letter-spacing:0;text-transform:none;margin-top:6px}
.check{display:flex;gap:9px;align-items:flex-start;font-size:10px;line-height:1.35;margin-top:16px}
.check input{flex:0 0 auto;width:18px;height:18px;margin:0}
.check span{text-transform:none;letter-spacing:0}
.formNote{font-size:11px;line-height:1.25;color:#666;margin:18px 0}
@media(max-width:800px){
  .heroImg::after{background:linear-gradient(to bottom,rgba(0,0,0,.31) 0%,rgba(0,0,0,.22) 26%,rgba(0,0,0,.44) 48%,rgba(0,0,0,.84) 78%,rgba(0,0,0,.95) 100%)}
  .network{gap:36px}
  .mapImage{margin-top:10px}
  .contact{grid-template-columns:1fr;gap:38px}
  .contactIntro h2{font-size:clamp(46px,12vw,62px)}
  form{padding:28px 24px}
}

/* V2.4 – press + footer aligned to Work reference */
.press{padding:0 5vw 7.5vw}
.pressRule{border-top:1px solid #4a4c49;padding-top:17px}
.pressRule small{font-size:11px;font-weight:700;letter-spacing:1.8px}
.pressIntro{display:grid;grid-template-columns:58% 42%;align-items:center;min-height:285px}
.pressIntro h2{margin:0;font-size:clamp(58px,5.4vw,82px);line-height:.84;letter-spacing:-3px}
.pressIntro h2 em{font-size:.82em;color:#a8a8a5;line-height:.9}
.pressIntro p{margin:0;color:#b9b9b7;font-size:17px;line-height:1.7;max-width:480px}
.pressCards{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #4a4c49}
.pressCards article{min-height:390px;padding:34px 32px 32px;border-right:1px solid #4a4c49;display:flex;flex-direction:column}
.pressCards article:last-child{border-right:0;background:#181a18}
.pressCards small{font-size:10px;letter-spacing:1.35px;color:#969793}
.pressCards h3{font:700 clamp(38px,3.4vw,52px)/1 Georgia,serif;margin:62px 0 34px;letter-spacing:-1.5px}
.pressCards h4{font:700 22px/1.2 Georgia,serif;margin:0;max-width:520px}
.pressCards a,.pressLink{margin-top:auto;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:1.1px}

.siteFooter{display:block;padding:0 5vw;background:#101210;color:#bbb}
.footerMain{display:grid;grid-template-columns:46% 54%;min-height:320px;padding:58px 0 46px;align-items:start}
.footerBrand{display:flex;flex-direction:column;align-items:flex-start}
.siteFooter .footerLogo img{width:175px}
.footerBrand strong{color:#fff;font-size:11px;letter-spacing:2px;margin-top:46px}
.footerContact{display:flex;flex-direction:column;margin-top:44px;gap:7px;color:#fff;font-size:14px;font-weight:700}
.footerRight{padding-top:55px}
.footerRight p{font-size:15px;line-height:1.6;margin:0;color:#b9b9b7;max-width:560px}
.footerRight nav{display:flex;gap:30px;margin-top:72px;flex-wrap:wrap}
.footerRight nav a{font-size:11px;font-weight:700;letter-spacing:.6px;color:#fff}
.footerBottom{border-top:1px solid #393b38;padding:24px 0 18px;display:flex;justify-content:space-between;font-size:12px;color:#858582}

@media(max-width:800px){
  .press{padding:0 24px 70px}
  .pressRule{padding-top:16px}
  .pressIntro{grid-template-columns:1fr;min-height:0;padding:56px 0 58px;gap:30px}
  .pressIntro h2{font-size:clamp(50px,14vw,70px)}
  .pressIntro p{font-size:15px;line-height:1.6}
  .pressCards{grid-template-columns:1fr}
  .pressCards article{min-height:330px;border-right:0;border-bottom:1px solid #4a4c49;padding:28px 24px}
  .pressCards article:last-child{border-bottom:0}
  .pressCards h3{font-size:clamp(38px,11vw,50px);margin:48px 0 28px;overflow-wrap:normal}
  .pressCards h4{font-size:20px}
  .footerMain{grid-template-columns:1fr;min-height:0;padding:48px 0 38px;gap:44px}
  .siteFooter .footerLogo img{width:125px}
  .footerBrand strong{margin-top:30px}
  .footerContact{margin-top:28px}
  .footerRight{padding-top:0}
  .footerRight p{font-size:14px}
  .footerRight nav{margin-top:32px;gap:18px 24px}
  .footerBottom{padding:20px 0 24px;gap:14px;flex-direction:column}
}

/* V2.5 – Work intro, phone CTA, partner copy and rebuilt system graphic */
.tel{display:flex;align-items:center;gap:8px}.phoneIcon{font-size:13px;line-height:1;transform:rotate(-12deg);display:inline-block}
.introWork{display:block;padding-top:3vw;padding-bottom:8vw}
.introWork .introLabel{border-top:1px solid #c9c7c0;padding-top:17px}
.introWork .introBody{display:grid;grid-template-columns:64% 36%;gap:50px;align-items:center;padding-top:6.5vw}
.introWork h2{margin:0;font-size:clamp(58px,5.2vw,80px);line-height:.94}
.introWork h2 em{display:inline;color:#858582;font-size:inherit;line-height:inherit}
.introCopy p{margin:0;max-width:440px;font-size:16px;line-height:1.7}
.textLink{display:inline-block;margin-top:36px;padding-bottom:8px;border-bottom:1px solid #333;font-size:11px;letter-spacing:1.2px}
.systemSection{display:grid;grid-template-columns:44% 56%;gap:5vw;align-items:start}
.systemLead p{max-width:540px}.systemDiagram{min-width:0}.systemTop{display:grid;grid-template-columns:31% 25% 44%;gap:20px;align-items:center;padding:18px 0 28px;border-bottom:1px solid #c9c7c0}.miniCross{height:145px;position:relative;background:#222;overflow:hidden}.crossTop,.crossBottom{position:absolute;left:0;right:0;height:50%;background:radial-gradient(circle at 20% 30%,#6aa8d8 0 3px,#4389bd 4px 7px,#4d4637 8px 11px,transparent 12px),radial-gradient(circle at 70% 60%,#3688c8 0 4px,#356d96 5px 8px,transparent 9px),#3688c8;background-size:34px 30px,42px 36px,auto}.crossTop{top:0}.crossBottom{bottom:0;background:radial-gradient(circle at 25% 30%,#222 0 5px,#594d3f 6px 9px,transparent 10px),radial-gradient(circle at 70% 60%,#111 0 5px,#66594a 6px 10px,transparent 11px),#3b352e;background-size:42px 36px,50px 44px,auto}.miniCross span{position:absolute;left:8px;bottom:7px;background:#111;color:#fff;padding:4px 7px;font-size:10px}.stack{display:flex;flex-direction:column;align-items:center;gap:7px}.slab{width:90px;height:31px;transform:skewY(-27deg) rotate(27deg);border-radius:5px}.goldSlab{background:var(--gold)}.goldSlab.lower{margin-top:5px}.mesh{width:88px;height:10px;border:3px solid #111;border-top:0;transform:skewY(-27deg) rotate(27deg)}.systemSpecs p{font-size:13px;line-height:1.4;margin:0 0 12px}.systemSpecs b{color:#2f76aa}.systemDetails{display:grid;grid-template-columns:1fr 1fr;background:#101210;color:#fff}.systemDetails article{padding:22px 22px 26px}.systemDetails h3{font:700 21px/1.1 Arial,sans-serif;margin:20px 0 8px}.systemDetails p{font-size:13px;line-height:1.55;color:#eee;margin:0}.texture{height:150px}.aggregate{background:radial-gradient(circle at 15% 20%,#6e5b47 0 7px,#171614 8px 14px,transparent 15px),radial-gradient(circle at 65% 45%,#9b8260 0 6px,#28241f 7px 15px,transparent 16px),radial-gradient(circle at 35% 80%,#4c4034 0 8px,#171614 9px 16px,transparent 17px),#29251f;background-size:58px 52px,64px 58px,72px 62px,auto}.meshTexture{background-color:#25231f;background-image:linear-gradient(45deg,transparent 43%,#8b8b86 44% 48%,transparent 49%),linear-gradient(-45deg,transparent 43%,#8b8b86 44% 48%,transparent 49%);background-size:20px 20px}.systemNote{font-size:11px!important;color:#777;margin:12px 0 0}
@media(max-width:800px){.introWork{padding:42px 24px 70px}.introWork .introBody{grid-template-columns:1fr;padding-top:54px;gap:30px}.introWork h2{font-size:clamp(48px,13vw,64px)}.introCopy p{font-size:15px}.systemSection{grid-template-columns:1fr;padding-left:24px;padding-right:24px;gap:48px}.systemTop{grid-template-columns:1fr;gap:18px}.miniCross{height:180px}.stack{padding:15px 0}.systemSpecs p{font-size:14px}.systemDetails{grid-template-columns:1fr}.systemDetails article+article{border-top:1px solid #444}.partner h2{font-size:clamp(48px,12vw,64px)}.partner h2 em{font-size:.9em}}

/* V2.6 – Systemaufbau als gestaltete Originalgrafik */
.systemGraphicWrap{align-self:center;width:100%;max-width:780px}
.systemGraphicWrap img{display:block;width:100%;height:auto;object-fit:contain}
@media (max-width:900px){.systemGraphicWrap{max-width:none;margin-top:26px}.systemGraphicWrap img{width:100%}}

/* v2.8 – echte Steinteppich-Farben */
.colorsSection{padding-top:7vw;padding-bottom:8vw}
.colorsHead{display:grid;grid-template-columns:1.05fr .95fr;gap:7vw;align-items:end;border-top:1px solid #c9c7c0;padding-top:17px}
.colorsHead h2{margin-top:48px}
.colorsHead h2 em{color:#858582;font-size:.82em;line-height:1.02}
.colorsCopy{max-width:520px;padding-bottom:6px}
.colorsCopy p{margin:0}
.colorGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 18px;margin-top:72px}
.colorGrid figure{margin:0;min-width:0}
.colorGrid img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#ddd}
.colorGrid figcaption{border-top:1px solid #bdbbb5;margin-top:12px;padding-top:11px;font-size:11px;font-weight:700;letter-spacing:1.15px;text-transform:uppercase}
@media(max-width:800px){.colorsSection{padding:70px 24px}.colorsHead{grid-template-columns:1fr;gap:28px}.colorsHead h2{margin-top:38px}.colorsCopy{padding-bottom:0}.colorGrid{grid-template-columns:repeat(2,1fr);gap:28px 12px;margin-top:52px}.colorGrid figcaption{font-size:10px;letter-spacing:.8px}}

/* V2.11 – editorial project gallery */
.projectSection{border-top:1px solid #cfcfc8;padding-top:28px}
.projectHead{display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:end;margin-bottom:56px}
.projectHead h2{margin-top:42px;margin-bottom:0}
.projectCopy{max-width:560px;padding-bottom:10px}
.projectCopy p{margin:0 0 28px;line-height:1.65}
.projectEditorial{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto;gap:18px;align-items:stretch}
.projectEditorial figure{margin:0;position:relative;overflow:hidden;background:#ddd}
.projectEditorial img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.projectEditorial figure:hover img{transform:scale(1.015)}
.projectEditorial figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 26px 22px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66));font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.projectEditorial figcaption span{opacity:.65;margin-right:14px}
.projectHero{grid-column:1/8;grid-row:1/3;min-height:760px}
.projectWork{grid-column:8/13;grid-row:1;min-height:365px}
.projectBase{grid-column:8/11;grid-row:2;min-height:375px}
.projectDetail{grid-column:11/13;grid-row:2;min-height:375px}
@media(max-width:800px){
 .projectHead{grid-template-columns:1fr;gap:28px;margin-bottom:34px}
 .projectHead h2{margin-top:24px}
 .projectEditorial{display:block}
 .projectEditorial figure{margin-bottom:14px;min-height:0;height:auto}
 .projectEditorial img{height:auto;aspect-ratio:4/5;object-fit:cover}
 .projectHero img{aspect-ratio:4/5}
 .projectWork img{aspect-ratio:4/3}
 .projectBase,.projectDetail{display:inline-block;width:calc(50% - 9px);vertical-align:top}
 .projectDetail{margin-left:14px}
 .projectBase img,.projectDetail img{aspect-ratio:1/1.15}
 .projectEditorial figcaption{padding:22px 18px 16px;font-size:10px}
}

/* V2.15 – refined blue contrast + calmer hero hierarchy */
:root{
  --gold:#3688c8;          /* premium blue on light backgrounds / buttons */
  --blue-on-dark:#55a9e0; /* brighter blue for text accents on black */
}

/* Hero: keep the claim secondary to the main H1 and readable on black */
.heroText > em{
  color:var(--blue-on-dark);
}

@media(min-width:801px){
  .heroText > em{
    font-size:clamp(36px,3.05vw,48px);
    line-height:1.02;
    letter-spacing:-1.5px;
    white-space:nowrap;
    margin-top:6px;
  }
}

/* On mobile the claim remains clearly legible over the dark video overlay */
@media(max-width:800px){
  .heroText > em{
    color:var(--blue-on-dark);
    font-size:clamp(34px,8.8vw,40px);
  }
}

/* Existing blue link accents that sit directly on black get the brighter tone */
.dark .textLink,
.pressCards a,
.pressLink{
  color:var(--blue-on-dark);
}

/* V2.16 – reduzierter Systemaufbau: nur der große Querschnitt */
.systemSection{grid-template-columns:39% 61%;gap:4vw;align-items:center}
.systemGraphicWrap{max-width:none;width:100%;align-self:center}
.systemGraphicWrap img{width:100%;height:auto;display:block;object-fit:contain}
@media(max-width:900px){.systemSection{grid-template-columns:1fr;gap:34px}.systemGraphicWrap{margin-top:0}}

/* V2.17 – visual proof / system in use */
.proofSection{padding-top:88px;padding-bottom:96px}
.proofHead{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:end;margin-bottom:44px}
.proofHead h2{margin:18px 0 0;font-size:clamp(48px,5vw,76px);line-height:.94;letter-spacing:-.04em}
.proofHead h2 em{color:#55A9E0;font-weight:400}
.proofHead>p{max-width:520px;margin:0 0 5px;line-height:1.65;color:#d2d2d2}
.proofGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.proofCard{background:#111;border:1px solid #292929;overflow:hidden}
.proofImage{height:390px;background:#1a1a1a;overflow:hidden}
.proofImage img{width:100%;height:100%;object-fit:cover;display:block}
.proofCard:first-child .proofImage img{object-position:left center}
.proofCard:nth-child(2) .proofImage img{object-position:center center}
.proofText{padding:28px 30px 34px}
.proofText span{font-size:12px;letter-spacing:.18em;color:#55A9E0;font-weight:700}
.proofText h3{font-family:Georgia,'Times New Roman',serif;font-size:32px;line-height:1.05;margin:14px 0 14px;color:#fff}
.proofText p{margin:0;max-width:620px;color:#cfcfcf;line-height:1.6}
@media(max-width:800px){.proofSection{padding-top:64px;padding-bottom:68px}.proofHead{grid-template-columns:1fr;gap:24px;margin-bottom:30px}.proofHead h2{font-size:48px}.proofGrid{grid-template-columns:1fr;gap:14px}.proofImage{height:300px}.proofText{padding:24px}.proofText h3{font-size:28px}}
/* V2.18 – Härtetest Kennzahlen + mobile Preisfix */
.proofSource{margin-top:22px!important;padding-top:16px;border-top:1px solid #333;font-size:12px;line-height:1.5!important;color:#aaa!important}
#kosten aside strong{white-space:nowrap}
@media(max-width:800px){
  #kosten aside{padding:34px 28px!important;min-height:0!important}
  #kosten aside strong{display:block;white-space:nowrap;font-size:clamp(43px,13vw,58px)!important;line-height:.98!important;letter-spacing:-.04em}
  #kosten aside b{display:block;margin-top:10px}
  #kosten aside span{display:block;margin-top:26px}
}
@media(max-width:390px){#kosten aside strong{font-size:41px!important}}

/* V2.19 – Kennzahlen als responsive HTML statt im Bild */
.proofMetric{display:flex;align-items:baseline;gap:16px;margin:18px 0 20px;color:#55A9E0;flex-wrap:wrap}
.proofMetric strong{font-family:Georgia,'Times New Roman',serif;font-size:clamp(52px,5vw,76px);line-height:.86;letter-spacing:-.045em;font-weight:700;color:#55A9E0;white-space:nowrap}
.proofMetric b{max-width:220px;font-size:15px;line-height:1.25;color:#fff;font-weight:600}
@media(max-width:800px){.proofMetric{gap:12px;margin:16px 0 18px}.proofMetric strong{font-size:56px}.proofMetric b{font-size:14px;max-width:190px}}
@media(max-width:380px){.proofMetric strong{font-size:48px}.proofMetric b{font-size:13px;max-width:155px}}

/* V2.20 – aligned proof metrics */
.proofMetric{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;column-gap:24px;margin:20px 0 22px;flex-wrap:initial}
.proofMetric strong{display:block;line-height:.9}
.proofMetric b{display:flex;align-items:center;min-height:64px;max-width:250px;padding-left:24px;border-left:1px solid #3a3a3a;font-size:17px;line-height:1.22}
@media(max-width:800px){.proofMetric{grid-template-columns:max-content minmax(0,1fr);column-gap:16px}.proofMetric b{min-height:54px;padding-left:16px;font-size:14px;max-width:none}}
@media(max-width:380px){.proofMetric{column-gap:12px}.proofMetric b{padding-left:12px;font-size:12px}}

/* V2.21 – Härtetest exakt nach freigegebener Layoutvorlage */
.proofImage{position:relative}
.proofBadge{position:absolute;right:18px;top:18px;width:210px;height:210px;border-radius:50%;background:#3192d4;border:2px solid rgba(255,255,255,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);z-index:2}
.proofBadge strong{font-family:Arial,Helvetica,sans-serif;font-size:66px;line-height:.92;letter-spacing:-.05em;font-weight:800;white-space:nowrap}
.proofBadge span{margin-top:10px;font-size:17px;line-height:1.22;font-weight:700}
.proofBadge .badgeIcon{margin-top:10px;font-style:normal;font-size:32px;line-height:1;font-weight:300}
.proofTextIcon{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:24px;align-items:start}
.proofIcon{width:104px;height:104px;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;margin-top:0}
.proofIcon svg{width:70px;height:70px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.proofCopy h3{margin-top:14px}
.proofSource{grid-column:1/-1;margin-top:22px!important}
/* V2.21 supersedes the inline metric rows from V2.19/20 */
.proofMetric{display:none!important}
@media(max-width:1050px){.proofBadge{width:170px;height:170px}.proofBadge strong{font-size:54px}.proofBadge span{font-size:14px}.proofBadge .badgeIcon{font-size:26px}.proofTextIcon{grid-template-columns:96px minmax(0,1fr)}.proofIcon{width:84px;height:84px}.proofIcon svg{width:56px;height:56px}}
@media(max-width:800px){.proofBadge{width:138px;height:138px;right:12px;top:12px}.proofBadge strong{font-size:43px}.proofBadge span{font-size:11px;margin-top:7px}.proofBadge .badgeIcon{font-size:21px;margin-top:6px}.proofTextIcon{grid-template-columns:72px minmax(0,1fr);column-gap:16px}.proofIcon{width:64px;height:64px}.proofIcon svg{width:43px;height:43px}.proofSource{grid-column:1/-1}}
@media(max-width:430px){.proofImage{height:260px}.proofBadge{width:120px;height:120px}.proofBadge strong{font-size:37px}.proofBadge span{font-size:10px}.proofBadge .badgeIcon{display:none}.proofTextIcon{grid-template-columns:1fr}.proofIcon{margin-bottom:18px}.proofCopy h3{font-size:27px}}

/* V2.22 – Sollansicht: vorhandene Bild-Badges 1:1 nutzen, keine Doppelung */
#haertetest .proofBadge{display:none!important}
#haertetest .proofImage{height:auto!important;aspect-ratio:710/260;overflow:hidden}
#haertetest .proofImage img{width:100%;height:100%;object-fit:cover;object-position:center center!important}
#haertetest .proofGrid{gap:22px}
#haertetest .proofTextIcon{padding:20px 18px 18px;grid-template-columns:132px minmax(0,1fr);column-gap:26px}
#haertetest .proofIcon{width:112px;height:112px;margin-top:0}
#haertetest .proofIcon svg{width:72px;height:72px}
#haertetest .proofCopy span{display:block;margin-top:0}
#haertetest .proofCopy h3{font-size:32px;margin:14px 0 12px}
#haertetest .proofCopy p{font-size:14px;line-height:1.55}
#haertetest .proofSource{margin-top:20px!important;padding-top:14px;font-size:11px;line-height:1.45!important}
@media(max-width:1050px){
 #haertetest .proofTextIcon{grid-template-columns:100px minmax(0,1fr);column-gap:20px}
 #haertetest .proofIcon{width:88px;height:88px}
 #haertetest .proofIcon svg{width:58px;height:58px}
}
@media(max-width:800px){
 #haertetest .proofImage{aspect-ratio:710/260;height:auto!important}
 #haertetest .proofTextIcon{grid-template-columns:78px minmax(0,1fr);padding:22px 20px}
 #haertetest .proofIcon{width:66px;height:66px}
 #haertetest .proofIcon svg{width:44px;height:44px}
}
@media(max-width:430px){
 #haertetest .proofImage{aspect-ratio:710/260;height:auto!important}
 #haertetest .proofTextIcon{grid-template-columns:1fr}
 #haertetest .proofIcon{margin-bottom:16px}
}

/* V2.25 – Härtetest Desktop exakt nach freigegebener Sollansicht */
@media (min-width:1200px){
  #haertetest.proofSection{
    padding:18px 3.125vw 16px;
  }
  #haertetest .proofHead{
    grid-template-columns:1.15fr .85fr;
    gap:72px;
    align-items:center;
    margin-bottom:34px;
  }
  #haertetest .proofHead h2{
    margin-top:16px;
    font-size:58px;
    line-height:.96;
  }
  #haertetest .proofHead h2 em{
    font-size:48px;
    line-height:.98;
  }
  #haertetest .proofHead>p{
    max-width:520px;
    font-size:16px;
    line-height:1.55;
    margin:34px 0 0;
  }
  #haertetest .proofGrid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:22px;
  }
  #haertetest .proofImage{
    aspect-ratio:710/260;
  }
  #haertetest .proofTextIcon{
    min-height:258px;
    padding:20px 18px 16px;
    grid-template-columns:132px minmax(0,1fr);
    column-gap:26px;
  }
  #haertetest .proofIcon{
    width:112px;
    height:112px;
  }
  #haertetest .proofCopy h3{
    font-size:32px;
    line-height:1.02;
    margin:14px 0 10px;
    white-space:nowrap;
  }
  #haertetest .proofCopy p{
    font-size:13px;
    line-height:1.55;
  }
  #haertetest .proofSource{
    margin-top:18px!important;
    padding-top:12px;
    font-size:11px;
    line-height:1.4!important;
  }
}

/* V2.26 – realistischere Funktionsicons + Kosten desktop in einer Reihe */
#haertetest .proofIconWater .dropFill{fill:url(#dropGrad);stroke:#fff;stroke-width:1.8}
#haertetest .proofIconWater svg>path:not(.dropFill){fill:none}
#haertetest .proofIconCar svg{stroke-width:2;}
#haertetest .proofIconCar svg circle{fill:#fff;stroke:#fff}

#kosten.costSection{padding-top:36px;padding-bottom:36px}
#kosten .costGrid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(330px,.92fr) minmax(220px,.58fr);gap:30px;align-items:stretch}
#kosten .costIntro{padding:8px 0}
#kosten .costIntro h2{font-size:clamp(44px,4.1vw,66px);line-height:.94;margin:28px 0 22px;letter-spacing:-.045em}
#kosten .costIntro p{max-width:680px;margin:0;font-size:16px;line-height:1.55}
#kosten .costPrice{background:var(--gold);padding:30px 40px;display:flex;flex-direction:column;justify-content:center;min-height:244px}
#kosten .costPrice strong{display:block;white-space:nowrap;font:56px Georgia,serif;line-height:1;margin:28px 0 6px}
#kosten .costPrice b{font-size:25px}
#kosten .costPrice span{display:block;font-size:14px;line-height:1.45;margin-top:20px}
#kosten .costNotice{border-left:1px solid #bbb;padding:46px 0 20px 28px;display:flex;flex-direction:column;justify-content:center}
#kosten .costNotice>b{font-size:17px;margin-bottom:8px}
#kosten .costNotice p{font-size:15px;line-height:1.55;margin:0;max-width:210px}
@media(max-width:1000px){
 #kosten .costGrid{grid-template-columns:1fr 1fr}
 #kosten .costNotice{grid-column:1/-1;border-left:0;border-top:1px solid #ccc;padding:22px 0 0}
 #kosten .costNotice p{max-width:620px}
}
@media(max-width:800px){
 #kosten.costSection{padding:64px 7vw}
 #kosten .costGrid{grid-template-columns:1fr;gap:26px}
 #kosten .costIntro h2{font-size:clamp(43px,12vw,58px);line-height:.96;margin-top:24px}
 #kosten .costPrice{padding:34px 28px;min-height:0}
 #kosten .costPrice strong{font-size:clamp(43px,13vw,58px);margin:34px 0 8px}
 #kosten .costNotice{grid-column:auto;padding-top:22px}
}


/* V2.27 FINAL – freigegebene Sollansicht */
#haertetest .proofIcon{overflow:hidden;background:#0f1110}
#haertetest .proofIcon img{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}

@media (min-width:1200px){
  #haertetest.proofSection{padding:18px 3.125vw 16px}
  #haertetest .proofHead{grid-template-columns:1.15fr .85fr;gap:72px;align-items:center;margin-bottom:34px}
  #haertetest .proofHead h2{margin-top:16px;font-size:58px;line-height:.96}
  #haertetest .proofHead h2 em{font-size:48px;line-height:.98}
  #haertetest .proofHead>p{max-width:520px;font-size:16px;line-height:1.55;margin:34px 0 0}
  #haertetest .proofGrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
  #haertetest .proofImage{aspect-ratio:710/260}
  #haertetest .proofTextIcon{min-height:258px;padding:20px 18px 16px;grid-template-columns:132px minmax(0,1fr);column-gap:26px}
  #haertetest .proofIcon{width:112px;height:112px}
  #haertetest .proofCopy h3{font-size:clamp(27px,2.05vw,32px);line-height:1.02;margin:14px 0 10px;white-space:nowrap;letter-spacing:-.025em}
  #haertetest .proofCopy p{font-size:13px;line-height:1.55}
  #haertetest .proofSource{margin-top:18px!important;padding-top:12px;font-size:11px;line-height:1.4!important}
  #kosten.costSection{padding:34px 4.2vw 36px}
  #kosten .costGrid{grid-template-columns:minmax(0,1.7fr) minmax(370px,.98fr) minmax(235px,.62fr);gap:38px;align-items:stretch}
  #kosten .costIntro{padding:8px 0}
  #kosten .costIntro h2{font-size:clamp(46px,3.75vw,60px);line-height:.95;margin:26px 0 20px;letter-spacing:-.045em}
  #kosten .costIntro p{max-width:650px;font-size:16px;line-height:1.5}
  #kosten .costPrice{padding:28px 42px;min-height:246px}
  #kosten .costPrice strong{font-size:56px;margin:26px 0 6px}
  #kosten .costNotice{padding:42px 0 20px 28px}
}

@media (max-width:800px){
  #haertetest.proofSection{padding:54px 6.5vw 58px}
  #haertetest .proofHead{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:30px}
  #haertetest .proofHead h2{font-size:clamp(42px,12vw,52px);line-height:.95;margin-top:16px}
  #haertetest .proofHead h2 em{font-size:.92em}
  #haertetest .proofHead>p{font-size:16px;line-height:1.55;max-width:none;margin:0}
  #haertetest .proofGrid{grid-template-columns:1fr;gap:22px}
  #haertetest .proofImage{aspect-ratio:710/260!important}
  #haertetest .proofTextIcon{display:grid;grid-template-columns:1fr;padding:22px 20px 22px;min-height:0}
  #haertetest .proofIcon{width:76px;height:76px;margin:0 0 18px}
  #haertetest .proofCopy span{font-size:12px}
  #haertetest .proofCopy h3{font-size:clamp(34px,10vw,46px);line-height:.98;margin:16px 0 18px;white-space:normal;max-width:320px}
  #haertetest .proofCopy p{font-size:15px;line-height:1.5}
  #haertetest .proofSource{margin-top:22px!important;padding-top:16px;font-size:11px;line-height:1.45!important}
  #kosten.costSection{padding:58px 6.5vw}
  #kosten .costGrid{grid-template-columns:1fr;gap:26px}
  #kosten .costIntro h2{font-size:clamp(42px,11.5vw,56px);line-height:.96;margin:24px 0 20px}
  #kosten .costPrice{padding:32px 28px;min-height:0}
  #kosten .costNotice{border-left:0;border-top:1px solid #ccc;padding:22px 0 0}
}

/* V2.28 – finale Feinjustierung Härtetest */
@media (min-width:1200px){
  #haertetest .proofTextIcon{grid-template-columns:118px minmax(0,1fr);column-gap:22px;padding:20px 18px 16px}
  #haertetest .proofIcon{width:100px;height:100px;align-self:start}
  #haertetest .proofIcon img{width:100%;height:100%;object-fit:cover}
  #haertetest .proofCopy{min-width:0}
  #haertetest .proofCopy h3{font-size:clamp(25px,1.72vw,29px);line-height:1.04;white-space:normal;max-width:100%;overflow-wrap:normal;word-break:normal}
  #haertetest .proofCard:nth-child(2) .proofCopy h3{font-size:clamp(24px,1.62vw,28px)}
}

/* V2.29 FINAL – freigegebene Variante 21.09.2026 */
@media (min-width:1200px){
  #haertetest.proofSection{padding:18px 3.125vw 16px}
  #haertetest .proofGrid{gap:22px}
  #haertetest .proofTextIcon{grid-template-columns:132px minmax(0,1fr);column-gap:26px;padding:20px 18px 16px;min-height:258px}
  #haertetest .proofIcon{width:112px;height:112px}
  #haertetest .proofCopy h3{font-size:clamp(25px,1.9vw,32px);line-height:1.02;white-space:nowrap;letter-spacing:-.025em}
  #haertetest .proofCard:nth-child(2) .proofCopy h3{font-size:clamp(24px,1.72vw,30px)}
  #kosten.costSection{padding:34px 4.2vw 36px}
  #kosten .costGrid{grid-template-columns:minmax(0,1.7fr) minmax(370px,.98fr) minmax(235px,.62fr);gap:38px;align-items:stretch}
  #kosten .costIntro h2{font-size:clamp(46px,3.75vw,60px);line-height:.95;margin:26px 0 20px}
  #kosten .costPrice{padding:28px 42px;min-height:246px}
  #kosten .costNotice{padding:42px 0 20px 28px}
}
@media (max-width:800px){
  #haertetest .proofTextIcon{grid-template-columns:1fr;padding:22px 20px 22px}
  #haertetest .proofIcon{width:76px;height:76px;margin:0 0 18px}
  #haertetest .proofCopy h3,#haertetest .proofCard:nth-child(2) .proofCopy h3{font-size:clamp(34px,10vw,46px);line-height:.98;white-space:normal;max-width:320px}
  #kosten .costGrid{grid-template-columns:1fr;gap:26px}
}

/* V2.30 – Icon-Feinschliff: nur der in der Grafik enthaltene Kreis */
#haertetest .proofIcon{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
#haertetest .proofIcon img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:0 !important;
}

/* V2.32 FINAL ONLINE – Conversion, SEO & Launch */
header .tel{display:flex;align-items:center;gap:8px;line-height:1.05}
header .telLabel{display:block;font-size:8px;letter-spacing:.12em;opacity:.65;margin-bottom:3px}
.btn.gold,.contact button{color:#fff!important}
.costPrice strong{font-size:clamp(36px,3vw,50px)!important;line-height:1.02}
.costPrice span{line-height:1.45}
.costCta{display:inline-block;margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.35);color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em}
.formTrust{font-size:12px;font-weight:800;letter-spacing:.02em;margin-bottom:18px}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}
.check a{color:inherit;text-decoration:underline}
.mobileContactBar{display:none}
@media(max-width:800px){
  body{padding-bottom:62px}
  .mobileContactBar{position:fixed;z-index:9999;left:0;right:0;bottom:0;height:62px;background:#0b0c0c;display:grid;grid-template-columns:.8fr .9fr 1.3fr;border-top:1px solid rgba(255,255,255,.15)}
  .mobileContactBar a{display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:800;letter-spacing:.04em;border-right:1px solid rgba(255,255,255,.14);text-align:center;padding:0 6px}
  .mobileContactBar a:nth-child(2){background:#171919}
  .mobileContactBar a:last-child{background:var(--gold);border-right:0}
  .contactIntro h2{font-size:clamp(44px,12vw,62px);line-height:.94}
}

/* V2.33 LAUNCH CHECK – blaue Flaechen konsequent weiss + Layoutkorrekturen */
/* Designregel: Auf PayKIES-Blau wird Text weiss dargestellt. */
.gold,
#kosten .costPrice,
.contact{
  color:#fff;
}
.gold *,
#kosten .costPrice *,
.contact .contactIntro,
.contact .contactIntro *,
.contact .personalContact,
.contact .personalContact *{
  color:#fff !important;
}
#kosten .costPrice small{opacity:.82}
#kosten .costPrice strong{color:#fff!important}
#kosten .costPrice b{color:#fff!important}
#kosten .costPrice span{color:rgba(255,255,255,.92)!important}
#kosten .costCta{color:#fff!important;border-top-color:rgba(255,255,255,.45)}
.contactIntro h2,.contactIntro h2 em{color:#fff!important}
.contactIntro>p{color:rgba(255,255,255,.94)!important}
.personalContact{border-top-color:rgba(255,255,255,.38)}
.personalContact small{color:rgba(255,255,255,.8)!important}

/* Ansprechpartner: Textspalte begrenzen und Kontaktwege sichtbar machen. */
.person>div{min-width:0;max-width:690px}
.person>div>p{max-width:660px}
.personActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.personActions a{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;background:#101210;color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em}
.personActions a:last-child{background:var(--gold);color:#fff}

/* Kostenkarte: mehr Luft und klarere Hierarchie. */
#kosten .costPrice{justify-content:flex-start}
#kosten .costPrice strong{margin:26px 0 10px!important}
#kosten .costPrice b{font-size:21px;line-height:1.08;max-width:280px}
#kosten .costPrice span{max-width:300px}

/* Kontaktabschluss: komplette Headline sichtbar, linke Spalte kompakter. */
.contact{grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:7vw}
.contactIntro{min-width:0;max-width:620px}
.contactIntro h2{font-size:clamp(48px,4.25vw,68px);line-height:.94;letter-spacing:-2.8px;max-width:610px}
.contactIntro h2 em{display:inline;font:inherit;font-style:italic}
.contactIntro>p{max-width:570px}
.personalContact{max-width:570px}

@media(max-width:800px){
  .person>div{max-width:none}
  .personActions{margin-top:22px}
  .contact{grid-template-columns:1fr;gap:38px}
  .contactIntro{max-width:none}
  .contactIntro h2{font-size:clamp(43px,11.5vw,60px);max-width:none;letter-spacing:-2px}
}

/* V2.34 FINAL REVIEW – sechs freigegebene Korrekturen */
/* 1: Mobiler Header bleibt beim Scrollen sichtbar. */
@media(max-width:800px){
  header{position:fixed!important;top:0;left:0;right:0;z-index:10000;height:74px;background:rgba(13,15,13,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  body{padding-top:74px;padding-bottom:62px}
  header .logo img{width:105px}
  header .tel{display:flex!important;margin-left:auto;gap:6px}
  header .telLabel{font-size:7px;max-width:74px}
  header .tel>span:last-child{font-size:10px;letter-spacing:.09em;max-width:86px}
  header>a:last-child{display:none}
}

/* 2: Kosten – kein Quadratmeterpreis; mobil sauber umbrechen. */
#kosten .costPrice strong{white-space:normal;overflow-wrap:normal}
@media(max-width:800px){
  #kosten .costPrice{padding:30px 28px;min-height:0}
  #kosten .costPrice strong{display:block;font-size:clamp(39px,11vw,52px)!important;line-height:.98;margin:24px 0 14px!important;max-width:100%}
  #kosten .costPrice b{font-size:20px;max-width:260px}
  #kosten .costPrice span{max-width:100%;font-size:14px}
  #kosten .costNotice{padding:22px 0 4px;margin:0;min-height:0}
  #kosten.costSection{padding-bottom:56px}
}

/* 3: Formular – schwarze Beschriftungen auf der weißen Karte. */
.contact form,.contact form *{color:#101210}
.contact form .formTrust{color:#101210!important}
.contact form label{color:#101210!important}
.contact form .upload span{color:#777!important}
.contact form button{color:#fff!important}
.contact form input,.contact form select,.contact form textarea{color:#101210!important}
.contact form textarea::placeholder{color:#777!important}

/* 4: PayKIES Prozess – mehr Wertigkeit und klare vier Schritte. */
.processCards .processNo{display:block;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:18px}
.processCards article{min-height:300px}
.processCards article b{display:block;line-height:1.08}
.processCards article p{line-height:1.6;max-width:300px}
@media(max-width:800px){.processCards article{min-height:0;padding-top:30px;padding-bottom:34px}.processCards article p{max-width:none}}

/* 6: Persönliche Beratung – eigener Kontaktblock statt drei loser Zeilen. */
.personalContact{padding-top:28px}
.personalContact h3{font:700 28px/1 Georgia,serif;margin:13px 0 7px;color:#fff!important}
.personalContact .contactRole{font-size:14px;line-height:1.45;margin:0 0 20px;max-width:390px;color:rgba(255,255,255,.86)!important}
.contactQuick{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:520px}
.contactQuick a{border:1px solid rgba(255,255,255,.52);padding:13px 15px;display:flex;flex-direction:column;gap:5px;transition:.2s ease}
.contactQuick a:hover{background:#fff}.contactQuick a:hover *{color:#101210!important}
.contactQuick span{font-size:9px;font-weight:800;letter-spacing:.13em;color:rgba(255,255,255,.72)!important}
.contactQuick strong{font:700 17px/1.15 Georgia,serif;color:#fff!important}
.contactMail{display:inline-block;margin-top:15px;font-size:13px;font-weight:700;color:#fff!important}
@media(max-width:520px){.contactQuick{grid-template-columns:1fr}.contactQuick strong{font-size:18px}}

/* 5: Premium Footer – kompakter Markenabschluss. */
.siteFooter.premiumFooter{display:block;padding:0 5.5vw;background:#0d0f0d;color:#fff}
.premiumFooter .footerStatement{display:grid;grid-template-columns:190px minmax(360px,.9fr) minmax(260px,.7fr);gap:55px;align-items:center;padding:58px 0 48px;border-bottom:1px solid #343633}
.premiumFooter .footerLogo img{width:170px}
.premiumFooter .footerStatement h2{font-size:clamp(34px,3vw,48px);line-height:.98;letter-spacing:-1.7px;margin:0;color:#fff}
.premiumFooter .footerStatement h2 em{font-size:inherit;color:var(--gold)}
.premiumFooter .footerStatement p{font-size:14px;line-height:1.55;color:#aaa;margin:0;max-width:390px}
.premiumFooter .footerColumns{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:70px;padding:42px 0 46px}
.premiumFooter .footerColumns>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.premiumFooter .footerColumns small{color:#777;font-size:9px;font-weight:800;letter-spacing:.16em;margin-bottom:10px}
.premiumFooter .footerColumns a{font-size:14px;color:#fff}
.premiumFooter .footerColumns p{font-size:14px;line-height:1.5;color:#aaa;margin:0 0 8px}
.premiumFooter .footerCta{margin-top:5px;padding:13px 16px;background:var(--gold);color:#fff!important;font-size:10px!important;font-weight:800;letter-spacing:.08em}
.premiumFooter .footerBottom{border-top:1px solid #343633;padding:20px 0 24px;color:#777}
@media(max-width:800px){
  .premiumFooter .footerStatement{grid-template-columns:1fr;gap:25px;padding:45px 0 36px}
  .premiumFooter .footerLogo img{width:135px}
  .premiumFooter .footerStatement h2{font-size:clamp(36px,10vw,50px)}
  .premiumFooter .footerColumns{grid-template-columns:1fr 1fr;gap:38px 25px;padding:34px 0 38px}
  .premiumFooter .footerColumns>div:last-child{grid-column:1/-1}
}
@media(max-width:520px){.premiumFooter .footerColumns{grid-template-columns:1fr}.premiumFooter .footerColumns>div:last-child{grid-column:auto}}


/* V2.35 – finaler Kontakt-/Link-Feinschliff */
@media(max-width:800px){
  header{gap:14px!important;padding-left:20px!important;padding-right:20px!important}
  header .logo{margin-right:0!important}
  header .logo img{width:105px!important}
  header .tel{display:flex!important;align-items:center!important;gap:7px!important;margin-left:auto!important;white-space:nowrap!important;max-width:none!important}
  header .telLabel{display:none!important}
  header .tel .phoneIcon{font-size:13px;line-height:1}
  header .tel>span:last-child{font-size:11px!important;letter-spacing:.035em!important;max-width:none!important;white-space:nowrap!important}
}
@media(max-width:390px){
  header{padding-left:15px!important;padding-right:15px!important;gap:9px!important}
  header .logo img{width:94px!important}
  header .tel>span:last-child{font-size:10px!important;letter-spacing:.015em!important}
}

/* V2.36 – mobiler Header + WhatsApp-Farbakzent */
@media(max-width:800px){
  header .tel{align-items:center!important;gap:7px!important}
  header .telLabel{display:block!important;font-size:6.5px!important;line-height:1.05!important;letter-spacing:.12em!important;opacity:.68!important;margin:0 0 3px!important;max-width:none!important;white-space:nowrap!important}
  header .tel>span:last-child{display:flex!important;flex-direction:column!important;align-items:flex-start!important;font-size:10.5px!important;line-height:1.05!important;letter-spacing:.035em!important;max-width:none!important;white-space:nowrap!important}
  .mobileContactBar a:nth-child(2){background:#25D366!important;color:#fff!important}
}
@media(max-width:390px){
  header .logo img{width:92px!important}
  header .tel{gap:5px!important}
  header .telLabel{font-size:6px!important;letter-spacing:.09em!important}
  header .tel>span:last-child{font-size:9.5px!important;letter-spacing:.015em!important}
  header .tel .phoneIcon{font-size:12px!important}
}

/* V2.37: WhatsApp icon in mobile action bar */
@media(max-width:768px){
  .mobileContactBar .mobileWhatsapp{gap:6px}
  .mobileContactBar .whatsappIcon{width:17px;height:17px;display:block;flex:0 0 17px}
}
/* V2.38 – Social Media Integration */
.socialFollow{margin-top:30px;padding-top:22px;border-top:1px solid #d8d7d1}
.socialFollow>span{display:block;margin-bottom:12px;font-size:9px;font-weight:800;letter-spacing:.16em;color:#777}
.socialLinks{display:flex;flex-wrap:wrap;gap:9px}
.socialLinks a{display:inline-flex;align-items:center;gap:8px;min-height:39px;padding:0 12px;border:1px solid #c9c8c1;color:#101210;background:transparent;font-size:10px;font-weight:800;letter-spacing:.02em;transition:.2s ease}
.socialLinks a:hover{background:#101210;color:#fff;border-color:#101210}
.socialLinks svg,.footerSocial svg{width:17px;height:17px;flex:0 0 17px}
.socialLinks b{font-weight:800}
.premiumFooter .footerColumns{grid-template-columns:.95fr .75fr 1fr 1.15fr;gap:50px}
.footerSocial{display:flex;flex-direction:column;gap:10px}
.premiumFooter .footerSocial a{display:flex;align-items:center;gap:9px;font-size:13px;color:#fff}
.premiumFooter .footerSocial a:hover{opacity:.72}
@media(max-width:900px){
  .premiumFooter .footerColumns{grid-template-columns:1fr 1fr;gap:38px 25px}
  .premiumFooter .footerColumns>div:last-child{grid-column:auto}
}
@media(max-width:620px){
  .socialLinks{display:grid;grid-template-columns:1fr 1fr}
  .socialLinks a{padding:0 10px;font-size:9px}
  .premiumFooter .footerColumns{grid-template-columns:1fr}
}


/* V2.39 – mobile hero position + clean phone icons */
.phoneSvg{width:15px;height:15px;display:block;flex:0 0 15px;color:#fff}
@media(max-width:800px){
  .heroText{padding-top:28px!important;padding-bottom:96px!important;min-height:940px!important}
  .heroText::after{margin-top:28px!important}
  .mobileContactBar .mobileCall{gap:6px}
  .mobileContactBar .mobileCall .phoneSvg{width:16px;height:16px;flex-basis:16px}
  header .phoneIcon{transform:none!important}
  header .phoneIcon .phoneSvg{width:14px;height:14px}
}
@media(max-width:390px){
  .heroText{padding-top:26px!important}
}