:root{
  --bg:#0f1113;--panel:#171a1d;--panel2:#202429;--text:#f5f7f8;--muted:#aeb6bd;
  --accent:#f0a51a;--accent2:#ffc552;--line:#323840;--white:#fff;--max:1180px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:#0e1012;color:var(--text);line-height:1.55} a{color:inherit;text-decoration:none} img{max-width:100%;display:block}.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.topbar{background:#090a0b;border-bottom:1px solid #222;color:#cfd4d8;font-size:.9rem}.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding:9px 0}.topbar a:hover{color:var(--accent)}
.header{position:sticky;top:0;z-index:20;background:rgba(15,17,19,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:78px}.brand{display:flex;align-items:center;gap:14px}.logo-mark{width:52px;height:52px;border:2px solid var(--accent);display:grid;place-items:center;font-weight:900;letter-spacing:-2px;font-size:1.35rem}.brand strong{display:block;letter-spacing:.08em}.brand span{display:block;color:var(--muted);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase}.navlinks{display:flex;gap:26px;align-items:center}.navlinks a{font-size:.95rem;color:#dfe3e6}.navlinks a:hover,.navlinks a.active{color:var(--accent)}.navlinks .nav-cta{padding:11px 15px;border:1px solid var(--accent);color:#fff}.menu-btn{display:none;background:none;border:1px solid #444;color:#fff;padding:9px 11px;font-size:1rem}
.hero{min-height:78vh;display:grid;align-items:end;position:relative;overflow:hidden;background:
linear-gradient(90deg,rgba(5,6,7,.96) 0%,rgba(5,6,7,.82) 42%,rgba(5,6,7,.25) 100%),
linear-gradient(135deg,#111 0%,#23272b 55%,#0c0d0f 100%)}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,transparent 0 54px,rgba(255,255,255,.025) 55px 56px);transform:scale(1.1)}
.hero:after{content:"H";position:absolute;right:4vw;top:1vh;font-size:min(44vw,620px);font-weight:900;line-height:1;color:rgba(255,255,255,.025);letter-spacing:-.08em}.hero .wrap{position:relative;z-index:2;padding:90px 0 86px}.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.2em;font-size:.78rem;font-weight:800}.hero h1{font-size:clamp(3.1rem,7vw,6.7rem);line-height:.92;max-width:950px;margin:18px 0 22px;letter-spacing:-.055em}.hero h1 span{display:block;color:#fff}.hero .lead{max-width:690px;color:#d0d5d9;font-size:1.16rem}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 18px;border:1px solid #4a5057;font-weight:750;transition:.2s}.btn:hover{transform:translateY(-1px);border-color:#777}.btn.primary{background:var(--accent);border-color:var(--accent);color:#111}.btn.primary:hover{background:var(--accent2)}.hero-badge{margin-top:38px;display:flex;gap:30px;flex-wrap:wrap;color:#cad0d4}.hero-badge strong{color:#fff;font-size:1.08rem}.hero-badge span{display:block;font-size:.78rem;color:#929ca4;text-transform:uppercase;letter-spacing:.08em}
.section{padding:92px 0}.section.light{background:#f3f4f5;color:#111}.section.soft{background:#15181b}.section h2{font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;letter-spacing:-.035em;margin:10px 0 22px}.section-intro{max-width:760px;color:#adb5bc;font-size:1.07rem}.light .section-intro{color:#5a6268}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.card{background:var(--panel);border:1px solid var(--line);padding:28px;min-height:240px}.light .card{background:#fff;border-color:#d8dde0}.card .num{font-size:.75rem;color:var(--accent);font-weight:900;letter-spacing:.14em}.card h3{font-size:1.4rem;margin:20px 0 10px}.card p{color:#aeb6bd}.light .card p{color:#5d656b}.card a{display:inline-block;margin-top:12px;color:var(--accent);font-weight:800}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}.service-tile{min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;padding:24px;border:1px solid #343a40;background:linear-gradient(145deg,#20252a,#121416);position:relative;overflow:hidden}.service-tile:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(240,165,26,.2);border-radius:50%;right:-65px;top:-70px}.service-tile h3{margin:0 0 7px}.service-tile p{margin:0;color:#aeb6bd;font-size:.92rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}.visual{min-height:500px;border:1px solid #343a40;background:linear-gradient(145deg,#2a2f34,#111416);position:relative;overflow:hidden}.visual:before{content:"";position:absolute;left:14%;top:8%;width:62%;height:84%;border:18px solid rgba(240,165,26,.8);border-left-width:9px;transform:skewY(-7deg)}.visual:after{content:"ECHTES PROJEKTFOTO";position:absolute;bottom:22px;left:24px;color:#9ea6ad;letter-spacing:.15em;font-size:.68rem}.bullet{display:grid;grid-template-columns:28px 1fr;gap:12px;margin:19px 0}.bullet i{font-style:normal;color:var(--accent);font-weight:900}.bullet p{margin:0;color:#aeb6bd}
.process{display:grid;grid-template-columns:repeat(4,1fr);margin-top:38px;border-top:1px solid #3a4046}.step{padding:26px 24px 0;border-right:1px solid #30353a}.step:last-child{border:0}.step strong{color:var(--accent);font-size:.8rem}.step h3{margin:10px 0}.step p{color:#aab1b7;font-size:.94rem}
.quote{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.1;max-width:900px;margin:0}.quote small{display:block;font-size:.9rem;margin-top:22px;color:#939ca3;font-weight:400}.cta-band{background:var(--accent);color:#111;padding:56px 0}.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-band h2{margin:0;font-size:clamp(2rem,4vw,3.2rem)}.cta-band .btn{border-color:#111}
.page-hero{padding:110px 0 70px;background:linear-gradient(145deg,#0e1012,#24292d);border-bottom:1px solid #333}.page-hero h1{font-size:clamp(2.8rem,6vw,5.7rem);line-height:.95;letter-spacing:-.05em;margin:15px 0 18px}.page-hero p{max-width:760px;color:#b6bec5;font-size:1.08rem}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:36px}.project{border:1px solid #343a40;background:#171a1d;overflow:hidden}.project .ph{height:300px;background:linear-gradient(145deg,#282e33,#101214);display:grid;place-items:center;color:#737c83;font-size:.78rem;letter-spacing:.13em}.project .body{padding:24px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.tag{border:1px solid #3b4248;padding:6px 9px;font-size:.75rem;color:#b7c0c6}
.form{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:28px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:.83rem;color:#aeb6bd}.field input,.field textarea,.field select{width:100%;padding:14px 13px;background:#101214;border:1px solid #3b4248;color:#fff;font:inherit}.field textarea{min-height:150px;resize:vertical}.notice{background:#20252a;border-left:3px solid var(--accent);padding:17px 19px;color:#c8ced3;margin:22px 0}.pricebox{background:#fff;color:#111;padding:28px;border-left:5px solid var(--accent);margin-top:28px}.pricebox strong{font-size:1.8rem}.calc-row{display:grid;grid-template-columns:1fr 180px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid #343a40}.calc-total{font-size:2.2rem;font-weight:900;color:var(--accent)}
.footer{background:#090a0b;border-top:1px solid #25292d;padding:56px 0 28px;color:#a7afb5}.footer-grid{display:grid;grid-template-columns:1.25fr .75fr .75fr;gap:40px}.footer h4{color:#fff}.footer a{display:block;margin:7px 0}.footer a:hover{color:var(--accent)}.legal{margin-top:36px;padding-top:20px;border-top:1px solid #222;font-size:.8rem;color:#717a81;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.navlinks{display:none;position:absolute;top:79px;left:0;right:0;background:#0f1113;padding:20px;border-bottom:1px solid #333;flex-direction:column;align-items:flex-start}.navlinks.open{display:flex}.menu-btn{display:block}.grid3,.service-grid,.process,.project-grid,.split,.footer-grid{grid-template-columns:1fr 1fr}.split{gap:30px}.process .step{border-right:0;border-bottom:1px solid #30353a;padding-bottom:20px}.hero{min-height:70vh}.hero:after{display:none}}
@media(max-width:640px){.wrap{width:min(100% - 28px,var(--max))}.topbar .wrap{font-size:.78rem}.topbar .wrap span:last-child{display:none}.brand span{display:none}.hero .wrap{padding:70px 0}.section{padding:68px 0}.grid3,.service-grid,.process,.project-grid,.split,.footer-grid,.form{grid-template-columns:1fr}.field.full{grid-column:auto}.visual{min-height:330px}.cta-band .wrap{align-items:flex-start;flex-direction:column}.hero-badge{gap:16px}.calc-row{grid-template-columns:1fr}.page-hero{padding-top:82px}}

.feature-pair{grid-template-columns:repeat(3,1fr)}.feature-card{display:flex;flex-direction:column}.feature-card .btn{margin-top:auto;align-self:flex-start}.calc-panel{background:#171a1d;border:1px solid #343a40;padding:28px}.input-unit{display:flex;align-items:center;gap:8px}.input-unit input{min-width:0;width:100%;padding:12px;background:#101214;border:1px solid #3b4248;color:#fff;font:inherit}.input-unit span{color:#aeb6bd}.calc-panel select{width:100%;padding:12px;background:#101214;border:1px solid #3b4248;color:#fff;font:inherit}.calc-hero{background:linear-gradient(145deg,#0e1012,#24292d 68%,#3a2b0e)}@media(max-width:900px){.feature-pair{grid-template-columns:1fr}.calc-split{grid-template-columns:1fr}}

/* 2026 refresh – an bestehendem Metallbau-Hantke-Auftritt + Reparaturservice ausgerichtet */
:root{--accent:#387dbd;--accent2:#5b98cd;--steel:#d9dde2}
.brand-logo img{width:210px;max-height:62px;object-fit:contain;object-position:left center}
.footer-logo img{width:240px;max-height:82px}
.logo-mark{display:none}
.hero{background:
linear-gradient(90deg,rgba(5,7,10,.96) 0%,rgba(5,7,10,.80) 46%,rgba(5,7,10,.30) 100%),
url('assets/images/projekt-01.jpg') center/cover no-repeat}
.hero:before{background:linear-gradient(180deg,rgba(56,125,189,.06),transparent 42%)}
.hero:after{content:""}
.hero-slogan{width:min(790px,88vw);margin:22px 0 24px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.45))}
.hero .lead{max-width:720px}
.btn.primary{box-shadow:0 8px 28px rgba(56,125,189,.22)}
.service-tile:before{border-color:rgba(56,125,189,.24)}
.real-project{background:#0d1013}
.real-project:before,.real-project:after{display:none}
.real-project img{width:100%;height:100%;min-height:500px;object-fit:cover}
.project .ph.photo{height:320px;padding:0;display:block;background:#111}
.project .ph.photo img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project:hover .ph.photo img{transform:scale(1.025)}
.page-hero{background:linear-gradient(145deg,#0b0e12,#17202c 66%,#162d56)}
@media(max-width:900px){.brand-logo img{width:170px}.nav{min-height:72px}.navlinks{top:73px}}
@media(max-width:640px){.brand-logo img{width:145px}.hero-slogan{width:96%;margin-top:18px}.real-project img{min-height:330px}}

/* Hero mit Original-Firmenfoto und Original-Logo */
.brand-logo img{width:220px;max-height:68px;object-fit:contain;object-position:left center}
.hero{
  min-height:760px;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(4,9,16,.93) 0%,rgba(4,9,16,.82) 34%,rgba(4,9,16,.40) 61%,rgba(4,9,16,.12) 100%),
    linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.28)),
    url('images/hero-werkstatt.jpg') center 48%/cover no-repeat;
}
.hero:before{background:linear-gradient(180deg,rgba(56,125,189,.12),transparent 35%,rgba(0,0,0,.16))}
.hero .wrap{padding:100px 0 88px}
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:end}
.hero-copy{max-width:860px}
.hero h1{font-size:clamp(3.3rem,6.4vw,6.8rem);margin:15px 0 12px;text-shadow:0 5px 30px rgba(0,0,0,.55)}
.hero h1 span:last-child{color:#dce9ff}
.hero-kicker{margin:0 0 18px;font-size:clamp(1.2rem,2.2vw,1.8rem);font-weight:800;color:#fff;letter-spacing:.01em}
.hero .lead{color:#edf2f7;text-shadow:0 2px 14px rgba(0,0,0,.72)}
.hero-seal{justify-self:end;align-self:end;width:230px;background:rgba(255,255,255,.96);padding:10px;box-shadow:0 18px 45px rgba(0,0,0,.33);transform:rotate(-1deg)}
.hero-seal img{width:100%;height:auto}
@media(max-width:900px){
  .hero{min-height:700px;background-position:58% 50%}
  .hero-layout{grid-template-columns:1fr}
  .hero-seal{width:180px;justify-self:start;margin-top:12px}
}
@media(max-width:640px){
  .hero{min-height:680px;background-position:64% 50%}
  .hero .wrap{padding:74px 0 58px}
  .hero-seal{width:145px}
  .hero h1{font-size:clamp(2.7rem,14vw,4.4rem)}
}

/* Referenzgalerie – echte ausgeführte Projekte */
.ref-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:38px}.ref-intro h2{margin-bottom:0}.ref-intro p{color:#aeb6bd;margin:0}.reference-grid{columns:3 300px;column-gap:18px}.ref-item{break-inside:avoid;margin:0 0 18px;border:1px solid #343a40;background:#171a1d;overflow:hidden}.ref-item img{width:100%;height:auto;display:block;transition:transform .35s ease}.ref-item:hover img{transform:scale(1.018)}
@media(max-width:800px){.ref-intro{grid-template-columns:1fr;gap:12px}.reference-grid{columns:2 240px}}
@media(max-width:520px){.reference-grid{columns:1}}


/* Logo 2026: weiße Wortmarke */
.brand-logo{display:flex;align-items:center;background:transparent!important}
.brand-logo img{width:290px;max-height:82px;object-fit:contain;object-position:left center;filter:none}
.footer-logo img{width:280px;max-height:86px}
.hero-layout{grid-template-columns:minmax(0,1fr);max-width:1050px}
.hero-copy{max-width:950px}
.hero-seal{display:none!important}
.trust-strip{background:#0d1218;border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07);padding:24px 0}
.trust-strip-inner{display:flex;align-items:center;gap:28px}
.trust-strip img{width:125px;height:125px;object-fit:contain;flex:0 0 auto}
.trust-strip strong{display:block;font-size:1.25rem;color:#fff;margin:3px 0 5px}
.trust-strip p{margin:0;color:#aeb7c2;max-width:720px}
@media(max-width:900px){.brand-logo img{width:235px}.trust-strip img{width:105px;height:105px}}
@media(max-width:640px){.brand-logo img{width:195px}.trust-strip-inner{align-items:flex-start;gap:18px}.trust-strip img{width:82px;height:82px}.trust-strip strong{font-size:1.05rem}}

/* Feinschliff: kompakteres Logo, Siegel wieder original/lesbar, echtes Startseiten-Referenzbild */
.brand-logo img{width:235px;max-height:68px}
.footer-logo img{width:250px;max-height:82px}
.trust-strip-inner>img{
  width:150px;
  height:auto;
  max-height:150px;
  object-fit:contain;
  padding:8px;
  background:#fff;
  border:1px solid #d9dde2;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  border-radius:2px;
}
.real-project img{object-position:center center}
@media(max-width:900px){
  .brand-logo img{width:205px}
  .trust-strip-inner>img{width:125px;max-height:125px}
}
@media(max-width:640px){
  .brand-logo img{width:170px}
  .footer-logo img{width:210px}
  .trust-strip-inner>img{width:100px;max-height:100px;padding:6px}
}


/* 31.08.2026 – Vertrauensbereich hell, Über-mich-Foto & Mobile-First Feinschliff */
.trust-strip{
  background:#fff;
  color:#111;
  border-top:1px solid #e4e7ea;
  border-bottom:1px solid #e4e7ea;
  padding:28px 0;
}
.trust-strip-inner{gap:32px}
.trust-strip-inner>img{
  width:142px;
  max-height:142px;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.trust-strip .eyebrow{color:#387dbd}
.trust-strip strong{color:#101317;font-size:1.28rem}
.trust-strip p{color:#4f5963}

.about-photo{background:#111;border:0;min-height:520px}
.about-photo:before,.about-photo:after{display:none}
.about-photo img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center center}

/* Tablet */
@media(max-width:900px){
  body{overflow-x:hidden}
  .wrap{width:min(var(--max),calc(100% - 32px))}
  .nav{min-height:68px}
  .brand-logo img{width:185px;max-height:58px}
  .menu-btn{font-size:1.15rem;padding:8px 11px}
  .navlinks{top:69px;max-height:calc(100vh - 69px);overflow-y:auto;gap:0;padding:10px 16px 18px}
  .navlinks a{width:100%;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08)}
  .navlinks .nav-cta{margin-top:10px;text-align:center;padding:12px}
  .hero{min-height:650px;background-position:60% 50%}
  .hero .wrap{padding:78px 0 64px}
  .hero h1{font-size:clamp(3rem,10vw,5rem)}
  .hero .lead{max-width:620px}
  .service-grid{grid-template-columns:1fr 1fr}
  .trust-strip-inner>img{width:120px;max-height:120px}
  .about-photo,.about-photo img{min-height:420px}
}

/* Smartphone */
@media(max-width:640px){
  .wrap{width:calc(100% - 28px)}
  .header{backdrop-filter:blur(8px)}
  .nav{min-height:62px}
  .brand-logo img{width:150px;max-height:48px}
  .navlinks{top:63px}
  .hero{min-height:auto;background-position:68% center}
  .hero:before{background:linear-gradient(90deg,rgba(4,9,16,.94),rgba(4,9,16,.78) 72%,rgba(4,9,16,.48))}
  .hero .wrap{padding:64px 0 52px}
  .hero h1{font-size:clamp(2.55rem,13vw,3.8rem);line-height:.95;letter-spacing:-.045em}
  .hero-kicker{font-size:1.15rem}
  .hero .lead{font-size:1rem;line-height:1.55}
  .actions{display:grid;grid-template-columns:1fr;gap:10px}
  .actions .btn{width:100%;padding:13px 14px}
  .hero-badge{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin-top:28px}
  .hero-badge>div:last-child{grid-column:1/-1}
  .section{padding:56px 0}
  .section h2{font-size:clamp(2rem,10vw,2.8rem)}
  .section-intro{font-size:1rem}
  .service-grid,.grid3,.project-grid,.split,.footer-grid,.process,.form{grid-template-columns:1fr}
  .service-tile{min-height:155px}
  .visual{min-height:300px}
  .real-project img{min-height:300px}
  .trust-strip{padding:30px 0}
  .trust-strip-inner{flex-direction:column;align-items:center;text-align:center;gap:18px}
  .trust-strip-inner>img{width:130px;max-height:130px}
  .trust-strip p{max-width:430px}
  .about-photo,.about-photo img{min-height:330px}
  .about-photo img{object-position:61% center}
  .page-hero{padding:74px 0 48px}
  .page-hero h1{font-size:clamp(2.45rem,12vw,3.5rem)}
  .reference-grid{columns:1}
  .ref-item{margin-bottom:14px}
  .project .ph.photo{height:250px}
  .cta-band{padding:42px 0}
  .cta-band .btn{width:100%}
  .calc-panel{padding:20px}
  .footer{padding-top:44px}
  .footer-logo img{width:180px;max-height:62px}
}

@media(max-width:390px){
  .brand-logo img{width:138px}
  .hero h1{font-size:2.5rem}
  .hero-badge{grid-template-columns:1fr}
  .hero-badge>div:last-child{grid-column:auto}
  .trust-strip-inner>img{width:118px;max-height:118px}
}

/* Beratungs- und Aufmassmodell ab September 2026 */
.consulting-band{background:#f4f6f8;color:#10151b;border-top:1px solid #dce2e8;border-bottom:1px solid #dce2e8}
.consulting-band .eyebrow{color:#387dbd}
.consulting-band h2,.consulting-band h3,.consulting-band strong{color:#10151b}
.consulting-band p{color:#44505c}
.consulting-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.consulting-price{background:#fff;border:1px solid #d8dee5;padding:22px}
.consulting-price strong{display:block;font-size:1.45rem;margin-bottom:6px}
.consulting-credit{background:#101820;color:#fff;padding:22px 24px;border-left:4px solid #387dbd;margin-top:22px}
.consulting-credit strong{color:#fff}.consulting-credit p{color:#e7edf4;margin:6px 0 0}
@media(max-width:720px){.consulting-prices{grid-template-columns:1fr}.consulting-price{padding:18px}.consulting-credit{padding:18px}.consulting-band h2{font-size:clamp(1.8rem,8vw,2.5rem)}}


/* 31.08.2026 – Google Bewertungen, Social Media & Maps */
.footer-grid{grid-template-columns:1.2fr .75fr .75fr .65fr}
.social-link{white-space:nowrap}
.google-reviews{background:#fff;color:#10151b;padding:58px 0;border-top:1px solid #e4e7ea;border-bottom:1px solid #e4e7ea}
.google-reviews-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.google-score{display:flex;align-items:center;gap:22px;padding:28px;border:1px solid #e0e4e8;background:#f7f8f9}
.google-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:800;background:#fff;border:1px solid #ddd;color:#4285f4}
.google-score .eyebrow{color:#387dbd}
.score-line{display:flex;align-items:center;gap:14px;margin:4px 0}.score-line strong{font-size:2.6rem;line-height:1;color:#111}.stars{font-size:1.3rem;letter-spacing:2px;color:#f4b400}
.google-score p{margin:7px 0 0;color:#525c66}.google-review-copy h2{color:#10151b;margin-top:0}.google-review-copy p{color:#4d5964;font-size:1.05rem;line-height:1.7}.btn.dark{background:#111;color:#fff;border-color:#111}.btn.dark:hover{background:#24282c}
.social-band{background:#101820;padding:48px 0}.social-band-inner{display:flex;justify-content:space-between;align-items:center;gap:44px}.social-band h2{margin:5px 0 8px}.social-band p{margin:0;color:#aeb7c2}.social-actions{display:flex;gap:12px;flex-wrap:wrap}.social-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border:1px solid #3a4148;font-weight:700;color:#fff}.social-btn:hover{border-color:#5b98cd;color:#5b98cd}.social-btn span{font-size:1.3rem;font-weight:800}
.location-section h2{color:#10151b}.map-consent{margin-top:28px;background:#dfe5ea;min-height:390px;position:relative;overflow:hidden}.map-placeholder{min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:radial-gradient(circle at 50% 35%,#f8fafb,#dfe5ea)}.map-placeholder h3{font-size:1.7rem;margin:8px 0;color:#10151b}.map-placeholder p{max-width:620px;color:#4f5963}.map-pin{font-size:3rem;color:#387dbd}.map-frame{width:100%;height:430px;border:0;display:block}.contact-social{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:24px}.contact-social strong{color:#10151b}.contact-social a{font-weight:700;color:#2f6ea9}.contact-social a:hover{text-decoration:underline}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}.google-reviews-grid{grid-template-columns:1fr;gap:28px}.social-band-inner{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}.google-reviews{padding:44px 0}.google-score{padding:20px;gap:15px}.google-mark{width:48px;height:48px;font-size:1.65rem}.score-line{align-items:flex-start;flex-direction:column;gap:7px}.score-line strong{font-size:2.25rem}.stars{font-size:1.05rem}.google-review-copy .actions{display:grid}.social-band{padding:40px 0}.social-actions,.social-btn{width:100%}.social-btn{justify-content:center}.map-consent,.map-placeholder{min-height:330px}.map-frame{height:360px}.contact-social{align-items:flex-start;flex-direction:column;gap:10px}}

/* 31.08.2026 – Leistungs-Kacheln mit echten Projektfotos */
.service-tile.service-photo{
  position:relative;
  min-height:270px;
  display:flex;
  align-items:flex-end;
  padding:0;
  overflow:hidden;
  background-color:#111;
  background-image:linear-gradient(180deg,rgba(7,10,13,.04) 18%,rgba(7,10,13,.35) 56%,rgba(7,10,13,.92) 100%);
  background-position:center,center;
  background-size:cover,cover;
  background-repeat:no-repeat,no-repeat;
  border:1px solid #343a40;
  transition:background-size .35s ease,border-color .25s ease;
}

.service-gelaender{background-image:linear-gradient(180deg,rgba(7,10,13,.04) 18%,rgba(7,10,13,.35) 56%,rgba(7,10,13,.92) 100%),url("images/uploads/startseite-echte-projekte/16-20260910-115427-32bb34.jpg")!important}
.service-treppe{background-image:linear-gradient(180deg,rgba(7,10,13,.04) 18%,rgba(7,10,13,.35) 56%,rgba(7,10,13,.92) 100%),url("images/uploads/treppen/5-20260909-211152-313d6d.jpg")!important}
.service-tor{background-image:linear-gradient(180deg,rgba(7,10,13,.04) 18%,rgba(7,10,13,.35) 56%,rgba(7,10,13,.92) 100%),url("images/uploads/tueren-tore/44-20260909-230752-669a70.jpg")!important}
.service-reparatur{background-image:linear-gradient(180deg,rgba(7,10,13,.04) 18%,rgba(7,10,13,.35) 56%,rgba(7,10,13,.92) 100%),url("images/uploads/hero-bilder/61-20260910-115016-09a0d8.jpg")!important}

.service-tile.service-photo:before,
.service-tile.service-photo:after{display:none}
.service-tile.service-photo:hover{
  border-color:#5a93c7;
  background-size:cover,106%;
}
.service-copy{
  position:relative;
  z-index:2;
  width:100%;
  padding:24px 22px 22px;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.service-copy h3{margin:0 0 8px;color:#fff}
.service-copy p{margin:0;color:#e5eaf0}
@media(max-width:900px){.service-tile.service-photo{min-height:245px}}
@media(max-width:640px){
  .service-tile.service-photo{min-height:220px}
  .service-copy{padding:20px 18px}
}

/* 31.08.2026 – Startseiten-Projektfoto kompakter: oben/unten bewusst beschnitten */
.real-project{
  min-height:0;
  height:440px;
}
.real-project img{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center center;
  display:block;
}
@media(max-width:900px){
  .real-project{height:400px}
}
@media(max-width:640px){
  .real-project{height:320px}
}

/* Leistungsseite – echte Projektfotos in passenden Kacheln */
.service-detail-card{position:relative;overflow:hidden;background-size:cover;background-position:center;isolation:isolate}
.service-detail-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,11,.30) 0%,rgba(5,8,11,.72) 48%,rgba(5,8,11,.96) 100%);z-index:-1}
.service-detail-card.card-gelaender{background-image:url("images/uploads/gelaender/21-20260909-215239-c9711f.jpg")}
.service-detail-card.card-treppen{background-image:url("images/uploads/treppen/5-20260909-211152-313d6d.jpg")}
.service-detail-card.card-tore{background-image:url("images/uploads/tueren-tore/44-20260909-230752-669a70.jpg")}
.service-detail-card.card-vordaecher{background-image:url("images/uploads/vordaecher/28-20260909-221925-844239.jpg")}
.service-detail-card.card-stahl{background-image:url("images/uploads/stahlkonstruktionen/29-20260909-222213-ec3dd0.jpg")}
.service-detail-card.card-edelstahl{background-image:url("images/uploads/edelstahl-glas/4-20260909-211012-0a645d.jpg")}
.service-detail-card.card-blech{background-image:url("images/uploads/blechbearbeitung/41-20260909-224736-d33f06.jpg")}
.service-detail-card.card-reparatur{background-image:url("images/uploads/leistungskaesten/48-20260910-002849-4e1813.jpg")}
.service-detail-card .num,.service-detail-card h3,.service-detail-card p,.service-detail-card a{position:relative;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.service-detail-card p{color:#f0f3f5}
@media(max-width:640px){.service-detail-card{min-height:260px;background-position:center}}


/* 31.08.2026 – Feinschliff Leistungsseite: Bildausschnitte je Motiv */
.service-detail-card{
  min-height:260px;
  background-repeat:no-repeat;
}
.service-detail-card.card-gelaender{background-position:50% 54%}
.service-detail-card.card-treppen{background-position:72% 47%}
.service-detail-card.card-tore{background-position:50% 68%}
.service-detail-card.card-vordaecher{background-position:52% 42%}
.service-detail-card.card-stahl{background-position:52% 78%}
.service-detail-card.card-edelstahl{background-position:50% 46%}
.service-detail-card.card-blech{background-position:50% 48%}
.service-detail-card.card-reparatur{background-position:50% 38%}
.service-detail-card:before{
  background:linear-gradient(180deg,rgba(5,8,11,.18) 0%,rgba(5,8,11,.48) 42%,rgba(5,8,11,.94) 100%);
}
@media(max-width:900px){
  .service-detail-card{min-height:280px}
}
@media(max-width:640px){
  .service-detail-card{min-height:300px}
  .service-detail-card.card-treppen{background-position:68% 48%}
  .service-detail-card.card-stahl{background-position:50% 74%}
  .service-detail-card.card-reparatur{background-position:50% 34%}
}

/* 31.08.2026 – Planung, CAD & 3D-Zeichnungen */
.service-detail-card.card-cad{background-image:url("images/uploads/leistungskaesten/49-20260910-002940-c19490.jpg");background-position:50% 52%}
@media(max-width:640px){.service-detail-card.card-cad{background-position:50% 50%}}

/* Kalkulator: Geländer + Tore */

/* Dynamische Kalkulatorfelder müssen das native hidden-Attribut zuverlässig respektieren. */
.calc-row[hidden]{display:none!important}
.calc-tabs{display:flex;gap:10px;margin:28px 0 34px;flex-wrap:wrap}.calc-tab{appearance:none;border:1px solid #424950;background:#171a1d;color:#fff;padding:13px 22px;font:inherit;font-weight:800;cursor:pointer}.calc-tab:hover,.calc-tab.active{background:var(--accent);border-color:var(--accent);color:#111}.calc-section{display:none}.calc-section.active{display:block}.calc-note{margin-top:15px;color:#aeb6bd;font-size:.88rem;line-height:1.55}.calc-note strong{color:#fff}.calc-summary{margin-top:18px;padding:16px 18px;background:#101214;border:1px solid #343a40;color:#c8ced3;font-size:.9rem;line-height:1.65}.calc-summary strong{color:#fff}.calc-summary span{display:block}.hpl-only[hidden]{display:none!important}.calc-row label input[type="checkbox"]{margin-right:8px}.calc-panel option:disabled{color:#6f767c}
@media(max-width:640px){.calc-tabs{display:grid;grid-template-columns:1fr 1fr}.calc-tab{width:100%}}
@media(max-width:640px){.calc-tabs{grid-template-columns:repeat(3,1fr)}.calc-tabs .calc-tab{padding-left:8px;padding-right:8px;font-size:.9rem}}

/* Kundenkalkulator: Erklärung der verfügbaren Treppenlänge */
.calc-help{margin:.45rem 0 0;color:var(--muted,#667085);font-size:.92rem;line-height:1.5}
.stair-run-sketch{margin-top:.9rem;padding:1rem 1.1rem;border:1px solid #cfd5dc;border-radius:12px;background:#f4f6f8;color:#111827;font-size:.9rem;line-height:1.45;overflow:hidden}
.stair-sketch-title{color:#111827;margin-bottom:.35rem}.stair-sketch-caption{color:#26313d;margin-top:.25rem}.stair-run-sketch svg{display:block;width:100%;height:auto;max-width:560px;margin:.15rem auto .2rem;background:#fff;border:1px solid #d9dee4;border-radius:9px;padding:8px;box-sizing:border-box}
.stair-run-sketch .sk-wall,.stair-run-sketch .sk-ground{stroke:#374151;stroke-width:3;fill:none}
.stair-run-sketch .sk-stair{stroke:#111827;stroke-width:5;fill:none;stroke-linejoin:round}
.stair-run-sketch .sk-measure,.stair-run-sketch .sk-arrow{stroke:#111827;stroke-width:2.8;fill:none}
.stair-run-sketch .sk-guide{stroke:#6b7280;stroke-width:1.6;fill:none;stroke-dasharray:4 4}
.stair-run-sketch .sk-label{font-size:14px;fill:#111827;font-weight:800}
.stair-run-sketch .sk-small{font-size:12px;fill:#111827;font-weight:700}
@media(max-width:680px){.stair-run-sketch{padding:.85rem}.stair-run-sketch svg{max-width:100%}.stair-run-sketch .sk-small{font-size:11px}.stair-run-sketch .sk-label{font-size:13px}}

.price-tax-note{margin-top:10px;padding-top:10px;border-top:1px solid #d9dde0;font-size:.82rem;font-weight:600;letter-spacing:.01em;color:#555}

/* V1.35 – Kalkulator-Navigation kompakt in der linken Spalte */
#rechner .calc-split{align-items:start}
#rechner .calc-split>div:first-child{min-width:0}
#rechner .calc-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0 0 30px;
  padding:18px;
  background:#121518;
  border:1px solid #343a40;
}
#rechner .calc-tabs::before{
  content:"Bauteil wählen";
  grid-column:1/-1;
  color:#8f98a0;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0 0 4px;
}
#rechner .calc-tab{
  width:100%;
  min-height:48px;
  padding:11px 12px;
  text-align:left;
  line-height:1.2;
}
@media(max-width:900px){
  #rechner .calc-tabs{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:26px}
}
@media(max-width:520px){
  #rechner .calc-tabs{grid-template-columns:1fr;padding:14px}
  #rechner .calc-tab{min-height:44px}
}

/* V1.36 – linke Rechnernavigation fest an der Oberkante ausrichten */
#rechner .calc-section.active > .calc-split{
  align-items:start !important;
}
#rechner .calc-section.active > .calc-split > div:first-child,
#rechner .calc-section.active > .calc-split > .calc-panel{
  align-self:start !important;
}
#rechner .calc-section.active > .calc-split > div:first-child{
  display:block;
}
#rechner .calc-section.active .calc-tabs{
  margin-top:0 !important;
}


/* V1.37 – stabile Oberkante linke Navigation */
#rechner .calc-section.active .calc-split{
  align-items:start !important;
}
#rechner .calc-section.active .calc-split > div:first-child{
  align-self:start !important;
  margin-top:0 !important;
}
#rechner .calc-section.active .calc-split > .calc-panel{
  align-self:start !important;
  margin-top:0 !important;
}
#rechner .calc-section.active .calc-tabs{
  margin-top:0 !important;
}


/* Über uns / Team – V9 */
.about-hero p{max-width:760px}
.about-owner{align-items:center}
.team-section .section-intro{max-width:850px;margin-bottom:34px}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.team-card{background:#fff;border:1px solid #d9dee4;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.team-photo,.team-placeholder{height:220px;background:#1b222a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.team-placeholder{background:linear-gradient(145deg,#202832,#141a20)}
.team-placeholder svg{width:112px;height:112px;fill:#9aa6b2;opacity:.9}
.team-placeholder svg path:last-child{fill:#387dbd}
.team-copy{padding:20px 18px 22px}
.team-copy h3{margin:6px 0 9px;color:#111;font-size:1.08rem}
.team-copy p{margin:0;color:#5d6872;font-size:.94rem;line-height:1.55}
.team-role{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#387dbd;font-weight:800}
.team-note{margin:20px 0 0;color:#6b747c;font-size:.84rem}
.about-benefit-grid .card{border:1px solid rgba(255,255,255,.10)}
.about-statement-box{max-width:920px;border-left:4px solid #387dbd;padding:8px 0 8px 26px}
.about-statement .quote{margin:0}
@media(max-width:980px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-photo,.team-placeholder{height:250px}}
@media(max-width:620px){.team-grid{grid-template-columns:1fr;gap:14px}.team-photo,.team-placeholder{height:260px}.team-section .section-intro{margin-bottom:24px}.about-statement-box{padding-left:18px}}

/* Über uns / Team – V10: kompakte Mitarbeiterreihe */
.team-grid.team-grid-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:900px;margin:0 auto}
.team-grid-three .team-card{border-radius:12px}
.team-grid-three .team-placeholder{height:150px;background:linear-gradient(145deg,#303941 0%,#20272e 52%,#151a1f 100%)}
.team-grid-three .team-placeholder svg{width:150px;height:112px;opacity:1;filter:drop-shadow(0 7px 8px rgba(0,0,0,.28))}
.team-grid-three .team-copy{padding:16px 16px 18px}
.team-grid-three .team-copy h3{font-size:1rem;margin:5px 0 7px}
.team-grid-three .team-copy p{font-size:.88rem;line-height:1.45}
@media(max-width:760px){.team-grid.team-grid-three{grid-template-columns:1fr}.team-grid-three .team-placeholder{height:145px}}



/* V1.45 Reparatur & Montage: niedrige Kontakt-Hürde + ReparAndy */
.repair-hero .call-btn{border-color:#fff;color:#fff;background:rgba(255,255,255,.07)}
.repair-hero .call-btn:hover{background:#fff;color:#111}
.repair-callout{margin-top:28px;max-width:820px;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid rgba(255,255,255,.18);background:rgba(10,14,18,.72);box-shadow:0 14px 40px rgba(0,0,0,.2)}
.repair-callout-icon{width:50px;height:50px;flex:0 0 50px;border-radius:50%;background:var(--accent);color:#10151b;display:grid;place-items:center;font-size:1.35rem;font-weight:900}
.repair-callout strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:3px}.repair-callout span{display:block;color:#cbd3da;line-height:1.55}.repair-callout a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:800}
.phone-choice{display:grid;grid-template-columns:1.35fr .85fr;gap:30px;align-items:center;padding:28px 30px;margin-bottom:46px;background:#f4f6f8;color:#10151b;border-left:5px solid var(--accent);box-shadow:0 12px 34px rgba(0,0,0,.08)}
.phone-choice h2{color:#10151b;margin:6px 0 8px}.phone-choice p{color:#4c5863;max-width:680px;margin:0}.phone-choice .eyebrow{color:#387dbd}
.phone-choice-number{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:18px 20px;background:#101820;color:#fff;border:1px solid #27323c}
.phone-choice-number>span{grid-row:1/3;font-size:1.7rem}.phone-choice-number strong{font-size:1.45rem;letter-spacing:.015em}.phone-choice-number small{color:#b9c3cc;margin-top:2px}.phone-choice-number:hover{border-color:var(--accent);transform:translateY(-1px)}
.repairandy-band{background:#0d1116;border-top:1px solid #252c33;border-bottom:1px solid #252c33;padding:52px 0}.repairandy-inner{display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center}.repairandy-mark{width:138px;height:138px;border:3px solid var(--accent);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-5deg);box-shadow:inset 0 0 0 7px #0d1116, inset 0 0 0 9px rgba(56,125,189,.35)}
.repairandy-mark span{font-size:.72rem;letter-spacing:.2em;color:#aeb8c2;font-weight:800}.repairandy-mark strong{font-size:1.45rem;line-height:1;color:#fff;margin-top:5px}.repairandy-copy h2{margin:6px 0 10px;font-size:clamp(1.8rem,3.5vw,3rem)}.repairandy-copy p{margin:0;color:#aeb8c2;max-width:700px;line-height:1.65}.repairandy-action{display:flex;flex-direction:column;gap:8px;min-width:210px}.repairandy-action small{color:#8f9aa4;text-align:center}
.repair-form-split{padding-top:0}
@media(max-width:900px){.repairandy-inner{grid-template-columns:auto 1fr}.repairandy-action{grid-column:1/-1;align-items:flex-start}.phone-choice{grid-template-columns:1fr}}
@media(max-width:640px){.repair-callout{align-items:flex-start;padding:16px}.repair-callout-icon{width:44px;height:44px;flex-basis:44px}.phone-choice{padding:22px 18px;margin-bottom:34px}.phone-choice-number{width:100%}.phone-choice-number strong{font-size:1.25rem}.repairandy-inner{grid-template-columns:1fr;text-align:left}.repairandy-mark{width:116px;height:116px}.repairandy-action{grid-column:auto;width:100%;align-items:stretch}.repairandy-action .btn{width:100%}.repairandy-action small{text-align:left}}
/* V1.47 ReparAndy compact landing page */
.repairandy-hero-final{padding:0;background:linear-gradient(135deg,#eef5fb 0%,#fff 52%,#edf4fa 100%);overflow:hidden;border-bottom:1px solid #dbe6ed}
.repairandy-hero-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(520px,1.2fr);gap:34px;align-items:center;min-height:560px}
.repairandy-mascot-wrap{align-self:end;display:flex;justify-content:center;max-height:560px;overflow:hidden}
.repairandy-mascot-wrap img{width:100%;max-width:520px;height:auto;display:block;transform:translateY(4%)}
.repairandy-hero-content{padding:48px 0 42px}.repairandy-slogan{font-size:clamp(25px,2.2vw,38px);font-weight:800;line-height:1.05;color:#10283c;margin-bottom:20px}.repairandy-slogan span{font-size:.62em;font-weight:700}
.repairandy-mark.final{display:flex;align-items:center;gap:18px;width:max-content;max-width:100%;border:5px solid #387dbd;border-radius:14px;padding:9px 20px;transform:rotate(-1.5deg);background:#fff;box-shadow:0 10px 25px rgba(13,54,84,.08);margin-bottom:20px}.repairandy-mark.final strong{font-size:clamp(42px,5vw,72px);line-height:.9;color:#0d2135;letter-spacing:-3px}.repairandy-mark.final strong span{color:#387dbd}.repairandy-tools{font-size:48px;color:#10283c}
.repairandy-hero-content h1{font-size:clamp(27px,2.5vw,42px);margin:0 0 8px;color:#10283c}.repairandy-tagline{font-size:clamp(20px,1.8vw,30px);font-weight:700;margin:0 0 25px;color:#23394b}
.repairandy-services{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 25px}.repairandy-services span{background:#fff;border:1px solid #d6e3ec;border-radius:999px;padding:9px 13px;font-weight:700;color:#18334a}.repairandy-services small{font-weight:500}.repairandy-call{font-size:20px;padding:15px 24px}.repairandy-direct{display:block;margin-top:8px;color:#536a7a}
.repairandy-request-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start}.repairandy-request-intro h2{font-size:clamp(34px,3.4vw,52px);margin-bottom:8px}.repairandy-steps{display:grid;gap:18px;margin:30px 0}.repairandy-steps>div{display:flex;gap:16px;align-items:center}.repairandy-steps b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#387dbd;color:#fff;font-size:22px;flex:0 0 auto}.repairandy-steps span{display:flex;flex-direction:column}.repairandy-steps strong{font-size:19px}.repairandy-steps small{font-size:15px;color:#536a7a;margin-top:2px}.phone-choice.compact{margin-top:28px;padding:20px}.phone-choice.compact h3{margin:0 0 4px}.phone-choice.compact p{margin:0}.repairandy-form{background:#fff;border:1px solid #d9e3ea;border-radius:18px;padding:28px;box-shadow:0 14px 40px rgba(20,54,76,.08)}.repairandy-form h2{grid-column:1/-1;margin:0 0 6px}.repairandy-form h2 em{font-style:normal;color:#387dbd}.repairandy-form .optional{font-weight:400;color:#667}.repairandy-form textarea{min-height:135px}.repairandy-form .consent{font-size:14px}.repairandy-trust{border-top:1px solid #dbe5eb;background:#fff}.repairandy-trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.repairandy-trust span{padding:24px 20px;border-right:1px solid #e0e8ed;color:#506777}.repairandy-trust span:last-child{border-right:0}.repairandy-trust strong{display:block;color:#10283c;margin-bottom:2px}
@media(max-width:900px){.repairandy-hero-grid,.repairandy-request-grid{grid-template-columns:1fr}.repairandy-hero-grid{gap:0}.repairandy-mascot-wrap{max-height:390px;order:2}.repairandy-hero-content{padding:32px 0 8px;order:1}.repairandy-mark.final{transform:none}.repairandy-trust .wrap{grid-template-columns:1fr 1fr}.repairandy-trust span:nth-child(2){border-right:0}.repairandy-request-grid{gap:30px}}
@media(max-width:560px){.repairandy-hero-content{padding-top:25px}.repairandy-mark.final strong{letter-spacing:-2px}.repairandy-tools{font-size:34px}.repairandy-services span{font-size:14px}.repairandy-call{display:block;text-align:center;width:100%}.repairandy-mascot-wrap{max-height:320px}.repairandy-request-intro h2{font-size:34px}.repairandy-form{padding:20px}.repairandy-trust .wrap{grid-template-columns:1fr}.repairandy-trust span{border-right:0;border-bottom:1px solid #e0e8ed}.phone-choice.compact{display:block}.phone-choice.compact .phone-choice-number{margin-top:14px}.repairandy-request-grid{gap:24px}}

/* V1.48 ReparAndy – Hero als zusammenhängender Auftritt + großzügige Desktop-Geometrie */
.repair-page .header{position:relative;z-index:20}
.repairandy-showcase{background:#eef5fb;border-bottom:1px solid #dbe6ed;overflow:hidden}
.repairandy-showcase-inner{position:relative;width:min(1480px,100%);margin:0 auto;background:#eef5fb}
.repairandy-showcase img{display:block;width:100%;height:auto;margin:0 auto}
.repairandy-hero-phone-hit{position:absolute;right:4.5%;bottom:8%;width:18%;height:12%;border-radius:999px}
.repairandy-hero-phone-hit:focus-visible{outline:4px solid #111;outline-offset:4px}
.repairandy-mobile-hero{display:none}
.repairandy-request-section{padding:72px 0 78px}
.repairandy-request-grid.wrap{width:min(1320px,calc(100% - 64px));grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:72px}
.repairandy-request-intro{padding-top:12px}
.repairandy-request-intro .eyebrow{color:#387dbd}
.repairandy-request-intro h2{font-size:clamp(46px,4.4vw,68px);line-height:.98;max-width:560px}
.repairandy-request-intro .section-intro{font-size:20px;color:#536a7a}
.repairandy-steps{gap:22px;margin:36px 0}
.repairandy-steps>div{gap:18px}
.repairandy-steps b{width:54px;height:54px;font-size:24px;background:#387dbd}
.repairandy-steps strong{font-size:21px;color:#10283c}
.repairandy-steps small{font-size:16px}
.phone-choice.compact{border-left-color:#387dbd;background:#eaf3fa;border-radius:14px;box-shadow:none}
.phone-choice.compact .phone-choice-number{border-radius:10px;background:#10283c}
.repairandy-form{padding:34px;border-radius:20px;box-shadow:0 18px 50px rgba(20,54,76,.10)}
.repairandy-form h2{font-size:clamp(32px,3vw,46px);line-height:1;margin-bottom:10px}
.repairandy-form label{font-weight:800;color:#172c3e}
.repairandy-form textarea,.repairandy-form input{font-size:16px}
.repairandy-main-question textarea{min-height:170px}
.repairandy-send{width:100%;font-size:18px;padding:16px 20px;background:#387dbd;border-color:#387dbd;color:#fff}
.repairandy-send:hover{background:#2f6ea9;color:#fff}
.repairandy-trust .wrap{width:min(1320px,calc(100% - 64px))}
@media(max-width:980px){
  .repairandy-showcase{display:none}
  .repairandy-mobile-hero{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);align-items:center;background:linear-gradient(135deg,#eef5fb,#fff);padding:34px 24px 0;color:#10283c;overflow:hidden}
  .repairandy-mobile-hero>img{align-self:end;max-height:440px;object-fit:contain;object-position:bottom center}
  .repairandy-mobile-hero>div{padding:18px 24px 42px}
  .repairandy-mobile-mark{display:inline-block;border:4px solid #387dbd;border-radius:12px;padding:6px 14px;background:#fff;font-weight:900;font-size:clamp(44px,8vw,72px);line-height:1;letter-spacing:-3px;transform:rotate(-1deg)}
  .repairandy-mobile-mark span{color:#387dbd}
  .repairandy-mobile-hero h1{font-size:clamp(28px,4vw,42px);margin:20px 0 8px}
  .repairandy-mobile-hero p{font-size:20px;font-weight:700;margin:0 0 20px}
  .repairandy-mobile-hero small{display:block;margin-top:8px;color:#536a7a}
  .repairandy-request-grid.wrap{width:min(100% - 36px,760px);grid-template-columns:1fr;gap:38px}
  .repairandy-request-intro h2{font-size:48px}
  .repairandy-trust .wrap{width:min(100% - 36px,760px)}
}
@media(max-width:640px){
  .repairandy-mobile-hero{grid-template-columns:1fr;padding:24px 18px 0;text-align:left}
  .repairandy-mobile-hero>div{order:1;padding:8px 0 24px}
  .repairandy-mobile-hero>img{order:2;max-height:330px;margin:0 auto}
  .repairandy-mobile-mark{font-size:46px}
  .repairandy-mobile-hero h1{font-size:30px}
  .repairandy-mobile-hero p{font-size:18px}
  .repairandy-mobile-hero .btn{width:100%}
  .repairandy-request-section{padding:54px 0 58px}
  .repairandy-request-grid.wrap{width:min(100% - 28px,760px)}
  .repairandy-request-intro h2{font-size:38px}
  .repairandy-request-intro .section-intro{font-size:18px}
  .repairandy-form{padding:22px}
  .repairandy-form h2{font-size:32px}
  .repairandy-trust .wrap{width:min(100% - 28px,760px)}
}

/* V1.49 ReparAndy – dunkler, ruhiger, exakt an der Hauptnavigation ausgerichtet */
.repair-page{background:var(--bg);color:var(--text)}
.repair-page main{background:var(--bg)}

.repairandy-dark-hero{
  background:
    radial-gradient(circle at 20% 18%,rgba(56,125,189,.10),transparent 34%),
    linear-gradient(180deg,#111417 0%,#0e1012 100%);
  border-bottom:1px solid var(--line);
  padding:54px 0 52px;
  overflow:hidden;
}
.repairandy-dark-hero-grid{
  display:grid;
  grid-template-columns:minmax(360px,.88fr) minmax(0,1.12fr);
  gap:54px;
  align-items:center;
}
.repairandy-dark-visual{
  position:relative;
  min-height:470px;
  border:1px solid #30363d;
  background:#15191d;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(0,0,0,.28);
}
.repairandy-dark-visual:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(14,16,18,.15),transparent 24%,transparent 72%,rgba(14,16,18,.88)),
    linear-gradient(0deg,rgba(14,16,18,.78),transparent 34%);
}
.repairandy-dark-visual img{
  width:100%;height:100%;min-height:470px;object-fit:cover;object-position:44% center;
  filter:saturate(.94) contrast(1.03) brightness(.86);
}
.repairandy-dark-copy{min-width:0}
.repairandy-dark-kicker{font-size:clamp(30px,3vw,46px);font-weight:900;line-height:1;color:#fff;letter-spacing:-.035em}
.repairandy-dark-mark{
  display:inline-flex;align-items:baseline;gap:0;
  padding:10px 18px 12px;
  border:3px solid var(--accent);
  background:#11161b;
  box-shadow:0 0 0 5px rgba(56,125,189,.08);
  transform:rotate(-1deg);
  margin-bottom:24px;
  font-size:clamp(45px,5vw,70px);
  font-weight:950;line-height:.9;letter-spacing:-.055em;
}
.repairandy-dark-mark span{color:#fff}
.repairandy-dark-mark strong{color:var(--accent)}
.repairandy-dark-copy h1{font-size:clamp(30px,3.2vw,48px);line-height:1.02;margin:0 0 10px;letter-spacing:-.03em;color:#fff}
.repairandy-dark-tagline{font-size:clamp(19px,1.8vw,27px);font-weight:750;color:#cbd3da;margin:0 0 26px}
.repairandy-dark-services{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 28px}
.repairandy-dark-services span{padding:8px 11px;border:1px solid #343b43;background:#171b20;color:#d8dde2;font-size:14px;font-weight:700}
.repairandy-dark-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.repairandy-dark-actions span{color:#9ea8b1;font-size:14px}
.repairandy-dark-call{padding:15px 20px;color:#fff!important;background:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 10px 30px rgba(56,125,189,.20)}

.repairandy-request-section{
  background:#0f1215!important;
  color:var(--text)!important;
  padding:70px 0 76px;
}
.repairandy-request-grid.wrap{
  width:min(var(--max),calc(100% - 40px));
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
}
.repairandy-request-intro .eyebrow{color:var(--accent)}
.repairandy-request-intro h2{color:#fff;font-size:clamp(42px,4vw,60px);max-width:540px}
.repairandy-request-intro .section-intro{color:#aeb6bd;font-size:19px}
.repairandy-steps strong{color:#f4f6f7}
.repairandy-steps small{color:#9aa4ad}
.repairandy-steps b{background:var(--accent)}

.phone-choice.compact{
  background:#171b1f;
  border:1px solid #30363c;
  border-left:3px solid var(--accent);
  color:#eef2f5;
  box-shadow:none;
}
.phone-choice.compact h3{color:#fff}
.phone-choice.compact p{color:#9ea8b1}
.phone-choice.compact .phone-choice-number{background:#20252a;border:1px solid #39414a;color:#fff}

.repairandy-form{
  margin-top:0;
  background:#171b1f;
  border:1px solid #30363c;
  border-radius:14px;
  padding:30px;
  box-shadow:0 20px 45px rgba(0,0,0,.22);
}
.repairandy-form h2{color:#fff}
.repairandy-form h2 em{color:var(--accent)}
.repairandy-form label{color:#d9dfe4}
.repairandy-form .optional,.repairandy-form .calc-note{color:#909aa3}
.repairandy-form .field input,
.repairandy-form .field textarea,
.repairandy-form .field select{
  background:#20252a;
  border:1px solid #3a424a;
  color:#f7f9fa;
  border-radius:7px;
  box-shadow:none;
}
.repairandy-form .field input::placeholder,
.repairandy-form .field textarea::placeholder{color:#8f99a2;opacity:1}
.repairandy-form .field input:focus,
.repairandy-form .field textarea:focus,
.repairandy-form .field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,125,189,.14)
}
.repairandy-form input[type="file"]{padding:11px 12px}
.repairandy-form input[type="file"]::file-selector-button{
  border:0;background:#2b3137;color:#fff;padding:9px 12px;margin-right:12px;border-radius:5px;cursor:pointer
}
.repairandy-form .consent{color:#aeb6bd}
.repairandy-send{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}

.repairandy-trust{background:#0b0d0f;border-top:1px solid #262b30}
.repairandy-trust .wrap{width:min(var(--max),calc(100% - 40px))}
.repairandy-trust span{color:#969fa7;border-right:1px solid #262b30;padding:22px 18px}
.repairandy-trust strong{color:#fff}

@media(max-width:980px){
  .repairandy-dark-hero{padding:38px 0 0}
  .repairandy-dark-hero-grid{grid-template-columns:1fr;gap:28px}
  .repairandy-dark-copy{order:1}
  .repairandy-dark-visual{order:2;min-height:380px}
  .repairandy-dark-visual img{min-height:380px;object-position:42% 35%}
  .repairandy-request-grid.wrap{width:min(100% - 36px,760px);grid-template-columns:1fr;gap:34px}
  .repairandy-trust .wrap{width:min(100% - 36px,760px)}
}
@media(max-width:640px){
  .repairandy-dark-hero{padding-top:30px}
  .repairandy-dark-hero-grid{width:min(100% - 28px,var(--max));gap:22px}
  .repairandy-dark-mark{font-size:46px;padding:8px 12px 10px}
  .repairandy-dark-visual{min-height:310px}
  .repairandy-dark-visual img{min-height:310px}
  .repairandy-dark-actions{align-items:stretch;flex-direction:column}
  .repairandy-dark-call{width:100%;text-align:center}
  .repairandy-request-grid.wrap,.repairandy-trust .wrap{width:min(100% - 28px,760px)}
  .repairandy-form{padding:21px}
}

/* V1.51 ReparAndy – echte Reparatur-/Montagepauschalen + Zonenkarte */
.repairandy-dark-price-link{
  color:#eaf1f7!important;background:#171b20!important;border:1px solid #3a424a!important;
  padding:15px 18px!important;
}
.repairandy-dark-price-link:hover{border-color:var(--accent)!important;background:#20262d!important;color:#fff!important}

.repairandy-pricing{
  background:#0d1013;
  border-bottom:1px solid #262c32;
  padding:66px 0 70px;
  color:#dbe1e6;
}
.repairandy-pricing>.wrap{width:min(var(--max),calc(100% - 40px))}
.repairandy-pricing-head{
  display:block;margin-bottom:34px
}
.repairandy-pricing-head .eyebrow{color:var(--accent);margin-bottom:10px}
.repairandy-pricing-head h2{color:#fff;font-size:clamp(34px,3.6vw,52px);margin:0 0 13px;letter-spacing:-.035em}
.repairandy-pricing-head p{max-width:850px;margin:0;color:#aab4bd;font-size:18px}
.repairandy-pricing-head p strong{color:#e9eef2}

.repairandy-zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.repairandy-zone-card{
  position:relative;overflow:hidden;background:#171b1f;border:1px solid #30373e;border-top:3px solid var(--accent);
  padding:24px 24px 22px;min-height:220px
}
.repairandy-zone-card:after{
  content:"";position:absolute;right:-36px;bottom:-50px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,125,189,.11),transparent 68%);pointer-events:none
}
.repairandy-zone-card .zone-kicker{display:block;color:#7fa7cd;font-size:12px;font-weight:900;letter-spacing:.11em;margin-bottom:13px}
.repairandy-zone-card h3{color:#fff;font-size:20px;margin:0 0 16px}
.repairandy-zone-price{display:block;color:#fff;font-size:38px;line-height:1;margin-bottom:18px;letter-spacing:-.035em}
.repairandy-zone-price small{font-size:13px;color:#9da8b1;font-weight:750;letter-spacing:0}
.repairandy-zone-card p{margin:0;color:#aab3bb;font-size:14px;line-height:1.5}
.repairandy-zone-card p strong{color:#e9edf1}

.repairandy-map-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;align-items:stretch}
.repairandy-map-card{background:#13171b;border:1px solid #30373e;padding:18px;border-radius:10px}
.repairandy-map-title{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:2px 4px 13px}
.repairandy-map-title span{color:#7e8b96;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.repairandy-map-title strong{color:#fff;font-size:18px}
.repairandy-map-card svg{display:block;width:100%;height:auto;border-radius:8px}
.repairandy-price-notes{display:grid;gap:12px}
.repairandy-price-notes article{
  display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:#171b1f;border:1px solid #30373e;padding:18px
}
.repairandy-price-notes article>span{
  width:40px;height:40px;display:grid;place-items:center;background:#202936;border:1px solid #567a9f;color:#a3c2df;font-weight:900;font-size:19px
}
.repairandy-price-notes h3{margin:1px 0 6px;color:#fff;font-size:17px}
.repairandy-price-notes p{margin:0;color:#a7b0b8;font-size:14px;line-height:1.55}
.repairandy-price-notes p strong{color:#eef2f5}
.repairandy-pricing-footnote{margin:14px 0 0;text-align:right;color:#78838d;font-size:12px}

@media(max-width:980px){
  .repairandy-pricing>.wrap{width:min(100% - 36px,760px)}
  .repairandy-zone-grid{grid-template-columns:1fr}
  .repairandy-map-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .repairandy-pricing{padding:50px 0 54px}
  .repairandy-pricing>.wrap{width:min(100% - 28px,760px)}
  .repairandy-pricing-head p{font-size:16px}
  .repairandy-zone-card{min-height:0;padding:20px}
  .repairandy-zone-price{font-size:34px}
  .repairandy-map-card{padding:10px}
  .repairandy-map-title{display:block;padding:5px 4px 10px}
  .repairandy-map-title strong{display:block;margin-top:4px;font-size:17px}
  .repairandy-price-notes article{grid-template-columns:36px 1fr;padding:15px}
  .repairandy-price-notes article>span{width:36px;height:36px}
  .repairandy-pricing-footnote{text-align:left}
}


/* V1.52 – Leistungen und Referenzen zusammengeführt */
.service-link-card{
  display:block;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  padding-bottom:54px;
}
.service-link-card:hover{
  transform:translateY(-3px);
  border-color:#5a93c7;
  box-shadow:0 14px 32px rgba(0,0,0,.22);
}
.service-link-card:after{
  content:"Beispiele ansehen →";
  position:absolute;
  left:28px;
  bottom:24px;
  z-index:2;
  color:var(--accent);
  font-weight:800;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.service-link-card.service-link-repair:after{content:"Zum Reparaturservice →"}
.service-link-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.service-reference-hero .service-back-link{
  display:inline-block;
  margin-top:24px;
  color:var(--accent);
  font-weight:800;
  text-decoration:none;
}
.service-reference-hero .service-back-link:hover{text-decoration:underline}
.reference-subsection + .reference-subsection{margin-top:76px;padding-top:70px;border-top:1px solid var(--line)}
.ref-photo-link{display:block}
.ref-photo-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.cad-reference{margin-top:36px;border:1px solid #343a40;background:#171a1d;overflow:hidden}
.cad-reference img{display:block;width:100%;height:auto;max-height:720px;object-fit:cover}
@media(max-width:640px){
  .service-link-card{padding-bottom:56px}
  .service-link-card:after{left:24px;bottom:22px}
  .reference-subsection + .reference-subsection{margin-top:54px;padding-top:50px}
}

/* V1.57: Über-uns-Headline auf Desktop einzeilig halten */
@media (min-width: 901px){
  .about-hero h1{
    font-size:clamp(2.8rem,4.35vw,4.75rem);
    white-space:nowrap;
    letter-spacing:-.045em;
  }
}

/* V1.58 – Referenzbilder: sanfter Hover-Zoom + Lightbox statt neuem Browser-Tab */
.ref-photo-link{
  position:relative;
  display:block;
  overflow:hidden;
  cursor:zoom-in;
}
.ref-photo-link img{
  transform-origin:center center;
  transition:transform .32s ease,filter .32s ease;
}
@media (hover:hover) and (pointer:fine){
  .ref-photo-link:hover img,
  .ref-photo-link:focus-visible img{
    transform:scale(1.045);
    filter:brightness(.92);
  }
  .ref-photo-link::after{
    content:"Bild vergrößern";
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:rgba(7,10,13,.78);
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.01em;
    opacity:0;
    transform:translateY(5px);
    transition:opacity .22s ease,transform .22s ease;
    pointer-events:none;
  }
  .ref-photo-link:hover::after,
  .ref-photo-link:focus-visible::after{
    opacity:1;
    transform:translateY(0);
  }
}

body.lightbox-open{overflow:hidden}
.ref-lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:64px 82px 48px;
  background:rgba(3,5,7,.94);
  backdrop-filter:blur(5px);
}
.ref-lightbox.is-open{display:flex}
.ref-lightbox-image{
  display:block;
  max-width:min(1380px,calc(100vw - 164px));
  max-height:calc(100vh - 112px);
  width:auto;
  height:auto;
  object-fit:contain;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.ref-lightbox-close,
.ref-lightbox-nav{
  position:absolute;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  background:rgba(18,22,26,.82);
  color:#fff;
  font:inherit;
  font-size:1.7rem;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.ref-lightbox-close:hover,
.ref-lightbox-nav:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#111;
}
.ref-lightbox-close:focus-visible,
.ref-lightbox-nav:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
}
.ref-lightbox-close{top:18px;right:22px}
.ref-lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.ref-lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
.ref-lightbox-prev:hover{transform:translateY(-50%) scale(1.05)}
.ref-lightbox-next:hover{transform:translateY(-50%) scale(1.05)}
.ref-lightbox-counter{
  position:absolute;
  left:50%;
  bottom:15px;
  transform:translateX(-50%);
  color:#d4d9de;
  font-size:.86rem;
  font-weight:700;
  letter-spacing:.03em;
}
.ref-lightbox[aria-hidden="true"]{pointer-events:none}

@media(max-width:700px){
  .ref-lightbox{padding:58px 12px 74px}
  .ref-lightbox-image{
    max-width:calc(100vw - 24px);
    max-height:calc(100vh - 146px);
  }
  .ref-lightbox-close{top:10px;right:12px}
  .ref-lightbox-nav{
    top:auto;
    bottom:12px;
    width:44px;
    height:44px;
  }
  .ref-lightbox-prev{left:14px;transform:none}
  .ref-lightbox-next{right:14px;transform:none}
  .ref-lightbox-prev:hover,.ref-lightbox-next:hover{transform:none}
  .ref-lightbox-counter{bottom:24px}
}

/* V1.59 – Vorher/Nachher-Slider in den Referenzen */
.before-after-grid{
  display:grid;
  gap:22px;
  margin:0 0 30px;
}
.before-after-card{
  margin:0;
  border:1px solid #343a40;
  background:#171a1d;
  overflow:hidden;
}
.before-after{
  position:relative;
  aspect-ratio:16/10;
  background:#0b0f14;
  overflow:hidden;
  user-select:none;
  touch-action:none;
  cursor:ew-resize;
}
.before-after-base,
.before-after-overlay{
  position:absolute;
  inset:0;
}
.before-after img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.before-after-overlay{
  width:50%;
  overflow:hidden;
}
.before-after-divider{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:0;
  z-index:3;
  pointer-events:none;
}
.before-after-divider::before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:2px;
  background:rgba(255,255,255,.96);
  box-shadow:0 0 0 1px rgba(9,14,20,.22),0 0 30px rgba(0,0,0,.3);
}
.before-after-handle{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:58px;
  height:58px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--accent);
  box-shadow:0 14px 28px rgba(0,0,0,.34);
}
.before-after-handle::before{
  content:"↔";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#0d1218;
  font-size:1.35rem;
  font-weight:900;
}
.before-after-label{
  position:absolute;
  top:16px;
  z-index:4;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(7,10,13,.82);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  pointer-events:none;
}
.before-after-label.before{left:16px}
.before-after-label.after{right:16px}
.before-after-range{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  width:calc(100% - 36px);
  z-index:5;
  opacity:.0001;
  margin:0;
}
.before-after-card figcaption{
  display:grid;
  gap:6px;
  padding:18px 20px 20px;
}
.before-after-card figcaption strong{
  font-size:1.08rem;
  color:#fff;
}
.before-after-card figcaption span{
  color:#aeb6bd;
}
@media(max-width:640px){
  .before-after{aspect-ratio:4/3}
  .before-after-handle{width:52px;height:52px}
  .before-after-label{top:12px;padding:7px 10px;font-size:.74rem}
}

/* V1.60 – Startseiten-Headline als kompakter Zweizeiler */
.hero-block-headline{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  width:max-content;
  max-width:100%;
}
.hero-block-headline .hero-line{
  display:block;
  white-space:nowrap;
}
.hero-block-headline .hero-line-bottom{
  font-size:.735em;
  line-height:1.03;
  letter-spacing:-.045em;
}
@media(max-width:640px){
  .hero-block-headline{
    width:100%;
  }
  .hero-block-headline .hero-line-bottom{
    font-size:.72em;
  }
}

/* V1.62 – kurzer Erklärhinweis zur Vor-Ort-Pauschale */
.consulting-why{
  background:#edf4fa;
  border:1px solid #cadcec;
  border-left:4px solid #387dbd;
  padding:18px 22px;
  margin:4px 0 18px;
}
.consulting-why strong{
  display:block;
  margin-bottom:5px;
  font-size:1rem;
  color:#10151b;
}
.consulting-why p{
  margin:0;
  color:#33475b;
}
@media(max-width:720px){
  .consulting-why{padding:16px 18px}
}


/* V1.63 – Vor-Ort-Pauschale zusammengefasst in einem langen weißen Kasten */
.consulting-info{
  background:#fff;
  border:1px solid #d8dee5;
  padding:22px;
  margin:4px 0 22px;
}
.consulting-info strong{
  display:block;
  margin-bottom:8px;
  font-size:1rem;
  color:#10151b;
}
.consulting-info p{
  margin:0;
  color:#44505c;
}
.consulting-info p + p{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e3e8ee;
}
.consulting-info p + p strong{
  display:inline;
  margin:0;
}
@media(max-width:720px){
  .consulting-info{padding:18px}
}


/* V1.64 – einheitlicher Pauschalhinweis + kompakter Hinweis im Preisrechner */
.calc-consulting-band{
  padding-top:64px;
  padding-bottom:64px;
}
.calc-consulting-band h2{
  margin-bottom:20px;
}
.calc-consulting-info{
  max-width:980px;
  background:#fff;
  border:1px solid #d8dee5;
  padding:20px 22px;
  margin:0 0 18px;
}
.calc-consulting-info p{
  margin:0;
  color:#44505c;
}
.calc-consulting-info p + p{
  margin-top:11px;
}
.calc-consulting-info strong{
  color:#10151b;
}
.calc-consulting-rates{
  padding-top:11px;
  border-top:1px solid #e3e8ee;
}
.calc-consulting-creditline{
  color:#263b55!important;
}
@media(max-width:720px){
  .calc-consulting-band{padding-top:52px;padding-bottom:52px}
  .calc-consulting-info{padding:18px}
}


/* V1.65 – kundenfreundliche Bruttopreise bei öffentlichen Pauschalen */
.consulting-price .public-price{
  display:block;
  font-size:1.55rem;
  line-height:1.12;
  margin:4px 0 2px;
  color:#10151b;
}
.consulting-price .public-price small{
  display:block;
  margin-top:5px;
  font-size:.72rem;
  line-height:1.2;
  font-weight:700;
  color:#5e6974;
  letter-spacing:0;
}
.consulting-price .price-net{
  margin:0 0 10px;
  color:#7b858f;
  font-size:.78rem;
  font-weight:700;
}
.calc-consulting-rates b{color:#10151b}
.calc-consulting-rates small{
  color:#6d7883;
  white-space:nowrap;
}
.repairandy-zone-price{
  margin-bottom:4px;
}
.repairandy-zone-price small{
  display:block;
  margin-top:7px;
  line-height:1.15;
}
.repairandy-zone-net{
  display:block;
  margin:0 0 16px;
  color:#84919d;
  font-size:12px;
  font-weight:750;
}
.repairandy-price-notes small{
  color:#9ca8b3;
  white-space:nowrap;
}
@media(max-width:720px){
  .consulting-price .public-price{font-size:1.45rem}
  .calc-consulting-rates small{white-space:normal}
}

/* ============================================================
   V1.65 LIGHT TEST – ruhiger heller Inhaltsbereich
   Header, Hero/Page-Hero, CTA und Footer bleiben als starke
   dunkle/markante Klammern erhalten. Inhalte werden hell.
   TESTFASSUNG – Master V1.65 bleibt unverändert.
   ============================================================ */

/* Grundfläche */
body,
main{
  background:#f4f6f8;
  color:#10151b;
}

/* Dunkle Markenklammern bewusst erhalten */
.topbar,
.header,
.hero,
.page-hero,
.footer{
  color:#f5f7f8;
}
.page-hero h1,
.page-hero h2,
.page-hero h3{color:#fff}
.page-hero p{color:#c3ccd5}

/* Inhaltssektionen nur noch in hellen Abstufungen */
.section,
.section.soft{
  background:#fff;
  color:#10151b;
}
.section.light{
  background:#f4f6f8;
  color:#10151b;
}
.section h1,
.section h2,
.section h3,
.section h4,
.section strong{color:#10151b}
.section .section-intro,
.section .bullet p,
.section .step p,
.section .quote small,
.section p{color:#4f5b66}
.section .eyebrow{color:var(--accent)}

/* Karten, Ablauf und Standard-Infoboxen */
.section .card:not(.service-detail-card){
  background:#fff;
  border-color:#d8dee5;
  color:#10151b;
  box-shadow:0 8px 24px rgba(20,35,50,.045);
}
.section .card:not(.service-detail-card) p{color:#56616b}
.process{border-top-color:#d7dde3}
.step{border-right-color:#d7dde3}
.notice{
  background:#eef3f8;
  border-left-color:var(--accent);
  color:#3f4d59;
}

/* Foto-Leistungskarten bleiben als Fotokarten dunkel – nicht als ganze Sektion */
.service-tile.service-photo,
.service-detail-card{
  color:#fff;
}
.service-tile.service-photo h3,
.service-tile.service-photo p,
.service-detail-card h3,
.service-detail-card p{color:#fff}
.service-detail-card p{color:#f0f3f5}

/* Projekte / Referenzen */
.project{
  background:#fff;
  border-color:#d8dee5;
  color:#10151b;
}
.project .body p{color:#56616b}
.tag{border-color:#cfd6dd;color:#53606b;background:#f8fafb}
.ref-intro p{color:#56616b}
.reference-subsection + .reference-subsection{border-top-color:#d9dfe5}
.before-after-card{background:#fff;border-color:#d8dee5}
.before-after-card figcaption strong{color:#10151b}
.before-after-card figcaption span{color:#59646f}

/* Standardformulare auf heller Fläche */
.section label{color:#384551}
.section .field input,
.section .field textarea,
.section .field select{
  background:#fff;
  border-color:#cfd7df;
  color:#10151b;
}
.section .field input::placeholder,
.section .field textarea::placeholder{color:#89949e}
.section .field input:focus,
.section .field textarea:focus,
.section .field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(56,125,189,.12);
}

/* Kundenkalkulator: helle Arbeitsfläche */
#rechner{
  background:#fff;
  color:#10151b;
}
#rechner .calc-tabs{
  background:#f3f6f9;
  border-color:#d5dce3;
}
#rechner .calc-tabs::before{color:#6d7883}
#rechner .calc-tab{
  background:#fff;
  color:#18222c;
  border-color:#ccd5dd;
}
#rechner .calc-tab:hover,
#rechner .calc-tab.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
#rechner .calc-panel{
  background:#f8fafb;
  border-color:#d5dce3;
  color:#10151b;
}
#rechner .calc-panel h2,
#rechner .calc-panel h3,
#rechner .calc-panel strong{color:#10151b}
#rechner .calc-row{border-bottom-color:#dbe1e6}
#rechner .input-unit input,
#rechner .calc-panel select{
  background:#fff;
  border-color:#cfd7df;
  color:#10151b;
}
#rechner .input-unit span,
#rechner .calc-note{color:#65717c}
#rechner .calc-note strong{color:#28343f}
#rechner .calc-summary{
  background:#edf3f8;
  border-color:#d1dbe4;
  color:#43515e;
}
#rechner .calc-summary strong{color:#10151b}

/* Startseite: ein bewusster dunkler Akzent bleibt Social Media */
.social-band{
  background:#101820;
  color:#fff;
}
.social-band h2{color:#fff}
.social-band p{color:#aeb7c2}

/* ReparAndy: Hero bleibt dunkel, Informationen werden hell */
.repair-page,
.repair-page main{
  background:#f4f6f8;
  color:#10151b;
}
.repairandy-pricing{
  background:#f4f6f8;
  border-bottom:1px solid #dbe1e6;
  color:#10151b;
}
.repairandy-pricing-head h2{color:#10151b}
.repairandy-pricing-head p{color:#52606c}
.repairandy-pricing-head p strong{color:#10151b}
.repairandy-zone-card{
  background:#fff;
  border-color:#d5dde5;
  border-top-color:var(--accent);
  box-shadow:0 8px 24px rgba(20,35,50,.045);
}
.repairandy-zone-card .zone-kicker{color:#2f68cc}
.repairandy-zone-card h3,
.repairandy-zone-price{color:#10151b}
.repairandy-zone-price small,
.repairandy-zone-net{color:#6e7a85}
.repairandy-zone-card p{color:#55616c}
.repairandy-zone-card p strong{color:#10151b}

/* Die Zonenkarte selbst bleibt dunkel: sie funktioniert als grafisches Element */
.repairandy-map-card{
  background:#fff;
  border-color:#d5dde5;
  box-shadow:0 8px 24px rgba(20,35,50,.04);
}
.repairandy-map-title span{color:#6e7983}
.repairandy-map-title strong{color:#10151b}
.repairandy-price-notes article{
  background:#fff;
  border-color:#d5dde5;
}
.repairandy-price-notes article>span{
  background:#edf3fb;
  border-color:#c9d9ef;
  color:#2f68cc;
}
.repairandy-price-notes h3{color:#10151b}
.repairandy-price-notes p{color:#56616c}
.repairandy-price-notes p strong{color:#10151b}
.repairandy-price-notes small{color:#6e7983}
.repairandy-pricing-footnote{color:#6f7b86}

.repairandy-request-section{
  background:#fff!important;
  color:#10151b!important;
}
.repairandy-request-intro h2,
.repairandy-steps strong{color:#10151b}
.repairandy-request-intro .section-intro,
.repairandy-steps small{color:#586571}
.phone-choice.compact{
  background:#eef4fa;
  border-color:#d4dee8;
  border-left-color:var(--accent);
  color:#10151b;
}
.phone-choice.compact h3{color:#10151b}
.phone-choice.compact p{color:#53606c}
.phone-choice.compact .phone-choice-number{
  background:#101820;
  border-color:#27323c;
  color:#fff;
}
.repairandy-form{
  background:#f7f9fb;
  border-color:#d5dde5;
  box-shadow:0 14px 34px rgba(20,35,50,.07);
}
.repairandy-form h2{color:#10151b}
.repairandy-form label{color:#273541}
.repairandy-form .optional,
.repairandy-form .calc-note,
.repairandy-form .consent{color:#66727d}
.repairandy-form .field input,
.repairandy-form .field textarea,
.repairandy-form .field select{
  background:#fff;
  border-color:#cfd7df;
  color:#10151b;
}
.repairandy-form .field input::placeholder,
.repairandy-form .field textarea::placeholder{color:#8a959f}
.repairandy-form input[type="file"]::file-selector-button{
  background:#e5ebf1;
  color:#18222c;
}
.repairandy-trust{
  background:#f4f6f8;
  border-top-color:#dbe1e6;
}
.repairandy-trust span{
  color:#5f6b76;
  border-right-color:#dbe1e6;
}
.repairandy-trust strong{color:#10151b}

/* Die eigentlichen Heroes bleiben bewusst dunkel */
.repairandy-dark-hero,
.repairandy-dark-hero h1,
.repairandy-dark-hero strong{color:#fff}

/* Rechtstexte / einfache Inhaltsseiten */
.section > .wrap > p,
.section > .wrap > ul,
.section > .wrap > ol{color:#4f5b66}

/* Mobile: helle Trennlinien statt dunkler */
@media(max-width:900px){
  .process .step{border-bottom-color:#d7dde3}
}


/* LIGHT TEST 3 – Preisrechner konsequent hell */
.calc-consulting-band{
  background:#f4f6f8!important;
  color:#10151b!important;
}
.calc-consulting-band h2,
.calc-consulting-band strong{color:#10151b!important}
.calc-consulting-band p{color:#4f5b66!important}

#rechner.calc-workspace{
  background:#f4f6f8!important;
  color:#10151b!important;
}
#rechner.calc-workspace > .wrap{
  background:#fff;
  border:1px solid #d9e0e6;
  padding:34px;
  box-shadow:0 12px 36px rgba(21,35,48,.055);
}
#rechner .calc-section.active > .calc-split > div:first-child{
  background:#fff!important;
  color:#10151b!important;
}
#rechner .calc-panel{
  background:#f7f9fb!important;
  border:1px solid #d6dee5!important;
  color:#10151b!important;
}
#rechner .calc-row label,
#rechner .calc-row,
#rechner .calc-panel label{color:#33404c!important}
#rechner .input-unit input,
#rechner .calc-panel input,
#rechner .calc-panel select,
#rechner .calc-panel textarea{
  background:#fff!important;
  border-color:#cbd5de!important;
  color:#10151b!important;
}
#rechner .notice{
  background:#eef4f9!important;
  color:#3f4d59!important;
  border-left-color:var(--accent)!important;
}
#rechner .pricebox{
  background:#fff!important;
  color:#10151b!important;
  border:1px solid #d6dee5;
  border-left:5px solid var(--accent);
  box-shadow:0 8px 24px rgba(20,35,50,.045);
}
#rechner .pricebox small{color:#5c6873!important}
#rechner .calc-total{color:var(--accent)!important}
@media(max-width:720px){
  #rechner.calc-workspace > .wrap{padding:22px}
}

/* ============================================================
   LIGHT TEST 4 – SCHIEFER / ANTHRAZIT
   Harte schwarze Flächen werden durch neutrales Stahl-Anthrazit
   ersetzt. Helle Inhaltsflächen bleiben unverändert.
   ============================================================ */
:root{
  --anthracite:#303840;
  --anthracite-deep:#262d33;
  --slate:#3a444d;
  --slate-soft:#46515b;
  --dark-line:#515c66;
}

/* obere Markenklammer */
.topbar{
  background:#282f35;
  border-bottom-color:#46515a;
}
.header{
  background:rgba(48,56,64,.96);
  border-bottom-color:rgba(255,255,255,.11);
}
@media(max-width:900px){
  .navlinks{
    background:#303840;
    border-bottom-color:#515c66;
  }
}

/* Startseiten-Hero: Foto bleibt, schwarzer Schleier wird anthrazit */
.hero{
  background:
    linear-gradient(90deg,rgba(42,50,58,.96) 0%,rgba(42,50,58,.84) 34%,rgba(42,50,58,.48) 61%,rgba(42,50,58,.16) 100%),
    linear-gradient(180deg,rgba(58,68,77,.10),rgba(38,45,51,.34)),
    url('images/hero-werkstatt.jpg') center 48%/cover no-repeat;
}
.hero:before{
  background:linear-gradient(180deg,rgba(56,125,189,.12),transparent 35%,rgba(38,45,51,.18));
}

/* Unterseiten-Kopf */
.page-hero,
.calc-hero{
  background:linear-gradient(145deg,#3a444d 0%,#303840 62%,#26313e 100%);
  border-bottom-color:#515c66;
}

/* einzelne bewusste dunkle Akzente */
.social-band{
  background:#35404a;
}
.btn.dark{
  background:#35404a;
  border-color:#35404a;
}
.btn.dark:hover{
  background:#46515b;
}
.phone-choice.compact .phone-choice-number{
  background:#35404a;
  border-color:#515c66;
}

/* ReparAndy-Hero ebenfalls Stahl-Anthrazit statt Schwarz */
.repairandy-dark-hero{
  background:
    radial-gradient(circle at 20% 18%,rgba(56,125,189,.11),transparent 34%),
    linear-gradient(180deg,#3a444d 0%,#2d353c 100%);
  border-bottom-color:#515c66;
}
.repairandy-dark-visual{
  background:#303840;
  border-color:#515c66;
}
.repairandy-dark-visual:after{
  background:
    linear-gradient(90deg,rgba(42,50,58,.12),transparent 24%,transparent 72%,rgba(42,50,58,.80)),
    linear-gradient(0deg,rgba(42,50,58,.74),transparent 34%);
}
.repairandy-dark-mark{
  background:#303840;
}
.repairandy-dark-services span{
  background:#3a444d;
  border-color:#56616b;
}

/* dunkle Platzhalter / grafische Metallflächen */
.service-tile:not(.service-photo){
  background:linear-gradient(145deg,#46515b,#303840);
  border-color:#56616b;
}
.visual:not(.real-project){
  background:linear-gradient(145deg,#46515b,#303840);
  border-color:#56616b;
}
.real-project,
.project .ph.photo,
.about-photo{
  background:#303840;
}

/* Footer als ruhiger Abschluss */
.footer{
  background:#282f35;
  border-top-color:#46515a;
}
.footer .legal{
  border-top-color:#46515a;
  color:#aeb7bf;
}


/* LIGHT TEST 6 – Stammkunden-Hinweis bei Vor-Ort-Aufmaß */
.stammkunden-note{
  margin-top:14px!important;
  padding-top:14px!important;
  border-top:1px solid #e3e8ee;
  color:#33475b!important;
}
.stammkunden-note strong{
  display:inline!important;
  margin:0!important;
  color:var(--accent)!important;
}


/* STARTSEITE TEST 7 – heller & freundlicher */
.home-page{background:#ffffff;color:#10151b}
.home-page .hero{min-height:700px;color:#10283c;background:
  linear-gradient(90deg,rgba(248,251,253,.96) 0%,rgba(248,251,253,.90) 36%,rgba(245,249,252,.72) 55%,rgba(239,246,251,.38) 72%,rgba(235,243,249,.16) 100%),
  linear-gradient(180deg,rgba(255,255,255,.10),rgba(56,125,189,.08)),
  url('images/hero-werkstatt.jpg') center 48%/cover no-repeat;
  border-bottom:1px solid #dbe4ea}
.home-page .hero:before{background:radial-gradient(circle at 12% 8%,rgba(56,125,189,.08),transparent 26%),repeating-linear-gradient(125deg,transparent 0 64px,rgba(16,40,60,.03) 65px 66px);transform:none}
.home-page .hero:after{color:rgba(56,125,189,.08);top:2vh;right:3vw}
.home-page .hero .wrap{padding:84px 0 78px}
.home-page .hero h1{text-shadow:0 3px 14px rgba(16,40,60,.12)}
.home-page .hero h1 span:first-child{color:#10283c}
.home-page .hero h1 span:last-child{color:#1b4b73}
.home-page .lead{color:#526272;max-width:760px;text-shadow:none}
.home-page .lead strong{color:#10283c}
.home-page .hero .btn:not(.primary){background:#fff;color:#10283c;border-color:#cad7e0}
.home-page .hero .btn:not(.primary):hover{border-color:#387dbd;color:#1b4b73;background:#f8fbfd}
.home-page .hero-badge{margin-top:34px;gap:14px;color:#506272}
.home-page .hero-badge>div{background:rgba(255,255,255,.92);border:1px solid #d8e4ec;box-shadow:0 14px 32px rgba(16,40,60,.08);border-radius:14px;padding:16px 18px;min-width:170px}
.home-page .hero-badge strong{color:#10283c}
.home-page .hero-badge span{color:#627382}
.home-page .section.home-services{background:#f6f8fa;color:#111;border-top:1px solid #e4eaee;border-bottom:1px solid #e4eaee}
.home-page .section.home-services .service-grid{gap:18px}
.home-page .section.home-services .service-tile{border-color:#d8e1e7;box-shadow:0 16px 36px rgba(16,40,60,.08)}
.home-page .trust-strip{background:#f6f9fb;border-top:1px solid #e3eaef;border-bottom:1px solid #e3eaef}
.home-page .google-reviews{background:#fbfcfd}
.home-page .section:not(.light):not(.soft):not(.consulting-band):not(.social-band):not(.cta-band){background:#fff;color:#111}
.home-page .section .section-intro{color:#566674}
.home-page .bullet p{color:#566674}
.home-page .home-quote{background:#f7fafc}
.home-page .quote{color:#10283c}
.home-page .quote small{color:#62717e}
@media(max-width:900px){.home-page .hero-badge>div{min-width:calc(50% - 8px)}.home-page .hero .wrap{padding:74px 0 64px}}
@media(max-width:640px){.home-page .hero-badge>div{min-width:100%}.home-page .hero .actions{display:grid}.home-page .hero .btn{width:100%}}


/* TEST 9 – Unterseiten heller und Headlines filigraner */
/* Nur Kopfbereich dunkel, die großen Überschriftenbereiche auf Unterseiten werden hell */
.page-hero,
.calc-hero{
  background:linear-gradient(135deg,#eff3f6 0%,#f8fafb 56%,#edf4fa 100%);
  border-bottom:1px solid #dde6ec;
  color:#10151b;
  position:relative;
}
.page-hero::before,
.calc-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(125deg,transparent 0 74px,rgba(16,32,48,.03) 75px 76px);
  pointer-events:none;
}
.page-hero .wrap,
.calc-hero .wrap{position:relative;z-index:1}
.page-hero h1,
.calc-hero h1{
  color:#10283c;
  font-size:clamp(2.55rem,5.1vw,5rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.038em;
  max-width:1100px;
}
.page-hero p,
.calc-hero p{
  color:#586977;
  max-width:860px;
}
.page-hero .eyebrow,
.calc-hero .eyebrow{color:#387dbd}

/* Die allgemeine dunkle Markenklammer gilt NICHT mehr für Unterseiten-Heros */
.page-hero h1,
.page-hero h2,
.page-hero h3,
.calc-hero h1,
.calc-hero h2,
.calc-hero h3{color:#10283c}

/* Große Überschriften etwas schlanker und weniger brachial */
.section h2{
  font-size:clamp(1.95rem,3.5vw,3rem);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:800;
}
.card h3,
.step h3,
.google-reviews h2,
.social-band h2,
.cta-band h2,
.consulting-band h2,
.phone-choice h2,
.repairandy-request-intro h2{
  font-weight:800;
  letter-spacing:-.022em;
}
.home-page .hero h1{
  font-weight:800;
  letter-spacing:-.042em;
}
.quote{
  font-weight:800;
  letter-spacing:-.024em;
}

/* Unterseiten wirken weicher, aber abgesetzt vom Inhalt */
.page-hero{box-shadow:inset 0 -1px 0 rgba(255,255,255,.55)}
@media(max-width:640px){
  .page-hero,.calc-hero{padding:76px 0 46px}
  .page-hero h1,.calc-hero h1{font-size:clamp(2.2rem,11vw,3.3rem)}
  .section h2{font-size:clamp(1.8rem,9vw,2.5rem)}
}


/* TEST 10 – Richtung A: eleganter und ruhiger */
:root{
  --page-soft:#f7f9fb;
  --page-soft-2:#f2f5f8;
  --copy-soft:#5f6f7d;
}

/* Allgemeine Ruhe */
.section{padding:98px 0}
@media(max-width:640px){.section{padding:72px 0}}
.section h2{
  font-size:clamp(1.85rem,3.2vw,2.8rem);
  line-height:1.09;
  letter-spacing:-.022em;
  font-weight:780;
}
.card h3,.step h3,.project .body h3,.google-review-copy h2,.social-band h2,.cta-band h2,.consulting-band h2,.phone-choice h2,.repairandy-request-intro h2{
  font-weight:780;
  letter-spacing:-.016em;
}
.section p,.section .section-intro,.section .bullet p,.section .step p,.section .quote small,.light .card p,.project .body p,.ref-intro p{
  color:var(--copy-soft);
}

/* Unterseiten-Hero noch ruhiger und hochwertiger */
.page-hero,.calc-hero{
  background:linear-gradient(135deg,#f5f7fa 0%,#fbfcfd 58%,#f1f6fa 100%);
  border-bottom:1px solid #e4eaef;
}
.page-hero::before,.calc-hero::before{
  background:repeating-linear-gradient(125deg,transparent 0 88px,rgba(16,32,48,.022) 89px 90px);
}
.page-hero h1,.calc-hero h1{
  font-size:clamp(2.35rem,4.6vw,4.5rem);
  font-weight:760;
  line-height:1.02;
  letter-spacing:-.03em;
  max-width:980px;
}
.page-hero p,.calc-hero p{
  color:#667785;
  font-size:1.03rem;
  max-width:820px;
}

/* Startseite auch einen Tick ruhiger */
.home-page .hero{
  background:radial-gradient(circle at 84% 18%,rgba(56,125,189,.10),transparent 23%),linear-gradient(135deg,#f6f9fb 0%,#ffffff 56%,#f0f5f9 100%);
}
.home-page .hero:before{
  background:radial-gradient(circle at 12% 8%,rgba(56,125,189,.06),transparent 24%),repeating-linear-gradient(125deg,transparent 0 78px,rgba(16,40,60,.025) 79px 80px);
}
.home-page .hero h1{
  font-weight:780;
  letter-spacing:-.036em;
}
.home-page .lead{color:#61717f}
.home-page .hero-badge>div{
  background:rgba(255,255,255,.94);
  border:1px solid #e0e7ec;
  box-shadow:0 10px 24px rgba(16,40,60,.06);
  border-radius:16px;
}

/* Karten filigraner */
.section .card:not(.service-detail-card),
.project,
.before-after-card,
.repairandy-form{
  border-color:#e2e8ed;
  box-shadow:0 8px 22px rgba(16,40,60,.04);
  border-radius:16px;
}
.light .card, .section .card:not(.service-detail-card){background:#fff}
.notice,.consulting-info,.phone-choice.compact{
  background:#f5f8fb;
  border:1px solid #e1e8ee;
  border-left:4px solid var(--accent);
  box-shadow:none;
  border-radius:14px;
}
.process{border-top-color:#dfe6eb}
.step{border-right-color:#dfe6eb}

/* Buttons etwas eleganter */
.btn{
  border-radius:12px;
  padding:14px 18px;
  font-weight:720;
}
.btn.primary{box-shadow:none}
.btn:hover{transform:translateY(-1px)}

/* Bewusst weniger harte dunkle Akzente */
.social-band{background:#3b4650}
.footer{background:#2f3942}
.topbar{background:#25303a}
.header{background:rgba(52,61,70,.96)}
.navlinks .nav-cta{border-color:#4f88c0}

/* Bildkacheln leichter */
.service-tile.service-photo{border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(16,40,60,.08)}
.service-tile.service-photo h3{font-weight:780;letter-spacing:-.014em}

/* Zitat leichter */
.quote{font-size:clamp(1.65rem,3.5vw,2.7rem);line-height:1.16;font-weight:760;letter-spacing:-.018em;color:#1a3146}

@media(max-width:640px){
  .page-hero,.calc-hero{padding:74px 0 44px}
  .page-hero h1,.calc-hero h1{font-size:clamp(2.05rem,10vw,3rem)}
  .section h2{font-size:clamp(1.7rem,8vw,2.3rem)}
}


/* TEST 11 – Hintergrundbilder in den Hero-Bereichen sauber zurückholen */
/* In TEST 10 wurden einige Bildhintergründe durch spätere Gradient-Regeln überschrieben. */
.home-page .hero{
  background:
    linear-gradient(90deg,rgba(248,251,253,.96) 0%,rgba(248,251,253,.90) 34%,rgba(245,249,252,.73) 54%,rgba(238,245,250,.40) 71%,rgba(234,242,248,.18) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(56,125,189,.06)),
    url('images/hero-werkstatt.jpg') center 50%/cover no-repeat;
}
.home-page .hero:before{
  background:radial-gradient(circle at 12% 8%,rgba(56,125,189,.06),transparent 24%),repeating-linear-gradient(125deg,transparent 0 78px,rgba(16,40,60,.025) 79px 80px);
}

/* Unterseiten: heller Bereich bleibt, bekommt aber wieder Bildtiefe */
.page-hero,
.calc-hero{
  background:
    linear-gradient(90deg,rgba(247,249,251,.95) 0%,rgba(250,252,253,.92) 38%,rgba(245,249,252,.76) 58%,rgba(238,244,249,.44) 76%,rgba(233,240,246,.24) 100%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(56,125,189,.05)),
    url('images/hero-werkstatt.jpg') right center/cover no-repeat;
  border-bottom:1px solid #e4eaef;
}
.page-hero::before,
.calc-hero::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,0)),
    repeating-linear-gradient(125deg,transparent 0 88px,rgba(16,32,48,.022) 89px 90px);
}

/* etwas mehr Hintergrund-Präsenz für große Hero-Titel */
.page-hero h1,
.calc-hero h1{
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

/* About Hero darf auf dem Foto etwas mehr zeigen */
.about-hero{
  background:
    linear-gradient(90deg,rgba(247,249,251,.93) 0%,rgba(250,252,253,.88) 35%,rgba(245,249,252,.66) 55%,rgba(238,244,249,.30) 74%,rgba(233,240,246,.14) 100%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(56,125,189,.05)),
    url('images/hero-werkstatt.jpg') center 46%/cover no-repeat;
}


/* TEST 12 – Leistungs-Kacheln: Lesbarkeit */
.section .service-detail-card{
  color:#fff;
  border-color:#d7e0e6;
}
.section .service-detail-card:before{
  background:linear-gradient(180deg,rgba(20,27,33,.18) 0%,rgba(20,27,33,.50) 38%,rgba(20,27,33,.84) 68%,rgba(20,27,33,.97) 100%);
}
.section .service-detail-card h3{
  color:#ffffff!important;
  font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.75);
}
.section .service-detail-card p{
  color:#eef3f6!important;
  opacity:1!important;
  font-weight:500;
  text-shadow:0 2px 10px rgba(0,0,0,.78);
}
.section .service-detail-card .num{
  color:#4b91cf!important;
  text-shadow:0 2px 8px rgba(0,0,0,.70);
}
.section .service-detail-card a{
  color:#4b91cf!important;
  font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.80);
}


/* TEST 13 – Einheitlicher Seitenaufbau mit Bild links + Intro rechts */
.page-intro-hero{
  background:#f5f7f9;
  border-bottom:1px solid #dfe7ed;
  overflow:hidden;
}
.page-intro-grid{
  display:grid;
  grid-template-columns:minmax(340px,.95fr) minmax(0,1.05fr);
  gap:48px;
  align-items:stretch;
  min-height:430px;
}
.page-intro-media{
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:430px;
}
.page-intro-photo-frame{
  position:relative;
  width:100%;
  min-height:100%;
  overflow:hidden;
  clip-path:polygon(0 0,88% 0,100% 100%,0 100%);
  background:#cfd8df;
}
.page-intro-photo-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.page-intro-media::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:46%;
  background:linear-gradient(135deg,rgba(34,42,49,.78),rgba(34,42,49,.18));
  clip-path:polygon(0 0,62% 0,100% 44%,0 86%);
  z-index:2;
  pointer-events:none;
}
.page-intro-media::after{
  content:"";
  position:absolute;
  right:-2px;
  top:0;
  bottom:0;
  width:90px;
  background:linear-gradient(180deg,rgba(44,52,60,.98),rgba(58,67,76,.96));
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%);
  z-index:2;
  pointer-events:none;
}
.page-intro-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:690px;
  padding:68px 0 64px;
}
.page-intro-copy .eyebrow{color:var(--accent)}
.page-intro-chip{
  display:inline-flex;
  align-self:flex-start;
  margin-top:12px;
  padding:8px 14px;
  border:1px solid #cfe0ee;
  background:#fff;
  color:#1d5f95;
  font-weight:800;
  border-radius:999px;
}
.page-intro-copy h1{
  font-size:clamp(2.45rem,5vw,4.4rem);
  line-height:1.03;
  letter-spacing:-.032em;
  font-weight:780;
  color:#202b34;
  margin:16px 0 16px;
  max-width:760px;
}
.page-intro-copy p{
  font-size:1.09rem;
  line-height:1.6;
  color:#62717d;
  max-width:780px;
  margin:0;
}
.page-intro-hero-home .page-intro-copy h1{font-size:clamp(2.8rem,6vw,5.3rem)}
.page-intro-hero .actions{margin-top:26px}
.page-intro-hero .hero-badge{
  margin-top:30px;
  gap:14px;
  color:#5d6e7b;
}
.page-intro-hero .hero-badge>div{
  background:rgba(255,255,255,.94);
  border:1px solid #dde6ec;
  box-shadow:0 10px 24px rgba(16,40,60,.05);
  border-radius:16px;
  padding:16px 18px;
}
.page-intro-hero .hero-badge strong{color:#10283c}
.page-intro-hero .hero-badge span{color:#647685}
.page-intro-hero-compact .page-intro-grid{min-height:340px}
.page-intro-hero-compact .page-intro-media{min-height:340px}
.page-intro-hero-compact .page-intro-copy{padding:54px 0}
.page-intro-hero-compact .page-intro-copy h1{font-size:clamp(2rem,4vw,3.2rem)}
.page-intro-hero-repair .page-intro-copy h1{font-size:clamp(2.3rem,4.9vw,4rem)}

/* Alte Hero-Blöcke werden in Test 13 nicht mehr genutzt */
.home-page .hero,
.page-hero,
.calc-hero,
.repairandy-dark-hero{background:none!important}

@media(max-width:980px){
  .page-intro-grid{grid-template-columns:1fr;gap:0;min-height:auto}
  .page-intro-media{min-height:320px}
  .page-intro-photo-frame{clip-path:none;border-radius:0 0 20px 20px}
  .page-intro-media::after{width:78px}
  .page-intro-copy{padding:34px 0 46px;max-width:none}
}
@media(max-width:640px){
  .page-intro-media{min-height:250px}
  .page-intro-media::before{width:58%;clip-path:polygon(0 0,72% 0,100% 42%,0 86%)}
  .page-intro-media::after{width:56px}
  .page-intro-copy h1{font-size:clamp(2rem,10vw,3.1rem)}
  .page-intro-hero-home .page-intro-copy h1{font-size:clamp(2.25rem,12vw,3.6rem)}
}


/* TEST 14 – Split-Layout nur Unterseiten, alle gleich hoch und ca. 25 % flacher */
.page-intro-hero{
  background:#f5f7f9;
}
.page-intro-grid{
  grid-template-columns:minmax(340px,.95fr) minmax(0,1.05fr);
  gap:44px;
  align-items:stretch;
  min-height:320px;
}
.page-intro-media{
  min-height:320px;
}
.page-intro-photo-frame{
  min-height:320px;
}
.page-intro-copy{
  max-width:690px;
  padding:42px 0 40px;
}
.page-intro-copy h1{
  font-size:clamp(2.15rem,4.2vw,3.75rem);
  margin:12px 0 12px;
}
.page-intro-copy p{
  font-size:1.02rem;
  line-height:1.55;
}
.page-intro-hero-home .page-intro-copy h1{font-size:clamp(2.8rem,6vw,5.3rem)}
.page-intro-hero-compact .page-intro-grid,
.page-intro-hero-compact .page-intro-media,
.page-intro-hero-compact .page-intro-photo-frame,
.page-intro-hero-repair .page-intro-grid,
.page-intro-hero-repair .page-intro-media,
.page-intro-hero-repair .page-intro-photo-frame{
  min-height:320px;
}
.page-intro-hero-compact .page-intro-copy,
.page-intro-hero-repair .page-intro-copy{
  padding:42px 0 40px;
}
.page-intro-hero-compact .page-intro-copy h1,
.page-intro-hero-repair .page-intro-copy h1{
  font-size:clamp(2.15rem,4.2vw,3.75rem);
}
/* Startseite ausdrücklich nicht auf Split-Hero umstellen */
.home-page .hero{
  display:block;
}
@media(max-width:980px){
  .page-intro-grid{grid-template-columns:1fr;gap:0;min-height:auto}
  .page-intro-media,.page-intro-photo-frame{min-height:240px}
  .page-intro-copy{padding:28px 0 38px;max-width:none}
}
@media(max-width:640px){
  .page-intro-media,.page-intro-photo-frame{min-height:210px}
  .page-intro-copy h1,
  .page-intro-hero-compact .page-intro-copy h1,
  .page-intro-hero-repair .page-intro-copy h1{font-size:clamp(1.95rem,9.8vw,2.9rem)}
}


/* TEST 15 – ReparAndy-Motiv im Split-Hero beibehalten */
.repairandy-intro-frame{
  background:linear-gradient(135deg,#eef4f8 0%,#dfeaf2 100%);
}
.repairandy-intro-frame img{
  object-fit:contain;
  object-position:center bottom;
  padding:18px 28px 0;
  background:transparent;
}
.page-intro-hero-repair .page-intro-media::before{
  opacity:.45;
}
.page-intro-hero-repair .page-intro-media::after{
  background:linear-gradient(180deg,rgba(44,52,60,.94),rgba(58,67,76,.90));
}
@media(max-width:980px){
  .repairandy-intro-frame img{padding:12px 20px 0}
}


/* TEST 16 – WIRKLICH feste Höhe: 320 px auf allen Unterseiten */
@media(min-width:981px){
  .page-intro-hero{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    overflow:hidden!important;
  }
  .page-intro-grid{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    align-items:stretch!important;
  }
  .page-intro-media,
  .page-intro-photo-frame{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    overflow:hidden!important;
  }
  .page-intro-photo-frame img{
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    object-fit:cover!important;
  }
  .page-intro-copy{
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    overflow:hidden!important;
    justify-content:center!important;
    padding:22px 0!important;
  }
  .page-intro-copy .eyebrow{
    font-size:.72rem!important;
    margin:0!important;
  }
  .page-intro-copy h1,
  .page-intro-hero-compact .page-intro-copy h1,
  .page-intro-hero-repair .page-intro-copy h1{
    font-size:clamp(2rem,3.6vw,3.25rem)!important;
    line-height:1.03!important;
    margin:9px 0 10px!important;
  }
  .page-intro-copy p{
    font-size:.96rem!important;
    line-height:1.48!important;
    margin:0!important;
  }
  .page-intro-chip{
    margin-top:7px!important;
    padding:5px 11px!important;
    font-size:.8rem!important;
  }
  .page-intro-hero .actions{
    margin-top:14px!important;
    gap:9px!important;
  }
  .page-intro-hero .actions .btn{
    padding:10px 14px!important;
    font-size:.9rem!important;
  }
  /* ReparAndy bleibt vollständig sichtbar, aber innerhalb derselben 320 px */
  .repairandy-intro-frame img{
    object-fit:contain!important;
    object-position:center bottom!important;
    padding:10px 24px 0!important;
    background:transparent!important;
  }
}

/* Unter 981 px wird gestapelt; dort ist eine feste Gesamthöhe unpraktisch */
@media(max-width:980px){
  .page-intro-hero,
  .page-intro-grid,
  .page-intro-media,
  .page-intro-photo-frame,
  .page-intro-copy{
    height:auto!important;
    max-height:none!important;
  }
}


/* TEST 17 – Startseitenbild zurück, Über-uns-Foto kleiner, Überschriften schlanker */
/* Startseite: Hintergrundbild wieder sichtbar */
.home-page .hero{
  background:
    linear-gradient(90deg,rgba(248,251,253,.95) 0%,rgba(248,251,253,.89) 35%,rgba(244,249,252,.70) 55%,rgba(238,245,250,.35) 74%,rgba(233,241,247,.16) 100%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(56,125,189,.05)),
    url('images/hero-werkstatt.jpg') center 50%/cover no-repeat !important;
  border-bottom:1px solid #dbe4ea;
}
.home-page .hero:before{
  background:radial-gradient(circle at 12% 8%,rgba(56,125,189,.06),transparent 24%),repeating-linear-gradient(125deg,transparent 0 78px,rgba(16,40,60,.025) 79px 80px);
}

/* Über uns: Andy-Foto mindestens 30 % kleiner */
.about-owner .visual.about-photo{
  min-height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef3f6;
  border:1px solid #d8e2e8;
  padding:24px;
}
.about-owner .about-photo img{
  width:auto;
  height:auto;
  min-height:0;
  max-width:70%;
  max-height:70%;
  object-fit:contain;
  object-position:center center;
  margin:0 auto;
  display:block;
}
@media(max-width:900px){
  .about-owner .visual.about-photo{min-height:330px;padding:18px}
  .about-owner .about-photo img{max-width:72%;max-height:72%}
}
@media(max-width:640px){
  .about-owner .visual.about-photo{min-height:280px}
  .about-owner .about-photo img{max-width:78%;max-height:78%}
}

/* Überschriften insgesamt schlanker */
.hero h1,
.page-intro-copy h1,
.page-hero h1,
.calc-hero h1{
  font-weight:700 !important;
  letter-spacing:-.024em !important;
}
.section h2,
.google-reviews h2,
.social-band h2,
.cta-band h2,
.consulting-band h2,
.phone-choice h2,
.repairandy-request-intro h2,
.map-placeholder h3,
.page-intro-copy h2{
  font-weight:680 !important;
  letter-spacing:-.018em !important;
}
.card h3,
.step h3,
.project .body h3,
.consulting-info strong,
.repairandy-zone-card h3,
.notice strong{
  font-weight:650 !important;
  letter-spacing:-.012em !important;
}
.hero-block-headline .hero-line-bottom{letter-spacing:-.028em !important}
.quote{font-weight:700 !important;letter-spacing:-.012em !important}
.btn{font-weight:680}


/* TEST 17 final overrides */
.home-page .hero{
  background:
    linear-gradient(90deg,rgba(248,251,253,.88) 0%,rgba(248,251,253,.82) 35%,rgba(244,249,252,.62) 55%,rgba(238,245,250,.25) 74%,rgba(233,241,247,.08) 100%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(56,125,189,.04)),
    url('images/hero-werkstatt.jpg') center 50%/cover no-repeat !important;
}
.hero h1,
.page-intro-copy h1,
.page-hero h1,
.calc-hero h1,
.section h2,
.google-reviews h2,
.social-band h2,
.cta-band h2,
.consulting-band h2,
.phone-choice h2,
.repairandy-request-intro h2,
.map-placeholder h3,
.page-intro-copy h2,
.card h3,
.step h3,
.project .body h3,
.repairandy-zone-card h3{
  font-weight:600 !important;
}
.quote{font-weight:600 !important}


/* V1.66 TEST 1 – Startseite ruhiger und klarer */
.home-page .hero{
  min-height:620px;
}
.home-page .hero .wrap{
  padding:72px 0 66px;
}
.home-page .hero .actions{
  margin-top:28px;
}
.home-page .hero-repair-link{
  display:inline-flex;
  margin-top:15px;
  color:#315c7c;
  font-weight:650;
  font-size:.96rem;
  border-bottom:1px solid rgba(56,125,189,.28);
  padding-bottom:2px;
}
.home-page .hero-repair-link:hover{
  color:#387dbd;
  border-bottom-color:#387dbd;
}
.home-credentials{
  background:#fff;
  border-bottom:1px solid #e1e7ec;
}
.home-credentials-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  min-height:92px;
}
.home-credential-item{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 28px;
  border-right:1px solid #e3e9ee;
}
.home-credential-item:first-child{padding-left:0}
.home-credential-item:last-child{border-right:0;padding-right:0}
.home-credential-item strong{
  color:#132d42;
  font-size:1.02rem;
  font-weight:650;
  letter-spacing:-.01em;
}
.home-credential-item span{
  margin-top:3px;
  color:#6d7b86;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.085em;
}
@media(max-width:760px){
  .home-page .hero{min-height:auto}
  .home-page .hero .wrap{padding:58px 0 52px}
  .home-credentials-inner{grid-template-columns:1fr;min-height:auto}
  .home-credential-item,
  .home-credential-item:first-child,
  .home-credential-item:last-child{
    padding:14px 0;
    border-right:0;
    border-bottom:1px solid #e3e9ee;
  }
  .home-credential-item:last-child{border-bottom:0}
}


/* V1.66 TEST 2 – Startseite: ruhiger Split-Hero nach Bild/Text-Prinzip */
.home-split-hero{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,54%);
  min-height:590px;
  background:#fff;
  border-bottom:1px solid #e2e7eb;
  overflow:hidden;
}
.home-split-visual{
  position:relative;
  min-height:590px;
  overflow:hidden;
  background:#d8e0e5;
  clip-path:polygon(0 0,92% 0,100% 100%,0 100%);
}
.home-split-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:54% 50%;
}
.home-split-shape{
  position:absolute;
  display:block;
  pointer-events:none;
  background:rgba(43,51,58,.92);
}
.home-split-shape-a{
  width:43%;
  height:48%;
  left:-7%;
  top:11%;
  clip-path:polygon(18% 0,100% 37%,60% 66%,60% 100%,0 78%,0 20%);
}
.home-split-shape-b{
  width:37%;
  height:43%;
  left:-2%;
  bottom:-7%;
  opacity:.84;
  clip-path:polygon(0 13%,58% 0,100% 41%,58% 67%,58% 100%,0 84%);
}
.home-split-copy{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:66px clamp(40px,6vw,110px) 64px clamp(48px,6vw,108px);
  background:#fff;
}
.home-split-copy-inner{
  width:100%;
  max-width:720px;
}
.home-split-copy .eyebrow{
  margin-bottom:22px;
  color:#387dbd;
}
.home-split-copy h1{
  margin:0;
  color:#242d34;
  font-size:clamp(3rem,4.6vw,5rem);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:520!important;
  max-width:760px;
}
.home-split-copy h1 span{
  color:#1f547f;
  font-weight:520!important;
}
.home-split-copy p{
  margin:26px 0 0;
  max-width:680px;
  color:#5d6a74;
  font-size:1.08rem;
  line-height:1.62;
}
.home-split-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:36px;
}
.home-split-actions .btn{
  min-width:180px;
  padding:14px 22px;
}
.home-split-link{
  color:#315c7c;
  font-weight:600;
  padding:10px 0;
  border-bottom:1px solid rgba(56,125,189,.28);
}
.home-split-link:hover{
  color:#387dbd;
  border-bottom-color:#387dbd;
}

/* Der Vertrauensstreifen bleibt bewusst direkt unter dem Hero */
.home-credentials{
  position:relative;
  z-index:2;
}

@media(max-width:980px){
  .home-split-hero{
    grid-template-columns:1fr;
    min-height:0;
  }
  .home-split-visual{
    min-height:400px;
    clip-path:none;
  }
  .home-split-copy{
    padding:52px 34px 54px;
  }
}
@media(max-width:640px){
  .home-split-visual{min-height:300px}
  .home-split-copy{padding:40px 22px 44px}
  .home-split-copy h1{font-size:clamp(2.35rem,11vw,3.4rem)}
  .home-split-copy p{font-size:1rem;margin-top:20px}
  .home-split-actions{align-items:flex-start;flex-direction:column;gap:12px;margin-top:28px}
  .home-split-actions .btn{width:100%}
}


/* V1.66 TEST 3 – Startseiten-Split-Prinzip auf allen Unterseiten, Höhe bleibt 320 px */
@media(min-width:981px){
  .page-intro-hero{
    display:block!important;
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
    border-bottom:1px solid #e2e7eb!important;
    overflow:hidden!important;
  }
  .page-intro-hero .page-intro-grid{
    width:100%!important;
    max-width:none!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,46%) minmax(0,54%)!important;
    gap:0!important;
    align-items:stretch!important;
  }
  .page-intro-hero .page-intro-media{
    position:relative!important;
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    overflow:hidden!important;
    background:#d8e0e5!important;
    clip-path:polygon(0 0,92% 0,100% 100%,0 100%)!important;
  }
  .page-intro-hero .page-intro-photo-frame{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    padding:0!important;
    margin:0!important;
    overflow:hidden!important;
    clip-path:none!important;
    border:0!important;
    border-radius:0!important;
    background:#d8e0e5!important;
  }
  .page-intro-hero .page-intro-photo-frame img{
    display:block!important;
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    padding:0!important;
    margin:0!important;
    object-fit:cover!important;
    object-position:center center!important;
  }
  /* dieselben ruhigen anthrazitfarbenen Formen wie auf der Startseite */
  .page-intro-hero .page-intro-media::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    pointer-events:none!important;
    width:43%!important;
    height:48%!important;
    left:-7%!important;
    top:11%!important;
    right:auto!important;
    bottom:auto!important;
    background:rgba(43,51,58,.92)!important;
    opacity:1!important;
    transform:none!important;
    clip-path:polygon(18% 0,100% 37%,60% 66%,60% 100%,0 78%,0 20%)!important;
  }
  .page-intro-hero .page-intro-media::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:3!important;
    pointer-events:none!important;
    width:37%!important;
    height:43%!important;
    left:-2%!important;
    bottom:-7%!important;
    top:auto!important;
    right:auto!important;
    background:rgba(43,51,58,.92)!important;
    opacity:.84!important;
    transform:none!important;
    clip-path:polygon(0 13%,58% 0,100% 41%,58% 67%,58% 100%,0 84%)!important;
  }
  .page-intro-hero .page-intro-copy{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:none!important;
    height:320px!important;
    min-height:320px!important;
    max-height:320px!important;
    padding:24px clamp(42px,5vw,92px)!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  .page-intro-hero .page-intro-copy .eyebrow{
    margin:0 0 11px!important;
    color:#387dbd!important;
    font-size:.70rem!important;
    line-height:1.2!important;
    letter-spacing:.20em!important;
    font-weight:800!important;
  }
  .page-intro-hero .page-intro-copy h1,
  .page-intro-hero-compact .page-intro-copy h1,
  .page-intro-hero-repair .page-intro-copy h1{
    margin:0!important;
    max-width:760px!important;
    color:#242d34!important;
    font-size:clamp(1.95rem,3.2vw,3.15rem)!important;
    line-height:1.03!important;
    letter-spacing:-.03em!important;
    font-weight:520!important;
  }
  .page-intro-hero .page-intro-copy p{
    margin:14px 0 0!important;
    max-width:760px!important;
    color:#5d6a74!important;
    font-size:.94rem!important;
    line-height:1.48!important;
  }
  .page-intro-hero .page-intro-chip{
    order:0!important;
    margin:0 0 8px!important;
    padding:4px 10px!important;
    border:1px solid #d8e4ed!important;
    background:#fff!important;
    color:#315c7c!important;
    border-radius:999px!important;
    font-size:.74rem!important;
    font-weight:700!important;
  }
  .page-intro-hero .actions{
    margin-top:14px!important;
    gap:14px!important;
  }
  .page-intro-hero .actions .btn{
    padding:9px 14px!important;
    min-width:0!important;
    font-size:.84rem!important;
  }
  /* ReparAndy bleibt mit seinem eigenen Bild und vollständig sichtbar */
  .page-intro-hero-repair .page-intro-photo-frame,
  .page-intro-hero-repair .repairandy-intro-frame{
    background:#d8e0e5!important;
  }
  .page-intro-hero-repair .repairandy-intro-frame img{
    object-fit:contain!important;
    object-position:center bottom!important;
    padding:8px 24px 0!important;
    box-sizing:border-box!important;
    background:transparent!important;
  }
}

@media(max-width:980px){
  .page-intro-hero{
    background:#fff!important;
    border-bottom:1px solid #e2e7eb!important;
  }
  .page-intro-hero .page-intro-grid{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  .page-intro-hero .page-intro-media{
    position:relative!important;
    min-height:260px!important;
    overflow:hidden!important;
    clip-path:none!important;
  }
  .page-intro-hero .page-intro-photo-frame{
    position:absolute!important;
    inset:0!important;
    min-height:260px!important;
    clip-path:none!important;
    border-radius:0!important;
  }
  .page-intro-hero .page-intro-photo-frame img{
    width:100%!important;
    height:260px!important;
    object-fit:cover!important;
  }
  .page-intro-hero .page-intro-media::before{
    width:43%!important;height:48%!important;left:-7%!important;top:11%!important;
    background:rgba(43,51,58,.92)!important;
    clip-path:polygon(18% 0,100% 37%,60% 66%,60% 100%,0 78%,0 20%)!important;
  }
  .page-intro-hero .page-intro-media::after{
    width:37%!important;height:43%!important;left:-2%!important;bottom:-7%!important;top:auto!important;
    background:rgba(43,51,58,.92)!important;opacity:.84!important;
    clip-path:polygon(0 13%,58% 0,100% 41%,58% 67%,58% 100%,0 84%)!important;
  }
  .page-intro-hero .page-intro-copy{
    padding:36px 28px 40px!important;
    background:#fff!important;
  }
  .page-intro-hero .page-intro-copy h1{
    color:#242d34!important;
    font-weight:520!important;
  }
  .page-intro-hero .page-intro-copy p{color:#5d6a74!important}
  .page-intro-hero-repair .repairandy-intro-frame img{
    object-fit:contain!important;
    object-position:center bottom!important;
    padding:8px 20px 0!important;
    box-sizing:border-box!important;
  }
}


/* V1.66 TEST 4 – dunkle Formen aus den Bildern raus, stattdessen ruhige Farb-Akzente */
.home-split-shape,
.page-intro-hero .page-intro-media::before,
.page-intro-hero .page-intro-media::after{
  display:none !important;
  content:none !important;
}

/* Startseite: Foto ruhiger, nur mit sehr dezenter Hantke-Blau-Tönung */
.home-split-visual{
  position:relative;
}
.home-split-visual::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(90deg, rgba(56,125,189,.10) 0%, rgba(56,125,189,.05) 24%, rgba(56,125,189,0) 58%);
}
.home-split-visual::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:34px;
  height:100%;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(180deg, rgba(56,125,189,.24), rgba(56,125,189,.10));
  clip-path:polygon(36% 0,100% 0,64% 100%,0 100%);
}

/* Unterseiten: dasselbe ruhige Prinzip */
.page-intro-hero .page-intro-media{
  position:relative !important;
}
.page-intro-hero .page-intro-media > .page-intro-photo-frame::before,
.page-intro-hero .repairandy-intro-frame::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:linear-gradient(90deg, rgba(56,125,189,.08) 0%, rgba(56,125,189,.04) 24%, rgba(56,125,189,0) 58%);
}
.page-intro-hero .page-intro-media > .page-intro-photo-frame::after,
.page-intro-hero .repairandy-intro-frame::after{
  content:"";
  position:absolute;
  top:0;
  right:-1px;
  width:24px;
  height:100%;
  pointer-events:none;
  z-index:3;
  background:linear-gradient(180deg, rgba(56,125,189,.20), rgba(56,125,189,.08));
  clip-path:polygon(38% 0,100% 0,62% 100%,0 100%);
}

@media(max-width:980px){
  .home-split-visual::after,
  .page-intro-hero .page-intro-media > .page-intro-photo-frame::after,
  .page-intro-hero .repairandy-intro-frame::after{
    width:18px;
  }
}


/* V1.66 TEST 5 – Unternehmensseite */
.company-hero .page-intro-copy h1{max-width:700px}
.company-intro{background:#fff}
.company-owner{gap:64px;align-items:center}
.company-person-caption{max-width:520px;margin:14px auto 0;display:flex;gap:8px 18px;align-items:baseline;justify-content:center;flex-wrap:wrap;color:#5f6d78}
.company-person-caption strong{color:#202b34;font-weight:600}
.company-person-caption span{font-size:.9rem}
.company-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.company-facts span{padding:18px 16px;border:1px solid #e0e7ec;background:#f8fafb;border-radius:14px}
.company-facts strong{display:block;color:#26333d;font-size:1rem;font-weight:600}
.company-facts small{display:block;margin-top:5px;color:#6a7883;font-size:.76rem;text-transform:uppercase;letter-spacing:.07em}
.company-values{background:#f5f7f9!important}
.company-values> .wrap > h2{max-width:760px}
.company-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.company-value-card{position:relative;background:#fff;border:1px solid #e0e7ec;border-radius:16px;padding:30px;box-shadow:0 9px 24px rgba(16,40,60,.035)}
.company-value-no{display:inline-block;color:#387dbd;font-size:.72rem;font-weight:700;letter-spacing:.15em;margin-bottom:20px}
.company-value-card h3{margin:0 0 13px;color:#25323c;font-size:1.45rem;font-weight:520;letter-spacing:-.02em}
.company-value-card p{margin:0;color:#5e6c77;line-height:1.65}
.company-statement{background:#fff}
.company-statement-inner{max-width:950px;padding:8px 0 8px 28px;border-left:3px solid #387dbd}
.company-statement .quote{margin:0;color:#202b34!important;font-weight:500!important}
.company-statement .quote small{color:#65727c!important;margin-top:14px}
@media(max-width:900px){
 .company-owner{gap:34px}
 .company-facts,.company-value-grid{grid-template-columns:1fr}
 .company-value-grid{gap:12px}
 .company-person-caption{justify-content:flex-start}
}
@media(max-width:640px){
 .company-owner{gap:26px}
 .company-value-card{padding:24px}
 .company-statement-inner{padding-left:18px}
}


/* V1.66 TEST 6 – Überschriften auf allen Seiten filigraner */
.home-split-copy h1,
.home-split-copy h1 span,
.page-intro-hero .page-intro-copy h1,
.page-intro-hero-compact .page-intro-copy h1,
.page-intro-hero-repair .page-intro-copy h1{
  font-weight: 430 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.05 !important;
}

.section h2,
.cta-band h2,
.social-band h2,
.consulting-band h2,
.phone-choice h2,
.google-review-copy h2,
.repairandy-request-intro h2,
.map-placeholder h3,
.project .body h3,
.card h3,
.company-value-card h3,
.service-tile.service-photo h3,
.repairandy-zone-card h3{
  font-weight: 460 !important;
  letter-spacing: -0.016em !important;
  line-height: 1.08 !important;
}

.quote,
.company-statement .quote{
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.14 !important;
}

@media(max-width:640px){
  .home-split-copy h1,
  .page-intro-hero .page-intro-copy h1,
  .page-intro-hero-compact .page-intro-copy h1,
  .page-intro-hero-repair .page-intro-copy h1{
    line-height:1.06 !important;
  }
}


/* V1.66 TEST 7 – Eyebrow-Texte überall dünner / filigraner */
.eyebrow,
.section .eyebrow,
.trust-strip .eyebrow,
.consulting-band .eyebrow,
.google-score .eyebrow,
.phone-choice .eyebrow,
.repairandy-request-intro .eyebrow,
.repairandy-pricing-head .eyebrow,
.page-intro-copy .eyebrow,
.page-intro-hero .page-intro-copy .eyebrow,
.home-split-copy .eyebrow,
.page-hero .eyebrow,
.calc-hero .eyebrow{
  font-weight: 420 !important;
  letter-spacing: 0.18em !important;
}

.page-intro-copy .eyebrow,
.page-intro-hero .page-intro-copy .eyebrow{
  font-size: .69rem !important;
}

.home-split-copy .eyebrow{
  font-size: .74rem !important;
  margin-bottom: 18px !important;
}

@media(max-width:640px){
  .page-intro-copy .eyebrow,
  .page-intro-hero .page-intro-copy .eyebrow,
  .home-split-copy .eyebrow{
    font-size: .66rem !important;
  }
}


/* V1.66 TEST 8 – Reparaturseite Überschrift ohne störenden Umbruch */
.page-intro-hero-repair .page-intro-copy{
  max-width: 760px !important;
}
.page-intro-hero-repair .page-intro-copy h1{
  font-size: clamp(2rem, 3.35vw, 3.05rem) !important;
  line-height: 1.04 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}
@media(max-width:1200px){
  .page-intro-hero-repair .page-intro-copy h1{
    font-size: clamp(1.9rem, 3.1vw, 2.8rem) !important;
  }
}
@media(max-width:980px){
  .page-intro-hero-repair .page-intro-copy h1{
    white-space: normal !important;
    font-size: clamp(2rem, 7vw, 3rem) !important;
  }
}


/* V1.66 TEST 11 – Kundenkalkulator Bildausschnitt etwas weiter oben */
.page-intro-hero .page-intro-photo-frame img.calc-hero-shift-up{
  object-position:center 40% !important;
}
@media(max-width:980px){
  .page-intro-hero .page-intro-photo-frame img.calc-hero-shift-up{
    object-position:center 38% !important;
  }
}


/* V1.66 TEST 12 – neue Leistungs-Karten */
.service-detail-card.card-fenstergitter{
  background-image:url("images/uploads/fenstergitter/36-20260909-223346-9f0c64.jpg");
  background-position: 54% 50%;
}
.service-detail-card.card-kunst-sonderteile{
  background-image:url("images/uploads/kunst-sonderteile/38-20260909-223741-a0eb77.jpg");
  background-position: 50% 42%;
}
.service-detail-card.card-moebelbau{
  background-image:url("images/uploads/moebelbau/40-20260909-224253-39d8c2.jpg");
  background-position:50% 52%;
}
@media(max-width:640px){
  .service-detail-card.card-fenstergitter,
  .service-detail-card.card-kunst-sonderteile,
  .service-detail-card.card-moebelbau{background-position:center center}
}


/* V1.66 TEST 13 – HANTKE G auf Edelstahl & Glas */
.hantkeg-service-section{background:#f5f7f9!important}
.hantkeg-service-section .section-intro{max-width:900px}
.hantkeg-service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.hantkeg-service-card{background:#fff;border:1px solid #dfe6eb;border-radius:16px;padding:28px;box-shadow:0 8px 22px rgba(16,40,60,.04)}
.hantkeg-service-card>span{display:inline-block;color:#387dbd;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin-bottom:12px}
.hantkeg-service-card h3{margin:0 0 12px;color:#24303a;font-size:1.45rem;font-weight:460;letter-spacing:-.016em}
.hantkeg-service-card p{margin:0;color:#5d6a74;line-height:1.6}
.hantkeg-service-section .actions{margin-top:26px}
@media(max-width:760px){.hantkeg-service-grid{grid-template-columns:1fr}.hantkeg-service-card{padding:24px}}


/* V1.66 TEST 18 – Sichtschutz ergänzt */
.card-sichtschutz{
  background-image:url("images/uploads/sichtschutz/45-20260909-232550-38d559.jpg");
  background-position:50% 50%;
}


/* V1.66 TEST 31 – Vordächer-Herobild weiter nach oben gesetzt */
.page-intro-hero .page-intro-photo-frame img.vordach-hero-shift-up{
  object-position:center 26% !important;
}
@media(max-width:980px){
  .page-intro-hero .page-intro-photo-frame img.vordach-hero-shift-up{
    object-position:center 22% !important;
  }
}


/* V1.66 TEST 35 / 38 – Leistung Hochbeete mit Bild */
.service-detail-card.card-hochbeete{
  background-image:url("images/uploads/leistungskaesten/50-20260910-003052-679a28.jpg");
  background-position:50% 52%;
}
@media(max-width:640px){
  .service-detail-card.card-hochbeete{background-position:50% 50%}
}

/* V1.66 TEST 36 – CAD/3D echte Planungsbilder */
.cad-reference-grid{
  grid-template-columns:minmax(0,760px) !important;
  justify-content:start;
  margin-top:34px;
}
.cad-reference-grid .ref-item{
  aspect-ratio:16/9;
}
.cad-reference-grid .ref-item img{
  object-fit:contain;
  background:#fff;
}


/* V1.66 TEST 41 – Kunst-Hero weiter oben + Hero-Bilder als Referenzen */
.page-intro-hero .page-intro-photo-frame img.kunst-hero-shift-up{
  object-position:center 18% !important;
}
@media(max-width:980px){
  .page-intro-hero .page-intro-photo-frame img.kunst-hero-shift-up{
    object-position:center 14% !important;
  }
}


/* V1.66 TEST 42 – Kunst Siemens Skulptur als Hero */
.page-intro-hero .page-intro-photo-frame img.kunst-hero-siemens{
  object-position:56% 40% !important;
}
@media(max-width:980px){
  .page-intro-hero .page-intro-photo-frame img.kunst-hero-siemens{
    object-position:58% 36% !important;
  }
}


/* V1.66 TEST 58 – Unternehmen Hero mit Andy-Foto */
.company-hero .page-intro-photo-frame img.company-hero-andy{
  object-position:center 22%;
}
.company-owner--textonly{
  max-width:920px;
}
.company-owner--textonly > div{
  width:100%;
}
@media(max-width:900px){
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    object-position:center 18%;
  }
}
@media(max-width:640px){
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    object-position:center 14%;
  }
}


/* V1.66 TEST 66 – Einhausungen als eigene Leistung */
.service-detail-card.card-einhausungen{
  background-image:url("images/uploads/einhausungen/46-20260909-233139-eb0f13.jpg");
  background-position:50% 50%;
}
@media(max-width:640px){
  .service-detail-card.card-einhausungen{background-position:50% 48%}
}


/* V1.66 TEST 68 – sichtbarer Zugang zum Kundenportal */
.topbar .topbar-portal-link{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  margin-left:4px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.01em;
  transition:background .18s ease,border-color .18s ease;
}
.topbar .topbar-portal-link:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.55);
}
@media(max-width:720px){
  .topbar .wrap{gap:8px;align-items:flex-start}
  .topbar .topbar-portal-link{margin-top:5px;margin-left:0}
}


/* V1.66 TEST 69 – Reparaturseite: Sticky-Navi, helle Telefonkarte & helle Zonenkarte */
.repair-page .header{
  position:sticky !important;
  top:0;
  z-index:120;
}

.repair-page .phone-choice.compact{
  background:#f7f9fb;
  border:1px solid #d9e3ea;
  border-left:4px solid var(--accent);
  border-radius:14px;
  box-shadow:0 8px 22px rgba(16,40,60,.04);
}
.repair-page .phone-choice.compact .phone-choice-number{
  display:grid;
  grid-template-columns:52px 1fr;
  grid-template-rows:auto auto;
  column-gap:14px;
  align-items:center;
  min-width:260px;
  padding:14px 17px;
  background:#fff;
  color:#18334a;
  border:1px solid #c9d9e8;
  border-radius:11px;
  box-shadow:0 5px 14px rgba(16,40,60,.045);
  text-decoration:none;
}
.repair-page .phone-choice.compact .phone-choice-number>span{
  grid-row:1/3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:1.45rem;
  line-height:1;
}
.repair-page .phone-choice.compact .phone-choice-number small{
  display:block;
  margin:0 0 2px;
  color:#5b7081;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.02em;
}
.repair-page .phone-choice.compact .phone-choice-number strong{
  display:block;
  color:#18334a;
  font-size:clamp(1.35rem,2vw,1.72rem);
  line-height:1.05;
  letter-spacing:.01em;
  white-space:nowrap;
}
.repair-page .phone-choice.compact .phone-choice-number:hover{
  background:#eef5fb;
  border-color:#9fbed8;
  transform:translateY(-1px);
}

.repair-page .repairandy-map-card{
  background:#fff;
  border:1px solid #d5dde5;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(20,35,50,.045);
}
.repair-page .repairandy-map-card svg{
  background:#f7fafc;
  border:1px solid #e0e8ee;
}
.repair-page .repairandy-map-title span{color:#657786}
.repair-page .repairandy-map-title strong{color:#18334a}

@media(max-width:640px){
  .repair-page .phone-choice.compact .phone-choice-number{
    min-width:0;
    width:100%;
    grid-template-columns:46px 1fr;
  }
  .repair-page .phone-choice.compact .phone-choice-number>span{
    width:42px;
    height:42px;
  }
  .repair-page .phone-choice.compact .phone-choice-number strong{
    font-size:1.28rem;
  }
}


/* V1.66 TEST 70 – neues ReparAndy Hero */
.page-intro-hero-repair .repairandy-intro-frame{
  background:#eef3f6!important;
}
.page-intro-hero-repair .repairandy-intro-frame img.repairandy-hero-new{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:62% center!important;
  padding:0!important;
  background:transparent!important;
}
@media(max-width:980px){
  .page-intro-hero-repair .repairandy-intro-frame img.repairandy-hero-new{
    object-position:60% center!important;
    padding:0!important;
  }
}
@media(max-width:640px){
  .page-intro-hero-repair .repairandy-intro-frame img.repairandy-hero-new{
    object-position:58% center!important;
  }
}


/* V1.66 TEST 71 – Telefonkarte: Nummer passt sauber in den Kasten */
.repair-page .phone-choice.compact .phone-choice-number{
  grid-template-columns:44px minmax(0,1fr);
  column-gap:12px;
  min-width:0;
  width:min(100%,300px);
  padding:12px 14px;
}
.repair-page .phone-choice.compact .phone-choice-number>span{
  width:40px;
  height:40px;
  font-size:1.25rem;
}
.repair-page .phone-choice.compact .phone-choice-number small{
  font-size:.74rem;
}
.repair-page .phone-choice.compact .phone-choice-number strong{
  font-size:clamp(1.12rem,1.35vw,1.4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  white-space:nowrap;
}
@media(max-width:1050px){
  .repair-page .phone-choice.compact .phone-choice-number{
    width:100%;
    max-width:300px;
  }
  .repair-page .phone-choice.compact .phone-choice-number strong{
    font-size:1.18rem;
  }
}
@media(max-width:640px){
  .repair-page .phone-choice.compact .phone-choice-number{
    max-width:none;
    grid-template-columns:40px minmax(0,1fr);
    padding:12px 13px;
  }
  .repair-page .phone-choice.compact .phone-choice-number>span{
    width:38px;
    height:38px;
  }
  .repair-page .phone-choice.compact .phone-choice-number strong{
    font-size:1.16rem;
  }
}

/* V1.66 TEST 72 – kleine blaue Akzenttexte konsequent filigran */
/* Gleiche ruhige Typografie wie die Eyebrows: weniger fett, mehr Luft. */
.card .num,
.section .service-detail-card .num,
.process .step > strong,
.company-value-no,
.team-role,
.repairandy-zone-card .zone-kicker,
.repairandy-map-title span,
.hantkeg-service-card > span{
  font-weight:440 !important;
  letter-spacing:.16em !important;
}

/* Kleine blaue Textlinks nicht mehr so schwer/bold. Buttons bleiben bewusst unberührt. */
.card a:not(.btn),
.section .service-detail-card a:not(.btn),
.service-reference-hero .service-back-link,
.service-link-card::after{
  font-weight:520 !important;
  letter-spacing:.012em !important;
}

/* Unternehmen-Hero: Kopf vollständig zeigen – unten darf dafür mehr wegfallen. */
.company-hero .page-intro-photo-frame img.company-hero-andy{
  object-position:center 2% !important;
}
@media(max-width:900px){
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    object-position:center 1% !important;
  }
}
@media(max-width:640px){
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    object-position:center top !important;
  }
}


/* V1.66 TEST 73 – Unternehmen Hero: Kopf vollständig sichtbar auf der Webseite */
.company-hero .page-intro-media,
.company-hero .page-intro-photo-frame{
  height:360px !important;
  min-height:360px !important;
  max-height:360px !important;
}
.company-hero .page-intro-photo-frame img.company-hero-andy{
  width:100% !important;
  height:360px !important;
  min-height:360px !important;
  max-height:360px !important;
  object-fit:cover !important;
  object-position:center top !important;
}
@media(max-width:900px){
  .company-hero .page-intro-media,
  .company-hero .page-intro-photo-frame{
    height:320px !important;
    min-height:320px !important;
    max-height:320px !important;
  }
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    height:320px !important;
    min-height:320px !important;
    max-height:320px !important;
    object-position:center top !important;
  }
}
@media(max-width:640px){
  .company-hero .page-intro-media,
  .company-hero .page-intro-photo-frame{
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;
  }
  .company-hero .page-intro-photo-frame img.company-hero-andy{
    height:280px !important;
    min-height:280px !important;
    max-height:280px !important;
    object-position:center top !important;
  }
}


/* V1.66 TEST 74 – Leistungsbox ReparAndy mit neuem Motiv */
.service-detail-card.card-reparatur{
  background-image:url("images/reparandy/reparandy-hero-v170.png") !important;
  background-position:78% 26% !important;
  background-size:cover !important;
}
@media(max-width:900px){
  .service-detail-card.card-reparatur{
    background-position:74% 24% !important;
  }
}
@media(max-width:640px){
  .service-detail-card.card-reparatur{
    background-position:68% 20% !important;
  }
}


/* V1.66 TEST 75 – konsequent filigrane Box-Typografie + Telefonkarte final */
/* Kleine Info-/Akzenttexte in Boxen: leicht, ruhig und durchgängig. */
.card .num,
.service-detail-card .num,
.service-photo .badge,
.step > strong,
.process .step > strong,
.company-value-no,
.team-role,
.tag,
.repairandy-zone-card .zone-kicker,
.repairandy-map-title span,
.repairandy-price-notes article > span,
.hantkeg-service-card > span,
.count,
.page-intro-chip{
  font-weight:400 !important;
  letter-spacing:.14em !important;
}

/* Überschriften innerhalb von Karten/Boxen ebenfalls schlanker. */
.card h3,
.service-tile h3,
.step h3,
.project .body h3,
.company-value-card h3,
.team-card h3,
.phone-choice h3,
.repairandy-zone-card h3,
.repairandy-price-notes h3,
.map-placeholder h3,
.calc-panel h3{
  font-weight:430 !important;
}

/* Fett markierte Inhalte innerhalb von Boxen nur noch sanft hervorheben. */
.card strong,
.service-tile strong,
.step strong,
.project strong,
.company-value-card strong,
.team-card strong,
.company-facts strong,
.phone-choice strong,
.repairandy-zone-card strong,
.repairandy-price-notes strong,
.repairandy-form strong,
.repairandy-trust strong,
.calc-panel strong,
.calc-summary strong,
.notice strong,
.pricebox strong,
.google-score strong,
.map-placeholder strong{
  font-weight:480 !important;
}

/* Kleine Links, Labels und Buttons nicht mehr schwer/bold. */
.card a:not(.btn),
.service-detail-card a:not(.btn),
.service-reference-hero .service-back-link,
.service-link-card::after,
.field label,
.form label,
.repairandy-form label,
.calc-tab,
.social-btn,
.contact-social a,
.btn{
  font-weight:480 !important;
}

/* RepairAndy-Ablauf und Vertrauenspunkte filigran. */
.repairandy-steps strong,
.repairandy-trust strong,
.repairandy-map-title strong,
.repairandy-services span,
.repairandy-dark-services span{
  font-weight:450 !important;
}
.repairandy-steps b{
  font-weight:450 !important;
}
.repairandy-zone-price,
.repairandy-zone-price small,
.repairandy-zone-net{
  font-weight:450 !important;
}

/* ReparAndy Telefonkarte: passt sicher in die linke Spalte, ohne Überstand. */
.repair-page .phone-choice.compact{
  grid-template-columns:minmax(0,.88fr) minmax(235px,1.12fr) !important;
  gap:14px !important;
  padding:20px !important;
}
.repair-page .phone-choice.compact .phone-choice-number{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  grid-template-columns:34px minmax(0,1fr) !important;
  column-gap:9px !important;
  padding:10px 11px !important;
  overflow:hidden !important;
}
.repair-page .phone-choice.compact .phone-choice-number>span{
  width:32px !important;
  height:32px !important;
  font-size:1rem !important;
}
.repair-page .phone-choice.compact .phone-choice-number small{
  font-size:.68rem !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1.15 !important;
}
.repair-page .phone-choice.compact .phone-choice-number strong{
  min-width:0 !important;
  max-width:100% !important;
  font-size:clamp(.98rem,1.08vw,1.12rem) !important;
  font-weight:480 !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  font-variant-numeric:tabular-nums !important;
}
@media(max-width:760px){
  .repair-page .phone-choice.compact{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .repair-page .phone-choice.compact .phone-choice-number{
    width:100% !important;
  }
}


/* V1.66 TEST 76 – Unternehmen: Werte-Karten mit Fertigungsfotos */
.company-value-card{
  overflow:hidden;
  isolation:isolate;
  background-color:#fff;
  background-size:cover;
  background-position:center;
}
.company-value-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 48%,rgba(255,255,255,.72) 100%);
}
.company-value-card.company-value-effizienz{
  background-image:url("images/unternehmen/werte-effizienz.jpg");
  background-position:center 56%;
}
.company-value-card.company-value-zuverlaessigkeit{
  background-image:url("images/unternehmen/werte-zuverlaessigkeit.jpg");
  background-position:center 52%;
}
.company-value-card.company-value-seriositaet{
  background-image:url("images/unternehmen/werte-seriositaet.jpg");
  background-position:center 58%;
}
.company-value-card .company-value-no,
.company-value-card h3,
.company-value-card p{
  position:relative;
  z-index:1;
}
@media(max-width:900px){
  .company-value-card::before{
    background:rgba(255,255,255,.84);
  }
}


/* V1.66 TEST 77 – Bewertungssiegel ohne weißen Bildkasten */
.home-page .trust-strip-inner>img,
.trust-strip-inner>img{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}


/* V1.66 TEST 80 – sichtbare KI-Bildkennzeichnung */
.ai-label-host{position:relative!important}
.ai-image-badge{
  position:absolute;right:10px;bottom:10px;z-index:12;
  display:inline-flex;align-items:center;min-height:24px;
  padding:4px 8px;border-radius:999px;
  background:rgba(27,37,45,.82);color:#fff;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  font-size:10px;font-weight:400;letter-spacing:.035em;line-height:1;
  text-shadow:none;pointer-events:none;backdrop-filter:blur(3px);
}
.ai-image-badge-illustration{background:rgba(56,125,189,.86)}
@media(max-width:640px){.ai-image-badge{right:7px;bottom:7px;font-size:9px;padding:4px 7px}}

/* ============================================================
   V1.87 – TOPBAR EINHEITLICH + KOMPAKTER
   Einheitliche Höhe auf allen Seiten; mobil bleibt die linke
   Marken-/Ortszeile bewusst in einer Zeile.
   ============================================================ */
.topbar{
  font-size:.80rem;
  line-height:1;
}
.topbar .wrap{
  height:32px;
  min-height:32px;
  padding:0;
  align-items:center;
  flex-wrap:nowrap;
}
.topbar .wrap > span{
  line-height:1;
  white-space:nowrap;
}
.topbar .topbar-portal-link{
  padding:2px 8px;
  margin-top:0;
  line-height:1.1;
}
@media(max-width:720px){
  .topbar .wrap{
    height:29px;
    min-height:29px;
    padding:0;
    align-items:center;
  }
  .topbar .wrap > span:first-child{
    font-size:clamp(.59rem,2.55vw,.72rem);
    letter-spacing:-.01em;
  }
  .topbar .topbar-portal-link{margin-top:0}
}
@media(max-width:640px){
  .topbar .wrap{
    font-size:inherit;
  }
}

/* ============================================================
   V1.88 – HEADER/HERO NAHTLOS
   Entfernt die feine Trennkante zwischen Hauptnavigation und
   dem direkt folgenden Hero-Bereich beim ersten Seitenaufruf.
   ============================================================ */
.header{
  border-bottom:0 !important;
  box-shadow:none !important;
  margin-bottom:0 !important;
}
.header + main,
.header + .hero,
.header + .page-intro-hero,
.header + .repairandy-showcase,
.header + .repairandy-dark-hero{
  margin-top:0 !important;
}

/* ============================================================
   V1.89 – HEADER AUF ALLEN SEITEN EXAKT GLEICH
   Topbar + Hauptnavigation erhalten feste, kompakte Höhen.
   Alle Seiten verwenden durch Cache-Buster dieselbe CSS-Fassung.
   ============================================================ */
@media (min-width:721px){
  .topbar{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    overflow:hidden !important;
  }
  .topbar .wrap{
    height:30px !important;
    min-height:30px !important;
    max-height:30px !important;
    padding:0 !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .topbar .wrap > span{
    height:30px !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .topbar .topbar-portal-link{
    box-sizing:border-box !important;
    height:21px !important;
    min-height:21px !important;
    padding:0 8px !important;
    margin:0 0 0 5px !important;
    display:inline-flex !important;
    align-items:center !important;
    line-height:1 !important;
    font-size:.74rem !important;
  }
  .header .nav{
    height:72px !important;
    min-height:72px !important;
    max-height:72px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .header .brand-logo img{
    max-height:56px !important;
  }
}
@media (max-width:720px){
  .topbar{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    overflow:hidden !important;
  }
  .topbar .wrap{
    height:28px !important;
    min-height:28px !important;
    max-height:28px !important;
    padding:0 !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .topbar .wrap > span:first-child{
    height:28px !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .header .nav{
    height:68px !important;
    min-height:68px !important;
    max-height:68px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .header .brand-logo img{
    max-height:49px !important;
  }
}

/* ============================================================
   V1.90 – TOPBAR ABSTÄNDE + NAVIGATIONSKONSISTENZ
   Explizite Flex-Abstände verhindern, dass Leerzeichen zwischen
   Telefon, E-Mail und Kundenportal durch Flex-Layout verschwinden.
   ============================================================ */
.topbar .topbar-contact{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  white-space:nowrap !important;
}
.topbar .topbar-contact > *{
  flex:0 0 auto;
}
.topbar .topbar-contact .topbar-sep{
  display:inline-block !important;
  opacity:.9;
  margin:0 1px !important;
}
.topbar .topbar-contact .topbar-portal-link{
  margin-left:0 !important;
}

/* ============================================================
   V1.92c – SAFE MOBILE HEADER + REPARANDY HERO
   Nur mobile Korrekturen:
   - rechte Kontaktgruppe in der Topbar auf kleinen Geräten ausblenden
   - ReparAndy-Hero NICHT neu aufbauen, sondern nur den Bildausschnitt
     auf Smartphones weiter nach links verschieben
   ============================================================ */
@media (max-width:640px){
  .topbar .topbar-contact{
    display:none !important;
  }
  .topbar .wrap{
    justify-content:flex-start !important;
  }
  .page-intro-hero-repair .repairandy-intro-frame img.repairandy-hero-new,
  .page-intro-hero-repair .repairandy-intro-frame img{
    width:100% !important;
    height:260px !important;
    object-fit:cover !important;
    object-position:34% center !important;
    padding:0 !important;
    box-sizing:border-box !important;
    background:transparent !important;
    display:block !important;
  }
}

/* ============================================================
   V1.94 - Bild selbst an die vergroesserte Unterseiten-Spalte binden
   Ueberschreibt auch speziellere Bildregeln einzelner Unterseiten.
   Die Startseite (.home-page) bleibt ausgeschlossen.
   ============================================================ */
@media (min-width:981px){
  body:not(.home-page) .page-intro-hero .page-intro-media,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.company-hero-andy,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.repairandy-hero-new,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.project-hero-fit{
    height:400px !important;
    min-height:400px !important;
    max-height:400px !important;
  }
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img{
    display:block !important;
    width:100% !important;
  }
}

/* ============================================================
   V1.93 - Unterseiten-Hero hoeher, Bilder vollstaendiger sichtbar
   Gilt bewusst nur fuer .page-intro-hero; die Startseite bleibt unveraendert.
   ============================================================ */
@media (min-width:981px){
  .page-intro-hero,
  .page-intro-hero .page-intro-grid,
  .page-intro-hero .page-intro-media,
  .page-intro-hero .page-intro-photo-frame,
  .page-intro-hero .page-intro-photo-frame img,
  .page-intro-hero .page-intro-copy{
    height:400px !important;
    min-height:400px !important;
    max-height:400px !important;
  }
}

@media (min-width:641px) and (max-width:980px){
  .page-intro-hero .page-intro-media,
  .page-intro-hero .page-intro-photo-frame{
    min-height:320px !important;
  }
  .page-intro-hero .page-intro-photo-frame img{
    height:320px !important;
    min-height:320px !important;
  }
}

@media (max-width:640px){
  .page-intro-hero .page-intro-media,
  .page-intro-hero .page-intro-photo-frame{
    min-height:300px !important;
  }
  .page-intro-hero .page-intro-photo-frame img,
  .page-intro-hero-repair .repairandy-intro-frame img.repairandy-hero-new,
  .page-intro-hero-repair .repairandy-intro-frame img{
    height:300px !important;
    min-height:300px !important;
  }
}

/* ============================================================
   V1.98 - Unterseiten-Hero 525px + vollstaendige Ueberschriften
   Die Startseite bleibt unveraendert. Auf schmaleren Desktopbreiten
   darf die Ueberschrift sauber umbrechen, statt abgeschnitten zu werden.
   ============================================================ */
@media (min-width:981px){
  body:not(.home-page) .page-intro-hero,
  body:not(.home-page) .page-intro-hero .page-intro-grid,
  body:not(.home-page) .page-intro-hero .page-intro-media,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.company-hero-andy,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.repairandy-hero-new,
  body:not(.home-page) .page-intro-hero .page-intro-photo-frame img.project-hero-fit,
  body:not(.home-page) .page-intro-hero .page-intro-copy{
    height:525px !important;
    min-height:525px !important;
    max-height:525px !important;
  }

  body:not(.home-page) .page-intro-hero .page-intro-copy{
    min-width:0 !important;
  }

  body:not(.home-page) .page-intro-hero .page-intro-copy h1{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    font-size:clamp(2rem, 2.8vw, 2.8rem) !important;
    line-height:1.08 !important;
  }
}